/* Mekong Bridge Advisory — Homepage (internal review build) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* ---- Palette — Part 3, section 13 of the September 2026 content document.
     Treated as fixed. Neutrals ~80% of the page, navy family 20-30%,
     accent 5-10%. ---------------------------------------------------- */
  --paper:#FFFFFF;
  --river-mist:#F5F8FC;
  --pale-aqua:#EAEFF7;
  --midnight:#1C2436;
  --navy-deep:#2E3A54;

  --ink:#121927;
  --ink-2:#586176;
  --on-dark-1:#FFFFFF;
  --on-dark-2:#D5D8DD;
  --on-dark-3:#A9B4C6;

  --accent:#4C78A8;            /* system blue: mechanism, process, links */
  --accent-small:#456D99;       /* the accent for small labels on light bands: 4.6:1 on every grey band */
  --accent-dark-bg:#8FB2D9;    /* same role, calibrated for dark bands */
  --signal:#4C78A8;            /* was #0879E6; now the document accent */
  --btn:#4C78A8;               /* primary button fill, light and dark bands */
  --btn-hover:#2E3A54;         /* navy from the palette */
  /* emphasis colour:
                                  highlighted words in headlines, primary CTA.
                                  Nothing else, and never adjacent to --accent. */

  --line:#E5E7EB;
  --rule:#D5D8DD;
  --slate:#5F6775;

  --error:#B03A2E;             /* form status only */
  --success:#1E7A4B;           /* form status only */

  /* ---- Legacy token names, remapped onto the new system so the ~470
     existing references shift with it rather than being rewritten. ---- */
  --near-black:#1C2436;
  --bone:#F5F8FC;
  --navy:#1C2436;
  --navy-hover:#161D2C;
  --blue-grey:#586176;
  --light-grey:#EAEFF7;
  --white:#FFFFFF;

  /* ---- Typography — Part 3, section 14. Two faces, strict roles. ---- */
  --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', Arial, Helvetica, sans-serif;

  /* one fluid scale, used everywhere */
  --t-display: clamp(40px, 5.4vw, 72px);
  --t-h1:      clamp(34px, 4.1vw, 54px);
  --t-h2:      clamp(30px, 3.4vw, 44px);
  --t-h2-long: clamp(26px, 2.8vw, 36px);
  --t-h3:      clamp(19px, 1.5vw, 23px);
  --t-stat-lg: clamp(34px, 4.1vw, 54px);
  --t-stat:    clamp(18px, 1.5vw, 23px);
  --t-lead:    clamp(17px, 1.2vw, 19px);
  --t-body:    15px;
  --t-small:   clamp(11px, 0.9vw, 14px);

  --max-w:1200px;
  --section-pad: clamp(4rem, 8vw, 8rem);
  --ease: cubic-bezier(.16,.8,.24,1);
  --shadow-sm: 0 2px 10px rgba(28,36,54,0.06);
  --shadow-md: 0 16px 40px -12px rgba(28,36,54,0.22);
  --shadow-lg: 0 30px 70px -20px rgba(0,0,0,0.45);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


.grain{position:relative;}
.grain::after{
  content:'';
  position:absolute;inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:var(--grain);
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  color:var(--navy);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}

.wrap{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.5rem, 4vw, 3rem);}

a{color:inherit;text-decoration:none;}

.eyebrow{
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--accent-small);
  display:inline-flex;
  align-items:center;
  margin-bottom:1.25rem;
}


h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.03em;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:1.6rem 0;
  transition:background .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-dark .nav-links a{color:var(--bone);}
.nav.is-scrolled{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:1.25rem 0;
  border-bottom:1px solid rgba(255,255,255,0.14);
  box-shadow:none;
}
.nav.is-scrolled .nav-links a{
  text-shadow:0 1px 2px rgba(0,0,0,0.85);
}
.nav.is-scrolled .nav-logo img{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.85));
}
.nav.nav-theme-light .nav-links a{
  color:var(--navy);
  text-shadow:none;
}
.nav.nav-theme-light .nav-links a:hover{color:var(--accent);}
.nav.nav-theme-light .nav-logo img{
  filter:none;
  -webkit-filter:none;
}
/* on light sections the bar becomes a real light surface, so the navy logo and
   links always sit on something rather than floating on a translucent dark */
.nav.nav-theme-light{
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(16,29,45,0.08);
}
.nav.nav-theme-light .nav-menu-toggle{color:var(--navy);}
.nav .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2.75rem;min-height:40px;}
.nav-logo{display:flex;align-items:center;margin-left:26px;}
.nav-logo img{height:60px;width:auto;display:block;transition:height .3s var(--ease);}
.nav.is-scrolled .nav-logo img{height:50px;}
.footer-logo{display:flex;align-items:center;gap:0.6rem;}
.footer-logo img{height:18px;width:auto;filter:brightness(0) invert(1) opacity(0.85);}
.footer-logo span{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.85rem;
  color:rgba(245,241,232,0.85);
}
.nav-links{display:flex;gap:1.6rem;list-style:none;}
.nav-links a{
  font-size:0.87rem;
  font-weight:500;
  color:var(--bone);
  opacity:0.9;
  white-space:nowrap;
  transition:opacity .2s ease;
}
.nav-links a:hover{opacity:1;color:var(--accent);}
.nav-menu-toggle{
  display:none;
  position:absolute;
  right:clamp(1.5rem, 4vw, 3rem);
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:0;
  color:var(--bone);
  font-size:1.5rem;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  height:100%;
  box-sizing:border-box;
  padding-bottom:clamp(140px, 16vh, 165px);
  background:var(--near-black);
  color:var(--bone);
  overflow:hidden;
  display:flex;
  align-items:center;
  /* the nav is fixed and ~112px tall; centre the block in the space below it */
  padding-top:clamp(124px, 15vh, 156px);
}
/* wrapper is what the scroll scrub transforms, so the video itself stays simple */
.hero-media{
  position:absolute;
  inset:0;
  overflow:hidden;
  transform-origin:50% 55%;
  will-change:transform, filter;
  backface-visibility:hidden;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-scrim{
  position:absolute;inset:0;
  background:/* pool of shade sitting directly behind the headline block */
    radial-gradient(66% 56% at 50% 46%, rgba(28,36,54,0.90) 0%, rgba(28,36,54,0.66) 44%, rgba(28,36,54,0.30) 74%, rgba(28,36,54,0) 100%),
    /* top band keeps the nav legible, bottom band anchors the CTA and cue */
    linear-gradient(to bottom, rgba(28,36,54,0.78) 0%, rgba(28,36,54,0.34) 32%, rgba(28,36,54,0.44) 62%, rgba(28,36,54,0.90) 100%),
    /* gentle side vignette so the frame edges hold */
    radial-gradient(120% 100% at 50% 50%, rgba(28,36,54,0) 55%, rgba(28,36,54,0.55) 100%);
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding-top:0;
  padding-bottom:0;
}
.hero-content .wrap{
  max-width:1180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin:0 auto;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(28,36,54,0.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(6px);
  padding:0.5rem 1.1rem;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  margin-bottom:clamp(1.35rem,3vh,2rem);
  text-shadow:0 2px 10px rgba(0,0,0,0.5);
  opacity:0;
  animation:heroFadeUp .7s var(--ease) .1s forwards;
}
.hero h1{
  font-size:clamp(1.95rem, 4.6vw, 58px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-1.8px;
  text-wrap:balance;
  margin-top:0;
  color:var(--bone);
  text-shadow:0 2px 6px rgba(2,6,12,0.85), 0 8px 34px rgba(2,6,12,0.72), 0 1px 2px rgba(2,6,12,0.9);
  opacity:0;
  animation:heroFadeUp .7s var(--ease) .22s forwards;
}
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  background:var(--btn);
  color:var(--bone);
  font-size:0.9rem;
  font-weight:600;
  padding:0.95rem 1.75rem;
  border-radius:8px;
  box-shadow:0 10px 30px -8px rgba(76,120,168,0.5);
  transition:background .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.hero-cta svg{width:16px;height:16px;transition:transform .2s var(--ease);}
.hero-cta:hover{background:var(--btn-hover);transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(76,120,168,0.6);}
.hero-cta:hover svg{transform:translateX(3px);}
.hero-cta:active{transform:translateY(0) scale(0.97);}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.hero-scroll-cue{
  position:absolute;
  bottom:2.5rem;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  font-size:0.7rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(245,241,232,0.68);
  text-shadow:0 2px 10px rgba(2,6,12,0.8);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.6rem;
}
.hero-scroll-cue::after{
  content:'';
  width:1px;height:32px;
  background:linear-gradient(180deg, rgba(245,241,232,0.7), transparent);
}

/* ---------- BELIEVE + DO (scroll-scrubbed sliding layers) ---------- */
.reveal-stack{
  position:relative;
  height:440vh;   /* believeIn removed: Believe is present from the start */
}
.reveal-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}
.stack-layer{
  position:absolute;
  inset:0;
  background:var(--white);
  display:flex;
  flex-direction:column;
  padding-top:clamp(140px, 16vh, 165px);
  padding-bottom:clamp(140px, 16vh, 165px);
  box-sizing:border-box;
  will-change:transform;
}

/* Believe is the stack's resting state now — the hero is covered upstream */
#layerBelieve{z-index:2;justify-content:center;}
#layerDo{z-index:3;transform:translateY(100%);}

.stack-wide{
  max-width:1680px;
  width:100%;
  margin:0 auto;
  padding:0 clamp(2rem, 5vw, 5rem);
  box-sizing:border-box;
}

.believe-block{text-align:center;}
.believe-block .eyebrow{justify-content:center;font-size:0.78rem;margin-bottom:0.9rem;}
.believe-block .eyebrow::before{display:none;}
.believe-block h2{
  font-size:clamp(2.2rem, 4.6vw, 3.75rem);
  color:var(--navy);
}
.believe-block h2 em{
  font-style:italic;
  font-weight:800;
  color:var(--accent);
}
.believe-block p{
  margin:1.25rem auto 0;
  font-size:clamp(1rem, 1.6vw, 1.25rem);
  color:var(--blue-grey);
  max-width:840px;
  line-height:1.55;
}

.do-inner{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding-bottom:clamp(1rem, 2.5vh, 1.75rem);
}
.do-head{
  text-align:center;
  flex-shrink:0;
  margin-bottom:clamp(2.4rem, 6vh, 3.75rem);
}
.do-head .eyebrow{justify-content:center;margin-bottom:0.6rem;font-size:0.78rem;}
.do-head .eyebrow::before{display:none;}
.do-head .do-intro{
  font-size:clamp(1.4rem, 2.8vw, 1.9rem);
  font-weight:600;
  color:var(--navy);
  max-width:860px;
  margin:0 auto;
}

.service-stage{
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.service-panel{
  position:absolute;
  inset:0;
  background:var(--white);
  display:grid;
  grid-template-columns:380px 1fr;
  gap:clamp(2rem, 4vw, 4rem);
  align-items:center;
  will-change:transform;
  /* the stage clips (it has to, for the slide transition), so hold the card off
     its top/right/bottom edges or the drop shadow gets cut and reads as truncated */
  padding:10px 30px 32px 0;
  box-sizing:border-box;
}
.service-panel-text{min-width:0;}
.service-num{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem, 4.5vh, 3rem);
  color:#D8DEE5;
  line-height:1;
  margin-bottom:0.5rem;
}
.service-panel-text h3{
  font-size:clamp(1.3rem, 2.8vh, 1.75rem);
  font-weight:700;
  color:var(--navy);
  margin-bottom:0.75rem;
  letter-spacing:-0.01em;
  line-height:1.2;
}
.service-panel-text p{
  font-size:clamp(0.88rem, 1.8vh, 1rem);
  line-height:1.55;
  color:var(--blue-grey);
  margin-bottom:1.4rem;
}
.service-cta{
  display:inline-flex;
  align-items:center;
  background:var(--navy);
  color:var(--white);
  font-size:0.88rem;
  font-weight:600;
  padding:0.8rem 1.5rem;
  border-radius:6px;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.service-cta:hover{background:var(--navy-hover);transform:translateY(-2px);}

.service-panel-visual{
  height:100%;
  display:flex;
  align-items:stretch;
  min-height:0;
}
.mock-outer{
  width:100%;
  height:100%;
  background:var(--light-grey);
  border-radius:16px;
  padding:clamp(0.9rem, 1.8vh, 1.5rem);
  box-shadow:var(--shadow-md);
  display:flex;
  align-items:stretch;
  box-sizing:border-box;
  overflow:hidden;
}
.mock-inner{
  width:100%;
  height:100%;
  background:var(--white);
  border-radius:12px;
  padding:clamp(0.9rem, 2vh, 1.6rem);
  box-shadow:0 20px 45px -20px rgba(16,29,45,0.25);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mock-label{
  display:block;
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--blue-grey);
  margin-bottom:0.85rem;
}
.mock-divider{height:1px;background:#E4E7EB;margin:0.85rem 0;}

/* Service 01 — pipeline mock */
.pipeline-row{display:flex;align-items:stretch;gap:0.4rem;}
.pipe-stage{
  flex:1;
  min-width:0;
  border-radius:10px;
  padding:0.55rem 0.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0.2rem;
}
.pipe-stage svg{width:17px;height:17px;}
.pipe-stage strong{font-size:0.74rem;color:var(--navy);}
.pipe-stage span{font-size:0.63rem;color:var(--blue-grey);}
.pipe-incoming{background:var(--light-grey);border:1.5px dashed #C7CDD4;}
.pipe-progress{background:var(--light-grey);border:1.5px solid #C7CDD4;}
.pipe-done{background:rgba(76,120,168,0.08);border:1.5px solid var(--accent);}
.pipe-done strong{color:var(--accent);}
.pipe-connector{
  align-self:center;
  width:clamp(8px,1.6vw,20px);
  height:2px;
  background:#C7CDD4;
  flex-shrink:0;
}
.pipe-connector-hot{background:linear-gradient(90deg, #C7CDD4, var(--accent));}
.review-row{display:flex;align-items:center;gap:0.6rem;}
.review-badge{
  flex-shrink:0;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--navy);
  color:var(--bone);
  display:flex;align-items:center;justify-content:center;
}
.review-badge svg{width:13px;height:13px;}
.review-row span:last-child{font-size:0.72rem;color:var(--blue-grey);line-height:1.35;}
.review-row strong{color:var(--navy);}
.metric-strip{display:flex;gap:1rem;}
.metric{flex:1;display:flex;flex-direction:column;gap:0.3rem;}
.metric-num{font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--navy);}
.metric-bar{height:3px;background:var(--accent);border-radius:2px;}
.metric-cap{font-size:0.62rem;color:var(--blue-grey);}

/* Service 02 — chat mock */
.chat-header{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.7rem;}
.chat-dots{display:flex;gap:0.3rem;}
.chat-dots i{width:7px;height:7px;border-radius:50%;background:#D8DEE5;display:block;}
.chat-header strong{font-size:0.78rem;color:var(--navy);}
.chat-question{
  display:inline-block;
  background:var(--light-grey);
  color:var(--navy);
  font-size:0.82rem;
  padding:0.6rem 0.9rem;
  border-radius:10px;
  max-width:90%;
  margin-bottom:0.9rem;
}
.chat-answer{font-size:0.85rem;line-height:1.6;color:var(--blue-grey);}
.chat-highlight{
  background:rgba(76,120,168,0.12);
  color:var(--accent);
  font-weight:700;
  padding:0.05rem 0.4rem;
  border-radius:5px;
}
.source-chips{display:flex;flex-wrap:wrap;gap:0.5rem;}
.chip{
  font-size:0.68rem;
  color:var(--blue-grey);
  background:var(--light-grey);
  padding:0.3rem 0.65rem;
  border-radius:999px;
}
.chip-active{
  background:rgba(76,120,168,0.1);
  color:var(--accent);
  border:1px solid rgba(76,120,168,0.3);
  font-weight:600;
}

/* Service 03 — flow mock */
.flow-row{display:flex;align-items:flex-start;gap:0.4rem;}
.flow-stage{
  flex:1;
  min-width:0;
  border-radius:10px;
  padding:0.55rem 0.45rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0.2rem;
}
.flow-stage svg{width:16px;height:16px;}
.flow-stage strong{font-size:0.68rem;line-height:1.2;}
.flow-stage span{font-size:0.58rem;min-height:0.85em;}
.flow-stage em{font-style:normal;font-size:0.6rem;color:var(--blue-grey);margin-top:0.15rem;}
.flow-locked{background:var(--navy);color:var(--bone);}
.flow-locked span{color:rgba(245,241,232,0.6);}
.flow-neutral{background:var(--light-grey);border:1px solid #C7CDD4;color:var(--navy);}
.flow-neutral span{color:var(--blue-grey);}
.flow-done{background:rgba(76,120,168,0.08);border:1px solid var(--accent);color:var(--accent);}
.flow-done span{color:var(--accent);}
.flow-connector{align-self:center;margin-top:15px;width:clamp(6px,1.5vw,16px);height:2px;background:#C7CDD4;flex-shrink:0;}
.flow-connector-hot{background:var(--accent);}
.compliance-row{display:flex;justify-content:center;gap:0.5rem;margin-top:0.85rem;flex-wrap:wrap;}
.badge-pill{
  font-size:0.68rem;
  font-weight:700;
  color:var(--navy);
  background:var(--light-grey);
  padding:0.4rem 0.9rem;
  border-radius:999px;
}

.service-dots{
  display:flex;
  justify-content:center;
  gap:0.6rem;
  margin-top:clamp(1rem, 2.5vh, 1.5rem);
  flex-shrink:0;
}
.dot{
  width:32px;height:3px;
  border-radius:2px;
  background:#D8DEE5;
  border:0;
  padding:0;
  cursor:pointer;
  transition:background .3s var(--ease), width .3s var(--ease);
}
.dot:hover{background:#C3CBD4;}
.dot.is-active{background:var(--accent);width:46px;}
.dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

@media (max-width:980px){
  .reveal-stack{height:auto;}
  .reveal-sticky{position:relative;top:auto;height:auto;overflow:visible;}
  .stack-layer{position:static;transform:none !important;padding-top:calc(160px + 1rem + 1.5rem);}
  #layerHero{height:100vh;min-height:640px;}
  #layerBelieve{padding-bottom:2.5rem;}
  .do-inner{padding-bottom:0;}
  .service-stage{position:static;height:auto;overflow:visible;}
  .service-panel{
    position:static;
    transform:none !important;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    padding:2.5rem 0;
    border-top:1px solid #E4E7EB;
  }
  .service-panel:first-child{border-top:0;padding-top:0;}
  .service-panel-visual{max-height:none;}
  .service-dots{display:none;}
}

/* ---------- PROOF / WHAT WINNING LOOKS LIKE ---------- */
.proof{position:relative;background:var(--white);}

/* scroll runway for the pinned transfer */
.pf-scrub{height:260vh;position:relative;}
.pf-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;}
.pf-pin-inner{width:100%;}

.pf-head{max-width:760px;margin:0 auto clamp(2rem,5vh,3.25rem);text-align:center;}
.pf-head h2{
  font-size:clamp(1.9rem,4.2vw,2.9rem);
  color:var(--navy);letter-spacing:-0.03em;line-height:1.08;
}
.pf-head p{
  margin-top:0.9rem;font-size:clamp(0.98rem,1.8vw,1.08rem);
  line-height:1.6;color:var(--blue-grey);max-width:58ch;
  margin-left:auto;margin-right:auto;
}

/* ---- the figure ---- */
.pf-figure{
  display:flex;align-items:baseline;justify-content:center;gap:0.06em;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.6rem,7.5vw,5.5rem);
  line-height:1;letter-spacing:-0.045em;color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.pf-tilde,.pf-dash{color:#B9C3CE;font-weight:600;}
.pf-unit{
  font-size:0.26em;font-weight:600;letter-spacing:0.02em;
  color:var(--blue-grey);margin-left:0.5em;
}
.pf-caption{
  margin-top:0.7rem;font-size:clamp(0.92rem,1.7vw,1.02rem);
  color:var(--blue-grey);text-align:center;
}
.pf-caption-sub{
  display:block;margin-top:0.35rem;
  font-size:0.82rem;color:#9AA5B1;
}

/* ---- the transfer ---- */
.pf-flow{margin-top:clamp(2.75rem,7vh,4.5rem);}

.pf-ends{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  margin-bottom:clamp(1.1rem,2.6vh,1.75rem);
}
.pf-side{transition:opacity .4s var(--ease), filter .4s var(--ease);}
.pf-side-label{
  display:block;font-size:0.68rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;margin-bottom:0.5rem;
}
.pf-from .pf-side-label{color:#9AA5B1;}
.pf-to   .pf-side-label{color:var(--accent);}
.pf-side p{font-size:clamp(0.86rem,1.55vw,0.96rem);line-height:1.55;max-width:44ch;}
.pf-from p{color:var(--blue-grey);}
.pf-to   p{color:var(--navy);font-weight:600;}
.pf-to{text-align:right;justify-self:end;}
.pf-to p{margin-left:auto;}

/* full-width track the hours travel along */
.pf-rail{position:relative;height:104px;display:flex;align-items:center;}
.pf-rail-line{
  position:absolute;left:0;right:0;top:50%;height:1px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,#D9E0E7 0 1px,transparent 1px 5px) top/100% 1px no-repeat,
    repeating-linear-gradient(90deg,#E7ECF1 0 22px,#CBD4DD 22px 23px) center/100% 9px no-repeat;
  opacity:0.9;
}
.pf-bar{
  position:relative;
  display:flex;
  width:38%;
  height:82px;
  border-radius:14px;
  overflow:visible;
  will-change:transform;
}
.pf-bar-glow{
  position:absolute;inset:-14px -18px;
  border-radius:26px;
  background:radial-gradient(60% 120% at 50% 50%, rgba(76,120,168,0.34), transparent 70%);
  filter:blur(14px);
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.pf-seg{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(0.85rem,1.7vw,1.35rem);
  min-width:0;
  transition:background .5s var(--ease);
}
.pf-seg:first-child{border-radius:14px 0 0 14px;}
.pf-seg:last-child{border-radius:0 14px 14px 0;}
.pf-seg-a{flex:0 0 68%;background:#8E9AA8;}
.pf-seg-b{flex:0 0 32%;background:#B6BFC9;}
.pf-seg em{
  font-style:normal;font-size:0.64rem;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(255,255,255,0.82);
  white-space:nowrap;
}
.pf-seg b{
  font-size:clamp(0.82rem,1.5vw,0.98rem);color:#fff;font-weight:700;
  white-space:nowrap;margin-top:0.2rem;font-variant-numeric:tabular-nums;
}

/* transit meter */
.pf-meter{
  display:flex;align-items:center;gap:clamp(0.75rem,2vw,1.25rem);
  margin-top:clamp(1rem,2.4vh,1.6rem);
}
/* caveat now sits with the claim it qualifies, under the transfer */
.pf-flow .pf-note{
  margin:clamp(1.75rem,3.8vh,2.5rem) 0 0;
  max-width:none;text-align:center;
  font-size:0.76rem;line-height:1.65;color:#8894A2;font-style:italic;
}
.pf-status{
  font-size:0.64rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:#B4BEC9;white-space:nowrap;
  transition:color .4s var(--ease);
}
.pf-status.is-on{color:var(--accent);}
.pf-meter-track{
  flex:1;height:2px;border-radius:2px;background:#E7ECF1;overflow:hidden;
}
.pf-meter-fill{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#8E9AA8,var(--accent));
  transition:width .12s linear;
}

/* ---- outcome cards after the pin ---- */
.pf-after{padding:clamp(3rem,8vh,5.5rem) 0 clamp(7rem,15vh,11rem);}
.pf-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.1rem,2.2vw,1.6rem);
}
.pf-card{
  position:relative;
  display:flex;flex-direction:column;
  cursor:default;
  border:1px solid #E2E7EC;border-radius:18px;
  padding:clamp(1.5rem,2.7vw,2rem) clamp(1.3rem,2.3vw,1.75rem);
  background:var(--white);
  overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.pf-card:hover,.pf-card.is-picked{
  transform:translateY(-5px);
  box-shadow:0 20px 44px rgba(16,29,45,0.11);
  border-color:rgba(76,120,168,0.45);
}
.pf-card:hover .pf-card-icon,.pf-card.is-picked .pf-card-icon{
  background:var(--accent);color:#fff;transform:scale(1.05);
}

.pf-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;}
.pf-card-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(76,120,168,0.09);
  color:var(--accent);
  transition:background .45s var(--ease), transform .5s var(--ease);
}
.pf-card-icon svg{width:21px;height:21px;}
.pf-card:hover .pf-card-icon{background:rgba(76,120,168,0.16);transform:scale(1.05);}
.pf-card-idx{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--navy);color:var(--bone);
  font-size:0.72rem;font-weight:700;
}
.pf-card h3{
  font-size:clamp(0.9rem,1.55vw,1rem);font-weight:700;
  letter-spacing:0.028em;text-transform:uppercase;
  color:var(--navy);margin-bottom:0.9rem;line-height:1.25;
  white-space:nowrap;
}
/* the "more" half lives in the swapping panel on desktop; kept here for touch */
.pf-card-block-now{display:none;}
.pf-card-block + .pf-card-block{
  margin-top:0.85rem;padding-top:0.85rem;border-top:1px solid #EDF0F3;
}
.pf-card-label{
  display:block;font-size:0.63rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:#9AA5B1;margin-bottom:0.35rem;
}
.pf-card-label-now{color:var(--accent);}
/* both navy — weight alone separates before from after */
.pf-card-less{
  font-size:0.92rem;line-height:1.6;color:var(--navy);font-weight:400;
  min-height:calc(0.92rem * 1.6 * 3);
}
.pf-card-more{font-size:0.92rem;line-height:1.6;color:var(--navy);font-weight:700;}

/* ---- bottom row: statement swaps to the hovered card, visual follows ---- */
.pf-foot{
  display:grid;
  grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);
  gap:clamp(1.25rem,2.6vw,2rem);
  align-items:stretch;
  margin-top:clamp(2.5rem,6vh,3.5rem);
}
.pf-statement{
  position:relative;
  border:1px solid #E2E7EC;
  border-radius:20px;
  background:linear-gradient(180deg,#FBFCFE 0%,#F4F8FD 100%);
  padding:clamp(1.75rem,3.4vh,2.3rem) clamp(1.75rem,3.2vw,2.5rem);
  display:flex;align-items:center;gap:clamp(1rem,2vw,1.5rem);
  overflow:hidden;
  min-height:clamp(140px,17vh,168px);
}
.pf-statement-glow{
  position:absolute;left:50%;bottom:-130%;
  width:min(760px,95%);aspect-ratio:2/1;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(76,120,168,0.20), transparent 68%);
  filter:blur(30px);pointer-events:none;
}
/* icon swaps with the message */
.pf-marks{position:relative;z-index:2;flex-shrink:0;width:46px;height:46px;}
.pf-mark{
  position:absolute;inset:0;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  box-shadow:0 10px 24px -8px rgba(76,120,168,0.6);
  opacity:0;transform:scale(.82) rotate(-8deg);
  transition:opacity .38s var(--ease), transform .48s cubic-bezier(.19,1,.22,1);
}
.pf-mark svg{width:23px;height:23px;}
.pf-mark.is-on{opacity:1;transform:scale(1) rotate(0);}

.pf-says{position:relative;z-index:2;flex:1;min-width:0;display:grid;}
.pf-say{
  margin:0;
  font-size:clamp(1rem,1.7vw,1.24rem);
  font-weight:600;letter-spacing:-0.02em;line-height:1.35;
  color:var(--navy);text-wrap:balance;
  opacity:0;transform:translateY(10px);
  transition:opacity .38s var(--ease), transform .48s cubic-bezier(.19,1,.22,1);
}
.pf-say{grid-area:1/1;align-self:center;}
.pf-say.is-on{opacity:1;transform:translateY(0);}
.pf-say em{font-style:normal;color:var(--accent);font-weight:700;}
.pf-say-label{
  display:block;font-size:0.63rem;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:0.5rem;
}

/* ---- the visual panel ---- */
.pf-visual{
  position:relative;
  --pf-vis-inset:clamp(1.25rem,2.4vw,1.75rem);
  border:1px solid #E2E7EC;border-radius:20px;
  background:var(--white);
  padding:var(--pf-vis-inset);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.pf-vis{
  position:absolute;
  left:var(--pf-vis-inset);right:var(--pf-vis-inset);
  opacity:0;transition:opacity .4s var(--ease);
  pointer-events:none;
}
.pf-vis.is-on{opacity:1;}

/* resting: a calm pulse belonging to none of the three */
.pf-vis-idle{height:96px;display:flex;align-items:center;justify-content:center;}
.pf-vis-idle span{
  position:absolute;border-radius:50%;
  border:1px solid rgba(76,120,168,0.35);
  width:34px;height:34px;
  animation:pfPulse 3.2s ease-out infinite;
}
.pf-vis-idle span:nth-child(2){animation-delay:1.05s;}
.pf-vis-idle span:nth-child(3){animation-delay:2.1s;}
.pf-vis-idle i{width:9px;height:9px;border-radius:50%;background:var(--accent);}
@keyframes pfPulse{
  0%{transform:scale(1);opacity:0.75;}
  100%{transform:scale(2.5);opacity:0;}
}

/* 1 — hours reallocating */
.pf-vis-ticks{display:flex;align-items:flex-end;gap:6px;height:96px;}
.pf-vis-ticks i{
  flex:1;border-radius:3px;background:#DCE2E9;
  height:calc(30% + (var(--n) * 4.4%));
  transition:background .5s var(--ease);
  transition-delay:calc(var(--n) * 40ms);
}
.pf-vis-ticks.is-on i{background:var(--accent);}

/* 2 — scattered output settling onto one level */
.pf-vis-level{display:flex;align-items:flex-end;justify-content:space-between;height:96px;}
.pf-level-line{
  position:absolute;left:0;right:0;bottom:30px;height:2px;border-radius:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;opacity:0;
  transition:transform .9s cubic-bezier(.19,1,.22,1) .2s, opacity .4s var(--ease) .2s;
}
.pf-vis-level i{
  width:10px;height:10px;border-radius:50%;background:#C7D0DA;
  margin-bottom:var(--y);
  transition:margin-bottom .8s cubic-bezier(.19,1,.22,1), background .5s var(--ease);
  transition-delay:calc(var(--n) * 38ms);
}
.pf-vis-level.is-on i{margin-bottom:26px;background:var(--accent);}
.pf-vis-level.is-on .pf-level-line{transform:scaleX(1);opacity:1;}

/* 3 — capacity compounding */
.pf-vis-area{height:96px;width:calc(100% - var(--pf-vis-inset) * 2);}
.pf-vis-area .pf-area-line{
  fill:none;stroke:var(--accent);stroke-width:2;
  vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:260;stroke-dashoffset:260;
  transition:stroke-dashoffset 1s cubic-bezier(.19,1,.22,1);
}
.pf-vis-area .pf-area-fill{opacity:0;transition:opacity .6s var(--ease) .35s;}
.pf-vis-area.is-on .pf-area-line{stroke-dashoffset:0;}
.pf-vis-area.is-on .pf-area-fill{opacity:1;}



/* short viewports (13" laptops with browser chrome): the pin is height:100vh with
   overflow:hidden, so the stage must compress or it clips the disclaimer off the
   bottom. Compressing keeps both the pin and the scroll-scrubbed transfer. */
@media (min-width:981px) and (max-height:780px){
  .pf-head{margin-bottom:clamp(1rem,2.4vh,1.6rem);}
  .pf-head h2{font-size:clamp(1.6rem,3.6vh,2.3rem);}
  .pf-head p{margin-top:0.5rem;font-size:0.92rem;}
  .pf-figure{font-size:clamp(2.2rem,8.6vh,3.7rem);}
  .pf-caption{margin-top:0.4rem;font-size:0.88rem;}
  .pf-caption-sub{margin-top:0.2rem;font-size:0.75rem;}
  .pf-flow{margin-top:clamp(1.25rem,3vh,2rem);}
  .pf-ends{margin-bottom:0.85rem;}
  .pf-side p{font-size:0.86rem;}
  .pf-rail{height:76px;}
  .pf-bar{height:62px;}
  .pf-meter{margin-top:0.8rem;}
  .pf-flow .pf-note{margin-top:clamp(0.9rem,2.2vh,1.4rem);font-size:0.7rem;}
}

/* ---- responsive: unpin and resolve ---- */
@media (max-width:980px){
  .pf-scrub{height:auto;}
  .pf-pin{position:static;height:auto;padding:var(--section-pad) 0 0;}
  .pf-ends{grid-template-columns:1fr;gap:1.25rem;}
  .pf-to{text-align:left;justify-self:start;}
  .pf-to p{margin-left:0;}
  .pf-meter{display:none;}
  .pf-card h3{white-space:normal;}
  .pf-card-block-now{display:block;}
  .pf-foot{grid-template-columns:1fr;gap:1.5rem;}
  .pf-statement{gap:1rem;min-height:0;}
  .pf-visual{display:none;}
  .pf-say:not(:first-child){display:none;}
  .pf-flow .pf-note{max-width:none;}
  .pf-rail{height:auto;}
  .pf-rail-line{display:none;}
  .pf-bar{width:100%;transform:none !important;}
  
  .pf-cards{grid-template-columns:1fr;}
  .pf-side{opacity:1 !important;filter:none !important;}
}

@media (prefers-reduced-motion: reduce){
  .pf-bar{transform:none !important;}
  .pf-side,.pf-seg,.pf-card{transition:none !important;}
}

/* ---------- PRODUCTION ENGINE (horizontal rail) ---------- */
.engine{
  position:relative;
  z-index:5;
  background:var(--navy);
  color:var(--bone);
  padding:var(--section-pad) 0 clamp(3rem,7vh,5rem);
  overflow:hidden;
  /* lifts up over the What-We-Do stack as it enters */
  margin-top:clamp(-64px,-4vh,-32px);
  border-radius:clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0 0;
  box-shadow:0 -28px 60px rgba(10,23,36,0.45);
}
/* hairline catching the light along the top edge of the rising panel */
.engine::after{
  content:'';
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(76,120,168,0.55) 22%,rgba(255,255,255,0.5) 50%,rgba(76,120,168,0.55) 78%,transparent);
  opacity:0;
  transform:scaleX(0.35);
  transition:opacity .9s var(--ease), transform 1.2s var(--ease);
  pointer-events:none;
  z-index:3;
}
.engine.is-entered::after{opacity:1;transform:scaleX(1);}
.engine::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 0%, rgba(76,120,168,0.16), transparent 60%);
  pointer-events:none;
}
.engine .wrap{position:relative;z-index:2;}
.engine-head{max-width:760px;}
.engine-head .eyebrow{color:var(--accent-small);}
.engine-head h2{color:var(--bone);font-size:clamp(2rem,4.4vw,3rem);margin-bottom:1.1rem;}
.engine-head p{color:rgba(245,241,232,0.62);font-size:clamp(0.98rem,1.9vw,1.12rem);line-height:1.6;max-width:640px;}

.engine-rail-wrap{
  position:relative;
  z-index:2;
  margin-top:clamp(2.5rem,6vh,4rem);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.engine-rail-wrap::-webkit-scrollbar{display:none;}
.engine-rail{
  display:flex;
  gap:clamp(1rem,2vw,1.75rem);
  padding:0 max(calc((100vw - 1680px) / 2 + clamp(2rem,5vw,5rem)), clamp(2rem,5vw,5rem));
  width:max-content;
}
.engine-card{
  flex:0 0 auto;
  width:clamp(280px, 34vw, 460px);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:18px;
  overflow:hidden;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.engine-card:hover{
  transform:translateY(-6px);
  border-color:rgba(76,120,168,0.42);
  background:rgba(255,255,255,0.06);
}
.engine-card-media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--near-black);
}
.engine-card-media img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.1s var(--ease), opacity .6s var(--ease);
  opacity:0.88;
}
.engine-card:hover .engine-card-media img{transform:scale(1.12);opacity:1;}
.engine-card-media::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(28,36,54,0.1) 0%, rgba(28,36,54,0.82) 100%);
}
.engine-card-num{
  position:absolute;
  left:1.25rem;bottom:1rem;
  z-index:2;
  font-weight:800;
  font-size:2.4rem;
  letter-spacing:-0.03em;
  color:rgba(255,255,255,0.9);
  text-shadow:0 2px 14px rgba(0,0,0,0.5);
}
.engine-card-body{padding:1.6rem 1.5rem 1.75rem;}
.engine-card-body h3{
  font-size:clamp(1.1rem,2.2vw,1.35rem);
  font-weight:700;
  color:var(--bone);
  margin-bottom:0.65rem;
  letter-spacing:-0.01em;
}
.engine-card-body p{
  font-size:0.93rem;
  line-height:1.6;
  color:rgba(245,241,232,0.6);
  margin-bottom:1.25rem;
}
.engine-metric{
  display:flex;
  flex-direction:column;
  gap:0.15rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,0.1);
}
.engine-metric strong{
  font-size:1.15rem;
  font-weight:800;
  color:var(--accent);
  letter-spacing:-0.01em;
}
.engine-metric span{font-size:0.78rem;color:rgba(245,241,232,0.48);}

.engine-controls{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;
  margin-top:clamp(1.75rem,4vh,2.5rem);
}
.rail-track{
  flex:1;
  height:2px;
  background:rgba(255,255,255,0.12);
  border-radius:2px;
  overflow:hidden;
  max-width:420px;
}
.rail-fill{
  display:block;height:100%;width:25%;
  background:var(--accent);
  border-radius:2px;
  transition:transform .3s var(--ease), width .3s var(--ease);
}
.rail-btns{display:flex;gap:0.6rem;}
.rail-btn{
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.04);
  color:var(--bone);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.rail-btn svg{width:18px;height:18px;}
.rail-btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px);}
.rail-btn:disabled{opacity:0.3;cursor:default;transform:none;background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.18);}

/* ---------- GOVERNANCE (scroll-driven timeline) ---------- */
.gov{background:var(--white);padding:var(--section-pad) 0;}
.gov-head{max-width:720px;margin-bottom:clamp(2.5rem,6vh,4rem);}
.gov-head h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--navy);margin-bottom:1rem;}
.gov-head p{font-size:clamp(0.98rem,1.9vw,1.12rem);color:var(--blue-grey);line-height:1.6;}

.gov-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.gov-track{position:relative;padding-left:2.4rem;}
.gov-track::before{
  content:'';
  position:absolute;
  left:6px;top:8px;bottom:8px;
  width:2px;
  background:repeating-linear-gradient(180deg,#D8DEE5 0 5px,transparent 5px 11px);
}
.gov-item{
  position:relative;
  padding:clamp(1.4rem,3.4vh,2.2rem) 0;
  opacity:0.34;
  transition:opacity .45s var(--ease);
}
.gov-item.is-active{opacity:1;}
.gov-node{
  position:absolute;
  left:-2.4rem;top:calc(clamp(1.4rem,3.4vh,2.2rem) + 4px);
  width:14px;height:14px;
  border-radius:50%;
  background:var(--white);
  border:2px solid #C7CDD4;
  transition:border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.gov-item.is-active .gov-node{
  border-color:var(--accent);
  background:var(--accent);
  transform:scale(1.15);
  box-shadow:0 0 0 6px rgba(76,120,168,0.14);
}
.gov-icon{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:42px;height:42px;
  border-radius:12px;
  background:var(--light-grey);
  color:var(--blue-grey);
  margin-bottom:0.85rem;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.gov-icon svg{width:20px;height:20px;}
.gov-item.is-active .gov-icon{background:rgba(76,120,168,0.1);color:var(--accent);}
.gov-item h3{
  font-size:clamp(1.25rem,2.6vw,1.7rem);
  font-weight:700;
  color:var(--navy);
  margin-bottom:0.5rem;
  letter-spacing:-0.015em;
}
.gov-item p{font-size:clamp(0.92rem,1.8vw,1.02rem);line-height:1.6;color:var(--blue-grey);max-width:44ch;}

.gov-visual{position:sticky;top:clamp(120px,16vh,150px);}
.gov-stage{
  position:relative;
  aspect-ratio:4/3.2;
  background:var(--light-grey);
  border-radius:18px;
  padding:clamp(0.6rem,1.4vh,1rem);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.gov-panel{
  position:absolute;
  inset:clamp(0.6rem,1.4vh,1rem);
  opacity:0;
  visibility:hidden;
  transform:translateY(16px) scale(0.985);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.gov-panel.is-active{
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear 0s;
}
.gov-panel-inner{
  height:100%;
  background:var(--white);
  border-radius:12px;
  padding:clamp(1.1rem,2.6vh,1.9rem);
  box-shadow:0 20px 45px -20px rgba(16,29,45,0.25);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1rem;
  box-sizing:border-box;
}
.gov-env{display:flex;align-items:center;gap:0.75rem;}
.gov-env-box{
  flex:1;min-width:0;
  border-radius:12px;
  padding:1rem 0.9rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.35rem;
}
.gov-env-box svg{width:22px;height:22px;}
.gov-env-box strong{font-size:0.88rem;}
.gov-env-box span{font-size:0.72rem;}
.gov-env-closed{background:var(--navy);color:var(--bone);}
.gov-env-closed span{color:rgba(245,241,232,0.6);}
.gov-env-blocked{background:var(--light-grey);border:1.5px dashed #C7CDD4;color:var(--blue-grey);}
.gov-env-blocked strong{color:var(--blue-grey);}
.gov-env-barrier{
  flex-shrink:0;
  writing-mode:vertical-rl;
  font-size:0.6rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  padding:0.6rem 0.25rem;
  border-left:2px solid var(--accent);
  border-right:2px solid var(--accent);
}
.gov-clause{list-style:none;display:flex;flex-direction:column;gap:0.7rem;}
.gov-clause li{display:flex;align-items:center;gap:0.65rem;font-size:0.9rem;color:var(--navy);}
.gov-check{
  flex-shrink:0;
  width:22px;height:22px;border-radius:50%;
  background:rgba(76,120,168,0.1);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:0.72rem;font-weight:700;
}
.gov-seal{
  margin-top:0.25rem;
  align-self:flex-start;
  font-size:0.72rem;font-weight:700;
  letter-spacing:0.04em;
  color:var(--blue-grey);
  background:var(--light-grey);
  padding:0.5rem 0.9rem;border-radius:999px;
}
.gov-seal-accent{background:rgba(76,120,168,0.1);color:var(--accent);}
.gov-flow{display:flex;align-items:stretch;gap:0.5rem;}
.gov-flow-step{
  flex:1;min-width:0;
  background:var(--light-grey);
  border:1px solid #E4E7EB;
  border-radius:12px;
  padding:0.85rem 0.6rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.25rem;
}
.gov-flow-step em{
  font-style:normal;font-weight:800;font-size:0.7rem;
  width:22px;height:22px;border-radius:50%;
  background:var(--white);color:var(--blue-grey);
  display:flex;align-items:center;justify-content:center;
  border:1px solid #D8DEE5;
}
.gov-flow-step strong{font-size:0.85rem;color:var(--navy);}
.gov-flow-step span{font-size:0.7rem;color:var(--blue-grey);}
.gov-flow-step-hot{background:rgba(76,120,168,0.07);border-color:var(--accent);}
.gov-flow-step-hot em{background:var(--accent);color:var(--white);border-color:var(--accent);}
.gov-flow-step-hot strong{color:var(--accent);}
.gov-note{font-size:0.78rem;color:var(--blue-grey);}
.gov-standards{display:flex;flex-direction:column;gap:0.6rem;}
.gov-standard{
  display:flex;flex-direction:column;gap:0.1rem;
  padding:0.75rem 0.9rem;
  background:var(--light-grey);
  border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;
}
.gov-standard strong{font-size:0.92rem;color:var(--navy);}
.gov-standard span{font-size:0.75rem;color:var(--blue-grey);}

/* ---------- THE RESULT ---------- */
.outcome{
  position:relative;
  background:var(--navy);
  color:var(--bone);
  padding:var(--section-pad) 0;
  overflow:hidden;
}
.outcome::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(90% 60% at 85% 0%, rgba(76,120,168,0.15), transparent 62%);
  pointer-events:none;
}
.outcome .wrap{position:relative;z-index:2;}
.outcome-head{max-width:640px;margin-bottom:clamp(2.5rem,6vh,3.5rem);}
.outcome-head .eyebrow{color:var(--accent-small);}
.outcome-head h2{color:var(--bone);font-size:clamp(2rem,4.4vw,3rem);}
.outcome-list{border-top:1px solid rgba(255,255,255,0.12);}
.outcome-item{
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
  align-items:center;
  padding:clamp(1.6rem,4vh,2.6rem) 0;
  border-bottom:1px solid rgba(255,255,255,0.12);
  transition:background .35s var(--ease);
}
.outcome-item:hover{background:rgba(255,255,255,0.02);}
.outcome-num{
  font-weight:800;
  font-size:clamp(1.5rem,3vw,2rem);
  color:rgba(255,255,255,0.22);
  letter-spacing:-0.02em;
  transition:color .35s var(--ease);
}
.outcome-item:hover .outcome-num{color:var(--accent);}
.outcome-body{
  display:grid;
  grid-template-columns:minmax(150px,210px) minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
  align-items:center;
}
.outcome-stat{
  font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  letter-spacing:-0.03em;
  color:var(--accent);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.outcome-stat-text{
  display:flex;flex-direction:column;gap:0.15rem;
  font-size:clamp(1.3rem,2.6vw,1.8rem);
}
.outcome-stat-text span{
  font-size:0.72rem;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(245,241,232,0.45);
}
.outcome-body > p:last-child{
  font-size:clamp(0.98rem,1.9vw,1.12rem);
  line-height:1.6;
  color:rgba(245,241,232,0.7);
}
.outcome-body strong{color:var(--bone);font-weight:600;}

.outcome-note{
  margin-top:clamp(2rem,5vh,3rem);
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,0.1);
  max-width:760px;
  font-size:0.82rem;
  line-height:1.65;
  color:rgba(245,241,232,0.4);
}

/* ---------- GETTING STARTED ---------- */
.start{overflow:hidden;background:var(--light-grey);padding:var(--section-pad) 0;}
.start-card{
  position:relative;
  z-index:1;
  isolation:auto;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  background:var(--white);
  border:1px solid #E4E7EB;
  border-radius:20px;
  padding:clamp(1.75rem,4.5vw,3.5rem);
  box-shadow:var(--shadow-md);
  align-items:center;
}
.start-copy h2{
  font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--navy);
  margin-bottom:1rem;
  letter-spacing:-0.02em;
}
.start-copy > p{font-size:1rem;line-height:1.6;color:var(--blue-grey);margin-bottom:1.5rem;}
.start-incl{list-style:none;display:flex;flex-direction:column;gap:0.65rem;}
.start-incl li{
  position:relative;
  padding-left:1.6rem;
  font-size:0.93rem;
  color:var(--navy);
}
.start-incl li::before{
  content:'';
  position:absolute;left:0;top:0.45em;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}
.start-price{
  background:var(--navy);
  color:var(--bone);
  border-radius:16px;
  padding:clamp(1.5rem,3.5vw,2.25rem);
  position:relative;
  overflow:hidden;
}
.start-price::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(90% 70% at 100% 0%, rgba(76,120,168,0.28), transparent 60%);
  pointer-events:none;
}
.start-price > *{position:relative;z-index:2;}
.start-price-label{
  display:block;
  font-size:0.68rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(245,241,232,0.55);
  margin-bottom:0.85rem;
}
.start-price-figure{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:0.2rem;
  font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.5rem);
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--bone);
  font-variant-numeric:tabular-nums;
  margin-bottom:1rem;
}
.start-cur{font-size:0.55em;color:var(--accent);margin-right:0.15rem;}
.start-dash{color:rgba(245,241,232,0.4);margin:0 0.1rem;}
.start-price-note{font-size:0.83rem;line-height:1.55;color:rgba(245,241,232,0.55);margin-bottom:1.5rem;}
.start-cta{
  display:inline-flex;align-items:center;gap:0.55rem;
  background:var(--btn);color:var(--bone);
  font-size:0.9rem;font-weight:600;
  padding:0.85rem 1.5rem;border-radius:8px;
  box-shadow:0 10px 30px -10px rgba(76,120,168,0.6);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.start-cta svg{width:15px;height:15px;transition:transform .2s var(--ease);}
.start-cta:hover{background:var(--btn-hover);transform:translateY(-2px);}
.start-cta:hover svg{transform:translateX(3px);}

/* ---------- SHARED SECTION HEAD ---------- */

.section-head{max-width:640px;margin-bottom:3.5rem;}
.section-head h2{font-size:clamp(1.75rem,4vw,2.5rem);color:var(--navy);}

/* ---------- AI VISIBILITY ---------- */
.ai-vis{padding:var(--section-pad) 0;background:var(--white);overflow:hidden;}
.ai-vis-head{max-width:680px;margin:0 auto;text-align:center;}
.ai-vis-head .eyebrow{justify-content:center;}
.ai-vis-head h2{font-size:clamp(1.9rem,4vw,2.75rem);color:var(--navy);}
.ai-vis-head p{margin-top:1.25rem;font-size:1.05rem;color:var(--blue-grey);}

/* Auto-scrolling logo marquee (right to left, ambient — no interaction) */
.ai-marquee{
  position:relative;
  margin-top:clamp(3rem,7vh,4.5rem);
  padding:0.5rem 0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.ai-marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  will-change:transform;
  animation:aiScroll 52s linear infinite;
}
@keyframes aiScroll{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
/* half-gap as margin on each item so a -50% shift lands perfectly seamless */
.ai-logo{
  flex:0 0 auto;
  height:56px;
  width:auto;
  margin:0 clamp(1.6rem,3.6vw,3.4rem);
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
/* wide wordmark lockup reads heavier — trim it for optical balance */
.ai-logo-wide{height:46px;}

@media (max-width:760px){
  .ai-logo{height:40px;margin:0 1.4rem;}
  .ai-logo-wide{height:33px;}
  .ai-marquee-track{animation-duration:38s;}
}

@media (prefers-reduced-motion: reduce){
  .ai-marquee{-webkit-mask-image:none;mask-image:none;}
  .ai-marquee-track{
    animation:none;
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.5rem 2.5rem;
  }
  .ai-logo{margin:0;}
  .ai-marquee-track .ai-clone{display:none;}
}

/* ---------- TESTIMONIAL ---------- */
.testimonial{padding:var(--section-pad) 0;background:var(--light-grey);}
.testimonial-card{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  position:relative;
}
.testimonial-card .quote-mark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:6rem;
  line-height:1;
  color:var(--accent);
  opacity:0.2;
  display:block;
  margin-bottom:-1.5rem;
}
.testimonial-flag{
  display:inline-block;
  font-size:0.65rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:600;
  color:#B45309;
  background:#FEF3C7;
  border:1px solid #FDE68A;
  padding:0.3rem 0.7rem;
  border-radius:20px;
  margin-bottom:1.75rem;
}
.testimonial-card blockquote{
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 3vw, 1.9rem);
  color:var(--navy);
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.4;
}
.testimonial-card cite{
  display:block;
  margin-top:1.75rem;
  font-style:normal;
  font-size:0.9rem;
  color:var(--blue-grey);
}
.testimonial-card cite strong{color:var(--navy);display:block;font-weight:600;margin-bottom:0.15rem;}

/* ---------- TEAM (3D card deck + globe) ---------- */
.team{overflow:hidden;padding:var(--section-pad) 0;background:var(--white);}
.team-head{max-width:640px;margin-bottom:clamp(2.5rem,6vh,3.5rem);}
.team-head h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--navy);}
.team-head p{margin-top:1rem;font-size:1.05rem;color:var(--blue-grey);}
.team-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,8vw,7rem);
  align-items:center;
}

/* --- the deck --- */
.team-deck{position:relative;}
.deck-stage{
  position:relative;
  perspective:1500px;
  perspective-origin:50% 45%;
  min-height:clamp(430px,54vh,520px);
}
.tmem{
  position:absolute;
  top:0; left:50%;
  width:clamp(240px,24vw,292px);
  margin-left:calc(clamp(240px,24vw,292px) / -2);
  background:var(--white);
  border:1px solid #E4E7EB;
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transition:
    transform .85s cubic-bezier(.19,1,.22,1),
    opacity .6s var(--ease),
    box-shadow .6s var(--ease),
    border-color .6s var(--ease);
}
.tmem:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

/* slot geometry — JS assigns these three classes */
.tmem.slot-front{
  transform:translate3d(0,0,0) rotateY(0deg) scale(1);
  z-index:3; opacity:1;
  border-color:rgba(76,120,168,0.32);
  box-shadow:0 26px 60px rgba(16,29,45,0.17);
  cursor:default;
}
.tmem.slot-left{
  transform:translate3d(-58%,30px,-230px) rotateY(26deg) scale(.87);
  z-index:1; opacity:.6;
  box-shadow:0 14px 34px rgba(16,29,45,0.10);
}
.tmem.slot-right{
  transform:translate3d(58%,30px,-230px) rotateY(-26deg) scale(.87);
  z-index:1; opacity:.6;
  box-shadow:0 14px 34px rgba(16,29,45,0.10);
}
.tmem.slot-left:hover,.tmem.slot-right:hover{
  opacity:.9;
  border-color:rgba(76,120,168,0.3);
}
.tmem.slot-left:hover{transform:translate3d(-60%,18px,-180px) rotateY(21deg) scale(.91);}
.tmem.slot-right:hover{transform:translate3d(60%,18px,-180px) rotateY(-21deg) scale(.91);}

/* --- the photo, now the hero of the card --- */
.tmem-photo{
  position:relative;
  width:100%;
  aspect-ratio:1 / 0.82;
  overflow:hidden;
  background:var(--light-grey);
}
.tmem-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 22%;
  filter:grayscale(38%) contrast(1.02);
  transform:scale(1.02);
  transition:filter .7s var(--ease), transform .9s var(--ease);
}
.tmem.slot-front .tmem-photo img{filter:grayscale(0%);transform:scale(1);}
.tmem-photo::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(28,36,54,0.06));
  pointer-events:none;
}

.tmem-body{padding:1.15rem 1.25rem 1.35rem;}
.tmem-name{
  display:block;
  font-size:clamp(1.05rem,2vw,1.22rem);
  font-weight:700;color:var(--navy);letter-spacing:-0.015em;
}
.tmem-role{
  display:block;margin-top:0.2rem;
  font-style:normal;font-size:0.82rem;font-weight:500;color:var(--accent);
}

/* bio + tags belong to the front card only — they collapse away behind */
.tmem-detail{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .7s var(--ease), opacity .5s var(--ease), margin-top .7s var(--ease);
  margin-top:0;
}
.tmem-detail-inner{overflow:hidden;}
.tmem.slot-front .tmem-detail{grid-template-rows:1fr;opacity:1;margin-top:0.85rem;}
/* measured off-screen in one synchronous pass to size the stage */
.tmem.is-measuring{transition:none !important;}
.tmem.is-measuring .tmem-detail{
  grid-template-rows:1fr !important;
  opacity:1 !important;
  margin-top:0.85rem !important;
  transition:none !important;
}
.tmem-bio{
  font-size:0.9rem;line-height:1.6;color:var(--blue-grey);
  padding-top:0.8rem;border-top:1px solid #EEF1F4;
}
.tmem-tags{list-style:none;display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.8rem;}
.tmem-tags li{
  font-size:0.72rem;font-weight:600;
  color:var(--blue-grey);background:var(--light-grey);
  padding:0.32rem 0.7rem;border-radius:999px;
}

/* --- dots --- */
.deck-nav{
  display:flex;justify-content:center;gap:0.6rem;
  margin-top:clamp(1.25rem,3vh,2rem);
}
.deck-dot{
  background:none;border:0;padding:0.4rem;cursor:pointer;line-height:0;
}
.deck-dot span{
  display:block;width:32px;height:3px;border-radius:2px;
  background:#DDE2E8;
  transition:background .4s var(--ease), width .4s var(--ease);
}
.deck-dot:hover span{background:#C3CBD4;}
.deck-dot.is-active span{background:var(--accent);width:46px;}
.deck-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

@media (max-width:760px){
  .tmem.slot-left{transform:translate3d(-46%,22px,-240px) rotateY(22deg) scale(.8);opacity:.42;}
  .tmem.slot-right{transform:translate3d(46%,22px,-240px) rotateY(-22deg) scale(.8);opacity:.42;}
  .globe-pin img{width:24px;}
  .globe-pin[data-pin="kh"] img{left:-26px;top:-23px;}
  .globe-pin[data-pin="sg"] img{left:9px;top:13px;}
}

@media (prefers-reduced-motion: reduce){
  .tmem{transition:opacity .2s linear;}
}

.team-globe{
  /* not sticky: sticky let the globe drift ~95px below the cards' centre while
     scrolling past, which read as the globe sitting too low */
  position:relative;
  text-align:center;
  /* the deck is optically wider than the globe, so equal 1fr columns leave
     unequal outer margins — anchor the globe right to even them up */
  justify-self:end;
  margin-right:0;
}
.globe-wrap{
  will-change:transform,opacity;
  position:relative;
  width:100%;
  max-width:420px;
  margin:0 auto;
  aspect-ratio:1;
}
#globeCanvas{width:100%;height:100%;display:block;}
.globe-pin{
  position:absolute;
  width:0;height:0;
  pointer-events:none;
  transition:opacity .4s var(--ease);
}
/* the dot marks the exact latitude/longitude */
.globe-pin i{
  position:absolute;left:0;top:0;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(76,120,168,0.2);
  animation:pinPulse 2.4s ease-in-out infinite;
}
/* leader line from the dot out to the offset flag */
.globe-pin::before{
  content:'';
  position:absolute;left:0;top:0;
  width:1px;height:17px;
  background:linear-gradient(180deg,rgba(76,120,168,0.75),rgba(76,120,168,0.15));
  transform-origin:top center;
}
.globe-pin[data-pin="kh"]::before{transform:rotate(35deg) translateY(-17px);}
.globe-pin[data-pin="sg"]::before{transform:rotate(-145deg) translateY(-17px);}
.globe-pin img{
  position:absolute;
  /* the pin is a zero-size anchor, so the global img{max-width:100%} would
     resolve to max-width:0 and collapse the flag */
  max-width:none;
  width:28px;height:auto;display:block;
  border-radius:3px;
  box-shadow:0 3px 12px rgba(16,29,45,0.32), 0 0 0 1px rgba(255,255,255,0.9);
}
/* Cambodia sits north — its flag goes up and left; Singapore's down and right */
.globe-pin[data-pin="kh"] img{left:-30px;top:-27px;}
.globe-pin[data-pin="sg"] img{left:11px;top:15px;}
@keyframes pinPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(76,120,168,0.2);}
  50%{box-shadow:0 0 0 9px rgba(76,120,168,0.05);}
}
.globe-cap{
  margin-top:1.25rem;
  font-size:0.88rem;color:var(--blue-grey);
}

/* ---------- CTA / CONTACT ---------- */
.cta{
  position:relative;
  background:var(--near-black);
  color:var(--bone);
  padding:var(--section-pad) 0;
  overflow:hidden;
}
.cta-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0.32;
}
.cta-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(28,36,54,0.75), rgba(28,36,54,0.94));}
.cta .wrap{position:relative;z-index:2;}
.cta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}
.cta-head .eyebrow{color:var(--accent-small);}
.cta-head h2{
  font-size:clamp(1.5rem, 2.8vw, 2.1rem);
  color:var(--bone);
  margin-bottom:1.25rem;
  letter-spacing:-0.02em;
}
.cta-head p{
  color:rgba(245,241,232,0.7);
  max-width:420px;
  font-size:1rem;
}
.cta-head .email-link{
  display:inline-block;
  margin-top:2rem;
  color:var(--accent);
  font-weight:500;
  border-bottom:1px solid rgba(76,120,168,0.4);
}

.form{display:flex;flex-direction:column;gap:1.25rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
.field{display:flex;flex-direction:column;gap:0.5rem;}
.field label{
  font-size:0.75rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(245,241,232,0.55);
}
.field input,.field textarea{
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(245,241,232,0.3);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:1rem;
  padding:0.6rem 0;
  outline:none;
  transition:border-color .2s ease;
}
.field input:focus,.field textarea:focus{border-color:var(--accent);}
.field textarea{resize:vertical;min-height:90px;}
.form-submit{
  margin-top:0.75rem;
  align-self:flex-start;
  background:var(--btn);
  color:var(--bone);
  border:0;
  padding:1rem 2.5rem;
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.02em;
  border-radius:2px;
  cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(76,120,168,0.5);
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.form-submit:hover{background:var(--btn-hover);transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(76,120,168,0.6);}
.form-note{font-size:0.75rem;color:rgba(245,241,232,0.4);margin-top:0.5rem;}

/* ---------- FOOTER ---------- */
.ftr{
  position:relative;
  background:var(--near-black);
  color:rgba(245,241,232,0.6);
  overflow:hidden;
  padding-top:clamp(3.5rem,8vh,6rem);
}
.ftr-glow{
  position:absolute;
  left:50%;bottom:-38%;
  transform:translateX(-50%);
  width:min(1500px,150%);
  aspect-ratio:2/1;
  background:radial-gradient(ellipse at center, rgba(76,120,168,0.5) 0%, rgba(76,120,168,0.16) 34%, transparent 68%);
  pointer-events:none;
  filter:blur(24px);
}
.ftr-inner{position:relative;z-index:2;}
.ftr-top{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.7fr) minmax(0,0.7fr) minmax(0,1.15fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,6vh,4rem);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.ftr-tag{
  display:inline-block;
  font-size:0.68rem;font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1rem;
}
.ftr-contact{display:flex;flex-direction:column;gap:1.25rem;}
.ftr-line{display:flex;flex-direction:column;align-items:flex-start;}
.ftr-line .ftr-tag{margin-bottom:0.55rem;}
.ftr-line a,.ftr-strong{
  font-size:clamp(1rem,2vw,1.3rem);
  font-weight:700;color:var(--bone);letter-spacing:-0.01em;
  transition:color .25s var(--ease);
}
.ftr-line a:hover{color:var(--accent);}
.ftr-col{display:flex;flex-direction:column;align-items:flex-start;gap:0.7rem;}
.ftr-col > a{
  font-size:0.95rem;
  color:rgba(245,241,232,0.62);
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.ftr-col > a:hover{color:var(--bone);transform:translateX(3px);}
.ftr-social{display:inline-flex;align-items:center;gap:0.5rem;}
.ftr-social svg{width:15px;height:15px;opacity:0.7;}
.ftr-arrow{font-size:0.8rem;opacity:0.55;}
.ftr-sub p{font-size:0.9rem;line-height:1.55;color:rgba(245,241,232,0.6);margin-bottom:1rem;}
.ftr-sub-form{
  display:flex;align-items:center;gap:0.5rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  padding:0.4rem;
}
.ftr-sub-form input{
  flex:1;min-width:0;
  background:none;border:0;outline:none;
  color:var(--bone);
  font-family:inherit;font-size:0.9rem;
  padding:0.55rem 0.6rem;
}
.ftr-sub-form input::placeholder{color:rgba(245,241,232,0.38);}
.ftr-sub-form button{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:0.4rem;
  background:var(--accent);color:var(--bone);
  border:0;border-radius:7px;
  font-family:inherit;font-size:0.85rem;font-weight:600;
  padding:0.65rem 1.15rem;cursor:pointer;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.ftr-sub-form button:hover{background:var(--btn-hover);transform:translateY(-1px);}
.ftr-sub-note{font-size:0.72rem !important;color:rgba(245,241,232,0.35) !important;margin:0.6rem 0 0 !important;}

.ftr-mark{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  align-items:center;
  gap:clamp(2rem,6vw,5.5rem);
  padding:clamp(2rem,5vh,3.5rem) 0 clamp(2rem,5vh,3rem);
}
.ftr-wordmark{
  font-weight:800;
  font-size:clamp(1.6rem,5.2vw,4rem);
  line-height:0.95;
  min-width:0;
  letter-spacing:-0.045em;
  color:var(--bone);
  white-space:nowrap;
}
.ftr-wordmark sup{font-size:0.22em;vertical-align:super;opacity:0.7;margin-left:0.15em;}
.ftr-ticker{
  height:clamp(84px,13vh,132px);
  overflow:hidden;
  position:relative;
  text-align:right;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
}
.ftr-ticker-track{display:flex;flex-direction:column;will-change:transform;}
.ftr-ticker-track span{
  display:block;
  height:clamp(28px,4.33vh,44px);
  line-height:clamp(28px,4.33vh,44px);
  font-size:clamp(1rem,2.1vw,1.5rem);
  font-weight:700;
  letter-spacing:-0.015em;
  color:rgba(245,241,232,0.28);
  transition:color .3s var(--ease), opacity .3s var(--ease);
  white-space:nowrap;
}
.ftr-ticker-track span.is-mid{color:var(--bone);}

.ftr-bar{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,0.1);}
.ftr-bar-inner{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
  gap:1rem;
  /* keep .wrap's side padding — a `0` here pulled the bar 48px left of the wordmark */
  padding:1.25rem clamp(1.5rem, 4vw, 3rem);
  font-size:0.8rem;
  color:rgba(245,241,232,0.5);
}
.ftr-bar-links{display:flex;align-items:center;gap:0.6rem;}
.ftr-bar-links a{transition:color .25s var(--ease);}
.ftr-bar-links a:hover{color:var(--accent);}
.footer-legal{
  position:relative;z-index:2;
  padding-bottom:2rem;
  font-size:0.7rem;color:rgba(245,241,232,0.28);
  line-height:1.6;
}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

.services-grid .reveal:nth-child(1){transition-delay:0s;}
.services-grid .reveal:nth-child(2){transition-delay:.08s;}
.services-grid .reveal:nth-child(3){transition-delay:.16s;}
.services-grid .reveal:nth-child(4){transition-delay:.24s;}
.team-grid .reveal:nth-child(1){transition-delay:0s;}
.team-grid .reveal:nth-child(2){transition-delay:.1s;}
.team-grid .reveal:nth-child(3){transition-delay:.2s;}

/* ---------- SECTION ENTRANCE VARIANTS ---------- */
.reveal-rise{opacity:0;transform:translateY(38px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal-rise.is-visible{opacity:1;transform:translateY(0);}
.reveal-mask{
  opacity:0;
  transform:translateY(18px);
  -webkit-mask-image:linear-gradient(180deg,#000,#000);
          mask-image:linear-gradient(180deg,#000,#000);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:0 0;     mask-position:0 0;
  -webkit-mask-size:100% 0%;     mask-size:100% 0%;
  transition:opacity .9s var(--ease), -webkit-mask-size 1s var(--ease), mask-size 1s var(--ease), transform .9s var(--ease);
}
.reveal-mask.is-visible{
  opacity:1;
  transform:translateY(0);
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
}
.reveal-scale{opacity:0;transform:scale(0.96) translateY(24px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal-scale.is-visible{opacity:1;transform:scale(1) translateY(0);}

/* --- SECTION TRANSITIONS: one distinct move per new section --- */

/* AI visibility — the logo row glides in along its own scroll axis */
.reveal-glide{
  opacity:0;
  transform:translate3d(64px,0,0);
  transition:opacity .9s var(--ease), transform 1.15s cubic-bezier(.19,1,.22,1);
}
.reveal-glide.is-visible{opacity:1;transform:translate3d(0,0,0);}

/* The Result — rows sweep in from the left, staggered down the list */
.reveal-sweep{
  opacity:0;
  transform:translate3d(-42px,0,0);
  transition:opacity .8s var(--ease), transform .95s cubic-bezier(.19,1,.22,1);
}
.reveal-sweep.is-visible{opacity:1;transform:translate3d(0,0,0);}
.outcome-list .reveal-sweep:nth-child(1){transition-delay:0s;}
.outcome-list .reveal-sweep:nth-child(2){transition-delay:.13s;}
.outcome-list .reveal-sweep:nth-child(3){transition-delay:.26s;}

/* Getting started — the card lifts while a blue bloom opens behind it */
.reveal-bloom{
  opacity:0;
  transform:translate3d(0,44px,0) scale(.975);
  transition:opacity .85s var(--ease), transform 1s cubic-bezier(.19,1,.22,1);
}
.reveal-bloom.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);}
.reveal-bloom::after{
  content:'';
  position:absolute;
  right:-14%;top:-28%;
  width:min(940px,86%);aspect-ratio:1.35/1;
  transform:scale(.55);
  transform-origin:75% 30%;
  background:radial-gradient(ellipse at center, rgba(76,120,168,0.40) 0%, rgba(76,120,168,0.15) 40%, transparent 72%);
  filter:blur(34px);
  opacity:0;
  transition:opacity 1.1s var(--ease), transform 1.3s cubic-bezier(.19,1,.22,1);
  pointer-events:none;
  z-index:-1;
}
.reveal-bloom.is-visible::after{opacity:1;transform:scale(1);}

/* Our team — the deck assembles: cards start stacked, then fan out to their slots */
.reveal-fan:not(.is-visible) .tmem{
  transform:translate3d(0,20px,-150px) rotateY(0deg) scale(.9) !important;
  opacity:0 !important;
}
.reveal-fan.is-visible .tmem.slot-left,
.reveal-fan.is-visible .tmem.slot-right{transition-delay:.14s;}

/* ASSEMBLY: cards fly in scattered and lock into a single line */
.engine-rail .engine-card{
  opacity:0;
  filter:blur(6px);
  transition:
    opacity .75s var(--ease),
    filter .75s var(--ease),
    transform 1.05s cubic-bezier(.19,1,.22,1),
    border-color .45s var(--ease),
    background .45s var(--ease);
}
.engine-rail .engine-card:nth-child(1){transform:translate3d(-40px,-84px,0) rotate(-5deg) scale(.84);}
.engine-rail .engine-card:nth-child(2){transform:translate3d(-16px, 92px,0) rotate(3.5deg) scale(.84);}
.engine-rail .engine-card:nth-child(3){transform:translate3d( 16px,-96px,0) rotate(4.5deg) scale(.84);}
.engine-rail .engine-card:nth-child(4){transform:translate3d( 40px, 88px,0) rotate(-3.5deg) scale(.84);}

.engine-rail.is-visible .engine-card{
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0) rotate(0deg) scale(1);
}
.engine-rail.is-visible .engine-card:nth-child(1){transition-delay:.05s;}
.engine-rail.is-visible .engine-card:nth-child(2){transition-delay:.15s;}
.engine-rail.is-visible .engine-card:nth-child(3){transition-delay:.25s;}
.engine-rail.is-visible .engine-card:nth-child(4){transition-delay:.35s;}

.team-grid .reveal:nth-child(1){transition-delay:0s;}
.team-grid .reveal:nth-child(2){transition-delay:.1s;}
.team-grid .reveal:nth-child(3){transition-delay:.2s;}
.outcome-list .reveal:nth-child(1){transition-delay:0s;}
.outcome-list .reveal:nth-child(2){transition-delay:.12s;}
.outcome-list .reveal:nth-child(3){transition-delay:.24s;}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-rise,.reveal-mask,.reveal-scale,.reveal-glide,.reveal-sweep,.reveal-bloom,.engine-rail .engine-card,.engine-rail .engine-card:nth-child(1),.engine-rail .engine-card:nth-child(2),.engine-rail .engine-card:nth-child(3),.engine-rail .engine-card:nth-child(4){
    opacity:1 !important;transform:none !important;clip-path:none !important;-webkit-mask-image:none !important;mask-image:none !important;transition:none !important;
  }
  .globe-pin i{animation:none;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .gov-grid{grid-template-columns:1fr;gap:2.5rem;}
  .gov-visual{position:static;}
  .gov-stage{aspect-ratio:16/10;}
  .team-layout{grid-template-columns:1fr;gap:3rem;}
  .team-globe{position:static;order:-1;justify-self:center;margin-right:0;}
  .start-card{grid-template-columns:1fr;gap:2rem;}
  .ftr-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem;}
  .ftr-mark{grid-template-columns:1fr;gap:1.5rem;}
  .ftr-ticker{text-align:left;}
}
@media (max-width:980px){
  .nav-links{display:none;}
  .nav-menu-toggle{display:grid;place-items:center;width:44px;height:44px;margin-right:-11px;line-height:1;}
  .nav .wrap{justify-content:flex-start;}
  .nav-logo{margin-right:auto;}
  .cta-grid{grid-template-columns:1fr;gap:2.5rem;}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .engine-card{width:min(80vw,340px);}
  .engine-rail{padding:0 1.5rem;}
  .engine-controls{flex-direction:column-reverse;align-items:stretch;gap:1.25rem;}
  .rail-track{max-width:none;}
  .rail-btns{justify-content:center;}
  .outcome-item{grid-template-columns:52px minmax(0,1fr);gap:1rem;}
  .outcome-body{grid-template-columns:1fr;gap:0.6rem;}
  .gov-env{flex-direction:column;}
  .gov-env-barrier{writing-mode:horizontal-tb;border:0;border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);padding:0.3rem 0.7rem;}
  .ftr-top{grid-template-columns:1fr;gap:2rem;}
  .ftr-sub-form{flex-direction:column;align-items:stretch;}
  .ftr-sub-form button{justify-content:center;}
  .ftr-bar-inner{justify-content:flex-start;gap:0.6rem;}
}

/* ---------- THE OPERATING PROBLEM ----------
   Dark on purpose: this is the "before" state, and the closing line is about
   waste that is difficult to see. Each card's mark stays near-invisible until
   the card reveals, then resolves — the section performs its own argument. */
.probs{padding:var(--section-pad) 0;background:var(--navy);position:relative;overflow:hidden;}
.probs-head{max-width:860px;}
.probs-head h2{
  font-size:clamp(1.9rem,4.2vw,2.9rem);
  color:var(--bone);letter-spacing:-0.03em;line-height:1.1;
}
.probs-head p{margin-top:1rem;font-size:clamp(0.98rem,1.8vw,1.08rem);color:rgba(255,255,255,0.52);}

.probs-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,1.75rem);
  margin-top:clamp(2.5rem,6vh,4rem);
}
.prob{
  position:relative;
  display:flex;flex-direction:column;
  padding:clamp(1.6rem,2.8vw,2.1rem);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);
  transition:border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
.prob:hover{
  border-color:rgba(76,120,168,0.42);
  transform:translateY(-4px);
  background:linear-gradient(180deg, rgba(76,120,168,0.10) 0%, rgba(255,255,255,0.015) 100%);
}
.prob-num{
  font-size:0.68rem;font-weight:700;letter-spacing:0.18em;
  color:rgba(255,255,255,0.34);
}

/* ---- the marks ---- */
.prob-vis{
  position:relative;
  height:78px;
  margin:clamp(1.4rem,2.6vh,2rem) 0 clamp(1.5rem,2.8vh,2.1rem);
}

.prob h3{
  font-size:clamp(1rem,1.8vw,1.16rem);font-weight:700;
  color:var(--bone);letter-spacing:-0.01em;line-height:1.25;
  margin-bottom:0.65rem;
  min-height:2.5em;            /* the common case is two lines */
}
.prob p{
  margin-top:auto;             /* bodies bottom-align if a heading wraps further */
  font-size:0.94rem;line-height:1.6;color:rgba(255,255,255,0.6);
}

.probs-close{
  margin-top:clamp(1.1rem,2.2vh,1.5rem);
  padding:clamp(1.4rem,3vh,2rem) clamp(1.5rem,3vw,2.5rem);
  border-radius:16px;
  border:1px solid rgba(76,120,168,0.30);
  background:linear-gradient(90deg, rgba(76,120,168,0.16), rgba(76,120,168,0.04));
  text-align:center;
  font-size:clamp(1.02rem,2vw,1.32rem);font-weight:600;letter-spacing:-0.015em;
  color:var(--bone);
}
.probs-close em{font-style:normal;color:var(--accent);}




/* ---------- HOW WE CAN WORK TOGETHER — Prove / Build / Run ----------
   A lit spine advances across the three phases as the section is scrolled.
   Nothing is hidden behind interaction: every phase and price is readable
   at rest, the rail only adds the sense of progression. */
.eng{padding:var(--section-pad) 0;background:var(--white);position:relative;}
.eng-head{max-width:820px;margin:0 auto;text-align:center;}
.eng-head .eyebrow{justify-content:center;}
.eng-head h2{
  font-size:clamp(1.85rem,4vw,2.75rem);
  color:var(--navy);letter-spacing:-0.03em;line-height:1.12;
  text-wrap:balance;
}

/* ---- the spine ---- */
.eng-rail{
  position:relative;
  height:34px;
  margin:clamp(2.75rem,7vh,4.25rem) 0 0;
}
.eng-rail-line,.eng-rail-fill{
  position:absolute;top:50%;height:2px;border-radius:2px;transform:translateY(-50%);
}
.eng-rail-line{left:0;right:0;background:#E3E8ED;}
.eng-rail-fill{
  left:0;width:0;
  background:linear-gradient(90deg,#8FB2D9,var(--accent));
  box-shadow:0 0 14px rgba(76,120,168,0.45);
  transition:width .12s linear;
}
.eng-nodes{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
}
.eng-node{display:flex;align-items:center;justify-content:center;}
.eng-node i{
  width:13px;height:13px;border-radius:50%;
  background:var(--white);border:2px solid #D5DDE5;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease);
}
.eng-node.is-on i{
  border-color:var(--accent);
  box-shadow:0 0 0 5px rgba(76,120,168,0.14), 0 0 16px rgba(76,120,168,0.5);
  transform:scale(1.18);
}

/* ---- the phases ---- */
.eng-phases{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,1.6rem);
  margin-top:clamp(1.25rem,2.6vh,1.75rem);
  align-items:stretch;
}
.eng-phase{
  display:flex;flex-direction:column;
  border:1px solid #E2E7EC;border-radius:20px;
  padding:clamp(1.6rem,2.9vw,2.15rem);
  background:var(--white);
  opacity:0.55;
  transform:translateY(10px);
  transition:opacity .55s var(--ease), transform .55s var(--ease),
             border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.eng-phase.is-on{
  opacity:1;transform:translateY(0);
  border-color:rgba(76,120,168,0.38);
  box-shadow:0 22px 50px -18px rgba(16,29,45,0.20);
}
.eng-phase-top{display:flex;align-items:flex-start;gap:0.9rem;margin-bottom:1.25rem;}
.eng-step{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  background:var(--light-grey);color:var(--blue-grey);
  font-size:0.76rem;font-weight:700;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.eng-phase.is-on .eng-step{background:var(--accent);color:#fff;}
.eng-phase h3{
  font-size:clamp(1.1rem,2vw,1.32rem);font-weight:700;
  color:var(--navy);letter-spacing:-0.02em;line-height:1.15;
}
.eng-term{
  display:block;margin-top:0.2rem;
  font-size:0.68rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
  color:#9AA5B1;
}
.eng-price{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,3.6vw,2.5rem);
  color:var(--navy);letter-spacing:-0.035em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.eng-cur{font-size:0.46em;font-weight:700;color:var(--blue-grey);margin-right:0.12em;}
.eng-per{font-size:0.36em;font-weight:600;color:var(--blue-grey);margin-left:0.35em;letter-spacing:0;}
.eng-price-text{
  font-size:clamp(0.95rem,1.7vw,1.08rem);font-weight:600;
  line-height:1.35;color:var(--blue-grey);letter-spacing:-0.01em;
}
.eng-meta{
  display:block;margin-top:0.55rem;
  font-size:0.8rem;color:#8894A2;
}
.eng-desc{
  margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid #EDF0F3;
  font-size:0.94rem;line-height:1.6;color:var(--navy);
}

/* the decision that makes the trial safe to take */
.eng-callout{
  margin-top:auto;padding-top:1.25rem;
}
.eng-callout > p{
  margin-top:0.4rem;
  padding:0.9rem 1rem;border-radius:12px;
  background:rgba(76,120,168,0.06);
  border:1px solid rgba(76,120,168,0.18);
  font-size:0.88rem;line-height:1.55;color:var(--navy);
}
.eng-callout-label,.eng-built-label,.eng-models-label{
  display:block;font-size:0.63rem;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--accent);
}
.eng-built{margin-top:auto;padding-top:1.25rem;}
.eng-built ul{margin-top:0.65rem;list-style:none;}
.eng-built li{
  position:relative;padding-left:1.15rem;
  font-size:0.88rem;line-height:1.5;color:var(--blue-grey);
}
.eng-built li + li{margin-top:0.5rem;}
.eng-built li::before{
  content:"";position:absolute;left:0;top:0.5em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:0.55;
}

/* ---- Run: segmented operating model ---- */
.eng-models{margin-top:auto;padding-top:1.25rem;}
.eng-seg{
  position:relative;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:0.65rem;padding:4px;
  background:var(--light-grey);border-radius:11px;
}
.eng-seg-glide{
  position:absolute;top:4px;bottom:4px;left:4px;
  width:calc((100% - 8px) / 3);
  border-radius:8px;background:var(--white);
  box-shadow:0 2px 8px rgba(16,29,45,0.12);
  transition:transform .38s cubic-bezier(.19,1,.22,1);
}
.eng-seg-btn{
  position:relative;z-index:2;
  padding:0.5rem 0.25rem;
  font-family:inherit;font-size:0.76rem;font-weight:600;
  color:var(--blue-grey);background:none;border:0;cursor:pointer;
  border-radius:8px;
  transition:color .3s var(--ease);
}
.eng-seg-btn.is-on{color:var(--accent);}
.eng-model-says{position:relative;display:grid;margin-top:0.85rem;}
.eng-model-say{
  grid-area:1/1;align-self:start;
  font-size:0.88rem;line-height:1.55;color:var(--navy);
  opacity:0;transform:translateY(6px);
  transition:opacity .32s var(--ease), transform .38s var(--ease);
}
.eng-model-say.is-on{opacity:1;transform:translateY(0);}

/* ---- footer ---- */
.eng-note{
  margin-top:clamp(1.5rem,3.2vh,2.25rem);
  font-size:0.76rem;line-height:1.65;color:#8894A2;font-style:italic;
  text-align:center;
}
.eng-foot{
  margin-top:clamp(2rem,4.5vh,3rem);
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  text-align:center;
}
.eng-close{
  font-size:clamp(1.1rem,2.3vw,1.5rem);font-weight:700;
  color:var(--navy);letter-spacing:-0.025em;text-wrap:balance;
}
.eng-close em{font-style:normal;color:var(--accent);}
.eng-cta{
  display:inline-flex;align-items:center;gap:0.6rem;
  background:var(--btn);color:var(--bone);
  font-size:0.9rem;font-weight:600;
  padding:0.95rem 1.75rem;border-radius:8px;
  box-shadow:0 10px 30px -8px rgba(76,120,168,0.5);
  transition:background .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.eng-cta svg{width:16px;height:16px;transition:transform .2s var(--ease);}
.eng-cta:hover{background:var(--btn-hover);transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(76,120,168,0.6);}
.eng-cta:hover svg{transform:translateX(3px);}

@media (max-width:900px){
  .eng-rail{display:none;}
  .eng-phases{grid-template-columns:1fr;margin-top:clamp(2rem,5vh,3rem);}
  /* unpinned from the rail, every phase must read at full strength */
  .eng-phase{opacity:1;transform:none;}
}

@media (prefers-reduced-motion: reduce){
  .prob-vis i{transition:none;}
  .eng-phase{opacity:1;transform:none;}
}

/* ---------- HERO: descriptor, dual CTA row, client-control note ---------- */

/* both buttons on one centred row */
.hero-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0.85rem;
  margin-top:2.1rem;
  opacity:0;
  animation:heroFadeUp .7s var(--ease) .46s forwards;
}

/* secondary: glass, borrowing the badge's material so the pair reads as a set */
.hero-cta-ghost{
  background:rgba(28,36,54,0.34);
  color:var(--bone);
  border:1px solid rgba(255,255,255,0.30);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:none;
}
.hero-cta-ghost:hover{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.55);
  transform:translateY(-2px);
  box-shadow:0 12px 30px -10px rgba(2,6,12,0.75);
}
.hero-cta-ghost:hover svg{transform:translateY(3px) translateX(0);}

/* the reassurance sits under the buttons, where the objection actually lands */

/* short viewports: the hero is a 100vh sticky layer with overflow:hidden, so
   the block has to compress or the scroll cue collides with the control note */








.hero-actions{margin-top:clamp(2.6rem,6.2vh,3.8rem);}


/* ---- hero responsive overrides: kept last so they win ---- */
@media (min-width:761px) and (max-height:780px){
  .hero-badge{margin-bottom:1rem;padding:0.4rem 0.9rem;}
  /* keep the width-driven size, only cap it by the height available */
  .hero h1{font-size:min(clamp(1.95rem, 4.6vw, 58px), 7.2vh);}
  .hero-line{font-size:clamp(1.3rem,2.9vw,2.1rem);}
  .hero-ticks{bottom:clamp(58px,8vh,84px);}
    .hero-actions{margin-top:1.6rem;}
}

/* on phones the block is taller than the space below the nav, so centring
   pushes it back up under the nav — anchor it to the top instead */
@media (max-width:760px){
  .hero{align-items:flex-start;padding-top:132px !important;}
}

@media (max-width:560px){
  .hero-actions{flex-direction:column;align-items:stretch;gap:0.7rem;}
  .hero-actions .hero-cta{justify-content:center;}
  /* three labels have to hold one line at 327px */
    }

/* 01 — work runs forward, then turns back on itself */
.pv-loop{width:100%;overflow:visible;}   /* height comes from .prob-vis, so it follows the responsive rule */
.pv-loop path{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.pv-loop-track{stroke:rgba(255,255,255,0.14);stroke-width:2;}
.pv-loop-line{
  stroke:var(--accent);stroke-width:2;
  stroke-dasharray:520;stroke-dashoffset:520;
  transition:stroke-dashoffset 1.15s cubic-bezier(.19,1,.22,1);
}
.pv-loop-head{
  stroke:var(--accent);stroke-width:2;
  opacity:0;transition:opacity .4s var(--ease) .95s;
}
.prob.is-visible .pv-loop-line{stroke-dashoffset:0;}
.prob.is-visible .pv-loop-head{opacity:1;}

/* 03 — progress stops partway and the wait opens up */
.pv-wait{display:flex;flex-direction:column;justify-content:center;gap:14px;}
.pv-row{
  position:relative;display:block;height:4px;border-radius:2px;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,0.20) 0 4px, transparent 4px 9px);
}
.pv-row i{
  position:absolute;left:0;top:0;bottom:0;
  width:0;border-radius:2px;
  background:linear-gradient(90deg, rgba(76,120,168,0.95), rgba(76,120,168,0.55));
  transition:width .85s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--n) * 110ms);
}
.prob.is-visible .pv-row i{width:var(--fill);}
/* the marker sits where the work stopped and keeps waiting */
.pv-row i::after{
  content:"";position:absolute;right:-4px;top:50%;
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(76,120,168,0.85);
  transform:translateY(-50%);
  opacity:0;transition:opacity .4s var(--ease);
  transition-delay:calc(var(--n) * 110ms + .7s);
}
.prob.is-visible .pv-row i::after{opacity:1;animation:probWait 2s ease-in-out .9s infinite;}
@keyframes probWait{
  0%,100%{opacity:0.45;transform:translateY(-50%) scale(0.85);}
  50%    {opacity:1;   transform:translateY(-50%) scale(1.18);}
}

/* ---- the commercial consequence, quieter than the bridge above it ---- */
.probs-why{
  margin-top:clamp(2.25rem,5.4vh,3.25rem);
  max-width:74ch;margin-left:auto;margin-right:auto;
  text-align:center;
}
.probs-why-label{
  display:block;font-size:0.63rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:0.6rem;
}
.probs-why p{
  font-size:clamp(0.92rem,1.7vw,1rem);
  line-height:1.7;color:rgba(255,255,255,0.6);
}

@media (prefers-reduced-motion: reduce){
  .pv-row i::after{animation:none;}
}

/* 02 — routine tasks piling onto one person */
.pv-pile{
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;
  gap:3px;
}
.pv-tile{
  flex:0 0 auto;               /* never let the column squeeze the tiles */
  width:var(--w);height:8px;border-radius:2px;
  background:linear-gradient(90deg, rgba(76,120,168,0.95), rgba(76,120,168,0.5));
  opacity:0;transform:translateY(-18px);
  transition:opacity .4s var(--ease), transform .6s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--n) * 140ms);
}
.prob.is-visible .pv-tile{opacity:1;transform:none;}
/* the one person carrying the stack */
.pv-pile-node{
  width:13px;height:13px;border-radius:50%;
  margin-top:5px;flex:0 0 auto;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(76,120,168,0.5);
  transition:box-shadow .6s var(--ease) .55s;
}
.prob.is-visible .pv-pile-node{box-shadow:0 0 16px 3px rgba(76,120,168,0.65);}
.pv-pile-base{
  width:100%;height:1px;margin-top:5px;flex:0 0 auto;
  background:rgba(255,255,255,0.16);
}

/* ---- problems responsive: kept last so it wins over the mark rules ---- */
@media (max-width:900px){
  .probs-grid{grid-template-columns:1fr;}
  .prob-vis{height:64px;}
  /* the pile is the tallest mark — trim it so it keeps clearance in the shorter box */
  .pv-pile{gap:2px;}
  .pv-tile{height:7px;}
  .pv-pile-node{width:11px;height:11px;margin-top:4px;}
  .pv-pile-base{margin-top:4px;}
}



/* ---------- MBA'S INTEGRATED MODEL ----------
   Same behaviour as the proof section: three cards drive one panel below.
   Nothing is hidden on touch — each card keeps its own text inline there. */
.model{padding:var(--section-pad) 0;background:var(--white);}
.model-head{max-width:820px;margin:0 auto;text-align:center;}
.model-head .eyebrow{justify-content:center;}
.model-head h2{
  font-size:clamp(1.9rem,4.2vw,2.9rem);
  color:var(--navy);letter-spacing:-0.03em;line-height:1.1;text-wrap:balance;
}
.model-head h2 em{font-style:normal;color:var(--accent);}
.model-head p{
  margin:1.15rem auto 0;max-width:64ch;
  font-size:clamp(0.98rem,1.8vw,1.08rem);line-height:1.65;color:var(--blue-grey);
}

/* ---- the three steps ---- */
.md-steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  --md-gap:clamp(1.1rem,2.2vw,1.6rem);gap:var(--md-gap);
  margin-top:clamp(2.5rem,6vh,4rem);
}
.md-step{
  position:relative;display:flex;flex-direction:column;
  cursor:default;
  border:1px solid #E2E7EC;border-radius:18px;
  padding:clamp(1.5rem,2.7vw,2rem) clamp(1.3rem,2.3vw,1.75rem);
  background:var(--white);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.md-step:hover,.md-step.is-picked{
  transform:translateY(-5px);
  box-shadow:0 20px 44px rgba(16,29,45,0.11);
  border-color:rgba(76,120,168,0.45);
}
/* chevrons in the gutters so the three read as a sequence, not a menu */
.md-step + .md-step::before{
  content:"";
  position:absolute;left:calc(var(--md-gap, 1.6rem) / -2 - 5px);
  top:50%;width:10px;height:10px;
  border-top:2px solid #C9D3DD;border-right:2px solid #C9D3DD;
  transform:translateY(-50%) rotate(45deg);
  transition:border-color .45s var(--ease);
}
.md-steps:hover .md-step + .md-step::before{border-color:rgba(76,120,168,0.55);}

.md-step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;}
.md-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(76,120,168,0.09);color:var(--accent);
  transition:background .45s var(--ease), color .45s var(--ease), transform .5s var(--ease);
}
.md-icon svg{width:22px;height:22px;}
.md-step:hover .md-icon,.md-step.is-picked .md-icon{
  background:var(--accent);color:#fff;transform:scale(1.06);
}
.md-idx{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--navy);color:var(--bone);font-size:0.72rem;font-weight:700;
}
.md-step h3{
  font-size:clamp(0.92rem,1.6vw,1.02rem);font-weight:700;
  letter-spacing:0.028em;text-transform:uppercase;
  color:var(--navy);line-height:1.25;
}
/* desktop reads the detail in the panel below; touch keeps it in the card */
.md-step-body{
  margin-top:0.85rem;
  font-size:0.92rem;line-height:1.6;color:var(--blue-grey);
  display:none;
}

/* ---- bottom row: the panel follows the hovered step ---- */
.md-foot{
  display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);
  gap:clamp(1.25rem,2.6vw,2rem);
  align-items:stretch;
  margin-top:clamp(2.5rem,6vh,3.5rem);
}
.md-statement{
  position:relative;
  border:1px solid #E2E7EC;border-radius:20px;
  background:linear-gradient(180deg,#FBFCFE 0%,#F4F8FD 100%);
  padding:clamp(1.75rem,3.4vh,2.3rem) clamp(1.75rem,3.2vw,2.5rem);
  display:flex;align-items:center;gap:clamp(1rem,2vw,1.5rem);
  overflow:hidden;
  min-height:clamp(150px,18vh,180px);
}
.md-statement-glow{
  position:absolute;left:50%;bottom:-130%;
  width:min(760px,95%);aspect-ratio:2/1;transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(76,120,168,0.20), transparent 68%);
  filter:blur(30px);pointer-events:none;
}
.md-marks{position:relative;z-index:2;flex-shrink:0;width:46px;height:46px;}
.md-mark{
  position:absolute;inset:0;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  box-shadow:0 10px 24px -8px rgba(76,120,168,0.6);
  opacity:0;transform:scale(.82) rotate(-8deg);
  transition:opacity .38s var(--ease), transform .48s cubic-bezier(.19,1,.22,1);
}
.md-mark svg{width:23px;height:23px;}
.md-mark.is-on{opacity:1;transform:scale(1) rotate(0);}

/* grid-stacked so the panel is sized once by the longest message */
.md-says{position:relative;z-index:2;flex:1;min-width:0;display:grid;}
.md-say{
  grid-area:1/1;align-self:center;margin:0;
  font-size:clamp(0.95rem,1.55vw,1.08rem);
  font-weight:500;letter-spacing:-0.01em;line-height:1.5;
  color:var(--navy);
  opacity:0;transform:translateY(10px);
  transition:opacity .38s var(--ease), transform .48s cubic-bezier(.19,1,.22,1);
}
.md-say.is-on{opacity:1;transform:translateY(0);}
.md-say-label{
  display:block;font-size:0.63rem;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:0.5rem;
}

/* ---- the visual panel ---- */
.md-visual{
  --md-inset:clamp(1.25rem,2.4vw,1.75rem);
  position:relative;
  border:1px solid #E2E7EC;border-radius:20px;background:var(--white);
  padding:var(--md-inset);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.md-vis{
  position:absolute;left:var(--md-inset);right:var(--md-inset);
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
}
.md-vis.is-on{opacity:1;}

/* resting */
.md-vis-idle{height:96px;display:flex;align-items:center;justify-content:center;}
.md-vis-idle span{
  position:absolute;border-radius:50%;
  border:1px solid rgba(76,120,168,0.35);width:34px;height:34px;
  animation:pfPulse 3.2s ease-out infinite;
}
.md-vis-idle span:nth-child(2){animation-delay:1.05s;}
.md-vis-idle span:nth-child(3){animation-delay:2.1s;}
.md-vis-idle i{width:9px;height:9px;border-radius:50%;background:var(--accent);}

/* 1 — a sweep across the flow, flagging where work is lost */
.md-vis-scan{height:96px;display:flex;align-items:center;justify-content:space-between;}
.md-vis-scan i{
  width:14px;height:34px;border-radius:4px;background:#DDE3EA;
  transition:background .45s var(--ease), transform .45s var(--ease);
  transition-delay:calc(var(--n) * 55ms);
}
.md-vis-scan.is-on i.is-waste{background:var(--accent);transform:scaleY(1.32);}
.md-scan-line{
  position:absolute;top:14%;bottom:14%;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
  box-shadow:0 0 14px rgba(76,120,168,0.9);
  opacity:0;
}
.md-vis-scan.is-on .md-scan-line{opacity:1;animation:mdScan 2.6s ease-in-out infinite;}
@keyframes mdScan{
  0%,100%{left:0%;}
  50%    {left:calc(100% - 2px);}
}

/* 2 — the check moves earlier in the run */
.md-vis-order{height:96px;display:flex;align-items:center;}
.md-order-track{
  position:absolute;left:0;right:0;top:50%;height:3px;border-radius:3px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,#DDE3EA 0 8px,transparent 8px 14px);
}
.md-order-ghost,.md-order-mark{
  position:absolute;top:50%;width:22px;height:22px;border-radius:7px;
  transform:translateY(-50%);
}
.md-order-ghost{left:82%;background:#E3E8ED;}
.md-order-mark{
  left:82%;background:var(--accent);
  box-shadow:0 0 18px rgba(76,120,168,0.7);
  transition:left 1s cubic-bezier(.19,1,.22,1) .15s;
}
.md-vis-order.is-on .md-order-mark{left:10%;}

/* 3 — three ways to run it; one is chosen */
.md-vis-lanes{height:96px;display:flex;flex-direction:column;justify-content:center;gap:14px;}
.md-lane{
  position:relative;display:block;height:8px;border-radius:4px;background:#EDF1F5;overflow:hidden;
}
.md-lane i{
  display:block;height:100%;width:0;border-radius:4px;
  background:#C8D2DC;
  transition:width .8s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--n) * 140ms);
}
.md-vis-lanes.is-on .md-lane i{width:100%;}
.md-vis-lanes.is-on .md-lane.is-picked i{
  background:linear-gradient(90deg,#8FB2D9,var(--accent));
  box-shadow:0 0 14px rgba(76,120,168,0.55);
}

/* ---- responsive ---- */
@media (max-width:980px){
  .md-steps{grid-template-columns:1fr;}
  .md-step + .md-step::before{display:none;}
  .md-foot{grid-template-columns:1fr;}
  .md-step-body{display:block;}   /* no hover on touch: keep the detail in the card */
  .md-visual{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .md-vis-scan.is-on .md-scan-line{animation:none;}
}

/* ---------- HERO pinned; WHERE CAPACITY IS BEING LOST rises over it ----------
   Scrubbed rather than flow-driven, so the rise can be slower than the scroll
   and can rest at full coverage before the page moves on. */
.hero-cross{position:relative;height:760vh;}  /* one screen-scroll per beat, then a rest before the next layer starts to rise */
.cross-pin{position:sticky;top:0;height:100vh;overflow:hidden;}
.cross-pin > .hero{position:absolute;inset:0;z-index:1;}
.cross-pin > .why{
  position:absolute;inset:0;z-index:3;
  min-height:0;
  transform:translateY(100%);
  will-change:transform;
}
.cross-pin > .probs{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(128px,15vh,150px) 0 clamp(40px,5vh,64px);
  box-sizing:border-box;
  overflow:hidden;
  transform:translateY(100%);
  will-change:transform;
}
/* compact enough to rest inside one screen */
.cross-pin .probs-head{margin-bottom:0;}
.cross-pin .probs-head h2{font-size:clamp(1.6rem,3.2vw,2.4rem);}
.cross-pin .probs-head p{margin-top:0.7rem;font-size:0.98rem;}
.cross-pin .probs-grid{margin-top:clamp(1.5rem,3.4vh,2.25rem);}
.cross-pin .prob{padding:clamp(1.2rem,2.2vw,1.6rem);}
.cross-pin .prob-vis{height:60px;margin:clamp(0.9rem,1.8vh,1.3rem) 0 clamp(1rem,2vh,1.4rem);}
.cross-pin .prob h3{font-size:0.98rem;min-height:2.5em;margin-bottom:0.5rem;}
.cross-pin .prob p{font-size:0.88rem;line-height:1.55;}
.cross-pin .probs-close{
  padding:clamp(1rem,2.2vh,1.35rem) clamp(1.3rem,2.6vw,2rem);
  font-size:clamp(0.95rem,1.7vw,1.12rem);
}

/* Only genuinely short viewports drop the pin now. Phones keep it, so the
   hero plays its four beats on scroll exactly as it does on a desktop
   instead of stacking them. */
@media (max-height:500px){
  .hero-cross{height:auto;}
  .cross-pin{position:static;height:auto;overflow:visible;}
  .cross-pin > .hero{position:relative;height:100vh;}
  .cross-pin > .probs{
    position:relative;transform:none !important;
    padding:var(--section-pad) 0;display:block;
  }
  .cross-pin > .why{
    position:relative;transform:none !important;
    min-height:84vh;
  }
}

/* ---------- WHY IT MATTERS — full screen ----------
   Near-black deep navy with slow-drifting planes and a luminous horizon that
   the rising light cannot pass. Same capacity-ceiling idea as before, but as
   atmosphere rather than a chart. */
.why{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  background:#1C2436;
  overflow:hidden;
  padding:clamp(120px,14vh,160px) 0;
  box-sizing:border-box;
}
.why-bg{position:absolute;inset:0;pointer-events:none;}
.why-bg.reveal{transform:none !important;}

/* soft planes of light, drifting on long cycles */
.why-plane{
  position:absolute;border-radius:50%;
  filter:blur(90px);
  will-change:transform;
}
.why-plane-a{
  width:78vw;height:64vh;left:-14vw;top:-16vh;
  background:radial-gradient(ellipse at center, rgba(46,58,84,0.85), transparent 68%);
  animation:whyDriftA 30s ease-in-out infinite alternate;
}
.why-plane-b{
  width:70vw;height:58vh;right:-16vw;bottom:-14vh;
  background:radial-gradient(ellipse at center, rgba(76,120,168,0.32), transparent 70%);
  animation:whyDriftB 38s ease-in-out infinite alternate;
}
.why-plane-c{
  width:52vw;height:44vh;left:28vw;top:26vh;
  background:radial-gradient(ellipse at center, rgba(76,120,168,0.42), transparent 72%);
  animation:whyDriftC 34s ease-in-out infinite alternate;
}
@keyframes whyDriftA{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(7vw,5vh,0) scale(1.14);}}
@keyframes whyDriftB{from{transform:translate3d(0,0,0) scale(1.08);}to{transform:translate3d(-6vw,-4vh,0) scale(1);}}
@keyframes whyDriftC{from{transform:translate3d(0,0,0) scale(1.05);}to{transform:translate3d(-4vw,3vh,0) scale(0.94);}}

/* light rising from below, dissolving as it reaches the line */
.why-beams{position:absolute;left:0;right:0;top:73%;bottom:0;}
.why-beams i{
  position:absolute;bottom:0;left:var(--x);
  width:clamp(26px,4.2vw,70px);
  height:0;
  background:linear-gradient(0deg,
    rgba(76,120,168,0.30) 0%, rgba(143,178,217,0.16) 55%, transparent 100%);
  filter:blur(7px);
  transition:height 1.8s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--n) * 150ms);
}
.why-bg.is-visible .why-beams i{height:var(--h);}

/* the line capacity cannot cross */
.why-horizon{
  position:absolute;left:0;right:0;top:73%;height:1px;
  background:linear-gradient(90deg,
    transparent 0, rgba(143,178,217,0.70) 16%, rgba(143,178,217,0.70) 84%, transparent 100%);
  box-shadow:0 0 34px rgba(76,120,168,0.55), 0 0 110px rgba(76,120,168,0.22);
  opacity:0;transform:scaleX(0.6);transform-origin:50% 50%;
  transition:opacity .9s var(--ease) .2s, transform 1.5s cubic-bezier(.19,1,.22,1) .2s;
}
.why-bg.is-visible .why-horizon{opacity:1;transform:scaleX(1);}

/* keeps the centre readable over the planes */
.why-vignette{
  position:absolute;inset:0;
  background:radial-gradient(58% 50% at 50% 46%, rgba(28,36,54,0.72) 0%, rgba(28,36,54,0.35) 55%, transparent 80%);
}

.why-inner{
  position:relative;z-index:2;text-align:center;
  max-width:1340px;margin:0 auto;
  padding:0 clamp(1.5rem,4vw,3rem);
}
.why-label{
  display:block;font-size:0.68rem;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:clamp(1.5rem,3.6vh,2.5rem);
}
.why-statement{
  margin:0 auto;
  font-family:var(--font-display);
  font-size:clamp(1.45rem,3.5vw,3rem);
  font-weight:300;                 /* the reference's light, open setting */
  line-height:1.32;
  letter-spacing:-0.015em;
  color:#EEF3F9;
  text-wrap:balance;
}
.why-statement em{
  font-style:italic;
  font-weight:300;
  color:var(--accent);
}

@media (max-width:760px){
  /* still needs room for the horizon to sit clear below the type */
  .why{min-height:84vh;padding:clamp(5rem,12vh,7rem) 0 clamp(4rem,9vh,6rem);}
  .why-beams{top:74%;}
  .why-horizon{top:74%;}
  .why-plane{filter:blur(60px);}
  .why-statement{font-size:clamp(1.3rem,5.6vw,1.9rem);line-height:1.36;}
}
@media (prefers-reduced-motion: reduce){
  .why-plane{animation:none;}
  .why-beams i,.why-horizon{transition:none;}
}

/* ---- cross-over performance ----
   backdrop-filter on the badge and ghost button repaints every frame while the
   hero plate moves, which is what made the transition judder. Suspend it (and
   promote the moving layers) only while the crossing is in progress. */
.hero-media,.hero-content{will-change:transform;}
.hero.is-crossing .hero-badge,
.hero.is-crossing .hero-cta-ghost{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* ---------- WHAT MBA REDESIGNS — AND CAN RUN ----------
   Bento grid: unequal cards on a deep navy ground, monitoring leading. */
/* pinned stage: cards converge, hold, then fold into a deck */
.redo-stage{position:relative;height:330vh;}
.redo-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;}
.redo{
  width:100%;
  padding:clamp(136px,16vh,168px) 0 clamp(1.25rem,2.6vh,2rem);
  background:#1C2436;position:relative;
  box-sizing:border-box;
}
.redo-pin > .redo{position:absolute;inset:0;display:flex;align-items:center;}
.redo-pin > .redo > .wrap{width:100%;}
/* compressed to rest inside one screen */
.redo-pin .redo-head{margin-bottom:clamp(1.05rem,2.3vh,1.5rem);}
.redo-pin .redo-head h2{font-size:clamp(1.55rem,3vw,2.15rem);}
.redo-pin .redo-head-copy > p{font-size:0.94rem;margin-top:0.8rem;}
.redo-pin .redo-note{margin-top:clamp(0.85rem,1.8vh,1.25rem);font-size:0.78rem;}
.redo-pin .redo-card{padding:clamp(0.95rem,1.75vw,1.3rem);}
.redo-pin .redo-card h3{margin-top:clamp(0.8rem,1.8vh,1.15rem);font-size:clamp(0.98rem,1.7vw,1.16rem);}
.redo-pin .redo-card > p{font-size:0.87rem;line-height:1.55;}
.redo-pin .rv-icon{max-width:150px;}
.redo-pin .redo-c .rv-icon{max-width:130px;}
.redo-pin .redo-vis{padding-top:clamp(0.7rem,1.5vh,1.05rem);}
.redo-pin .redo-grid{gap:clamp(0.75rem,1.4vw,1.05rem);}
.redo-grid{position:relative;}   /* offsetParent for the card measurements */
.redo-card{will-change:transform,opacity;}
/* while the deck folds, the contents fade so the stack reads as surfaces,
   not four sets of overlapping text */
.redo-card > *{opacity:var(--redo-content, 1);}
.redo-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:clamp(1.5rem,4vw,3rem);
  margin-bottom:clamp(2.5rem,6vh,4rem);
}
.redo-index{
  display:inline-block;margin-right:0.8rem;
  font-size:0.72rem;font-weight:700;letter-spacing:0.14em;
  color:rgba(255,255,255,0.32);
}
.redo-head .eyebrow{display:inline-flex;color:var(--accent-small);}
.redo-head h2{
  margin-top:1.1rem;
  font-size:clamp(1.9rem,4.2vw,3rem);
  color:var(--bone);letter-spacing:-0.032em;line-height:1.08;
  max-width:20ch;
}
.redo-head h2 em{font-style:normal;color:rgba(255,255,255,0.42);}
.redo-head-copy > p{
  margin-top:1.1rem;max-width:62ch;
  font-size:clamp(0.95rem,1.7vw,1.05rem);line-height:1.65;
  color:rgba(255,255,255,0.58);
}
.redo-cta{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:0.6rem;
  padding:0.9rem 1.6rem;border-radius:999px;
  background:var(--bone);color:var(--navy);
  font-size:0.88rem;font-weight:600;white-space:nowrap;
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.redo-cta:hover{
  background:var(--btn);
  color:var(--bone);
  transform:translateY(-2px);
  box-shadow:0 12px 30px -10px rgba(76,120,168,0.65);
}

/* ---- the bento ---- */
.redo-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.12fr);
  grid-template-areas:
    "a b c"
    "d d c";
  gap:clamp(0.9rem,1.8vw,1.35rem);
}
.redo-a{grid-area:a;} .redo-b{grid-area:b;} .redo-c{grid-area:c;} .redo-d{grid-area:d;}

.redo-card{
  position:relative;display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  background:linear-gradient(168deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.015) 62%);
  padding:clamp(1.35rem,2.4vw,1.9rem);
  overflow:hidden;
  transition:border-color .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}
.redo-card:hover{
  border-color:rgba(76,120,168,0.42);
  transform:translateY(-4px);
  background:linear-gradient(168deg, rgba(76,120,168,0.12) 0%, rgba(255,255,255,0.015) 62%);
}
.redo-pill{
  display:inline-flex;align-items:center;gap:0.5rem;align-self:flex-start;
  padding:0.4rem 0.85rem;border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  font-size:0.68rem;font-weight:600;letter-spacing:0.02em;
  color:rgba(255,255,255,0.72);
}
.redo-pill i{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px rgba(76,120,168,0.9);flex:0 0 auto;
}
.redo-card h3{
  margin-top:clamp(1.1rem,2.4vh,1.6rem);
  font-size:clamp(1.05rem,1.9vw,1.32rem);font-weight:700;
  color:var(--bone);letter-spacing:-0.02em;line-height:1.22;
}
.redo-card > p{
  margin-top:0.7rem;
  font-size:0.92rem;line-height:1.6;color:rgba(255,255,255,0.58);
}
.redo-c h3{font-size:clamp(1.2rem,2.3vw,1.6rem);}
/* tall card: the feed fills the space under the copy instead of sinking to the floor */
.redo-c .redo-vis{margin-top:clamp(1.5rem,3.5vh,2.4rem);}
.redo-c > p{max-width:46ch;}

/* the wide short card runs its copy beside its mark */
.redo-d-body{display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.5rem);margin-top:1.1rem;}
.redo-d-body p{flex:1;font-size:0.95rem;line-height:1.6;color:rgba(255,255,255,0.6);}

/* ---- marks ---- */
.redo-vis{position:relative;margin-top:auto;padding-top:clamp(1.25rem,3vh,2rem);}

.redo-note-label{color:var(--accent);font-weight:700;}
.redo-note{
  margin-top:clamp(1.5rem,3.2vh,2.25rem);
  max-width:82ch;
  font-size:0.82rem;line-height:1.7;color:rgba(255,255,255,0.44);
}

@media (max-width:980px), (max-height:760px){
  .redo-stage{height:auto;}
  .redo-pin{position:static;height:auto;overflow:visible;display:block;}
  .redo-pin > .redo{position:relative;display:block;padding:var(--section-pad) 0;}
  .redo-card{transform:none !important;opacity:1 !important;}
}

@media (max-width:1080px){
  .redo-grid{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"a b" "c c" "d d";}
}
@media (max-width:720px){
  .redo-head{grid-template-columns:1fr;align-items:start;}
  .redo-grid{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d";}
  .redo-d-body{flex-direction:column;align-items:flex-start;gap:1.25rem;}
}
@media (prefers-reduced-motion: reduce){
  .rv-sync,.rv-sweep,.rv-blip{animation:none;}
}

/* ---------- WHY MBA — three capabilities converging on one claim ----------
   Light: this is where the page turns from problem to capability. The
   connectors draw in on reveal so the section argues its own headline. */
.whymba{
  padding:var(--section-pad) 0;
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F9FC 100%);
  position:relative;
}
.wm-head{max-width:760px;margin:0 auto;text-align:center;}
.wm-head .eyebrow{justify-content:center;}
.wm-head h2{
  font-size:clamp(1.85rem,4vw,2.75rem);
  color:var(--navy);letter-spacing:-0.03em;line-height:1.12;text-wrap:balance;
}
.wm-head h2 em{font-style:normal;color:var(--accent);}

.wm-triad{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.1rem,2.4vw,1.9rem);
  margin-top:clamp(2.5rem,6vh,4rem);
  align-items:stretch;
}
.wm-cap{
  display:flex;flex-direction:column;
  border:1px solid #E4E9EE;border-radius:20px;
  background:var(--white);
  padding:clamp(1.5rem,2.7vw,2.1rem);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.wm-cap:hover{
  border-color:rgba(76,120,168,0.4);
  box-shadow:0 22px 50px -20px rgba(16,29,45,0.18);
  transform:translateY(-4px);
}

/* ---- marks ---- */
.wm-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:66px;height:52px;
  border-radius:14px;
  background:rgba(76,120,168,0.07);
  margin-bottom:clamp(1.1rem,2.4vh,1.5rem);
}
.wm-mark svg{width:44px;height:32px;overflow:visible;}
.wm-mark path{stroke-linecap:round;stroke-linejoin:round;fill:none;}

/* 1 — the hidden dependencies between the pieces become visible */
.wm-link{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:150;stroke-dashoffset:150;
  transition:stroke-dashoffset 1.1s cubic-bezier(.19,1,.22,1) .15s;}
.wm-node-s{fill:var(--accent);opacity:0;transition:opacity .4s var(--ease);}
.reveal-rise.is-visible .wm-link{stroke-dashoffset:0;}
.reveal-rise.is-visible .wm-node-s{opacity:1;}

/* 2 — spread measured against the standard, then tightened */
.wm-axis{stroke:#D6DEE6;stroke-width:1.6;}
.wm-spread{stroke:var(--accent);stroke-width:2.6;stroke-dasharray:90;stroke-dashoffset:90;
  transition:stroke-dashoffset .9s cubic-bezier(.19,1,.22,1) .25s;}
.wm-target{stroke:rgba(76,120,168,0.42);stroke-width:1.4;stroke-dasharray:3 4;opacity:0;
  transition:opacity .5s var(--ease) .9s;}
.reveal-rise.is-visible .wm-spread{stroke-dashoffset:0;}
.reveal-rise.is-visible .wm-target{opacity:1;}

/* 3 — work passes a human checkpoint before it continues */
.wm-flow{stroke:#C9D3DD;stroke-width:2;stroke-dasharray:40;stroke-dashoffset:40;
  transition:stroke-dashoffset .8s cubic-bezier(.19,1,.22,1);}
.wm-gate{stroke:var(--accent);stroke-width:1.8;stroke-dasharray:70;stroke-dashoffset:70;
  transition:stroke-dashoffset .9s cubic-bezier(.19,1,.22,1) .3s;}
.wm-check{stroke:var(--accent);stroke-width:2;opacity:0;transition:opacity .4s var(--ease) 1s;}
.reveal-rise.is-visible .wm-flow,
.reveal-rise.is-visible .wm-gate{stroke-dashoffset:0;}
.reveal-rise.is-visible .wm-check{opacity:1;}

.wm-cap h3{
  font-size:clamp(1rem,1.8vw,1.16rem);font-weight:700;
  color:var(--navy);letter-spacing:-0.015em;line-height:1.25;
  min-height:2.5em;
}
.wm-cap > p{
  margin-top:0.7rem;
  font-size:0.93rem;line-height:1.62;color:var(--blue-grey);
}
.wm-enables{
  margin-top:auto;padding-top:1.15rem;
  border-top:1px solid #EDF1F5;
}
.wm-enables-label{
  display:block;font-size:0.63rem;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:0.45rem;
}
.wm-enables p{font-size:0.92rem;line-height:1.55;color:var(--navy);font-weight:600;}

/* ---- the three run together into one point ---- */
.wm-converge{position:relative;height:130px;margin-top:-1px;}
.wm-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.wm-line{
  fill:none;stroke:#CBD7E3;stroke-width:1.5;
  vector-effect:non-scaling-stroke;
  /* pathLength=1 normalises the dash to the real curve length; a fixed
     dasharray was shorter than the path, so the lines drew then broke off */
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.2s cubic-bezier(.19,1,.22,1);
}
.wm-line:nth-child(2){transition-delay:.12s;}
.wm-line:nth-child(3){transition-delay:.24s;}
.wm-converge.is-visible .wm-line{stroke-dashoffset:0;stroke:rgba(76,120,168,0.55);}
.wm-hub{
  position:absolute;left:50%;bottom:0;
  width:13px;height:13px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,50%) scale(0);
  box-shadow:0 0 0 6px rgba(76,120,168,0.12), 0 0 20px rgba(76,120,168,0.55);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1) 1.05s;
}
.wm-converge.is-visible .wm-hub{transform:translate(-50%,50%) scale(1);}

.wm-close{
  margin:clamp(1.75rem,4vh,2.5rem) auto 0;
  max-width:52ch;text-align:center;
  font-size:clamp(1.1rem,2.2vw,1.45rem);font-weight:600;
  color:var(--navy);letter-spacing:-0.022em;line-height:1.4;text-wrap:balance;
}
.wm-close em{font-style:normal;color:var(--accent);}

@media (max-width:900px){
  .wm-triad{grid-template-columns:1fr;}
  .wm-cap h3{min-height:0;}
  /* stacked, the connectors no longer describe the layout, and a lone hub
     with nothing running into it says nothing — drop the whole join */
  .wm-converge{display:none;}
  .wm-close{margin-top:clamp(2rem,5vh,3rem);}
}
@media (prefers-reduced-motion: reduce){
  .wm-link,.wm-spread,.wm-flow,.wm-gate,.wm-line,.wm-hub{transition:none;}
}

/* ---------- EVIDENCE AND CAPACITY OPPORTUNITY ----------
   Pinned: a lit marker travels a left rail through three cases and the
   capacity opportunity, over a field of brand-blue pixels. */
.ev-stage{position:relative;height:420vh;}
.ev-pin{
  position:sticky;top:0;height:100vh;
  background:#1C2436;
  overflow:hidden;
  display:flex;align-items:center;
}

/* the pixel field, densest toward the top right */
.ev-field{
  position:absolute;inset:-10%;
  background-image:radial-gradient(rgba(76,120,168,0.95) 1.6px, transparent 1.7px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(115% 95% at 100% 4%, #000 0%, rgba(0,0,0,0.5) 34%, transparent 70%);
          mask-image:radial-gradient(115% 95% at 100% 4%, #000 0%, rgba(0,0,0,0.5) 34%, transparent 70%);
  opacity:0.8;
  animation:evDrift 22s ease-in-out infinite alternate;
}
.ev-field-2{
  background-image:radial-gradient(rgba(143,178,217,0.85) 2.6px, transparent 2.8px);
  background-size:53px 53px;
  opacity:0.55;
  animation:evDrift2 30s ease-in-out infinite alternate;
}
/* a third grid at an odd pitch so the field never reads as a regular lattice */
.ev-field-3{
  background-image:radial-gradient(rgba(76,120,168,0.7) 3.4px, transparent 3.6px);
  background-size:97px 83px;
  background-position:13px 29px;
  opacity:0.4;
  animation:evDrift 34s ease-in-out infinite alternate-reverse;
}
@keyframes evDrift{from{transform:translate3d(0,0,0);}to{transform:translate3d(-18px,14px,0);}}
@keyframes evDrift2{from{transform:translate3d(0,0,0);}to{transform:translate3d(22px,-16px,0);}}

.ev-inner{position:relative;z-index:2;width:100%;}
.ev-head{max-width:760px;}
.ev-head h2{
  font-size:clamp(1.6rem,3.1vw,2.35rem);
  color:var(--bone);letter-spacing:-0.03em;line-height:1.15;
}
.ev-head h2 em{font-style:normal;color:rgba(255,255,255,0.42);}

.ev-body{
  display:grid;grid-template-columns:minmax(0,0.72fr) minmax(0,1.28fr);
  gap:clamp(2rem,6vw,5rem);
  margin-top:clamp(2rem,5vh,3.25rem);
  align-items:start;
}

/* ---- the rail ---- */
.ev-rail{position:relative;padding-left:2rem;}
.ev-rail-line{
  position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:rgba(255,255,255,0.10);border-radius:2px;overflow:hidden;
}
.ev-rail-fill{
  display:block;width:100%;height:0;
  background:linear-gradient(180deg,#8FB2D9,var(--accent));
  box-shadow:0 0 14px rgba(76,120,168,0.75);
  transition:height .12s linear;
}
.ev-step{
  position:relative;display:block;width:100%;
  background:none;border:0;padding:0.85rem 0;
  font-family:inherit;text-align:left;cursor:pointer;
}
.ev-step span{
  display:block;font-size:0.64rem;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.34);
  transition:color .35s var(--ease);
}
.ev-step em{
  display:block;margin-top:0.28rem;font-style:normal;
  font-size:clamp(0.95rem,1.7vw,1.1rem);font-weight:600;
  color:rgba(255,255,255,0.5);letter-spacing:-0.01em;
  transition:color .35s var(--ease);
}
.ev-step::before{
  content:"";position:absolute;left:-2rem;top:1.25rem;
  width:12px;height:12px;border-radius:50%;
  background:#1C2436;border:2px solid rgba(255,255,255,0.22);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .4s var(--ease);
}
.ev-step:hover span,.ev-step:hover em{color:rgba(255,255,255,0.78);}
.ev-step.is-on span{color:var(--accent);}
.ev-step.is-on em{color:var(--bone);}
.ev-step.is-on::before{
  border-color:var(--accent);
  box-shadow:0 0 0 5px rgba(76,120,168,0.16), 0 0 18px rgba(76,120,168,0.85);
  transform:scale(1.12);
}
.ev-step:focus-visible{outline:2px solid rgba(76,120,168,0.9);outline-offset:3px;border-radius:6px;}

/* ---- the panels ---- */
.ev-panels{position:relative;display:grid;min-height:clamp(230px,32vh,300px);}
.ev-panel{
  grid-area:1/1;align-self:start;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s var(--ease), transform .55s cubic-bezier(.19,1,.22,1);
}
.ev-panel.is-on{opacity:1;transform:none;pointer-events:auto;}
.ev-pill{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.4rem 0.9rem;border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);
  font-size:0.68rem;font-weight:600;color:rgba(255,255,255,0.78);
}
.ev-pill i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(76,120,168,0.9);}
.ev-desc{
  margin-top:clamp(1rem,2.2vh,1.4rem);max-width:56ch;
  font-size:clamp(0.95rem,1.7vw,1.06rem);line-height:1.62;
  color:rgba(255,255,255,0.62);
}
.ev-out{margin-top:clamp(1.25rem,2.8vh,1.85rem);}
.ev-out-label{
  display:block;font-size:0.63rem;font-weight:700;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);
  margin-bottom:0.7rem;
}
.ev-before{
  display:block;font-size:0.92rem;color:rgba(255,255,255,0.34);
  text-decoration:line-through;text-decoration-color:rgba(255,255,255,0.28);
  margin-bottom:0.4rem;
}
.ev-after{
  display:block;font-family:var(--font-display);
  font-size:clamp(1.4rem,2.9vw,2.25rem);font-weight:600;
  color:var(--bone);letter-spacing:-0.03em;line-height:1.18;text-wrap:balance;
}
.ev-after-fig{
  font-weight:800;font-size:clamp(2rem,4.6vw,3.4rem);
  font-variant-numeric:tabular-nums;letter-spacing:-0.045em;
}
.ev-tilde{color:rgba(255,255,255,0.4);font-weight:600;margin-right:0.06em;}
.ev-unit{font-size:0.3em;font-weight:600;color:rgba(255,255,255,0.55);margin-left:0.5em;letter-spacing:0.02em;}
.ev-cap-note{
  display:block;margin-top:0.8rem;max-width:52ch;
  font-size:0.82rem;line-height:1.6;color:rgba(255,255,255,0.42);
}

/* ---- the qualification swaps with the panel ---- */
.ev-quals{position:relative;display:grid;margin-top:clamp(1.75rem,4vh,2.75rem);}
.ev-qual{
  grid-area:1/1;align-self:start;max-width:86ch;
  font-size:0.78rem;line-height:1.7;color:rgba(255,255,255,0.4);
  opacity:0;transition:opacity .4s var(--ease);
}
.ev-qual.is-on{opacity:1;}
.ev-qual-label{color:var(--accent);font-weight:700;}

/* Phones keep the pinned scrub now, so the cases advance on scroll exactly
   as they do on a desktop. Only genuinely short viewports fall back to the
   stacked list below. */
@media (max-height:500px){
  .ev-stage{height:auto;}
  .ev-pin{position:static;height:auto;display:block;padding:var(--section-pad) 0;}
  .ev-body{grid-template-columns:1fr;gap:2rem;}
  /* unpinned there is no travelling marker, so every case is shown in full */
  .ev-panels{display:block;min-height:0;}
  .ev-panel{opacity:1;transform:none;pointer-events:auto;padding-bottom:2.25rem;}
  .ev-panel + .ev-panel{border-top:1px solid rgba(255,255,255,0.08);padding-top:2.25rem;}
  .ev-rail{display:none;}
  .ev-quals{display:block;}
  .ev-qual{opacity:1;}
  .ev-qual + .ev-qual{margin-top:1rem;}
}
@media (prefers-reduced-motion: reduce){
  .ev-field{animation:none;}
}

/* ---------- TWO-WEEK TRIAL — schematic ----------
   Drawn rather than decorated: a measured field, a framed specification with
   corner ticks and a dimension marker, then a connector running down to the
   single ask. ---- */
.trial{
  position:relative;
  padding:var(--section-pad) 0;
  background:#1C2436;
  overflow:hidden;
}
/* the drawing surface: a coarse grid over a fine one, drifting slowly */
.tb-grid{
  position:absolute;inset:-6%;
  pointer-events:none;
  background-image:linear-gradient(to right, rgba(143,178,217,0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(143,178,217,0.09) 1px, transparent 1px);
  background-size:110px 110px;
  animation:tbDrift 40s linear infinite alternate;
}
.tb-grid-fine{
  background-image:linear-gradient(to right, rgba(143,178,217,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(143,178,217,0.05) 1px, transparent 1px);
  background-size:22px 22px;
  animation-duration:56s;
}
@keyframes tbDrift{from{transform:translate3d(0,0,0);}to{transform:translate3d(28px,-20px,0);}}
.tb-glow{
  position:absolute;left:50%;top:38%;
  width:min(1100px,110%);aspect-ratio:2/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(76,120,168,0.20), transparent 68%);
  filter:blur(70px);pointer-events:none;
}

.trial .wrap{position:relative;z-index:2;}
.trial-head{max-width:780px;margin:0 auto;text-align:center;}
.trial-head .eyebrow{justify-content:center;}
.trial-head h2{
  font-size:clamp(1.85rem,4vw,2.8rem);
  color:var(--bone);letter-spacing:-0.032em;line-height:1.1;text-wrap:balance;
}
.trial-head h2 em{font-style:normal;color:var(--accent);}
.trial-head > p{
  margin:1.15rem auto 0;max-width:64ch;
  font-size:clamp(0.96rem,1.75vw,1.05rem);line-height:1.65;
  color:rgba(255,255,255,0.56);
}

/* ---- the framed specification ---- */
.tb-frame{
  position:relative;
  max-width:980px;margin:clamp(2.5rem,5.5vh,3.5rem) auto 0;
  border:1px solid rgba(143,178,217,0.22);
  background:linear-gradient(180deg, rgba(28,36,54,0.72), rgba(28,36,54,0.72));
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
/* corner ticks, drawn in */
.tb-corner{
  position:absolute;width:16px;height:16px;
  border:1px solid var(--accent);
  opacity:0;transition:opacity .5s var(--ease) .15s;
}
.tb-tl{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.tb-tr{top:-1px;right:-1px;border-left:0;border-bottom:0;}
.tb-bl{bottom:-1px;left:-1px;border-right:0;border-top:0;}
.tb-br{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.reveal.is-visible .tb-corner{opacity:1;}

/* the dimension marker down the outside edge */
.tb-dim{
  position:absolute;left:-46px;top:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;
  color:rgba(143,178,217,0.6);
}
.tb-dim i{flex:1;width:1px;background:currentColor;opacity:0.5;}
.tb-dim b{
  writing-mode:vertical-rl;
  padding:0.5rem 0;
  font-size:0.6rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  white-space:nowrap;
}

/* the commercial terms, stated once */
.tb-spec{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:clamp(0.6rem,1.8vw,1.25rem);
  padding:clamp(0.9rem,2vh,1.2rem) clamp(1.25rem,3vw,2rem);
  border-bottom:1px solid rgba(143,178,217,0.18);
  background:rgba(76,120,168,0.08);
  font-size:clamp(0.82rem,1.5vw,0.95rem);font-weight:600;
  letter-spacing:0.03em;text-transform:uppercase;
  color:rgba(255,255,255,0.82);
}
.tb-spec i{width:3px;height:3px;border-radius:50%;background:rgba(143,178,217,0.55);flex:0 0 auto;}
.tb-price{color:var(--accent);}

.tb-body{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:0;
}
.tb-scope{padding:clamp(1.5rem,3.2vw,2.25rem);}
.tb-next{
  padding:clamp(1.5rem,3.2vw,2.25rem);
  border-left:1px solid rgba(143,178,217,0.16);
}
.tb-label{
  display:block;margin-bottom:1.15rem;
  font-size:0.6rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);
}
.tb-scope ol{list-style:none;counter-reset:none;}
.tb-scope li{
  display:flex;align-items:baseline;gap:0.7rem;
  font-size:0.94rem;line-height:1.55;color:rgba(255,255,255,0.86);
  opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease), transform .5s var(--ease);
  transition-delay:calc(var(--n) * 110ms + .2s);
}
.tb-scope li + li{margin-top:0.9rem;}
.reveal.is-visible .tb-scope li{opacity:1;transform:none;}
.tb-num{
  flex:0 0 2.2rem;
  font-size:0.8rem;font-weight:700;letter-spacing:0.05em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.tb-next p{font-size:0.93rem;line-height:1.68;color:rgba(255,255,255,0.56);}

/* ---- the connector down to the ask ---- */
.tb-path{position:relative;height:110px;margin:0 auto;width:2px;}
.tb-path svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.tb-path-line{
  fill:none;stroke:rgba(143,178,217,0.55);stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1s cubic-bezier(.19,1,.22,1);
}
.reveal.is-visible .tb-path-line{stroke-dashoffset:0;}
.tb-node{
  position:absolute;left:50%;bottom:0;
  width:9px;height:9px;
  transform:translate(-50%,50%) rotate(45deg) scale(0);
  background:var(--accent);
  box-shadow:0 0 16px rgba(76,120,168,0.85);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1) .85s;
}
.reveal.is-visible .tb-node{transform:translate(-50%,50%) rotate(45deg) scale(1);}

/* ---- the ask ---- */
.trial-close{margin-top:clamp(1.75rem,4vh,2.5rem);text-align:center;}
.trial-question{
  max-width:34ch;margin:0 auto;
  font-family:var(--font-display);
  font-size:clamp(1.45rem,3.1vw,2.35rem);font-weight:500;
  color:var(--bone);letter-spacing:-0.032em;line-height:1.18;text-wrap:balance;
}
.trial-cta{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:clamp(1.5rem,3.4vh,2.25rem);
  background:var(--btn);color:var(--bone);
  font-size:0.95rem;font-weight:600;
  padding:1.05rem 2.4rem;border-radius:6px;
  box-shadow:0 14px 34px -10px rgba(76,120,168,0.7);
  transition:background .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.trial-cta:hover{background:var(--btn-hover);transform:translateY(-2px);box-shadow:0 18px 44px -10px rgba(76,120,168,0.85);}
.trial-cta:active{transform:translateY(0) scale(0.985);}
.trial-cta-note{
  margin:clamp(1.1rem,2.4vh,1.6rem) auto 0;max-width:88ch;
  font-size:0.82rem;line-height:1.65;color:rgba(255,255,255,0.42);
}

@media (max-width:900px){
  .tb-body{grid-template-columns:1fr;}
  .tb-next{border-left:0;border-top:1px solid rgba(143,178,217,0.16);}
  .tb-dim{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .tb-grid{animation:none;}
  .tb-scope li,.tb-path-line,.tb-node,.tb-corner{transition:none;}
}

/* ---------- new marks: nameable at a glance ---------- */
.rv-icon{width:100%;max-width:170px;height:auto;overflow:visible;margin-top:auto;}
.redo-c .rv-icon{max-width:150px;align-self:center;margin-top:clamp(1rem,2.4vh,1.6rem);}
.redo-d .rv-icon{max-width:170px;margin-top:0;flex:0 0 auto;}
.rv-icon path,.rv-icon circle,.rv-icon rect{vector-effect:non-scaling-stroke;}

/* A — records kept in sync */
.rv-rec{
  fill:rgba(76,120,168,0.22);stroke:var(--accent);stroke-width:1.4;
  opacity:0;transform:translateX(-14px);
  transition:opacity .45s var(--ease), transform .55s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--n) * 120ms);
}
.reveal-rise.is-visible .rv-rec{opacity:1;transform:none;}
.rv-sync-arc,.rv-sync-tip{stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.rv-sync{transform-origin:96px 32px;}
.reveal-rise.is-visible .rv-sync{animation:rvSpin 6s linear infinite;}
@keyframes rvSpin{to{transform:rotate(360deg);}}

/* B — a document checked before it moves on */
.rv-page{fill:rgba(255,255,255,0.04);stroke:rgba(255,255,255,0.35);stroke-width:1.6;}
.rv-fold{stroke:rgba(255,255,255,0.35);stroke-width:1.6;fill:none;}
.rv-tline{
  stroke:rgba(255,255,255,0.4);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:44;stroke-dashoffset:44;
  transition:stroke-dashoffset .6s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--n) * 130ms);
}
.reveal-rise.is-visible .rv-tline{stroke-dashoffset:0;}
.rv-stamp{
  fill:var(--accent);stroke:none;
  opacity:0;transform:scale(.4);transform-origin:100px 52px;
  transition:opacity .35s var(--ease) .5s, transform .5s cubic-bezier(.34,1.56,.64,1) .5s;
}
.rv-stamp-tick{
  stroke:#0A1526;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22;
  transition:stroke-dashoffset .4s cubic-bezier(.19,1,.22,1) .78s;
}
.reveal-rise.is-visible .rv-stamp{opacity:1;transform:scale(1);}
.reveal-rise.is-visible .rv-stamp-tick{stroke-dashoffset:0;}

/* C — a sweep picking up coverage */
.rv-ring-o{fill:none;stroke:rgba(255,255,255,0.16);stroke-width:1.2;}
.rv-cross{stroke:rgba(255,255,255,0.1);stroke-width:1.2;}
.rv-sweep path{fill:rgba(76,120,168,0.3);}
.rv-sweep{transform-origin:65px 60px;}
.reveal-rise.is-visible .rv-sweep{animation:rvSpin 4.5s linear infinite;}
.rv-blip{
  fill:var(--accent);
  opacity:0;
  animation:none;
}
.reveal-rise.is-visible .rv-blip{
  animation:rvBlip 4.5s ease-out infinite;
  animation-delay:calc(var(--n) * 1.5s);
}
@keyframes rvBlip{0%{opacity:1;}45%{opacity:0.5;}100%{opacity:0;}}

/* D — a query answered, one source cited */
.rv-field{fill:rgba(255,255,255,0.05);stroke:rgba(255,255,255,0.22);stroke-width:1.4;}
.rv-glass{fill:none;stroke:rgba(255,255,255,0.5);stroke-width:1.8;}
.rv-glass-h{stroke:rgba(255,255,255,0.5);stroke-width:1.8;stroke-linecap:round;fill:none;}
.rv-q{
  stroke:rgba(255,255,255,0.3);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:60;stroke-dashoffset:60;
  transition:stroke-dashoffset .7s cubic-bezier(.19,1,.22,1) .1s;
}
.reveal-rise.is-visible .rv-q{stroke-dashoffset:0;}
.rv-res{
  fill:rgba(255,255,255,0.09);
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
  transition-delay:calc(var(--n) * 150ms + .35s);
}
.rv-res.is-cited{fill:rgba(76,120,168,0.5);}
.reveal-rise.is-visible .rv-res{opacity:1;transform:none;}
.rv-citedot{
  fill:var(--accent);
  opacity:0;transform:scale(.3);transform-origin:134px 69px;
  transition:opacity .3s var(--ease) .85s, transform .45s cubic-bezier(.34,1.56,.64,1) .85s;
}
.reveal-rise.is-visible .rv-citedot{opacity:1;transform:scale(1);}

/* headline on two deliberate lines */
.redo-hl{display:block;}
.redo-head h2 em.redo-hl{margin-top:0.12em;}

/* ---------- MBA'S INTEGRATED MODEL — pinned, rests at full screen ---------- */
.model-stage{position:relative;height:215vh;}
.model-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;}
.model-pin > .model{width:100%;padding:clamp(120px,14vh,150px) 0 clamp(1.5rem,3vh,2.5rem);}
/* spacing only — type sizes untouched */
.model-pin .md-steps{margin-top:clamp(1.4rem,3vh,2rem);}
.model-pin .md-step{padding:clamp(1.05rem,2vw,1.4rem) clamp(1rem,1.9vw,1.35rem);}
.model-pin .md-step-top{margin-bottom:0.75rem;}
.model-pin .md-foot{margin-top:clamp(1.4rem,3vh,2rem);}
.model-pin .md-statement{
  min-height:0;
  padding:clamp(1.15rem,2.4vh,1.6rem) clamp(1.4rem,2.6vw,2rem);
}
.model-pin .md-visual{padding:clamp(0.9rem,1.9vw,1.3rem);}
.model-pin .model-head p{margin-top:0.85rem;}

/* ---------- WHY MBA — pinned, rests at full screen ---------- */
.wm-stage{position:relative;height:215vh;}
.wm-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;}
.wm-pin > .whymba{width:100%;padding:clamp(118px,13.5vh,148px) 0 clamp(1.25rem,2.6vh,2rem);}
.wm-pin .wm-triad{margin-top:clamp(1.4rem,3vh,2rem);gap:clamp(0.85rem,1.9vw,1.4rem);}
.wm-pin .wm-cap{padding:clamp(1.1rem,2.1vw,1.5rem);}
.wm-pin .wm-mark{margin-bottom:clamp(0.7rem,1.6vh,1rem);}
.wm-pin .wm-cap > p{margin-top:0.55rem;}
.wm-pin .wm-enables{padding-top:0.85rem;}
.wm-pin .wm-converge{height:clamp(64px,9vh,92px);}
.wm-pin .wm-close{margin-top:clamp(1.1rem,2.4vh,1.7rem);}

/* short screens: both release and scroll normally */
@media (max-width:980px), (max-height:760px){
  .model-stage,.wm-stage{height:auto;}
  .model-pin,.wm-pin{position:static;height:auto;overflow:visible;display:block;}
  .model-pin > .model,.wm-pin > .whymba{padding:var(--section-pad) 0;}
}
@media (prefers-reduced-motion: reduce){
  .rv-sync,.rv-sweep,.rv-blip{animation:none;}
}

/* ---------- HERO: four beats played in one place ----------
   The badge, headline, three messages and the buttons no longer compete in a
   single frame; they occupy the same spot and are swapped by scroll. */
.hero-beats{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  box-sizing:border-box;
  overflow:hidden;          /* beats travel past the edges; clip them there */
}
.hero-beat{
  grid-area:1/1;
  width:100%;
  text-align:center;
  opacity:0;
  will-change:opacity, transform;
  pointer-events:none;
}
.hero-beat[style*="opacity: 1"]{pointer-events:auto;}
.hero-beat .wrap{
  display:flex;flex-direction:column;align-items:center;
  max-width:1100px;
}
.hero-kicker{
  display:block;margin-bottom:clamp(1rem,2.4vh,1.6rem);
  font-size:0.7rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent);
  text-shadow:0 2px 10px rgba(2,6,12,0.9);
}
.hero-line{
  max-width:34ch;
  font-family:var(--font-display);
  font-size:clamp(1.45rem,3.2vw,2.75rem);
  font-weight:300;line-height:1.32;letter-spacing:-0.026em;
  color:#F2F5F9;text-wrap:balance;
  text-shadow:0 2px 8px rgba(2,6,12,0.9), 0 8px 30px rgba(2,6,12,0.7);
}
.hero-line em{
  font-style:normal;font-weight:500;
  color:var(--accent);
}
.hero-beat[data-beat="2"] .hero-line,
.hero-beat[data-beat="3"] .hero-line{max-width:40ch;}

/* the sequence indicator, in place of the old tabs */
.hero-foot-veil{
  position:absolute;left:0;right:0;bottom:0;
  height:clamp(160px,21vh,250px);
  z-index:3;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(28,36,54,0) 0%, rgba(28,36,54,0.55) 46%, rgba(28,36,54,0.88) 100%);
}
.hero-ticks{
  position:absolute;left:50%;bottom:clamp(84px,11vh,124px);
  transform:translateX(-50%);
  z-index:4;
  display:flex;align-items:center;gap:0.7rem;
}
.hero-tick{
  width:26px;height:3px;border-radius:2px;
  border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,0.24);
  transition:background .35s var(--ease), width .35s var(--ease);
}
.hero-tick:hover{background:rgba(255,255,255,0.5);}
.hero-tick.is-on{background:var(--accent);width:38px;box-shadow:0 0 12px rgba(76,120,168,0.8);}
.hero-tick:focus-visible{outline:2px solid rgba(76,120,168,0.9);outline-offset:4px;}

.hero-actions{margin-top:clamp(1.9rem,4.2vh,2.8rem);}

@media (max-width:760px){
  .hero-line{font-size:clamp(1.2rem,5vw,1.7rem);max-width:26ch;}
  .hero-beat[data-beat="2"] .hero-line,
  .hero-beat[data-beat="3"] .hero-line{max-width:28ch;}
  .hero-ticks{bottom:clamp(64px,9vh,92px);}
}
@media (prefers-reduced-motion: reduce){
  .hero-beat{transition:none;}
}


/* ============================================================
   SERVICES PAGE — HERO
   Two columns inside a bracketed frame: the argument on the left,
   a character field on the right with the offer floating over it.
   ============================================================ */
.svc-hero{
  position:relative;
  min-height:100vh;
  background:var(--navy);
  color:var(--bone);
  display:flex;align-items:center;
  padding:clamp(140px,17vh,190px) clamp(1.5rem,4vw,3.5rem) clamp(4rem,8vh,6rem);
  box-sizing:border-box;
  overflow:hidden;
}
/* frame ticks */
.svc-bracket{
  position:absolute;width:26px;height:26px;
  border:1px solid rgba(143,178,217,0.42);
  opacity:0;transition:opacity .7s var(--ease) .2s;
}
.svc-hero.is-ready .svc-bracket{opacity:1;}
.svc-bracket-tl{top:clamp(90px,11vh,118px);left:clamp(1.1rem,3vw,2.5rem);border-right:0;border-bottom:0;}
.svc-bracket-tr{top:clamp(90px,11vh,118px);right:clamp(1.1rem,3vw,2.5rem);border-left:0;border-bottom:0;}
.svc-bracket-bl{bottom:clamp(1.6rem,4vh,2.75rem);left:clamp(1.1rem,3vw,2.5rem);border-right:0;border-top:0;}
.svc-bracket-br{bottom:clamp(1.6rem,4vh,2.75rem);right:clamp(1.1rem,3vw,2.5rem);border-left:0;border-top:0;}

.svc-hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:1500px;margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(2rem,5vw,4.5rem);
}
/* the rule that splits the frame */
.svc-hero-inner::before{
  content:"";
  position:absolute;top:-14%;bottom:-14%;left:calc(50.5% - 0.5px);
  width:1px;background:linear-gradient(180deg,transparent,rgba(143,178,217,0.20) 18%,rgba(143,178,217,0.20) 82%,transparent);
}

/* ---- left column ---- */
.svc-eyebrow{
  display:inline-flex;align-items:center;gap:0.65rem;
  font-size:0.7rem;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.72);
  margin-bottom:clamp(1.5rem,3.4vh,2.25rem);
}
.svc-eyebrow i{
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 12px rgba(76,120,168,0.9);
}
.svc-hero h1{
  font-family:var(--font-display);
  font-size:clamp(2rem,4.4vw,3.5rem);
  font-weight:600;line-height:1.08;letter-spacing:-0.035em;
  color:var(--bone);
}
.svc-hero h1 em{font-style:normal;color:var(--accent);}
.svc-descriptor{
  margin-top:clamp(1.25rem,2.8vh,1.9rem);
  max-width:52ch;
  font-size:clamp(1rem,1.8vw,1.12rem);line-height:1.5;font-weight:500;
  color:rgba(255,255,255,0.86);
}
.svc-support{
  margin-top:clamp(0.9rem,2vh,1.35rem);
  max-width:60ch;
  font-size:clamp(0.93rem,1.6vw,1rem);line-height:1.68;
  color:rgba(255,255,255,0.5);
}
.svc-actions{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(1rem,2.4vw,1.8rem);
  margin-top:clamp(1.9rem,4.2vh,2.8rem);
}
.svc-cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--btn);color:var(--bone);
  font-size:0.95rem;font-weight:600;
  padding:1.02rem 2.1rem;border-radius:8px;
  box-shadow:0 14px 34px -12px rgba(76,120,168,0.75);
  transition:background .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.svc-cta:hover{background:var(--btn-hover);transform:translateY(-2px);box-shadow:0 18px 42px -12px rgba(76,120,168,0.85);}
.svc-cta:active{transform:translateY(0) scale(0.985);}
.svc-link{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.92rem;font-weight:500;
  color:rgba(255,255,255,0.66);
  transition:color .25s var(--ease);
}
.svc-link svg{width:15px;height:15px;transition:transform .25s var(--ease);}
.svc-link:hover{color:var(--bone);}
.svc-link:hover svg{transform:translateX(4px);}

/* ---- right column: character field ---- */
.svc-hero-field{position:relative;min-height:clamp(360px,56vh,560px);}
.svc-matrix{
  position:absolute;inset:0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;line-height:13px;letter-spacing:2px;
  color:var(--accent);
  white-space:pre;
  overflow:hidden;
  user-select:none;
}
.svc-matrix span{display:block;}
.svc-matrix-mask{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 50%, rgba(28,36,54,0.94) 0%, rgba(28,36,54,0.55) 46%, transparent 74%),
    linear-gradient(90deg, rgba(28,36,54,0.9) 0%, transparent 22%, transparent 80%, rgba(28,36,54,0.75) 100%);
}

/* ---- the offer, floating over the field ---- */
.svc-offer{
  position:relative;z-index:3;
  width:min(430px,100%);
  margin-left:auto;margin-right:auto;
  border:1px solid rgba(143,178,217,0.22);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(28,36,54,0.92), rgba(28,36,54,0.92));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,0.85);
  padding:clamp(1.15rem,2.4vw,1.6rem);
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease) .35s, transform .8s cubic-bezier(.19,1,.22,1) .35s;
}
.svc-hero.is-ready .svc-offer{opacity:1;transform:none;}
.svc-offer-head{
  display:flex;align-items:center;gap:0.55rem;
  font-size:0.63rem;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  padding-bottom:0.9rem;margin-bottom:0.35rem;
  border-bottom:1px solid rgba(143,178,217,0.14);
}
.svc-offer-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px rgba(76,120,168,0.9);
  animation:svcPulse 2.6s ease-in-out infinite;
}
@keyframes svcPulse{0%,100%{opacity:.45;}50%{opacity:1;}}
.svc-offer-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0.72rem 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:0.9rem;
}
.svc-offer-row span{color:rgba(255,255,255,0.62);}
.svc-offer-row b{
  font-weight:600;color:var(--bone);
  font-variant-numeric:tabular-nums;letter-spacing:-0.01em;
}
.svc-offer-row.is-lead{border-bottom:0;}
.svc-offer-row.is-lead b{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:800;
  color:var(--accent);letter-spacing:-0.035em;
}
.svc-offer-note{
  margin-top:0.9rem;padding-top:0.9rem;
  border-top:1px solid rgba(143,178,217,0.14);
  font-size:0.8rem;line-height:1.6;color:rgba(255,255,255,0.45);
}

/* current page marker in the nav */
.nav-links a.is-current{color:var(--accent);}
.nav.nav-theme-light .nav-links a.is-current{color:var(--accent);}

@media (max-width:980px){
  .svc-hero{min-height:0;padding-top:clamp(128px,16vh,160px);}
  .svc-hero-inner{grid-template-columns:1fr;gap:clamp(2.5rem,6vh,3.5rem);}
  .svc-hero-inner::before{display:none;}
  .svc-hero-field{min-height:340px;}
  .svc-offer{margin-left:0;}
}
@media (max-width:560px){
  .svc-actions{flex-direction:column;align-items:stretch;}
  .svc-cta{width:100%;}
  .svc-link{justify-content:center;}
}
@media (prefers-reduced-motion: reduce){
  .svc-offer-dot{animation:none;}
  .svc-bracket,.svc-offer{transition:none;}
}


/* ============================================================
   SERVICES PAGE — SHARED PINNED SECTIONS
   ============================================================ */
.svc-stage{position:relative;height:200vh;}
.svc-stage-tall{height:300vh;}   /* five cards, ~62vh each - in line with the rest of the page */
.svc-pin{
  position:sticky;top:0;height:100vh;
  overflow:hidden;display:flex;align-items:center;
}
.svcs{
  position:relative;width:100%;
  padding:clamp(112px,13vh,142px) 0 clamp(1.75rem,3.5vh,2.75rem);
  box-sizing:border-box;
}
.svcs-light{background:linear-gradient(180deg,#FFFFFF 0%,#F5F8FC 100%);}
.svcs-dark{background:var(--navy);}
.svcs .wrap{position:relative;z-index:2;}

.svcs-head{max-width:820px;}
.svcs-head h2{
  font-size:clamp(1.6rem,3.2vw,2.45rem);
  letter-spacing:-0.032em;line-height:1.12;text-wrap:balance;
}
.svcs-head > p{
  margin-top:clamp(0.85rem,1.9vh,1.25rem);max-width:74ch;
  font-size:clamp(0.92rem,1.6vw,1rem);line-height:1.68;
}
.svcs-light .svcs-head h2{color:var(--navy);}
.svcs-light .svcs-head h2 em{font-style:normal;color:var(--accent);}
.svcs-light .svcs-head > p{color:var(--blue-grey);}
.svcs-dark .svcs-head h2{color:var(--bone);}
.svcs-dark .svcs-head h2 em{font-style:normal;color:var(--accent);}
.svcs-dark .svcs-head > p{color:rgba(255,255,255,0.56);}

.svcs-note-label{
  display:block;font-size:0.6rem;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent-small);margin-bottom:0.55rem;
}
.svcs-close{
  margin-top:clamp(1.1rem,2.4vh,1.6rem);
  font-size:clamp(0.95rem,1.7vw,1.08rem);line-height:1.6;font-weight:500;
}
.svcs-light .svcs-close{color:var(--navy);}
.svcs-dark .svcs-close{color:rgba(255,255,255,0.8);}
.svcs-close em{font-style:normal;color:var(--accent);}

/* ---- 5.2 process redesign: summary column + diagnostic inventory ----
   Neutral charcoal so it is not a third navy between the near-black hero and
   the DMAIC stage. */
.pr-sec{background:var(--navy);}
.pr-sec .svcs-head h2{color:var(--bone);}
.pr-sec .svcs-head h2 em{font-style:normal;color:var(--accent);}
.pr-sec .svcs-head > p{color:rgba(255,255,255,0.55);}

.pr-split{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(1.25rem,2.6vw,2rem);
  margin-top:clamp(1.4rem,3vh,2.1rem);
  align-items:start;
}

/* ---- the three phases, as summary cards ---- */
.pr-summary{display:flex;flex-direction:column;gap:0.7rem;}
.pr-sum{
  display:block;width:100%;text-align:left;cursor:pointer;
  font-family:inherit;
  border:1px solid rgba(255,255,255,0.09);border-radius:12px;
  background:rgba(255,255,255,0.035);
  padding:clamp(0.85rem,1.7vw,1.15rem);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.pr-sum:hover{background:rgba(255,255,255,0.06);}
.pr-sum.is-on{
  background:rgba(76,120,168,0.12);
  border-color:rgba(76,120,168,0.45);
  transform:translateX(3px);
}
.pr-sum-top{display:flex;align-items:center;margin-bottom:0.5rem;}
.pr-sum-num{font-size:0.72rem;font-weight:800;letter-spacing:0.1em;color:var(--accent);}
.pr-sum-count{
  font-size:0.6rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.38);
}
.pr-sum-name{
  display:block;font-size:0.95rem;font-weight:600;line-height:1.32;
  color:rgba(255,255,255,0.72);transition:color .35s var(--ease);
}
.pr-sum.is-on .pr-sum-name{color:var(--bone);}

/* ---- the inventory ---- */
.pr-table{border-top:1px solid rgba(255,255,255,0.1);}
.pr-thead,.pr-row{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:clamp(0.6rem,1.4vw,1.1rem);
  align-items:center;
}
.pr-thead{
  padding:0.5rem 0 0.6rem;
  font-size:0.56rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.3);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.pr-row{
  padding:0.48rem 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:opacity .35s var(--ease), background .35s var(--ease);
}
.pr-row i{
  width:5px;height:5px;border-radius:50%;justify-self:center;
  background:rgba(255,255,255,0.28);
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.pr-item{font-size:0.9rem;line-height:1.45;color:rgba(255,255,255,0.82);}
/* the active phase lifts; the rest recede */
.pr-table.is-filtered .pr-row{opacity:0.26;}
.pr-table.is-filtered .pr-row.is-lit{opacity:1;background:rgba(76,120,168,0.07);}
.pr-row.is-lit i{background:var(--accent);box-shadow:0 0 10px rgba(76,120,168,0.9);}
.pr-foot{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
  margin-top:clamp(0.85rem,1.8vh,1.25rem);
  padding-top:clamp(0.8rem,1.7vh,1.15rem);
  border-top:1px solid rgba(255,255,255,0.08);
}
.pr-seq{font-size:0.88rem;line-height:1.62;color:rgba(255,255,255,0.6);}
.pr-why p{font-size:0.88rem;line-height:1.62;color:rgba(255,255,255,0.72);}

@media (max-width:980px){
  .pr-split{grid-template-columns:1fr;}
  .pr-foot{grid-template-columns:1fr;}
  .pr-thead{display:none;}
  .pr-row{grid-template-columns:14px minmax(0,1fr);}
}

/* ---- 5.3 DMAIC ---- */
.dm-field{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(76,120,168,0.8) 1.2px, transparent 1.3px);
  background-size:26px 26px;opacity:0.4;
  -webkit-mask-image:radial-gradient(110% 80% at 88% 8%, #000, transparent 68%);
          mask-image:radial-gradient(110% 80% at 88% 8%, #000, transparent 68%);
}
.dm-offer{
  display:flex;align-items:center;flex-wrap:wrap;gap:0.7rem;
  margin-top:clamp(0.9rem,2vh,1.3rem)!important;
  font-size:0.8rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:rgba(255,255,255,0.78)!important;
}
.dm-offer i{width:3px;height:3px;border-radius:50%;background:rgba(143,178,217,0.6);}
.dm-offer b{color:var(--accent);}
.dm-body{
  display:grid;grid-template-columns:minmax(0,0.62fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  margin-top:clamp(1.5rem,3.4vh,2.4rem);
  align-items:start;
}
.dm-rail{position:relative;padding-left:2rem;}
.dm-rail-line{position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;}
.dm-rail-fill{display:block;width:100%;height:0;background:linear-gradient(180deg,#8FB2D9,var(--accent));box-shadow:0 0 12px rgba(76,120,168,0.8);transition:height .12s linear;}
.dm-step{
  position:relative;display:flex;align-items:baseline;gap:0.7rem;width:100%;
  background:none;border:0;padding:0.7rem 0;font-family:inherit;text-align:left;cursor:pointer;
}
.dm-step span{
  font-size:0.72rem;font-weight:800;letter-spacing:0.1em;
  color:rgba(255,255,255,0.3);transition:color .35s var(--ease);
}
.dm-step em{
  font-style:normal;font-size:clamp(0.95rem,1.7vw,1.1rem);font-weight:600;
  color:rgba(255,255,255,0.5);transition:color .35s var(--ease);
}
.dm-step::before{
  content:"";position:absolute;left:-2rem;top:1rem;
  width:12px;height:12px;border-radius:50%;
  background:var(--navy);border:2px solid rgba(255,255,255,0.22);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .4s var(--ease);
}
.dm-step:hover span,.dm-step:hover em{color:rgba(255,255,255,0.8);}
.dm-step.is-on span{color:var(--accent);}
.dm-step.is-on em{color:var(--bone);}
.dm-step.is-on::before{border-color:var(--accent);box-shadow:0 0 0 5px rgba(76,120,168,0.16),0 0 16px rgba(76,120,168,0.85);transform:scale(1.1);}
.dm-panels{position:relative;display:grid;min-height:clamp(150px,20vh,200px);}
.dm-panel{
  grid-area:1/1;align-self:start;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .45s var(--ease), transform .5s cubic-bezier(.19,1,.22,1);
}
.dm-panel.is-on{opacity:1;transform:none;pointer-events:auto;}
.dm-panel h3{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600;
  color:var(--bone);letter-spacing:-0.03em;margin-bottom:0.8rem;
}
.dm-panel p{font-size:clamp(0.98rem,1.8vw,1.14rem);line-height:1.62;color:rgba(255,255,255,0.66);max-width:46ch;}
.dm-foot{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start;
  margin-top:clamp(1.4rem,3vh,2.2rem);
  padding-top:clamp(1.2rem,2.6vh,1.8rem);
  border-top:1px solid rgba(255,255,255,0.08);
}
.dm-keeps p{font-size:0.9rem;line-height:1.62;color:rgba(255,255,255,0.56);}
.dm-cta{display:flex;flex-direction:column;align-items:flex-start;gap:0.9rem;}
.dm-cta-note{font-size:0.8rem;line-height:1.6;color:rgba(255,255,255,0.42);max-width:52ch;}

/* ---- 5.4 what MBA builds — a held headline beside a numbered list ----
   Rebuilt on the McKinsey business-building layout Nara referenced: the
   headline and its intro hold on the left while the four items pass on the
   right, each sitting on its own rule. The reference marks items with a blue
   square; ours carry the site's number lockup (square + numeral) in the same
   accent every other numbered list on this page uses. The band is white, as
   the reference is. */
.hb{
  /* no overflow clipping here: it would make this section the nearest scroll
     container and the sticky headline would stop holding */
  background:var(--paper);
  padding-bottom:clamp(3rem,7vh,5rem);
}
.hb .wrap{position:relative;z-index:2;}

.hb-grid{
  --hb-num:clamp(2rem,3.1vw,2.9rem);   /* the number column; the closing line indents by it */
  display:grid;
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  gap:0 clamp(2rem,5vw,5.5rem);
  align-items:start;
}

/* ---- head: holds in place while the list moves past it ---- */
.hb-head{
  position:sticky;top:calc(112px + clamp(1.2rem,4vh,2.6rem));
  grid-column:1;grid-row:1 / 3;
}
.hb-head h2{
  margin-top:clamp(0.3rem,0.8vh,0.7rem);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem,4.2vw,3.4rem);
  line-height:1.06;letter-spacing:-0.035em;
  color:var(--navy);max-width:none;
}
.hb-head h2 em{font-style:normal;color:var(--accent);}
.hb-intro{
  margin-top:clamp(1.2rem,2.6vh,1.8rem);
  font-size:clamp(0.95rem,1.4vw,1.05rem);line-height:1.72;
  color:var(--ink-2);max-width:42ch;
}

/* ---- the four items ---- */
.hb-list{grid-column:2;grid-row:1;list-style:none;margin:0;padding:0;}
.hb-item{
  position:relative;
  display:grid;grid-template-columns:var(--hb-num) minmax(0,1fr);
  padding:clamp(1.8rem,4.2vh,2.9rem) 0;
}
.hb-item:first-child{padding-top:0.35rem;}
/* the rule under each item draws itself left to right as the item arrives */
.hb-item::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.05s cubic-bezier(.19,1,.22,1);
}
.hb-item.is-in::after{transform:none;}

/* the same number lockup as the offers panel above: two digits, no marker */
.hb-idx{
  display:block;align-self:start;margin-top:0.42em;   /* rides the title's first line */
  font-size:0.72rem;font-weight:600;letter-spacing:0.14em;
  color:var(--accent-small);
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .6s var(--ease) .08s, transform .7s cubic-bezier(.19,1,.22,1) .08s;
}
.hb-item.is-in .hb-idx{opacity:1;transform:none;}

.hb-item h3{
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(1.05rem,1.45vw,1.28rem);
  line-height:1.34;letter-spacing:-0.01em;
  color:var(--navy);
  margin-bottom:0.5rem;
}
/* the description follows the title's wipe rather than arriving with it */
.hb-item p{
  font-size:0.95rem;line-height:1.68;color:var(--ink-2);max-width:54ch;
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .7s var(--ease) .26s, transform .9s cubic-bezier(.19,1,.22,1) .26s;
}
.hb-item.is-in p{opacity:1;transform:none;}

/* closing line runs on under the list, in the same column */
/* the closing line starts level with the item titles, not with the numbers */
.hb-close{
  grid-column:2;grid-row:2;
  margin-top:clamp(2rem,5vh,3.2rem);padding-left:var(--hb-num);max-width:58ch;
  color:var(--ink-2);
}
/* the id carries the size: the later .svcs-close tiers would otherwise put it
   back up to 17.9px */
#svc-build .hb-close{font-size:clamp(0.92rem,1.15vw,1rem);line-height:1.7;}

/* ---- masked word wipe, used by the head and every item title ----
   Class is .mask-w, not .mw: .mw is already the Home page's How-MBA-works
   band and carries a solid navy background, which painted a filled box
   behind every word. */
[data-reveal-mask] .mask-w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:0.14em;margin-bottom:-0.14em;   /* room for descenders */
}
[data-reveal-mask] .mask-w > i{
  display:inline-block;font-style:inherit;
  transform:translate3d(0,112%,0);
  transition:transform .9s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i) * 52ms);
}
.is-in [data-reveal-mask] .mask-w > i{transform:none;}

@media (prefers-reduced-motion:reduce){
  .hb-item::after,.hb-idx,.hb-item p,
  [data-reveal-mask] .mask-w > i{transition:none;}
  .hb-item::after{transform:none;}
  .hb-idx,.hb-item p{opacity:1;transform:none;}
  [data-reveal-mask] .mask-w > i{transform:none;}
}

@media (max-width:980px){
  .hb-grid{grid-template-columns:1fr;}
  .hb-head{position:static;grid-column:1;grid-row:auto;padding-bottom:clamp(1.8rem,4vh,2.6rem);}
  .hb-head h2{max-width:none;font-size:clamp(1.85rem,7vw,2.5rem);}
  .hb-intro{max-width:none;}
  .hb-list,.hb-close{grid-column:1;grid-row:auto;}
  .hb-item{padding:clamp(1.4rem,3vh,1.9rem) 0;}
  .hb-close{max-width:none;}
}

@media (max-width:600px){
  .hb-item{grid-template-columns:1fr;row-gap:0.7rem;}
  .hb-idx{margin-top:0;}
  .hb-close{padding-left:0;}
}

/* ---- DMAIC now carries the page's light break ----
   Its colours were written for a dark band only; they are re-pointed here
   rather than the section being rebuilt. */
#svc-dmaic.svcs-light .dm-field{opacity:0.14;}
#svc-dmaic.svcs-light .dm-offer{color:var(--ink-2)!important;}
#svc-dmaic.svcs-light .dm-offer i{background:rgba(76,120,168,0.55);}
#svc-dmaic.svcs-light .dm-rail-line{background:rgba(28,36,54,0.12);}
#svc-dmaic.svcs-light .dm-rail-fill{
  background:linear-gradient(180deg,#4C78A8,var(--accent));box-shadow:none;
}
#svc-dmaic.svcs-light .dm-step span{color:rgba(28,36,54,0.52);}
#svc-dmaic.svcs-light .dm-step em{color:rgba(28,36,54,0.7);}
#svc-dmaic.svcs-light .dm-step::before{
  background:var(--paper);border-color:rgba(28,36,54,0.2);
}
#svc-dmaic.svcs-light .dm-step:hover span,
#svc-dmaic.svcs-light .dm-step:hover em{color:var(--ink);}
#svc-dmaic.svcs-light .dm-step.is-on span{color:var(--accent);}
#svc-dmaic.svcs-light .dm-step.is-on em{color:var(--ink);}
#svc-dmaic.svcs-light .dm-step.is-on::before{
  border-color:var(--accent);
  box-shadow:0 0 0 5px rgba(76,120,168,0.14);
}
#svc-dmaic.svcs-light .dm-panel h3{color:var(--ink);}
#svc-dmaic.svcs-light .dm-panel p{color:var(--ink-2);}
#svc-dmaic.svcs-light .dm-foot{border-top-color:var(--line);}
#svc-dmaic.svcs-light .dm-keeps p{color:var(--ink-2);}
#svc-dmaic.svcs-light .dm-cta-note{color:var(--slate);}

/* ---- 5.5 outsourced production: a held header over a travelling rail ----
   Follows zig.ai/how-it-works, measured rather than guessed: the row holds
   still for the first quarter of the scroll, then translates left by exactly
   its own overflow. Cards replace the reference's circles, on our own
   large-surface radius. The one step past the reference is that a card
   settles as it reaches the middle of the view instead of every card
   sitting at equal strength - which is what gives the row depth rather
   than the flat conveyor the reference has. */
.svcs-aqua{background:linear-gradient(180deg,#EEF2F9 0%,#E3E9F4 100%);}
/* the section holds for a screen, then releases; the row itself is moved by
   the arrows or by dragging it, not by scrolling */
.svc-stage-run{height:200vh;}

.op-sec{
  --op-line:rgba(28,36,54,0.13);
  --op-card-w:clamp(266px,23vw,350px);
  --op-card-h:clamp(310px,38vh,410px);
  overflow:hidden;
}
.op-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.8fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
}
.op-head h2{
  margin-top:clamp(0.8rem,1.8vh,1.2rem);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.85rem,3.5vw,2.85rem);
  line-height:1.1;letter-spacing:-0.032em;color:var(--ink);text-wrap:balance;
}
.op-head h2 em{font-style:normal;color:var(--accent);}
.op-head > p{
  font-size:clamp(0.94rem,1.45vw,1.03rem);line-height:1.7;
  color:var(--ink-2);max-width:56ch;
}

/* full-bleed window; the rail is inset to the header's own left edge in JS
   so the first card starts in the same column as the heading */
.op-view{
  margin-top:clamp(1.5rem,3.4vh,2.5rem);width:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-left:var(--op-inset,0px);
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.op-view::-webkit-scrollbar{display:none;}
.op-view:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.op-rail{
  position:relative;display:flex;align-items:stretch;
  gap:clamp(14px,1.4vw,22px);list-style:none;
}
.op-slot{flex:0 0 var(--op-card-w);height:var(--op-card-h);scroll-snap-align:start;}
/* the closing space is a flex item, not padding: a scroller ignores the end
   padding of its flex content, so the last card was landing flush against the
   right edge and reading as cut off */
.op-rail::after{content:"";flex:0 0 var(--op-inset,0px);}

/* the scope note and the two arrows share the closing row */
.op-foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.5rem);align-items:end;
}
.op-ctrls{display:flex;gap:0.6rem;}
.op-arrow,.sp-arrow{
  width:46px;height:46px;border-radius:999px;
  display:grid;place-items:center;
  border:1px solid rgba(76,120,168,0.35);background:rgba(255,255,255,0.72);
  color:var(--accent);cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease),
             opacity .25s var(--ease), transform .25s var(--ease);
}
.op-arrow:hover,.sp-arrow:hover{background:#fff;border-color:var(--accent);}
.op-arrow:active,.sp-arrow:active{transform:scale(0.94);}
.op-arrow[disabled],.sp-arrow[disabled]{opacity:0.28;cursor:default;}
.op-arrow svg,.sp-arrow svg{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

.op-card{
  display:flex;flex-direction:column;height:100%;
  padding:clamp(1.4rem,2vw,1.9rem);
  border:1px solid var(--op-line);border-radius:14px;
  background:rgba(255,255,255,0.76);
  box-shadow:0 24px 54px -36px rgba(28,36,54,0.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease),
             translate .35s var(--ease);
}
.op-card:hover{
  border-color:rgba(76,120,168,0.42);
  box-shadow:0 30px 60px -34px rgba(28,36,54,0.5);
  translate:0 -3px;
}
.op-icon{color:var(--accent);display:block;}
.op-icon svg{
  display:block;width:28px;height:28px;
  stroke:currentColor;stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
/* the site's one numbering style: two digits, no marker (see .wd-n, .hb-idx) */
.op-n{
  display:block;
  margin-top:clamp(1.9rem,4vh,2.9rem);  /* fixed on every card */
  font-size:0.72rem;font-weight:600;letter-spacing:0.14em;color:var(--accent-small);
}
.op-card h3{
  margin:0.55rem 0 0.5rem;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.12rem,1.45vw,1.32rem);
  line-height:1.2;letter-spacing:-0.02em;color:var(--ink);
}
.op-card > p{font-size:0.9rem;line-height:1.6;color:var(--ink-2);}
.op-tag{
  margin-top:auto;padding-top:0.75rem;  /* the slack lands here */
  border-top:1px solid var(--op-line);
  font-size:0.64rem;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--slate);
}

/* The two notes share one slot, stacked - commentary, not a sixth service.
   The slot is wider than a service card because it carries two blocks of
   prose in half the height each: at a service card's width the second note
   clipped its last line on shorter screens. */
.op-slot-notes{
  flex-basis:calc(var(--op-card-w) * 1.24);
  display:flex;flex-direction:column;gap:clamp(10px,1vw,16px);
}
.op-note{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1rem,1.5vw,1.4rem) clamp(1.1rem,1.6vw,1.5rem);
  border:1px solid rgba(76,120,168,0.3);border-radius:10px;
  background:rgba(76,120,168,0.1);
}
.op-label{
  display:block;margin-bottom:0.45rem;
  font-size:0.62rem;font-weight:700;letter-spacing:0.12em;line-height:1.3;
  text-transform:uppercase;color:var(--accent-small);
}
.op-note p{font-size:0.845rem;line-height:1.54;color:var(--ink-2);}

.op-scope{
  margin-top:clamp(1.1rem,2.3vh,1.6rem);
  font-size:0.8rem;line-height:1.6;color:var(--slate);max-width:74ch;
}

@media (prefers-reduced-motion:reduce){
  .op-rail{transition:none;}
}

@media (max-width:980px){
  .op-sec{overflow:visible;}
  /* The window is full-bleed on desktop so the rail can travel past the
     edges; stacked, it has to take the page gutter back. Both the header and
     the window are pinned to the same measure here because the section was
     sitting at a 24px gutter while the build grid above it sat at 56 - the
     two bands did not line up with each other on a phone. */
  .op-view{
    width:100%;max-width:none;margin-inline:0;
    padding-inline:clamp(1.5rem,4vw,3rem);
    box-sizing:border-box;
  }
  .op-head{grid-template-columns:1fr;gap:1rem;align-items:start;}
  .op-head > p{max-width:none;}
  .op-view{overflow:visible;scroll-snap-type:none;cursor:auto;}
  .op-ctrls{display:none;}   /* stacked: there is nothing to move sideways */
  .op-foot{grid-template-columns:1fr;}
  .op-rail{flex-direction:column;gap:clamp(12px,2.4vh,18px);transform:none!important;
           padding:0!important;}
  .op-rail::after{display:none;}   /* stacked, it would only add dead height */
  .op-slot{flex:none;width:100%;height:auto;opacity:1!important;transform:none!important;}
  .op-slot-notes{gap:clamp(12px,2.4vh,18px);}
  .op-card{padding:1.35rem;}
  .op-card h3{font-size:1.12rem;}
  .op-note{padding:1.2rem;}
}

/* ---- 5.6 supporting capabilities: deliberately lighter weight ---- */
.svcs-secondary .svcs-head{max-width:700px;}
.svcs-secondary .svcs-head h2{font-size:clamp(1.35rem,2.5vw,1.85rem);}
.sp-pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,1.9rem);
  margin-top:clamp(1.4rem,3vh,2rem);
}
.sp-card{
  border:1px solid #E4EAF1;border-radius:14px;background:rgba(255,255,255,0.7);
  padding:clamp(1.15rem,2.2vw,1.6rem);
}
.sp-card h3{font-size:clamp(0.95rem,1.6vw,1.05rem);color:var(--navy);margin-bottom:0.6rem;}
.sp-card p{font-size:0.86rem;line-height:1.6;color:var(--blue-grey);}
.sp-qual{margin-top:0.7rem;font-size:0.78rem!important;color:#8894A2!important;line-height:1.58!important;}
.sp-link{
  display:inline-flex;align-items:center;gap:0.45rem;margin-top:0.9rem;
  font-size:0.84rem;font-weight:600;color:var(--accent);
}
.sp-link svg{width:14px;height:14px;transition:transform .25s var(--ease);}
.sp-link:hover svg{transform:translateX(3px);}

/* ---- 5.7 governance ---- */
.gv-grid-bg{
  position:absolute;inset:0;pointer-events:none;opacity:0.5;
  background-image:linear-gradient(to right, rgba(143,178,217,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(143,178,217,0.06) 1px, transparent 1px);
  background-size:64px 64px;
}
.gv-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(0.9rem,1.9vw,1.4rem);
  margin-top:clamp(1.4rem,3vh,2.1rem);
}
.gv-item{
  border-left:2px solid rgba(76,120,168,0.5);
  padding:0.2rem 0 0.2rem clamp(0.9rem,1.8vw,1.25rem);
}
.gv-item h3{font-size:0.95rem;color:var(--bone);margin-bottom:0.4rem;line-height:1.25;}
.gv-item p{font-size:0.84rem;line-height:1.58;color:rgba(255,255,255,0.55);}

/* ---- 5.8 operating models ---- */
.om-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(0.9rem,1.9vw,1.4rem);
  margin-top:clamp(1.4rem,3vh,2.1rem);
  align-items:stretch;
}
.om-card{
  display:flex;flex-direction:column;
  border:1px solid #E2E8EF;border-radius:18px;background:var(--white);
  padding:clamp(1.2rem,2.3vw,1.7rem);
  cursor:default;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.om-card.is-picked{
  border-color:rgba(76,120,168,0.5);
  box-shadow:0 24px 52px -24px rgba(16,29,45,0.26);
  transform:translateY(-4px);
}
.om-tag{
  display:inline-block;align-self:flex-start;
  padding:0.32rem 0.75rem;border-radius:999px;
  background:rgba(76,120,168,0.09);color:var(--accent);
  font-size:0.68rem;font-weight:700;letter-spacing:0.08em;
}
.om-card.is-picked .om-tag{background:var(--accent);color:var(--bone);}
.om-lead{
  margin-top:0.9rem;font-size:0.98rem;line-height:1.5;font-weight:600;color:var(--navy);
}
.om-when{
  margin-top:auto;padding-top:1rem;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s var(--ease), opacity .4s var(--ease), padding-top .4s var(--ease);
}
.om-card.is-picked .om-when{max-height:280px;opacity:1;}
.om-when-label{
  display:block;font-size:0.58rem;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:0.55rem;
}
.om-when ul{list-style:none;}
.om-when li{
  position:relative;padding-left:0.95rem;
  font-size:0.83rem;line-height:1.5;color:var(--blue-grey);
}
.om-when li + li{margin-top:0.4rem;}
.om-when li::before{content:"";position:absolute;left:0;top:0.55em;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:0.6;}
.om-fee{margin-top:0.7rem;font-size:0.8rem;font-weight:600;color:var(--navy);}

/* ---- selected evidence: three workflows, one at a time -----------------
   Pills after outloud.co/backstage, measured: fully round, transparent with a
   hairline when idle, a near-white fill with near-black text when chosen.
   That is already how .hp-tab behaves in the Services hero, so this extends
   a pattern the site has rather than importing a new one. Ground stays flat
   #1C2436 - the reference's colour gradient is deliberately not taken.

   Prefix is sev-, not ev-: ev- is the Home page's evidence section and
   already owns .ev-pill, .ev-before, .ev-after and .ev-panel. */
/* the brightest blue this band will carry at AA on #1C2436 */
.sev{--sev-hi:#8FB2D9;}
.sev-pills{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:clamp(1.9rem,4.2vh,3rem);
}
.sev-pill{
  border:1px solid rgba(213,216,221,0.2);border-radius:999px;
  background:none;cursor:pointer;
  padding:clamp(0.75rem,1.5vh,1rem) clamp(1.4rem,2.6vw,2.4rem);
  font-family:var(--font-body);
  font-size:0.88rem;font-weight:600;letter-spacing:0.005em;
  color:var(--on-dark-2);
  transition:border-color .3s var(--ease), background .3s var(--ease),
             color .3s var(--ease);
}
.sev-pill:hover{border-color:rgba(213,216,221,0.45);color:var(--on-dark-1);}
.sev-pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.sev-pill.is-on{
  background:var(--bone);border-color:var(--bone);color:var(--ink);
}

.sev-panels{
  position:relative;
  margin-top:clamp(1.9rem,4vh,2.9rem);
  padding-top:clamp(1.9rem,4vh,2.9rem);
  border-top:1px solid rgba(213,216,221,0.12);
}
.sev-panel{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .45s var(--ease), transform .55s cubic-bezier(.19,1,.22,1);
}
.sev-panel.is-on{opacity:1;transform:none;}
.sev-panel[hidden]{display:none;}

.sev-tag{
  display:block;
  font-size:0.66rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--accent);
}
.sev-lede{
  margin-top:0.95rem;max-width:62ch;
  font-size:clamp(1rem,1.55vw,1.15rem);line-height:1.66;
  color:var(--on-dark-2);
}

/* the figures are the evidence, so they carry the weight the copy does */
.sev-ba{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(1.4rem,3.4vw,3.2rem);
  margin-top:clamp(2.1rem,4.6vh,3.3rem);
}
.sev-label{
  display:block;margin-bottom:0.85rem;
  font-size:0.64rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--on-dark-3);
}
.sev-val{
  display:block;
  font-family:var(--font-body);font-weight:700;
  font-variation-settings:"opsz" 32;     /* Inter is loaded variable, 14..32 */
  font-size:clamp(2.6rem,5.6vw,4.3rem);
  line-height:1;letter-spacing:-0.045em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.sev-before .sev-val{color:var(--on-dark-3);}
.sev-after  .sev-val{color:var(--sev-hi);}
.sev-note{
  display:block;margin-top:0.75rem;
  font-size:0.82rem;color:var(--on-dark-3);
}
/* knowledge continuity has no figure, so its value is a sentence and steps
   down to a size prose can hold without the row losing its shape */
/* a sentence, not a statistic: same family, but it cannot carry 700 at
   display size without shouting */
.sev-val-prose{
  font-weight:500;font-variation-settings:"opsz" 20;
  font-size:clamp(1.08rem,1.75vw,1.38rem);
  line-height:1.44;letter-spacing:-0.012em;
}
.sev-arrow{display:block;color:var(--accent);}
.sev-arrow svg{
  display:block;width:clamp(30px,3.4vw,44px);height:auto;
  stroke:currentColor;stroke-width:1.3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}

.sev-foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(2.1rem,4.6vh,3.3rem);
  padding-top:clamp(1.4rem,3vh,2.1rem);
  border-top:1px solid rgba(213,216,221,0.12);
}
.sev-qual{
  margin:0;max-width:76ch;
  font-size:0.82rem;line-height:1.68;color:var(--on-dark-3);
}
.sev-qual .svcs-note-label{display:inline;margin-right:0.4rem;}
/* transparent, and shaped like the pills above it so the section reads as
   one control language rather than a link tacked on the end */
.sev-link{
  display:inline-flex;align-items:center;gap:0.55rem;white-space:nowrap;
  padding:clamp(0.75rem,1.5vh,1rem) clamp(1.3rem,2.2vw,1.9rem);
  border:1px solid rgba(213,216,221,0.28);border-radius:999px;
  background:none;color:var(--on-dark-1);
  font-size:0.88rem;font-weight:600;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.sev-link::after{content:"\2192";transition:transform .25s var(--ease);}
.sev-link:hover{border-color:rgba(213,216,221,0.55);background:rgba(213,216,221,0.07);}
.sev-link:hover::after{transform:translateX(4px);}
.sev-link:focus-visible{outline:2px solid var(--sev-hi);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  .sev-panel{transition:none;}
}

@media (max-width:720px){
  /* the arrow turns down so before and after stack in reading order */
  .sev-ba{grid-template-columns:1fr;gap:clamp(0.9rem,2.4vh,1.4rem);justify-items:start;}
  .sev-arrow svg{width:26px;transform:rotate(90deg);}
  .sev-val{font-size:clamp(2.2rem,11vw,3rem);}
  .sev-val-prose{font-size:1.05rem;}
  .sev-pill{padding:0.68rem 1.15rem;font-size:0.82rem;}
  .sev-foot{grid-template-columns:1fr;gap:1.3rem;justify-items:start;}
}

/* ---- 5.9 final CTA ---- */
.svcs-final{text-align:center;}
.fn-glow{
  position:absolute;left:50%;top:46%;width:min(1000px,110%);aspect-ratio:2/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(76,120,168,0.22), transparent 68%);
  filter:blur(70px);pointer-events:none;
}
.fn-inner{max-width:900px;margin:0 auto;}
.svcs-final .eyebrow{justify-content:center;}
.svcs-final h2{
  font-size:clamp(1.75rem,3.6vw,2.75rem);
  color:var(--bone);letter-spacing:-0.032em;line-height:1.12;text-wrap:balance;
}
.svcs-final h2 em{font-style:normal;color:var(--accent);}
.fn-support{margin:1.1rem auto 0;max-width:62ch;font-size:clamp(0.95rem,1.7vw,1.05rem);line-height:1.65;color:rgba(255,255,255,0.56);}
.fn-offer{
  display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:0.7rem;
  margin-top:clamp(1.1rem,2.4vh,1.6rem);
  padding:0.6rem 1.2rem;border-radius:999px;
  border:1px solid rgba(143,178,217,0.24);background:rgba(76,120,168,0.08);
  font-size:0.78rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:rgba(255,255,255,0.8);
}
.fn-offer i{width:3px;height:3px;border-radius:50%;background:rgba(143,178,217,0.6);}
.fn-offer b{color:var(--accent);}
.fn-cta{margin-top:clamp(1.3rem,2.8vh,1.9rem);}
.fn-question{
  margin-top:clamp(1.2rem,2.6vh,1.8rem);
  font-size:clamp(1rem,1.9vw,1.2rem);font-weight:500;
  color:rgba(255,255,255,0.68);font-style:italic;
}

/* ---- responsive: release the pins, let the page scroll ---- */
/* Phones keep the DMAIC scrub, which still advances on scroll as it does on
   desktop. Everything else flows: the build grid reveals on entry and the
   production rail stacks vertically, so neither needs a pin. Only genuinely
   short viewports fall back to plain stacking. */
@media (max-height:500px){
  .svc-stage,.svc-stage-tall{height:auto;}
  .svc-pin{position:static;height:auto;overflow:visible;display:block;}
  .svcs{padding:var(--section-pad) 0;}
  .svcs-phases,.rn-grid,.sp-pair,.gv-grid,.om-grid{grid-template-columns:1fr;}
  .dm-body,.dm-foot,.rn-notes{grid-template-columns:1fr;}
  .om-when{max-height:none;opacity:1;padding-top:1rem;}
  .dm-panels{min-height:0;}
}
@media (max-width:1180px) and (min-width:981px){
  .rn-grid,.gv-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ============================================================
   SERVICES — every pinned section fills its screen
   ============================================================ */
.svcs-head h2{font-size:clamp(1.85rem,3.7vw,2.85rem);}
.svcs-head > p{font-size:clamp(0.98rem,1.75vw,1.12rem);line-height:1.72;}

/* 5.3 DMAIC */
.dm-body{margin-top:clamp(2rem,4.4vh,3.2rem);gap:clamp(2.5rem,6vw,5rem);}
.dm-step{padding:clamp(0.85rem,2vh,1.25rem) 0;}
.dm-step em{font-size:clamp(1.05rem,2vw,1.3rem);}
.dm-panel h3{font-size:clamp(1.8rem,3.6vw,2.7rem);}
.dm-panel p{font-size:clamp(1.05rem,2vw,1.28rem);}
.dm-panels{min-height:clamp(190px,26vh,260px);}
.dm-foot{margin-top:clamp(2rem,4.2vh,3rem);padding-top:clamp(1.6rem,3.4vh,2.4rem);}
.dm-keeps p,.dm-cta-note{font-size:0.95rem;}
.svcs-close{font-size:clamp(1.05rem,1.9vw,1.22rem);margin-top:clamp(1.7rem,3.6vh,2.5rem);}

/* 5.6 supporting capabilities — still the lighter section, just not sparse */
.svcs-secondary .svcs-head h2{font-size:clamp(1.5rem,2.9vw,2.15rem);}
.sp-pair{margin-top:clamp(2rem,4.4vh,3rem);gap:clamp(1.5rem,3vw,2.5rem);}
.sp-card{padding:clamp(1.9rem,3.4vw,2.8rem);}
.sp-card h3{font-size:clamp(1.05rem,1.9vw,1.2rem);margin-bottom:0.8rem;}
.sp-card p{font-size:1rem;line-height:1.78;}
.sp-qual{margin-top:1rem;font-size:0.86rem!important;line-height:1.66!important;}
.sp-link{margin-top:1.3rem;font-size:0.92rem;}

/* 5.7 governance — two columns so six items fill the height */
.gv-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.4rem) clamp(2rem,4vw,3.5rem);
  margin-top:clamp(2rem,4.4vh,3rem);
}
.gv-item{padding:clamp(0.6rem,1.6vh,1.1rem) 0 clamp(0.6rem,1.6vh,1.1rem) clamp(1.3rem,2.4vw,1.9rem);}
.gv-item h3{font-size:clamp(1.12rem,2.1vw,1.34rem);margin-bottom:0.75rem;}
.gv-item p{font-size:1rem;line-height:1.75;}

/* 5.8 operating models */
.om-grid{margin-top:clamp(2rem,4.4vh,3rem);gap:clamp(1.2rem,2.4vw,1.8rem);}
.om-card{padding:clamp(1.9rem,3.4vw,2.7rem);min-height:clamp(400px,52vh,530px);}
.om-lead{margin-top:1.15rem;font-size:clamp(1.02rem,1.9vw,1.16rem);line-height:1.55;}
.om-when li{font-size:0.9rem;line-height:1.6;}
.om-when li + li{margin-top:0.55rem;}
.om-fee{margin-top:0.9rem;font-size:0.88rem;}

/* 5.9 final CTA */
.svcs-final h2{font-size:clamp(2.5rem,5.4vw,4.4rem);}
.fn-support{margin-top:clamp(1.6rem,3.2vh,2.4rem);font-size:clamp(1.15rem,2.2vw,1.45rem);}
.fn-offer{margin-top:clamp(1.6rem,3.4vh,2.4rem);padding:0.8rem 1.6rem;font-size:0.84rem;}
.fn-cta{margin-top:clamp(2.2rem,4.6vh,3.4rem);padding:1.4rem 3.2rem;font-size:1.05rem;}
.fn-question{margin-top:clamp(2.2rem,4.6vh,3.4rem);font-size:clamp(1.25rem,2.5vw,1.7rem);}

@media (max-width:980px){
  .gv-grid,.om-grid{grid-template-columns:1fr;}
  .om-card{min-height:0;}
}

/* the production deck reclaims the height the shared headline clamp took */
#runStage .svcs-head h2{font-size:clamp(2rem,4vw,3.1rem);}


/* ============================================================
   SERVICES — pinned sections: balanced box, no clipping
   The section carried 117px top / 31.5px bottom padding, so its box
   overflowed the 100vh pin: dead band at the top, content cut off at
   the bottom. Inside a pin the padding is symmetric and clears the nav,
   and the content is sized to what is actually left.
   ============================================================ */
.svc-pin > .svcs{
  width:100%;
  padding-top:clamp(4rem,8.4vh,6rem);
  padding-bottom:clamp(4rem,8.4vh,6rem);
}

/* --- trim the sections that were overflowing --- */
#redesignStage .svcs-head h2,
#dmaicStage .svcs-head h2{font-size:clamp(1.75rem,3.4vw,2.6rem);}
.dm-body{margin-top:clamp(1.6rem,3.4vh,2.5rem);}
.dm-panels{min-height:clamp(170px,22vh,225px);}
.dm-foot{margin-top:clamp(1.5rem,3.2vh,2.2rem);padding-top:clamp(1.2rem,2.6vh,1.8rem);}
.pr-sec .svcs-head{max-width:760px;}

#modelsStage .svcs-head h2{font-size:clamp(1.7rem,3.3vw,2.5rem);}
.om-card{min-height:clamp(340px,42vh,430px);padding:clamp(1.6rem,3vw,2.3rem);}
.om-grid{margin-top:clamp(1.6rem,3.4vh,2.4rem);}

/* 5.5 the left column, not the deck, was the tall one here */
#runStage .svcs-head h2{font-size:clamp(1.7rem,3.3vw,2.45rem);}

/* --- lift the sections that were sitting short --- */
#govStage .gv-item h3{font-size:clamp(1.15rem,2.2vw,1.4rem);}
#govStage .gv-item p{font-size:1.02rem;line-height:1.8;}
.gv-grid{gap:clamp(1.7rem,3.4vw,2.7rem) clamp(2rem,4vw,3.5rem);}

.sp-pair{margin-top:clamp(2.2rem,4.8vh,3.4rem);}
.sp-card{padding:clamp(2.1rem,3.8vw,3rem);}
.sp-card p{font-size:1.02rem;line-height:1.82;}

.svcs-final h2{font-size:clamp(2.6rem,5.6vw,4.6rem);}
.fn-support{font-size:clamp(1.2rem,2.3vw,1.55rem);}
.fn-question{font-size:clamp(1.3rem,2.6vw,1.8rem);}

@media (max-width:900px){
  .svc-pin > .svcs{padding-top:clamp(3rem,7vh,4.5rem);padding-bottom:clamp(3rem,7vh,4.5rem);}
}


/* ---- final calibration: every pinned section fits its screen ---- */
.svc-pin > .svcs{
  padding-top:clamp(3.4rem,7vh,4.6rem);
  padding-bottom:clamp(3.4rem,7vh,4.6rem);
}

/* 5.2 process redesign */
#redesignStage .svcs-head h2{font-size:clamp(1.65rem,3.1vw,2.35rem);}
#redesignStage .svcs-head > p{font-size:clamp(0.95rem,1.6vw,1.05rem);line-height:1.65;}

/* 5.3 DMAIC */
#dmaicStage .svcs-head h2{font-size:clamp(1.6rem,3vw,2.25rem);}
.dm-body{margin-top:clamp(1.3rem,2.8vh,2rem);}
.dm-panels{min-height:clamp(150px,19vh,195px);}
.dm-panel p{font-size:clamp(1rem,1.8vw,1.15rem);}
.dm-foot{margin-top:clamp(1.2rem,2.6vh,1.7rem);padding-top:clamp(1rem,2.2vh,1.5rem);}
.svcs-close{margin-top:clamp(1.1rem,2.4vh,1.6rem);font-size:clamp(0.98rem,1.7vw,1.12rem);}

/* 5.6 supporting capabilities */
.sp-pair{margin-top:clamp(1.7rem,3.6vh,2.5rem);}
.sp-card{padding:clamp(1.7rem,3.2vw,2.4rem);}
.sp-card p{font-size:0.98rem;line-height:1.74;}

/* 5.7 governance */
.gv-grid{gap:clamp(1.4rem,2.9vw,2.2rem) clamp(2rem,4vw,3.5rem);margin-top:clamp(1.7rem,3.6vh,2.5rem);}
#govStage .gv-item p{font-size:1rem;line-height:1.74;}

/* 5.8 operating models — the list was overflowing a fixed-height card;
   let the card size to its content, then fill the screen with padding */
.om-card{min-height:0;height:auto;padding:clamp(2rem,3.6vw,2.9rem);}
.om-grid{margin-top:clamp(2rem,4.2vh,3rem);align-items:stretch;}
.om-when li{font-size:0.94rem;line-height:1.68;}
.om-when li + li{margin-top:0.7rem;}
.om-lead{margin-top:1.3rem;}
.om-fee{margin-top:1.15rem;}
#modelsStage .svcs-head h2{font-size:clamp(1.8rem,3.5vw,2.7rem);}


/* .om-when is an accordion: collapsed by max-height, opened on .is-picked.
   Leave its flex sizing alone so the transition still runs. */
.om-card{padding:clamp(1.8rem,3.3vw,2.6rem);}

/* last 16px / 26px so 5.2 and 5.3 stop clipping at 900px tall */
#redesignStage .svcs-head h2{font-size:clamp(1.6rem,3vw,2.2rem);}
#redesignStage .svcs-head{margin-bottom:0;}
#dmaicStage .dm-panels{min-height:clamp(140px,17.5vh,180px);}
#dmaicStage .dm-foot{margin-top:clamp(1rem,2.2vh,1.5rem);padding-top:clamp(0.9rem,2vh,1.3rem);}
#dmaicStage .dm-step{padding:clamp(0.6rem,1.6vh,1rem) 0;}

/* 5.2 was still 11px over a 900px pin */
#redesignStage .svcs-head h2{font-size:clamp(1.55rem,2.9vw,2.1rem);}
#redesignStage .pr-row{padding-top:0.5rem;padding-bottom:0.5rem;}


/* ============================================================
   SERVICES — keep the pins on shorter screens.
   The release threshold used to be 760px tall, so a normal laptop
   viewport dropped out of full-screen entirely and the sections fell
   back to stacked padding. Pins now hold down to 620px, and this tier
   compresses the content so it still fits between 620 and 860.
   ============================================================ */
@media (min-height:621px) and (max-height:780px) and (min-width:981px){
  /* ~15% off the 900px design: enough to fit a 720-860px screen without
     leaving the section floating in the middle of the pin. */
  .svc-pin > .svcs{
    padding-top:clamp(2.6rem,5.6vh,3.6rem);
    padding-bottom:clamp(2.6rem,5.6vh,3.6rem);
  }
  .svcs-head h2{font-size:clamp(1.6rem,3.2vw,2.4rem);}
  .svcs-head > p{font-size:clamp(0.92rem,1.6vw,1.02rem);line-height:1.64;}

  /* 5.2 */
  #redesignStage .svcs-head h2{font-size:clamp(1.4rem,2.6vw,1.85rem);}
  #redesignStage .pr-row{padding-top:0.3rem;padding-bottom:0.3rem;}

  /* 5.3 */
  #dmaicStage .svcs-head h2{font-size:clamp(1.35rem,2.5vw,1.8rem);}
  .dm-body{margin-top:clamp(1rem,2.2vh,1.5rem);}
  .dm-panels{min-height:clamp(120px,15vh,155px);}
  .dm-panel h3{font-size:clamp(1.45rem,2.9vw,2.1rem);}
  .dm-panel p{font-size:clamp(0.95rem,1.7vw,1.08rem);}
  .dm-step{padding:clamp(0.4rem,1.2vh,0.7rem) 0;}
  .dm-foot{margin-top:clamp(0.9rem,2vh,1.3rem);padding-top:clamp(0.8rem,1.8vh,1.2rem);}
  .svcs-close{margin-top:clamp(0.9rem,2vh,1.3rem);}

  /* 5.5 — light section: keep it near full size so it fills */
  #runStage .svcs-head h2{font-size:clamp(1.45rem,2.8vw,2rem);}

  /* 5.6 */
  .sp-pair{margin-top:clamp(1.5rem,3.2vh,2.2rem);}
  .sp-card{padding:clamp(1.6rem,3vw,2.3rem);}
  .sp-card p{font-size:0.95rem;line-height:1.72;}

  /* 5.7 — was the emptiest: keep type generous, only trim the rhythm */
  .gv-grid{gap:clamp(1.4rem,3vh,2.2rem) clamp(1.8rem,3.6vw,3rem);margin-top:clamp(1.5rem,3.2vh,2.2rem);}
  .gv-item{padding:clamp(0.4rem,1.2vh,0.8rem) 0 clamp(0.4rem,1.2vh,0.8rem) clamp(1.1rem,2.2vw,1.6rem);}
  #govStage .gv-item h3{font-size:clamp(1.05rem,2vw,1.25rem);margin-bottom:0.55rem;}
  #govStage .gv-item p{font-size:0.95rem;line-height:1.7;}

  /* 5.8 */
  #modelsStage .svcs-head h2{font-size:clamp(1.5rem,2.9vw,2.1rem);}
  .om-grid{margin-top:clamp(1.5rem,3.2vh,2.2rem);gap:clamp(1rem,2vw,1.5rem);}
  .om-card{padding:clamp(1.5rem,2.9vw,2.2rem);}
  .om-lead{margin-top:1rem;font-size:clamp(0.98rem,1.8vw,1.12rem);line-height:1.5;}
  .om-when li{font-size:0.9rem;line-height:1.62;}
  .om-when li + li{margin-top:0.55rem;}
  .om-card.is-picked .om-when{max-height:260px;}

  /* 5.9 — closing panel, generous by design but not floating */
  .svcs-final h2{font-size:clamp(2.1rem,4.6vw,3.4rem);}
  .fn-support{margin-top:clamp(1.2rem,2.6vh,1.8rem);font-size:clamp(1.05rem,2vw,1.3rem);}
  .fn-offer{margin-top:clamp(1.2rem,2.6vh,1.8rem);padding:0.7rem 1.4rem;}
  .fn-cta{margin-top:clamp(1.4rem,3vh,2rem);padding:1.15rem 2.7rem;}
  .fn-question{margin-top:clamp(1.4rem,3vh,2rem);font-size:clamp(1.1rem,2.2vw,1.45rem);}
}


/* final deltas for the 621-860px tier */
@media (min-height:621px) and (max-height:780px) and (min-width:981px){
  #redesignStage .svcs-head h2{font-size:clamp(1.3rem,2.4vw,1.7rem);}
  #redesignStage .svcs-head > p{font-size:0.92rem;line-height:1.58;}
  #redesignStage .pr-row{padding-top:0.22rem;padding-bottom:0.22rem;}

  #supportStage .sp-pair{margin-top:clamp(1.1rem,2.4vh,1.6rem);}
  #supportStage .sp-card{padding:clamp(1.3rem,2.5vw,1.9rem);}
  #supportStage .sp-card p{font-size:0.9rem;line-height:1.64;}
  #supportStage .sp-qual{margin-top:0.7rem;}
  #supportStage .sp-link{margin-top:1rem;}

  /* the closing panel was floating */
  .svcs-final h2{font-size:clamp(2.5rem,5.4vw,4rem);}
  .fn-support{margin-top:clamp(1.6rem,3.4vh,2.4rem);font-size:clamp(1.15rem,2.2vw,1.45rem);}
  .fn-offer{margin-top:clamp(1.6rem,3.4vh,2.4rem);padding:0.85rem 1.7rem;font-size:0.84rem;}
  .fn-cta{margin-top:clamp(1.9rem,4vh,2.7rem);padding:1.3rem 3rem;font-size:1rem;}
  .fn-question{margin-top:clamp(1.9rem,4vh,2.7rem);font-size:clamp(1.25rem,2.5vw,1.65rem);}
}

/* ---- band B: 781-860px ---- */
@media (min-height:781px) and (max-height:860px) and (min-width:981px){
  /* ~15% off the 990px design: enough to fit a 720-946px screen without
     leaving the section floating in the middle of the pin. */
  .svc-pin > .svcs{
    padding-top:clamp(2.86rem,5.6vh,3.96rem);
    padding-bottom:clamp(2.86rem,5.6vh,3.96rem);
  }
  .svcs-head h2{font-size:clamp(1.76rem,3.2vw,2.64rem);}
  .svcs-head > p{font-size:clamp(1.012rem,1.6vw,1.122rem);line-height:1.64;}

  /* 5.2 */
  #redesignStage .svcs-head h2{font-size:clamp(1.54rem,2.6vw,2.035rem);}
  #redesignStage .pr-row{padding-top:0.33rem;padding-bottom:0.33rem;}

  /* 5.3 */
  #dmaicStage .svcs-head h2{font-size:clamp(1.485rem,2.5vw,1.98rem);}
  .dm-body{margin-top:clamp(1.1rem,2.2vh,1.65rem);}
  .dm-panels{min-height:clamp(132px,15vh,170.5px);}
  .dm-panel h3{font-size:clamp(1.595rem,2.9vw,2.31rem);}
  .dm-panel p{font-size:clamp(1.045rem,1.7vw,1.188rem);}
  .dm-step{padding:clamp(0.44rem,1.2vh,0.77rem) 0;}
  .dm-foot{margin-top:clamp(0.99rem,2vh,1.43rem);padding-top:clamp(0.88rem,1.8vh,1.32rem);}
  .svcs-close{margin-top:clamp(0.99rem,2vh,1.43rem);}

  /* 5.5 — light section: keep it near full size so it fills */
  #runStage .svcs-head h2{font-size:clamp(1.595rem,2.8vw,2.2rem);}

  /* 5.6 */
  .sp-pair{margin-top:clamp(1.65rem,3.2vh,2.42rem);}
  .sp-card{padding:clamp(1.76rem,3vw,2.53rem);}
  .sp-card p{font-size:1.045rem;line-height:1.72;}

  /* 5.7 — was the emptiest: keep type generous, only trim the rhythm */
  .gv-grid{gap:clamp(1.54rem,3vh,2.42rem) clamp(1.98rem,3.6vw,3.3rem);margin-top:clamp(1.65rem,3.2vh,2.42rem);}
  .gv-item{padding:clamp(0.44rem,1.2vh,0.88rem) 0 clamp(0.44rem,1.2vh,0.88rem) clamp(1.21rem,2.2vw,1.76rem);}
  #govStage .gv-item h3{font-size:clamp(1.155rem,2vw,1.375rem);margin-bottom:0.605rem;}
  #govStage .gv-item p{font-size:1.045rem;line-height:1.7;}

  /* 5.8 */
  #modelsStage .svcs-head h2{font-size:clamp(1.65rem,2.9vw,2.31rem);}
  .om-grid{margin-top:clamp(1.65rem,3.2vh,2.42rem);gap:clamp(1.1rem,2vw,1.65rem);}
  .om-card{padding:clamp(1.65rem,2.9vw,2.42rem);}
  .om-lead{margin-top:1.1rem;font-size:clamp(1.078rem,1.8vw,1.232rem);line-height:1.5;}
  .om-when li{font-size:0.99rem;line-height:1.62;}
  .om-when li + li{margin-top:0.605rem;}
  .om-card.is-picked .om-when{max-height:286px;}

  /* 5.9 — closing panel, generous by design but not floating */
  .svcs-final h2{font-size:clamp(2.31rem,4.6vw,3.74rem);}
  .fn-support{margin-top:clamp(1.32rem,2.6vh,1.98rem);font-size:clamp(1.155rem,2vw,1.43rem);}
  .fn-offer{margin-top:clamp(1.32rem,2.6vh,1.98rem);padding:0.77rem 1.54rem;}
  .fn-cta{margin-top:clamp(1.54rem,3vh,2.2rem);padding:1.265rem 2.97rem;}
  .fn-question{margin-top:clamp(1.54rem,3vh,2.2rem);font-size:clamp(1.21rem,2.2vw,1.595rem);}
}

@media (min-height:781px) and (max-height:860px) and (min-width:981px){
  #redesignStage .svcs-head h2{font-size:clamp(1.43rem,2.4vw,1.87rem);}
  #redesignStage .svcs-head > p{font-size:1.012rem;line-height:1.58;}
  #redesignStage .pr-row{padding-top:0.242rem;padding-bottom:0.242rem;}

  #supportStage .sp-pair{margin-top:clamp(1.21rem,2.4vh,1.76rem);}
  #supportStage .sp-card{padding:clamp(1.43rem,2.5vw,2.09rem);}
  #supportStage .sp-card p{font-size:0.99rem;line-height:1.64;}
  #supportStage .sp-qual{margin-top:0.77rem;}
  #supportStage .sp-link{margin-top:1.1rem;}

  /* the closing panel was floating */
  .svcs-final h2{font-size:clamp(2.75rem,5.4vw,4.4rem);}
  .fn-support{margin-top:clamp(1.76rem,3.4vh,2.64rem);font-size:clamp(1.265rem,2.2vw,1.595rem);}
  .fn-offer{margin-top:clamp(1.76rem,3.4vh,2.64rem);padding:0.935rem 1.87rem;font-size:0.924rem;}
  .fn-cta{margin-top:clamp(2.09rem,4vh,2.97rem);padding:1.43rem 3.3rem;font-size:1.1rem;}
  .fn-question{margin-top:clamp(2.09rem,4vh,2.97rem);font-size:clamp(1.375rem,2.5vw,1.815rem);}
}

/* band B deltas */
@media (min-height:781px) and (max-height:860px) and (min-width:981px){
  .svcs-final h2{font-size:clamp(2.2rem,4.6vw,3.3rem);}
  .fn-support{margin-top:clamp(1.3rem,2.8vh,1.9rem);font-size:clamp(1.05rem,2vw,1.28rem);}
  .fn-offer{margin-top:clamp(1.3rem,2.8vh,1.9rem);padding:0.75rem 1.5rem;}
  .fn-cta{margin-top:clamp(1.5rem,3.2vh,2.1rem);padding:1.1rem 2.6rem;}
  .fn-question{margin-top:clamp(1.5rem,3.2vh,2.1rem);font-size:clamp(1.1rem,2.2vw,1.4rem);}
  #runStage .svcs-head h2{font-size:clamp(1.4rem,2.7vw,1.95rem);}

  #modelsStage .om-card{padding:clamp(1.7rem,3.1vw,2.4rem);}
}

/* band B: size 5.9 and 5.5 from their measured parts */
@media (min-height:781px) and (max-height:860px) and (min-width:981px){
  .svcs-final h2{font-size:clamp(2.6rem,5.2vw,3.9rem);}
  .fn-support{margin-top:clamp(1.9rem,4vh,2.7rem);font-size:clamp(1.2rem,2.3vw,1.48rem);}
  .fn-offer{margin-top:clamp(1.9rem,4vh,2.7rem);padding:0.95rem 1.9rem;font-size:0.88rem;}
  .fn-cta{margin-top:clamp(2.3rem,4.8vh,3.2rem);padding:1.35rem 3.1rem;font-size:1.02rem;}
  .fn-question{margin-top:clamp(2.3rem,4.8vh,3.2rem);font-size:clamp(1.3rem,2.6vw,1.7rem);}

  #runStage .svcs-head h2{font-size:clamp(1.55rem,3vw,2.2rem);}
}

/* ============================================================
   THE ACTUAL BUG: .svc-pin centred the section instead of stretching
   it, so the dark section box only covered ~92-98% of the viewport and
   the page background leaked through as white bands top and bottom.
   Stretch the section to fill the pin, then centre the content inside
   it. The background now covers the full screen at every height.
   ============================================================ */
.svc-pin{align-items:stretch;}
.svc-pin > .svcs{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.svc-pin > .svcs > .wrap:not(.wrap-wide){width:100%;}


/* ============================================================
   5.4 WHAT MBA BUILDS — held beats on a vertical conveyor,
   with a persistent 01-04 index rail (Revert mechanic).
   ============================================================ */
/* ============================================================
   5.6 SUPPORTING CAPABILITIES — live diagnostic consoles.
   Light section, so the futurism comes from precision:
   hairlines, tabular mono labels, one accent doing the work.
   ============================================================ */
.sp-card-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:1.15rem;
}
.sp-card-head h3{margin:0;}
.sp-state{
  display:inline-flex;align-items:center;gap:0.42rem;flex:0 0 auto;
  font-size:0.66rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:#7C8899;
}
.sp-state i{
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(76,120,168,0.45);
}
.sp-card.is-live .sp-state i{animation:spPulse 2.4s ease-out infinite;}
@keyframes spPulse{
  0%{box-shadow:0 0 0 0 rgba(76,120,168,0.45);}
  70%{box-shadow:0 0 0 7px rgba(76,120,168,0);}
  100%{box-shadow:0 0 0 0 rgba(76,120,168,0);}
}

.sp-console{
  border:1px solid rgba(16,29,45,0.09);
  border-radius:12px;
  background:linear-gradient(180deg,#FCFDFF 0%,#F6F9FD 100%);
  padding:clamp(1rem,2vw,1.35rem);
  margin-bottom:1.35rem;
}
.sp-lbl{
  display:block;font-size:0.62rem;font-weight:600;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--slate);margin-bottom:0.55rem;
}
.sp-row + .sp-row{margin-top:0.95rem;}
.sp-row-mid{position:relative;}

/* --- AI-search console --- */
.sp-queries{display:flex;gap:0.4rem;}
.sp-q{
  height:7px;flex:1 1 auto;border-radius:3px;
  background:rgba(28,36,54,0.08);
}
.sp-card.is-live .sp-q{animation:spQ 5.2s ease-in-out infinite;animation-delay:calc(var(--n) * 180ms);}
@keyframes spQ{
  0%,8%{background:rgba(28,36,54,0.08);}
  16%,42%{background:var(--accent);}
  58%,100%{background:rgba(28,36,54,0.08);}
}

.sp-nodes{display:flex;gap:0.55rem;align-items:center;}
.sp-node{
  width:13px;height:13px;border-radius:50%;
  border:1.5px solid rgba(16,29,45,0.16);background:#fff;
  flex:0 0 auto;
}
.sp-card.is-live .sp-node{animation:spNode 5.2s ease-in-out infinite;animation-delay:calc(1s + var(--n) * 150ms);}
@keyframes spNode{
  0%,20%{border-color:rgba(16,29,45,0.16);background:#fff;}
  32%,60%{border-color:var(--accent);background:var(--accent);}
  74%,100%{border-color:rgba(16,29,45,0.16);background:#fff;}
}
.sp-sweep{
  position:absolute;left:0;bottom:2px;width:34px;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;
}
.sp-card.is-live .sp-sweep{animation:spSweep 5.2s ease-in-out infinite;}
@keyframes spSweep{
  0%,14%{opacity:0;transform:translateX(0);}
  22%{opacity:1;}
  56%{opacity:1;transform:translateX(150px);}
  66%,100%{opacity:0;transform:translateX(150px);}
}

.sp-checks{display:flex;flex-wrap:wrap;gap:0.4rem;}
.sp-check{
  display:inline-flex;align-items:center;gap:0.36rem;
  font-size:0.74rem;font-weight:500;color:var(--slate);
  border:1px solid rgba(16,29,45,0.1);border-radius:999px;
  padding:0.24rem 0.6rem 0.24rem 0.5rem;background:#fff;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.sp-check::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:rgba(28,36,54,0.16);transition:background .3s var(--ease);
}
.sp-card.is-live .sp-check{animation:spCheck 5.2s ease-in-out infinite;animation-delay:calc(2.1s + var(--n) * 220ms);}
@keyframes spCheck{
  0%,34%{color:var(--slate);border-color:rgba(16,29,45,0.1);}
  46%,72%{color:#101D2D;border-color:rgba(76,120,168,0.4);}
  84%,100%{color:var(--slate);border-color:rgba(16,29,45,0.1);}
}
.sp-card.is-live .sp-check::before{animation:spCheckDot 5.2s ease-in-out infinite;animation-delay:calc(2.1s + var(--n) * 220ms);}
@keyframes spCheckDot{
  0%,34%{background:rgba(28,36,54,0.16);}
  46%,72%{background:var(--accent);}
  84%,100%{background:rgba(28,36,54,0.16);}
}

/* --- BD / pitch console --- */
.sp-track{position:relative;padding-top:0.3rem;}
.sp-line{
  position:absolute;left:5px;right:5px;top:10px;height:1.5px;
  background:rgba(28,36,54,0.1);border-radius:2px;overflow:hidden;
}
.sp-line i{
  position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
}
.sp-card.is-live .sp-line i{animation:spLine 5.6s ease-in-out infinite;}
@keyframes spLine{
  0%,6%{transform:scaleX(0);}
  56%{transform:scaleX(1);}
  86%{transform:scaleX(1);}
  100%{transform:scaleX(0);}
}
.sp-stages{display:flex;justify-content:space-between;gap:0.4rem;}
.sp-stage{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0.55rem;
  font-size:0.72rem;font-weight:500;color:var(--slate);
  transition:color .3s var(--ease);
}
.sp-stage b{
  width:11px;height:11px;border-radius:50%;
  border:1.5px solid rgba(16,29,45,0.16);background:#fff;
}
.sp-stage-owner b{border-radius:2px;transform:rotate(45deg);}
.sp-card.is-live .sp-stage{animation:spStageTxt 5.6s ease-in-out infinite;animation-delay:calc(var(--n) * 620ms);}
@keyframes spStageTxt{
  0%,4%{color:var(--slate);}
  12%,66%{color:#101D2D;}
  80%,100%{color:var(--slate);}
}
.sp-card.is-live .sp-stage b{animation:spStageDot 5.6s ease-in-out infinite;animation-delay:calc(var(--n) * 620ms);}
@keyframes spStageDot{
  0%,4%{border-color:rgba(16,29,45,0.16);background:#fff;}
  12%,66%{border-color:var(--accent);background:var(--accent);}
  80%,100%{border-color:rgba(16,29,45,0.16);background:#fff;}
}
.sp-stage-owner b{background:#fff!important;}
.sp-card.is-live .sp-stage-owner b{animation:spOwner 5.6s ease-in-out infinite;animation-delay:1.86s;}
@keyframes spOwner{
  0%,4%{border-color:rgba(16,29,45,0.16);}
  12%,66%{border-color:var(--accent);}
  80%,100%{border-color:rgba(16,29,45,0.16);}
}
.sp-owner-note{
  display:block;margin-top:0.95rem;
  font-size:0.66rem;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--slate);
}

@media (prefers-reduced-motion:reduce){
  .sp-card.is-live *{animation:none!important;}
  .sp-card.is-live .sp-node,.sp-card.is-live .sp-stage b{border-color:var(--accent);}
}

/* ---- 5.9: the closing question holds one line ---- */
.fn-question{
  white-space:nowrap;max-width:none;
  font-size:clamp(0.95rem,2.05vw,1.5rem);
}
@media (max-width:820px){
  .fn-question{white-space:normal;font-size:clamp(1rem,3.4vw,1.2rem);}
}


/* ============================================================
   ABOUT & TEAM PAGE
   ============================================================ */
.wrap-wide{max-width:1560px;width:calc(100% - 4rem);margin-inline:auto;}

/* 6.1 hero — vision callout replaces the services offer card */
.ab-vision{
  position:relative;margin:0;z-index:2;
  max-width:440px;padding:clamp(1.6rem,3vw,2.3rem);
  border:1px solid rgba(143,178,217,0.22);border-radius:16px;
  background:linear-gradient(160deg,rgba(28,36,54,0.86),rgba(28,36,54,0.72));
  backdrop-filter:blur(6px);
}
.ab-vision-tag{
  display:inline-flex;align-items:center;gap:0.5rem;margin-bottom:1rem;
  font-size:0.66rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(143,178,217,0.9);
}
.ab-vision-tag i{width:5px;height:5px;border-radius:50%;background:var(--accent);}
.ab-vision blockquote{
  margin:0;font-size:clamp(1.05rem,2vw,1.32rem);line-height:1.5;font-weight:300;
  color:rgba(245,241,232,0.94);letter-spacing:-0.012em;
}
.ab-vision blockquote em{font-style:italic;color:var(--accent);}

/* 6.4 operating model + globe */
.ab-model-grid{
  display:grid;grid-template-columns:1.15fr 0.85fr;
  gap:clamp(2rem,4.5vw,4rem);align-items:center;
}
.ab-fns{
  list-style:none;margin:clamp(1.5rem,3.4vh,2.2rem) 0 0;padding:0;
  display:grid;gap:clamp(0.9rem,2vh,1.3rem);
}
.ab-fns li{
  display:grid;gap:0.3rem;padding-left:1.4rem;position:relative;
  border-left:1px solid rgba(143,178,217,0.24);
}
.ab-fns b{
  font-size:clamp(0.96rem,1.7vw,1.06rem);font-weight:600;color:var(--bone);
  letter-spacing:-0.01em;
}
.ab-fns span{font-size:0.92rem;line-height:1.6;color:rgba(245,241,232,0.62);}
.ab-connect{
  margin-top:clamp(1.4rem,3vh,2rem);padding-top:clamp(1.1rem,2.4vh,1.6rem);
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:0.94rem;line-height:1.68;color:rgba(245,241,232,0.66);
}
.ab-connect b{color:var(--bone);font-weight:600;}

.ab-model-globe{text-align:center;}
.ab-model-globe .globe-wrap{margin-inline:auto;}
.ab-globe-lbl{
  margin-top:1.2rem;font-size:0.66rem;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--accent);
}
.ab-globe-copy{
  margin-top:0.7rem;font-size:0.88rem;line-height:1.66;
  color:rgba(245,241,232,0.6);max-width:42ch;margin-inline:auto;text-align:left;
}

/* 6.6 standards */
.ab-std{margin-top:clamp(1.8rem,4vh,2.8rem);}
.ab-std-lead{
  font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.55;
  color:rgba(245,241,232,0.86);margin:0 0 clamp(1.4rem,3vh,2rem);max-width:56ch;
}
.ab-std ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2.2rem);
}
.ab-std li{
  display:grid;gap:0.45rem;padding-top:1rem;
  border-top:1px solid rgba(143,178,217,0.26);
}
.ab-std b{font-size:clamp(0.98rem,1.8vw,1.1rem);font-weight:600;color:var(--bone);}
.ab-std span{font-size:0.93rem;line-height:1.62;color:rgba(245,241,232,0.62);}

/* 6.7 join line */
.ab-join{
  margin-top:clamp(1.6rem,3.4vh,2.4rem);
  font-size:0.9rem;color:rgba(245,241,232,0.55);
}
.ab-join a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

@media (max-width:1180px){
  .ab-caps{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:980px){
  .ab-caps,.ab-std ul{grid-template-columns:1fr;}
  .ab-model-grid{grid-template-columns:1fr;}
  .ab-vision{max-width:none;}
}


/* ============================================================
   6.5 TEAM PROFILES — dark stage, ghosted wordmark, scattered
   greyscale thumbs, one large active portrait, numbered nav.
   ============================================================ */
.tprof{position:relative;overflow:hidden;}

.tprof .wrap{position:relative;z-index:1;}
.tp-head{margin-bottom:clamp(1.4rem,3.2vh,2.2rem);}
.tp-head h2{color:var(--bone);}
.tp-head p{color:rgba(245,241,232,0.6);}

.tp-stage{
  display:grid;grid-template-columns:minmax(300px,44%) 1fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
}

/* --- the portrait column: active large, the other two offset and small.
   Offsets are absolute px, not percentages of the thumb's own box: a
   percentage translate scales with the thumb and never clears the
   portrait, which left them sitting on top of it. --- */
.tp-figs{
  position:relative;
  height:clamp(400px,53vh,540px);
}
.tp-fig{
  position:absolute;top:50%;left:50%;
  padding:0;border:0;background:none;cursor:pointer;
  overflow:hidden;border-radius:4px;
  transition:
    transform 1s cubic-bezier(.19,1,.22,1),
    width 1s cubic-bezier(.19,1,.22,1),
    height 1s cubic-bezier(.19,1,.22,1),
    opacity .7s var(--ease),
    filter .7s var(--ease);
}
.tp-fig img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block;}

.tp-fig.is-active{
  width:clamp(270px,23vw,380px);height:clamp(330px,38vh,470px);
  transform:translate(-50%,-50%);
  opacity:1;filter:grayscale(0);z-index:3;cursor:default;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.75);
}
/* cleared above and below the portrait, and thrown off-axis so three
   thumbnails still read as a composed column rather than a stack */
.tp-fig.is-above{
  width:clamp(84px,7.6vw,110px);height:clamp(100px,9.2vh,132px);
  transform:translate(-286%,calc(-50% - clamp(88px,11vh,140px)));
  opacity:0.34;filter:grayscale(1);z-index:2;
}
.tp-fig.is-below{
  width:clamp(78px,7vw,102px);height:clamp(94px,8.6vh,124px);
  transform:translate(186%,calc(-50% + clamp(88px,11vh,140px)));
  opacity:0.3;filter:grayscale(1);z-index:2;
}
.tp-fig.is-above:hover,.tp-fig.is-below:hover{opacity:0.75;filter:grayscale(0.2);}
.tp-fig:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

/* --- the copy, cross-faded in place --- */
.tp-copies{position:relative;display:grid;}
.tp-copy{
  grid-area:1/1;align-self:center;
  opacity:0;visibility:hidden;transform:translate3d(0,14px,0);
  transition:opacity .55s var(--ease), transform .7s cubic-bezier(.19,1,.22,1), visibility .55s;
}
.tp-copy.is-active{opacity:1;visibility:visible;transform:none;}
.tp-copy h3{
  font-size:clamp(1.9rem,4vw,3.1rem);font-weight:600;line-height:1.04;
  letter-spacing:-0.035em;color:var(--bone);margin:0;
}
.tp-role{
  display:flex;align-items:center;gap:0.85rem;margin:1.1rem 0 0;
  font-size:0.68rem;font-weight:600;letter-spacing:0.17em;text-transform:uppercase;
  color:var(--accent);
}
.tp-role i{width:clamp(28px,3.4vw,52px);height:1px;background:var(--accent);flex:0 0 auto;}
.tp-bio{
  margin:clamp(1.3rem,3vh,2rem) 0 0;max-width:46ch;
  font-size:clamp(1rem,1.85vw,1.16rem);line-height:1.66;
  color:rgba(245,241,232,0.72);font-weight:300;
}
.tp-tags{
  list-style:none;margin:clamp(1.2rem,2.6vh,1.8rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:0.5rem;
}
.tp-tags li{
  font-size:0.76rem;font-weight:500;color:rgba(245,241,232,0.62);
  border:1px solid rgba(255,255,255,0.14);border-radius:999px;
  padding:0.34rem 0.8rem;
}

/* --- numbered pagination, bottom right like the reference --- */
.tp-nav{
  display:flex;justify-content:flex-end;gap:clamp(1.1rem,2.4vw,2rem);
  margin-top:clamp(1.4rem,3.2vh,2.4rem);
}
.tp-num{
  border:0;background:none;cursor:pointer;padding:0.3rem 0;
  font-size:clamp(0.82rem,1.5vw,0.98rem);font-weight:600;letter-spacing:0.1em;
  font-variant-numeric:tabular-nums;
  color:rgba(245,241,232,0.3);
  transition:color .4s var(--ease);
  position:relative;
}
.tp-num::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.19,1,.22,1);
}
.tp-num:hover{color:rgba(245,241,232,0.7);}
.tp-num.is-active{color:var(--accent);}
.tp-num.is-active::after{transform:scaleX(1);}

@media (max-width:980px){
  .tp-stage{grid-template-columns:1fr;gap:2rem;}
  .tp-figs{height:clamp(300px,42vh,380px);}
  .tp-fig.is-above{transform:translate3d(-132%,-72%,0);}
  .tp-fig.is-below{transform:translate3d(128%,78%,0);}
  .tp-nav{justify-content:flex-start;}
}

/* the numbers sit above the section's ambient lattice */
.tp-nav{position:relative;z-index:2;}
.tp-stage{position:relative;z-index:1;}

/* the vision, now a manifesto closer under the hero copy */
.ab-vision-line{
  margin-top:clamp(1.8rem,3.8vh,2.6rem);
  padding-top:clamp(1.1rem,2.4vh,1.6rem);
  border-top:1px solid rgba(255,255,255,0.1);
  max-width:52ch;
  font-size:clamp(0.96rem,1.7vw,1.08rem);line-height:1.6;font-weight:300;
  color:rgba(245,241,232,0.62);
}
.ab-vision-line span{
  display:block;margin-bottom:0.5rem;
  font-size:0.64rem;font-weight:600;letter-spacing:0.17em;text-transform:uppercase;
  color:var(--accent);
}
.ab-vision-line em{font-style:italic;color:var(--accent);}

/* ============================================================
   6.3 CAPABILITY COMBINATION — numbered spine, four rows
   (zig.ai/how-it-works pattern), light panel, blue spine.
   ============================================================ */
.cc-spine{
  position:relative;list-style:none;margin:clamp(1.8rem,4vh,2.8rem) 0 0;padding:0;
  display:grid;gap:clamp(1.1rem,2.6vh,1.9rem);
}
.cc-line{
  position:absolute;left:calc(clamp(56px,7vw,86px) + clamp(1rem,2vw,1.6rem) + 15px);
  top:14px;bottom:14px;width:2px;
  background:rgba(28,36,54,0.1);border-radius:2px;overflow:hidden;
}
.cc-line i{
  position:absolute;inset:0;background:var(--accent);border-radius:2px;
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.5s cubic-bezier(.19,1,.22,1) .15s;
}
.cc-spine.is-live .cc-line i{transform:scaleY(1);}

.cc-row{
  display:grid;
  grid-template-columns:clamp(56px,7vw,86px) 32px 1fr;
  gap:clamp(1rem,2vw,1.6rem);
  align-items:start;
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .6s var(--ease), transform .7s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(0.25s + var(--n) * 150ms);
}
.cc-spine.is-live .cc-row{opacity:1;transform:none;}

/* the mark, on the far side of the spine */
.cc-mark{display:flex;align-items:flex-start;justify-content:flex-end;padding-top:2px;}
.cc-mark svg{width:clamp(38px,4.4vw,52px);height:auto;}
.cc-mark .m-s{stroke:rgba(16,29,45,0.26);stroke-width:1.6;fill:#fff;}
.cc-mark .m-l{stroke:rgba(16,29,45,0.3);stroke-width:1.8;stroke-linecap:round;}
.cc-mark .m-b{fill:var(--accent);opacity:0.85;}
.cc-mark .m-c{stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;}
.cc-row-prod .cc-mark .m-s{stroke:rgba(76,120,168,0.4);fill:rgba(76,120,168,0.06);}

/* the numbered node, sitting on the spine */
.cc-node{
  position:relative;z-index:1;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1.5px solid rgba(16,29,45,0.14);
  font-size:0.68rem;font-weight:700;letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;color:var(--slate);
  transition:border-color .5s var(--ease), color .5s var(--ease), background .5s var(--ease);
  transition-delay:calc(0.45s + var(--n) * 150ms);
}
.cc-spine.is-live .cc-node{border-color:var(--accent);color:var(--accent);}
.cc-row-prod .cc-node{font-size:0.95rem;}
.cc-spine.is-live .cc-row-prod .cc-node{background:var(--accent);color:#fff;}

.cc-body{padding-top:0.15rem;}
.cc-body h3{
  font-size:clamp(1.05rem,1.95vw,1.28rem);font-weight:600;line-height:1.25;
  letter-spacing:-0.018em;color:#101D2D;margin:0 0 0.45rem;
}
.cc-body p{
  font-size:clamp(0.9rem,1.6vw,0.98rem);line-height:1.62;color:#5A6675;margin:0;max-width:70ch;
}
.cc-row-prod .cc-body h3{color:var(--accent);}

@media (max-width:900px){
  .cc-row{grid-template-columns:32px 1fr;gap:0.9rem;}
  .cc-mark{display:none;}
  .cc-line{left:15px;}
}


/* ============================================================
   INSIGHTS — MBA's article library (copy doc section 7).
   Every source image is exactly 16:9, so nothing is cropped.
   ============================================================ */
.in-hero{
  position:relative;overflow:hidden;background:#EDEFF2;
  padding:clamp(7rem,15vh,10rem) 0 clamp(2.6rem,5.5vh,4rem);
  text-align:center;
}
.in-dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(28,36,54,0.10) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 38%, #000 28%, transparent 76%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 38%, #000 28%, transparent 76%);
}
.in-hero .wrap{position:relative;z-index:1;}
.in-eyebrow{
  display:block;margin-bottom:clamp(1.1rem,2.4vh,1.7rem);
  font-size:0.7rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#6B7A8D;
}
.in-hero h1{
  margin:0 auto;max-width:22ch;
  font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:600;line-height:1.1;
  letter-spacing:-0.035em;color:#101D2D;
}
.in-hero h1 em{font-style:normal;color:var(--accent);}
.in-lede{
  margin:clamp(1.2rem,2.6vh,1.8rem) auto 0;max-width:62ch;
  font-size:clamp(0.98rem,1.75vw,1.12rem);line-height:1.65;color:#5A6675;
}

.in-body{background:#EDEFF2;padding-bottom:clamp(3.5rem,8vh,6rem);}

/* --- 7.2 featured insight --- */
.in-feat{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,3.4vw,3rem);
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 2px 6px rgba(16,29,45,0.07);
  margin-bottom:clamp(2.4rem,5.5vh,4rem);
  align-items:center;
}
.in-feat-media{display:block;aspect-ratio:16/9;overflow:hidden;background:#E4E8ED;}
.in-feat-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.19,1,.22,1);}
.in-feat:hover .in-feat-media img{transform:scale(1.03);}
.in-feat-body{padding:clamp(1.5rem,3vw,2.6rem) clamp(1.5rem,3vw,2.6rem) clamp(1.5rem,3vw,2.6rem) 0;}
.in-feat-tag{
  display:inline-block;margin-bottom:0.9rem;padding:0.32rem 0.75rem;
  border-radius:999px;background:rgba(76,120,168,0.1);
  font-size:0.66rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-small);
}
.in-feat h2{
  margin:0 0 0.9rem;
  font-size:clamp(1.3rem,2.6vw,1.95rem);font-weight:600;line-height:1.2;
  letter-spacing:-0.028em;color:#101D2D;
}
.in-feat h2 a{color:inherit;text-decoration:none;}
.in-feat h2 a:hover{color:var(--accent);}
.in-feat-link{
  display:inline-flex;align-items:center;gap:0.5rem;margin-top:1.1rem;
  font-size:0.92rem;font-weight:600;color:var(--accent);text-decoration:none;
}
.in-feat-link svg{width:15px;height:15px;transition:transform .35s var(--ease);}
.in-feat-link:hover svg{transform:translateX(3px);}

/* --- 7.3 / 7.4 heading + bar --- */
.in-latest-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:clamp(1rem,2.2vh,1.5rem);
}
.in-latest-head h2{
  margin:0;font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:600;
  letter-spacing:-0.028em;color:#101D2D;
}
.in-explore{
  font-size:0.68rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--slate);
}
.in-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:clamp(1.2rem,2.6vh,1.8rem);
}
.in-pills{
  display:flex;gap:0.25rem;flex-wrap:wrap;
  background:#fff;border-radius:999px;padding:0.3rem;
  box-shadow:0 1px 3px rgba(16,29,45,0.06);
}
.in-pill{
  border:0;background:none;cursor:pointer;border-radius:999px;
  padding:0.55rem 0.95rem;
  font-size:0.83rem;font-weight:500;color:#5A6675;white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.in-pill:hover{color:#101D2D;}
.in-pill.is-on{background:var(--accent);color:#fff;font-weight:600;}

.in-tools{display:flex;gap:0.6rem;align-items:center;}
.in-search{
  display:flex;align-items:center;gap:0.55rem;
  background:#fff;border-radius:999px;padding:0.6rem 1.05rem;
  box-shadow:0 1px 3px rgba(16,29,45,0.06);color:var(--slate);
}
.in-search svg{width:17px;height:17px;flex:0 0 auto;}
.in-search input{
  border:0;background:none;outline:none;width:clamp(110px,13vw,175px);
  font:inherit;font-size:0.86rem;color:#101D2D;
}
.in-search input::placeholder{color:#9AA4B2;}
.in-search:focus-within{box-shadow:0 0 0 2px rgba(76,120,168,0.35);}
.in-sort{position:relative;display:flex;align-items:center;}
.in-sort select{
  appearance:none;-webkit-appearance:none;border:0;background:#fff;border-radius:999px;
  padding:0.68rem 2.3rem 0.68rem 1.05rem;
  font:inherit;font-size:0.86rem;font-weight:500;color:#101D2D;cursor:pointer;
  box-shadow:0 1px 3px rgba(16,29,45,0.06);
}
.in-sort svg{position:absolute;right:0.95rem;width:14px;height:14px;pointer-events:none;color:#5A6675;}

.in-count{margin:0 0 clamp(1rem,2.2vh,1.5rem);font-size:0.8rem;font-weight:500;color:var(--slate);}

/* --- the grid --- */
.in-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2rem) clamp(1.2rem,2.4vw,1.8rem);
}
.in-card{
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 3px rgba(16,29,45,0.07);
  transition:transform .5s cubic-bezier(.19,1,.22,1), box-shadow .5s var(--ease);
}
.in-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(16,29,45,0.28);}
.in-card[hidden]{display:none;}
.in-card > a{display:block;text-decoration:none;color:inherit;}
.in-thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#E4E8ED;}
.in-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.19,1,.22,1);}
.in-card:hover .in-thumb img{transform:scale(1.035);}

.in-meta{
  display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;
  margin:clamp(0.9rem,1.9vw,1.2rem) clamp(1rem,2vw,1.3rem) 0.45rem;
  font-size:0.76rem;font-weight:500;color:var(--slate);
}
.in-feat .in-meta{margin:0;}
.in-meta i{width:3px;height:3px;border-radius:50%;background:#C3CAD3;flex:0 0 auto;}
.in-card h3{
  margin:0 clamp(1rem,2vw,1.3rem) clamp(1.1rem,2.2vw,1.5rem);
  font-size:clamp(1rem,1.75vw,1.14rem);font-weight:600;line-height:1.32;
  letter-spacing:-0.018em;color:#101D2D;
}
.in-card:hover h3{color:var(--accent);}
.in-empty{margin:3rem 0;text-align:center;font-size:1rem;color:#6B7A8D;}

/* --- 7.5 closing CTA --- */
.in-cta{
  background:var(--navy);text-align:center;
  padding:clamp(4rem,10vh,7rem) 0;
}
.in-cta h2{
  margin:0 auto;max-width:22ch;
  font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:600;line-height:1.16;
  letter-spacing:-0.03em;color:var(--bone);
}
.in-cta h2 em{font-style:normal;color:var(--accent);}
.in-cta p{
  margin:clamp(1.1rem,2.4vh,1.6rem) auto clamp(1.6rem,3.4vh,2.4rem);max-width:58ch;
  font-size:clamp(0.96rem,1.7vw,1.08rem);line-height:1.65;color:rgba(245,241,232,0.66);
}

@media (max-width:1080px){ .in-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:860px){
  .in-feat{grid-template-columns:1fr;}
  .in-feat-body{padding:0 clamp(1.3rem,4vw,2rem) clamp(1.5rem,4vw,2.2rem);}
}
@media (max-width:720px){
  .in-grid{grid-template-columns:1fr;}
  .in-bar{flex-direction:column;align-items:stretch;}
  .in-tools{justify-content:space-between;}
  .in-search input{width:100%;}
}

/* --- insights pagination --- */
.in-pager{
  display:flex;align-items:center;justify-content:center;gap:0.4rem;
  margin-top:clamp(2rem,4.5vh,3.2rem);
}
.in-pager[hidden]{display:none;}
.in-page-nums{display:flex;gap:0.25rem;}
.in-page-btn,.in-page-num{
  min-width:38px;height:38px;padding:0 0.6rem;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:10px;background:#fff;cursor:pointer;
  font:inherit;font-size:0.86rem;font-weight:600;color:#5A6675;
  box-shadow:0 1px 3px rgba(16,29,45,0.07);
  transition:background .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.in-page-btn svg{width:15px;height:15px;}
.in-page-btn:hover:not(:disabled),.in-page-num:hover{color:#101D2D;}
.in-page-btn:disabled{opacity:0.35;cursor:default;}
.in-page-num.is-on{background:var(--accent);color:#fff;}
/* hero and CTA line breaks are authored in the markup; keep them on wide
   screens and let the copy reflow naturally once there is no room */
@media (max-width:820px){
  .in-hero h1 br,.in-lede br,.in-cta h2 br{display:none;}
}

/* The authored <br> sets the line count, so the ch-based caps have to go —
   they were re-wrapping segments and adding a line to each block. */
.in-hero h1{max-width:none;}
.in-lede{max-width:none;}
.in-cta h2{max-width:none;}
.in-hero h1,.in-lede,.in-cta h2{text-wrap:balance;}
@media (min-width:821px){
  .in-hero h1{font-size:clamp(1.75rem,3.5vw,3.05rem);}
  .in-lede{font-size:clamp(0.94rem,1.32vw,1.08rem);}
  .in-cta h2{font-size:clamp(1.5rem,2.9vw,2.4rem);}
}

/* --- insights: author line on cards --- */
.in-by{
  margin:0 clamp(1rem,2vw,1.3rem) clamp(1.1rem,2.2vw,1.5rem);
  font-size:0.78rem;font-weight:500;color:var(--slate);
}
.in-card h3{margin-bottom:0.4rem;}
.in-feat .in-by{margin:0.55rem 0 0;}
/* the eyebrow now uses the Services/About treatment; it sits on a light
   ground here, so the label colour has to come back to the accent */
.in-hero .svc-eyebrow{justify-content:center;color:var(--accent-small);}
.in-hero .svc-eyebrow i{background:var(--accent);}

/* ============================================================
   ARTICLE PAGE — wider measure and prev/next navigation
   ============================================================ */
.art-wrap{max-width:1080px;}
.art-body .art-wrap p,
.art-body .art-wrap li,
.art-body .art-wrap blockquote{max-width:74ch;}
.art-body .art-wrap h2,
.art-body .art-wrap h3{max-width:60ch;}

.art-nav-pn{background:#fff;padding:clamp(2rem,5vh,3.4rem) 0 0;}
.art-nav-pn .art-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,2rem);
  padding-top:clamp(1.6rem,3.4vh,2.4rem);
  border-top:1px solid rgba(16,29,45,0.1);
}
.apn{
  display:flex;flex-direction:column;gap:0.55rem;
  padding:clamp(1.1rem,2.2vw,1.6rem);
  border:1px solid rgba(16,29,45,0.1);border-radius:14px;
  text-decoration:none;background:#fff;
  transition:border-color .35s var(--ease), transform .45s cubic-bezier(.19,1,.22,1), box-shadow .35s var(--ease);
}
/* superseded: the hover surface is drawn by .apn::before */
.apn-empty{border:0;background:none;}
.apn-lbl{
  display:flex;align-items:center;gap:0.45rem;
  font-size:0.68rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent);
}
.apn-lbl svg{width:13px;height:13px;}
.apn-next{text-align:right;align-items:flex-end;}
.apn-next .apn-lbl{flex-direction:row;}
.apn-title{
  font-size:clamp(0.98rem,1.7vw,1.12rem);font-weight:600;line-height:1.35;
  letter-spacing:-0.018em;color:#101D2D;
}
.apn:hover .apn-title{color:var(--accent);}
@media (max-width:760px){
  .art-nav-pn .art-wrap{grid-template-columns:1fr;}
  .apn-next{text-align:left;align-items:flex-start;}
  .apn-empty{display:none;}
}

/* .art-body .wrap{max-width:820px} is more specific than .art-wrap, so the
   body column kept the old narrow measure. Match its specificity. */
.art-body .wrap.art-wrap{max-width:1080px;}

/* ============================================================
   ARTICLE PAGE — one measure for the whole page.
   Head, hero, body, CTA, prev/next and related all sit on the
   same left and right edge, and the body text now matches the
   image width instead of stopping short of it.
   ============================================================ */
.art-wrap{max-width:1240px;}
.art-body .wrap.art-wrap{max-width:1240px;}

/* drop the narrower caps that made each block a different width */
.art-body .art-wrap p,
.art-body .art-wrap li,
.art-body .art-wrap blockquote,
.art-body .art-wrap h2,
.art-body .art-wrap h3{max-width:none;}
.art-head .art-wrap h1,
.art-head .art-wrap .art-stand,
.art-head .art-wrap .art-author{max-width:none;}

/* the CTA had its own narrower wrap and a centred column */
.art-cta .art-wrap{max-width:1240px;}
.art-cta .art-wrap h2,
.art-cta .art-wrap p{max-width:none;margin-inline:0;}
.art-rel .art-wrap{max-width:1240px;}
.art-rel-grid{margin-inline:0;}

/* ---- prev / next: plain text, no box, no rule above ---- */
.art-nav-pn{background:#fff;padding:clamp(2.4rem,5.5vh,3.8rem) 0 clamp(1rem,2.5vh,1.8rem);}
.art-nav-pn .art-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);
  padding-top:0;border-top:0;                     /* the rule above is gone */
}
.apn{
  position:relative;display:flex;flex-direction:column;gap:0.5rem;
  padding:clamp(0.9rem,1.8vw,1.25rem);
  border:0;background:none;border-radius:14px;text-decoration:none;
  transition:transform .45s cubic-bezier(.19,1,.22,1);
}
/* the surface only appears on hover, behind the text */
.apn::before{
  content:"";position:absolute;inset:0;border-radius:14px;
  background:#fff;box-shadow:0 18px 40px -18px rgba(16,29,45,0.28);
  opacity:0;transform:scale(0.985);
  transition:opacity .35s var(--ease), transform .45s cubic-bezier(.19,1,.22,1);
  z-index:-1;
}
.apn:hover::before{opacity:1;transform:scale(1);}
.apn:hover{transform:translateY(-2px);}
.apn > *{position:relative;z-index:1;}
.apn-empty{display:block;padding:0;}
.apn-empty::before{display:none;}

/* .art-cta .wrap and .art-rel .wrap carry their own 820px cap at equal
   specificity, so the article measure has to out-specify them. */
.art-cta .wrap.art-wrap,
.art-rel .wrap.art-wrap,
.art-nav-pn .wrap.art-wrap,
.art-head .wrap.art-wrap{max-width:1240px;}
.art-cta .wrap.art-wrap > *{margin-left:0;margin-right:0;}

/* prev/next text sits flush with the article margin; the hover surface
   grows outward from it rather than padding the text inward */
.apn{padding:clamp(0.9rem,1.8vw,1.2rem) 0;}
.apn::before{inset:0 -22px;}

.apn,.apn:hover{border-color:transparent;box-shadow:none;}

/* ---- article hero: caption reveals on hover over a soft bottom shade ---- */
.art-hero{position:relative;margin:0;overflow:hidden;border-radius:14px;}
.art-hero img{display:block;width:100%;height:auto;}
.art-hero.has-cap::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(to top, rgba(28,36,54,0.86) 0%, rgba(28,36,54,0.55) 45%, rgba(28,36,54,0) 100%);
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
}
.art-hero.has-cap:hover::after{opacity:1;}
.art-hero figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  margin:0;padding:clamp(1rem,2.4vw,1.6rem) clamp(1.1rem,2.6vw,1.9rem);
  font-size:clamp(0.86rem,1.5vw,0.98rem);line-height:1.5;font-weight:400;
  color:rgba(255,255,255,0.94);
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .5s cubic-bezier(.19,1,.22,1);
  pointer-events:none;
}
.art-hero.has-cap:hover figcaption{opacity:1;transform:none;}
@media (hover:none){
  /* no hover on touch: keep the caption legible underneath instead */
  .art-hero.has-cap::after{display:none;}
  .art-hero figcaption{
    position:static;opacity:1;transform:none;color:#6B7A8D;
    padding:0.8rem 0 0;font-size:0.86rem;
  }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.ct-top{background:#EDEFF2;padding:clamp(7rem,14vh,9.5rem) 0 clamp(3.5rem,8vh,6rem);}
.ct-split{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:clamp(2rem,5vw,5rem);align-items:start;}

.ct-rail{display:grid;gap:0.75rem;position:sticky;top:110px;}
.ct-card{
  background:#fff;border-radius:14px;padding:clamp(1.1rem,2.2vw,1.5rem);
  box-shadow:0 1px 3px rgba(16,29,45,0.07);display:grid;gap:0.3rem;
}
.ct-card-lbl{font-size:0.68rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--slate);}
.ct-card-val{font-size:clamp(1rem,1.8vw,1.15rem);font-weight:600;color:#101D2D;letter-spacing:-0.018em;}
.ct-card-sub{font-size:0.88rem;line-height:1.6;color:#5A6675;}
.ct-card-offer{background:linear-gradient(160deg,rgba(76,120,168,0.08),rgba(76,120,168,0.02));
  border:1px solid rgba(76,120,168,0.22);box-shadow:none;}
.ct-card-offer .ct-card-val{color:var(--accent);}
.ct-card-quiet{background:none;box-shadow:none;border:1px solid rgba(16,29,45,0.1);}

.ct-eyebrow{color:var(--accent);margin-bottom:1.1rem;}
.ct-eyebrow i{background:var(--accent);}
.ct-main h1{
  font-size:clamp(2rem,4.4vw,3.4rem);font-weight:600;line-height:1.08;
  letter-spacing:-0.035em;color:#101D2D;margin:0;max-width:18ch;
}
.ct-main h1 em{font-style:normal;color:var(--accent);}
.ct-lede{
  margin:clamp(1.2rem,2.6vh,1.8rem) 0 0;max-width:62ch;
  font-size:clamp(0.98rem,1.75vw,1.1rem);line-height:1.7;color:#5A6675;
}

/* --- the form --- */
.ct-form{
  margin-top:clamp(2rem,4.5vh,3.2rem);
  background:#fff;border-radius:18px;
  padding:clamp(1.5rem,3.2vw,2.6rem);
  box-shadow:0 2px 6px rgba(16,29,45,0.07);
}
.ct-form h2{
  margin:0 0 clamp(1.3rem,2.8vh,1.9rem);
  font-size:clamp(1.15rem,2.1vw,1.4rem);font-weight:600;
  letter-spacing:-0.022em;color:#101D2D;
}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(0.9rem,1.9vw,1.3rem);}
.ct-field{display:grid;gap:0.45rem;}
.ct-field-wide{grid-column:1 / -1;}
.ct-field > span{font-size:0.82rem;font-weight:600;color:#3F4B5A;}
.ct-field > span b{color:var(--accent);font-weight:600;}
.ct-field > span i{font-style:normal;font-weight:400;color:#9AA4B2;}
.ct-field input,.ct-field textarea,.ct-field select{
  width:100%;font:inherit;font-size:0.95rem;color:#101D2D;
  background:#F7F9FB;border:1px solid rgba(16,29,45,0.12);border-radius:10px;
  padding:0.8rem 0.95rem;outline:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.ct-field textarea{resize:vertical;min-height:96px;line-height:1.6;}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#A7B0BC;}
.ct-field input:focus,.ct-field textarea:focus,.ct-field select:focus{
  background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px rgba(76,120,168,0.15);
}
.ct-field .is-bad{border-color:#D2504A;box-shadow:0 0 0 3px rgba(210,80,74,0.14);}
.ct-select{position:relative;display:flex;align-items:center;}
.ct-select select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer;}
.ct-select svg{position:absolute;right:0.95rem;width:15px;height:15px;pointer-events:none;color:#5A6675;}

.ct-error{
  margin:1rem 0 0;padding:0.7rem 0.95rem;border-radius:10px;
  background:rgba(210,80,74,0.08);border:1px solid rgba(210,80,74,0.28);
  font-size:0.88rem;color:#A6332C;
}
.ct-error[hidden]{display:none;}
.ct-submit{margin-top:clamp(1.4rem,3vh,2rem);display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;}
.ct-btn{flex:0 0 auto;}
.ct-note{flex:1 1 260px;margin:0;font-size:0.8rem;line-height:1.6;color:var(--slate);}

/* --- 8.2 signals --- */
.ct-kicker{
  display:block;margin-bottom:0.85rem;
  font-size:0.68rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);
}
.ct-kicker-dark{color:var(--accent);}
.ct-band{background:#fff;padding:clamp(3.5rem,8vh,6rem) 0;}
.ct-band-head h2,.ct-trial h2{
  margin:0;font-size:clamp(1.5rem,3vw,2.3rem);font-weight:600;line-height:1.15;
  letter-spacing:-0.03em;color:#101D2D;max-width:24ch;
}
.ct-band-head h2 em,.ct-trial h2 em,.ct-covers h2 em{font-style:normal;color:var(--accent);}
.ct-signals{
  list-style:none;margin:clamp(1.8rem,4vh,2.8rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1rem,2.2vw,1.6rem);
}
.ct-signals li{
  display:grid;grid-template-columns:auto 1fr;gap:0.9rem;align-items:start;
  padding-top:1rem;border-top:1px solid rgba(16,29,45,0.12);
  font-size:0.97rem;line-height:1.6;color:#3F4B5A;
}
.ct-signals span{
  font-size:0.7rem;font-weight:700;letter-spacing:0.1em;color:var(--accent);
  font-variant-numeric:tabular-nums;padding-top:0.18rem;
}

/* --- 8.3 what it covers --- */
.ct-covers{background:var(--navy);padding:clamp(3.5rem,8vh,6rem) 0;}
.ct-covers-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.ct-covers h2{margin:0;font-size:clamp(1.5rem,3vw,2.3rem);font-weight:600;line-height:1.15;
  letter-spacing:-0.03em;color:var(--bone);max-width:20ch;}
.ct-covers-body p{margin:0;font-size:clamp(1rem,1.8vw,1.12rem);line-height:1.7;color:rgba(245,241,232,0.74);}
.ct-qual{
  margin-top:1.3rem!important;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,0.12);
  font-size:0.92rem!important;color:rgba(245,241,232,0.55)!important;
}

/* --- 8.4 trial --- */
.ct-trial{background:#EDEFF2;padding:clamp(3.5rem,8vh,6rem) 0;}
.ct-trial-lede{margin:clamp(1.1rem,2.4vh,1.7rem) 0 0;max-width:64ch;
  font-size:clamp(0.98rem,1.75vw,1.1rem);line-height:1.7;color:#5A6675;}
.ct-trial-offer{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:0.9rem;
  margin-top:clamp(1.4rem,3vh,2rem);padding:0.85rem 1.5rem;
  background:#fff;border:1px solid rgba(76,120,168,0.24);border-radius:999px;
  font-size:0.92rem;color:#3F4B5A;
}
.ct-trial-offer b{color:#101D2D;font-weight:600;}
.ct-trial-offer i{width:3px;height:3px;border-radius:50%;background:#C3CAD3;}
.ct-protect{margin:clamp(1.3rem,2.8vh,1.9rem) 0 0;max-width:66ch;font-size:0.92rem;line-height:1.65;color:#6B7A8D;}

@media (max-width:980px){
  .ct-split{grid-template-columns:1fr;}
  .ct-rail{position:static;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
  .ct-covers-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .ct-grid{grid-template-columns:1fr;}
}

/* ============================================================
   HERO FX — ripple canvas + headline word animation
   ============================================================ */
.hero-ripple{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;z-index:1;
}
/* once the shader is drawing, the video is only a texture source */
.hero-media.has-ripple .hero-video{opacity:0;}
.hero-media{pointer-events:auto;}

/* --- headline: larger, and animated word by word --- */
.hero h1{font-size:clamp(2.2rem,6.2vw,80px);letter-spacing:-0.032em;line-height:1.06;}

.hero h1.is-split .hw{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:0.06em;                 /* room for descenders inside the mask */
}
.hero h1.is-split .hw > i{
  display:inline-block;font-style:inherit;
  transform:translate3d(0,110%,0);
  opacity:0;
  transition:transform .95s cubic-bezier(.19,1,.22,1), opacity .6s ease;
  transition-delay:calc(var(--i) * 70ms + 220ms);
  will-change:transform;
}
.hero h1.is-in .hw > i{transform:translate3d(0,0,0);opacity:1;}

/* after the words land, the line drifts almost imperceptibly */
.hero h1.is-breathing .hw > i{
  animation:heroBreathe 7s ease-in-out infinite;
  animation-delay:calc(var(--i) * 240ms);
}
@keyframes heroBreathe{
  0%,100%{transform:translate3d(0,0,0);}
  50%    {transform:translate3d(0,-3px,0);}
}
.hero h1.no-breathe .hw > i{animation:none;transform:none;opacity:1;transition:none;}

@media (prefers-reduced-motion: reduce){
  .hero h1.is-split .hw > i{transform:none;opacity:1;transition:none;animation:none;}
}

/* the word treatment now applies to every hero beat, not just the headline */
.hero .hero-line.is-split .hw,
.hero h1.is-split .hw{
  display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:0.08em;
}
.hero .hero-line.is-split .hw > i,
.hero h1.is-split .hw > i{
  display:inline-block;font-style:inherit;
  transform:translate3d(0,110%,0);opacity:0;
  transition:transform .95s cubic-bezier(.19,1,.22,1), opacity .6s ease;
  transition-delay:calc(var(--i) * 46ms + 120ms);
  will-change:transform;
}
.hero .hero-line.is-in .hw > i,
.hero h1.is-in .hw > i{transform:translate3d(0,0,0);opacity:1;}
.hero .hero-line.is-breathing .hw > i{
  animation:heroBreathe 7s ease-in-out infinite;
  animation-delay:calc(var(--i) * 160ms);
}
/* <em> inside a split line keeps its accent colour */
.hero .hero-line.is-split em .hw > i{color:inherit;}
@media (prefers-reduced-motion: reduce){
  .hero .hero-line.is-split .hw > i{transform:none;opacity:1;transition:none;animation:none;}
}

/* The two long hero lines (21 words) break unevenly at 34ch because the
   container is narrower than the measure; a tighter measure lets balance
   distribute them. The short line keeps the wider measure. */
.hero-beat[data-beat="2"] .hero-line,
.hero-beat[data-beat="3"] .hero-line{max-width:28ch;}
/* balance, not pretty: pretty only guards orphans and here it left a
   185px last line. balance distributes the lines evenly. */
.hero-line{text-wrap:balance;}

/* ============================================================
   MBA'S INTEGRATED MODEL — more air between the pieces.
   The step cards and the two panels below sat tight against each
   other and against the heading; open up the gaps and the padding.
   ============================================================ */
.md-steps{
  --md-gap:clamp(1.6rem,3.2vw,2.6rem);gap:var(--md-gap);
  margin-top:clamp(3.2rem,7.5vh,5rem);
}
.md-step{
  padding:clamp(1.9rem,3.4vw,2.6rem) clamp(1.7rem,3vw,2.3rem);
  border-radius:20px;
}
.md-step .md-icon{width:50px;height:50px;border-radius:14px;}
.md-step h3,.md-step .md-title{margin-top:clamp(1.2rem,2.4vh,1.7rem);}
.md-step-body{margin-top:1.1rem;line-height:1.68;}

.md-foot{
  gap:clamp(1.7rem,3.4vw,2.8rem);
  margin-top:clamp(3.2rem,7vh,4.5rem);
}
.md-statement{
  padding:clamp(2.1rem,4vh,2.9rem) clamp(2.1rem,3.8vw,3rem);
  gap:clamp(1.2rem,2.4vw,1.9rem);
}
.md-says{gap:0.5rem;}
.md-say-label{margin-bottom:0.9rem;}
.model-head{margin-bottom:clamp(0.6rem,1.6vh,1rem);}

/* the chevrons derive their position from --md-gap, so no nudge is needed */

/* ---- "The same underlying operating problem." on one line ---- */
#redesigns h2 .redo-hl{display:block;}
#redesigns h2 em.redo-hl{white-space:nowrap;}
@media (max-width:900px){
  #redesigns h2 em.redo-hl{white-space:normal;}
}

/* The model sits in a 100vh pin, so .model-pin rules compress it to fit.
   Open those up — the section still has to fit, so this is tuned against
   the measured content height rather than pushed to the maximum. */
.model-pin .md-steps{
  --md-gap:clamp(1.4rem,2.8vw,2.2rem);gap:var(--md-gap);
  margin-top:clamp(2rem,4.6vh,3.2rem);
}
.model-pin .md-step{
  padding:clamp(1.5rem,2.6vw,2rem) clamp(1.35rem,2.4vw,1.8rem);
  border-radius:18px;
}
.model-pin .md-step .md-icon{width:46px;height:46px;}
.model-pin .md-foot{
  gap:clamp(1.4rem,2.8vw,2.2rem);
  margin-top:clamp(2rem,4.4vh,3rem);
}
.model-pin .md-statement{
  padding:clamp(1.6rem,3vh,2.2rem) clamp(1.7rem,3vw,2.4rem);
  gap:clamp(1rem,2vw,1.5rem);
}
.model-pin .md-say-label{margin-bottom:0.8rem;}
.model-pin .model-head{margin-bottom:clamp(0.4rem,1.2vh,0.8rem);}

/* ---- services 5.2: no rules between the examined items ---- */
.pr-row{border-bottom:0;}
/* the sequence line and "Why it matters" were almost touching once the
   two columns stack */
.pr-foot{row-gap:clamp(1.6rem,3.4vh,2.4rem);}
.pr-why{margin-top:0;}
@media (max-width:900px){
  .pr-foot{row-gap:clamp(1.8rem,4vh,2.6rem);}
}

/* ---- DMAIC: the stage description sits centred in its panel area ---- */
.dm-panel{align-self:center;}
/* align-items centres the panel inside its row; align-content centres the
   row itself inside the taller panels box. Both are needed. */
.dm-panels{align-items:center;align-content:center;}

/* ============================================================
   HOMEPAGE PINNED SECTIONS — fill the pin, centre the content.
   The pins centred their section instead of stretching it, so each
   section stopped short of the viewport edges (48px on the model)
   and left a band where its background was not painted. That band
   is also what the nav's colour probe can land in. Stretch the
   section to the full pin, then centre the content inside it with
   symmetric padding that clears the fixed nav.
   ============================================================ */
.model-pin,.wm-pin,.redo-pin,.ev-pin{align-items:stretch;}

.model-pin > .model,
.wm-pin   > .whymba,
.redo-pin > .redo,
.ev-pin   > *{
  min-height:100%;
  width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(5.5rem,10.5vh,7rem);
  padding-bottom:clamp(3.5rem,7vh,5rem);
}
.model-pin > .model > .wrap,
.wm-pin   > .whymba > .wrap,
.redo-pin > .redo   > .wrap{width:100%;}

@media (max-width:980px), (max-height:760px){
  /* pins released: sections flow normally again */
  .model-pin > .model,
  .wm-pin   > .whymba,
  .redo-pin > .redo,
  .ev-pin   > *{
    min-height:0;display:block;
    padding-top:var(--section-pad);
    padding-bottom:var(--section-pad);
  }
}

/* The redesigns section runs ~71px taller than the space its padding leaves,
   so centring pushed it under the fixed nav. Trim its own rhythm rather than
   the padding, so it clears the nav and still fills the pin. */
.redo-pin > .redo{padding-top:clamp(5rem,9.5vh,6.4rem);padding-bottom:clamp(2.5rem,5vh,3.6rem);}
.redo-pin .redo-head{margin-bottom:clamp(1rem,2.2vh,1.5rem);}
.redo-pin .redo-grid{gap:clamp(0.9rem,1.9vw,1.35rem);}
.redo-pin .redo-card{padding:clamp(1.1rem,2.2vw,1.6rem);}
.redo-pin .redo-note{margin-top:clamp(0.7rem,1.5vh,1rem);}

/* still ~40px too tall for the nav to clear: take it out of the type rhythm,
   not the card padding (shrinking padding just rewraps the copy taller) */
.redo-pin .redo-card p{font-size:0.88rem;line-height:1.55;}
.redo-pin .redo-card h3{font-size:clamp(0.98rem,1.7vw,1.1rem);margin-bottom:0.4rem;}
.redo-pin .redo-head h2{font-size:clamp(1.5rem,2.9vw,2.15rem);}
.redo-pin .redo-head > p{font-size:0.94rem;line-height:1.6;}
.redo-pin .redo-note{font-size:0.86rem;}

/* reclaim the last ~80px so the heading clears the fixed nav */
.redo-pin .redo-head{margin-bottom:clamp(0.7rem,1.5vh,1.1rem);}
.redo-pin .redo-head > p{margin-top:0.6rem;max-width:56ch;}
.redo-pin .redo-card{padding:clamp(1rem,2vw,1.35rem);}
.redo-pin .redo-art,
.redo-pin .redo-card svg{max-height:clamp(70px,9vh,104px);height:auto;width:auto;}
.redo-pin .redo-grid{gap:clamp(0.75rem,1.6vw,1.1rem);}

/* ============================================================
   NAV — logo hard left, menu hard right, equal side margins.
   The nav shared the page's centred .wrap, which pulled both ends
   inward. Give it the full width with symmetric padding instead.
   Applies in the scrolled state too, since only the padding of
   .nav itself animates, not the wrap.
   ============================================================ */
.nav .wrap{
  max-width:none;
  width:100%;
  padding-inline:clamp(1.25rem,2.6vw,2.75rem);
  gap:1.5rem;
}
@media (max-width:640px){
  .nav .wrap{padding-inline:1.1rem;}
}

/* the logo carried a 26px left margin, so it sat further in than the menu
   sat from the right; the wrap padding already provides the margin */
.nav .nav-logo{margin-left:0;}

/* ---- 5.6 supporting capabilities ----
   Content ran 941px inside a 950px pin, so the section's padding collapsed and
   the eyebrow ended up at y=33 — under the 110px nav. Reclaim height across
   the head, the consoles and the copy so the whole block clears the nav. */
#supportStage .svcs-head{margin-bottom:clamp(1.2rem,2.6vh,1.8rem);}
#supportStage .svcs-head h2{font-size:clamp(1.4rem,2.7vw,2rem);}
#supportStage .svcs-head > p{font-size:0.95rem;line-height:1.6;max-width:64ch;}

#supportStage .sp-card{padding:clamp(1.3rem,2.5vw,1.9rem);}
#supportStage .sp-card-head{margin-bottom:0.85rem;}
#supportStage .sp-card h3{font-size:clamp(1rem,1.8vw,1.14rem);}

#supportStage .sp-console{padding:clamp(0.8rem,1.6vw,1.05rem);margin-bottom:1rem;}
#supportStage .sp-row + .sp-row{margin-top:0.7rem;}
#supportStage .sp-lbl{margin-bottom:0.4rem;font-size:0.58rem;}
#supportStage .sp-nodes{gap:0.45rem;}
#supportStage .sp-node{width:11px;height:11px;}
#supportStage .sp-q{height:6px;}
#supportStage .sp-check{font-size:0.7rem;padding:0.2rem 0.5rem 0.2rem 0.42rem;}
#supportStage .sp-stage{font-size:0.68rem;}
#supportStage .sp-owner-note{margin-top:0.7rem;font-size:0.6rem;}

#supportStage .sp-card > p{font-size:0.94rem;line-height:1.62;}
#supportStage .sp-qual{margin-top:0.8rem;font-size:0.82rem!important;line-height:1.6!important;}
#supportStage .sp-link{margin-top:0.9rem;font-size:0.88rem;}

/* the content now fits with 66px slack top and bottom; weight that slack
   toward the top so the eyebrow clears the fixed nav instead of sitting
   behind it (the nav is ~91px scrolled, ~110px at rest) */
#supportStage.svc-stage .svc-pin > .svcs{
  padding-top:clamp(6.6rem,12vh,8.2rem);
  padding-bottom:clamp(1.4rem,3vh,2.2rem);
}

/* Shorter viewports: the section needs ~100px more than it has once the top
   padding clears the nav, so compress the console and copy further there.
   The top padding still has to clear the nav, so it is the content that gives. */
@media (max-height:900px) and (min-width:981px){
  #supportStage.svc-stage .svc-pin > .svcs{
    padding-top:clamp(5.8rem,10.5vh,6.8rem);
    padding-bottom:clamp(1rem,2.2vh,1.6rem);
  }
  #supportStage .svcs-head{margin-bottom:clamp(0.8rem,1.8vh,1.2rem);}
  #supportStage .svcs-head h2{font-size:clamp(1.25rem,2.4vw,1.75rem);}
  #supportStage .svcs-head > p{font-size:0.88rem;line-height:1.55;max-width:70ch;}
  #supportStage .sp-pair{margin-top:clamp(0.9rem,2vh,1.3rem);gap:clamp(1rem,2.2vw,1.6rem);}
  #supportStage .sp-card{padding:clamp(1rem,2vw,1.45rem);}
  #supportStage .sp-console{padding:0.75rem;margin-bottom:0.8rem;}
  #supportStage .sp-row + .sp-row{margin-top:0.55rem;}
  #supportStage .sp-card > p{font-size:0.88rem;line-height:1.55;}
  #supportStage .sp-qual{margin-top:0.6rem;font-size:0.76rem!important;line-height:1.5!important;}
  #supportStage .sp-link{margin-top:0.7rem;font-size:0.82rem;}
  #supportStage .sp-checks{gap:0.3rem;}
  #supportStage .sp-check{font-size:0.66rem;}
}

/* =====================================================================
   Round fixes — operating models, final CTA, production deck
   ===================================================================== */

/* 5.7 — the detail panel used to animate max-height on hover. Inside a pin
   that vertically centres its section, any height change moves every element
   on screen, and sweeping across the boundary between two cards restarted the
   animation on both, which read as a shake. The panel now always occupies its
   space and only its opacity changes, so hover never touches layout — and
   nothing is clipped at 286px any more. */
#modelsStage .om-when{
  max-height:none;overflow:visible;
  opacity:0.42;padding-top:1.1rem;
  transition:opacity .38s var(--ease);
}
#modelsStage .om-card.is-picked .om-when{max-height:none;opacity:1;}
#modelsStage .om-card{min-height:0;}
#modelsStage .om-grid{align-items:stretch;}
/* the panel now always occupies space, so the grid is taller than it was;
   claw back the difference so the head still clears the fixed nav. */
#modelsStage .om-grid{margin-top:clamp(1.1rem,2.2vh,1.7rem);}
#modelsStage .om-card{padding:clamp(1.5rem,2.7vw,2.15rem);}
#modelsStage .om-when li + li{margin-top:0.5rem;}
#modelsStage .om-when{padding-top:0.95rem;}

/* 5.9 — .fn-offer and .fn-cta are both inline-flex, so they collapsed onto one
   line separated by a single word space; their margin-top only moved the row.
   Each is its own centred block now, and the button sits clear of the pill. */
.svcs-final .fn-offer,
.svcs-final .fn-cta{
  display:flex;width:fit-content;margin-left:auto;margin-right:auto;
}
.svcs-final .fn-cta{margin-top:clamp(1.8rem,3.6vh,2.6rem);}

/* 5.7 on shorter screens — the panels now always occupy their space, so the
   grid is tall enough to push the eyebrow under the fixed nav. Compress the
   card interior and weight the pin's slack toward the top, as 5.6 does. */
@media (min-width:981px) and (max-height:900px){
  #modelsStage.svc-stage .svc-pin > .svcs{
    padding-top:clamp(5.2rem,9vh,6.4rem);
    padding-bottom:clamp(2.4rem,4.6vh,3.2rem);
  }
  #modelsStage .om-grid{margin-top:clamp(1rem,2vh,1.5rem);}
  #modelsStage .om-card{padding:clamp(1.45rem,2.6vw,2rem);}
  #modelsStage .om-lead{margin-top:1rem;font-size:clamp(1rem,1.75vw,1.12rem);line-height:1.5;}
  #modelsStage .om-when{padding-top:0.9rem;}
  #modelsStage .om-when li{font-size:0.88rem;line-height:1.55;}
  #modelsStage .om-when li + li{margin-top:0.48rem;}
  #modelsStage .om-fee{margin-top:0.75rem;font-size:0.85rem;}
}

/* 5.9 — with the button on its own line the block is taller, so the eyebrow
   sat close under the nav while ~100px went unused at the bottom. Weight the
   pin's slack toward the top. */
@media (min-width:981px) and (min-height:781px){
  #finalStage.svc-stage .svc-pin > .svcs{
    padding-top:clamp(6rem,11vh,7.4rem);
    padding-bottom:clamp(2rem,4vh,2.8rem);
  }
}

/* 5.9 — at ~1280px the 900px measure pushes the headline to four lines, which
   with the stacked button drives the eyebrow under the nav. Widen the measure
   rather than shrink the type. */
@media (min-width:981px){
  #finalStage .fn-inner{max-width:1080px;}
}

/* 5.9 on short screens — same top-weighting as above, plus a little off the
   vertical rhythm, so the eyebrow clears the nav at 720px tall. */
@media (min-width:981px) and (max-height:780px){
  #finalStage.svc-stage .svc-pin > .svcs{
    padding-top:clamp(6.2rem,13vh,7rem);
    padding-bottom:clamp(1.1rem,2.4vh,1.6rem);
  }
  #finalStage .fn-support{margin-top:clamp(1rem,2.2vh,1.4rem);}
  #finalStage .fn-offer{margin-top:clamp(1rem,2.2vh,1.4rem);}
  #finalStage .fn-question{margin-top:clamp(1.2rem,2.6vh,1.7rem);}
}

/* ============================================================
   NAV — mobile menu panel
   .nav-links are display:none below 980px and the toggle button had no
   behaviour, so the site could not be navigated on a phone. The links now
   drop down from the bar when the button is pressed.
   ============================================================ */
@media (max-width:980px){
  .nav-links{
    display:flex;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    margin:0;padding:0.35rem clamp(1.25rem,4vw,2.75rem) 0.9rem;
    background:var(--navy);
    border-top:1px solid rgba(255,255,255,0.10);
    box-shadow:0 22px 44px -24px rgba(0,0,0,0.85);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav.nav-theme-light .nav-links{
    background:#FFFFFF;
    border-top-color:rgba(16,29,45,0.12);
    box-shadow:0 22px 44px -26px rgba(16,29,45,0.35);
  }
  .nav.is-menu-open .nav-links{opacity:1;visibility:visible;transform:none;}
  .nav-links li{width:100%;}
  .nav-links a{
    display:block;width:100%;
    padding:0.95rem 0;font-size:1rem;opacity:1;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .nav.nav-theme-light .nav-links a{border-bottom-color:rgba(16,29,45,0.10);}
  .nav-links li:last-child a{border-bottom:0;}
  .nav-menu-toggle{cursor:pointer;}
}

/* ============================================================
   TEAM PROFILES — portraits as a real card deck
   The two inactive members sat at asymmetric offsets with no relationship
   to anything, so they read as stray images beside the big one. They now
   stack behind the active portrait as an evenly stepped, tilted fan, and a
   scrim melts the pale studio backdrop into the near-black section instead
   of ending in a hard grey rectangle.
   ============================================================ */
#ab-people .tp-fig{
  width:clamp(270px,23vw,380px);
  height:clamp(330px,38vh,470px);
  border-radius:12px;
  transform-origin:50% 88%;          /* pivot near the base, like held cards */
  transition:transform .62s var(--ease), opacity .62s var(--ease),
             filter .62s var(--ease), box-shadow .62s var(--ease);
}
/* the fade + a hairline edge so each card reads as a printed photograph */
#ab-people .tp-fig::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(to top,
      #1C2436 0%, rgba(28,36,54,0.66) 13%, rgba(28,36,54,0) 46%),
    linear-gradient(to right,
      rgba(28,36,54,0.50) 0%, rgba(28,36,54,0) 20%,
      rgba(28,36,54,0) 80%, rgba(28,36,54,0.50) 100%);
  box-shadow:inset 0 0 0 1px rgba(245,241,232,0.11);
}
#ab-people .tp-fig.is-active{
  width:clamp(270px,23vw,380px);
  height:clamp(330px,38vh,470px);
  transform:translate(-50%,-50%) rotate(0deg) scale(1);
  opacity:1;filter:grayscale(0);z-index:3;
  box-shadow:0 44px 84px -30px rgba(0,0,0,0.95);
}
#ab-people .tp-fig.is-above{
  width:clamp(270px,23vw,380px);
  height:clamp(330px,38vh,470px);
  transform:translate(calc(-50% - 27%),-50%) rotate(-7deg) scale(0.88);
  opacity:0.52;filter:grayscale(0.8) brightness(0.72);z-index:2;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.9);
}
#ab-people .tp-fig.is-below{
  width:clamp(270px,23vw,380px);
  height:clamp(330px,38vh,470px);
  transform:translate(calc(-50% + 27%),-50%) rotate(7deg) scale(0.78);
  opacity:0.42;filter:grayscale(0.85) brightness(0.68);z-index:1;
  box-shadow:0 26px 52px -30px rgba(0,0,0,0.9);
}
#ab-people .tp-fig.is-above:hover,
#ab-people .tp-fig.is-below:hover{
  opacity:0.82;filter:grayscale(0.2) brightness(0.92);
}

@media (max-width:980px){
  /* narrower column: tuck the fan in so it cannot reach the section edge */
  #ab-people .tp-fig.is-above{transform:translate(calc(-50% - 21%),-50%) rotate(-6deg) scale(0.86);}
  #ab-people .tp-fig.is-below{transform:translate(calc(-50% + 21%),-50%) rotate(6deg) scale(0.76);}
}

/* ============================================================
   FLOW LATTICE — ambient workflow field on the navy sections
   Canvas sits behind the content. It is inserted as the section's first
   child, so any decoration that already lives there keeps painting above it.
   Only .wrap is given a stacking position — blanket-positioning the children
   would break the absolutely placed pieces (the Team Profiles wordmark, for
   one).
   ============================================================ */
.lattice{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.has-lattice{position:relative;}
.has-lattice > .wrap{position:relative;z-index:1;}

/* ------------------------------------------------------------
   Lattice legibility scrim
   The mesh was running straight through the copy. A soft pool of the
   section's own navy sits behind the content — because it is the same
   colour as the section it does not darken anything, it simply hides the
   lattice where the text is. It feathers to nothing well before the
   section edges, so the field still reads around the outside.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Contact — "what the discussion covers" runs on film
   Replaces the navy + lattice on this one section. The scrim is what keeps
   the copy readable: a dark navy wash plus a stronger gradient up from the
   bottom, so the footage reads as atmosphere rather than competing.
   ------------------------------------------------------------ */
.ct-covers-film{position:relative;overflow:hidden;isolation:isolate;}
.ct-covers-media{position:absolute;inset:0;z-index:0;pointer-events:none;}
.ct-covers-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  display:block;
  filter:brightness(0.52) saturate(0.85);   /* dim the footage before the wash */
}
.ct-covers-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(28,36,54,0.95) 0%, rgba(28,36,54,0.87) 42%, rgba(28,36,54,0.96) 100%),
    radial-gradient(80% 74% at 42% 50%, rgba(28,36,54,0.72) 0%, rgba(28,36,54,0.10) 78%);
}
.ct-covers-film > .wrap{position:relative;z-index:1;}

@media (prefers-reduced-motion: reduce){
  .ct-covers-video{display:none;}      /* the scrim alone keeps the section on-brand */
}

/* ------------------------------------------------------------
   Services — foot rows share the column grid of the block above them
   The lists sat on one grid and the notes beneath them on another, so
   "Why it matters" and "Book a discussion" started at different x than the
   content they belong to. Matching the template AND the gap is what makes
   the edges line up — a matching template alone still shifts if the gutter
   differs.
   ------------------------------------------------------------ */
@media (min-width:981px){
  /* .pr-foot -> .pr-split : "Why it matters" lines up with "What MBA examines" */
  .pr-foot{
    grid-template-columns:minmax(0,320px) minmax(0,1fr);
    gap:clamp(1.25rem,2.6vw,2rem);
  }
  /* .dm-foot -> .dm-body : the CTA lines up with the phase detail.
     A later rule widens .dm-body's gap to clamp(2.5rem,6vw,5rem), so both
     are set here from one value — matching the template but not the gutter
     still left the columns 10px apart. */
  .dm-body,
  .dm-foot{gap:clamp(2.5rem,6vw,5rem);}
  .dm-foot{grid-template-columns:minmax(0,0.62fr) minmax(0,1fr);}
}
/* ------------------------------------------------------------
   Homepage hero buttons — arrows removed
   The gap existed to separate the label from its arrow; with the arrow gone
   it left the text sitting off-centre inside the pill. Padding is evened up
   so each label is optically centred.
   ------------------------------------------------------------ */
.hero-actions .hero-cta{
  gap:0;
  justify-content:center;
  padding-inline:clamp(1.6rem,3vw,2.3rem);
  min-width:clamp(190px,17vw,220px);
}

/* ------------------------------------------------------------
   Footer — wider measure and a step up in type
   It was sitting on the same 1200px column as the page while having far
   more horizontal room to use, which left the columns bunched in the middle.
   ------------------------------------------------------------ */
.ftr .wrap{
  max-width:1560px;
  padding-inline:clamp(2rem,5.5vw,4.5rem);
}
.ftr-top{gap:clamp(2rem,4.5vw,4rem);}
.ftr-tag{font-size:0.74rem;}
.ftr-line a,.ftr-strong{font-size:clamp(1.08rem,2.1vw,1.45rem);}
.ftr-col a{font-size:1.04rem;}
.ftr-social{font-size:1.04rem;}
.ftr-sub p{font-size:1.02rem;line-height:1.68;}
.ftr-bar .wrap,
.ftr .footer-legal{max-width:1560px;padding-inline:clamp(2rem,5.5vw,4.5rem);}
.ftr-bar-inner span,.ftr-bar-inner a{font-size:0.94rem;}
.ftr .footer-legal{font-size:0.86rem;line-height:1.62;}

@media (max-width:980px){
  .ftr .wrap,.ftr-bar .wrap,.ftr .footer-legal{padding-inline:clamp(1.5rem,5vw,2.5rem);}
}

/* ============================================================
   MOBILE FIXES
   ============================================================ */
@media (max-width:980px){

  /* --- "What MBA redesigns" cards: icon centred under the copy --- */
  .redo-card > svg,
  .redo-card .redo-vis{
    display:block;
    margin-left:auto;margin-right:auto;
    margin-top:clamp(1rem,3vw,1.5rem);
  }

  /* --- the evidence dot field was painting over the copy ---------------
     On a phone the pin releases and the section grows very tall, so the
     -10% inset reached well past it and the drifting layers ran across the
     text. Keep the field inside its own section and put the copy on a pool
     of the section colour, the same way the lattice sections do. */
  .ev-field{inset:0;opacity:0.34;}
  .ev-field-2{opacity:0.22;}
  .ev-field-3{opacity:0.16;}
  /* The dot field this scrim existed to hide has been removed, and the
     scrim itself was bound to the content column in a near-black that no
     longer matches the section - the same fault as the lattice scrim. */
  .ev-inner{position:relative;}

  /* --- footer: centre the columns --------------------------------- */
  .ftr-top{text-align:center;}
  .ftr-contact,
  .ftr-col,
  .ftr-line{align-items:center;}
  .ftr-col{align-items:center;}
  .ftr-social{justify-content:center;}
  .ftr-sub{text-align:center;}
  .ftr-sub p{margin-inline:auto;max-width:34ch;}
  .ftr-bar .wrap{flex-direction:column;gap:0.8rem;text-align:center;}
}

/* ------------------------------------------------------------
   In-page anchors clear the fixed nav
   "See the model" jumped to the top of the section, which put the eyebrow
   and headline underneath the nav bar.
   ------------------------------------------------------------ */
#modelStage,#redoStage,#evidenceStage,#svc-offer,#ab-people,#contact,#dmaicStage{
  scroll-margin-top:clamp(84px,13vh,116px);
}

@media (max-width:980px){
  /* "Together, these capabilities…" was a narrow centred column with a ragged
     edge. Wider measure and a smaller size so it sits better. */
  .wm-close{
    max-width:none;
    font-size:clamp(0.98rem,3.9vw,1.1rem);
    line-height:1.5;
    letter-spacing:-0.004em;
  }
}

@media (max-width:980px){
  /* --- "Where capacity is being lost": all three cards must fit the pin ---
     The layer is held at 100vh with overflow:hidden, and the content ran
     280px past it, so the third card was sliced. Trimmed to fit rather than
     letting the next section arrive over an unread card. */
  .cross-pin > .probs .probs-head{margin-bottom:0;}
  .cross-pin > .probs .probs-head h2{font-size:clamp(1.32rem,5.2vw,1.9rem);line-height:1.15;}
  /* The sub-line ("These three problems commonly recur across...") is the one
     genuinely redundant element in the pin — the three numbered cards say it
     directly underneath. Dropping it on a phone is what lets all three cards
     AND the closing synthesis land inside the screen on a 360x780 handset. */
  .cross-pin > .probs .probs-head p{display:none;}
  .cross-pin > .probs .probs-grid{margin-top:0.75rem;gap:0.56rem;}
  .cross-pin > .probs .prob{padding:0.65rem 0.95rem;}
  /* the three little illustrations cost ~150px here, which is the
     difference between the third card being readable and being sliced.
     The copy matters more than the decoration on a phone. */
  /* the illustration is hidden, but as an <svg> it kept its block margins —
     31px of dead space per card, which is most of what was pushing the
     closing line out of the pin. */
  .cross-pin > .probs .prob-vis,
  .cross-pin > .probs .prob > svg{display:none;}
  .cross-pin > .probs .prob h3{min-height:0;font-size:0.89rem;line-height:1.28;margin-bottom:0.3rem;}
  .cross-pin > .probs .prob p{font-size:0.78rem;line-height:1.38;}
  /* the fixed nav is 112px here; the heading has to start clear of it */
  .cross-pin > .probs{padding-block:88px clamp(0.4rem,1.2vh,0.8rem);}
  .cross-pin > .probs .eyebrow{margin-bottom:0.6rem;}
  .cross-pin .probs-close{padding:0.65rem 0.95rem;}
  .cross-pin > .probs .probs-close{margin-top:0.45rem;font-size:0.81rem;line-height:1.38;}

  /* --- footer: wordmark and the service ticker centre too --- */
  .ftr-mark{text-align:center;}
  .ftr-wordmark{display:block;text-align:center;}
  .ftr-ticker{justify-content:center;}
  .ftr-ticker-track{align-items:center;text-align:center;}
  .ftr-ticker-track span{text-align:center;}
}

/* =====================================================================
   Round fixes — models copy, final CTA scale, team ghost, about hero
   ===================================================================== */

/* The models panels dim to 42% so the hovered card reads as chosen. There is
   no hover on a phone, so MBA-run and Split were permanently greyed while
   Client-run sat at full strength — the copy looked like two different
   colours. Without a pointer there is nothing to choose, so all three read
   at full strength. */
@media (hover:none), (max-width:980px){
  #modelsStage .om-when{opacity:1;}
}

/* Get started: the headline's floor is 2.1rem, which is a lot of type for a
   phone — five lines of it before the supporting copy even starts. */
@media (max-width:980px){
  .svcs-final h2{font-size:clamp(1.55rem,6.2vw,2.1rem);line-height:1.18;}
  .svcs-final .fn-support{margin-top:1rem;font-size:clamp(0.92rem,3.6vw,1.02rem);line-height:1.6;}
  .svcs-final .fn-offer{margin-top:1.1rem;padding:0.6rem 1.1rem;font-size:0.72rem;}
  .svcs-final .fn-cta{margin-top:1.2rem;padding:0.95rem 2rem;font-size:0.95rem;}
  .svcs-final .fn-question{margin-top:1.2rem;font-size:clamp(0.95rem,3.8vw,1.1rem);}
}

/* Team profiles: the pagination is left-aligned on mobile and the ghost
   wordmark is anchored bottom-left, so the numbers sat inside the letters.
   Drop the ghost below the numbers and shrink it so the two never share a
   band. */
/* About hero: two buttons, one row, with the ghost treatment from the home
   hero on the secondary. */
.svc-cta-ghost{
  background:transparent;color:rgba(245,241,232,0.88);
  border:1px solid rgba(245,241,232,0.26);
  box-shadow:none;
}
.svc-cta-ghost:hover{
  background:rgba(245,241,232,0.07);color:var(--bone);
  border-color:rgba(245,241,232,0.45);box-shadow:none;
}
@media (max-width:560px){
  .ab-hero .svc-actions{flex-direction:row;align-items:center;gap:0.6rem;}
  .ab-hero .svc-actions .svc-cta{
    width:auto;flex:1 1 0;min-width:0;
    padding:0.9rem 0.6rem;font-size:0.88rem;white-space:nowrap;
  }
}

/* ---------------------------------------------------------------------
   Pins on mobile: only where a scrub was actually asked for.
   Keeping every .svc-stage pinned put 14 sections into an 812px box.
   Three of them (DMAIC, the build beats, the production deck) genuinely
   need the scrub — the rest just got their headings clipped off the top
   and their pagination pushed off the bottom, which is what broke the
   team-profile numbers and the Get started block. Those flow again.
   --------------------------------------------------------------------- */
@media (max-width:980px){
  .svc-stage:not(#dmaicStage){height:auto;}
  .svc-stage:not(#dmaicStage) > .svc-pin{
    position:static;height:auto;overflow:visible;display:block;
  }
  .svc-stage:not(#dmaicStage) .svcs{
    padding:var(--section-pad) 0;
  }
  .svc-stage:not(#dmaicStage)
    :is(.svcs-phases,.rn-grid,.rn-notes,.sp-pair,.gv-grid,.om-grid){
    grid-template-columns:1fr;
  }
}

/* The deck's desktop runway is 820vh — eight screens of thumb-scrolling for
   four cards on a phone. The scrub maps progress to card index, so a shorter
   runway just paces it sensibly. */
/* =====================================================================
   Services on mobile — hero secondary action, stacked grids, pin drift
   ===================================================================== */
@media (max-width:980px){

  /* The secondary hero action was a bare text link with an arrow. On a phone
     it reads as the ghost button from the home hero instead. Desktop keeps
     the text link. */
  .svc-hero .svc-actions .svc-link{
    justify-content:center;
    background:transparent;color:rgba(245,241,232,0.88);
    border:1px solid rgba(245,241,232,0.26);border-radius:8px;
    padding:1.02rem 2.1rem;font-size:0.95rem;font-weight:600;
  }
  .svc-hero .svc-actions .svc-link svg{display:none;}
  .svc-hero .svc-actions .svc-link:hover{
    background:rgba(245,241,232,0.07);color:var(--bone);
    border-color:rgba(245,241,232,0.45);
  }

  /* These three stages stay pinned for their scrubs,so they were excluded
     from the mobile grid reset — and kept their desktop two-column grids.
     The beats column collapsed to 0px wide (the beat text showed as a
     one-character sliver off the right edge) and the DMAIC foot became two
     151px columns,which is what made the Book a discussion block look
     jumbled. All of them stack. */
  #dmaicStage .dm-body,#dmaicStage .dm-foot{grid-template-columns:minmax(0,1fr);}
  #dmaicStage .dm-body{gap:clamp(1.1rem,3vh,1.6rem);}
  #dmaicStage .dm-foot{gap:clamp(1.2rem,3vh,1.7rem);}
  #dmaicStage .dm-cta{width:100%;}
  #dmaicStage .dm-cta .svc-cta{width:100%;}

  /* Content in these pins is taller than the screen,so centring it cropped
     the heading through the middle at the top and the CTA note at the
     bottom. Anchor to the top,clear of the fixed nav; pinDrift() then walks
     the content up as the scrub advances so the foot arrives at the end. */
  #dmaicStage .svc-pin > .svcs{justify-content:flex-start;}
  #dmaicStage .svc-pin > .svcs > .wrap:not(.wrap-wide){
    padding-top:116px;padding-bottom:28px;
    will-change:transform;
  }
}

/* The DMAIC rail is a 232px vertical list on desktop, which on a phone pushed
   the panel it controls below the fold — you'd be scrubbing D to M without
   being able to see what changed. Five chips across the top instead: ~48px,
   full-width panel underneath, and the connecting line drops away since the
   lit chip already carries the progress. */
@media (max-width:980px){
  #dmaicStage .dm-rail{
    display:flex;flex-direction:row;align-items:stretch;
    padding-left:0;gap:0.3rem;
  }
  #dmaicStage .dm-rail-line{display:none;}
  #dmaicStage .dm-step{
    flex:1 1 0;min-width:0;width:auto;
    flex-direction:column;align-items:center;justify-content:flex-start;gap:0.34rem;
    padding:0.5rem 0.1rem 0.55rem;
    border:1px solid rgba(255,255,255,0.12);border-radius:8px;
    text-align:center;
    transition:border-color .35s var(--ease), background .35s var(--ease);
  }
  #dmaicStage .dm-step span{display:none;}
  #dmaicStage .dm-step::before{
    position:static;left:auto;top:auto;
    width:7px;height:7px;flex:0 0 auto;
  }
  #dmaicStage .dm-step em{
    font-size:0.63rem;font-weight:600;letter-spacing:0.01em;line-height:1.1;
  }
  #dmaicStage .dm-step.is-on{
    border-color:rgba(76,120,168,0.55);background:rgba(76,120,168,0.10);
  }
  #dmaicStage .dm-panels{min-height:0;}
  #dmaicStage .dm-offer{font-size:0.7rem;line-height:1.9;}
}

/* =====================================================================
   Pinned sections vs the fixed nav (desktop)
   ===================================================================== */
/* The nav is a 112px opaque bar sitting over the top of every pin, but the
   pins centred their content in the full 100vh as though it were not there.
   Any section taller than roughly 675px therefore put its eyebrow and the top
   of its headline behind the nav — which is what hid "The capability
   combination" and "One connected operating model". Reserve the nav's height
   so that cannot happen at any screen size. */
@media (min-width:981px){
  #capStage .svc-pin > .svcs,#modelStage2 .svc-pin > .svcs,#peopleStage .svc-pin > .svcs,#stdStage .svc-pin > .svcs,#abFinalStage .svc-pin > .svcs{
    padding-top:124px;
    padding-bottom:clamp(2rem,4.5vh,3.2rem);
  }
}

/* pinDrift() sets this only on sections whose content is taller than the pin.
   Centring such a section splits the overflow and crops both ends; top
   anchoring lets the drift reveal the rest. Sections that fit never get the
   class and keep their centring. */
.svcs.is-drifting{justify-content:flex-start;}
.svcs.is-drifting > .wrap{will-change:transform;}

/* ---------------------------------------------------------------------
   Services pinned sections vs the fixed nav (desktop)
   Same defect as About: the pins centred content in the full 100vh while
   the nav is a 112px opaque bar across the top of it, so five of the eight
   sections started their content behind it at 1440x900. These selectors
   carry the same weight as the existing per-stage height rules and come
   later, so they win where those set a smaller top padding.
   --------------------------------------------------------------------- */
@media (min-width:981px){
  #redesignStage.svc-stage .svc-pin > .svcs,#dmaicStage.svc-stage .svc-pin > .svcs,#runStage.svc-stage .svc-pin > .svcs,#supportStage.svc-stage .svc-pin > .svcs,#govStage.svc-stage .svc-pin > .svcs,#modelsStage.svc-stage .svc-pin > .svcs,#finalStage.svc-stage .svc-pin > .svcs{
    padding-top:124px;
    padding-bottom:clamp(2rem,4.5vh,3.2rem);
  }
}

/* =====================================================================
   Foundation — September 2026 content document, Part 3
   ===================================================================== */

/* ---- Cormorant Garamond is a serif with a much smaller x-height than
   Inter, so it renders visually smaller and lighter at the same pixel
   size. Headings carry 600 weight and slightly looser tracking to hold
   their authority against the body text. -------------------------- */
h1, h2, h3, h4,
.hero h1, .svc-hero h1, .in-hero h1, .ct-main h1{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.012em;
}
h1, h2{ line-height:1.1; }
h3{ line-height:1.25; }

/* Eyebrows,labels,buttons,nav and every UI string stay on Inter —
   the serif is for headings only. */
.eyebrow,.svc-eyebrow,.nav a,.nav-links a,button,.hero-cta,.svc-cta,.trial-cta,.redo-cta,.fn-cta,input,textarea,select,label,.svcs-note-label,.tp-num,.dm-step{
  font-family:var(--font-body);
}

/* ---- The signal blue. Two placements only: the emphasised words inside
   a headline, and the primary call to action. Everything else that used
   to be bright blue is now the system accent. --------------------- */
.pf-say em,
.probs-close em, .eng-close em,
.model-head h2 em, .wm-head h2 em, .wm-close em, .trial-head h2 em,
.svc-hero h1 em,
.svcs-light .svcs-head h2 em, .svcs-dark .svcs-head h2 em,
.svcs-close em, .pr-sec .svcs-head h2 em, .svcs-final h2 em,
.ab-vision blockquote em, .ab-vision-line em,
.in-hero h1 em, .in-cta h2 em,
.ct-main h1 em,
.ct-band-head h2 em, .ct-trial h2 em, .ct-covers h2 em{
  color:var(--signal);
}
.hero h1 em{ color:var(--signal); font-style:normal; }

.hero-cta, .svc-cta, .trial-cta{
  background:var(--btn);
}
.hero-cta:hover, .svc-cta:hover, .trial-cta:hover{
  background:var(--btn-hover);
}

/* On dark bands the system accent is too dark to read; the document
   supplies a lighter calibration for exactly this. */
.svcs-dark a:not([class]),.ftr a:not([class]){ color:var(--accent-dark-bg); }

/* =====================================================================
   HOME s.3 — What the firm already knows
   A light context band between the dark hero run and the dark mechanism
   band that follows. Numbered stage rows, the same pattern the document
   names as reusable, so this does not become another one-off treatment.
   ===================================================================== */
.knows{
  background:var(--paper);
  padding:var(--section-pad) 0;
  position:relative;
}
.knows-head{max-width:62ch;}
.knows-head h2{
  margin-top:0.7rem;
  font-size:var(--t-h2);
  color:var(--ink);
}
.knows-head h2 em{font-style:normal;color:var(--signal);}
.knows-head > p{
  margin-top:1rem;
  font-size:var(--t-lead);
  line-height:1.7;
  color:var(--ink-2);
  max-width:58ch;
}
.knows-steps{
  list-style:none;margin:clamp(2.2rem,5vh,3.4rem) 0 0;padding:0;
  display:grid;gap:0;
}
.knows-step{
  display:grid;
  grid-template-columns:clamp(56px,7vw,88px) minmax(0,1fr);
  gap:clamp(1rem,2.4vw,2rem);
  align-items:start;
  padding:clamp(1.4rem,3vh,2.1rem) 0;
  border-top:1px solid var(--line);
}
.knows-step:last-child{border-bottom:1px solid var(--line);}
.knows-n{
  font-size:var(--t-stat);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:0.04em;
  color:var(--accent);
  line-height:1.2;
}
.knows-body h3{
  font-size:var(--t-h3);
  color:var(--ink);
  margin:0 0 0.5rem;
}
.knows-body p{
  font-size:var(--t-body);
  line-height:1.7;
  color:var(--ink-2);
  margin:0;
  max-width:64ch;
}
@media (max-width:700px){
  .knows-step{grid-template-columns:1fr;gap:0.5rem;}
  .knows-n{font-size:0.82rem;letter-spacing:0.12em;}
}

/* ---- HOME s.2 — the cost line each problem card now carries ---- */
.prob-cost{
  margin-top:0.9rem;
  padding-top:0.8rem;
  border-top:1px solid rgba(143,178,217,0.22);
  font-size:0.86rem;
  line-height:1.5;
  color:var(--accent-dark-bg);
}

/* ---- HOME hero — the eyebrow is now the company descriptor, which is a
   full line rather than a pill, so it sets as a rule-led label. ---- */
.hero-eyebrow{
  display:block;
  max-width:52ch;
  margin:0 auto 1.1rem;
  font-size:clamp(0.66rem,1.1vw,0.76rem);
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1.7;
  color:var(--accent-dark-bg);
}

/* ---- HOME s.4 — the three delivery models sit inside step 3 as supporting
   detail, per the document's placement note. There is no separate
   delivery-choice section on Home; Services carries the fuller treatment. */
.md-models{
  list-style:none;margin:0.9rem 0 0;padding:0.85rem 0 0;
  border-top:1px solid var(--line);
  display:grid;gap:0.5rem;
}
.md-models li{
  font-size:0.85rem;line-height:1.55;color:var(--ink-2);
}
.md-models b{
  display:block;font-weight:600;color:var(--ink);
  font-size:0.8rem;letter-spacing:0.02em;
}
.svcs-dark .md-models li,.model[data-nav-theme="dark"] .md-models li{color:var(--on-dark-2);}
.svcs-dark .md-models b,.model[data-nav-theme="dark"] .md-models b{color:var(--on-dark-1);}

/* ---- HOME s.6 — the document adds a lede under the headline explaining why
   the three capabilities only work together. ---- */
.wm-lede{
  margin:1.1rem auto 0;
  max-width:66ch;
  font-size:var(--t-lead);
  line-height:1.72;
  color:var(--on-dark-2);
  text-align:center;
}

/* ---- HOME s.7 lede ---- */
.ev-lede{
  margin:1rem auto 0;max-width:64ch;
  font-size:var(--t-lead);line-height:1.72;color:var(--on-dark-2);
}

/* =====================================================================
   HOME s.8 — Final CTA
   The two-week trial detail moved to Contact, so this section is now a
   single short invitation rather than a scope table.
   ===================================================================== */
.fin{
  background:var(--midnight);
  padding:clamp(5rem,11vh,8rem) 0;
  text-align:center;
  position:relative;
}
.fin-inner{max-width:720px;}
.fin .eyebrow{justify-content:center;}
.fin h2{
  margin-top:0.8rem;
  font-size:var(--t-h2);
  color:var(--on-dark-1);
}
.fin h2 em{font-style:normal;color:var(--signal);}
.fin-lede{
  margin:1.1rem auto 0;max-width:52ch;
  font-size:var(--t-lead);line-height:1.7;color:var(--on-dark-2);
}
.fin-cta{margin-top:clamp(1.8rem,3.6vh,2.6rem);}

/* =====================================================================
   HOME s.4 — How MBA works
   Rebuilt as a branch diagram: three steps, then step 3 opens into the
   three delivery models. A dark band, because the document's rule is that
   dark marks the model or mechanism, and this section is the mechanism.
   The step copy is visible in the card rather than hidden behind a hover
   panel - on touch there is no hover, and the document requires detail to
   be readable without interaction.
   ===================================================================== */
.mw{
  background:var(--midnight);
  color:var(--on-dark-2);
}
.mw-head{max-width:70ch;margin-inline:auto;text-align:center;}
.mw .eyebrow{justify-content:center;}
.mw-head h2{
  margin-top:0.75rem;
  font-size:var(--t-h2);
  color:var(--on-dark-1);
}
.mw-head h2 em{font-style:normal;color:var(--signal);}
.mw-lede{
  margin:1rem auto 0;max-width:62ch;
  font-size:var(--t-lead);line-height:1.7;color:var(--on-dark-2);
}

/* ---- the three steps ---- */
.mw-steps{
  list-style:none;margin:clamp(2rem,4.4vh,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.mw-step{
  position:relative;
  padding:clamp(1.2rem,2.2vw,1.7rem);
  border:1px solid rgba(143,178,217,0.20);
  background:rgba(255,255,255,0.022);
}
.mw-n{
  display:block;
  font-size:0.72rem;font-weight:600;letter-spacing:0.16em;
  font-variant-numeric:tabular-nums;
  color:var(--accent-dark-bg);
}
.mw-icon{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-top:0.9rem;
  border:1px solid rgba(143,178,217,0.28);border-radius:50%;
  color:var(--accent-dark-bg);
}
.mw-icon svg{width:19px;height:19px;}
.mw-step h3{
  margin:1.05rem 0 0.55rem;
  font-size:var(--t-h3);
  color:var(--on-dark-1);
}
.mw-step p{
  margin:0;
  font-size:var(--t-body);line-height:1.7;color:var(--on-dark-2);
}

/* ---- the branch: wires drawn by scroll progress ---- */
.mw-branch{
  height:clamp(52px,7vh,96px);
  margin-top:-1px;
}
.mw-wires{display:block;width:100%;height:100%;overflow:visible;}
.mw-wire{
  fill:none;
  stroke:var(--accent-dark-bg);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  opacity:0.55;
  stroke-dasharray:1;
  stroke-dashoffset:1;              /* JS drives this from 1 to 0 */
}

/* ---- the three delivery models ---- */
.mw-models{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid rgba(143,178,217,0.20);
}
.mw-model{
  padding:clamp(1rem,1.9vw,1.4rem);
  border-left:1px solid rgba(143,178,217,0.14);
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:calc(var(--n) * 110ms);
}
.mw-model:first-child{border-left:0;}
.mw.is-branched .mw-model{opacity:1;transform:none;}
.mw-model-mark{
  display:inline-flex;color:var(--accent-dark-bg);
  vertical-align:-4px;margin-right:0.5rem;
}
.mw-model-mark svg{width:17px;height:17px;}
.mw-model h4{
  display:inline;
  font-family:var(--font-body);
  font-size:0.94rem;font-weight:600;letter-spacing:0.01em;
  color:var(--on-dark-1);
}
.mw-model p{
  margin:0.6rem 0 0;
  font-size:0.86rem;line-height:1.62;color:var(--on-dark-3);
}

/* ---- the closing distinction ---- */
.mw-note{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.4rem);
  margin-top:clamp(1.8rem,4vh,2.8rem);
  padding-top:clamp(1.2rem,2.6vh,1.8rem);
  border-top:1px solid rgba(143,178,217,0.20);
}
.mw-note-label{
  font-size:0.7rem;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--accent-dark-bg);
  padding-top:0.2rem;
}
.mw-note p{
  margin:0;font-size:var(--t-lead);line-height:1.7;color:var(--on-dark-2);
}

@media (max-width:900px){
  .mw-steps{grid-template-columns:1fr;gap:0.8rem;}
  .mw-branch{display:none;}
  .mw-models{grid-template-columns:1fr;margin-top:0.8rem;}
  .mw-model{border-left:0;border-top:1px solid rgba(143,178,217,0.14);}
  .mw-model:first-child{border-top:0;}
  .mw-note{grid-template-columns:1fr;gap:0.6rem;}
  /* no wires to draw, so the models should not wait on them */
  .mw .mw-model{opacity:1;transform:none;}
}
@media (prefers-reduced-motion: reduce){
  .mw-wire{stroke-dashoffset:0 !important;}
  .mw-model{opacity:1 !important;transform:none !important;transition:none;}
}

/* =====================================================================
   HOME s.7 — What the redesign returns
   Three outcomes, clearly separated. Outcome 1 is static and elevated
   (the document calls the capacity figure the page's single most
   important number, and its qualification must sit in the same block).
   Outcome 2 keeps the scrubbing rail across the three workflows.
   Outcome 3 closes the section. Background is plain midnight - the dot
   field appeared nowhere else on the site.
   ===================================================================== */
.ev-sec,.ev-pin > .ev-sec,.ev-stage .ev-sec{background:var(--midnight);}

.ev-out-tag{
  display:inline-block;
  font-size:0.68rem;font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--accent-dark-bg);
}
.ev-out-tag-2{
  display:block;
  margin:clamp(1.8rem,4vh,2.6rem) 0 clamp(0.8rem,2vh,1.2rem);
  padding-top:clamp(1.4rem,3vh,2rem);
  border-top:1px solid rgba(143,178,217,0.18);
}

/* ---- Outcome 1 — the elevated panel. The one place in the system where
   elevation is used, exactly as the document reserves it. ---- */
.ev-out1{
  margin-top:clamp(1.6rem,3.6vh,2.4rem);
  padding:clamp(1.3rem,2.6vw,2rem);
  border:1px solid rgba(143,178,217,0.26);
  background:rgba(255,255,255,0.035);
  box-shadow:0 24px 60px -28px rgba(0,0,0,0.6);
}
.ev-out1-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.6rem);
  align-items:start;
  margin-top:0.9rem;
}
.ev-out1-copy h3{
  margin:0 0 0.6rem;font-size:var(--t-h3);color:var(--on-dark-1);
}
.ev-out1-copy p{
  margin:0;font-size:var(--t-body);line-height:1.7;color:var(--on-dark-2);
}
.ev-out1-fig,.ev-out1-side{
  padding-left:clamp(1rem,2.4vw,2rem);
  border-left:1px solid rgba(143,178,217,0.20);
}
.ev-out1-qual{
  margin:0.9rem 0 0;
  font-size:0.82rem;line-height:1.6;color:var(--on-dark-3);
}

/* ---- Outcome 3 — the static close ---- */
.ev-out3{
  margin-top:clamp(1.8rem,4vh,2.6rem);
  padding-top:clamp(1.4rem,3vh,2rem);
  border-top:1px solid rgba(143,178,217,0.18);
}
.ev-out3 h3{
  margin:0.7rem 0 0.5rem;font-size:var(--t-h3);color:var(--on-dark-1);
}
.ev-out3 p{
  margin:0;font-size:var(--t-lead);line-height:1.7;color:var(--on-dark-2);
  max-width:60ch;
}
.ev-cases-link{
  display:inline-flex;align-items:center;gap:0.45rem;
  margin-top:1rem;
  font-size:0.9rem;font-weight:600;color:var(--accent-dark-bg);
}
.ev-cases-link::after{content:"\2192";transition:transform .25s var(--ease);}
.ev-cases-link:hover::after{transform:translateX(4px);}

@media (max-width:900px){
  .ev-out1-grid{grid-template-columns:1fr;gap:1.1rem;}
  .ev-out1-fig,.ev-out1-side{padding-left:0;border-left:0;padding-top:1rem;border-top:1px solid rgba(143,178,217,0.20);}
}

/* pinDrift top-anchors any overflowing pinned section, not only the .svcs
   ones on Services and Team - the home model and evidence bands need it too. */
.is-drifting{justify-content:flex-start !important;}
.is-drifting > .wrap{will-change:transform;}

/* the model band's own top padding has to clear the fixed nav once its
   content is top-anchored rather than centred */
.model-pin > .model.is-drifting{padding-top:clamp(124px,15vh,160px);}
.ev-pin.is-drifting{padding-top:clamp(124px,15vh,160px);align-items:flex-start;}

/* =====================================================================
   HOME hero — eyebrow width, type balance, and the two buttons
   ===================================================================== */

/* The descriptor was breaking to three short lines in a narrow column. It
   now runs to the same measure as the headline beneath it. */
.hero-eyebrow{
  max-width:min(100%, 60rem);
  font-size:clamp(0.68rem,1.05vw,0.8rem);
  letter-spacing:0.16em;
  line-height:1.85;
  margin-bottom:1.4rem;
  color:var(--accent-dark-bg);
}

/* The headline was a flat white block. The second half now carries the
   accent, so the line has a point of focus. */
.hero h1 em{
  font-style:normal;
  font-weight:600;
  color:var(--accent-dark-bg);
}

/* Beats 2 and 3 were markedly smaller than beat 1, so the sequence read as
   three different sizes rather than one voice. They now sit just under the
   headline rather than well below it. */
.hero-line{
  max-width:38ch;
  font-size:clamp(1.6rem,3.9vw,52px);
  line-height:1.28;
}
.hero-beat[data-beat="2"] .hero-line{max-width:34ch;}

/* "senior time:" is one unit — the colon was wrapping onto the next line
   on its own, which read as a typo. */
.hero-keep{white-space:nowrap;}

/* ---- the two calls to action ------------------------------------------
   A light fill and a transparent outline, which is the document's on-dark
   button pair. Both were rendering solid blue: the signal-blue rule added
   with the new palette came later in the sheet than .hero-cta-ghost and at
   equal weight, so it was overriding the ghost variant. Scoped now. ---- */
.hero-actions .hero-cta{
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--paper);
  box-shadow:0 14px 34px -16px rgba(0,0,0,0.7);
}
.hero-actions .hero-cta:hover{
  background:var(--river-mist);
  border-color:var(--river-mist);
  color:var(--ink);
}
.hero-actions .hero-cta-ghost{
  background:rgba(255,255,255,0.04);
  color:var(--on-dark-1);
  border:1px solid rgba(255,255,255,0.38);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:none;
}
.hero-actions .hero-cta-ghost:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.72);
  color:var(--on-dark-1);
}

@media (max-width:980px){
  .hero-eyebrow{font-size:0.63rem;letter-spacing:0.12em;line-height:1.7;margin-bottom:1rem;}
  .hero-line{font-size:clamp(1.25rem,5.4vw,1.9rem);}
}

/* The headline and the two statements that follow were 80px against 52px,
   which read as three different voices rather than one sequence. Closed to
   about ten pixels apart. */
.hero h1{font-size:clamp(2.1rem,5.4vw,68px);letter-spacing:-0.026em;line-height:1.08;}
.hero-line{font-size:clamp(1.65rem,4.3vw,58px);}
@media (max-width:980px){
  .hero h1{font-size:min(clamp(1.9rem,7.4vw,2.6rem), 8vh);}
  .hero-line{font-size:clamp(1.3rem,5.6vw,2rem);}
}

/* Why MBA sits on a light band, but its supporting copy was carrying
   --on-dark-2 (#D5D8DD), a text colour meant for dark sections. On white it
   was all but invisible. */
.wm-lede{color:var(--ink-2);}

/* The descriptor reads better as two measured lines than as one long run
   across the full width of the hero. */
.hero-eyebrow{
  max-width:min(100%, 34rem);
  line-height:1.9;
}
@media (max-width:980px){
  .hero-eyebrow{max-width:min(100%, 26rem);}
}

/* =====================================================================
   HOME s.6 — Why MBA, rebuilt
   The converging curves are gone. The three capabilities now stand
   directly on a single solid band carrying the closing statement, so the
   layout itself makes the argument the copy makes: the combination is the
   point. No connectors, no arrows, nothing decorative.
   ===================================================================== */
.wm-triad{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:clamp(2rem,4.4vh,3rem);
  border:1px solid var(--line);
  border-bottom:0;
  background:var(--paper);
}
.wm-cap{
  display:flex;flex-direction:column;
  padding:clamp(1.3rem,2.4vw,2rem);
  border-left:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.wm-cap:first-child{border-left:0;}
.wm-n{
  display:block;
  font-size:0.72rem;font-weight:600;letter-spacing:0.16em;
  font-variant-numeric:tabular-nums;
  color:var(--accent);
  margin-bottom:0.9rem;
}
.wm-cap h3{
  margin:1rem 0 0.6rem;
  font-size:var(--t-h3);
  color:var(--ink);
}
.wm-cap > p{
  margin:0;
  font-size:var(--t-body);line-height:1.7;color:var(--ink-2);
}
.wm-enables{
  margin-top:auto;
  padding-top:clamp(1rem,2.2vh,1.4rem);
}
.wm-enables p{
  margin:0.3rem 0 0;
  font-size:0.94rem;font-weight:600;line-height:1.5;color:var(--ink);
}

/* the foundation the three stand on */
.wm-base{
  background:var(--midnight);
  padding:clamp(1.5rem,3.4vw,2.4rem) clamp(1.3rem,3vw,2.6rem);
  text-align:center;
}
.wm-base p{
  margin:0 auto;max-width:68ch;
  font-size:var(--t-lead);
  line-height:1.65;
  color:var(--on-dark-1);
}
.wm-base em{font-style:normal;color:var(--accent-dark-bg);}

@media (max-width:900px){
  .wm-triad{grid-template-columns:1fr;}
  .wm-cap{border-left:0;border-top:1px solid var(--line);}
  .wm-cap:first-child{border-top:0;}
  .wm-enables{margin-top:1rem;}
}

/* ---- runways: less scrolling inside each pin ---- */
.model-stage{height:180vh;}
.redo-stage{height:210vh;}
.wm-stage{height:175vh;}
.ev-stage{height:360vh;}   /* room for the Outcome 2 hold */

/* =====================================================================
   HOME s.3 — What changes for your firm, now pinned
   It was the only content section on Home still flowing, which is why it
   slid past with no hold while everything around it came to rest. Same
   treatment as its neighbours: it holds on screen and the three steps
   light up in sequence as the section is scrubbed.
   ===================================================================== */
.knows-stage{position:relative;height:200vh;}
.knows-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;
}
.knows-pin > .knows{width:100%;padding:clamp(124px,15vh,160px) 0 clamp(2rem,5vh,3.4rem);}

/* a step is dim until the scrub reaches it */
.knows-step{
  opacity:0.34;
  transition:opacity .5s var(--ease), border-color .5s var(--ease);
}
.knows-step.is-on{opacity:1;}
.knows-step.is-on .knows-n{color:var(--signal);}
.knows-step .knows-n{transition:color .5s var(--ease);}

@media (max-width:980px), (max-height:520px){
  .knows-stage{height:auto;}
  .knows-pin{position:static;height:auto;overflow:visible;display:block;}
  .knows-pin > .knows{padding:var(--section-pad) 0;}
  .knows-step{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .knows-step{opacity:1;transition:none;}
}

/* =====================================================================
   SERVICES — new sections from the September 2026 document
   ===================================================================== */

/* s.2 What MBA does — the same three categories as Home. The document is
   explicit that this repetition is deliberate: repetition across pages aids
   comprehension, repetition within a page does not. */
.sd-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin-top:clamp(2rem,4.4vh,3rem);
  border:1px solid var(--line);
}
.sd-card{
  padding:clamp(1.3rem,2.4vw,2rem);
  border-left:1px solid var(--line);
}
.sd-card:first-child{border-left:0;}
.sd-n{
  display:block;font-size:0.72rem;font-weight:600;letter-spacing:0.16em;
  font-variant-numeric:tabular-nums;color:var(--accent);
}
.sd-card h3{margin:1rem 0 0.6rem;font-size:var(--t-h3);color:var(--ink);}
.sd-card p{margin:0;font-size:var(--t-body);line-height:1.7;color:var(--ink-2);}

/* s.3 the three steps that precede the delivery models */
.om-lede{
  margin:1rem auto 0;max-width:66ch;
  font-size:var(--t-lead);line-height:1.7;color:var(--ink-2);
}
.om-steps{
  list-style:none;margin:clamp(1.4rem,3vh,2.1rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.8rem);
}
.om-steps li{
  padding-top:0.9rem;border-top:1px solid var(--line);
  font-size:0.88rem;line-height:1.62;color:var(--ink-2);
}
.om-steps span{
  display:block;font-size:0.7rem;font-weight:600;letter-spacing:0.16em;
  font-variant-numeric:tabular-nums;color:var(--accent);margin-bottom:0.4rem;
}
.om-steps b{display:block;font-weight:600;color:var(--ink);margin-bottom:0.3rem;}

@media (max-width:900px){
  .sd-grid,.om-steps{grid-template-columns:1fr;}
  .sd-card{border-left:0;border-top:1px solid var(--line);}
  .sd-card:first-child{border-top:0;}
}
/* =====================================================================
   TEAM s.2 — Vision
   Set centred on a light band, deliberately lighter in weight than the
   hero above it so the two do not read as one block, per the document's
   treatment note. The image is a clearly labelled placeholder: the
   document forbids fabricated content standing in for pending content.
   ===================================================================== */
.ab-vision-band{
  background:var(--river-mist);
  padding:clamp(4rem,9vh,7rem) 0;
  text-align:center;
}
.ab-vision-stmt{
  margin:0 auto;max-width:46ch;text-wrap:balance;   /* three lines on desktop */
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3.4vw,2.9rem);
  font-weight:500;line-height:1.24;letter-spacing:-0.018em;
  color:var(--ink);
}
.ab-vision-stmt em{font-style:italic;color:var(--signal);}
/* =====================================================================
   INSIGHTS — content-type filters, case studies, topics
   ===================================================================== */
.in-types{
  display:flex;flex-wrap:wrap;gap:0.5rem;
  margin-top:clamp(1.4rem,3vh,2rem);
}
.in-type{
  border:1px solid var(--line);background:var(--paper);
  padding:0.5rem 1rem;
  font-size:0.82rem;font-weight:600;color:var(--ink-2);
  cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.in-type:hover{border-color:var(--accent);color:var(--ink);}
.in-type.is-on{background:var(--accent);border-color:var(--accent);color:#fff;}   /* same active state as the topic pills */

/* ---- case studies: the document leads Insights with evidence ---- */
.cs-sec{margin-bottom:clamp(3rem,7vh,5rem);}
.cs-head{max-width:70ch;}
.cs-head h2{margin-top:0.7rem;font-size:var(--t-h2-long);color:var(--ink);}
.cs-head h2 em{font-style:normal;color:var(--signal);}
.cs-head > p{margin-top:0.9rem;font-size:var(--t-lead);line-height:1.7;color:var(--ink-2);}
/* Case studies as editorial rows: a large image beside the story, the image
   side alternating row to row. The workflow reads as numbered steps on a
   thread, and before / after lead with the figure. */
.cs-rows{display:grid;gap:clamp(3.5rem,8vw,6.5rem);margin-top:clamp(2.4rem,5vh,3.6rem);}
.cs-row{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4.5rem);align-items:stretch;
}
.cs-row:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);}
.cs-row:nth-child(even) .cs-media{order:2;}
/* the image fills the full height of its row */
.cs-media{margin:0;display:flex;}
.cs-ph{
  display:flex;align-items:center;justify-content:center;flex:1;
  min-height:clamp(320px,34vw,460px);padding:1.5rem;border-radius:10px;
  border:1px dashed var(--rule);background:var(--river-mist);
}
.cs-ph span{max-width:32ch;font-size:0.84rem;line-height:1.6;color:var(--slate);text-align:center;}
.cs-kick{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;margin:0;}
.cs-n{
  font-size:0.7rem;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--accent-small);
}
.cs-topic{
  display:inline-block;
  font-size:0.72rem;letter-spacing:0.04em;color:var(--slate);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:0.22rem 0.7rem;
}
.cs-copy h3{margin:0.8rem 0 0;font-size:var(--t-h3);color:var(--ink);}
.cs-block{margin-top:1.25rem;}
.cs-label{
  display:block;
  font-size:0.66rem;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--slate);margin-bottom:0.4rem;
}
.cs-block p{margin:0;font-size:0.95rem;line-height:1.68;color:var(--ink-2);}
.cs-steps{list-style:none;margin:0.2rem 0 0;padding:0;counter-reset:cs;}
.cs-steps li{
  position:relative;counter-increment:cs;
  padding:0.38rem 0 0.38rem 2.3rem;
  font-size:0.93rem;line-height:1.45;color:var(--ink);
}
.cs-steps li::before{
  content:counter(cs);position:absolute;left:0;top:0.3rem;z-index:1;
  width:1.55rem;height:1.55rem;border-radius:50%;
  display:grid;place-items:center;
  font-size:0.72rem;font-weight:600;font-variant-numeric:lining-nums tabular-nums;
  color:var(--accent);background:#fff;border:1px solid rgba(76,120,168,0.45);
}
.cs-steps li:not(:last-child)::after{
  content:"";position:absolute;left:calc(0.775rem - 0.5px);top:1.85rem;bottom:-0.3rem;
  width:1px;background:rgba(76,120,168,0.3);
}
.cs-ba{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(0.8rem,1.6vw,1.3rem);align-items:start;
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
}
.cs-fig{
  display:block;margin-top:0.15rem;
  font-family:var(--font-body);font-size:clamp(1.9rem,2.6vw,2.5rem);font-weight:600;
  line-height:1.05;letter-spacing:-0.035em;font-variant-numeric:lining-nums;
  color:var(--ink-2);
}
.cs-fig small{margin-left:0.2em;font-size:0.42em;font-weight:500;letter-spacing:0;}
.cs-fig.is-phrase{font-size:1.5rem;line-height:1.2;letter-spacing:-0.02em;}
.is-after .cs-fig{color:var(--signal);}
.cs-ba-col p{margin:0.5rem 0 0;font-size:0.84rem;line-height:1.5;color:var(--ink-2);}
.cs-arrow{align-self:center;color:var(--accent);}
.cs-arrow svg{display:block;width:22px;height:22px;}
@media (max-width:900px){
  .cs-row,.cs-row:nth-child(even){grid-template-columns:1fr;gap:1.4rem;}
  .cs-row:nth-child(even) .cs-media{order:0;}
  .cs-ph{min-height:0;aspect-ratio:16/10;}
}
.cs-qual{
  margin-top:1.1rem;
  font-size:0.82rem;line-height:1.62;color:var(--slate);max-width:82ch;
}

/* ---- explore by topic ---- */
.ex-sec{margin-top:clamp(3rem,7vh,4.6rem);}
.ex-head h2{font-size:var(--t-h2-long);color:var(--ink);}
.ex-head p{margin-top:0.6rem;font-size:var(--t-lead);color:var(--ink-2);}
.ex-list{
  list-style:none;margin:clamp(1.4rem,3vh,2rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border:1px solid var(--line);
}
.ex-list li{border-left:1px solid var(--line);border-top:1px solid var(--line);}
.ex-list li:nth-child(-n+3){border-top:0;}
.ex-list li:nth-child(3n+1){border-left:0;}
.ex-topic{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;
  padding:clamp(1rem,1.9vw,1.4rem);
  transition:background .25s var(--ease);
}
.ex-topic:hover{background:var(--river-mist);}
.ex-topic b{display:block;font-size:0.98rem;font-weight:600;color:var(--ink);margin-bottom:0.35rem;}
.ex-topic span{display:block;font-size:0.84rem;line-height:1.6;color:var(--ink-2);}

@media (max-width:900px){
  .cs-grid,.ex-list{grid-template-columns:1fr;}
  .cs-card{border-left:0;border-top:1px solid var(--line);}
  .cs-card:first-child{border-top:0;}
  .ex-list li{border-left:0;}
  .ex-list li:nth-child(-n+3){border-top:1px solid var(--line);}
  .ex-list li:first-child{border-top:0;}
}

/* Contact — the enquiry form's intro, and the status line that the document
   requires for success and failure messages. Status is carried by the text
   itself, never by colour alone. */
.ct-form-intro{
  margin:0.6rem 0 1.4rem;
  font-size:0.92rem;line-height:1.65;color:var(--ink-2);max-width:56ch;
}
.ct-status{
  margin:0.9rem 0 0;padding:0.75rem 1rem;
  font-size:0.88rem;line-height:1.55;
  border-left:3px solid var(--success);color:var(--ink);
  background:rgba(30,122,75,0.06);
}
.ct-status.is-bad{border-left-color:var(--error);background:rgba(28,36,54,0.06);}

/* =====================================================================
   CONSISTENCY PASS — cards,type,and the two flipped bands
   Measured across Services,Team,Insights and Contact: card radius was
   running at 0,14,16 and 18px; 45 cards carried a shadow; h2 landed on
   eight different sizes and some h3s were larger than their h2. One
   system now,applied everywhere.
   ===================================================================== */

/* ---- 1. one radius,one shadow ------------------------------------- */
.sd-card,.cs-card,.om-card,.wm-cap,.mw-step,.mw-model,.knows-step,.prob,.in-card,.in-feat,.ex-list li,.ct-card,.tp-panel,.gv-card,.rn-card,.sp-card,.dm-panel,.md-step,.svcs-card,.redo-card,.ev-panel,.in-type,.ct-field input,.ct-field textarea,.ct-select select,.svc-cta,.hero-cta,.trial-cta,.redo-cta,.fn-cta,.ct-btn{
  border-radius:4px;
}
/* grids whose cells share edges take the radius on the container,so the
   internal dividers stay straight */
.sd-grid,.cs-grid,.wm-triad,.ex-list,.mw-models{
  border-radius:4px;overflow:hidden;
}
.sd-card,.cs-card,.wm-cap,.mw-model,.ex-list li{border-radius:0;}

/* Flat by default. The one elevated card in the system is the capacity
   panel,because that is the page's single most important figure. */
.sd-card,.cs-card,.om-card,.wm-cap,.mw-step,.mw-model,.knows-step,.prob,.in-card,.in-feat,.ex-list li,.ct-card,.tp-panel,.gv-card,.rn-card,.sp-card,.dm-panel,.md-step,.svcs-card,.redo-card,.ev-panel{
  box-shadow:none;
}
.ev-out1{box-shadow:0 24px 60px -28px rgba(0,0,0,0.6);}

/* ---- 2. one type scale --------------------------------------------- */
.svcs-head h2,.cs-head h2,.ex-head h2,.wm-head h2,.mw-head h2,
.knows-head h2,.probs-head h2,.model-head h2,.ev-head h2,
.ct-band-head h2,.ct-trial h2,.in-latest-head h2,.in-cta h2,
.ab-why h2,.tp-head h2,.fin h2,.svcs-final h2,.om-head h2{
  font-size:var(--t-h2);
  line-height:1.12;
}
/* headings that run long get the shorter step so line-count stays controlled */
.cs-head h2,.ex-head h2{font-size:var(--t-h2-long);}

h3,.sd-card h3,.cs-card h3,.om-card h3,.wm-cap h3,.mw-step h3,.knows-body h3,.prob h3,.in-card h3,.gv-card h3,.sp-card h3,.dm-panel h3,.md-step h3,.ev-out1-copy h3,.ev-out3 h3,.tp-panel h3{
  font-size:var(--t-h3);
  line-height:1.25;
}
/* the two exceptions the scale allows: the single headline figure, and the
   people names, which are a display element rather than a card title */
.ev-after-fig{font-size:var(--t-stat-lg);}
.tp-panel h3,.tp-name{font-size:clamp(28px,3vw,40px);}

/* ---- 3. one content width ------------------------------------------ */
.wrap{max-width:1240px;}
.wrap-wide{max-width:1400px;}

/* ---- 4. Services operating model, now a dark mechanism band -------- */
.svcs-dark .om-card{
  background:rgba(255,255,255,0.022);
  border-color:rgba(143,178,217,0.20);
}
.svcs-dark .om-card h3,.svcs-dark .om-lead{color:var(--on-dark-1);}
.svcs-dark .om-when li,.svcs-dark .om-steps li{color:var(--on-dark-2);}
.svcs-dark .om-steps b{color:var(--on-dark-1);}
.svcs-dark .om-steps li{border-top-color:rgba(143,178,217,0.20);}
.svcs-dark .om-lede{color:var(--on-dark-2);}
.svcs-dark .om-fee{color:var(--on-dark-1);}
.svcs-dark .om-when-label,.svcs-dark .om-steps span{color:var(--accent-dark-bg);}
.svcs-dark .om-tag{
  background:rgba(143,178,217,0.16);
  color:var(--accent-dark-bg);
}
.svcs-dark .om-card.is-picked .om-tag{
  background:var(--accent-dark-bg);color:var(--midnight);
}

/* ---- 5. Team's Why MBA exists, now a light context band ------------ */
.svcs-light#ab-why h2{color:var(--ink);}
.svcs-light#ab-why h2 em{color:var(--signal);}
.svcs-light#ab-why p,.svcs-light#ab-why li{color:var(--ink-2);}
.svcs-light#ab-why b{color:var(--ink);}
.svcs-light#ab-why .svcs-note-label,.svcs-light#ab-why .eyebrow{color:var(--accent-small);}
.svcs-light#ab-why li{border-top-color:var(--line);}

/* ---- 6. contrast repairs the audit surfaced ------------------------ */
.pr-sum-name{color:var(--on-dark-2);}
.pr-sum.is-on .pr-sum-name{color:var(--on-dark-1);}
.sp-lbl,.sp-check,.in-count,.in-meta,.in-by,.ct-note,.ct-card-lbl{
  color:var(--slate);
}

/* ---------------------------------------------------------------------
   The accent, calibrated per surface — automatically
   The document supplies two tokens for one role because #4C78A8 does not
   carry enough contrast on a dark band, and says never to use it there.
   Rather than hunt every rule, the token is redefined inside dark
   containers, so every var(--accent) beneath one resolves to the
   dark-calibrated blue on its own. This closes the whole class of bug,
   including anywhere it has not been spotted yet.
   --------------------------------------------------------------------- */
.svcs-dark, .mw, .fin, .ev-pin, .in-cta, .ct-covers, .ftr,
.hero, .probs, .why, [data-nav-theme="dark"]{
  --accent: #8FB2D9;
  --accent-small: #8FB2D9;
  --signal: #8FB2D9;
}

/* the step numbers on the redesign rail were inheriting a near-black,
   which is invisible on the navy they now sit on */
.pr-sum-top,.pr-sum-num{color:var(--accent-dark-bg);}
.pr-sum.is-on .pr-sum-num{color:var(--on-dark-1);}
.pr-sum-name{color:var(--on-dark-2);}

.svcs-head h2,.svcs-final h2,.om-head h2{font-size:var(--t-h2);}

/* ---------------------------------------------------------------------
   Final consistency pass
   --------------------------------------------------------------------- */

/* One H2 step site-wide, with two declared exceptions rather than the
   eight accidental sizes the audit found. */
h2{font-size:var(--t-h2);line-height:1.12;}
.ct-form h2{font-size:var(--t-h3);}
.in-latest-head h2,.cs-head h2,.ex-head h2{font-size:var(--t-h2-long);}

/* The people names are a display element, not a card title, but 50px put
   them above every H2 on the site. */
/* The people names are a display element, not a card title - but 50px put
   them above every H2 on the site. */
.tp-copy h3,.tp-panel h3,.tp-name{font-size:clamp(26px,2.6vw,36px);}

/* Two deliberately quiet elements sat at 2.3-2.7 against their background,
   which is below the floor even for secondary text. Lifted just enough to
   be legible while staying clearly secondary. */
.ftr-ticker-track span,.ftr-ticker span{color:rgba(245,241,232,0.46);}
.dm-step span,.dm-step em{color:rgba(255,255,255,0.46);}
.dm-step.is-on span{color:var(--accent-dark-bg);}
.dm-step.is-on em{color:var(--on-dark-1);}
.pr-thead span{color:rgba(255,255,255,0.5);}

/* The last contrast items the audit surfaced, all secondary text sitting a
   little under the floor. Lifted just enough to be legible while staying
   clearly secondary. */
.footer-legal{color:rgba(245,241,232,0.5);}
.sp-qual{color:var(--slate);}

/* ---------------------------------------------------------------------
   Nav clearance on every pinned section, not only the drifting ones
   A section that fits its pin was still centred in the full 100vh, so its
   eyebrow could sit behind the 112px nav on arrival. The clearance is now
   a floor for all of them; pinDrift already handles anything that becomes
   too tall as a result.
   --------------------------------------------------------------------- */
@media (min-width:981px){
  .svc-pin > .svcs,
  .model-pin > .model,
  .knows-pin > .knows,
  .wm-pin > .whymba,
  .redo-pin > .redo{
    padding-top:max(124px, 8vh);
  }
  .ev-pin > .wrap{padding-top:max(124px, 8vh);}
}

/* ------------------------------------------------------------
   Lattice legibility scrim — full bleed
   The scrim used to be a child of .wrap, so it was only as wide as the
   content column. On a wide screen that read as a dark rectangle floating
   in the middle of the section with the lighter field showing either side.
   It also still painted the old navy (#101D2D) after the palette moved to
   #1C2436, so it was genuinely darker than the section rather than
   invisible against it — which is what made the edge so obvious.

   It now spans the section, feathers out at the section's own edges, and
   is mixed from the section's background colour, so it hides the mesh
   behind the copy without being a visible shape.
   ------------------------------------------------------------ */
.has-lattice{position:relative;--scrim:28,36,54;}
.has-lattice > .lattice{z-index:0;}
.has-lattice > .wrap{position:relative;z-index:2;isolation:auto;}
.has-lattice::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(78% 66% at 50% 50%,
    rgba(var(--scrim),0.94) 0%,
    rgba(var(--scrim),0.88) 44%,
    rgba(var(--scrim),0.48) 74%,
    rgba(var(--scrim),0) 100%);
}
@media (max-width:820px){
  .has-lattice::before{
    background:linear-gradient(90deg,
      rgba(var(--scrim),0) 0%, rgba(var(--scrim),0.9) 8%,
      rgba(var(--scrim),0.9) 92%, rgba(var(--scrim),0) 100%);
  }
}

/* =====================================================================
   SERVICES HERO — the instrument panel
   Two columns: the argument on the left, and on the right a panel a
   visitor can actually use. It answers the page's real question - which
   delivery model applies to us - using the copy already approved for the
   operating-model section, so nothing new is claimed here.

   One bold moment, as agreed: the offer strip carries a solid signal
   blue. Everything else in the panel is navy and neutral.
   ===================================================================== */
.svc-hero{overflow:hidden;}
.svc-hero-field{display:flex;align-items:center;min-height:0;}

.hp{
  width:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:clamp(1.1rem,1.8vw,1.6rem);
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.55);
}

.hp-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:clamp(0.9rem,1.6vh,1.2rem);
}
.hp-title{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;font-weight:600;letter-spacing:-0.01em;
  color:var(--ink);
}
.hp-badge{
  font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent-small);
  border:1px solid var(--line);border-radius:999px;
  padding:0.3rem 0.65rem;
  white-space:nowrap;
}

/* the one bold moment */
.hp-lead{
  display:flex;align-items:center;gap:0.9rem;
  background:var(--btn);
  border-radius:10px;
  padding:clamp(0.9rem,1.6vw,1.15rem);
}
.hp-lead-mark{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,0.16);color:#fff;
}
.hp-lead-mark svg{width:18px;height:18px;}
.hp-lead-fig{
  display:flex;align-items:center;gap:0.55rem;flex-wrap:wrap;
  font-family:var(--font-body);
  font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:700;letter-spacing:-0.02em;
  color:#fff;line-height:1.1;
}
.hp-lead-tag{
  font-size:0.6rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,0.2);
  border-radius:999px;padding:0.22rem 0.5rem;
}
.hp-lead-sub{
  display:block;margin-top:0.24rem;
  font-size:0.82rem;color:rgba(255,255,255,0.88);
}

/* the selector */
.hp-tabs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0.25rem;
  margin-top:clamp(0.9rem,1.6vh,1.2rem);
  padding:0.25rem;
  background:var(--pale-aqua);
  border-radius:999px;
}
.hp-tab{
  border:0;background:none;cursor:pointer;
  padding:0.55rem 0.4rem;border-radius:999px;
  font-family:var(--font-body);
  font-size:0.82rem;font-weight:600;color:var(--ink-2);
  transition:background .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);
}
.hp-tab:hover{color:var(--ink);}
.hp-tab.is-on{
  background:var(--paper);color:var(--ink);
  box-shadow:0 2px 8px rgba(28,36,54,0.10);
}

.hp-panels{position:relative;display:grid;margin-top:clamp(0.9rem,1.8vh,1.3rem);}
.hp-panel{
  grid-area:1/1;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .35s var(--ease), transform .4s var(--ease);
}
.hp-panel.is-on{opacity:1;transform:none;pointer-events:auto;}
.hp-lede{
  margin:0 0 0.9rem;
  font-size:0.92rem;line-height:1.6;color:var(--ink);
}
.hp-label{
  display:block;
  font-size:0.6rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--slate);margin-bottom:0.5rem;
}
.hp-list{list-style:none;margin:0;padding:0;display:grid;gap:0.45rem;}
.hp-list li{
  position:relative;padding-left:1rem;
  font-size:0.85rem;line-height:1.55;color:var(--ink-2);
}
.hp-list li::before{
  content:"";position:absolute;left:0;top:0.6em;
  width:4px;height:4px;border-radius:50%;background:var(--accent);
}

.hp-cta{
  display:flex;align-items:center;justify-content:center;
  margin-top:clamp(1rem,2vh,1.4rem);
  padding:0.95rem 1.2rem;border-radius:8px;
  background:var(--btn);color:var(--on-dark-1);
  font-family:var(--font-body);
  font-size:0.92rem;font-weight:600;
  transition:background .22s var(--ease);
}
.hp-cta:hover{background:var(--btn-hover);}

.svc-hero-note{
  margin-top:clamp(1.1rem,2.4vh,1.7rem);
  font-size:0.8rem;line-height:1.6;
  color:rgba(255,255,255,0.55);
}

@media (max-width:980px){
  .hp{border-radius:12px;}
  .hp-tabs{grid-template-columns:1fr;border-radius:12px;}
  .hp-tab{border-radius:8px;}
  .hp-lead{flex-wrap:wrap;}
}

/* The hero's primary action now lives in the panel, so the surviving link on
   the left carries a little more weight than a plain text link. */
.svc-link-lead{
  font-size:0.98rem;font-weight:600;
  color:var(--on-dark-1);
}
.svc-link-lead svg{width:17px;height:17px;}
.svc-link-lead:hover{color:var(--accent-dark-bg);}

/* =====================================================================
   SERVICES 3 — MBA's operating model
   Two titled parts in one sequence: the redesign, then who runs it. A
   sticky visual on the left, a rail in the centre, the steps on the right.

   The rail is a two-column grid: the connecting line lives in the first
   column with the node markers centred on it, and the labels live in the
   second. They cannot overlap because they never share a column. The
   previous build centred the line in the rail while the labels started at
   its left edge, so the text ran straight through the line.

   Proportions put the widest column on the right: it carries a 44px
   heading and three columns that have to stay readable beneath it.
   ===================================================================== */
.fl{
  background:var(--midnight);
  padding:clamp(4rem,9vh,7rem) 0 clamp(3rem,7vh,5rem);
}
.fl-head{max-width:70ch;}
.fl-head h2{margin-top:0.7rem;color:var(--on-dark-1);}
.fl-head h2 em{font-style:normal;color:var(--signal);}
.fl-head > p{
  margin-top:0.9rem;max-width:64ch;
  font-size:var(--t-lead);line-height:1.7;color:var(--on-dark-2);
}

.fl-body{
  display:grid;
  grid-template-columns:minmax(0,0.72fr) 150px minmax(0,1.28fr);
  column-gap:clamp(1.4rem,2.8vw,2.75rem);
  margin-top:clamp(2.4rem,5vh,3.6rem);
  align-items:start;
}

/* ---- left: the sticky frame ---- */
.fl-left{position:sticky;top:0;height:100vh;display:flex;align-items:center;}
.fl-visuals{
  position:relative;width:100%;aspect-ratio:4/3;
  border:1px solid rgba(143,178,217,0.18);border-radius:4px;
  overflow:hidden;background:#1C2436;
}
.fl-visual{
  position:absolute;inset:0;margin:0;
  opacity:0;transform:scale(1.03);
  transition:opacity .7s var(--ease), transform 1.1s var(--ease);
}
.fl-visual.is-on{opacity:1;transform:none;}
.fl-visual img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---- centre: the rail ---- */
.fl-rail{position:sticky;top:0;height:100vh;display:flex;align-items:center;}
.fl-rail ol{list-style:none;margin:0;padding:0;width:100%;display:grid;}
.fl-cap,.fl-node{
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  column-gap:0.75rem;
  align-items:center;
}
.fl-cap{padding:1.15rem 0 0.7rem;}
.fl-cap::before{
  content:"";grid-column:1;justify-self:center;
  width:9px;height:1px;background:rgba(143,178,217,0.45);
}
.fl-cap span{
  grid-column:2;
  font-size:0.6rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--accent-dark-bg);
}
.fl-node{position:relative;padding:0.5rem 0;}
.fl-node::before{
  content:"";position:absolute;left:13px;top:0;bottom:0;width:1px;
  background:rgba(143,178,217,0.18);
}
.fl-node button{
  display:contents;border:0;background:none;cursor:pointer;
  font-family:var(--font-body);text-align:left;
}
.fl-node i{
  grid-column:1;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(143,178,217,0.28);background:var(--midnight);
  font-style:normal;font-size:0.58rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--on-dark-3);
  transition:border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.fl-node em{
  grid-column:2;
  font-style:normal;font-size:0.8rem;line-height:1.3;
  color:rgba(245,241,232,0.34);
  transition:color .4s var(--ease);
}
.fl-node.is-near em{color:rgba(245,241,232,0.62);}
.fl-node.is-on i{border-color:var(--accent-dark-bg);background:var(--accent-dark-bg);color:var(--midnight);}
.fl-node.is-on em{color:var(--on-dark-1);font-weight:600;}

/* ---- right: bands and steps ---- */
.fl-right{min-width:0;}
.fl-band,.fl-step{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,6vh,4rem) 0;
  opacity:0.3;transition:opacity .5s var(--ease);
}
.fl-band.is-on,.fl-step.is-on{opacity:1;}
.fl-band{
  min-height:82vh;
  border-top:1px solid rgba(143,178,217,0.20);
  border-bottom:1px solid rgba(143,178,217,0.20);
}
.fl-band-n{
  font-size:0.62rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent-dark-bg);
}
.fl-band h3{
  margin:0.9rem 0 0.8rem;
  font-size:clamp(34px,4vw,54px)!important;line-height:1.06;
  color:var(--on-dark-1);
}
.fl-band p{
  margin:0;max-width:54ch;
  font-size:var(--t-lead);line-height:1.7;color:var(--on-dark-2);
}
.fl-n{
  font-size:0.68rem;font-weight:700;letter-spacing:0.18em;
  font-variant-numeric:tabular-nums;color:var(--accent-dark-bg);
}
.fl-step h3{
  margin:0.8rem 0 0.9rem;
  font-size:clamp(30px,3.4vw,44px)!important;line-height:1.1;
  color:var(--on-dark-1);
}
.fl-lede{
  margin:0;max-width:54ch;
  font-size:var(--t-lead);line-height:1.7;color:var(--on-dark-2);
}
.fl-feats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.2rem,2.2vw,2rem);row-gap:1.4rem;
  margin-top:clamp(1.6rem,3.4vh,2.4rem);
  padding-top:clamp(1.2rem,2.6vh,1.7rem);
  border-top:1px solid rgba(143,178,217,0.18);
}
.fl-feat h4{
  margin:0 0 0.45rem;
  font-family:var(--font-body);
  font-size:0.88rem;font-weight:600;line-height:1.3;color:var(--on-dark-1);
}
.fl-feat p{margin:0;font-size:0.82rem;line-height:1.6;color:var(--on-dark-3);}

.fl-foot{
  margin-top:clamp(2rem,5vh,3.4rem);
  padding-top:clamp(1.4rem,3vh,2rem);
  border-top:1px solid rgba(143,178,217,0.18);
}
.fl-foot > p:not(.fl-close){margin:0;max-width:62ch;font-size:var(--t-lead);line-height:1.65;color:var(--on-dark-1);}
.fl-foot-sub{margin-top:0.8rem!important;color:var(--on-dark-2)!important;font-size:0.92rem!important;}

/* Below 1180 the three-column row cannot hold a readable feature grid, so
   the sequence unwinds: each frame sits with its own step. */
@media (max-width:1180px){
  .fl-body{grid-template-columns:1fr;}
  .fl-left,.fl-rail{position:static;height:auto;}
  .fl-rail{display:none;}
  .fl-visuals{position:static;aspect-ratio:auto;border:0;background:none;margin:0;}
  .fl-visual{position:static;opacity:1;transform:none;margin:0 0 1.1rem;}
  .fl-visual img{border:1px solid rgba(143,178,217,0.18);border-radius:4px;}
  .fl-band,.fl-step{min-height:0;opacity:1;padding:clamp(1.6rem,4vh,2.6rem) 0;}
  .fl-step{border-top:1px solid rgba(143,178,217,0.14);}
  .fl-feats{grid-template-columns:1fr;gap:0.9rem;}
}
@media (prefers-reduced-motion: reduce){
  .fl-visual,.fl-band,.fl-step{transition:none;}
}

/* ---------------------------------------------------------------------
   Sequence type, pushed to what the three columns can carry
   The columns sit at about 203px on a 1440 screen. These sizes are the
   largest that still give roughly five words a line, so the captions keep
   their shape rather than turning into narrow ribbons.
   --------------------------------------------------------------------- */
.fl-feat h4{font-size:1.12rem;line-height:1.28;margin-bottom:0.5rem;}
.fl-feat p{font-size:1.05rem;line-height:1.55;}
.fl-node em{font-size:1.02rem;line-height:1.28;}
.fl-node i{width:30px;height:30px;font-size:0.64rem;}
.fl-cap span{font-size:0.66rem;letter-spacing:0.17em;}
.fl-cap,.fl-node{grid-template-columns:30px minmax(0,1fr);column-gap:0.85rem;}
.fl-node::before{left:15px;}
.fl-lede{font-size:clamp(19px,1.5vw,21px);line-height:1.62;}
.fl-n{font-size:0.74rem;}

/* the rail needs a little more room now the labels are larger */
.fl-body{grid-template-columns:minmax(0,0.68fr) 178px minmax(0,1.30fr);}

/* ---------------------------------------------------------------------
   The closing line arrives rather than sits there
   Each word fades up in sequence once the line reaches the viewport, so
   the conclusion reads as being stated rather than already present.
   Reduced motion gets the finished sentence immediately.
   --------------------------------------------------------------------- */
.fl-foot{
  margin-top:clamp(2rem,5vh,3.4rem);
  padding-top:clamp(1.4rem,3vh,2rem);
  border-top:1px solid rgba(143,178,217,0.18);
}
.fl-foot .fl-close{
  margin:0;max-width:64ch;
  font-size:clamp(21px,2vw,28px);
  line-height:1.5;letter-spacing:-0.012em;
  font-family:var(--font-display);
  color:var(--on-dark-1);
}
.fl-close .w{
  display:inline-block;
  opacity:0;
  transform:translate3d(0,0.5em,0);
  filter:blur(4px);
  transition:opacity .5s var(--ease), transform .6s var(--ease), filter .5s var(--ease);
  transition-delay:calc(var(--i) * 42ms);
}
.fl-close.is-said .w{opacity:1;transform:none;filter:none;}
@media (prefers-reduced-motion: reduce){
  .fl-close .w{opacity:1!important;transform:none!important;filter:none!important;transition:none;}
}
@media (max-width:1180px){
  .fl-feat h4{font-size:1.02rem;}
  .fl-feat p{font-size:0.96rem;}
  .fl-close{font-size:clamp(19px,4.4vw,23px);}
}

/* ---------------------------------------------------------------------
   Sequence: larger frame, calmer copy, more air on the rail
   The frame gains width and a taller ratio, so it grows in both directions
   rather than just spreading. The step copy comes back down - it was set to
   the maximum the columns could carry, which is more than the block needs
   once the frame is doing more of the work.

   Radius: the page already runs a scale rather than one value - 4px on
   controls and card grids, 8px on the panel CTA, 10px on the offer strip,
   14px on the hero panel itself. The media frame takes 10px, which puts it
   with the other large surfaces. 4px was technically applied before but is
   invisible at 426px wide, which is why it read as square.
   --------------------------------------------------------------------- */
.fl-body{grid-template-columns:minmax(0,0.86fr) 170px minmax(0,1.22fr);}
.fl-visuals{
  aspect-ratio:5/4;
  border-radius:10px;
}
.fl-visual img{border-radius:inherit;}

/* more air between the rail steps */
.fl-node{padding:1.35rem 0;}
.fl-cap{padding:1.5rem 0 1rem;}

/* descriptions step back down */
.fl-lede{font-size:clamp(17px,1.35vw,19px);line-height:1.65;}
.fl-feat h4{font-size:1rem;line-height:1.3;margin-bottom:0.4rem;}
.fl-feat p{font-size:0.92rem;line-height:1.6;}

@media (max-width:1180px){
  .fl-visual img{border-radius:10px;}
  .fl-lede{font-size:clamp(16px,4vw,18px);}
  .fl-feat h4{font-size:0.98rem;}
  .fl-feat p{font-size:0.9rem;}
}

/* ============================================================
   6.1 TEAM HERO — after jamiemckaye.com
   Type-led over a full-screen flow lattice. The headline runs ~98px in
   Cormorant, three balanced lines, and its last phrase takes the
   reference's metallic fill - silver into the brand's light blue. The
   gradient is set on each word, not on the phrase, because the words wipe
   up individually and a transformed child falls outside a parent's
   background-clip. A thin row of the three capabilities closes the screen.
   ============================================================ */
.th{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--navy);color:var(--on-dark-1);
  min-height:100vh;box-sizing:border-box;display:flex;
  /* sized by height as well as width, so the capabilities row lands inside
     the first screen the way the reference's bottom row does */
  padding:clamp(120px,14vh,168px) 0 clamp(1.4rem,3.4vh,2.4rem);
}
.th > .wrap{display:flex;flex-direction:column;}
.th-title{
  margin-top:clamp(0.8rem,1.8vh,1.3rem);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(3rem,min(6.8vw,10.4vh),6.4rem);
  line-height:1.02;letter-spacing:-0.04em;
  color:var(--on-dark-1);max-width:9.6em;text-wrap:balance;
}
.th-title em{font-style:normal;color:var(--accent-dark-bg);}   /* if the script never runs */
.th-title em .mask-w > i{
  background:none;color:var(--accent-dark-bg);
  /* the fill only paints inside the word's box; extend it over descenders */
  padding-bottom:0.14em;margin-bottom:-0.14em;
}
.th-desc{
  margin-top:clamp(1.2rem,2.6vh,2rem);
  font-family:var(--font-body);font-weight:500;
  font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.45;letter-spacing:-0.01em;
  color:var(--on-dark-1);max-width:40ch;
}
.th-support{
  margin-top:0.9rem;
  font-size:clamp(0.98rem,1.15vw,1.06rem);line-height:1.72;
  color:var(--on-dark-2);max-width:64ch;
}
.th-actions{
  display:flex;flex-wrap:wrap;gap:0.8rem;
  margin:clamp(1.4rem,3vh,2.2rem) 0 clamp(1.6rem,4vh,3rem);
}
.th-caps{
  list-style:none;margin:auto 0 0;padding:1.2rem 0 0;
  display:flex;flex-wrap:wrap;align-items:center;
  border-top:1px solid rgba(213,216,221,0.14);
  font-size:0.8rem;letter-spacing:0.01em;color:var(--on-dark-3);
}
.th-caps li + li::before{content:"/";margin:0 0.9rem;color:rgba(213,216,221,0.28);}
/* the lattice shows through on the right, where the reference keeps its
   motes; the text side stays dark enough to read */
#about-hero.has-lattice::before{
  background:linear-gradient(90deg,rgba(28,36,54,0.93) 0%,rgba(28,36,54,0.8) 38%,
                                   rgba(28,36,54,0.22) 70%,rgba(28,36,54,0) 100%);
}

/* ============================================================
   6.3 WHY MBA EXISTS — a sticky card stack, after the reference
   Each card sticks 24px lower than the one before, so the stack shows the
   top edge of every card already read. The heading holds on the left while
   the cards arrive. Numerals are the reference's giant pale ghosts, at the
   owner's call; they sit inside each card so nothing outside the stack can
   ever clip them, which is what went wrong with the old "Team profiles"
   ghost text. Stacking is desktop-only: on a phone the cards flow, so no
   card's text can be covered before it has been read.
   ============================================================ */
.tw{--tw-top:140px;padding-bottom:clamp(4rem,10vh,7rem);}
.tw-grid{
  display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.tw-side{position:sticky;top:var(--tw-top);}
.tw-side .svcs-head{max-width:none;}
/* three balanced lines in the left column, not four */
.tw-side h2{font-size:clamp(1.75rem,2.65vw,2.4rem);line-height:1.12;text-wrap:balance;}

.tw-stack{display:flex;flex-direction:column;gap:clamp(1.4rem,3vh,2rem);}
/* Run-out so the last card settles before the stack lets go. It has to be a
   flow child: a sticky element is held inside its parent's content box, and
   padding sits outside that, so padding-bottom gave the fourth card nothing. */
.tw-stack::after{content:"";display:block;height:34vh;}
.tw-card{
  position:sticky;top:calc(var(--tw-top) + var(--i) * 24px);
  min-height:clamp(410px,47vh,450px);   /* equal, so they release together */
  display:flex;flex-direction:column;
  padding:clamp(1.3rem,2.4vw,2rem) clamp(1.6rem,3vw,2.6rem) clamp(1.8rem,3vw,2.6rem);
  border:1px solid var(--line);border-radius:14px;
  background:var(--paper);
  box-shadow:0 -18px 44px -30px rgba(28,36,54,0.32);
  overflow:hidden;
}
/* in flow above the title, never behind it: the old negative margin let
   the numeral reach into the text on narrower cards */
.tw-n{
  position:relative;display:block;
  /* Cormorant's old-style 3 and 4 hang ~0.18em below this box. The space is
     reserved here rather than relying on lining figures, which the served
     font may not carry - so the clearance holds for any glyph. */
  margin-bottom:0.32em;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(5rem,9vw,8.5rem);line-height:0.82;letter-spacing:-0.05em;
  color:rgba(76,120,168,0.2);
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;   /* asked for, not relied on */
  pointer-events:none;user-select:none;
}
.tw-card h3{
  position:relative;z-index:1;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.55rem,2.5vw,2.25rem);
  line-height:1.12;letter-spacing:-0.025em;color:var(--ink);
  max-width:none;text-wrap:balance;   /* two lines, not three */
}
.tw-card p{
  position:relative;z-index:1;margin-top:0.85rem;
  font-size:clamp(0.98rem,1.2vw,1.08rem);line-height:1.66;
  color:var(--ink-2);max-width:44ch;
}
.tw-close{
  grid-column:2;      /* its own row, clear of the sticky stack */
  margin-top:clamp(0.6rem,2vh,1.4rem);
  font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.55;max-width:46ch;
}

@media (max-width:980px){
  .th{padding-top:clamp(120px,16vh,150px);}
  .th{min-height:0;}
  .th-title,.th-desc{max-width:none;}
  .th-caps{font-size:0.74rem;}
  .tw-grid{grid-template-columns:1fr;}
  .tw-side,.tw-card{position:relative;top:auto;}
  .tw-card{min-height:0;}
  .tw-stack::after{display:none;}
  .tw-close{grid-column:auto;}
  .tw-n{font-size:clamp(5rem,24vw,7.5rem);}
}
/* The ghost button wins on specificity, not on file order. ".hero-cta,
   .svc-cta,.trial-cta{background:var(--signal)}" comes later at the same
   weight, so a plain .svc-cta-ghost only stayed transparent where a hero
   class happened to shield it - the rebuilt Team hero has no such class and
   "Meet the team" went solid blue. Same bug as the Home hero CTAs. */
.svc-cta.svc-cta-ghost{
  background:transparent;color:rgba(245,241,232,0.88);
  border:1px solid rgba(245,241,232,0.26);box-shadow:none;
}
.svc-cta.svc-cta-ghost:hover{
  background:rgba(245,241,232,0.07);color:var(--bone);
  border-color:rgba(245,241,232,0.45);box-shadow:none;
}
/* ---- the working scene, full bleed ----
   Replaces the image placeholder. Edge to edge at the clip's own 16:9, capped
   at one screen height, and flush with the foot of the band so it reads as a
   single piece with the statement above it. No dimming or scrim, unlike the
   same clip on Contact: here the footage is the content, not a backdrop. */
.ab-vision-band{padding-bottom:0;}
.ab-vision-film{
  margin:clamp(2.6rem,6vh,4rem) 0 0;
  width:100%;aspect-ratio:16/9;max-height:100vh;
  overflow:hidden;background:var(--navy);
}
.ab-vision-video{display:block;width:100%;height:100%;object-fit:cover;}
/* ---- the globe, back under the Why MBA exists lede ----
   The drawing code in script.js survived its old section's removal; only the
   container is new. Sized by viewport height as well as width, because it
   sits in the sticky column and must fit the window while that column holds. */
.tw-globe{margin:clamp(1.4rem,3.6vh,2.4rem) 0 0;}
.tw-globe .globe-wrap{margin:0;width:min(100%,34vh);max-width:380px;}
.ab-vision-eyebrow{margin-bottom:clamp(1rem,2.4vh,1.6rem);}
@media (max-width:980px){
  .tw-globe .globe-wrap{width:min(100%,320px);margin:0 auto;}
}
/* ---- Insights: the six latest, then the archive ----
   Each card gains the copy's one-line summary and its "Read the article"
   label; the other articles sit in a native disclosure underneath. */
.in-excerpt{margin:0.55rem 0 0;padding-inline:clamp(1rem,2vw,1.3rem);font-size:0.9rem;line-height:1.6;color:var(--ink-2);}
.in-read{
  display:inline-flex;align-items:center;gap:0.45rem;
  margin:0.2rem clamp(1rem,2vw,1.3rem) 1.3rem;
  font-size:0.85rem;font-weight:600;color:var(--accent);
}
.in-all{margin-top:clamp(1.8rem,4vh,2.6rem);border-top:1px solid var(--line);}
.in-all > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 0;font-weight:600;color:var(--ink);
}
.in-all > summary::-webkit-details-marker{display:none;}
.in-all > summary::after{content:"+";font-size:1.35rem;font-weight:400;line-height:1;color:var(--accent);transition:transform .3s var(--ease);}
.in-all[open] > summary::after{transform:rotate(45deg);}
.in-all > summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.in-all ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.in-all li a{
  display:grid;grid-template-columns:9.5rem minmax(0,1fr) 11rem;gap:1rem;align-items:baseline;
  padding:0.85rem 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;
}
.in-all-date,.in-all-topic{font-size:0.82rem;color:var(--slate);}
.in-all-title{font-weight:500;line-height:1.45;transition:color .2s var(--ease);}
.in-all li a:hover .in-all-title{color:var(--accent);}
/* labels now; interactive filtering waits, per the copy */
/* article titles in Inter: the card grid and the featured article */
.in-grid .in-card h3{
  font-family:var(--font-body);font-size:clamp(1rem,1.18vw,1.08rem);
  font-weight:600;line-height:1.36;letter-spacing:-0.012em;
}
.in-feat .in-feat-body h2{
  margin:0;font-family:var(--font-body);font-size:clamp(1.35rem,2.1vw,1.75rem);
  font-weight:600;line-height:1.25;letter-spacing:-0.02em;
}
.in-feat-body .in-meta{margin:0 0 0.75rem;}
.in-feat-excerpt{margin:0.8rem 0 0;max-width:52ch;font-size:0.98rem;line-height:1.65;color:var(--ink-2);}
/* author and the read label sit together, not a full card-margin apart */
/* card foot: author on the left, the read link on the right, one line, one
   size, pinned to the bottom so every card in a row lines up */
.in-card > a{display:flex;flex-direction:column;height:100%;}
.in-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
.in-foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:auto;padding:1.4rem clamp(1rem,2vw,1.3rem) 1.3rem;
}
.in-foot .in-by,.in-foot .in-read,.in-foot .in-feat-link{margin:0;font-size:0.85rem;line-height:1.4;}
.in-feat-body .in-foot{padding:1.4rem 0 0;}

/* ---- Contact, rebuilt to the document's four sections ----
   Hero, How to start, the form beside the email alternative, then contact
   information. Bands alternate grey and white so the sections read apart. */
.ct-trial{background:var(--paper);}
.ct-trial-link{
  display:inline-flex;align-items:center;gap:0.5rem;
  margin-top:clamp(1.2rem,2.6vh,1.7rem);
  font-size:0.95rem;font-weight:600;color:var(--accent);
}
.ct-trial-link::after{content:"\2192";transition:transform .25s var(--ease);}
.ct-trial-link:hover::after{transform:translateX(4px);}
.ct-pointer{margin:0.7rem 0 0;max-width:64ch;font-size:0.9rem;line-height:1.65;color:var(--ink-2);}
.ct-form-sec{background:#EDEFF2;padding:clamp(3.5rem,8vh,6rem) 0;}
.ct-split-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);gap:clamp(2rem,5vw,5rem);align-items:start;}
.ct-form-sec .ct-form{margin-top:0;}
.ct-alt{
  position:sticky;top:130px;
  padding:clamp(1.3rem,2.4vw,1.7rem);
  background:#fff;border-radius:14px;box-shadow:0 1px 3px rgba(16,29,45,0.07);
}
.ct-alt h2{
  margin:0;font-family:var(--font-body);
  font-size:0.7rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--slate);
}
.ct-alt h3{
  margin:0.8rem 0 0.5rem;font-family:var(--font-display);
  font-size:clamp(1.3rem,2vw,1.6rem);font-weight:600;letter-spacing:-0.02em;color:var(--ink);
}
.ct-alt p{margin:0;font-size:0.92rem;line-height:1.65;color:var(--ink-2);}
.ct-alt-mail{display:inline-block;margin-top:1rem;font-weight:600;color:var(--accent);overflow-wrap:anywhere;}
.ct-info{background:var(--paper);padding:clamp(3rem,7vh,4.5rem) 0;}
.ct-info-grid{display:grid;grid-template-columns:minmax(0,0.6fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);}
.ct-info-grid p{margin:0.5rem 0 0;max-width:60ch;font-size:1rem;line-height:1.65;color:var(--ink-2);}
.ct-info-grid a{color:var(--ink);font-weight:600;}

@media (max-width:980px){
  .ct-split-r,.ct-info-grid{grid-template-columns:1fr;}
  .ct-alt{position:static;}
}
@media (max-width:720px){
  .in-all li a{grid-template-columns:1fr;gap:0.15rem;}
}

/* ---- one measure on a phone ----------------------------------------
   .wrap-wide adds 2rem of side margin on top of .wrap's padding, which put
   the three wide sections (process redesign, operating models, what MBA
   builds) at a 56px gutter while the other six sat at 24. There is no room
   for a second measure on a phone, so it collapses to .wrap's. This has to
   sit at the end of the sheet: .wrap-wide declares its own width further
   down, and at equal specificity the later rule wins. */
@media (max-width:980px){
  .wrap-wide{width:100%;}
}

/* ---- hero eyebrows: one treatment on every page ----------------------------
   A dot and the label, both in the document's accent. Dark heroes resolve
   --accent to #8FB2D9 through the dark-band rule, light ones keep #4C78A8.
   The Insights label was display:block, which hid its dot (an empty inline
   element has no box); Team had no dot at all. */
.svc-eyebrow,.th-eyebrow{color:var(--accent-small);}
.th-eyebrow{gap:0.65rem;}
.svc-eyebrow i,.th-eyebrow i{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--accent);box-shadow:0 0 12px var(--accent);
}
.in-hero .in-eyebrow{display:flex;align-items:center;justify-content:center;gap:0.65rem;}

/* ---- phone fixes ------------------------------------------------------------
   Several phone rules were being overridden by unscoped desktop rules written
   later in this file, so they are restated here, after everything they
   compete with. */
@media (max-width:980px), (max-height:760px){
  /* these stages drop their pin at this size but kept the desktop scroll
     height: "How MBA works" ran ~500px into the next section, hiding Split and
     the Important distinction note; "What MBA can do" left a ~360px gap */
  .model-stage,.redo-stage{height:auto;}
}
@media (max-width:1180px){
  .fl-body{grid-template-columns:1fr;}   /* was 46px | 170px | 66px on a phone */
}
@media (max-width:720px){
  /* Outcome 2: the three workflows sit above their panel instead of beside it */
  .ev-body{grid-template-columns:1fr;gap:1.1rem;}
  .ev-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem;padding-left:0;}
  .ev-rail-line{display:none;}
  .ev-step{margin:0;padding:0.6rem 0.65rem;border:1px solid rgba(143,178,217,0.2);border-radius:8px;text-align:left;}
  .ev-step::before{display:none;}
  .ev-step.is-on{border-color:var(--accent);background:rgba(143,178,217,0.08);}
  .ev-step em{font-size:0.82rem;line-height:1.3;}
  .ev-step span{letter-spacing:0.08em;}
  /* a 999px radius turns a pill that wraps onto several lines into a blob */
  .in-pills{border-radius:18px;}
  .in-type,.in-pill{min-height:40px;}
  /* offer lines stack rather than wrap with a separator dot opening a line */
  .ct-trial-offer{display:flex;flex-direction:column;align-items:flex-start;gap:0.3rem;border-radius:14px;padding:0.9rem 1.2rem;}
  .fn-offer,.svcs-final .fn-offer{display:flex;flex-direction:column;align-items:center;gap:0.3rem;width:fit-content;margin-inline:auto;border-radius:14px;padding:0.8rem 1.2rem;}
  .dm-offer{flex-direction:column;align-items:flex-start;gap:0.3rem;}
  .ct-trial-offer i,.fn-offer i,.dm-offer i{display:none;}
  /* labels that measured under 10px */
  .hp-badge,.hp-lead-tag,.hp-label,.svcs-note-label,.wm-enables-label,.dm-step em{font-size:0.66rem;}
}
@media (max-width:980px){
  /* tap targets: the profile numbers and footer links were 20-26px tall */
  .tp-num{min-width:44px;min-height:44px;padding:0.7rem 0.35rem;}
  .ftr-col{gap:0;}
  .ftr-col > a{padding-block:0.35rem;}
}

/* ---- "What MBA can do" on Home, and the outcomes title ----------------------
   The title runs on one line, larger, with the second clause in the accent
   (#8FB2D9 on this dark band). The grid used to reserve a fourth wide "d"
   slot that no card fills, so the third card spanned two rows in a wider
   column; the three cards are now equal, each with its mark on the left. */
.redo-hl,#redesigns h2 .redo-hl{display:inline;}   /* an id rule at 5.x forced two lines */
.redo-head h2 em.redo-hl{margin-top:0;}
.redo-head h2,.redo-pin .redo-head h2{max-width:none;font-size:clamp(1.9rem,3.2vw,2.85rem);}
.redo-head h2 em,.ev-head h2 em{color:var(--accent);}
@media (min-width:901px){
  .redo-head h2{white-space:nowrap;}
}
@media (min-width:981px){
  .redo-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a b c";}
  .redo-c .rv-icon,.redo-c .redo-vis{align-self:flex-start;margin-top:auto;}
}

/* ---- one card radius ---------------------------------------------------------
   Every boxed card surface now uses 14px, the value the newer cards (Team,
   Services operating model, Contact, related articles) already had; before,
   older cards were forced to 4px and others sat at 0, 10, 18 or 20px.
   Grids whose cells share edges round the container and keep the cells
   square, so the internal dividers stay straight. Controls keep 4px, CTAs
   8px and pills 999px. */
:root{--r-card:14px;}
.prob,.redo-card,.mw-step,.in-card,.in-feat,.sp-card,.ev-out1,.cs-ph,.fl-visuals,
.op-note,.op-card,.ct-form,.ct-alt,.rel-card,.hp,.tw-card,.art-hero,.wm-base{
  border-radius:var(--r-card);
}
.sd-grid,.wm-triad,.mw-models{border-radius:var(--r-card);overflow:hidden;}
.knows-step{border-radius:0;}   /* a top rule only: a radius curls the ends of the line */

/* ---- Outcome 1: the estimate note travels with its label ------------------
   "(An illustrative estimate, not a projected result.)" follows "Potential
   capacity per month" in sentence case, so it reads as a note on the label
   rather than a second label. With the description shortened, the copy
   column centres against the figure column instead of leaving a gap. */
.ev-out-label-note{
  display:block;margin-top:0.35rem;font-size:0.8rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--on-dark-3);
}
.ev-out1 .ev-out-label{line-height:1.5;margin-bottom:0.9rem;}
.ev-out1-grid{align-items:center;}

/* ---- "After" claims in Inter bold -------------------------------------------
   The results a redesign produced read in Inter 700 everywhere: the Home
   outcome figure and outcome lines, the Services evidence values and the
   Insights case-study figures. Before values keep their quieter treatment, so
   the result is the heavier of the pair. Inter sets larger than Cormorant at
   the same size, so the Home outcome lines step down a notch. */
.ev-after{font-family:var(--font-body);font-weight:700;}
.ev-after:not(.ev-after-fig){font-size:clamp(1.15rem,2vw,1.55rem);letter-spacing:-0.02em;line-height:1.3;}
.ev-after-fig{letter-spacing:-0.035em;font-variant-numeric:lining-nums tabular-nums;}
.sev-after .sev-val{font-family:var(--font-body);font-weight:700;}
.is-after .cs-fig{font-weight:700;}

/* ---- Why MBA: three standalone cards ---------------------------------------
   The triad was one bordered strip with shared edges, so only its outer top
   corners were round. Each capability is now its own 14px card. */
.wm-triad{border:0;background:none;border-radius:0;overflow:visible;}
.wm-cap,.wm-cap:first-child{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);}
.wm-base{margin-top:clamp(1rem,2vw,1.5rem);}

/* ---- Outcome 1 as one block ------------------------------------------------
   The figure and the sentence beside it said the same thing twice. The title,
   label and figure now read as one statement on the left; what it rests on
   and its qualification sit on the right. */
.ev-out1-copy .ev-out-label{margin-top:1.3rem;}
.ev-out1-copy .ev-after-fig{margin-top:0.15rem;}
.ev-out1-desc{margin:0;font-size:var(--t-body);line-height:1.7;color:var(--on-dark-2);}

/* ---- Outcome 2 title, set like Outcomes 1 and 3 ---------------------------- */
.ev-out-tag.ev-out-tag-2{margin-bottom:0;}   /* the title now carries the gap to the rail */
.ev-out2-title{margin:0.7rem 0 clamp(0.6rem,1.5vh,1rem);font-size:var(--t-h3);line-height:1.25;color:var(--on-dark-1);}

/* ---- footer: page and social links in white -------------------------------- */
.ftr .ftr-col > a,.ftr .ftr-col a:not([class]){color:#fff;}
.ftr .ftr-col > a:hover{color:var(--accent-dark-bg);}
.ftr-social svg{opacity:1;}

/* ---- Outcome 1 as a hero figure band -----------------------------------------
   No box: the figure is the moment. ~80–120 hours sits very large between two
   thin rules, with its label, estimate note and source line beneath and the
   qualification at the foot of the same block (the document requires the
   qualification to stay with the figure). The title matches Outcomes 2 and 3. */
.ev-out1{padding:0;border:0;background:none;box-shadow:none;border-radius:0;}
.ev-out1-title{margin:0.7rem 0 0;font-size:var(--t-h3);line-height:1.25;color:var(--on-dark-1);}
.ev-out1-band{
  margin-top:clamp(1.2rem,2.6vh,1.8rem);padding:clamp(1.8rem,4.5vh,3.2rem) 0;
  border-top:1px solid rgba(143,178,217,0.22);border-bottom:1px solid rgba(143,178,217,0.22);
  text-align:center;
}
.ev-out1-num{display:block;font-size:clamp(3.6rem,9vw,7.5rem);line-height:1;letter-spacing:-0.045em;font-variant-numeric:lining-nums tabular-nums;}
.ev-out1-num .ev-tilde{font-size:0.62em;vertical-align:0.1em;margin-right:0.04em;}
.ev-out1-num .ev-unit{font-size:0.2em;margin-left:0.4em;letter-spacing:0;}
.ev-out1-band .ev-out-label{margin:clamp(1.1rem,2.6vh,1.6rem) 0 0;}
.ev-out1-band .ev-out-label-note{display:block;margin-top:0.35rem;}
.ev-out1-band .ev-out1-desc{margin:0.7rem auto 0;max-width:52ch;font-size:var(--t-body);line-height:1.6;color:var(--on-dark-2);}
.ev-out1 > .ev-out1-qual{margin:1rem auto 0;max-width:78ch;text-align:center;}

/* ---- Start the discussion (Home) owns a full screen --------------------------- */
#trial.fin{min-height:100vh;min-height:100svh;display:flex;align-items:center;}
#trial.fin > .wrap{width:100%;}

/* ---- Outcome intro lines up with its heading ---------------------------------- */
.ev-head .ev-lede{margin-left:0;}

/* ---- Team profiles: the "halo" row ---------------------------------------------
   Three cards in a row. The open card grows (flex-grow) and fills with navy;
   its portrait keeps exactly the width of a closed card, so opening and
   closing only reveals or hides the text beside it. Container units size the
   portrait and the text column from the row's own width. */
.tph{container-type:inline-size;display:flex;gap:16px;align-items:flex-start;}
.tph-card{flex:1 1 0;min-width:0;cursor:pointer;outline:none;transition:flex-grow .7s cubic-bezier(.19,1,.22,1);}
.tph-card.is-active{flex-grow:2.3;cursor:default;}
.tph-in{
  display:flex;gap:24px;height:clamp(460px,62vh,560px);padding:12px;overflow:hidden;
  border-radius:var(--r-card);border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.045);
  transition:background .6s var(--ease), border-color .6s var(--ease);
}
.tph-card:hover .tph-in{border-color:rgba(143,178,217,0.3);}
.tph-card.is-active .tph-in{background:var(--navy-deep);border-color:rgba(143,178,217,0.28);}
.tph-card:focus-visible .tph-in{outline:2px solid var(--accent-dark-bg);outline-offset:3px;}
.tph-photo{
  position:relative;margin:0;flex:0 0 calc((100cqw - 32px) / 4.3 - 24px);height:100%;
  border-radius:10px;overflow:hidden;background:#2A3448;
}
.tph-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block;}
.tph-badge{
  position:absolute;left:12px;bottom:12px;display:grid;place-items:center;
  width:44px;height:44px;border-radius:10px;background:#fff;
  font-size:0.8rem;font-weight:700;letter-spacing:0.04em;color:var(--midnight);font-variant-numeric:tabular-nums;
}
.tph-body{
  flex:0 0 calc((100cqw - 32px) * 0.3023 - 24px);min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(1.6rem,5vh,2.8rem);padding:clamp(0.6rem,1.4vw,1.1rem) 0.4rem clamp(0.4rem,1vw,0.8rem) 0;
  opacity:0;transition:opacity .35s var(--ease);
}
.tph-card.is-active .tph-body{opacity:1;transition:opacity .5s var(--ease) .28s;}
.tph-name{margin:0;font-size:clamp(1.4rem,2vw,1.85rem);line-height:1.1;color:var(--on-dark-1);}
.tph-role{margin:0.5rem 0 0;font-size:0.85rem;font-weight:500;line-height:1.45;color:var(--accent-dark-bg);}
.tph-bio{margin:0;font-size:0.92rem;line-height:1.65;color:var(--on-dark-2);}
.tph-tags{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.45rem;}
.tph-tags li{
  font-size:0.76rem;font-weight:500;color:var(--on-dark-2);
  border:1px solid rgba(255,255,255,0.16);border-radius:999px;padding:0.34rem 0.8rem;
}
.tph-label{margin:0.9rem 0 0;text-align:center;font-size:0.86rem;font-weight:500;color:var(--on-dark-3);transition:color .4s var(--ease);}
.tph-card.is-active .tph-label{color:var(--on-dark-1);}

/* phones and small tablets: every profile open, stacked, no hover needed */
@media (max-width:900px){
  .tph{container-type:normal;flex-direction:column;gap:1.4rem;}
  .tph-card,.tph-card.is-active{flex:none;width:100%;cursor:default;}
  .tph-in,.tph-card.is-active .tph-in{flex-direction:column;height:auto;gap:1.1rem;background:var(--navy-deep);border-color:rgba(143,178,217,0.22);}
  .tph-photo{flex:none;width:100%;height:auto;aspect-ratio:4/3;}
  .tph-body,.tph-card.is-active .tph-body{flex:none;opacity:1;padding:0 0.5rem 0.6rem;}
  .tph-label{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .tph-card,.tph-in,.tph-body{transition:none;}
}

/* ---- Outcome 1, second pass ----------------------------------------------------
   No rules inside the outcome: the stat group (figure, label, note, source
   line) sits left-aligned, and its qualification sits in a column beside it,
   aligned to the foot of the stat text. Outcomes are separated by one rule
   each, with the same generous space around every break. */
.ev-out1{margin-top:clamp(3rem,8vh,5.5rem);}
.ev-out1-band{
  border:0;padding:0;margin-top:clamp(1.6rem,3.5vh,2.4rem);text-align:left;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:end;
}
.ev-out1-band .ev-out1-desc{margin:0.7rem 0 0;}
.ev-out1-band > .ev-out1-qual{margin:0;max-width:48ch;text-align:left;font-size:0.88rem;line-height:1.7;}
.ev-out-tag-2,.ev-out-tag.ev-out-tag-2{margin-top:clamp(3rem,8vh,5.5rem);padding-top:clamp(2.4rem,6vh,4rem);}
.ev-out3{margin-top:clamp(3rem,8vh,5.5rem);padding-top:clamp(2.4rem,6vh,4rem);}
@media (max-width:720px){
  .ev-out1-band{grid-template-columns:1fr;gap:1.2rem;}
}

/* ---- Start the discussion: pinned, and a larger headline -----------------------
   The section holds the full screen for most of a screen of scrolling before
   the footer arrives, so the call to action gets its own moment. */
.fin-stage{position:relative;height:170vh;height:170svh;}
#trial.fin{position:sticky;top:0;height:100vh;height:100svh;min-height:0;}
#trial .fin-inner{max-width:min(1100px,100%);}
#trial.fin h2{font-size:clamp(2.5rem,5.4vw,4.75rem);line-height:1.06;letter-spacing:-0.03em;text-wrap:balance;}

/* Somalis' portrait is framed with more headroom than the other two. The
   portraits fill the frame's full height, so object-position cannot move it;
   the image is made 5.2% taller and lifted by the same share of the frame,
   which puts the top of her head level with Channara's at every desktop width
   (the lift is a fraction of the frame, not pixels). Gabriel's sat a little
   low too, so his portrait gets the same treatment on a smaller scale. */
@media (min-width:901px){
  .tph-photo img[src*="gabriel"]{height:calc(100% * 1.0175);transform:translateY(calc(-100% * 0.0172));}
  .tph-photo img[src*="somalis"]{height:calc(100% * 1.0524);transform:translateY(calc(-100% * 0.0498));}
}

/* ---- Services operating-model sections (.fl) -----------------------------------
   Anchor jumps (the hero's "See how the model works") land with the eyebrow
   clear of the fixed nav; the subtitle steps down a size; the head sits above
   the body, which services.js pulls up to close the lead-in gap. */
.fl{scroll-margin-top:40px;}
.fl-head{position:relative;z-index:2;}
.fl-head > p{font-size:1rem;line-height:1.65;}

/* ---- Operating model: the sequence, then the delivery models inside step 3 ------
   Two sequence blocks in one section, kept visibly apart: the steps are
   numbered 1-3 under "Operating sequence"; a rule and a step-3 label introduce
   the delivery models, lettered A-C so they read as options, not more steps. */
.fl-part{position:relative;z-index:2;margin-top:clamp(2rem,4.5vh,3rem);}
.fl-part-label{display:inline-block;font-size:0.72rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-dark-bg);}
.fl-part-divide{margin-top:clamp(2.5rem,6vh,4rem);padding-top:clamp(2.5rem,6vh,4rem);border-top:1px solid rgba(143,178,217,0.22);}
.fl-part-title{margin:0.7rem 0 0;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.15;color:var(--on-dark-1);}
.fl-head + .fl-part{margin-top:clamp(1rem,2vh,1.6rem);}   /* the first label sits close to the head so the landing screen holds the whole first block */

/* ---- Operating model labels ride with the pinned image -------------------------
   "Operating sequence" and "Step 3 - Choose who runs it / Three delivery
   models" sit inside the pinned column above each image, so they stay put
   while the steps and options scroll past. A plain rule divides the blocks;
   the closing line (.fl-foot) is pulled up to the last option by services.js. */
.fl-left-in{width:100%;}
.fl-left-in > .fl-part-label{display:block;margin:0 0 0.9rem;}
.fl-left-in > .fl-part-title{margin:0 0 1.2rem;}
.fl-left-in > .fl-part-label + .fl-part-title{margin-top:-0.35rem;}
.fl-divide{position:relative;z-index:2;height:0;margin-top:clamp(2rem,5vh,3.5rem);border-top:1px solid rgba(143,178,217,0.22);}
.fl-foot{position:relative;z-index:2;}

/* Outsourced production: the subtitle steps down a size (was 16.5px at 1440) */
.op-head > p{font-size:clamp(0.88rem,1.05vw,0.94rem);line-height:1.7;}

/* ---- Supporting capabilities: the copy document's lead line and labelled
   qualification on each card ---------------------------------------------------- */
.sp-card > .sp-lead{margin-top:1.3rem;font-size:1.05rem;font-weight:600;line-height:1.45;color:var(--ink);}
.sp-card > .sp-lead + p{margin-top:0.45rem;}
.sp-qual-label{font-weight:600;color:var(--accent);}

/* ---- Selected evidence: pinned, and a size smaller -------------------------------
   The stage pins the section (services.js sets the runway while the pin is
   live); the content clears the fixed nav. The workflow descriptions and the
   prose before/after lines step down; the figures keep their size. */
#sevStage .svc-pin > .svcs{padding-top:clamp(6rem,11vh,7.5rem);padding-bottom:clamp(2rem,4vh,3rem);}
.sev-lede{font-size:clamp(0.94rem,1.2vw,1.02rem);}
.sev-val-prose{font-size:clamp(0.98rem,1.4vw,1.18rem);}

/* ---- Services "Start the discussion": a larger Inter headline, quieter lines -------
   (the trial pill was removed from the markup) */
/* Team's closing section (#ab-start) and Home's (#trial) follow the same design */
#svc-final h2,#ab-start h2,#trial.fin h2{font-family:var(--font-body);font-weight:600;font-size:clamp(2.2rem,4.7vw,4.25rem);line-height:1.08;letter-spacing:-0.035em;}
#svc-final .fn-support,#ab-start .fn-support,#trial .fin-lede{font-size:clamp(0.95rem,1.15vw,1.02rem);line-height:1.65;}
#svc-final .fn-question,#ab-start .fn-question{font-size:clamp(0.9rem,1.05vw,0.98rem);}
/* Team's closing question (the CV invitation) is long: smaller than the other
   closing headlines, and a further step down on phones */
#ab-start h2{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.12;}
@media (max-width:600px){ #ab-start h2{font-size:1.75rem;line-height:1.14;} }
/* Insights' closing question in Inter too, at its own size */
.in-cta h2{font-family:var(--font-body);font-weight:600;line-height:1.1;letter-spacing:-0.03em;}

/* ---- Contact hero: the text centred in the grey band ---------------------------
   The fixed nav (112px at the top of the page) covers the top of the band, so
   the top padding clears it and then matches the bottom padding: equal space
   above and below the text in the part of the band that can be seen. */
.ct-top{padding:calc(112px + clamp(2.5rem,5vh,3.5rem)) 0 clamp(2.5rem,5vh,3.5rem);}

/* Selected evidence panels share one grid cell, so the block always reserves
   the tallest workflow's height: the pin's hold position is right for all
   three, and switching no longer makes the layout jump. */
#sevStage .sev-panels{display:grid;}
#sevStage .sev-panel{grid-area:1/1;}
#sevStage .sev-panel[hidden]{display:block;visibility:hidden;pointer-events:none;}

/* ---- Team hero at the site's hero scale ---------------------------------------
   The headline matches the Services hero (56px at 1440, 32px on a phone);
   the descriptor and supporting line match the Services hero's too. */
#about-hero .th-title{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.08;max-width:13em;}
#about-hero .th-desc{font-size:clamp(1rem,1.25vw,1.12rem);}
#about-hero .th-support{font-size:clamp(0.93rem,1.15vw,1rem);}

/* DMAIC: with the button gone, "What the client keeps" spans the row, so its
   sentence runs on one line on desktop (it still wraps on narrow screens) */
#svc-dmaic .dm-foot{grid-template-columns:1fr;}
#svc-dmaic .dm-keeps,#svc-dmaic .dm-keeps p{max-width:none;}

/* ---- Team hero: the text group sits in the middle -------------------------------
   The capability line keeps its auto top margin; the eyebrow gets one too, so
   the free space splits evenly above the group and above the line. The top
   padding only has to clear the fixed nav, so the group centres on the
   visible area rather than riding high. */
@media (min-width:981px){
  /* nav height plus the actions' bottom margin, so the two gaps match */
  #about-hero{padding-top:calc(112px + clamp(1.6rem,4vh,3rem));}
  #about-hero .th-eyebrow{margin-top:auto;}
}

/* ---- Team: Our Vision holds the full screen --------------------------------------
   The statement fills one screen, centred below the nav, and stays put for
   most of a screen of scrolling before the film below arrives. */
#visionBand{padding-top:0;}
.ab-vision-stage{position:relative;height:170vh;height:170svh;}
.ab-vision-stage > .wrap{
  position:sticky;top:0;box-sizing:border-box;
  height:100vh;height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-top:112px;padding-bottom:0;   /* centred on the area below the nav */
}
#visionBand .ab-vision-stmt{font-size:clamp(2.2rem,4.8vw,4.4rem);line-height:1.14;max-width:21em;}
#visionBand .ab-vision-film{margin-top:0;}

/* ---- Team: Why MBA exists card titles in Inter ---- */
.tw-card h3{font-family:var(--font-body);font-weight:600;font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.25;letter-spacing:-0.015em;}

/* ---- Services: operating model and process redesign as two pinned pages ----------
   The model pins on its last screen (its top is set in services.js) and the
   redesign section slides up over it; the shadow and hairline mark the new
   page, since both share the midnight ground. Desktop only: on stacked
   layouts the two simply follow each other. */
@media (min-width:981px){
  .fl-pair > #svc-models{position:sticky;z-index:0;}
  .fl-pair > #svc-redesign{
    position:relative;z-index:1;
    border-top:1px solid rgba(143,178,217,0.16);
    box-shadow:0 -30px 60px -26px rgba(0,0,0,0.6);
  }
}

/* ---- Small blue labels meet AA on the grey bands --------------------------------
   #4C78A8 measured 4.0:1 on the grey bands, under the 4.5:1 small text needs.
   Small labels use --accent-small, the same blue a shade deeper on light bands
   and the usual #8FB2D9 on dark ones. The case-study "hrs" suffix and the
   Services hero badge (white card inside a dark band) are set directly. */
.cs-fig small{color:var(--accent-small);}
.hp-badge{color:#456D99;}

/* ---- Team, Why MBA exists: a larger globe, and quieter text ---------------------
   The left column stays pinned while the cards stack, exactly as before. The
   globe may grow to twice its old size; script.js trims it to the room left
   below the text while the column is pinned, so it is always seen whole. It
   may run into the column gap but never into the cards. It can be dragged;
   vertical swipes on touch still scroll the page. */
@media (min-width:981px){
  .tw-globe .globe-wrap{width:min(68vh,760px,calc(100% + 3rem));max-width:none;}
}
.tw-close{font-size:clamp(1rem,1.25vw,1.12rem);}
@media (max-width:980px){
  .tw-globe .globe-wrap{width:min(100%,560px);}
}
#globeCanvas{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
#globeCanvas.is-dragging{cursor:grabbing;}
#ab-why .svcs-head > p{font-size:clamp(0.95rem,1.2vw,1.02rem);}
.tw-card h3{font-size:clamp(1.2rem,1.6vw,1.45rem);}
.tw-card p{font-size:clamp(0.92rem,1.1vw,1rem);}

/* ---- Home hero: Inter throughout, the headline in capitals ----------------------
   Only the descriptor above the headline stays in Cormorant. The lockup
   shrink-wraps the headline, so it is exactly as wide as the headline's widest
   line; the eyebrow contributes no width of its own (width 0, min-width 100%)
   and so fills that same width. hero-fx.js narrows the lockup to the widest
   line drawn when the headline wraps (phones). */
/* "MORE CAPACITY FROM THE TEAM" measures 16.64em in Inter 600 capitals. The
   first statement's column is widened, and the size capped so that line always
   fits: the headline stays on its two intended lines on every desktop width. */
.hero-beat[data-beat="0"] .wrap{max-width:1320px;}
.hero h1{
  font-family:var(--font-body);font-weight:600;text-transform:uppercase;
  font-size:min(clamp(2rem,4.9vw,72px), calc((min(1320px, 100vw) - 100px) / 16.64));
  line-height:1.04;letter-spacing:-0.01em;
}
.hero h1 em{font-weight:600;}
.hero-line{font-family:var(--font-body);font-weight:500;font-size:clamp(1.4rem,3.2vw,44px);line-height:1.25;letter-spacing:-0.02em;}
.hero-line em{font-weight:600;}
.hero-lockup{width:fit-content;max-width:100%;margin-inline:auto;}
/* The descriptor sits above the headline (Nara, 2026-09-11): smaller, white,
   centred, and wrapping within the headline's width. */
.hero-lockup .hero-eyebrow{
  width:0;min-width:100%;max-width:none;box-sizing:border-box;
  margin:0 0 clamp(1rem,2.4vh,1.6rem);
  font-family:var(--font-display);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.4rem);
  letter-spacing:0;text-transform:none;line-height:1.4;
  text-align:center;color:var(--on-dark-1);
  text-shadow:0 2px 8px rgba(2,6,12,0.85), 0 1px 2px rgba(2,6,12,0.9);
}
/* the third statement, a step larger than the second */
.hero-beat[data-beat="2"] .hero-line{font-size:clamp(1.6rem,4vw,56px);}
@media (max-width:980px){
  /* the widest wrapped line, "YOU ALREADY HAVE.", is 10.24em: sized to fill
     the phone's text width, so the lockup (and the descriptor) are as wide as
     the screen allows */
  .hero h1{font-size:min(calc((100vw - 52px) / 10.3), 2.6rem, 8vh);}
  .hero-line{font-size:clamp(1.2rem,5vw,1.7rem);}
  .hero-beat[data-beat="2"] .hero-line{font-size:clamp(1.4rem,6vw,1.95rem);}
  .hero-lockup .hero-eyebrow{font-size:0.95rem;}
}
/* The three progress bars sat on top of the "Scroll" cue: the cue is fixed at
   40px from the bottom and 59px tall, while the bars followed the viewport
   height. Pinned just above the cue instead, 16px clear at every size. */
.hero-ticks{bottom:calc(40px + 59px + 16px);}

/* ---- Insights case studies: a supplied image in place of the placeholder -------
   Fills the same frame as .cs-ph on desktop, anchored to the top so a document's
   heading and first sections always show; on stacked layouts it keeps its own
   proportions, uncropped. The hairline keeps a white page visible on the band. */
.cs-img{
  display:block;flex:1;width:100%;height:100%;min-height:clamp(320px,34vw,460px);
  object-fit:cover;object-position:top center;
  border:1px solid var(--line);border-radius:var(--r-card);background:#fff;
}
@media (max-width:900px){ .cs-img{height:auto;min-height:0;} }   /* where the rows stack */

/* ---- Phones: Why MBA no longer covered by the next section ---------------------
   On phones the Why MBA pin releases and the section runs at its natural height,
   but a later desktop rule (.wm-stage{height:175vh}) still fixed the stage's
   height, so the evidence section began before the third card ended and covered
   it. Restated last so the stage takes the content's height. Desktop unchanged. */
@media (max-width:980px){ .wm-stage{height:auto;} }

/* ---- Phones: the Services closing glow widened the page ------------------------
   .fn-glow is 110% of the section's width; once the pin releases on phones
   nothing clipped it, so it pushed the page ~20px wider than the screen and
   the whole Services page could shift sideways. Clipped to the section. */
@media (max-width:980px){ .svcs-final{overflow:hidden;} }

/* Home, "Three problems most communications firms already have.": the highlight
   was white italic; it takes the guide's blue like every other highlighted phrase
   (--accent resolves to #8FB2D9 on this dark band). */
#problems .probs-head h2 em{font-style:normal;color:var(--accent);}

/* ---- Services, What MBA does: the offers panel (after Cue's products menu) -------
   Left: heading, intro, the three offers as a list with the selected one on a
   navy band. A hairline. Right: the selected
   offer's description, large, with a link to its section. .wd-item is
   display:contents, so each tab and its pane land in different grid columns on
   desktop yet stay together in the markup for the phone accordion. Inactive
   panes keep their place (visibility), so switching never resizes the rows. */
.wd{display:grid;grid-template-columns:minmax(0,0.92fr) 1px minmax(0,1.08fr);grid-template-rows:auto auto auto auto 1fr;column-gap:0;}
.wd-head{grid-column:1;grid-row:1;max-width:none;padding-right:clamp(1.5rem,4vw,3.5rem);margin-bottom:clamp(1.4rem,3.2vh,2.2rem);}
.wd-head > p{max-width:46ch;}
.wd-item{display:contents;}
.wd-tab{
  grid-column:1;grid-row:var(--r);
  display:grid;grid-template-columns:2.2rem 1fr;align-items:baseline;
  margin-left:calc(-1 * clamp(1rem,2vw,1.6rem));
  padding:clamp(0.95rem,2vh,1.3rem) clamp(1rem,2vw,1.6rem);
  background:none;border:0;border-top:1px solid var(--line);
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:background-color .3s var(--ease);
}
.wd-n{grid-row:1 / span 2;font-size:0.72rem;font-weight:600;letter-spacing:0.14em;color:var(--accent-small);}
.wd-t{font-family:var(--font-body);font-weight:600;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.3;letter-spacing:-0.01em;color:var(--ink);}
.wd-s{grid-column:2;margin-top:0.3rem;font-size:0.86rem;line-height:1.4;color:var(--slate);}
.wd-tab:hover{background:rgba(28,36,54,0.04);}
/* focus selects on desktop, so the ring only ever sits on the navy (selected) row */
.wd-tab:focus-visible{outline:none;}
.wd-item.is-on .wd-tab:focus-visible{outline:2px solid #8FB2D9;outline-offset:-4px;}
.wd-item.is-on .wd-tab{background:#1C2436;border-top-color:#1C2436;}
.wd-item.is-on + .wd-item .wd-tab{border-top-color:transparent;}
.wd-item.is-on .wd-n{color:#8FB2D9;}
.wd-item.is-on .wd-t{color:#fff;}
.wd-item.is-on .wd-s{color:rgba(255,255,255,0.72);}
.wd-rule{grid-column:2;grid-row:1 / 6;background:var(--line);}
.wd-pane{
  grid-column:3;grid-row:2 / 6;align-self:start;
  padding-left:clamp(2rem,5vw,4.5rem);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.wd-item.is-on .wd-pane{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease), transform .35s var(--ease);}
.wd-pane-n{display:block;font-size:0.72rem;font-weight:600;letter-spacing:0.14em;color:var(--accent-small);}
.wd-pane h3{margin-top:0.8rem;font-family:var(--font-body);font-weight:600;font-size:clamp(1.45rem,1.9vw,1.8rem);line-height:1.2;letter-spacing:-0.02em;color:var(--ink);}
.wd-pane p{margin-top:1rem;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.7;color:var(--ink-2);max-width:44ch;}
.wd-more{display:inline-flex;gap:0.5rem;margin-top:1.6rem;font-weight:600;font-size:0.95rem;color:var(--accent-small);text-decoration:none;}
.wd-more:hover{text-decoration:underline;text-underline-offset:4px;}
/* phones: tap-to-open rows, the first open; the tab already names the offer */
@media (max-width:900px){
  .wd{display:block;}
  .wd-head{padding-right:0;}
  .wd-item{display:block;border-top:1px solid var(--line);}
  .wd-item:last-of-type{border-bottom:1px solid var(--line);}
  .wd-item.is-on{border-top-color:#1C2436;}
  .wd-tab{position:relative;width:100%;margin-left:0;border-top:0;padding:1rem 3rem 1rem 1rem;}
  .wd-tab::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);font-size:1.35rem;line-height:1;color:var(--accent-small);}
  .wd-item.is-on .wd-tab::after{content:"\2212";color:#8FB2D9;}
  .wd-pane{display:none;padding:1.1rem 1rem 1.4rem;opacity:1;visibility:visible;transform:none;transition:none;}
  .wd-item.is-on .wd-pane{display:block;}
  .wd-pane-n,.wd-pane h3,.wd-rule{display:none;}
  .wd-pane p{margin-top:0;font-size:1.02rem;max-width:none;}
  .wd-more{margin-top:1rem;}
  .wd-tab:focus-visible,.wd-item.is-on .wd-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
}

/* ---- Footer: the tagline sits under the wordmark ---------------------------------
   Moved out of the top row (Nara, 2026-09-11) at the same size. On desktop its
   left edge meets the wordmark's first letter rather than the text box: the heavy
   "M" sits slightly inside its box, so the tagline is inset by the same share of
   the wordmark's size. Centred with the rest of the footer on stacked layouts. */
.ftr-brand{min-width:0;}
.ftr-brand .ftr-sub p{
  margin:clamp(0.9rem,2vh,1.3rem) 0 0;max-width:46ch;
  padding-left:calc(clamp(1.6rem,5.2vw,4rem) * 0.0567);   /* the "M" inks 0.0567em inside its box (measured) */
}
@media (max-width:980px){ .ftr-brand .ftr-sub p{padding-left:0;margin-inline:auto;} }

/* ---- Home, where capacity is being lost: icons redrawn for the current copy ------
   01 the work is turned back at the check and makes the trip twice; 02 the person
   leaves with the stack and the next one relearns it tile by tile; 03 every line
   of work routes to one senior node that is never free. Same look as before:
   faint white tracks, #8FB2D9 lines and dots with a soft glow, #4C78A8 tiles.
   The motion is SMIL inside each SVG (paused off screen and held still under
   reduced motion by script.js); only the node pulse is CSS. */
.pv2{display:block;width:100%;overflow:hidden;opacity:0;transition:opacity .6s var(--ease) .15s;}
.prob.is-visible .pv2{opacity:1;}
.pv2 path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.pv2-track{stroke:rgba(255,255,255,0.14);stroke-width:2;}
.pv2-base{stroke:rgba(255,255,255,0.16);stroke-width:1;}
.pv2-line{stroke:var(--accent);stroke-width:2;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.15s cubic-bezier(.19,1,.22,1) .2s;}
.prob.is-visible .pv2-line{stroke-dashoffset:0;}
.pv2-gate{stroke:var(--accent);stroke-width:2;opacity:0.75;}
.pv2-no{stroke:rgba(245,241,232,0.72);stroke-width:1.8;}
.pv2-ok{stroke:var(--accent);stroke-width:2;}
.pv2-dot{fill:var(--accent);filter:drop-shadow(0 0 5px rgba(143,178,217,0.85));}
.pv2-person{fill:var(--accent);filter:drop-shadow(0 0 6px rgba(76,120,168,0.85));}
.pv2-node{fill:var(--accent);filter:drop-shadow(0 0 8px rgba(143,178,217,0.9));transform-box:fill-box;transform-origin:center;animation:pv2Pulse 1.6s ease-in-out infinite;}
.pv2-ring{fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:pv2Busy 1.6s ease-out infinite;}
@keyframes pv2Pulse{0%,100%{opacity:0.78;transform:scale(0.9);}50%{opacity:1;transform:scale(1.1);}}
@keyframes pv2Busy{0%{opacity:0.7;transform:scale(1);}100%{opacity:0;transform:scale(2.4);}}
@media (prefers-reduced-motion: reduce){ .pv2-node,.pv2-ring{animation:none;} .pv2-ring{opacity:0;} }

/* ---- Restructure (2026-09-11): one job per page -----------------------------------
   Links added where a section now hands off to another page. */
/* Home offer cards: each points to its section on Services */
.redo-more{
  display:inline-flex;align-items:center;gap:0.45rem;margin-top:0.9rem;
  font-size:0.88rem;font-weight:600;color:var(--accent);text-decoration:none;
}
.redo-more:hover{text-decoration:underline;text-underline-offset:4px;}
/* Services hero card: the trial card now points to the method below */
.hp-more{
  display:inline-flex;align-items:center;gap:0.45rem;margin:1.1rem 0 1rem;
  font-size:0.92rem;font-weight:600;color:#456D99;text-decoration:none;
}
.hp-more:hover{text-decoration:underline;text-underline-offset:4px;}

/* Team, Our Mission: the Vision's voice on a light band, beside the globe. The
   globe keeps its drag, spin and pins (script.js); with no sticky column here,
   sizeWrap leaves it at this CSS size. */
.ab-mission{background:var(--river-mist);padding:clamp(5rem,12vh,8rem) 0;}
.ab-mission-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:clamp(2rem,5vw,5rem);align-items:center;}
.ab-mission-eyebrow{margin-bottom:clamp(1rem,2.4vh,1.6rem);}
.ab-mission-stmt{
  margin:0;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.9rem,3.3vw,3.1rem);line-height:1.2;letter-spacing:-0.018em;
  color:var(--ink);text-wrap:balance;
}
.ab-mission-stmt em{font-style:italic;color:var(--signal);}
.tw-globe.ab-mission-globe{margin:0;justify-self:center;width:100%;}
.ab-mission-globe .globe-wrap{width:min(100%,56vh,540px);max-width:none;margin:0 auto;}
@media (max-width:980px){
  .ab-mission-grid{grid-template-columns:1fr;text-align:center;}
  .ab-mission-stmt{font-size:clamp(1.6rem,6.4vw,2.2rem);}
  .ab-mission-globe .globe-wrap{width:min(100%,420px);}
}
/* Home, what the redesign returns: with the three-workflow rail gone (the case
   studies live on Insights) the pin needs far less runway than the 360vh the
   Outcome 2 hold used; very short landscape screens keep their natural height. */
@media (min-height:501px){ .ev-stage{height:220vh;} }


/* ---- 5.6 supporting capabilities, rebuilt on the McKinsey panel ----------
   Each capability gets the reference's layout: the copy on a soft wash with
   the product shot bleeding off the right edge, one service at a time, with
   arrows to change between them. The wash is the one gradient on the site,
   allowed here by Nara as the exception; everything else keeps the rules -
   Cormorant for the display line, Inter for the rest, our blues, our button. */
.sp-deck{display:grid;margin-top:clamp(1.2rem,2.6vh,1.9rem);}
.sp-panel{
  grid-area:1/1;
  display:grid;grid-template-columns:minmax(0,0.96fr) minmax(0,1.04fr);
  align-items:center;
  border-radius:20px;overflow:hidden;
  background:linear-gradient(112deg,#EEF3FA 0%,#E4ECF8 42%,#DAE5F6 68%,#EDEFFA 100%);
  opacity:0;visibility:hidden;transform:translate3d(0,12px,0);
  transition:opacity .5s var(--ease), transform .6s cubic-bezier(.19,1,.22,1), visibility .5s;
}
.sp-panel.is-on{opacity:1;visibility:visible;transform:none;}
.sp-panel[hidden]{display:grid;}   /* hidden is the state, the cell still holds its size */

.sp-copy{padding:clamp(1.6rem,2.8vw,2.8rem);min-width:0;}
.sp-n{
  display:block;margin-bottom:clamp(0.6rem,1.4vh,0.9rem);
  font-size:0.72rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent-small);
}
.sp-panel h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.5vw,2.15rem);line-height:1.1;letter-spacing:-0.025em;
  color:var(--navy);margin-bottom:clamp(0.7rem,1.6vh,1rem);
}
.sp-panel h3 em{font-style:normal;color:var(--accent);}
.sp-panel .sp-copy > p{font-size:clamp(0.9rem,1.15vw,0.98rem);line-height:1.68;color:var(--ink-2);max-width:46ch;}
.sp-panel .sp-qual{
  margin-top:clamp(0.6rem,1.4vh,0.9rem);
  font-size:0.78rem!important;line-height:1.6!important;color:#77839A!important;max-width:52ch;
}
.sp-qual-label{font-weight:600;color:#5C6779;}
.sp-cta{margin-top:clamp(1rem,2.2vh,1.5rem);}

/* the shot is cropped by the panel on its right and bottom edges, the way the
   reference crops its product screenshot */
.sp-shot{align-self:end;min-width:0;margin:0;}
.sp-shot img{
  display:block;width:111%;max-width:none;height:auto;
  margin-bottom:calc(clamp(1.6rem,2.8vw,2.8rem) * -0.42);
}

.sp-ctrls{display:flex;align-items:center;gap:0.6rem;margin-top:clamp(0.9rem,2vh,1.4rem);}
.sp-count{
  margin-left:0.3rem;font-size:0.72rem;font-weight:600;letter-spacing:0.14em;
  color:var(--accent-small);
}

@media (prefers-reduced-motion:reduce){
  .sp-panel{transition:none;}
}

@media (max-width:980px){
  /* stacked: the copy first, then the shot, and both capabilities one after
     the other - there is no room to swap panels on a phone */
  .sp-deck{display:block;}
  .sp-panel,.sp-panel[hidden]{
    display:grid;grid-template-columns:1fr;
    opacity:1;visibility:visible;transform:none;
  }
  .sp-panel + .sp-panel{margin-top:clamp(1rem,2.4vh,1.6rem);}
  .sp-shot{align-self:stretch;}
  .sp-shot img{width:118%;margin-bottom:calc(clamp(1.6rem,2.8vw,2.8rem) * -0.3);}
  .sp-ctrls{display:none;}
}

/* the capability panels on a short laptop screen: the pin is one screen tall,
   so the copy column has to come down with it */
@media (max-height:820px) and (min-width:981px){
  .sp-deck{margin-top:clamp(0.8rem,1.8vh,1.2rem);}
  .sp-copy{padding:clamp(1.2rem,2.2vw,1.9rem);}
  .sp-panel h3{font-size:clamp(1.3rem,2.1vw,1.7rem);margin-bottom:0.6rem;}
  .sp-n{margin-bottom:0.55rem;}
  .sp-panel .sp-copy > p{font-size:0.9rem;line-height:1.6;}
  .sp-panel .sp-qual{margin-top:0.55rem;font-size:0.74rem!important;line-height:1.52!important;}
  .sp-cta{margin-top:0.9rem;}
  .sp-ctrls{margin-top:0.7rem;}
  .sp-arrow{width:40px;height:40px;}
  .sp-arrow svg{width:17px;height:17px;}
}

@media (max-height:705px) and (min-width:981px){
  #svc-support .svcs-head h2{font-size:clamp(1.2rem,2.1vw,1.5rem);}
  #svc-support .svcs-head > p{font-size:0.88rem;line-height:1.6;}
  .sp-deck{margin-top:0.7rem;}
  .sp-shot img{width:104%;}
  .sp-copy{padding:clamp(1rem,1.8vw,1.5rem);}
  .sp-n{font-size:0.68rem;margin-bottom:0.4rem;}
  .sp-cta{margin-top:0.75rem;padding:0.8rem 1.7rem;font-size:0.9rem;}
  .sp-ctrls{margin-top:0.55rem;}
  .sp-panel h3{font-size:clamp(1.2rem,1.9vw,1.5rem);margin-bottom:0.5rem;}
  .sp-panel .sp-copy > p{font-size:0.86rem;line-height:1.56;}
  .sp-panel .sp-qual{font-size:0.71rem!important;line-height:1.46!important;}
}

@media (max-width:700px){
  /* the whole screenshot at phone width is unreadable, so it is shown larger
     and cropped by the panel: the part that carries the meaning stays legible */
  .sp-shot img{width:205%;}
}

/* ---- MBA's operating model, on the Bain block Nara referenced ------------
   The copy holds the left column with the photograph filling the right half
   to the edge of the screen. Bain marks its list with bullets; ours keeps the
   site's numbering, so the three steps read in the same style as every other
   numbered list here. Everything else is our own: Cormorant display line,
   Inter body, our blues on the dark band. */
.fl-bain{padding-top:0;}
.bn{
  --bn-gutter:max(clamp(1.5rem,4vw,3rem), calc((100vw - 1400px) / 2 + 2rem));
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,0.94fr) minmax(0,1.06fr);
  grid-template-rows:auto auto;
  column-gap:clamp(1.5rem,3vw,3rem);
}
.bn-copy{
  grid-column:1;grid-row:1;min-width:0;
  padding:calc(112px + clamp(0.5rem,1.5vh,1.5rem)) 0 clamp(0.7rem,1.8vh,1.4rem) var(--bn-gutter);
}
.bn-copy h2{
  margin-top:0.7rem;
  font-size:clamp(1.45rem,calc(1.5vh + 1vw),2.5rem);line-height:1.08;letter-spacing:-0.03em;
  color:var(--on-dark-1);
}
.bn-copy h2 em{font-style:normal;color:var(--signal);}
.bn-lede{
  margin-top:clamp(0.5rem,1.3vh,0.95rem);max-width:56ch;
  font-size:clamp(0.84rem,calc(0.7vh + 0.35vw),1rem);line-height:1.62;color:var(--on-dark-2);
}

.bn-list{
  --bn-num:clamp(2rem,3vw,2.8rem);
  list-style:none;margin:clamp(0.7rem,1.7vh,1.2rem) 0 0;padding:0;
  border-top:1px solid rgba(213,216,221,0.13);
}
.bn-list li{
  display:grid;grid-template-columns:var(--bn-num) minmax(0,1fr);
  padding:clamp(0.4rem,1vh,0.72rem) 0;
  border-bottom:1px solid rgba(213,216,221,0.13);
}
.bn-n{
  align-self:start;margin-top:0.28em;
  font-size:0.72rem;font-weight:600;letter-spacing:0.14em;color:var(--signal);
}
.bn-list b{
  display:block;margin-bottom:0.3rem;
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(0.9rem,calc(0.62vh + 0.3vw),1.05rem);letter-spacing:-0.005em;color:var(--on-dark-1);
}
.bn-list p{font-size:clamp(0.78rem,calc(0.58vh + 0.26vw),0.92rem);line-height:1.54;color:var(--on-dark-3);max-width:58ch;}

.bn-link{
  display:inline-flex;align-items:center;gap:0.5rem;
  margin-top:clamp(0.6rem,1.5vh,1.1rem);
  font-size:clamp(0.84rem,calc(0.6vh + 0.28vw),0.95rem);font-weight:600;color:var(--signal);
}
.bn-link svg{width:15px;height:15px;transition:transform .25s var(--ease);}
.bn-link:hover svg{transform:translateX(3px);}

/* the photograph runs to the right edge of the screen, with the band's own
   colour carried a little way into it so the two halves meet without a seam */
/* the photograph starts at the top of the band and runs past the copy, so the
   panel below can cut into its lower corner - the reference's own move */
.bn-shot{
  grid-column:2;grid-row:1 / 3;
  position:relative;align-self:stretch;margin:0 0 clamp(2rem,5vh,3.4rem);overflow:hidden;
}
.bn-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;}
.bn-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* the fixed nav sits over the photograph: the top is darkened so the links stay readable */
  background:linear-gradient(180deg, rgba(28,36,54,0.82) 0, rgba(28,36,54,0.45) 96px, rgba(28,36,54,0) 190px);
}

/* the panel: the band's own colour, laid over the photograph's lower corner.
   Step 3 in full sits here, as the copy document places the three models
   inside that step rather than in a section of their own. */
.bn-cards{
  grid-column:1 / 3;grid-row:2;z-index:2;
  justify-self:start;width:min(100%, 82%);
  background:var(--midnight);
  padding:clamp(0.8rem,1.9vh,1.3rem) clamp(1.8rem,3vw,2.8rem) clamp(0.9rem,2.2vh,1.5rem) var(--bn-gutter);
}
/* the models open on demand: closed, the panel is a single line, so the block
   never reads as a wall of text */
.bn-toggle{
  display:inline-flex;align-items:center;gap:0.6rem;
  padding:0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(0.98rem,calc(0.7vh + 0.42vw),1.18rem);letter-spacing:-0.01em;
  color:var(--on-dark-1);
}
.bn-toggle:hover{color:var(--signal);}
.bn-toggle:focus-visible{outline:2px solid var(--signal);outline-offset:4px;}
.bn-chev{
  width:15px;height:15px;flex:none;color:var(--signal);
  transition:transform .35s var(--ease);
}
.bn-cards.is-open .bn-chev{transform:rotate(180deg);}

.bn-models{
  display:grid;grid-template-rows:0fr;
  opacity:0;margin-top:0;
  transition:grid-template-rows .45s var(--ease), opacity .35s var(--ease), margin-top .45s var(--ease);
}
.bn-models > *{overflow:hidden;min-height:0;}
.bn-cards.is-open .bn-models{
  grid-template-rows:1fr;opacity:1;
  margin-top:clamp(0.9rem,2vh,1.4rem);
}
.bn-card-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.2rem,2.4vw,2.4rem);
}
.bn-card{border-top:1px solid rgba(213,216,221,0.16);padding-top:clamp(0.6rem,1.4vh,0.95rem);}
.bn-card h4{
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(0.9rem,calc(0.62vh + 0.3vw),1.05rem);letter-spacing:-0.005em;
  color:var(--on-dark-1);margin-bottom:0.3rem;
}
.bn-card p{font-size:clamp(0.78rem,calc(0.56vh + 0.26vw),0.92rem);line-height:1.56;color:var(--on-dark-3);}
/* set on one line, and given room so it does not crowd the models above it */
.bn-cards-close{
  margin-top:clamp(1.2rem,2.8vh,2rem);max-width:none;
  font-size:clamp(0.8rem,calc(0.55vh + 0.26vw),0.9rem);line-height:1.55;color:var(--on-dark-2);
}



@media (max-width:980px){
  /* stacked: the copy first, then the photograph as a band, then the two cards */
  .bn{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
  .bn-copy{
    grid-column:1;grid-row:1;
    padding:calc(112px + clamp(1rem,3vh,2rem)) clamp(1.5rem,4vw,3rem) clamp(1.6rem,4vh,2.4rem);
  }
  .bn-shot{grid-column:1;grid-row:2;height:clamp(220px,42vw,340px);margin:0;}
  .bn-shot::after{background:linear-gradient(180deg, rgba(28,36,54,0.55) 0%, rgba(28,36,54,0) 30%);}
  .bn-cards{
    grid-column:1;grid-row:3;width:100%;
    padding:clamp(1.5rem,4vh,2.2rem) clamp(1.5rem,4vw,3rem);
  }
  .bn-card-row{grid-template-columns:1fr;row-gap:clamp(1.1rem,2.8vh,1.6rem);}
}



/* short laptop screens: the block still holds one screen, so the floors in the
   clamps above come down a step */
@media (max-height:770px) and (min-width:981px){
  .bn-copy{padding-top:calc(112px + 0.2rem);padding-bottom:0.5rem;}
  .bn-copy h2{font-size:clamp(1.25rem,calc(1.5vh + 1vw),2rem);}
  .bn-lede{margin-top:0.45rem;font-size:clamp(0.78rem,calc(0.7vh + 0.35vw),0.95rem);line-height:1.52;}
  .bn-list{margin-top:0.6rem;}
  .bn-list li{padding:0.3rem 0;}
  .bn-list b{font-size:clamp(0.84rem,calc(0.62vh + 0.3vw),1rem);margin-bottom:0.15rem;}
  .bn-list p{font-size:clamp(0.74rem,calc(0.58vh + 0.26vw),0.86rem);line-height:1.46;}
  .bn-link{margin-top:0.55rem;}
  .bn-cards{padding-top:0.7rem;padding-bottom:0.8rem;}
  .bn-toggle{font-size:clamp(0.95rem,calc(0.7vh + 0.42vw),1.08rem);}
  .bn-card{padding-top:0.4rem;}
  .bn-card h4{font-size:0.88rem;margin-bottom:0.2rem;}
  .bn-card p{font-size:clamp(0.74rem,calc(0.56vh + 0.26vw),0.86rem);line-height:1.46;}
  .bn-cards-close{margin-top:1rem;font-size:0.78rem;line-height:1.48;}
}

/* a step down before the short-screen tier, so the composition still holds one
   screen on a 13-inch laptop */
@media (max-height:880px) and (min-height:771px) and (min-width:981px){
  .bn-list li{padding:0.42rem 0;}
  .bn-list p{line-height:1.48;}
  .bn-lede{line-height:1.55;}
  .bn-cards-close{margin-top:1.2rem;line-height:1.5;}
  .bn-copy{padding-bottom:0.6rem;}
}

/* ---- Process redesign consulting: the photograph holds the left half -------
   The mirror of the operating model above: one image, bleeding to the left
   edge of the screen and held while the three steps scroll past on the right.
   The rail and the steps keep the behaviour they already had. */
.fl-mirror{padding:0;}
.pr-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);}
.pr-shot{
  position:sticky;top:0;align-self:start;
  height:100vh;height:100svh;
  margin:0;overflow:hidden;
}
.pr-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.pr-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* the fixed nav sits over the photograph, and the band's colour is carried a
     little way in from the right so the two halves meet without a seam */
  background:linear-gradient(180deg, rgba(28,36,54,0.82) 0, rgba(28,36,54,0.45) 96px, rgba(28,36,54,0) 190px),
    linear-gradient(270deg, rgba(28,36,54,0.5) 0, rgba(28,36,54,0) 18%);
}
.pr-copy{
  min-width:0;
  padding:calc(112px + clamp(1rem,3vh,2.2rem))
          max(clamp(1.5rem,4vw,3rem), calc((100vw - 1400px) / 2 + 2rem))
          clamp(3rem,7vh,5rem)
          clamp(2rem,3.6vw,3.5rem);
}
/* with the visuals gone, the body is the rail and the steps; the rail gets a
   little more room so a two-word step does not wrap */
.fl-mirror .fl-body{grid-template-columns:clamp(150px,13vw,196px) minmax(0,1fr);margin-top:clamp(1.6rem,3.4vh,2.6rem);}

@media (max-width:980px){
  /* stacked: the photograph becomes a band above the copy */
  .pr-grid{grid-template-columns:1fr;}
  .pr-shot{position:static;height:clamp(220px,42vw,340px);}
  .pr-shot::after{background:linear-gradient(180deg, rgba(28,36,54,0.55) 0%, rgba(28,36,54,0) 30%);}
  .pr-copy{
    padding:clamp(1.8rem,4.5vh,2.6rem) clamp(1.5rem,4vw,3rem) clamp(2.4rem,6vh,3.6rem);
  }
  /* stacked, the rail is hidden as it is in the other sequence blocks */
  .fl-mirror .fl-body{grid-template-columns:1fr;}
}

/* Process redesign: tighter rhythm. Each step used to hold a full screen, which
   left most of a screen between the lead paragraph and step 01 and between one
   step and the next. The steps now take a little over half a screen each, and
   the rail's held box shrinks by the same amount and is centred in the screen,
   so the lit rail item still sits level with the step being read. */
@media (min-width:981px){
  .fl-mirror .fl-body{margin-top:clamp(0.6rem,1.4vh,1.1rem);}
  .fl-mirror .fl-step{min-height:56vh;padding:clamp(1rem,2.6vh,1.8rem) 0;}
  .fl-mirror .fl-rail{top:22vh;height:56vh;}
  .fl-mirror .fl-foot{margin-top:0;}
}

/* Process redesign: the closing line in Inter, a size down from the display serif */
#svc-redesign .fl-foot .fl-close{
  font-family:var(--font-body);font-weight:500;
  font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.62;letter-spacing:-0.005em;
  max-width:62ch;
}

/* ---- Services hero, on the McKinsey band ----------------------------------
   A short band carries the eyebrow, the headline, the descriptor and the two
   actions over a generated river-of-light background that arcs in from the
   right; the longer supporting copy and the hero note sit underneath as a
   centred statement, the way the reference sets its intro line. */
.sh{
  position:relative;overflow:hidden;
  background:var(--midnight);
  min-height:clamp(540px,72vh,720px);
  display:flex;align-items:center;
  padding:calc(112px + clamp(1.5rem,4vh,3rem)) 0 clamp(3rem,8vh,5rem);
}
.sh-bg{position:absolute;inset:0;z-index:0;}
.sh-bg img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block;}
.sh-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(28,36,54,0.72) 0%, rgba(28,36,54,0.35) 38%, rgba(28,36,54,0) 62%),
    linear-gradient(180deg, rgba(28,36,54,0.55) 0, rgba(28,36,54,0) 180px);
}
.sh-inner{position:relative;z-index:1;}
.sh-eyebrow{color:var(--signal);}
.sh h1{
  margin-top:clamp(0.4rem,1vh,0.8rem);max-width:19em;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.06;letter-spacing:-0.03em;
  color:var(--on-dark-1);
}
.sh h1 em{font-style:normal;color:var(--signal);}
.sh-descriptor{
  margin-top:clamp(1rem,2.4vh,1.5rem);max-width:48ch;
  font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.6;color:var(--on-dark-2);
}
.sh-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,2.4vw,1.8rem);
  margin-top:clamp(1.6rem,3.6vh,2.4rem);
}
.sh-link{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.95rem;font-weight:600;color:var(--on-dark-1);
}
.sh-link svg{width:15px;height:15px;color:var(--signal);transition:transform .25s var(--ease);}
.sh-link:hover svg{transform:translateX(3px);}

.sh-statement{background:var(--paper);padding:clamp(3rem,8vh,5rem) 0 0;}
.sh-statement-inner{
  max-width:980px;text-align:center;
  padding-bottom:clamp(2.6rem,6vh,4rem);
  border-bottom:1px solid var(--line);
}
.sh-support{
  font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.5;letter-spacing:-0.01em;
  color:var(--ink);
}
.sh-note{
  margin-top:clamp(1rem,2.4vh,1.5rem);
  font-size:0.9rem;line-height:1.6;color:var(--ink-2);
}

@media (max-width:980px){
  .sh{min-height:0;padding:calc(112px + 2rem) 0 clamp(2.6rem,6vh,3.6rem);}
  .sh-bg img{object-position:72% center;}
  .sh-bg::after{background:linear-gradient(180deg, rgba(28,36,54,0.7) 0%, rgba(28,36,54,0.45) 55%, rgba(28,36,54,0.7) 100%);}
  .sh-actions{flex-direction:column;align-items:stretch;}
  .sh-actions .svc-cta{width:100%;}
  .sh-link{justify-content:center;}
  .sh-statement-inner{text-align:left;}
}

/* the hero's one action is a dark, see-through button rather than a text link */
.sh-link{
  gap:0.6rem;padding:0.95rem 1.7rem;border-radius:8px;
  background:rgba(28,36,54,0.42);
  border:1px solid rgba(213,216,221,0.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.sh-link:hover{background:rgba(28,36,54,0.62);border-color:rgba(213,216,221,0.5);}
.sh-link:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
@media (max-width:980px){
  .sh-link{width:100%;}
}

/* ---- Home, What changes for your firm, on the LEK layout -----------------
   A deep blue band: headline and supporting line on the left, a photograph on
   the right, and the three steps as a row across the bottom. LEK marks its row
   with icons; ours keeps the site's numbers. The background reuses the soft
   flow lattice (the site's "how it works" pattern) rather than LEK's chevrons,
   so the page does not gain a new background treatment. */
.knows-lek{
  background:linear-gradient(180deg, var(--midnight) 0%, #1C2436 100%);
  overflow:hidden;
}
.knows-lek > .wrap{position:relative;z-index:2;}
.knows-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.knows-lek .knows-head{max-width:none;}
.knows-lek .knows-head .eyebrow{color:var(--signal);}
.knows-lek .knows-head h2{color:var(--on-dark-1);}
.knows-lek .knows-head > p{color:var(--on-dark-2);max-width:52ch;}
.knows-shot{margin:0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:3/2;}
.knows-shot img{display:block;width:100%;height:100%;object-fit:cover;}

.knows-lek .knows-steps{
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.5rem,3.4vw,3.2rem);
  margin-top:clamp(1.8rem,4.4vh,3rem);
}
.knows-lek .knows-step,
.knows-lek .knows-step:last-child{
  display:block;padding:clamp(1rem,2.2vh,1.4rem) 0 0;
  border-top:1px solid rgba(213,216,221,0.16);border-bottom:0;
}
.knows-lek .knows-n{
  display:block;margin-bottom:0.55rem;
  font-size:0.72rem;font-weight:600;letter-spacing:0.14em;line-height:1.3;
  color:var(--on-dark-3);
}
.knows-lek .knows-step.is-on .knows-n{color:var(--signal);}
.knows-lek .knows-body h3{
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.35;color:var(--on-dark-1);
  margin-bottom:0.4rem;
}
.knows-lek .knows-body p{font-size:clamp(0.86rem,1vw,0.94rem);line-height:1.6;color:var(--on-dark-3);}

/* short laptop screens: the band still holds one screen */
@media (max-height:820px) and (min-width:981px){
  .knows-pin > .knows-lek{padding-top:calc(112px + 0.8rem);padding-bottom:1.4rem;}
  .knows-lek .knows-head h2{font-size:clamp(1.7rem,2.8vw,2.3rem);}
  .knows-lek .knows-head > p{margin-top:0.7rem;font-size:0.95rem;line-height:1.6;}
  .knows-shot{aspect-ratio:16/10;}
  .knows-lek .knows-steps{margin-top:1.2rem;}
}

@media (max-width:980px){
  .knows-top{grid-template-columns:1fr;}
  .knows-lek .knows-steps{grid-template-columns:1fr;row-gap:clamp(1.2rem,3vh,1.6rem);}
}

/* the navy has to fill the whole held screen: the band is shorter than the pin,
   so it was sitting in the middle with white showing above and below */
@media (min-width:981px) and (min-height:521px){
  .knows-pin{background:var(--midnight);}
  .knows-pin > .knows-lek{
    min-height:100vh;min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
  }
}
@media (max-width:980px), (max-height:520px){
  .knows-lek{padding-bottom:var(--section-pad);}
}

/* the lattice's scrim is mixed from this band's own navy */
.knows-lek.has-lattice{--scrim:28,36,54;}

/* ---- phones: the three steps swipe one at a time ---- */
.knows-ctrls{display:none;}
@media (max-width:980px){
  .knows-lek .knows-steps{
    display:flex;gap:1rem;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .knows-lek .knows-steps::-webkit-scrollbar{display:none;}
  .knows-lek .knows-step,
  .knows-lek .knows-step:last-child{
    flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;
    padding:1.3rem 1.2rem 1.4rem;border:1px solid rgba(213,216,221,0.16);
    border-radius:var(--r-card);background:rgba(255,255,255,0.03);
  }
  .knows-lek .knows-n{color:var(--signal);}
  .knows-ctrls{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:1rem;
  }
  .knows-arrow{
    width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
    background:rgba(28,36,54,0.4);border:1px solid rgba(213,216,221,0.28);
    color:var(--on-dark-1);cursor:pointer;
    transition:opacity .25s var(--ease), background .2s var(--ease);
  }
  .knows-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .knows-arrow[disabled]{opacity:0.3;cursor:default;}
  .knows-dots{display:flex;gap:0.6rem;}
  .knows-dots button{
    width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
    background:rgba(213,216,221,0.3);transition:width .3s var(--ease), background .3s var(--ease);
  }
  .knows-dots button.is-on{width:22px;background:var(--signal);}
}

/* ---- Insights hero and case studies, on Bain's Insights layout -------------
   Hero: the headline on the left, the lede on the right, and the type filter
   on its own ruled row beneath, on plain white. Case studies: the section
   intro leads under a large river-of-light image, the three case studies sit
   in a numbered list beside it, and the chosen case opens in full below. */
.ih{background:var(--paper);text-align:left;padding:calc(112px + clamp(1.4rem,3.4vh,2.4rem)) 0 0;}
.ih .in-dots{display:none;}
.ih-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
  padding-bottom:clamp(2.2rem,5vh,3.4rem);
}
.ih .in-eyebrow{display:block;justify-content:flex-start;text-align:left;margin-bottom:clamp(0.8rem,1.8vh,1.2rem);}
.ih h1{margin:0;max-width:none;text-align:left;font-size:clamp(2rem,3.5vw,3.1rem);}
.ih .in-lede{margin:clamp(1.9rem,4vh,2.5rem) 0 0;max-width:52ch;text-align:left;}
.ih-filter{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(0.9rem,2vh,1.2rem) 0;
}
.ih-filter .in-types{margin-top:0;justify-content:flex-end;}
.ih-filter .in-type{border-radius:4px;background:var(--paper);color:var(--accent-small);border-color:var(--line);}
.ih-filter .in-type.is-on{background:var(--accent);border-color:var(--accent);color:#fff;}

.in-body{padding-top:clamp(2rem,4.4vh,3rem);}
.csb-top{
  display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  gap:0;align-items:start;
}
.csb-feature{padding-right:clamp(1.5rem,3vw,2.6rem);border-right:1px solid var(--line);}
.csb-img{margin:0 0 clamp(1.2rem,2.6vh,1.6rem);aspect-ratio:16/9;overflow:hidden;background:var(--midnight);}
.csb-img img{display:block;width:100%;height:100%;object-fit:cover;}
.csb-feature .cs-head{max-width:none;}

.csb-list{padding-left:clamp(1.5rem,3vw,2.6rem);}
.csb-list ol{list-style:none;margin:0;padding:0;border-top:3px solid var(--accent);}
.csb-item{
  display:grid;grid-template-columns:2.2rem minmax(0,1fr);align-items:center;
  width:100%;padding:clamp(1rem,2.4vh,1.5rem) 0;
  background:none;border:0;border-bottom:1px solid var(--line);
  text-align:left;cursor:pointer;font:inherit;color:inherit;
}
.csb-n{font-size:1.9rem;font-weight:500;line-height:1;color:var(--ink);}
.csb-txt{display:flex;flex-direction:column;gap:0.3rem;}
.csb-topic{font-size:0.8rem;font-weight:600;color:var(--accent-small);}
.csb-t{font-family:var(--font-body);font-size:clamp(1rem,1.3vw,1.14rem);font-weight:600;line-height:1.3;color:var(--ink);}
.csb-type{font-size:0.8rem;color:var(--slate);}
.csb-item:hover .csb-t{color:var(--accent);}
.csb-item.is-on .csb-n,.csb-item.is-on .csb-t{color:var(--accent);}
.csb-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.csb-top + .cs-rows{margin-top:clamp(2.4rem,5.4vh,3.6rem);padding-top:clamp(2.4rem,5.4vh,3.6rem);border-top:1px solid var(--line);}
.cs-img.cs-photo{object-position:center;background:var(--midnight);}

@media (max-width:980px){
  .ih-top{grid-template-columns:1fr;gap:0.2rem;}
  .ih .in-lede{margin-top:1rem;}
  .ih-filter .in-types{justify-content:flex-start;}
  .csb-top{grid-template-columns:1fr;}
  .csb-feature{padding-right:0;border-right:0;}
  .csb-list{padding-left:0;margin-top:clamp(1.6rem,4vh,2.2rem);}
  /* the list already ends on a rule, so the detail does not need a second one */
  .csb-top + .cs-rows{border-top:0;padding-top:0;}
}

/* ---- What it costs: the river of light below the line ---------------------
   The Services hero's river, animated, fills the band under the horizon in
   place of the rising light bars. It is dimmed and fades up into the section's
   navy so the statement above keeps all the contrast it had. */
.why-river{
  position:absolute;left:0;right:0;top:73%;bottom:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
  opacity:0;transition:opacity 1.6s var(--ease) .3s;
}
.why-bg.is-visible .why-river{opacity:1;}
.why-river video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:62% 38%;
  filter:brightness(0.62) saturate(0.9);
}
.why-river::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(28,36,54,0.55) 0%, rgba(28,36,54,0.1) 30%, rgba(28,36,54,0.1) 70%, rgba(28,36,54,0.55) 100%);
}

/* ---- Team hero: the glass towers behind the copy ---------------------------
   Full-bleed photograph under a deep navy tint, darkest on the left where the
   headline sits. It drifts slowly up the towers and eases in, then back, on a
   long cycle; still under reduced motion. Replaces the lattice. */
.th-photo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.th-photo img{
  position:absolute;left:0;top:0;width:100%;height:118%;
  object-fit:cover;object-position:50% 60%;
  filter:saturate(0.7) brightness(0.8);
  transform:translate3d(0,-2%,0) scale(1.04);
  animation:thDrift 32s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes thDrift{
  from{transform:translate3d(0,-2%,0) scale(1.04);}
  to{transform:translate3d(-1.5%,-12%,0) scale(1.12);}
}
.th-photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(28,36,54,0.96) 0%, rgba(28,36,54,0.86) 40%, rgba(28,36,54,0.62) 70%, rgba(28,36,54,0.5) 100%),
    linear-gradient(180deg, rgba(28,36,54,0.7) 0, rgba(28,36,54,0) 26%, rgba(28,36,54,0) 70%, rgba(28,36,54,0.85) 100%);
  mix-blend-mode:normal;
}
.th-photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(76,120,168,0.18);mix-blend-mode:color;
}
@media (prefers-reduced-motion:reduce){ .th-photo img{animation:none;} }
@media (max-width:980px){
  .th-photo::after{background:linear-gradient(180deg, rgba(28,36,54,0.9) 0%, rgba(28,36,54,0.82) 60%, rgba(28,36,54,0.92) 100%);}
}

/* ---- Team: Our Mission holds the full screen, like the Vision --------------
   The statement and globe fill one screen, centred below the nav, and stay put
   for most of a screen of scrolling. */
@media (min-width:981px) and (min-height:521px){
  #ab-mission{padding:0;}
  .ab-mission-stage{position:relative;height:170vh;height:170svh;}
  .ab-mission-stage > .ab-mission-grid{
    position:sticky;top:0;box-sizing:border-box;
    height:100vh;height:100svh;
    padding-top:112px;
  }
  #ab-mission .ab-mission-stmt{font-size:clamp(2.1rem,3.9vw,3.7rem);line-height:1.16;}
  #ab-mission .ab-mission-globe .globe-wrap{width:min(100%,62vh,600px);}
}

/* ---- Home, What the redesign returns: the outcomes as a carousel -----------
   Bain's featured client story, on our dark band: tag, title and figure boxes
   on the left, a photograph on the right, dots and arrows beneath, and one
   button to the case studies. Slides change only on request. */
.evc{margin-top:clamp(1.4rem,3.2vh,2.4rem);}
.evc-slides{display:grid;}
.evc-slide{
  grid-area:1/1;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
  gap:clamp(1.6rem,4vw,4rem);align-items:center;
  opacity:0;visibility:hidden;transform:translate3d(14px,0,0);
  transition:opacity .45s var(--ease), transform .55s cubic-bezier(.19,1,.22,1), visibility .45s;
}
.evc-slide[hidden]{display:grid;}
.evc-slide.is-on{opacity:1;visibility:visible;transform:none;}
.evc-kick{
  display:block;padding-bottom:0.7rem;margin-bottom:clamp(0.8rem,1.8vh,1.2rem);
  border-bottom:1px solid rgba(213,216,221,0.2);
  font-size:0.72rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--signal);
}
.evc-copy h3{
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.15;letter-spacing:-0.02em;
  color:var(--on-dark-1);
}
.evc-lead{margin-top:clamp(0.7rem,1.6vh,1rem);font-size:clamp(0.95rem,1.2vw,1.05rem);line-height:1.62;color:var(--on-dark-2);max-width:52ch;}
.evc-boxes{display:grid;grid-template-columns:minmax(0,1fr);gap:0.7rem;margin-top:clamp(1rem,2.4vh,1.5rem);}
.evc-boxes-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.evc-box{
  background:rgba(255,255,255,0.05);border:1px solid rgba(213,216,221,0.1);
  padding:clamp(0.9rem,2vh,1.3rem) clamp(0.9rem,1.4vw,1.2rem);
}
.evc-box p{font-size:clamp(0.84rem,1vw,0.92rem);line-height:1.55;color:var(--on-dark-2);}
.evc-box-wide{max-width:34rem;}
.evc-fig{
  display:flex;align-items:baseline;gap:0.1rem;margin-bottom:0.5rem;
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1;letter-spacing:-0.03em;color:var(--on-dark-1);
}
.evc-fig small{margin-left:0.45rem;font-size:0.32em;font-weight:500;letter-spacing:0;color:var(--on-dark-2);}
.evc-note{margin-top:0.4rem;font-size:0.8rem !important;color:var(--on-dark-3) !important;}
.evc-box-t{display:block;margin-bottom:0.6rem;font-size:0.9rem;font-weight:600;color:var(--on-dark-1);}
.evc-ba{display:block;margin-top:0.5rem;font-size:0.66rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--signal);}
.evc-ba + p{margin-top:0.15rem;}
.evc-qual{margin-top:clamp(0.9rem,2vh,1.3rem);font-size:0.8rem;line-height:1.55;color:var(--on-dark-3);max-width:60ch;}
.evc-qual span{font-weight:600;color:var(--on-dark-2);}
.evc-img{margin:0;aspect-ratio:1/1;max-height:min(58vh,560px);width:100%;overflow:hidden;justify-self:end;}
.evc-img img{display:block;width:100%;height:100%;object-fit:cover;}

.evc-ctrls{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:clamp(1.2rem,2.8vh,1.8rem);}
.evc-arrow{
  width:40px;height:40px;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid rgba(213,216,221,0.3);color:var(--on-dark-1);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.evc-arrow:hover{background:rgba(255,255,255,0.08);border-color:rgba(213,216,221,0.6);}
.evc-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.evc-dots{display:flex;gap:0.7rem;}
.evc-dots button{width:10px;height:10px;padding:0;border:0;border-radius:999px;cursor:pointer;background:rgba(213,216,221,0.3);transition:background .25s var(--ease), transform .25s var(--ease);}
.evc-dots button.is-on{background:var(--signal);transform:scale(1.2);}
.evc-arrow:focus-visible,.evc-dots button:focus-visible,.evc-btn:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
.evc-cta{display:flex;justify-content:center;margin-top:clamp(1rem,2.4vh,1.6rem);}
.evc-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.95rem 2.2rem;border:1px solid rgba(213,216,221,0.4);border-radius:8px;
  font-size:0.9rem;font-weight:600;letter-spacing:0.02em;color:var(--on-dark-1);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.evc-btn:hover{background:rgba(255,255,255,0.08);border-color:rgba(213,216,221,0.7);}

@media (max-height:820px) and (min-width:981px){
  .evc-img{max-height:50vh;}
  .evc-copy h3{font-size:clamp(1.35rem,2.2vw,1.9rem);}
  .evc-box p{font-size:0.82rem;line-height:1.48;}
  .evc-fig{font-size:clamp(2rem,3.6vw,2.8rem);}
}
@media (max-width:980px){
  .evc-slide{grid-template-columns:1fr;align-items:start;}
  .evc-img{order:-1;max-height:none;aspect-ratio:4/3;}
  .evc-boxes-3{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){ .evc-slide{transition:none;} }

/* fit the carousel, its dots and the button inside one held screen: the
   headline and lede share a row, and the photograph and boxes come down */
@media (min-width:981px){
  #evidenceStage .ev-head{
    max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(2rem,5vw,5rem);align-items:end;
  }
  #evidenceStage .ev-head .eyebrow{grid-column:1 / -1;}
  #evidenceStage .ev-head h2{grid-column:1;margin-bottom:0;}
  #evidenceStage .ev-head .ev-lede{grid-column:2;margin:0;font-size:clamp(0.92rem,1.1vw,1rem);line-height:1.6;}
  .evc-img{max-height:min(46vh,480px);max-width:min(46vh,480px);}
  .evc-copy h3{font-size:clamp(1.4rem,2.2vw,2rem);}
  .evc-lead{font-size:clamp(0.9rem,1.05vw,0.98rem);line-height:1.55;}
  .evc-box{padding:clamp(0.7rem,1.6vh,1rem) clamp(0.8rem,1.2vw,1rem);}
  .evc-box p{font-size:clamp(0.8rem,0.92vw,0.86rem);line-height:1.45;}
  .evc-ba{margin-top:0.35rem;}
  .evc-fig{font-size:clamp(2.2rem,3.8vw,3.2rem);}
  .evc-ctrls{margin-top:clamp(0.9rem,2vh,1.3rem);}
  .evc-cta{margin-top:clamp(0.8rem,1.8vh,1.2rem);}
}
/* the pin already clears the nav; the inner wrap's own top padding doubled it */
@media (min-width:981px){
  #evidenceStage .ev-pin > .ev-inner{padding-top:clamp(1.2rem,3vh,2.2rem);padding-bottom:clamp(1rem,2.6vh,2rem);}
}
@media (min-width:981px){
  #evidenceStage .ev-pin:not(.is-drifting){padding-top:112px;box-sizing:border-box;}
}

/* ---- Home, Where capacity is being lost: the Blackshard list ---------------
   Headline and lede on the left over the river of light (enlarged, and shaded
   behind the copy); the three problems on the right as rows of title, then
   description and cost line, divided by hairlines. */
.probs-list{background:#1C2436;}
.probs-river{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.probs-river video{
  position:absolute;top:50%;left:-22%;width:95%;height:auto;min-height:120%;
  transform:translateY(-50%) scale(1.25);
  object-fit:cover;filter:brightness(0.72) saturate(0.95);
}
.probs-river::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 55% at 26% 42%, rgba(28,36,54,0.78) 0%, rgba(28,36,54,0.45) 55%, rgba(28,36,54,0) 80%),
    linear-gradient(90deg, rgba(28,36,54,0) 0%, rgba(28,36,54,0.2) 40%, rgba(28,36,54,0.92) 58%, #1C2436 72%);
}
.probs-list > .wrap{position:relative;z-index:2;}
.probs-layout{
  display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,6vw,6.5rem);align-items:start;
}
.probs-list .probs-head{max-width:none;}
.probs-list .probs-head h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.2rem,4.2vw,3.8rem) !important;line-height:1.04;letter-spacing:-0.03em;
  color:var(--on-dark-1);max-width:12ch;
}
.probs-list .probs-head h2 em{font-style:normal;color:var(--signal);}
.probs-list .probs-head p{margin-top:clamp(1rem,2.4vh,1.5rem) !important;max-width:44ch;font-size:clamp(0.9rem,1.05vw,0.98rem) !important;line-height:1.6;color:var(--on-dark-2);}

.probs-rows{list-style:none;margin:0;padding:0;}
.prob-row{
  display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);
  gap:clamp(1.2rem,3vw,2.6rem);align-items:start;
  padding:clamp(1.1rem,2.8vh,1.9rem) 0;
  border-bottom:1px solid rgba(143,178,217,0.18);
}
.prob-row:first-child{padding-top:0.3rem;}
.prob-row h3{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.15;letter-spacing:-0.015em;
  color:var(--signal);
}
.prob-row-body p{margin:0;font-size:clamp(0.92rem,1.1vw,1.02rem);line-height:1.6;color:var(--on-dark-1);opacity:0.9;}
.prob-row-body .prob-cost{
  margin-top:0.6rem;font-size:clamp(0.84rem,0.98vw,0.92rem);line-height:1.5;
  color:var(--on-dark-3);opacity:1;font-style:italic;
}

@media (max-width:980px){
  .probs-layout{grid-template-columns:1fr;gap:clamp(1.4rem,3.4vh,2rem);}
  .probs-list .probs-head h2{font-size:clamp(1.8rem,7.4vw,2.3rem) !important;max-width:none;}
  .prob-row{grid-template-columns:1fr;gap:0.5rem;padding:clamp(0.9rem,2.2vh,1.2rem) 0;}
  .probs-river video{left:-40%;width:180%;top:22%;}
  .probs-river::after{background:linear-gradient(180deg, rgba(28,36,54,0.55) 0%, rgba(28,36,54,0.75) 30%, rgba(28,36,54,0.94) 55%, #1C2436 75%);}
}
/* the card-era cost line carried its own rule; in a row it doubles the divider */
.prob-row-body .prob-cost{border-top:0 !important;padding-top:0 !important;}
.probs-list .probs-head h2{max-width:15ch;}

/* ---- What the redesign returns, on white ---------------------------------
   The band follows Bain's white featured story: navy type, grey figure boxes,
   the site's light-band blues. The lede's left edge lines up with the left
   edge of the photograph beneath it. */
#evidenceStage .ev-pin{
  --accent:#4C78A8;--accent-small:#456D99;--signal:#4C78A8;
  background:var(--paper);
}
#evidenceStage .ev-pin::before,#evidenceStage .ev-pin::after{display:none;}
#evidenceStage .ev-head .eyebrow{color:var(--accent-small);}
#evidenceStage .ev-head h2{color:var(--ink);}
#evidenceStage .ev-head h2 em{color:var(--accent);}
#evidenceStage .ev-head .ev-lede{color:var(--ink-2);}
#evidenceStage .evc-kick{color:var(--accent-small);border-bottom-color:var(--line);}
#evidenceStage .evc-copy h3{color:var(--ink);}
#evidenceStage .evc-lead{color:var(--ink-2);}
#evidenceStage .evc-box{background:#F1F3F6;border-color:transparent;}
#evidenceStage .evc-box p{color:var(--ink-2);}
#evidenceStage .evc-fig{color:var(--ink);}
#evidenceStage .evc-fig small{color:var(--ink-2);}
#evidenceStage .evc-note{color:var(--slate) !important;}
#evidenceStage .evc-box-t{color:var(--ink);}
#evidenceStage .evc-ba{color:var(--accent-small);}
#evidenceStage .evc-qual{color:var(--slate);}
#evidenceStage .evc-qual span{color:var(--ink-2);}
#evidenceStage .evc-arrow{border-color:rgba(28,36,54,0.25);color:var(--ink);}
#evidenceStage .evc-arrow:hover{background:rgba(28,36,54,0.05);border-color:rgba(28,36,54,0.5);}
#evidenceStage .evc-btn{border-color:rgba(28,36,54,0.35);color:var(--ink);}
#evidenceStage .evc-btn:hover{background:rgba(28,36,54,0.05);border-color:rgba(28,36,54,0.6);}
#evidenceStage .evc-arrow:focus-visible,#evidenceStage .evc-dots button:focus-visible,#evidenceStage .evc-btn:focus-visible{outline-color:var(--accent);}

@media (min-width:981px){
  /* the lede takes exactly the photograph's width, set against the same right
     edge, so the two left edges meet */
  #evidenceStage .ev-head .ev-lede{justify-self:end;width:min(100%,46vh,480px);}
  .evc-cta{margin-top:clamp(2rem,4.6vh,3rem);}
  #evidenceStage .ev-pin > .ev-inner{padding-top:clamp(0.6rem,1.6vh,1.2rem);}
}


/* ---- One pagination style, site-wide: the hero's lines ----------------------
   Every slide indicator is a short line that lengthens when it is the current
   one, as the Home hero's statement ticks already do. */
.evc-dots,.knows-dots{display:flex;align-items:center;gap:0.7rem;}
.evc-dots button,.knows-dots button{
  width:26px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;transform:none;
  background:rgba(255,255,255,0.24);
  transition:background .35s var(--ease), width .35s var(--ease);
  position:relative;
}
/* a taller invisible hit area, so a 3px line is still easy to tap */
.evc-dots button::before,.knows-dots button::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px;}
.evc-dots button:hover,.knows-dots button:hover{background:rgba(255,255,255,0.5);}
.evc-dots button.is-on,.knows-dots button.is-on{width:38px;transform:none;background:var(--accent);box-shadow:0 0 12px rgba(76,120,168,0.8);}
/* on a light band the idle lines are navy, not white */
#evidenceStage .evc-dots button{background:rgba(28,36,54,0.2);}
#evidenceStage .evc-dots button:hover{background:rgba(28,36,54,0.4);}
#evidenceStage .evc-dots button.is-on{background:var(--accent);box-shadow:none;}

/* ---- Home hero: a softer shadow behind the statements ----------------------
   Each word sits in a clipped mask for its reveal, and the old wide, near-black
   shadow was cut off at every mask edge, leaving dark blocks around the words.
   Once the words have landed the mask opens, and the shadow is now a soft navy
   glow that blends into the film rather than outlining the type. */
.hero h1.is-breathing .hw,.hero h1.no-breathe .hw,
.hero .hero-line.is-breathing .hw,.hero .hero-line.no-breathe .hw{overflow:visible;}
@media (prefers-reduced-motion: reduce){ .hero h1 .hw,.hero .hero-line .hw{overflow:visible;} }
.hero h1,
.hero-line{
  text-shadow:0 0 30px rgba(28,36,54,0.55), 0 1px 3px rgba(28,36,54,0.4);
}
.hero-lockup .hero-eyebrow{text-shadow:0 0 18px rgba(28,36,54,0.6), 0 1px 2px rgba(28,36,54,0.45);}

/* ---- Hero touches: the eyebrow dot on Services and Insights; Home a shade darker ---- */
.sh-eyebrow{display:inline-flex;align-items:center;gap:0.65rem;}
.sh-eyebrow i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--accent);box-shadow:0 0 12px var(--accent);}
.ih .in-eyebrow{display:flex;align-items:center;justify-content:flex-start;gap:0.65rem;}
.hero-video{filter:brightness(0.8);}   /* the film itself a shade darker; the navy scrim above is unchanged */
/* the wiped headline's accent words keep their colour inside the masks */
[data-hero-reveal] em .mask-w > i{color:inherit;}

/* ---- Home, What MBA can do: the river, full bleed and larger ---------------
   The same river as the other Home sections, but filling the whole band and
   scaled up so its streams sweep past the edges; a #1C2436 tint keeps the
   heading and the cards clear, and the cards take a little of the navy so
   the moving light never runs through their text. */
.redo-river{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.redo-river video{
  position:absolute;left:50%;top:50%;
  width:180%;height:180%;object-fit:cover;object-position:62% 45%;
  transform:translate(-50%,-50%);
  filter:brightness(0.9);
}
.redo-river::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(28,36,54,0.82) 0%, rgba(28,36,54,0.55) 35%, rgba(28,36,54,0.6) 70%, rgba(28,36,54,0.85) 100%);
}
#redesigns > .wrap{position:relative;z-index:2;}
#redesigns .redo-card{
  background:linear-gradient(168deg, rgba(28,36,54,0.78) 0%, rgba(28,36,54,0.62) 62%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* ---- Services: the operating model holds before process redesign ----------
   A transparent spacer between the two lets the model stay pinned, full
   screen, for most of a screen of scrolling; then process redesign slides up
   over it as before. Desktop only, like the pairing itself. */
.fl-hold{display:none;}
@media (min-width:981px){
  .fl-pair > #svc-models{min-height:100vh;min-height:100svh;}
  .fl-hold{display:block;height:90vh;height:90svh;}
}

/* ---- Services: one light lattice behind the trial and What MBA builds ----
   The flow lattice, recoloured for a white band and drawn once across both
   sections, so it scrolls with them as one uncut background. No scrim: the
   mesh is faint enough on white to sit behind the copy. */
.svc-river-span{position:relative;background:var(--paper);}
.svc-river-span.has-lattice::before{content:none;}
.svc-river-span > .lattice-track{
  position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
  height:calc(100% + var(--lat-hold,0px));
}
.svc-river-span > .lattice-track > .lattice{position:sticky;inset:auto;top:0;}
/* the track runs past the band's foot; clip (not hidden) keeps the pins sticky */
.svc-river-span{overflow:clip;}
.svc-river-span > .svc-stage,.svc-river-span > .svcs{position:relative;z-index:1;}
.svc-river-span #svc-dmaic,.svc-river-span #svc-build{background:transparent;}
/* white shade: a feathered white pool behind each block of copy, plus a soft
   white halo on the type itself, so the text stands clear of the mesh */
.svc-river-span .wrap{position:relative;}
.svc-river-span .wrap::before{
  content:"";position:absolute;inset:-4% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0) 100%);
}
.svc-river-span h2,.svc-river-span h3,.svc-river-span h4,.svc-river-span p,
.svc-river-span .eyebrow,.svc-river-span button,.svc-river-span li{
  text-shadow:0 0 14px #fff, 0 0 6px #fff, 0 0 2px #fff;
}

/* ---- Mobile fixes (2026-09-14) ---------------------------------------------
   Phone and tablet widths only; nothing here reaches the desktop layout. */
@media (max-width:980px){
  /* Home, Where capacity is being lost: a later desktop rule capped the
     headline at 15ch, which squeezed it into four short lines on a phone */
  .probs-list .probs-head h2{max-width:none;}

  /* Home, What the redesign returns: the slides share one grid cell, so the
     rows stretched to the tallest slide and left a gap under the photograph */
  .evc-slide{align-content:start;}

  /* Team: the intro sat tight against the headline */
  .tp-head p{margin-top:0.9rem;}

  /* Team hero: the "/" separators started the wrapped line; stack the three
     capabilities instead */
  .th-caps{flex-direction:column;align-items:flex-start;gap:0.35rem;}
  .th-caps li + li::before{content:none;}

  /* iPhones zoom the page when a field under 16px is focused */
  input:not([type="checkbox"]):not([type="radio"]),textarea,select{font-size:16px !important;}

  /* larger tap areas for small text links and toggles, without moving them */
  .bn-toggle{padding-block:12px;margin-block:-12px;}
  .wd-more{padding-block:10px;margin-top:calc(1rem - 10px);margin-bottom:-10px;}
  .ct-alt-mail{padding-block:10px;margin-top:calc(1rem - 10px);margin-bottom:-10px;}
  .ct-info a[href^="mailto:"]{display:inline-block;padding-block:10px;margin-block:-10px;}
}
@media (max-width:760px){
  /* Home hero: a statement rising into view passed over the slide lines and
     the Scroll cue; fade the statements out above that strip instead */
  .hero-beats{
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 190px),transparent calc(100% - 130px));
            mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 190px),transparent calc(100% - 130px));
  }
}

/* ---- Insights, case study cards (2026-09-15) --------------------------------
   One card per case: kicker, title and the workflow as an arrow line beside
   the photograph; underneath, a pale band of three columns - the challenge,
   the approach, and the outcome set large in the display serif. Entrance on
   scroll (and again on switching case): the card rises, the photo wipes open
   and settles, the workflow lights step by step, the columns rise in turn,
   the outcome arrow draws and the new figure counts down. */
.csx-rows{gap:0;}
.csx{
  background:#fff;border:1px solid #E3E8EF;border-radius:4px;overflow:hidden;
  box-shadow:0 1px 2px rgba(28,36,54,0.04), 0 18px 48px -28px rgba(28,36,54,0.18);
}
.csx-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(2rem,4vw,4rem);align-items:center;
  padding:clamp(1.8rem,3.4vw,3.2rem);
}
.csx-kick{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;margin:0;
  font-size:0.72rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate);}
.csx-topic{font-size:0.7rem;font-weight:500;letter-spacing:0.04em;text-transform:none;color:var(--slate);
  border:1px solid var(--line);border-radius:999px;padding:0.2rem 0.65rem;background:#fff;}
.csx h3{margin:0.9rem 0 0;font-family:var(--font-display);font-weight:500;
  font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.08;letter-spacing:-0.015em;color:#1C2436;}
.csx-flow{list-style:none;margin:1.3rem 0 0;padding:0;max-width:34rem;
  font-size:clamp(0.92rem,1.05vw,1rem);line-height:1.75;color:var(--ink-2);}
.csx-flow li{display:inline;}
.csx-flow li:not(:last-child)::after{content:"\2192";display:inline-block;margin:0 0.45em;color:var(--slate);}
.csx-media{margin:0;position:relative;overflow:hidden;border-radius:3px;background:var(--river-mist);
  aspect-ratio:16/10;border:1px solid #E6EBF2;}
.csx-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;}
.csx-media img.is-doc{object-position:center top;}

.csx-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#F5F8FC;border-top:1px solid #E3E8EF;}
.csx-col{position:relative;padding:clamp(1.6rem,2.8vw,2.6rem) clamp(1.4rem,2.6vw,2.4rem);}
.csx-col + .csx-col::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:#E3E8EF;transform-origin:top;}
.csx-label{display:block;margin-bottom:0.9rem;font-size:0.72rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent-small);}
.csx-col p{margin:0;font-size:clamp(0.94rem,1.05vw,1.02rem);line-height:1.72;color:var(--ink-2);}
.csx-col .csx-out{font-family:var(--font-display);font-weight:500;font-size:clamp(1.22rem,1.55vw,1.45rem);line-height:1.35;color:var(--accent);letter-spacing:-0.005em;}
.csx-num{font-variant-numeric:lining-nums tabular-nums;}
.csx-arrow{display:inline-block;position:relative;width:1.45em;height:0.6em;margin:0 0.25em;vertical-align:0.12em;}
.csx-arrow::before{content:"";position:absolute;left:0;right:0.12em;top:50%;height:1.5px;margin-top:-0.75px;background:currentColor;transform-origin:left;}
.csx-arrow::after{content:"";position:absolute;right:0.08em;top:50%;width:0.36em;height:0.36em;margin-top:-0.18em;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);}
.sr-arrow{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* evidence qualification */
.csx-qual{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.6rem,4.4vw,5rem);
  margin-top:clamp(1.6rem,3.4vh,2.4rem);padding:clamp(1.6rem,2.8vw,2.4rem) clamp(1.6rem,3vw,2.6rem);
  background:#fff;border:1px solid #E3E8EF;border-left:0;border-radius:0 4px 4px 0;
}
.csx-qual::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--accent);transform-origin:top;}
.csx-qual-label{white-space:nowrap;font-size:clamp(0.82rem,1.1vw,1rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent-small);line-height:1.5;}
.csx-qual p{margin:0;font-size:clamp(0.95rem,1.1vw,1.05rem);line-height:1.75;color:var(--ink-2);}

/* ---- entrance ---- */
@media (prefers-reduced-motion:no-preference){
  .csx{opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s var(--ease), transform 1.1s cubic-bezier(.19,1,.22,1);}
  .csx.is-in{opacity:1;transform:none;}

  .csx-kick,.csx h3{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s var(--ease), transform .9s cubic-bezier(.19,1,.22,1);}
  .csx h3{transition-delay:.12s;}
  .csx.is-in .csx-kick,.csx.is-in h3{opacity:1;transform:none;}

  .csx-flow li{color:#AEB5C1;transition:color .6s var(--ease);transition-delay:calc(.45s + var(--i) * .22s);}
  .csx-flow li::after{opacity:0;transform:translateX(-6px);transition:opacity .45s var(--ease), transform .55s var(--ease);transition-delay:calc(.58s + var(--i) * .22s);}
  .csx.is-in .csx-flow li{color:var(--ink-2);}
  .csx.is-in .csx-flow li::after{opacity:1;transform:none;}

  .csx-media{clip-path:inset(0 0 0 100%);transition:clip-path 1.2s cubic-bezier(.77,0,.18,1) .15s;}
  .csx-media img{transform:scale(1.14);transition:transform 2.4s cubic-bezier(.19,1,.22,1) .15s;}
  .csx.is-in .csx-media{clip-path:inset(0 0 0 0);}
  .csx.is-in .csx-media img{transform:scale(1);}

  .csx-col{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s var(--ease), transform 1s cubic-bezier(.19,1,.22,1);transition-delay:calc(.55s + var(--c) * .14s);}
  .csx-col + .csx-col::before{transform:scaleY(0);transition:transform 1s cubic-bezier(.77,0,.18,1);transition-delay:calc(.6s + var(--c) * .14s);}
  .csx.is-in .csx-col{opacity:1;transform:none;}
  .csx.is-in .csx-col + .csx-col::before{transform:scaleY(1);}

  .csx-arrow::before{transform:scaleX(0);transition:transform .9s cubic-bezier(.77,0,.18,1) 1.05s;}
  .csx-arrow::after{opacity:0;transition:opacity .3s var(--ease) 1.7s;}
  .csx.is-in .csx-arrow::before{transform:scaleX(1);}
  .csx.is-in .csx-arrow::after{opacity:1;}

  .csx-qual{opacity:0;transform:translate3d(0,20px,0);transition:opacity .8s var(--ease), transform 1s cubic-bezier(.19,1,.22,1);}
  .csx-qual::before{transform:scaleY(0);transition:transform 1.1s cubic-bezier(.77,0,.18,1) .25s;}
  .csx-qual-label{opacity:0;letter-spacing:0.42em;transition:opacity .9s var(--ease) .45s, letter-spacing 1.4s cubic-bezier(.19,1,.22,1) .45s;}
  .csx-qual p{opacity:0;transform:translate3d(0,12px,0);transition:opacity .9s var(--ease) .7s, transform 1s cubic-bezier(.19,1,.22,1) .7s;}
  .csx-qual.is-in{opacity:1;transform:none;}
  .csx-qual.is-in::before{transform:scaleY(1);}
  .csx-qual.is-in .csx-qual-label{opacity:1;letter-spacing:0.2em;}
  .csx-qual.is-in p{opacity:1;transform:none;}
}

@media (max-width:900px){
  .csx-top{grid-template-columns:1fr;gap:1.4rem;}
  .csx-media{order:-1;}
  .csx-cols{grid-template-columns:1fr;}
  .csx-col + .csx-col::before{left:clamp(1.4rem,2.6vw,2.4rem);right:clamp(1.4rem,2.6vw,2.4rem);top:0;bottom:auto;width:auto;height:1px;transform-origin:left;}
  .csx-qual{grid-template-columns:1fr;gap:0.8rem;}
  .csx-qual-label{white-space:normal;}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .csx-col + .csx-col::before{transform:scaleX(0);}
  .csx.is-in .csx-col + .csx-col::before{transform:scaleX(1);}
  .csx-media{clip-path:inset(0 0 100% 0);}
}

/* case study 01's outcome is a before / after pair rather than a figure */
.csx-ba{display:grid;grid-template-columns:minmax(0,1fr);gap:0.9rem;}
.csx-ba-k{display:block;margin-bottom:0.25rem;font-size:0.66rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--slate);}
.csx-col .csx-ba-d{margin-top:0.3rem;font-size:0.86rem;line-height:1.55;color:var(--ink-2);}
.csx-ba-col:first-child .csx-out{color:var(--ink-2);}
.csx-ba-arrow{display:block;margin:0.1rem 0 0.55rem;transform:rotate(90deg);transform-origin:0.3em 50%;color:var(--accent);height:0.8em;width:1.3em;font-size:1.2rem;}
@media (prefers-reduced-motion:no-preference){
  .csx-ba-col{opacity:0;transform:translate3d(0,10px,0);transition:opacity .7s var(--ease), transform .9s cubic-bezier(.19,1,.22,1);}
  .csx-ba-col:first-child{transition-delay:.95s;}
  .csx-ba-col:last-child{transition-delay:1.75s;}
  .csx.is-in .csx-ba-col{opacity:1;transform:none;}
  .csx-ba-arrow::before{transition-delay:1.25s;}
  .csx-ba-arrow::after{transition-delay:1.8s;}
}

/* case study and evidence qualification cards: the same rounding as the
   article cards below them */
.csx{border-radius:16px;}
.csx-media{border-radius:10px;}
.csx-qual{border-radius:16px;border-left:1px solid #E3E8EF;overflow:hidden;}
.csx-qual::before{top:0;bottom:0;}
/* the wipe's clip-path has to carry the rounding too, or the scaled photo
   shows square corners through it */
@media (prefers-reduced-motion:no-preference){
  .csx-media{clip-path:inset(0 0 0 100% round 10px);}
  .csx.is-in .csx-media{clip-path:inset(0 0 0 0 round 10px);}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .csx-media{clip-path:inset(0 0 100% 0 round 10px);}
}
.csx-media img{border-radius:10px;}

/* three case study cards, stacked */
.csx-rows{gap:clamp(1.6rem,3.6vh,2.6rem);}
/* before / after carry the direction on their own, so no arrow between them */
.csx-ba{gap:1.1rem;}
.csx-ba-col:last-child{padding-top:1.1rem;border-top:1px solid #E3E8EF;}
@media (prefers-reduced-motion:no-preference){ .csx-ba-col:last-child{transition-delay:1.35s;} }
/* a workflow line never starts with an arrow */
.csx-flow li{display:inline-block;white-space:nowrap;}
/* before figure in neutral grey, after figure in brand blue */
.csx-ba-col:first-child .csx-out{color:#6F747C;}
.csx-ba-col:last-child .csx-out{color:#4C78A8;}
.csx-media img{object-position:center 45%;}

/* ---- Home, What the redesign returns: one story (2026-09-15) ----------------
   The three outcomes run down a single line instead of a carousel. On large
   screens the heading holds on the left while the story scrolls beside it.
   The line fills as the reader moves down it, each dot lights as its outcome
   arrives, the figure counts up and the before / after rows rise in turn. */
.evx{
  --accent:#4C78A8;--accent-small:#456D99;--signal:#4C78A8;
  position:relative;background:var(--paper);
  padding-block:clamp(88px,13vh,150px);
  scroll-margin-top:clamp(84px,13vh,116px);
}
.evx-grid{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:clamp(2.4rem,6vw,6.5rem);align-items:start;}
.evx-head-in{position:sticky;top:clamp(110px,16vh,150px);}
.evx-head .eyebrow{color:var(--accent-small);}
.evx-head h2{margin-top:0.9rem;font-size:var(--t-h2);line-height:1.12;color:var(--ink);}
.evx-head h2 em{font-style:normal;color:var(--accent);}
.evx-lede{margin-top:1.1rem;max-width:40ch;font-size:clamp(0.95rem,1.1vw,1.04rem);line-height:1.7;color:var(--ink-2);}
.evx-btn{
  display:inline-flex;align-items:center;gap:0.6rem;margin-top:clamp(1.6rem,3.4vh,2.4rem);
  padding:0.9rem 1.5rem;border:1px solid var(--rule);border-radius:4px;
  font-weight:600;font-size:0.95rem;color:#1C2436;text-decoration:none;background:#fff;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.evx-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .3s var(--ease);}
.evx-btn:hover{border-color:#1C2436;background:#1C2436;color:#fff;}
.evx-btn:hover svg{transform:translateX(3px);}

/* the line */
.evx-story{list-style:none;margin:0;padding:0 0 0 clamp(2.2rem,3.4vw,3.2rem);position:relative;--evx-p:0;}
.evx-story::before,.evx-story::after{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;border-radius:2px;}
.evx-story::before{background:#E3E8EF;}
.evx-story::after{background:var(--accent);transform-origin:top;transform:scaleY(var(--evx-p));}
.evx-step{position:relative;}
.evx-step + .evx-step{margin-top:clamp(3rem,7vh,4.6rem);}
.evx-dot{
  position:absolute;left:calc(-1 * clamp(2.2rem,3.4vw,3.2rem));top:0.55rem;z-index:1;
  width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #C9D3E0;
  transition:border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.evx-step.is-lit .evx-dot{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 6px rgba(76,120,168,0.14);}
.evx-step h3{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(1.6rem,2.3vw,2.1rem);line-height:1.15;color:#1C2436;letter-spacing:-0.01em;}

/* 1 - the figure */
.evx-card{
  margin-top:1.3rem;padding:clamp(1.6rem,2.8vw,2.4rem);border-radius:16px;
  background:#1C2436;color:#EEF3F9;box-shadow:0 30px 60px -36px rgba(28,36,54,0.55);
}
.evx-fig{display:flex;align-items:baseline;flex-wrap:wrap;font-family:var(--font-body);font-weight:600;
  font-size:clamp(2.8rem,4.6vw,4rem);line-height:1;letter-spacing:-0.04em;color:#fff;font-variant-numeric:lining-nums tabular-nums;}
.evx-fig small{margin-left:0.35em;font-size:0.3em;font-weight:500;letter-spacing:0;color:#8FB2D9;}
.evx-card > p{margin:1rem 0 0;font-size:clamp(0.95rem,1.1vw,1.04rem);line-height:1.65;color:rgba(238,243,249,0.88);}
.evx-card .evx-note{margin-top:0.5rem;font-size:0.84rem;color:rgba(238,243,249,0.6);}
.evx-card .evx-qual{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid rgba(143,178,217,0.22);font-size:0.84rem;line-height:1.6;color:rgba(238,243,249,0.62);}
.evx-qual span{font-weight:600;color:inherit;}
.evx-card .evx-qual span{color:rgba(238,243,249,0.85);}

/* 2 - before / after */
.evx-lead{margin:0.9rem 0 0;max-width:52ch;font-size:clamp(0.95rem,1.1vw,1.04rem);line-height:1.7;color:var(--ink-2);}
.evx-rows{margin-top:1.4rem;border-top:1px solid #E3E8EF;}
.evx-row{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,2vw,1.8rem);padding:1.25rem 0;border-bottom:1px solid #E3E8EF;align-items:start;}
.evx-row-t{font-size:0.72rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-small);line-height:1.5;padding-top:0.1rem;}
.evx-k{display:block;margin-bottom:0.3rem;font-size:0.64rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--slate);}
.evx-ba p{margin:0;font-size:0.92rem;line-height:1.55;color:#6F747C;}
.evx-ba.is-after p{color:#1C2436;}
.evx-ba.is-after .evx-k{color:var(--accent);}

/* 3 - the closing band */
.evx-band{position:relative;overflow:hidden;border-radius:16px;min-height:clamp(260px,32vh,340px);display:flex;align-items:flex-end;background:#1C2436;}
.evx-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;transform:scale(1.08);transition:transform 2.4s cubic-bezier(.19,1,.22,1);}
.evx-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,36,54,0.25) 0%,rgba(28,36,54,0.78) 55%,rgba(28,36,54,0.94) 100%);}
.evx-band-in{position:relative;z-index:1;padding:clamp(1.6rem,2.8vw,2.4rem);}
.evx-band h3{color:#fff;}
.evx-band .evx-lead{color:rgba(238,243,249,0.9);}
.evx-band .evx-qual{margin:1rem 0 0;max-width:60ch;font-size:0.84rem;line-height:1.6;color:rgba(238,243,249,0.66);}
.evx-step.is-lit .evx-band img{transform:scale(1);}

/* entrances */
@media (prefers-reduced-motion:no-preference){
  .evx-step h3,.evx-step .evx-lead,.evx-card,.evx-band{opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s var(--ease), transform 1s cubic-bezier(.19,1,.22,1);}
  .evx-step .evx-lead{transition-delay:.1s;}
  .evx-card{transition-delay:.15s;}
  .evx-row{opacity:0;transform:translate3d(0,16px,0);transition:opacity .7s var(--ease), transform .9s cubic-bezier(.19,1,.22,1);transition-delay:calc(.25s + var(--r) * .15s);}
  .evx-ba.is-after p{transition:color .8s var(--ease);transition-delay:calc(.7s + var(--r) * .15s);color:#6F747C;}
  .evx-step.is-in h3,.evx-step.is-in .evx-lead,.evx-step.is-in .evx-card,.evx-step.is-in .evx-band,.evx-step.is-in .evx-row{opacity:1;transform:none;}
  .evx-step.is-in .evx-ba.is-after p{color:#1C2436;}
  .evx-band{transform:translate3d(0,26px,0) scale(0.985);}
  .evx-step.is-in .evx-band{transform:none;}
}

@media (max-width:980px){
  .evx-grid{grid-template-columns:1fr;gap:2.4rem;}
  .evx-head-in{position:static;}
  .evx-story{padding-left:2rem;}
  .evx-dot{left:-2rem;}
  .evx-row{grid-template-columns:1fr 1fr;row-gap:0.6rem;}
  .evx-row-t{grid-column:1 / -1;}
}
@media (max-width:420px){
  .evx-row{grid-template-columns:1fr;}
}
.evx-head{align-self:stretch;}
/* the closing outcome reads as text, like the others */
.evx-qual-plain{margin:1rem 0 0;max-width:60ch;padding-top:1rem;border-top:1px solid #E3E8EF;font-size:0.84rem;line-height:1.6;color:var(--slate);}
@media (prefers-reduced-motion:no-preference){
  .evx-qual-plain{opacity:0;transform:translate3d(0,16px,0);transition:opacity .8s var(--ease) .25s, transform 1s cubic-bezier(.19,1,.22,1) .25s;}
  .evx-step.is-in .evx-qual-plain{opacity:1;transform:none;}
}

/* ---- Phone swipers (2026-09-16) -----------------------------------------------
   What MBA can do and Why MBA (Home); What MBA builds, production and supporting
   capabilities (Services). One card at a time below 981px, with arrows and the
   site's line pagination. Nothing here applies on desktop. */
.msw-ctrls{display:none;}
@media (max-width:980px){
  .msw{
    display:flex !important;flex-wrap:nowrap !important;align-items:stretch;
    grid-template-columns:none !important;grid-template-areas:none !important;
    gap:14px !important;
    overflow-x:auto !important;overflow-y:hidden !important;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    touch-action:pan-x pan-y;
  }
  .msw::-webkit-scrollbar{display:none;}
  .msw.msw-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none;}
  .msw > .msw-item{
    flex:0 0 100% !important;width:100% !important;min-width:0;max-width:none !important;
    scroll-snap-align:start;scroll-snap-stop:always;
    grid-area:auto !important;margin:0 !important;
  }

  .msw-ctrls{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.1rem;}
  .msw-arrow{
    flex:0 0 auto;width:44px;height:44px;border-radius:999px;padding:0;
    display:grid;place-items:center;cursor:pointer;
    transition:opacity .25s var(--ease), background .2s var(--ease);
  }
  .msw-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .msw-next svg{transform:scaleX(-1);}
  .msw-arrow[disabled]{opacity:0.3;cursor:default;}
  .msw-arrow:focus-visible,.msw-dots button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
  .msw-dots{display:flex;align-items:center;gap:0.7rem;}
  .msw-dots button{
    position:relative;width:26px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;
    transition:background .35s var(--ease), width .35s var(--ease);
  }
  .msw-dots button::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px;}
  .msw-dots button.is-on{width:38px;background:#4C78A8;box-shadow:0 0 12px rgba(76,120,168,0.55);}

  .msw-dark .msw-arrow{background:rgba(28,36,54,0.4);border:1px solid rgba(213,216,221,0.28);color:#EEF3F9;}
  .msw-dark .msw-dots button{background:rgba(255,255,255,0.24);}
  .msw-light .msw-arrow{background:#fff;border:1px solid rgba(28,36,54,0.18);color:#1C2436;}
  .msw-light .msw-dots button{background:rgba(28,36,54,0.2);}

  /* Why MBA: the joined triad becomes separate cards */
  .wm-triad.msw{border:0 !important;background:transparent !important;border-radius:0 !important;}
  .wm-triad.msw > .wm-cap{border:1px solid var(--line) !important;border-radius:var(--r-card) !important;background:#fff !important;}

  /* What MBA builds: each area reads as a card */
  .hb-list.msw > .hb-item{
    padding:1.4rem 1.25rem !important;border:1px solid var(--line);border-radius:var(--r-card);background:#fff;
  }
  .hb-list.msw > .hb-item::after{display:none;}
  .hb-list.msw > .hb-item .hb-idx,.hb-list.msw > .hb-item p{opacity:1;transform:none;}

  /* production: the window scrolls sideways again on a phone */
  #opView.msw{overflow-x:auto !important;scroll-snap-type:x mandatory !important;padding-inline:clamp(1.5rem,4vw,3rem) !important;scroll-padding-inline:clamp(1.5rem,4vw,3rem);}
  #opView.msw .op-rail{flex-direction:row !important;gap:14px !important;width:100%;padding:0 !important;}
  #opView.msw .op-rail > .msw-item{flex:0 0 100% !important;}
  #opView.msw{display:block !important;}
  #opView.msw > .op-rail{display:flex;}
  .msw-notes{margin-top:clamp(14px,2.6vh,20px);}
  .msw-notes .op-slot-notes{display:flex;flex-direction:column;gap:clamp(12px,2.4vh,18px);}
  #svc-run .msw-ctrls{padding-inline:clamp(1.5rem,4vw,3rem);}
  #svc-run .msw-notes{padding-inline:clamp(1.5rem,4vw,3rem);}

  /* supporting capabilities: the two panels side by side in the swiper */
  .sp-deck.msw > .sp-panel{align-self:stretch;}
}

/* ---- Footer on phones: Sitemap and Socials side by side ---------------------
   Email and Based stay full width above; the two link columns share one row,
   held to a compact centred measure so they read as a pair. */
@media (max-width:980px){
  .ftr-top{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:1.5rem;row-gap:2rem;
    max-width:380px;margin-inline:auto;
  }
  .ftr-top > .ftr-contact{grid-column:1 / -1;}
  .ftr-top > .ftr-col{align-items:center;}
}
@media (max-width:980px){
  /* the current line wins over the theme's idle colour */
  .msw-ctrls .msw-dots button.is-on{width:38px;background:#4C78A8;box-shadow:0 0 12px rgba(76,120,168,0.55);}
  .msw-dark .msw-dots button.is-on{background:#8FB2D9;box-shadow:0 0 12px rgba(143,178,217,0.6);}
  /* production: the gap matches the side margin so the next card never peeks in */
  #opView.msw .op-rail{gap:clamp(1.5rem,4vw,3rem) !important;}
}

/* ---- Phones, round 2 (2026-09-16) --------------------------------------------- */
.csx-toggle{display:none;}
@media (max-width:980px){
  /* the swiper row is always a row, whatever the layout below it did */
  .msw{flex-direction:row !important;}

  /* Team profiles: one card at a time */
  #tpHalo.msw > .tph-card{flex:0 0 100% !important;}

  /* Team, Our Mission: holds the full screen. The eyebrow and the whole
     statement always show; the globe takes what room is left and may be
     cropped at the foot of the screen. */
  #ab-mission{padding:0;}
  .ab-mission-stage{position:relative;height:170vh;height:170svh;}
  .ab-mission-stage > .ab-mission-grid{
    position:sticky;top:0;box-sizing:border-box;
    height:100vh;height:100svh;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:clamp(1rem,3svh,1.8rem);
    padding-top:calc(env(safe-area-inset-top,0px) + clamp(92px,13svh,120px));
    padding-bottom:0;
  }
  #ab-mission .ab-mission-copy{flex:none;width:100%;}
  #ab-mission .ab-mission-eyebrow{margin-bottom:clamp(0.6rem,1.8svh,1rem);}
  #ab-mission .ab-mission-stmt{font-size:clamp(1.18rem,min(6.1vw,3.35svh),1.9rem);line-height:1.2;}
  #ab-mission .ab-mission-globe{flex:none;width:100%;}
  #ab-mission .ab-mission-globe .globe-wrap{width:min(100%,380px);}

  /* Insights case studies: challenge, approach and outcome as dropdowns */
  #caseStudies .csx-cols{display:block;}
  #caseStudies .csx-col{padding:0 !important;}
  #caseStudies .csx-col + .csx-col::before{display:none;}
  #caseStudies .csx-col{border-top:1px solid #E3E8EF;}
  #caseStudies .csx-col .csx-label{display:none;}
  #caseStudies .csx-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
    padding:1.05rem 1.25rem;background:none;border:0;cursor:pointer;text-align:left;
    font-family:var(--font-body);font-size:0.74rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-small);
  }
  #caseStudies .csx-toggle svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:transform .3s var(--ease);}
  #caseStudies .csx-col.is-open .csx-toggle svg{transform:rotate(45deg);}
  #caseStudies .csx-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
  #caseStudies .csx-col-body{display:none;padding:0 1.25rem 1.3rem;}
  #caseStudies .csx-col.is-open .csx-col-body{display:block;}
}

/* ---- 2026-09-16, round 3 --------------------------------------------------- */

/* Contact: Markets served stands alone in the information band */
.ct-info-grid{grid-template-columns:1fr !important;}
.ct-info-grid p{max-width:72ch;}

/* Insights closing call to action: smaller, with more air between the lines */
.in-cta h2{font-size:clamp(1.35rem,2.4vw,2rem) !important;line-height:1.38;letter-spacing:-0.02em;max-width:26ch;}
.in-cta p{margin:clamp(1.3rem,3vh,1.9rem) auto clamp(1.9rem,4vh,2.7rem);max-width:54ch;font-size:clamp(0.9rem,1.3vw,1rem);line-height:1.85;}

@media (max-width:980px){
  /* footer: a little more room between Based and the Sitemap / Socials pair */
  .ftr-top{row-gap:2.9rem !important;}

  /* Team: nothing holds on a phone; every section scrolls normally */
  .ab-vision-stage{height:auto !important;}
  .ab-vision-stage > .wrap{
    position:static !important;height:auto !important;
    padding-top:clamp(4.5rem,11vh,6rem) !important;padding-bottom:clamp(4rem,10vh,5.5rem) !important;
  }
  .ab-mission-stage{height:auto !important;}
  .ab-mission-stage > .ab-mission-grid{
    position:static !important;height:auto !important;overflow:visible !important;
    padding-top:clamp(4.5rem,11vh,6rem) !important;padding-bottom:clamp(4rem,10vh,5.5rem) !important;
  }
  #ab-mission .ab-mission-stmt{font-size:clamp(1.5rem,6.2vw,2.1rem);line-height:1.22;}
  #ab-mission .ab-mission-globe .globe-wrap{width:min(100%,380px);}
  #peopleStage,#abFinalStage{height:auto !important;}
  #peopleStage .svc-pin,#abFinalStage .svc-pin{position:static !important;height:auto !important;}
}

/* ---- Phones, round 4 (2026-09-16) ------------------------------------------ */
@media (max-width:980px){
  /* Home: Start the discussion no longer holds */
  .fin-stage{height:auto !important;}
  #trial.fin{position:relative !important;height:auto !important;min-height:0 !important;padding-block:clamp(4.5rem,11vh,6rem);}

  /* Services: the two-week trial scrolls normally; the steps change on a tap */
  #dmaicStage{height:auto !important;}
  #dmaicStage .svc-pin{position:static !important;height:auto !important;overflow:visible !important;}
  #dmaicStage .dm-step{cursor:pointer;}
}

/* ---- Team, Our Mission on desktop: a calmer statement (2026-09-16) ----------
   Smaller type across a wider column so the statement takes fewer, longer
   lines, and the globe sits a little further right. Phones are unchanged. */
@media (min-width:981px){
  #ab-mission .ab-mission-grid{grid-template-columns:minmax(0,1.32fr) minmax(0,0.68fr);gap:clamp(2rem,4vw,4.5rem);}
  #ab-mission .ab-mission-stmt{font-size:clamp(1.65rem,2.45vw,2.55rem) !important;line-height:1.3;max-width:40ch;}
  #ab-mission .ab-mission-globe{justify-self:end;}
  #ab-mission .ab-mission-globe .globe-wrap{width:min(100%,52vh,500px);margin-right:0;}
}

/* ---- Team (version two): the page opens on Our Vision ----------------------
   The hero is gone. Vision fills the first screen over the night-office film
   under a navy tint, darkest where the statement sits; Mission follows on its
   light band. The statement keeps its current size (an exception to the type
   scale) on every screen. */
#visionBand.tv{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:calc(112px + clamp(1.5rem,4vh,3rem)) 0 clamp(3.5rem,9vh,6rem);
  background:#1C2436;color:#fff;
}
.tv-film{position:absolute;inset:0;margin:0;z-index:0;}
.tv-film video{display:block;width:100%;height:100%;object-fit:cover;}
#visionBand.tv::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(62% 55% at 50% 52%, rgba(28,36,54,0.78) 0%, rgba(28,36,54,0.58) 60%, rgba(28,36,54,0.42) 100%),
    linear-gradient(180deg, rgba(28,36,54,0.62) 0%, rgba(28,36,54,0.2) 38%, rgba(28,36,54,0.2) 62%, rgba(28,36,54,0.7) 100%);
}
.tv-inner{position:relative;z-index:2;}
.tv-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
#visionBand .tv-eyebrow{display:block;color:#8FB2D9;margin-bottom:clamp(1rem,2.6vh,1.7rem);}
#visionBand .ab-vision-stmt{color:#FFFFFF;margin:0 auto;text-shadow:0 2px 24px rgba(10,14,22,0.35);}
#visionBand .ab-vision-stmt em{color:#8FB2D9;}

/* ---- Contact (version two): with the hero line removed, the form and side
   card move up to close the gap under the headline ---- */
.ct-top + .ct-form-sec{padding-top:clamp(1.5rem,3vh,2rem);}

/* ---- About us (version two): a navy manifesto band ---------------------------
   The page title, then Vision and Mission side by side, each opened by a thin
   blue rule and a small label. Type only. Both statements share one size so
   the two columns read as a pair. */
.abx{
  position:relative;background:#1C2436;color:#fff;
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:calc(112px + clamp(2.5rem,7vh,5rem)) 0 clamp(4rem,10vh,7rem);
  box-sizing:border-box;
}
.abx-inner{width:100%;}
.abx .abx-title{
  margin:0;font-family:var(--font-display);font-weight:500;color:#fff;
  font-size:clamp(40px,4.38vw,56px);line-height:1.05;letter-spacing:-0.02em;
}
.abx-cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.5rem,5.5vw,6.5rem);margin-top:clamp(3rem,8vh,5.5rem);align-items:start;
}
.abx-col{border-top:1px solid rgba(143,178,217,0.55);padding-top:clamp(1.3rem,3vh,2rem);}
.abx .abx-label{display:block;color:#8FB2D9;margin-bottom:clamp(1rem,2.4vh,1.5rem);}
#aboutIntro .abx-stmt{
  margin:0;max-width:none !important;text-align:left;text-wrap:pretty;
  font-family:var(--font-display);font-weight:500;color:#fff;
  font-size:clamp(24px,2.35vw,30px) !important;line-height:1.34 !important;letter-spacing:-0.01em;
}
#aboutIntro .abx-stmt em{font-style:italic;color:#8FB2D9;}
@media (max-width:980px){
  .abx{min-height:0;padding:calc(92px + 2.5rem) 0 3.5rem;}
  .abx .abx-title{font-size:clamp(34px,9vw,42px);}
  .abx-cols{grid-template-columns:1fr;gap:2.5rem;margin-top:2.25rem;}
  #aboutIntro .abx-stmt{font-size:clamp(21px,5.6vw,24px) !important;line-height:1.36 !important;}
}

/* ---- About us (version two): two chapters ------------------------------------
   Chapter one: the drifting glass towers under navy, the page title and the
   vision on the left. Chapter two: the mission on navy beside the globe, with
   the river of light along the foot. One visual per screen. Both statements
   at the standard 44px heading size (ease down on smaller screens). */
.avx{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:calc(112px + clamp(2rem,6vh,4rem)) 0 clamp(4rem,10vh,7rem);
  background:#1C2436;color:#fff;box-sizing:border-box;
}
.avx-photo::after{
  background:linear-gradient(90deg, rgba(28,36,54,0.94) 0%, rgba(28,36,54,0.86) 38%, rgba(28,36,54,0.5) 72%, rgba(28,36,54,0.35) 100%) !important;
}
.avx-inner{position:relative;z-index:1;width:100%;}
.avx .avx-title{
  display:inline-flex;align-items:center;gap:0.6rem;margin:0 0 clamp(2.2rem,6vh,4rem);
  font-family:var(--font-body);color:#8FB2D9;
}
.avx .avx-title i{width:6px;height:6px;border-radius:50%;background:#8FB2D9;box-shadow:0 0 10px rgba(143,178,217,0.7);}
.avx-label{
  display:block;margin-bottom:clamp(1rem,2.4vh,1.5rem);padding-top:clamp(1rem,2.4vh,1.4rem);
  border-top:1px solid rgba(143,178,217,0.5);max-width:12rem;
  font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#8FB2D9;
}
#aboutIntro .avx-stmt, #ab-mission .amx-stmt{
  margin:0;text-align:left;font-family:var(--font-display);font-weight:500;color:#fff;
  font-size:clamp(30px,3.44vw,44px) !important;line-height:1.2 !important;letter-spacing:-0.015em;
}
#aboutIntro .avx-stmt{max-width:19em !important;}
#aboutIntro .avx-stmt em, #ab-mission .amx-stmt em{font-style:italic;color:#8FB2D9;}

.amx{
  position:relative;isolation:isolate;overflow:hidden;background:#1C2436;color:#fff;
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:clamp(5rem,12vh,8rem) 0 clamp(11rem,26vh,16rem);box-sizing:border-box;
}
.amx-river{
  position:absolute;left:0;right:0;bottom:0;height:clamp(200px,34vh,340px);z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
}
.amx-river video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;filter:brightness(0.7) saturate(0.9);}
.amx-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);gap:clamp(2rem,5vw,6rem);align-items:center;width:100%;}
#ab-mission .amx-stmt{max-width:none !important;}
.amx .amx-globe{margin:0;justify-self:end;width:100%;}
.amx .amx-globe .globe-wrap{position:relative;width:min(100%,50vh,480px);max-width:none;margin:0 0 0 auto;}
/* a soft light halo so the navy globe reads against the navy band */
.amx .amx-globe .globe-wrap::before{
  content:"";position:absolute;inset:-14%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side, rgba(143,178,217,0.22), rgba(143,178,217,0.06) 70%, transparent);
}

@media (max-width:980px){
  .avx{min-height:0;padding:calc(92px + 3rem) 0 4.5rem;}
  .avx-photo::after{background:linear-gradient(180deg, rgba(28,36,54,0.9) 0%, rgba(28,36,54,0.8) 60%, rgba(28,36,54,0.9) 100%) !important;}
  .amx{min-height:0;padding:4.5rem 0 12rem;}
  .amx-grid{grid-template-columns:1fr;gap:2.5rem;}
  .amx .amx-globe{justify-self:center;}
  .amx .amx-globe .globe-wrap{width:min(100%,320px);margin:0 auto;}
  #aboutIntro .avx-stmt, #ab-mission .amx-stmt{font-size:clamp(26px,7vw,30px) !important;line-height:1.24 !important;}
  .amx-river{height:200px;}
}
/* About us: "Our vision" / "Our mission" as a serif italic lead-in (no rule),
   so it doesn't stack as a second small-caps label under "About us". */
.avx-label, .amx .avx-label{
  border-top:0;padding-top:0;max-width:none;
  margin-bottom:clamp(0.9rem,2vh,1.25rem);
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:24px;letter-spacing:0;text-transform:none;line-height:1.2;color:#8FB2D9;
}
@media (max-width:980px){ .avx-label, .amx .avx-label{font-size:20px;} }
/* About us: Our Mission holds full screen for one screen of scroll on laptops
   and desktops. Phones scroll normally (no pinning on this page on phones). */
@media (min-width:981px){
  .amx-stage{position:relative;height:200vh;}
  .amx-stage > .amx{position:sticky;top:0;height:100vh;min-height:0;}
}
/* About us: the Vision fills the opening screen (much larger than the 44px
   Mission), with About us and Our vision tighter above it. */
#aboutIntro .avx-stmt{
  font-size:var(--avx-vis, clamp(42px,4.4vw,76px)) !important;line-height:1.1 !important;
  max-width:16.5em !important;letter-spacing:-0.02em;
}
#aboutIntro .avx-title{margin-bottom:clamp(4rem,13vh,8.5rem);}
@media (max-width:980px){
  #aboutIntro .avx-stmt{font-size:clamp(34px,9.4vw,44px) !important;line-height:1.12 !important;}
}
@media (max-width:980px){ #aboutIntro .avx-title{margin-bottom:3rem;} }
/* About us: the "About us" label is no longer shown (the nav already marks the
   page); the h1 stays for search engines and screen readers. */
#aboutIntro .avx-h1{
  position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Phones: the Vision fills the whole first screen, text centred below the nav. */
@media (max-width:980px){
  .avx{min-height:100vh;min-height:100svh;padding:calc(92px + 1.5rem) 0 3rem;}
}
/* About us: Our vision block sits at the true vertical middle of the screen
   (equal space above and below, the nav clearance mirrored at the bottom). */
.avx{padding-top:112px;padding-bottom:112px;}
@media (max-width:980px){ .avx{padding-top:92px;padding-bottom:92px;} }
/* About us hero: the Services hero's deep midnight (#030A1A) pooled in the
   top-right corner behind the nav links, and a deeper midnight wash behind
   the Vision so the white type stands out. The rest of the towers photo keeps
   its current navy tint. */
.avx-photo::after{
  background:
    radial-gradient(ellipse 62% 42% at 100% 0%, rgba(3,10,26,0.94) 0%, rgba(3,10,26,0.72) 38%, rgba(3,10,26,0) 100%),
    radial-gradient(ellipse 70% 62% at 24% 50%, rgba(3,10,26,0.62) 0%, rgba(3,10,26,0.34) 55%, rgba(3,10,26,0) 100%),
    linear-gradient(90deg, rgba(28,36,54,0.94) 0%, rgba(28,36,54,0.86) 38%, rgba(28,36,54,0.5) 72%, rgba(28,36,54,0.35) 100%) !important;
}
@media (max-width:980px){
  .avx-photo::after{
    background:
      radial-gradient(ellipse 90% 30% at 100% 0%, rgba(3,10,26,0.94) 0%, rgba(3,10,26,0.7) 40%, rgba(3,10,26,0) 100%),
      radial-gradient(ellipse 110% 50% at 30% 50%, rgba(3,10,26,0.6) 0%, rgba(3,10,26,0.3) 60%, rgba(3,10,26,0) 100%),
      linear-gradient(180deg, rgba(28,36,54,0.9) 0%, rgba(28,36,54,0.8) 60%, rgba(28,36,54,0.9) 100%) !important;
  }
}
/* Phones: older #ab-mission{padding:0} rules removed the Mission's top space,
   so "Our mission" sat flush under the towers photo. Restore it. */
@media (max-width:980px){
  #ab-mission.amx{padding:4rem 0 12rem;}
}

/* ---- Home on phones: the two panels scroll, the hero still holds -----------
   home-phone-flow.js lifts "Where capacity is being lost" and "What it costs"
   out of the held box below 981px and puts them after it, so they arrive by
   ordinary scrolling instead of sliding over the hero half-cut. The held box
   then only has to carry the three statements, and the squeeze the panel
   needed to fit one screen (no sub-line, no illustrations, 12px text) is
   lifted with it. */
@media (max-width:980px){
  .home-flow .hero-cross{height:300vh;}
  .home-flow .cross-pin{overflow:visible;}
  .home-flow .cross-pin > .hero{position:absolute;inset:0;}
  .home-flow #problems.probs,
  .home-flow .why{
    position:relative;inset:auto;z-index:auto;
    transform:none !important;opacity:1 !important;
  }
  .home-flow #problems.probs{
    display:block;overflow:visible;
    padding:var(--section-pad) 0;
  }
  .home-flow .why{min-height:0;padding:var(--section-pad) 0;}
  /* the panel no longer has to fit inside a held screen */
  .home-flow #problems.probs .probs-head p{display:block;margin-top:0.85rem;font-size:0.95rem;}
  .home-flow #problems.probs .probs-head h2{font-size:clamp(1.5rem,6vw,2.05rem);}
  .home-flow #problems.probs .probs-grid{margin-top:1.25rem;gap:0.9rem;}
  .home-flow #problems.probs .prob{padding:1.1rem 1.15rem;}
  .home-flow #problems.probs .prob-vis,
  .home-flow #problems.probs .prob > svg{display:block;}
  .home-flow #problems.probs .prob h3{font-size:1rem;line-height:1.3;margin-bottom:0.45rem;}
  .home-flow #problems.probs .prob p{font-size:0.88rem;line-height:1.55;}
  .home-flow #problems.probs .probs-close{margin-top:1.1rem;padding:1rem 1.15rem;font-size:0.92rem;line-height:1.5;}
}

/* About us, the team head: the sub-line sat tight under the heading on
   laptops. Same gap the other section heads use (.svcs-head > p). Phones
   already have their own spacing and are untouched. */
@media (min-width:981px){
  .tp-head p{margin-top:clamp(0.85rem,1.9vh,1.25rem);}
}

/* Articles: the caption belongs to the image only. The standfirst under the
   headline repeated it word for word, so it is gone from the pages; on a
   phone, where there is no hover, the caption stays on the image in the same
   style the hover shows on a laptop. */
@media (hover:none){
  .art-hero.has-cap::after{display:block;opacity:1;}
  .art-hero.has-cap figcaption{
    position:absolute;left:0;right:0;bottom:0;opacity:1;transform:none;
    color:rgba(255,255,255,0.94);
    padding:clamp(1rem,2.4vw,1.6rem) clamp(1.1rem,2.6vw,1.9rem);
    font-size:0.86rem;
  }
}

/* ---- Scroll smoothness fixes (2026-09-30) ------------------------------------ */
/* "What changes for your firm": a later rule replaced the steps' transition
   with opacity and border only, so the rise-in moved 38px in a single frame,
   on the way in and on the way out. The transform eases again. */
.knows-step.reveal-rise{
  transition:opacity .5s var(--ease), border-color .5s var(--ease), transform .8s var(--ease);
}
@media (max-width:980px){
  /* phones: fade in as they rise, like every other entrance */
  .knows-step.reveal-rise:not(.is-visible){opacity:0;}
  .knows-step.reveal-rise{transition:opacity .8s var(--ease), transform .8s var(--ease);}

  /* Home "What it costs": at 294px tall the river band (drawn at a share of
     the section's height) ran through the last line. Most of a screen again,
     text centred, river clear below it. */
  .home-flow .why{min-height:80vh;padding:clamp(4.5rem,11vh,6.5rem) 0;}

  /* Insights, Evidence qualification: the label's letter-spacing animation
     started too wide to fit one line on a phone, so the box shrank 20px
     mid-scroll and jolted everything below. It fades in at its final
     spacing instead. */
  .csx-qual-label{letter-spacing:0.2em !important;}
}