/* ==========================================================================
   "Measured practice", design language v4 (PLAN.md §6, approved by Tibba
   2026-09-29 without the waveform band). Proposal it was built from:
   design/stylescapes/teknosell-compositions.html in the project folder.

   Pages opt in with <body class="mp">. Sits on top of style.css.
   Written mobile first: base rules are the 390px layout.

   The rules this file keeps, please keep them too:
   - A box only where you touch it (buttons, the form, the scorer, FAQ rows)
     or where it is a real object (the scorecard sheet, the film poster).
     Everything else is size, weight, space, full-width grounds and real photos.
   - Orange (--action / --action-on-dark) is only ever a button. Never text.
   - Sky blue only marks "after" and improvement. Grey is "before".
   - The ruler appears once: the four weeks.
   - One hand-drawn mark per section at most (the hero underline, the ring).
   - Depth (shadow) only on real things: Kristian, the sheets, the join badge.
   - Patterns only when they carry data (the 100-dot grids, the languages).
   - Motion lives in js/motion.js and the Motion block of style.css: one
     reveal, one hover language, counters, charts (Tibor, 2026-11-03).
   ========================================================================== */

.mp{
  --steel:#2A5586; --sky:#7CC4FF; --sky-strong:#1F6FD1;
  --on-navy:#D5DEE8; --on-navy-2:#B8C2CF; --sec:#5F6B7A; --ink:#233146;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --g:clamp(16px, 5vw, 64px);
  --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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .12 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mp .btn{border-radius:3px}
.mp h1, .mp h2, .mp h3{text-wrap:balance}

/* ---------- shared ---------- */
.mp-in{max-width:1180px; margin:0 auto; padding-inline:var(--g); position:relative}
.mp-lab{font:600 12.5px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--sec)}
@media (min-width:900px){ .mp-lab{font-size:13px} }
.mp-navy{background:var(--blue-900); color:#fff}
.mp-deep{background:var(--ink-950); color:#fff}
.mp-paper{background-color:var(--paper); background-image:var(--grain); color:var(--ink)}
.mp-white{background:#fff; color:var(--ink)}
.mp-steel{background:var(--steel); color:#fff}
.mp-navy .mp-lab, .mp-deep .mp-lab{color:var(--on-navy-2)}
.mp-steel .mp-lab{color:#C9D6E6}
.mp-h2{font:700 clamp(26px, 3.2vw, 38px)/1.12 var(--font-display); color:var(--blue-900); max-width:22ch; letter-spacing:-.01em}
.mp-navy .mp-h2, .mp-steel .mp-h2{color:#fff}
.mp-sec{padding-block:clamp(48px, 7vw, 96px)}
.mp-link{font-weight:600; color:inherit; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px}
.mp-acts{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px}

/* ---------- 1. Hero: offer, question, button | film with Kristian ---------- */
.mp-hero{overflow:hidden; padding-top:64px}
.mp-hero .mp-in{padding-block:clamp(28px, 6vw, 80px) 0; display:grid; gap:28px}
.mp-hero__copy{display:grid; gap:18px; align-content:start; min-width:0}
/* The question in two sizes: the part a buyer says out loud is the poster, the
   price half follows smaller, so the opening reads in one glance. */
.mp-q{font:800 clamp(40px, 10.5vw, 76px)/.98 var(--font-display); letter-spacing:-.035em; color:var(--paper); margin:0; max-width:12ch}
.mp-q__rest{display:block; margin-top:.45em; font:700 clamp(19px, 5vw, 27px)/1.25 var(--font-display); letter-spacing:-.01em; color:#8FA3BD; max-width:26ch}
.mp-q .hl{position:relative; white-space:nowrap; color:var(--paper)}
.mp-q .hl svg{position:absolute; left:-2%; bottom:-.3em; width:104%; height:.42em; overflow:visible}
.mp-hero__copy h1{font:700 clamp(21px, 2.2vw, 26px)/1.25 var(--font-display); color:#fff; margin:6px 0 0}
.mp-hero__lead{color:var(--on-navy); margin:0; font-size:1.0625rem; max-width:46ch}
.mp-meta{margin:0; display:flex; flex-wrap:wrap; gap:6px 18px; font:600 12.5px/1.4 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--on-navy-2)}
.mp-meta span::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--sky); margin-right:8px; vertical-align:2px}

/* The film is a real object: a poster with a shadow. Title and person sit under
   it, never on top of the footage. */
.mp-hero__film{margin:0; display:grid; gap:14px; align-content:start; min-width:0}
.mp-hero__film .video-ph, .mp-hero__film video{display:block; width:100%; aspect-ratio:16/9; border:0; padding:0; cursor:pointer; border-radius:3px; overflow:hidden;
  background:#000; position:relative; box-shadow:0 30px 60px -28px rgba(0,0,0,.75)}
.mp-hero__film .video-ph img{width:100%; height:100%; object-fit:cover; display:block}
.mp-film__play{position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%;
  background:var(--action-on-dark); color:var(--blue-900); display:grid; place-items:center; box-shadow:0 12px 30px rgba(0,0,0,.4); transition:transform .2s var(--ease)}
.mp-film__play svg{width:28px; height:28px; margin-left:4px}
@media (hover:hover){ .mp-hero__film .video-ph:hover .mp-film__play{transform:scale(1.06)} }
.mp-film__len{position:absolute; right:10px; bottom:10px; padding:4px 7px; background:rgba(11,28,56,.82); color:#fff; font:600 12px/1 var(--mono); border-radius:2px}
.mp-hero__film figcaption{display:grid; gap:12px}
.mp-hero__film figcaption > b{font:700 clamp(19px, 2vw, 22px)/1.25 var(--font-display); color:#fff}
.mp-kr{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; font-size:15px; color:var(--on-navy)}
.mp-kr img{width:52px; height:52px; border-radius:50%; object-fit:cover; background:var(--steel);
  box-shadow:0 0 0 2px var(--blue-900), 0 0 0 3.5px var(--sky)}
.mp-kr b{display:block; color:#fff; font-weight:700}
/* Client logo strip: trust only, no sentence about what they buy. White
   monochrome on navy, edges faded, one slow loop, pauses on hover, and stands
   still (wrapping) with reduced motion. */
.mp-logos{position:relative; z-index:2; display:grid; gap:10px; padding-block:6px 22px; min-width:0}
.mp-logos__win{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.mp-logos__track{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:clamp(36px, 6vw, 72px);
  width:max-content; animation:mp-logos 40s linear infinite}
.mp-logos:hover .mp-logos__track{animation-play-state:paused}
.mp-logos li{flex:none}
.mp-logos img{height:26px; width:auto; max-width:none; filter:brightness(0) invert(1); opacity:.72}
/* Volvo Group iron mark (volvogroup.com brand identity): a circle with the
   wordmark inside, so it runs a little taller than the flat logos. */
.mp-logos img.volvo{height:34px}
/* Scania stacks its emblem over the wordmark, so it needs the extra height too. */
.mp-logos img.scania{height:36px}
@keyframes mp-logos{ to{ transform:translateX(calc(-50% - clamp(36px, 6vw, 72px) / 2)) } }
@media (prefers-reduced-motion:reduce){
  .mp-logos__win{-webkit-mask-image:none; mask-image:none}
  .mp-logos__track{animation:none; width:auto; flex-wrap:wrap; gap:18px 36px}
  .mp-logos__track li[aria-hidden]{display:none}
}
@media (min-width:900px){
  .mp-hero .mp-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(32px, 4.5vw, 64px); align-items:center}
  .mp-hero__copy{padding-bottom:clamp(32px, 4vw, 56px)}
  .mp-q{font-size:clamp(46px, 4.3vw, 62px); max-width:none}   /* two lines in a half-width column */
  .mp-q__rest{font-size:clamp(20px, 1.7vw, 24px)}
  .mp-hero__copy h1{margin-top:14px; font-size:clamp(24px, 2.2vw, 28px)}
  .mp-hero__film{margin:0 0 clamp(32px, 4vw, 56px)}   /* centred against the copy: no empty corner */
  .mp-logos{grid-column:1 / -1}
}

/* ---------- 3. Before and after, full-width split ---------- */
.mp-split{display:grid; position:relative}
.mp-split > div{padding:clamp(36px, 5vw, 72px) var(--g); display:flex; flex-direction:column; gap:14px}
.mp-split__bef{background-color:var(--paper); background-image:var(--grain); color:var(--ink)}
.mp-split__aft{background:var(--blue-900); color:#fff}
.mp-split__aft .mp-lab{color:var(--on-navy-2)}
.mp-split__score{font:800 clamp(72px, 16vw, 140px)/.9 var(--font-display); letter-spacing:-.04em; font-variant-numeric:tabular-nums; margin:0}
.mp-split__score small{font:600 .2em/1 var(--mono); letter-spacing:.04em; margin-left:.4em; vertical-align:.9em}
.mp-split__bef .mp-split__score{color:var(--before)}
.mp-split__aft .mp-split__score{color:var(--sky)}
.mp-split blockquote{margin:0; font:400 clamp(18px, 1.6vw, 21px)/1.5 var(--font-body); max-width:46ch}
.mp-split__bef blockquote{color:#4A5A6E}
.mp-split__aft blockquote{color:var(--on-navy)}
.mp-split__why{font-size:15px; margin:0}
.mp-split__bef .mp-split__why{color:var(--sec)}
.mp-split__aft .mp-split__why{color:var(--on-navy-2)}
.mp-split__ex{font-size:12.5px; color:var(--on-navy-2); margin:0}
.mp-split__join{display:none}
.mp-split > .mp-split__head{grid-column:1 / -1; display:block; background:#fff; padding:clamp(40px, 6vw, 72px) 0 clamp(20px, 3vw, 28px)}
.mp-split__head p{margin:.7rem 0 0; color:#34506E; max-width:56ch}
@media (min-width:760px){
  .mp-split{grid-template-columns:1fr 1fr}
  .mp-split__aft{position:relative}
  .mp-split__join{display:grid; position:absolute; left:0; top:clamp(72px, 9vw, 130px); transform:translateX(-50%);
    width:64px; height:64px; border-radius:50%; background:#fff; place-items:center; box-shadow:0 10px 24px rgba(11,28,56,.35); z-index:2}
  .mp-split__join svg{width:26px; height:26px}
}

/* ---------- 4. Proof: one number, very large ---------- */
.mp-proof .mp-in{padding-block:clamp(48px, 7vw, 96px); display:grid; gap:20px clamp(20px, 4vw, 56px)}
.mp-big{font:800 clamp(120px, 34vw, 300px)/.78 var(--font-display); letter-spacing:-.06em; color:#fff; font-variant-numeric:tabular-nums; margin:0;
  text-shadow:1px 1px 0 #1C426E,2px 2px 0 #1C426E,3px 3px 0 #1B3F6A,4px 4px 0 #1A3C66,5px 5px 0 #193A62,6px 6px 0 #18375E,7px 7px 0 #17355A,8px 8px 0 #163256,9px 9px 0 #153052,10px 10px 0 #142E4E,11px 11px 0 #132B4A,12px 12px 0 #122946,22px 26px 30px rgba(0,0,0,.35)}
.mp-big sup{font-size:.34em; vertical-align:.95em; letter-spacing:0; color:var(--sky); text-shadow:none}
.mp-proof__txt{display:grid; gap:12px; max-width:36ch}
.mp-proof__txt p{margin:0}
.mp-proof__claim{font:600 clamp(19px, 1.8vw, 22px)/1.35 var(--font-display); color:#fff}
.mp-proof__was{color:var(--on-navy)}
.mp-proof__was b{color:#fff}
.mp-dots{display:grid; gap:18px clamp(20px, 4vw, 48px); margin-top:clamp(8px, 2vw, 24px)}
.mp-dots figure{margin:0; display:grid; gap:8px}
.mp-dots figcaption{font:600 12.5px/1.3 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:#C9D6E6}
.mp-dots figcaption b{color:#fff; font-size:15px}
.mp-grid100{display:grid; grid-template-columns:repeat(20, 1fr); gap:4px; max-width:420px}
.mp-grid100 i{aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.14)}
.mp-grid100.is-before i.on{background:#9FB0C4}
.mp-grid100.is-after i.on{background:var(--sky)}
.mp-who{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center}
.mp-who img{width:104px; aspect-ratio:1; height:auto; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 5px var(--steel), 0 0 0 6.5px var(--sky), 0 18px 34px rgba(0,0,0,.35)}
.mp-who span{font:600 12px/1.35 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:#C9D6E6; max-width:20ch}
.mp-quote{margin:clamp(16px, 3vw, 32px) 0 0; padding-top:clamp(20px, 3vw, 32px); border-top:1px solid rgba(255,255,255,.22); display:grid; gap:14px; max-width:60ch}
.mp-quote p{margin:0; font:500 clamp(18px, 1.7vw, 21px)/1.5 var(--font-body); color:#fff}
.mp-quote footer{font-size:15px; color:var(--on-navy)}
.mp-quote footer b{color:#fff; display:block}
@media (min-width:760px){
  .mp-proof .mp-in{grid-template-columns:auto minmax(0,1fr) auto; align-items:end}
  /* Row 2: the two grids stacked on the left, the Scania quote beside them. */
  .mp-dots{grid-column:1; grid-template-columns:1fr; align-content:start}
  .mp-quote{grid-column:2 / -1; margin:0; padding:0 0 0 clamp(24px, 3vw, 40px); border-top:0; border-left:1px solid rgba(255,255,255,.22); align-self:start; margin-top:clamp(8px, 2vw, 24px)}
  .mp-quote p{font-size:clamp(19px, 1.7vw, 23px)}
  .mp-who{grid-row:1; grid-column:3; grid-template-columns:1fr; justify-items:center; align-self:center}
  .mp-who img{width:clamp(130px, 14vw, 190px)}
  .mp-who span{text-align:center}
}

/* ---------- 5. The question in many languages, plus clients ---------- */
.mp-langs{overflow:hidden}
.mp-langs .mp-in{padding-block:clamp(40px, 6vw, 80px); display:grid; gap:20px}
.mp-langs__flow{font:700 clamp(20px, 2vw, 28px)/1.3 var(--font-display); letter-spacing:-.02em; color:var(--blue-900); margin:0; text-wrap:pretty}
.mp-langs__flow span{margin-right:.45em}
.mp-langs__flow span.dim{color:#AEB9C7}
.mp-langs__flow span.en{color:var(--sky-strong)}
.mp-langs__flow i{font:600 11px/1 var(--mono); font-style:normal; letter-spacing:.06em; color:var(--sec); vertical-align:super; margin-left:.3em}
@media (min-width:640px){ .mp-langs__flow span{white-space:nowrap} }
/* Phones: six of the thirteen, one per line, so it reads as a list, not a wall. */
@media (max-width:639px){
  .mp-langs__flow{font-size:clamp(19px, 5.4vw, 23px); line-height:1.35}
  .mp-langs__flow span{display:none}
  .mp-langs__flow span.ph{display:block; margin:0}
}

/* ---------- 6. Score one answer: the scorecard is a real object ---------- */
.mp-score{overflow-x:clip}   /* the tilted sheets must not widen the page */
.mp-score .mp-in{padding-block:clamp(48px, 7vw, 96px); display:grid; gap:clamp(28px, 5vw, 64px)}
.mp-score__copy{display:grid; gap:14px; align-content:start}
.mp-score__copy p{margin:0; color:#34506E; max-width:44ch}
.mp-score__answer{margin:0; font:500 19px/1.5 var(--font-body); color:var(--ink); max-width:44ch}
.mp-score__answer small{display:block; margin-top:8px; font:600 11px/1.3 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--sec)}
.mp-stack{position:relative; width:100%; max-width:640px; justify-self:center; margin-top:18px}
.mp-stack::before, .mp-stack::after{content:""; position:absolute; inset:0; box-shadow:0 20px 40px -22px rgba(20,48,88,.45)}
.mp-stack::before{transform:rotate(3.5deg) translate(14px, 10px); background:#F7F4EE}
.mp-stack::after{transform:rotate(1deg) translate(6px, 4px); background:#FBFAF7}
.mp-stack__cnt{position:absolute; right:0; top:-22px; z-index:4}
.mp-sheet{position:relative; z-index:3; background:#fff; color:var(--ink); padding:22px 20px 20px;
  box-shadow:0 2px 0 rgba(20,48,88,.06), 0 30px 50px -20px rgba(20,48,88,.45); transform:rotate(-1.2deg); display:grid; gap:4px}
.mp-sheet__top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; padding-bottom:10px}
.mp-sheet__top b{font:700 17px var(--font-display); color:var(--blue-900)}
.mp-sheet .lp-crit{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-items:center; padding:10px 0; border:0; margin:0}
.mp-sheet .lp-crit + .lp-crit{border-top:1px solid #E7EBF0}
.mp-crit__name{font:600 16px/1.25 var(--font-body); color:var(--blue-900)}
.mp-crit__hint{grid-column:1; font-size:13.5px; color:var(--sec)}
.mp-ticks{grid-column:2; grid-row:1 / span 2; display:flex; gap:6px}
.mp-ticks label{position:relative; cursor:pointer}
.mp-ticks input{position:absolute; opacity:0; width:1px; height:1px}
.mp-ticks span{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; font:600 16px var(--mono); color:#8793A3}
.mp-ticks input:checked + span{background:var(--blue-900); color:#fff}
.mp-ticks input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px}
@media (hover:hover){ .mp-ticks label:hover span{color:var(--blue-900)} }
.mp-crit__lvl{grid-column:1 / -1; font-size:14px; color:#34506E; min-height:1.4em}
.mp-sheet__tot{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:6px; padding-top:12px; border-top:2px solid var(--blue-900)}
.mp-sheet__tot strong{font:800 32px/1 var(--font-display); color:var(--blue-900); position:relative; white-space:nowrap}
.mp-ring{position:absolute; left:-16px; top:50%; width:calc(100% + 32px); height:62px; transform:translateY(-52%) rotate(-4deg); pointer-events:none; overflow:visible}
.mp-sheet__verdict{font-size:15px; color:#34506E; text-align:right; max-width:28ch}
.mp-score__cta{margin-top:26px}
@media (min-width:900px){
  .mp-score .mp-in{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); align-items:center}
  .mp-sheet{padding:30px 32px 26px}
  .mp-crit__name{font-size:18px}
  .mp-ticks span{width:50px; height:50px; font-size:18px}
  .mp-sheet__tot strong{font-size:40px}
}

/* ---------- 7. Why this works: three statements, no boxes ---------- */
.mp-why .mp-in{display:grid; gap:clamp(24px, 4vw, 40px)}
.mp-why ol{list-style:none; margin:0; padding:0; display:grid; gap:clamp(28px, 4vw, 48px)}
.mp-why li{display:grid; gap:8px; max-width:62ch}
.mp-why li b{font:700 clamp(21px, 2.3vw, 28px)/1.2 var(--font-display); color:var(--blue-900)}
.mp-why li span{color:#34506E}
.mp-why__head{display:grid; gap:14px; align-content:start}
/* Pull quote with crop marks: the measurement motif, used on quotes only. */
.mp-pull{position:relative; margin:18px 0 0; padding:22px 24px; display:grid; gap:12px; max-width:44ch}
.mp-pull::before, .mp-pull::after{content:""; position:absolute; width:16px; height:16px; border-color:var(--blue-900); border-style:solid}
.mp-pull::before{left:0; top:0; border-width:2px 0 0 2px}
.mp-pull::after{right:0; bottom:0; border-width:0 2px 2px 0}
.mp-pull blockquote{margin:0; font:600 clamp(18px, 1.7vw, 21px)/1.45 var(--font-display); color:var(--blue-900)}
.mp-pull figcaption{font-size:15px; color:var(--sec)}
.mp-pull figcaption b{display:block; color:var(--ink)}
.mp-why ol{counter-reset:none}
.mp-why li{padding-top:18px; border-top:2px solid var(--blue-900)}
@media (min-width:900px){
  .mp-why .mp-in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); column-gap:clamp(40px, 6vw, 96px); align-items:start}
  .mp-why ol{gap:36px}
}

/* ---------- 8. The one ruler: four weeks ---------- */
.mp-weeks .mp-in{display:grid; gap:24px}
.mp-weeks svg{width:100%; height:auto; display:none; overflow:visible}
.mp-weeks .t{font:600 12px var(--mono); letter-spacing:.05em; fill:var(--sec)}
.mp-weeks .v{font:700 19px var(--font-display); fill:var(--blue-900)}
.mp-weeks .s{font:400 15px var(--font-body); fill:#34506E}
.mp-wl{list-style:none; margin:0; padding:0}
.mp-wl li{display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:2px 14px; padding:12px 0}
.mp-wl .mp-lab{padding-top:4px}
.mp-wl b{font:700 18px/1.25 var(--font-display); color:var(--blue-900)}
.mp-wl .d{grid-column:2; color:#34506E; font-size:15.5px}
@media (min-width:720px){ .mp-weeks svg{display:block} .mp-wl{display:none} }

/* ---------- 9. What's inside: six modules as big numerals ---------- */
.mp-mods ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:28px 20px}
.mp-mods .mp-in{display:grid; gap:28px}
.mp-mods li{display:grid; gap:6px; align-content:start}
.mp-mods .num{font:800 clamp(72px, 9vw, 120px)/.8 var(--font-display); letter-spacing:-.05em; color:var(--sky-strong)}
.mp-mods .num.locked{color:transparent; -webkit-text-stroke:2px var(--blue-900)}
.mp-mods .ttl{font:700 17px/1.3 var(--font-display); color:var(--blue-900); max-width:24ch}
.mp-files{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 28px}
.mp-files li{font-size:15.5px; color:#34506E}
.mp-files i{font:600 12px/1 var(--mono); font-style:normal; letter-spacing:.06em; color:var(--sec); margin-right:.5em}
.mp-mods__note{margin:0; color:#34506E; max-width:60ch}
.mp-mods__note b{color:var(--blue-900)}
@media (min-width:900px){ .mp-mods ol{grid-template-columns:repeat(3, minmax(0,1fr)); gap:36px 40px} }

/* ---------- 10. CTA bands ---------- */
.mp-band .mp-in{padding-block:clamp(40px, 6vw, 72px); display:grid; gap:20px; justify-items:start}
.mp-band__t{font:800 clamp(28px, 4vw, 48px)/1.05 var(--font-display); letter-spacing:-.02em; color:#fff; margin:0; max-width:18ch}
.mp-band__s{margin:0; color:var(--on-navy)}
@media (min-width:860px){ .mp-band .mp-in{grid-template-columns:minmax(0,1fr) auto; align-items:end} }

/* ---------- 11. Two routes: a spec table ---------- */
.mp-routes .mp-in{display:grid; gap:28px}
.mp-spec{width:100%; border-collapse:collapse; font-size:15.5px}
.mp-spec th, .mp-spec td{padding:14px 12px 14px 0; text-align:left; vertical-align:top; border-top:1px solid #D9DEE5}
.mp-spec thead th{border-top:0; padding-bottom:16px; font:700 clamp(18px, 2vw, 22px)/1.2 var(--font-display); color:var(--blue-900)}
.mp-spec thead th small{display:block; margin-top:4px}
.mp-spec tbody th{font:600 12px/1.35 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--sec); width:6.5rem; padding-top:17px}
.mp-spec td{color:#34506E}
.mp-spec td.paid{color:var(--blue-900); font-weight:600}
.mp-spec tfoot td{border-top:0; padding-top:18px}
.mp-routes__more{margin:0; color:#34506E; max-width:60ch}
@media (max-width:640px){
  .mp-spec, .mp-spec thead, .mp-spec tbody, .mp-spec tfoot, .mp-spec tr{display:block}
  .mp-spec thead{display:none}
  .mp-spec tbody tr{display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; padding:14px 0; border-top:1px solid #D9DEE5}
  .mp-spec tbody th{grid-column:1 / -1; border:0; padding:0; width:auto}
  .mp-spec td{border:0; padding:0}
  .mp-spec td::before{content:attr(data-col); display:block; font:600 11px/1.3 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--sec); margin-bottom:2px}
  .mp-spec tfoot tr{display:grid; gap:12px; padding-top:10px}
}

/* ---------- 12b. Enquiry: the form is a box because you fill it in ---------- */
.mp-enq .mp-in{padding-block:clamp(48px, 7vw, 96px); display:grid; gap:clamp(28px, 5vw, 64px)}
.mp-enq__copy{display:grid; gap:14px; align-content:start}
.mp-enq__copy > p:not(.mp-lab){color:var(--on-navy); margin:0; max-width:44ch}
.mp-enq__points{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:14px; max-width:46ch}
.mp-enq__points li{color:var(--on-navy); padding-left:22px; position:relative}
.mp-enq__points li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--sky)}
.mp-enq__points b{color:#fff}
.mp-enq__card{border-radius:3px; box-shadow:0 30px 60px -28px rgba(0,0,0,.6)}
.mp-enq .field input, .mp-enq .field select, .mp-enq .field textarea{border-radius:3px}
.mp-enq .field textarea{min-height:84px}
.mp-opt{font:600 11.5px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--sec); margin-left:.4em}
@media (max-width:520px){ .mp-enq .form-grid{grid-template-columns:1fr} }
@media (min-width:900px){ .mp-enq .mp-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start} }

/* ---------- 12. FAQ: rows you open ---------- */
.mp-faq .mp-in{display:grid; gap:24px}
.mp-faq .mp-in > div{max-width:900px}   /* narrow column, same left edge as every section */
.mp-faq details{border-top:1px solid #D9DEE5}
.mp-faq details:last-child{border-bottom:1px solid #D9DEE5}
.mp-faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:18px 0; font:600 18px/1.35 var(--font-display); color:var(--blue-900)}
.mp-faq summary::-webkit-details-marker{display:none}
.mp-faq summary svg{flex:none; transition:transform .2s var(--ease)}
.mp-faq details[open] summary svg{transform:rotate(180deg)}
.mp-faq .fa{padding:0 0 20px; color:#34506E; max-width:64ch}
.mp-faq .fa p{margin:0}

@media (prefers-reduced-motion:reduce){ .mp *{transition:none!important} }