/* ALECTIUS — mobile layer v2 (only ≤767px). Desktop is untouched. */
html{background:#f2f2f2}
@media (max-width:767px){
  /* clip (not hidden) so position:sticky keeps working */
  html,body{overflow-x:clip !important}
  body{background:#f2f2f2;-webkit-tap-highlight-color:transparent}

  /* ================= HERO: phone fan, pinned with CSS sticky ================= */
  #sec-6c32.alx-on > .u-sheet{min-height:0 !important;padding:0 !important;width:100% !important;max-width:none !important;overflow:visible !important}
  #sec-6c32.alx-on > .u-sheet > *:not(.alx-mh){display:none !important}
  .alx-mh{position:relative;height:200vh}
  .alx-mh__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:13svh;contain:paint}
  #sec-6c32 .alx-mh .alx-mh__k{font:400 13px/1 "Roboto",sans-serif;letter-spacing:9px;color:#9a9a9a;margin:0 0 10px 9px}
  #sec-6c32 .alx-mh .alx-mh__s{font:400 19px/1.2 "Roboto",sans-serif;color:#9a9a9a;text-transform:uppercase;margin:0}
  #sec-6c32 .alx-mh h1.alx-mh__w{font-family:"Roboto",sans-serif;font-weight:700;font-size:64px;line-height:1;letter-spacing:10px;color:#a8a8a8;margin:16px 0 0 10px;transform-origin:50% 50%}
  .alx-mh__k,.alx-mh__s,.alx-mh__w,.alx-mh__fan img{will-change:transform,opacity;backface-visibility:hidden}
  .alx-mh__fan{position:absolute;left:50%;bottom:-6svh;width:0;height:0}
  .alx-mh__fan img{position:absolute;left:0;bottom:0;width:44vw;max-width:220px;height:auto;margin:0;
    border-radius:16% / 7.6%;box-shadow:0 14px 30px rgba(0,0,0,.28);transform-origin:50% 100%;
    opacity:0;transition:opacity .8s ease}
  .alx-mh.is-ready .alx-mh__fan img{opacity:1}
  .alx-mh__hint{position:absolute;bottom:3svh;left:50%;margin-left:-11px;width:22px;height:36px;border:2px solid #b5b5b5;border-radius:12px;transition:opacity .3s}
  .alx-mh__hint::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#b5b5b5;animation:alxHint 1.6s ease-in-out infinite}
  .alx-mh.is-moved .alx-mh__hint{opacity:0}
  @keyframes alxHint{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

  /* ================= MISSION ================= */
  #carousel_3182.alx-on > .u-sheet{min-height:0 !important;padding:0 !important;width:100% !important;max-width:none !important}
  #carousel_3182.alx-on > .u-sheet > *:not(.alx-mm){display:none !important}
  .alx-mm{position:relative;padding:84px 24px 100px;text-align:center;overflow:hidden}
  #carousel_3182 .alx-mm p{margin:0;font-family:"Roboto",sans-serif;font-weight:700;text-transform:uppercase}
  #carousel_3182 .alx-mm p.alx-mm__a{font-size:22px;letter-spacing:6px;color:#fff}
  #carousel_3182 .alx-mm p.alx-mm__b{font-size:28px;line-height:1.08;color:#8f8f8f;margin-top:14px !important}
  #carousel_3182 .alx-mm p.alx-mm__c{font-size:64px;line-height:1;letter-spacing:8px;color:#ff0;margin-top:10px !important}
  .alx-mm__img{display:block;width:62vw;max-width:290px;height:auto;margin:44px auto 0;border-radius:16% / 7.6%;box-shadow:0 18px 40px rgba(0,0,0,.3);will-change:transform}
  /* text reveal: CSS transition triggered once (no per-frame work) */
  .alx-rv{opacity:0}
  .alx-rv.is-in{opacity:1;animation:alxIn .85s cubic-bezier(.2,.8,.2,1) backwards}
  @keyframes alxIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}

  /* ================= SERVICES — compact, comfortable cards ================= */
  section.alx-services{padding:64px 16px 72px}
  .alx-services .alx-eyebrow{font-size:12px;margin-bottom:8px}
  .alx-services .alx-h2{font-size:30px;line-height:1.1;margin:0 0 26px}
  .alx-services .alx-cards{display:grid !important;grid-template-columns:1fr !important;gap:14px}
  .alx-services .alx-card{
    display:grid;grid-template-columns:56px 1fr;grid-template-areas:"icon head" "desc desc" "bottom bottom";
    column-gap:16px;align-items:center;min-height:0 !important;padding:20px 20px 18px;border-radius:24px;
    background:#fff !important;box-shadow:0 8px 24px rgba(20,20,26,.07);
    transition:transform .25s ease,box-shadow .25s ease,background .25s ease;flex:none !important}
  .alx-services .alx-card__icon{grid-area:icon;flex:none;width:56px;height:56px;padding:0;border-radius:18px;background:#14141a;display:flex;align-items:center;justify-content:center;opacity:1 !important}
  .alx-services .alx-card__icon svg{width:28px;height:28px}
  .alx-services .alx-card__icon svg *{stroke:#fff !important}
  .alx-services .alx-card__icon svg [fill="currentColor"],.alx-services .alx-card__icon svg [fill="#14141a"]{fill:#fff !important}
  .alx-services .alx-card__head{grid-area:head;min-width:0}
  .alx-services .alx-card__title{font-size:22px;margin:0 0 2px}
  .alx-services .alx-card__sub{font-size:13.5px}
  .alx-services .alx-card__desc{grid-area:desc;position:static !important;opacity:1 !important;transform:none !important;margin:14px 0 0 !important;font-size:15px;line-height:1.55;color:#4a4a52}
  .alx-services .alx-card__bottom{grid-area:bottom;margin-top:16px;padding-top:14px;border-top:1px solid rgba(20,20,26,.08)}
  .alx-services .alx-card__go{width:40px;height:40px;transform:none !important}
  .alx-services .alx-card__go svg{width:17px;height:17px}
  /* touch: no sticky yellow hover — short press feedback instead */
  .alx-services .alx-card:hover{background:#fff !important;box-shadow:0 8px 24px rgba(20,20,26,.07)}
  .alx-services .alx-card:active{transform:scale(.975);background:#f6d448 !important}
  .alx-services .alx-card:active .alx-card__go{background:#14141a}

  /* ================= "MORE THAN ONE." ================= */
  #carousel_d2f8.alx-on{background-size:cover !important;background-repeat:no-repeat !important;overflow:hidden}
  #carousel_d2f8.alx-on h1{opacity:1 !important;filter:none !important;transform:none !important;visibility:visible !important;font-size:40px !important;letter-spacing:4px;text-align:center;width:auto !important;margin-left:auto !important;margin-right:auto !important}

  /* ================= GALLERY ================= */
  .alx-par{overflow:hidden !important;border-radius:14px}
  .alx-par > img{will-change:transform;backface-visibility:hidden}

  /* ================= CONTACT FORM ================= */
  #contact h2{font-size:28px !important;letter-spacing:8px !important}
  #contact .u-form{max-width:none !important}
  #contact label{font-size:13px !important;letter-spacing:1px !important;color:#7a7a7a !important}
  #contact input.u-input,#contact textarea.u-input{font-size:16px !important;padding:14px 16px !important;border-radius:16px !important;background:#fff !important;border:1px solid rgba(0,0,0,.06) !important;box-shadow:0 4px 14px rgba(0,0,0,.04)}
  #contact input.u-input{height:52px !important}
  #contact textarea.u-input{min-height:130px !important}
  #contact .u-btn-submit{display:block !important;width:100% !important;max-width:none !important;padding:16px !important;border-radius:999px !important;background:#14141a !important;color:#fff !important;font-size:15px !important;letter-spacing:4px !important}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .alx-mh{height:auto}
  .alx-mh__stick{position:relative;height:auto;min-height:100svh}
  .alx-mh__hint::after{animation:none}
  .alx-rv{opacity:1 !important;animation:none !important}
}