/* Card finish, loaded last on every page.
   Cards carry no coloured edges. Depth comes from a hairline ring and a soft layered
   shadow; hover lifts the card and deepens the shadow. Colour is kept for things the
   visitor selects (chips, dates, tabs, ticked programmes), which their own rules style. */
:root{
  --ring:0 0 0 1px rgba(14,30,48,.06);
  --rest:0 1px 2px rgba(14,30,48,.04),0 14px 34px -22px rgba(14,30,48,.28);
  --raise:0 2px 6px rgba(14,30,48,.05),0 34px 64px -34px rgba(14,30,48,.48);
}

/* 1. Edges off: base and hover, so no rule further up can bring them back. */
.duty,.duty:hover,.mcard,.mcard:hover,.person,.person:hover,.apart li,.apart li:hover,
.pick,.pick:hover,.course,.course:hover,.w3,.w3:hover,.st,.st:hover,.ec,.ec:hover,
.facts li,.os-h,.routes>div,.sed-list article,.ab-quote,.ab-commit-card,.dash,.cc,a.cc:hover{border-top-color:transparent}
.modal .box{border-top:0}
.res,.res:hover,.measures .m,.phases>div,.bk-total{border-left-color:transparent}

/* 2. Resting depth: a hairline ring plus a soft shadow. */
.duty,.mcard,.person,.apart li,.course,.w3,.st,.ec,.res,.card,.way:not(.feature),
.facts li,.measures .m,.routes>div,.sed-list article,.ab-quote,.pick:not([aria-selected=true]){
  box-shadow:var(--ring),var(--rest)
}
.duty,.apart li,.facts li,.measures .m,.sed-list article{background:#fff}

/* 3. Hover: lift, deepen the shadow, and let the title take the brand blue. */
.duty,.mcard,.person,.apart li,.course,.w3,.st,.ec,.card,.pick,.res{
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .45s var(--ease),color .45s var(--ease),opacity .9s var(--ease)
}
.duty:hover,.mcard:hover,.person:hover,.apart li:hover,.course:hover,.w3:hover,.st:hover,.ec:hover,.card:hover,
.pick:not([aria-selected=true]):hover{transform:translateY(-4px);box-shadow:var(--ring),var(--raise)}
.res:hover{transform:translateX(3px);box-shadow:var(--ring),var(--raise)}
.duty h3,.mcard h3,.person h3,.apart b,.course h3,.w3 h3,.st h3,.ec h3,.card h3{transition:color .45s var(--ease)}
.duty:hover h3,.mcard:hover h3,.person:hover h3,.apart li:hover b,.course:hover h3,.w3:hover h3,.st:hover h3,.ec:hover h3,.card:hover h3{color:var(--blue)}
/* the icon chip warms up instead of an edge lighting up */
.duty .ic{transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.duty:hover .ic{transform:scale(1.06);box-shadow:0 0 0 7px var(--sky)}

/* Keyboard focus stays clearly visible. */
.mcard:focus-visible,.pick:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .duty:hover,.mcard:hover,.person:hover,.apart li:hover,.course:hover,.w3:hover,.st:hover,.ec:hover,.card:hover,.pick:hover,.res:hover{transform:none}
}

/* =====================================================================
   Mobile and tablet pass. Everything below sits inside max-width queries
   (1100 / 700 / 420px), so the desktop design above 1100px is untouched.
   ===================================================================== */
@property --edge{syntax:"<length>";inherits:false;initial-value:28px}
@keyframes edge-out{to{--edge:0px}}

@media (max-width:1100px){
  /* grid children may shrink below their content's natural width (stops the
     newsletter form pushing the landing page wider than the phone) */
  .bp-head>*,.score-head>*,.practice-head>*,.proof-grid>*,.close .wrap>*{min-width:0}
  /* free-training rows read better one per line until the desktop grid returns */
  .fs-list{grid-template-columns:1fr}
  /* wide tables and bars scroll inside their own box; the right edge fades
     to show there is more, and the fade clears once you reach the end */
  .cmp-wrap,.jump .wrap{-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--edge)),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - var(--edge)),transparent)}
  @supports (animation-timeline:scroll()){
    .cmp-wrap,.jump .wrap{animation:edge-out linear both;animation-timeline:scroll(self inline)}
  }
  /* jump bar: swipe with snap */
  .jump .wrap{scroll-snap-type:x proximity;scroll-padding-inline:var(--gut)}
  .jump a{scroll-snap-align:start}
}

@media (max-width:700px){
  /* section rhythm: shorter gaps between sections on a phone */
  .sec{padding:64px 0}
  .sec-tight,.bp-bg.sec{padding:56px 0}
  .close .wrap{padding-top:56px;padding-bottom:56px}

  /* hero calls to action: full width, stacked */
  .hero-cta,.page-hero .hero-cta,.close .cta-row{flex-direction:column;align-items:stretch}
  .hero-cta .btn,.page-hero .hero-cta .btn,.close .cta-row .btn{width:100%}
  .climb .photo{min-height:340px}
  .portrait{height:440px}

  /* newsletter sign-up: field above button */
  form.sub{flex-wrap:wrap}
  form.sub input{flex:1 1 100%}
  form.sub .btn{flex:1 1 100%;min-height:56px}

  /* 16px inputs stop iOS zooming the page on focus */
  .search input,.pager form input,form.sub input,.field input,.field select,.field textarea{font-size:16px}

  /* tap targets of at least 44px */
  .top .wrap>a{display:inline-flex;align-items:center;min-height:44px}
  .chip{display:inline-flex;align-items:center;min-height:44px}
  .quote-switch button{min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center}
  .go-link,.c-other,.fg-all,.ab-more,.page-hero .crumb a,.vcard .vlink,.detail .go,.pb-clear,.more-btn{position:relative}
  .go-link::before,.c-other::before,.fg-all::before,.ab-more::before,.page-hero .crumb a::before,.vcard .vlink::before,.detail .go::before,.pb-clear::before{content:"";position:absolute;inset:-12px -6px}
  .jump a{min-height:56px}

  /* blurred modal becomes a sheet rising from the bottom of the phone */
  .modal{padding:0;place-items:end stretch;align-items:end}
  .modal .box,.modal.narrow .box,.modal.reader .box{width:100%;max-height:calc(100vh - 8px);max-height:calc(100dvh - 8px - env(safe-area-inset-top));
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom);transform:translateY(40px)}
  .modal.open .box{transform:none}
  .modal .x{margin:8px 8px -56px 0}
  html:has(body.modal-open){overflow:hidden}

  /* footer: stacked, with comfortable tap rows */
  footer.site{padding:44px 0 calc(24px + env(safe-area-inset-bottom))}
  .f-grid{gap:30px}
  footer.site ul{gap:0}
  footer.site li a{display:inline-block;padding:10px 0}
  footer.site h3{margin-bottom:6px}
  .legal{margin-top:28px}
  .sample{bottom:calc(12px + env(safe-area-inset-bottom));font-size:11px;padding:6px 10px;opacity:.94}
}

@media (max-width:420px){
  .h2{font-size:clamp(27px,8.2vw,34px)}
  .page-hero h1{font-size:clamp(31px,9.4vw,40px)}
  .btn{padding:18px 22px}
  .dates{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .c-foot{align-items:center}
  .stat{padding:14px 14px}
  .stat b{font-size:24px}
}
/* legal pages and the 404 page */
.legal-doc{max-width:760px}
.legal-doc h2{font-size:24px;font-weight:400}
.legal-doc a.btn{color:#fff;text-decoration:none}
.legal-doc .review{padding:14px 18px;background:var(--sky);border-left:3px solid var(--blue);font-size:15px;line-height:1.55;color:var(--navy)}
.nf .wrap{min-height:72vh;display:flex;flex-direction:column;justify-content:center}
.nf h1 em{font-style:italic;color:var(--mist)}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.nf-mail{margin-top:26px;color:var(--on-blue)}
.nf-mail a{color:#fff}

/* cookie notice: a quiet glass card, bottom left, shown once */
.cnote{position:fixed;left:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:20px;max-width:560px;padding:18px 18px 18px 22px;border-radius:18px;
  background:rgba(14,30,48,.88);color:#fff;-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.cnote.on{opacity:1;transform:none}
.cnote p{margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.82)}
.cnote p b{color:#fff;font-weight:500}
.cnote a{color:#fff;text-underline-offset:3px}
.cnote .btn{flex:none;padding:12px 22px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.cnote{transition:none;transform:none}}
/* cookie choices (only when Google Analytics is configured): the same glass card, with two equal answers */
.cnote.cc{flex-direction:column;align-items:stretch;gap:16px;max-width:600px}
.cc-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cnote.cc .cc-act .btn{flex:1 1 0;min-width:150px;padding:14px 20px}
.cc-more{all:unset;box-sizing:border-box;cursor:pointer;flex:1 0 100%;min-height:44px;padding:10px 4px;font:500 14px/1.2 var(--font);color:#fff;text-decoration:underline;text-underline-offset:3px;text-align:center}
.cc-more:hover{color:var(--on-blue)}
.cc-more:focus-visible,.cnote .btn:focus-visible,.cnote a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cc-live{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
/* cookie settings dialog */
.cc-modal .box{width:min(640px,100%)}
.cc-body h2{font-size:clamp(26px,3vw,34px);line-height:1.1;color:var(--navy)}
.cc-body .lede{margin-top:12px;color:var(--slate);font-size:16px}
.cc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:20px;padding-top:20px;border-top:1px solid var(--hair)}
.cc-row h3{font-size:18px;font-weight:500;letter-spacing:0;color:var(--navy)}
.cc-row p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--slate)}
.cc-state{flex:none;font-size:14px;font-weight:500;color:var(--blue);padding-top:2px;white-space:nowrap}
.cc-note{margin:22px 0 0;font-size:14px}
.cc-note a{color:var(--blue);text-underline-offset:3px}
.modal .cc-foot{justify-content:flex-end}
.cc-foot .btn{padding:14px 22px;font-size:15px}
.cc-sw{position:relative;flex:none;display:inline-block;width:52px;height:30px;cursor:pointer}
.cc-sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.cc-track{position:absolute;inset:0;border-radius:15px;background:#B7C3CE;transition:background .25s var(--ease)}
.cc-track::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(14,30,48,.3);transition:transform .25s var(--ease)}
.cc-sw input:checked+.cc-track{background:var(--blue)}
.cc-sw input:checked+.cc-track::after{transform:translateX(22px)}
.cc-sw input:focus-visible+.cc-track{outline:2px solid var(--blue);outline-offset:3px}
.cc-sw .vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
@media (prefers-reduced-motion:reduce){.cc-track,.cc-track::after{transition:none}}
/* the menu sheet gained a sixth link (AI solutions): it joins the staggered entrance */
@media (max-width:1100px){.drawer.open a:nth-child(6){animation-delay:200ms}}