/* ==========================================================================
   The homepage in the "Measured practice" v4 language. Loaded after
   css/measured.css on index.html only. Same rules (see measured.css header).
   ========================================================================== */

/* ---------- hero: no graph-paper pattern or ruler; the coaches are the image ---------- */
.mp .home-hero, .mp .hero{background-image:none}
.mp .home-hero::before, .mp .hero::before, .mp .home-hero::after, .mp .hero::after{display:none}
.mp .roster__cell, .mp .roster__vid{border-radius:3px}
.mp .roster__lang{border-radius:2px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em}
.mp .home-hero__trust{font:600 12.5px/1.5 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--on-navy-2)}
.mp .eyebrow{font:600 12.5px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.mp .eyebrow::before{display:none}
.mp .nav__cta .btn, .mp .header .btn{border-radius:3px}

/* ---------- logo strip band, straight under the hero ---------- */
.home-strip .mp-in{padding-block:18px 4px}

/* ---------- results: three measured numbers, no cards ---------- */
.home-results .mp-in{padding-block:clamp(48px, 7vw, 96px); display:grid; gap:clamp(28px, 4vw, 48px)}
.home-results__head{display:grid; gap:14px}
.home-results__head p:not(.mp-lab){color:var(--on-navy); margin:0; max-width:60ch}
.home-res{list-style:none; margin:0; padding:0; display:grid; gap:36px}
.home-res li{display:grid; gap:10px; align-content:start; padding-top:16px; border-top:2px solid rgba(255,255,255,.28)}
.home-res__n{margin:0; font-variant-numeric:tabular-nums; font:800 clamp(72px, 9vw, 120px)/.85 var(--font-display); letter-spacing:-.05em; color:#fff;
  text-shadow:1px 1px 0 #1C426E,2px 2px 0 #1B3F6A,3px 3px 0 #1A3C66,4px 4px 0 #193A62,5px 5px 0 #18375E,6px 6px 0 #17355A,14px 16px 22px rgba(0,0,0,.3)}
.home-res__n sup{font-size:.36em; vertical-align:.95em; color:var(--sky); text-shadow:none; letter-spacing:0}
.home-res__l{margin:0; font:600 18px/1.35 var(--font-display); color:#fff; max-width:26ch}
/* The bar prints both values: grey is before, sky is after. */
.home-res__bar{position:relative; height:10px; background:rgba(255,255,255,.12); margin-top:6px}
.home-res__bar b{position:absolute; left:0; top:0; bottom:0; background:var(--sky)}
.home-res__bar i{position:absolute; left:0; top:-4px; bottom:-4px; background:#9FB0C4; z-index:1; border-right:2px solid var(--steel)}
@media (min-width:860px){ .home-res{grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px} }

/* ---------- the problem: chart without a card ---------- */
.mp .chart-card{background:none; border:0; box-shadow:none; border-radius:0; padding:24px 0 0; border-top:2px solid var(--blue-900)}
.mp .problem__figure img, .mp .figure img{border-radius:3px}

/* ---------- method ---------- */
.mp .home-weekly img{border-radius:3px}

/* ---------- programmes are links, so they keep a (square) box ---------- */

/* ---------- quotes: equal cards, crop marks on navy ----------
   The company logo signs off each quote, beside the name, in one-colour white
   like the logo strip. The cards stretch to the same height so the
   sign-off rows line up. */
.home-quotes2 .mp-in{display:grid; gap:clamp(28px, 4vw, 48px)}
.home-quotes2__grid{display:grid; gap:24px}
.home-quote{position:relative; margin:0; display:grid; grid-template-rows:1fr auto; gap:28px;
  padding:clamp(28px, 3vw, 40px); background:rgba(255,255,255,.035)}
.home-quote::before, .home-quote::after{content:""; position:absolute; width:22px; height:22px; border:0 solid var(--sky)}
.home-quote::before{left:0; top:0; border-width:3px 0 0 3px}
.home-quote::after{right:0; bottom:0; border-width:0 3px 3px 0}
.home-quote blockquote{margin:0; color:#fff; font:500 clamp(19px, 1.55vw, 22px)/1.5 var(--font-body); text-wrap:pretty}
.home-quote figcaption{display:flex; align-items:center; gap:20px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16)}
.home-quote__logo{flex:none; height:clamp(48px, 4.2vw, 58px); width:auto}
.home-quote__logo--man{filter:brightness(0) invert(1)}
.home-quote figcaption span{padding-left:20px; border-left:1px solid rgba(255,255,255,.22); font-size:15px; line-height:1.45; color:var(--on-navy); text-wrap:balance}
.home-quote figcaption b{display:block; color:#fff; font-size:16px}
/* Three across from 1080px. Below that the cards stack: two up would leave the
   third on its own row. In a third of the width the logo sits above the name. */
@media (min-width:1080px){
  .home-quotes2__grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px}
  .home-quote figcaption{flex-direction:column; align-items:flex-start; gap:16px}
  .home-quote figcaption span{padding-left:0; border-left:0}
  .home-quote blockquote{font-size:clamp(18px, 1.3vw, 20px)}
  .home-quote__logo{height:48px}
}

/* ---------- founder note: no card, portrait in a circle ---------- */
.mp .founder__card{background:none; border:0; box-shadow:none; padding:0}
.mp .founder__portrait{background:none}
.mp .founder__portrait::before, .mp .founder__portrait::after{display:none}
.mp .founder__portrait img{border-radius:50%; aspect-ratio:1; object-fit:cover; background:var(--steel);
  width:min(100%, 320px); box-shadow:0 0 0 6px #fff, 0 0 0 7.5px var(--sky-strong)}

/* ---------- contact: the form is the box ---------- */
.mp .form-card{border-radius:3px}
.mp .field input, .mp .field select, .mp .field textarea{border-radius:3px}
.mp .cpoint svg{color:var(--sky)}


/* ---------- hero headline in the same poster type as /challenge/ ---------- */
.mp .home-hero .h-hero{font:800 clamp(40px, 5.4vw, 72px)/.98 var(--font-display); letter-spacing:-.035em; color:var(--paper); max-width:12ch}
.mp .home-hero .lead{color:var(--on-navy)}