/* Phone-only refinements (index). Every rule must sit inside @media (max-width:760px): desktop and tablet never load these rules. */

/* ---------- client band: the names drift in and out of soft edges ---------- */
@media (max-width:760px){
  .clients{padding:34px 0 38px}
  .clients .clients-k{font-size:11px;letter-spacing:.2em;margin-bottom:18px;gap:12px}
  .clients .clients-k::before,.clients .clients-k::after{width:18px}
  .mq{-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%)}
  .mq-track{animation-duration:70s}
  .mq-set li{padding:0 28px;font-size:21px}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .mq{-webkit-mask-image:none;mask-image:none}
  .mq-set{row-gap:10px}
  .mq-set li{padding:0 16px;font-size:19px}
}

/* ---------- section heads: a steady rhythm ---------- */
@media (max-width:760px){
  .score-head,.practice-head,.bp-head{gap:18px;margin-bottom:36px}
  .score .lead,.practice .lead{font-size:17px}
}

/* ---------- approach: photo and stairs ---------- */
@media (max-width:760px){
  .climb{gap:14px}
  .climb .photo{min-height:300px}
}

/* ---------- practice wall: five tall photographs become one swipeable gallery ---------- */
@media (max-width:760px){
  .wall{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(-1*var(--gut));padding:0 var(--gut) 4px;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch}
  .wall::-webkit-scrollbar{display:none}
  .wall .tile{flex:0 0 84%;height:420px;scroll-snap-align:start}
  .wall .a figcaption{padding:18px 18px 20px}
  .wall .a figcaption .big{font-size:64px}
  .wall .a figcaption b{font-size:18px;line-height:1.3;margin-top:8px}
  .wall figcaption{max-width:none}
}

/* ---------- champion: six duties as compact rows (icon beside the words) ---------- */
@media (max-width:760px){
  .portrait{height:380px}
  .champ-grid{gap:40px}
  .duties{gap:10px;margin-top:32px}
  .duty{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start;padding:20px 18px 20px}
  .duty .ic{grid-row:1/3;margin:2px 0 0}
  .duty h3{font-size:17.5px;line-height:1.3}
  .duty p{margin-top:4px;font-size:15px;line-height:1.5}
}

/* ---------- ways to start ---------- */
@media (max-width:760px){
  .ways{gap:14px;margin-top:36px}
}

/* ---------- proof: quote and level ---------- */
@media (max-width:760px){
  #pf-title{margin-bottom:32px!important}
  .proof-grid{gap:14px}
  .quote-card{padding:30px 22px}
  .quote-card .mark{font-size:96px;height:44px}
  .quote-card blockquote p{font-size:24px;line-height:1.25}
  .quote-card footer{margin-top:20px}
  .quote-switch{gap:8px;margin-top:24px}
  .level-card{padding:30px 22px}
  .level-card .big{font-size:84px}
  .serve-line{margin-top:28px}
}

/* ---------- the Blueprint: three briefings as a swipeable row ---------- */
@media (max-width:760px){
  .bp-head .fine{margin-top:12px}
  .cards{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:36px calc(-1*var(--gut)) 0;padding:4px var(--gut) 28px;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch}
  .cards::-webkit-scrollbar{display:none}
  .cards .card{flex:0 0 84%;scroll-snap-align:start}
  .card .ph{height:170px}
  .card .in{padding:20px 20px 22px}
  .card h3{font-size:20px}
}