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

/* ---------- 1. Motion: the same reveals, lighter and quicker on a phone ----------
   Shorter travel (12-16px), 0.6-0.8s, and the desktop column staggers (--d) compressed: on a phone,
   cards arrive one at a time as you scroll, so a 300-450ms wait reads as lag, not choreography.
   (site.js also reveals a little sooner on phones and only resets once an element has left the screen.) */
@media (max-width:760px){
  .js .fade{transform:translateY(12px);transition:opacity .6s var(--ease),transform .75s var(--ease);transition-delay:calc(var(--d,0ms)*.35)}
  .js .rise{transform:translateY(16px);transition:opacity .6s var(--ease),transform .75s var(--ease);transition-delay:calc(var(--d,0ms)*.35)}
  .js .fade.in,.js .rise.in{transform:none}
  .js .split .w>span{transition:transform .8s var(--ease);transition-delay:calc(var(--i)*26ms)}
  .js .curtain{transition:clip-path .9s var(--ease);transition-delay:calc(var(--d,0ms)*.35)}
  .js .curtain img{transform:scale(1.06);transition:transform 1.2s var(--ease);transition-delay:calc(var(--d,0ms)*.35)}
  .js .curtain.in img{transform:none}
  /* openings keep their sequence, a touch quicker */
  .js .hero [data-hero].fade,.js .hero [data-hero].rise,.js .page-hero [data-hero].fade,.js .page-hero [data-hero].rise,
  .js .page-hero .hero-cta.fade{transition-delay:calc(var(--d,0ms)*.7)}
  .js .hero-bg{transition:opacity 1.1s var(--ease),transform 1.6s var(--ease)}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .js .split .w>span,.js .fade,.js .curtain,.js .curtain img,.js .rise{transform:none!important;opacity:1!important;clip-path:none!important;transition:none!important}
}

/* ---------- 2. Header and logo ---------- */
@media (max-width:760px){
  .top .wrap,.top.solid .wrap{height:68px}
  .top .logo{height:32px}
  .top.solid{background:rgba(255,255,255,.98);box-shadow:0 1px 0 rgba(14,30,48,.07),0 10px 24px -20px rgba(14,30,48,.35)}
  .menu-btn{letter-spacing:.01em;padding:0 0 0 12px;min-width:56px;justify-content:flex-end}
}

/* ---------- 3. The menu sheet: numbered rows, a calmer entrance ---------- */
@media (max-width:760px){
  .drawer{padding-top:calc(92px + env(safe-area-inset-top));counter-reset:dr;
    background:radial-gradient(120% 55% at 100% 100%,var(--sky) 0%,rgba(233,242,248,0) 72%),#fff}
  .drawer::before{margin-bottom:10px}
  .drawer a:not(.btn){counter-increment:dr;justify-content:flex-start;min-height:72px;font-size:clamp(30px,8.6vw,38px)}
  /* small index numbers echo the "01 / 02 / 03" used across the site (hidden from screen readers) */
  .drawer a:not(.btn)::before,.drawer a[aria-current=page]::before{content:"0" counter(dr);content:"0" counter(dr) / "";position:static;inset:auto;flex:none;width:34px;height:auto;background:none;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--mist);align-self:center}
  .drawer a[aria-current=page]{padding-left:0}
  .drawer a[aria-current=page]::before{color:var(--blue)}
  .drawer a:not(.btn)::after{margin-left:auto}
  .js .drawer.open a{animation:drawer-in .55s var(--ease) both}
}

/* ---------- 4. Landing hero: one composed first screen ---------- */
@media (max-width:760px){
  /* the copy sits low on the photograph and the four figures close the first screen */
  .hero-grid{min-height:calc(100svh - 178px);padding-top:104px;padding-bottom:36px;gap:0;align-items:end}
  .hero .who{font-size:14px;margin-bottom:18px}
  .hero .live-line{margin-top:18px;font-size:19px}
  .hero .lead{margin-top:14px;font-size:16.5px;line-height:1.55}
  .hero-cta{margin-top:28px;gap:10px}
  .hero-cta .btn{min-height:52px;padding:15px 22px}
  /* figures: solid tinted panes instead of a live blur (four blurred panes are costly on phones) */
  .stat{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,35,66,.82);padding:15px 18px 16px}
  .stat:first-child{background:var(--blue)}
  .stat b{font-size:25px}
  .stat span{font-size:12.5px;margin-top:4px}
}

/* ---------- 5. Page openings (.page-hero / .hx) ---------- */
@media (max-width:760px){
  .page-hero .wrap{padding-top:112px;padding-bottom:56px}
  .page-hero .crumb{font-size:13.5px;margin-bottom:18px}
  .page-hero .lead{margin-top:16px;font-size:17px}
  .page-hero .hero-cta{margin-top:28px;gap:10px}
  .page-hero .hero-cta .btn{min-height:52px;padding:15px 22px}

  /* services: the facts sit under the buttons instead of 150px further down */
  .hx-svc .hx-inner{padding-top:112px;padding-bottom:36px}
  .hx-svc .live-line{margin-top:16px;font-size:19px}
  .hx-svc .hx-strip .wrap{padding-top:0;padding-bottom:28px}
  .hx-facts li{padding:14px 14px 4px 0}
  .hx-facts li+li{padding-left:14px}
  .hx-facts li:nth-child(3){padding-left:0}
  .hx-facts b{font-size:28px}

  /* about: the figures close the opening flush, like the landing page */
  .hx-ab .hx-inner{padding-top:112px!important;padding-bottom:36px!important}
  .hx-ab .ab-facts .wrap{padding-bottom:0!important}
  .hx-ab .live-line{margin-top:16px;font-size:19px}
  .hx-ab .live-line+.lead{margin-top:14px;font-size:16.5px;line-height:1.55}

  /* training: the next-course card as solid tinted glass (no live blur) */
  .hx-trn .hx-two{padding-top:112px!important;padding-bottom:48px!important;gap:32px}
  .hx-next{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,rgba(14,30,48,.9),rgba(0,70,111,.82));border-radius:20px}
  .hx-live{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,35,66,.82)}
  .hx-next-body{padding:20px 20px 22px}

  /* knowledge hub: the four counts become a 2 x 2 index; the cover story without live blur */
  .hx-kh .hx-inner{padding-top:100px;padding-bottom:48px!important}
  .hx-mast{padding-bottom:16px}
  .hx-mast-name{font-size:clamp(48px,14vw,60px)}
  .hx-cover{margin-top:24px;gap:28px}
  .hx-lines{grid-template-columns:1fr 1fr;margin-top:22px}
  .hx-lines li:nth-child(odd){border-right:1px solid rgba(255,255,255,.14)}
  .hx-lines a,.hx-lines a:hover{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 12px 14px 4px;font-size:14px;line-height:1.35;min-height:44px}
  .hx-lines li:nth-child(even) a,.hx-lines li:nth-child(even) a:hover{padding-left:16px}
  .hx-story{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,rgba(14,30,48,.86),rgba(0,70,111,.7));padding:24px 20px;border-radius:20px}
}

/* ---------- 6. The closing invitation (.inv) ---------- */
@media (max-width:760px){
  .inv{padding-bottom:56px}
  /* the photograph dissolves into the night instead of ending on a hard 1px edge */
  .inv-ph{height:min(72svh,600px);-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
  .inv-top{padding-top:96px;min-height:0}
  .inv-mark{font-size:clamp(46px,13.4vw,58px);line-height:.98}
  .inv-commit{gap:10px;margin-top:24px}
  .inv-c{flex:1 1 100%;padding:14px 18px;border-radius:16px;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,35,66,.58);border-color:rgba(255,255,255,.22)}
  .inv-c b{font-size:38px}
  .inv-card{margin-top:28px;border-radius:20px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
  .inv-main,.inv-side{padding:30px 22px}
  .inv-title{font-size:clamp(30px,8.6vw,36px)}
  .inv-sub{font-size:16px}
  .inv-cta{margin-top:24px;gap:10px}
  .inv-cta .btn{min-height:52px;padding:15px 22px}
  .inv-steps li{grid-template-columns:32px 1fr;padding:13px 0}
  .inv-contact{gap:0;padding-top:14px}
  .inv-contact a,.inv-contact li>span{min-height:44px;line-height:1.4}
  .inv-contact li>span{padding:10px 0}
}

/* ---------- 7. Footer ---------- */
@media (max-width:760px){
  footer.site .wrap{padding-top:40px}
  footer.site img{height:40px}
  .statement{font-size:15px}
  .f-grid{gap:30px}
  /* the services and company lists read as two calm columns instead of one long run */
  .f-grid>div:nth-child(2) ul,.f-grid>div:nth-child(4) ul{grid-template-columns:1fr 1fr;column-gap:20px}
  footer.site li{font-size:15px;line-height:1.35}
  footer.site ul{align-items:start}
  footer.site li a{display:flex;align-items:center;min-height:44px;padding:6px 0}
  .legal{flex-direction:column;gap:6px;margin-top:28px}
  /* the "design sample" note: a small pill that never blocks a tap */
  .sample{left:12px;right:auto;bottom:calc(10px + env(safe-area-inset-bottom));font-size:10.5px;padding:5px 10px;border-radius:999px;background:rgba(0,70,111,.9);opacity:.92;pointer-events:none}
  html.drawer-open .sample,body.modal-open .sample{display:none}
}

/* ---------- 8. Modal: the reader sheet and the consultation wizard ---------- */
@media (max-width:760px){
  /* a lighter blur behind the sheet: full-screen backdrop blur is expensive on phones */
  .modal .scrim{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(14,30,48,.55)}
  .modal .box{border-radius:18px 18px 0 0;transition:opacity .4s var(--ease),transform .55s var(--ease)}
  .modal.cw-modal .box{border-radius:0}
  .modal .mbody{padding:24px 20px 28px}
  .modal .mfoot{padding:14px 20px calc(14px + env(safe-area-inset-bottom))}
  .modal:not(.cw-modal) .x{width:44px;height:44px;margin:10px 10px -54px 0}
  .prose{font-size:17px;line-height:1.68}
  .prose h2{font-size:25px}
  .prose blockquote{font-size:19px;padding-left:16px}
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- 9. Buttons ---------- */
@media (max-width:760px){
  .btn{min-height:48px}
  .btn:active{transform:scale(.985);transition:transform .15s}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .btn:active{transform:none}
}

@media (max-width:760px){
  /* cookie notice on phones: full width above the home indicator, button underneath */
  .cnote{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:none;flex-direction:column;align-items:stretch;gap:14px;padding:18px;background:rgba(14,30,48,.96);-webkit-backdrop-filter:none;backdrop-filter:none}
  .cnote .btn{width:100%;min-height:48px}
  /* cookie choices on phones: the two answers side by side, equal width; settings underneath */
  .cnote.cc{gap:12px}
  .cnote.cc .cc-act .btn{width:auto;min-width:0;flex:1 1 0;padding:12px 10px}
  .modal .cc-foot{flex-direction:column;align-items:stretch}
  .cc-foot .btn{width:100%;min-height:48px}
  .cc-row{gap:14px}
}