/* ==========================================================================
   Homepage (index.html), Oct 2026 rebuild, PLAN.md §5.3 and §6.
   Sits on top of style.css and wbc.css (which holds the shared marketing
   components: .lp-logos, .lp-routes, .lp-why__list, .lp-h).
   Mobile first. Orange is the only action colour; nothing fades in.
   ========================================================================== */

/* ---------- 1. hero: flat navy, graph grid, ruler ticks ---------- */
.home-hero{
  background-color:var(--blue-900);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;
  padding-block:calc(70px + 1.75rem) 2.5rem;
}
.home-hero::before{content:""; position:absolute; left:0; top:70px; bottom:0; width:12px;
  border-right:1px solid rgba(255,255,255,.16);
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.32) 0 1px,transparent 1px 14px),
                   repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 1px,transparent 1px 70px);
  background-size:5px 100%,10px 100%; background-repeat:no-repeat; background-position:right top,right top}
.home-hero .hero__inner{grid-template-columns:1fr; gap:2rem}
.home-hero h1{font-size:clamp(1.95rem,1.3rem + 2.8vw,3.4rem); line-height:1.06}
.home-hero .lead{color:#D5DEE8; max-width:46ch}
.home-hero__actions{display:flex; flex-direction:column; align-items:stretch; gap:.9rem; margin-top:1.4rem}
.home-hero__actions .tlink{align-self:center}
.home-hero__actions .btn, .home-hero__actions .tlink{white-space:nowrap}
.home-hero__trust{margin-top:1.1rem; font-size:.875rem; color:#B8C2CF; text-wrap:balance}
.home-hero .hero__copy{order:1}
.home-hero .hero__visual--roster{order:2}
.home-roster__cap{margin-top:.9rem; font-size:.875rem; line-height:1.45; color:#B8C2CF; max-width:var(--roster-w, 340px); margin-inline:auto}
.home-roster__cap b{color:var(--white)}
/* the roster sits still: no bobbing tiles, no pulsing "live" dot */
.home-hero .roster__cell{animation:none !important}
.home-hero .roster__cell:nth-child(2n+1),.home-hero .roster__cell:nth-child(2n){margin-top:0}
/* A long label sets its own break in the markup ("Brazilian<br>Portuguese"),
   so the pill hugs its longest line like the short ones do. */
.home-hero .roster__lang{text-align:left}
.home-hero .roster__lang > span{line-height:1.2}

/* Phones and narrow tablets: one centred column. The coaches come straight
   after the promise and before the button, so the first screen shows real
   people rather than a button and the top edge of a video (Tibor,
   2026-11-10). The header's own "Let's talk" covers a button that lands just
   under the fold on a short phone. style.css (section 26) already dissolves
   hero__copy into the hero's flex column at this width; this sets the order
   for this hero. */
@media (max-width:900px){
  .home-hero{padding-block:calc(70px + 1.25rem) 2.5rem}
  .home-hero .hero__inner{gap:0; text-align:center}
  .home-hero .hero__copy{display:contents}
  .home-hero .hero__copy > .eyebrow{order:1; text-wrap:balance}
  .home-hero .hero__copy > h1{order:2}
  .home-hero .hero__copy > .lead{order:3; margin-inline:auto}
  .home-hero .hero__visual--roster{order:4; margin-top:1.4rem; --roster-w:320px}
  .home-hero__actions{order:5; margin-top:1.3rem}
  .home-hero__trust{order:6}
}
@media (min-width:900px){
  .home-hero{padding-block:calc(78px + 3.5rem) 4rem}
  .home-hero::before{top:78px}
  .home-hero .hero__inner{grid-template-columns:1.05fr .95fr; gap:3.5rem}
  .home-hero__actions{flex-direction:row; flex-wrap:wrap; align-items:center; gap:1rem 1.75rem}
}

/* ---------- 2. logos ---------- */
.home-logos{background:var(--white); padding-block:1.75rem; border-bottom:1px solid var(--blue-300)}
.home-logos .lp-logos{padding-bottom:0; border-bottom:0}

/* ---------- 3. results ---------- */
.home-measure{max-width:62ch; margin-bottom:1.75rem}
#results .stats{grid-template-columns:1fr; gap:1rem}
#results .stat{box-shadow:none}
@media (min-width:900px){ #results .stats{grid-template-columns:repeat(3,1fr); gap:1.5rem} }

/* ---------- 5. method ---------- */
.home-method li b{font-size:1.25rem}
/* Teach, practice, measure: an icon each, joined by a line that draws in as
   the three steps arrive (motion.js staggers them). */
.home-method{position:relative}
.home-method li{position:relative}
.hm-ic{display:grid; place-items:center; width:56px; height:56px; margin-bottom:.6rem; border-radius:50%;
  background:#fff; color:var(--blue-900); box-shadow:inset 0 0 0 1.5px var(--blue-900); position:relative; z-index:1;
  transition:background .35s var(--rv-ease), color .35s var(--rv-ease), transform .35s var(--rv-ease)}
.hm-ic svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (hover:hover){ .home-method li:hover .hm-ic{background:var(--blue-900); color:#fff; transform:translateY(-3px)} }
/* phones and tablets: the three steps stack, centred under their icon */
@media (max-width:899px){
  .home-method li{align-items:center; text-align:center; padding-block:1.6rem}
  .home-method li span{margin-inline:auto}
}
@media (min-width:900px){
  .home-method li{border-top:0 !important; padding-top:0 !important}
  .home-method li:not(:last-child)::after{content:""; position:absolute; top:28px; left:72px; right:calc(-2.5rem + 16px); height:0;
    border-top:2px dashed #B9C3D0; transform-origin:left; transform:scaleX(1)}
  html.motion .home-method li.rv:not(:last-child)::after{transform:scaleX(0); transition:transform .9s var(--rv-ease) .35s}
  html.motion .home-method li.rv-in:not(:last-child)::after{transform:scaleX(1)}
}

.home-weekly{margin-top:clamp(2.5rem,5vw,4rem); align-items:center}
.home-weekly img{width:100%; border-radius:var(--r-lg)}

/* The first step offer under the method: copy and button on the left, the
   coach on the right looking left into it. On a phone the photo goes on top. */
.home-offer{display:grid; margin-top:clamp(2.5rem,5vw,4rem); background:var(--white);
  border-top:2px solid var(--blue-900); overflow:hidden}
.home-offer__copy{display:flex; flex-direction:column; align-items:flex-start; gap:.85rem;
  padding:clamp(1.5rem,3.5vw,2.75rem)}
.home-offer__copy p:not(.eyebrow){color:var(--content-body); max-width:50ch}
.home-offer__copy .btn{margin-top:.5rem}
.home-offer__img{margin:0; order:-1; height:220px}
.home-offer__img img{width:100%; height:100%; object-fit:cover; object-position:62% 30%}
@media (max-width:560px){
  .home-offer__copy .btn{align-self:stretch}
}
@media (min-width:900px){
  .home-offer{grid-template-columns:1.15fr .85fr}
  .home-offer__img{order:0; height:auto; min-height:100%}
}

/* Under the quotes: the hero's two actions again, left-aligned with the cards. */
.home-quotes2__acts{flex-direction:column; align-items:stretch}
.home-quotes2__acts .tlink{align-self:center}
@media (min-width:640px){
  .home-quotes2__acts{flex-direction:row; align-items:center}
}

/* ---------- 7. programmes: photo tiles carrying the customer's question ----------
   Same photos as the programme pages. The question is the hook; the drills
   slide up on hover or keyboard focus (desktop), the photo eases in. */
.hp-format{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.25rem; margin:clamp(1.5rem,3.5vw,2.25rem) 0 clamp(1.75rem,4vw,2.75rem); list-style:none; padding:0}
.hp-format li{display:flex; align-items:center; gap:.85rem; font-size:.875rem; line-height:1.35; color:var(--content-body)}
.hp-format img{flex:0 0 auto; width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #fff, 0 0 0 4px #D9D0BF; transition:transform .35s var(--ease)}
.hp-format b{display:block; color:var(--blue-900); font-size:.9375rem}
@media (hover:hover){ .hp-format li:hover img{transform:scale(1.08) rotate(-3deg)} }
@media (min-width:900px){ .hp-format{grid-template-columns:repeat(4,1fr)} .hp-format img{width:64px; height:64px} }

.hp-tiles{display:grid; gap:1rem}
@media (min-width:760px){ .hp-tiles{grid-template-columns:repeat(3,1fr); gap:1.25rem} }
.hp-tile{position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:400px; overflow:hidden; isolation:isolate;
  border-radius:6px; background:var(--blue-900); color:#fff; text-decoration:none}
@media (min-width:760px){ .hp-tile{min-height:0; aspect-ratio:4/5} }
.hp-tile > img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hp-tile::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,28,56,0) 25%, rgba(11,28,56,.55) 52%, rgba(11,28,56,.94) 100%); transition:opacity .5s var(--ease)}
.hp-tile__body{display:grid; gap:1rem; padding:clamp(1.25rem,2.4vw,1.75rem)}
.hp-tile q{quotes:"\201C" "\201D"; font:600 clamp(1.05rem,1.45vw,1.2rem)/1.35 var(--font-display); letter-spacing:-.005em; text-wrap:balance; color:#fff;
  padding-left:1.1rem; border-left:3px solid rgba(255,255,255,.55)}
.hp-tile__name{display:grid; gap:.15rem; padding-top:.95rem; border-top:1px solid rgba(255,255,255,.22)}
.hp-tile__name b{font:700 1.3rem/1.2 var(--font-display)}
.hp-tile__name span{font-size:.875rem; color:#C8D5E4}
.hp-tile__more{display:none}
.hp-tile__drills{display:grid; gap:.45rem; min-height:0; overflow:hidden; font-size:.875rem; color:#E4EAF1}
.hp-tile__drills span{position:relative; padding-left:1.1rem}
.hp-tile__drills span::before{content:""; position:absolute; left:0; top:.55em; width:.45rem; height:.45rem; border-radius:50%; background:#fff}
.hp-tile__go{position:absolute; top:1rem; right:1rem; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--blue-900); transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease)}
.hp-tile__go svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

/* desktop with a mouse: the drills sit folded and open on hover/focus */
@media (hover:hover) and (min-width:760px){
  .hp-tile__more{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .5s var(--ease), opacity .35s var(--ease)}
  .hp-tile:hover .hp-tile__more, .hp-tile:focus-visible .hp-tile__more{grid-template-rows:1fr; opacity:1}
  .hp-tile:hover > img, .hp-tile:focus-visible > img{transform:scale(1.07)}
  .hp-tile:hover::before, .hp-tile:focus-visible::before{background:linear-gradient(180deg, rgba(11,28,56,.15) 0%, rgba(11,28,56,.7) 40%, rgba(11,28,56,.96) 100%)}
  .hp-tile:hover .hp-tile__go, .hp-tile:focus-visible .hp-tile__go{transform:rotate(45deg); background:var(--blue-900); color:#fff}
}
@media (prefers-reduced-motion:reduce){ .hp-tile > img, .hp-tile__more, .hp-tile__go{transition:none} }

/* the shorter value-selling steps */
.hp-steps2{display:grid; gap:.75rem; margin-top:clamp(1.5rem,3vw,2rem)}
.hp-steps2__lab{font-weight:700; color:var(--blue-900)}
@media (min-width:760px){ .hp-steps2{grid-template-columns:1fr 1fr; column-gap:1.25rem} .hp-steps2__lab{grid-column:1 / -1} }
.hp-step{display:grid; grid-template-columns:96px 1fr auto; gap:1rem; align-items:center; padding:.6rem 1.1rem .6rem .6rem;
  background:#fff; border:1px solid #DDD5C6; border-radius:6px; color:var(--content-body); text-decoration:none; transition:border-color .25s var(--ease)}
.hp-step img{width:96px; height:72px; object-fit:cover; border-radius:4px; transition:transform .5s var(--ease)}
.hp-step b{display:block; color:var(--blue-900); font-size:1rem}
.hp-step > span:nth-child(2) > span{font-size:.875rem; line-height:1.35; display:block}
.hp-step__len{font-weight:700; font-size:.8125rem; color:var(--blue-900); background:var(--paper); padding:.3rem .55rem; border-radius:999px; white-space:nowrap}
.hp-step{overflow:hidden}
@media (hover:hover){ .hp-step:hover{border-color:var(--blue-900)} .hp-step:hover img{transform:scale(1.08)} }
@media (max-width:480px){ .hp-format{gap:1rem .8rem} .hp-format li{gap:.6rem} .hp-format img{width:46px; height:46px} }
@media (max-width:420px){ .hp-step{grid-template-columns:72px 1fr} .hp-step img{width:72px; height:60px} .hp-step__len{display:none} }

/* ---------- 8. quotes ---------- */
/* The client quotes: the crop marks reach further and the card lifts on hover. */
.home-quote{transition:transform .4s var(--rv-ease), background-color .4s var(--rv-ease)}
.home-quote::before, .home-quote::after{transition:width .4s var(--rv-ease), height .4s var(--rv-ease)}
@media (hover:hover){
  .home-quote:hover{transform:translateY(-4px); background-color:rgba(255,255,255,.075)}
  .home-quote:hover::before, .home-quote:hover::after{width:44px; height:44px}
}
.home-quotes{margin-top:1.75rem; grid-template-columns:1fr}
.home-quotes .quote{padding-left:1.1rem; border-left:2px solid rgba(255,255,255,.4); background:none; box-shadow:none}
@media (min-width:900px){ .home-quotes{grid-template-columns:1fr 1fr} }

/* ---------- 9. contact ---------- */
.home-trustline{margin-top:1.5rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.14); font-size:.875rem; color:#B8C2CF}

/* back-to-top sits in the thumb zone on a phone: desktop only */
@media (max-width:759px){ .totop{display:none} }

/* results: "before" in grey, "after" in navy (PLAN.md §6, colour roles) */
#results .stat__to{color:var(--blue-900)}
#results .stat__fill{background:var(--blue-900)}
#results .stat__ghost{background:var(--before)}

/* ---------- 6. The Value Selling Portal (replaces "Two ways to start", Oct 2026) ----------
   A preview of /portal/: the three lanes as compact lists, every row a link to
   that item's panel. Light ground, same status and audience marks as the portal. */
.hp-portal{background:#fff; color:var(--ink)}
.hp-portal__in{display:grid; gap:36px}
.hp-portal__intro{display:grid; gap:18px; align-content:start; min-width:0}
.hp-portal__lead{margin:0; color:var(--content-body); font-size:1.0625rem; max-width:52ch}
.hp-portal__film{margin:0; display:grid; gap:10px}
.hp-portal__film .video-ph, .hp-portal__film video{display:block; width:100%; aspect-ratio:16/9; border:0; padding:0; cursor:pointer;
  border-radius:4px; overflow:hidden; background:#000; position:relative; box-shadow:0 24px 48px -28px rgba(20,48,88,.55)}
.hp-portal__film .video-ph img{width:100%; height:100%; object-fit:cover; display:block}
.hp-portal__film figcaption{font-size:15px; color:var(--grey-500)}
.hp-portal__film figcaption b{color:var(--blue-900)}

.hp-lanes{display:grid; gap:22px; align-content:start; min-width:0}
.hp-lane h3{margin:0 0 8px; padding-bottom:8px; font:700 18px/1.2 var(--font-display); color:var(--blue-900); border-bottom:3px solid var(--lane)}
.hp-lane--self{--lane:#2277AA}
.hp-lane--ai{--lane:#1F6FD1}
.hp-lane--coach{--lane:#143058}
.hp-lane ul{list-style:none; margin:0; padding:0}
.hp-lane li + li{border-top:1px solid #E1E6EE}
.hp-lane a{display:grid; grid-template-columns:104px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 4px;
  color:var(--blue-900); text-decoration:none}
.hp-lane a b{font-weight:600; font-size:16px; line-height:1.3}
@media (hover:hover){ .hp-lane a:hover b{text-decoration:underline; text-underline-offset:3px} }
.hp-lane a:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.hp-st{justify-self:start; display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:20px; font:600 12px/1.2 var(--font-body); white-space:nowrap}
.hp-st--live, .hp-st--free{background:#E3F4E7; color:#1E6B31}
.hp-st--live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green-500)}
.hp-st--soon{color:#2277AA; box-shadow:inset 0 0 0 1.5px currentColor}
.hp-st--coach{background:var(--blue-900); color:#fff}
.hp-aud{display:flex; gap:5px; justify-content:flex-end}
.hp-tag{padding:3px 8px; border-radius:3px; font:600 12px/1.2 var(--font-body); white-space:nowrap}
.hp-tag--m{background:#FCEBDD; color:#9A3D0E}
.hp-tag--s{background:#E2EEFA; color:#17588F}

@media (min-width:980px){
  .hp-portal__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center}
}
@media (max-width:560px){
  .hp-lane a{grid-template-columns:92px minmax(0,1fr); row-gap:4px}
  .hp-aud{grid-column:2; justify-content:flex-start}
}