/* ============================================================
   DISCITEX — Mobile Experience Layer
   Applied after page-specific styles. Keeps the cinematic desktop
   system, but turns phones/tablets into a natural, touch-first flow.
   ============================================================ */

/* Better tap behaviour and safer text wrapping everywhere. */
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}
.display,.h1,.h2,.h3,.lead,.card h3,.press-card strong,.alumni-card>strong{text-wrap:balance}
p,li{text-wrap:pretty}
:where(.display,.h1,.h2,.h3,.lead,.card,.glass,.metric,.mission,.module,.principle,.alumni-card,.press-card){min-width:0}

@media (max-width:900px){
  /* Mobile should feel like a guided story, not a scroll trap. */
  .snap{
    position:relative;
    inset:auto;
    height:auto;
    min-height:100svh;
    overflow:visible;
    scroll-snap-type:none;
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
    scroll-padding-top:0;
  }
  .panel{
    min-height:auto;
    scroll-snap-stop:normal;
    align-items:flex-start;
    padding:106px 0 72px;
    overflow:visible;
  }
  .panel:first-child{min-height:100svh;align-items:center}
  .panel[data-align="center"]{align-items:center}
  .panel-inner{transform:none!important;opacity:1!important;will-change:auto}

  /* Mobile reveal system: animate each content block, not the whole section.
     Tall mobile sections may never occupy enough of the viewport to satisfy
     desktop scene thresholds. Keeping the animation to opacity + translate
     also avoids expensive blur/filter repaints during touch scrolling. */
  .panel .reveal{
    opacity:0;
    transform:translate3d(0,22px,0);
    filter:none;
    transition:opacity .52s var(--ease),transform .62s var(--ease);
    will-change:opacity,transform;
  }
  .panel .reveal.in{
    opacity:1;
    transform:none;
  }
  .panel .reveal[data-delay="1"]{transition-delay:.04s}
  .panel .reveal[data-delay="2"]{transition-delay:.08s}
  .panel .reveal[data-delay="3"]{transition-delay:.12s}
  .panel .reveal[data-delay="4"]{transition-delay:.16s}
  .panel .reveal[data-delay="5"]{transition-delay:.20s}
  .panel .reveal[data-delay="6"]{transition-delay:.24s}
  .panel .line-mask>span{transform:none!important;transition:none!important}
  .scene-index{position:absolute;right:10px;bottom:18px;font-size:clamp(82px,24vw,150px);opacity:.32}
  .scroll-cue{display:none}

  /* Navigation: compact, thumb-friendly and safe around notches. */
  .nav{
    top:max(10px,env(safe-area-inset-top));
    left:max(10px,env(safe-area-inset-left));
    right:max(10px,env(safe-area-inset-right));
  }
  .nav-shell{height:60px;padding:7px 8px 7px 15px;gap:14px;background:rgba(4,6,8,.82)}
  .brand-logo{height:16px}
  .menu-btn{display:block;width:46px;height:46px;touch-action:manipulation}
  .mobile-menu{
    padding:calc(100px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(34px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
    align-content:center;
    background:rgba(2,3,4,.965);
  }
  .mobile-menu a{
    min-height:58px;
    display:flex;
    align-items:center;
    font-size:clamp(30px,8.8vw,48px);
    line-height:1.02;
    padding:12px 2px;
  }
  .mobile-menu a[aria-current="page"]{color:var(--red)}
  .mobile-menu a:last-child{
    margin-top:20px;
    min-height:56px;
    width:100%;
    justify-content:center;
    border:0;
    border-radius:999px;
    background:#fff;
    color:#07090b;
    font-size:16px;
    letter-spacing:-.01em;
  }
  html.menu-open,.menu-open body{overscroll-behavior:none}

  /* Typography and rhythm are tuned for reading distance on phones/tablets. */
  .display{font-size:clamp(48px,12.8vw,78px);line-height:.94;letter-spacing:-.06em;max-width:11ch}
  .h1{font-size:clamp(38px,9.5vw,58px);line-height:.99}
  .h2{font-size:clamp(31px,8vw,46px);line-height:1.02}
  .h3{font-size:clamp(22px,5vw,30px)}
  .lead{font-size:clamp(16px,4vw,19px);line-height:1.58;max-width:38rem}
  .kicker,.eyebrow{font-size:9.5px;letter-spacing:.18em;line-height:1.4}
  .panel-inner,.page-wrap,.footer-inner{padding-inline:clamp(20px,5.2vw,34px)}

  /* Touch targets and buttons. */
  .btn{min-height:52px;padding-inline:21px;touch-action:manipulation}
  .actions{gap:10px}
  .actions .btn{min-width:0}
  .interactive{transform:none!important;will-change:auto}
  .interactive:hover{--lift:0}
  .glass:before{display:none}

  /* Forms: 16px prevents iOS focus-zoom; fields get more breathing room. */
  .field{gap:8px;margin-bottom:17px}
  .field label{font-size:13px}
  .field input,.field select,.field textarea{font-size:16px;min-height:50px;padding:14px 14px;border-radius:14px}
  .field textarea{min-height:150px}
  .consent{font-size:13px;padding:14px}

  /* Footer becomes naturally stacked. */
  .footer{padding-bottom:calc(34px + env(safe-area-inset-bottom))}
  .footer-inner{align-items:flex-start;flex-direction:column;gap:14px}
  .footer-side{white-space:normal}

  /* ---------- Homepage ---------- */
  .hero-lockup{gap:18px}
  .hero-copy{max-width:34ch}
  .hero-meta{margin-top:26px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:18px}
  .metric,.metric:nth-child(2){min-height:92px;padding:17px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .metric:nth-child(2n){border-right:0}
  .metric:nth-last-child(-n+2){border-bottom:0}
  .metric strong{font-size:clamp(30px,8vw,40px)}
  .metric>span{font-size:8.5px;letter-spacing:.075em}
  .domain-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .domain{min-height:138px;padding:20px}
  .pathway{margin-top:26px}
  .proof-grid,.instructor-tease{gap:22px}
  .proof-card{padding:19px;gap:13px}
  .monogram{max-width:210px}

  /* ---------- Program ---------- */
  .mission-grid{margin-top:26px}
  .mission{min-height:170px;padding:24px}
  .mission .stage-word{font-size:38px;margin-top:50px}
  .blueprint{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px}
  .module{min-height:178px;padding:19px}
  .deliverables{gap:18px}
  .deliverables .glass{padding:24px}
  .system-visual{min-height:280px}
  .blue-team-layout{gap:26px}
  .chain-step{grid-template-columns:36px 1fr auto;min-height:58px;padding:14px}
  .operate-head{gap:20px}
  .operate-meta{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}
  .operate-meta>div{padding:15px 11px}
  .operate-meta strong{font-size:21px}
  .operate-layout{gap:14px;margin-top:22px}
  .ops-stack{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ops-card{min-height:200px;padding:20px}
  .ops-card:after{left:20px;right:20px;top:52px}
  .continuity-callout{gap:12px;padding:15px}
  .lab-item{min-height:66px;padding:11px 13px}

  /* ---------- Instructor ---------- */
  .instructor-hero .hero-lead{margin-top:18px}
  .hero-proof{
    width:min(100%,620px);
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    border-radius:16px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .hero-proof::-webkit-scrollbar{display:none}
  .hero-proof span{width:auto;min-width:max-content;scroll-snap-align:start;border-bottom:0;padding:12px 15px}
  .profile-layout{gap:34px}
  .profile-orbit{max-width:250px;margin-inline:auto}
  .orbit-proof{bottom:-30px}
  .profile-evidence{margin-top:20px}
  .section-head-inline,.impact-header{gap:12px}
  .section-head-inline .lead{text-align:left}
  .press-rail{margin-inline:-2px;padding-inline:10px;scroll-padding-inline:10px}
  .press-grid,.alumni-grid,.philosophy{gap:10px}
  .alumni-card{min-height:145px}
  .method-manifesto{margin-top:20px;padding:18px 20px}

  /* ---------- Enrolment ---------- */
  .reason-grid{gap:10px}
  .reason{min-height:190px;padding:22px}
  .coverage{gap:22px}
  .instructor-strip{gap:22px}
  .fit-grid{gap:10px}
  .fit-box{min-height:auto;padding:23px}
  .offer-layout{gap:22px}
  .price-card,.outputs-panel{padding:24px}
  .faq-item button{min-height:60px;font-size:16px;padding:18px 0}
  .faq-answer p{padding-right:0}

  /* ---------- Assessment ---------- */
  .assessment-page{padding-top:94px}
  .assessment-shell{padding-inline:clamp(20px,5vw,32px);gap:24px}
  .assessment-intro{gap:12px;padding-top:8px}
  .assessment-intro .lead{font-size:16px}
  .acard{padding:24px 20px;border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.4)}
  .opts{grid-template-columns:1fr}
  .opt{min-height:66px;padding:14px}
  .opt-copy{font-size:15px}

  /* ---------- Contact ---------- */
  .contact-layout{gap:28px}
  .contact-form{padding:24px}
  .contact-form-head{margin-bottom:20px}
  .routing{gap:10px}
}

@media (max-width:620px){
  /* More natural section rhythm on actual phones. */
  .panel{padding:94px 0 58px}
  .panel:first-child{padding-top:98px;min-height:100svh}
  .panel[data-align="center"]{min-height:100svh}
  .panel-inner,.page-wrap,.footer-inner{padding-inline:20px}
  .scene-index{display:none}

  .display{font-size:clamp(44px,13.2vw,62px);line-height:.95;letter-spacing:-.055em}
  .h1{font-size:clamp(36px,10.5vw,50px)}
  .h2{font-size:clamp(30px,8.8vw,42px)}
  .lead{font-size:16px;line-height:1.56}

  /* Buttons stay easy to hit without every small action becoming huge. */
  .actions{width:100%;display:grid;grid-template-columns:1fr;align-items:stretch}
  .actions .btn{width:100%;min-width:0}
  .btn{min-height:52px}

  /* Homepage: 2x2 metrics are far easier to scan than four tall rows. */
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric,.metric:nth-child(2){min-height:88px;padding:16px 14px}
  .domain-grid{grid-template-columns:1fr}
  .domain{min-height:132px}
  .manifesto{padding:22px}
  .manifesto .quote{font-size:clamp(25px,7vw,34px)}
  .proof-card{align-items:center}
  .proof-card strong{font-size:24px;min-width:52px}
  .monogram{max-width:190px;margin-inline:auto}

  /* Program: stack dense information, but keep stat blocks compact. */
  .blueprint{grid-template-columns:1fr}
  .module{min-height:160px}
  .deliverables .glass{padding:20px}
  .deliverable{grid-template-columns:30px 1fr;padding:16px 0}
  .system-visual{min-height:250px}
  .system-ring{width:min(250px,76vw)}
  .chain-step{grid-template-columns:30px 1fr;gap:8px}
  .chain-step em{grid-column:2;font-size:8.5px}
  .operate-meta{grid-template-columns:repeat(3,minmax(0,1fr))}
  .operate-meta>div{border-right:1px solid var(--line);border-bottom:0;padding:13px 8px}
  .operate-meta>div:last-child{border-right:0}
  .operate-meta strong{font-size:20px}
  .operate-meta span{font-size:7.4px;letter-spacing:.06em}
  .ops-stack{grid-template-columns:1fr}
  .ops-card{min-height:176px}
  .continuity-callout{grid-template-columns:1fr}
  .continuity-callout span{white-space:normal}
  .lab-item{grid-template-columns:30px 1fr}

  /* Instructor: compact proof, centred identity, readable trajectories. */
  .instructor-hero .instructor-display{font-size:clamp(43px,12.4vw,60px)}
  .profile-orbit{max-width:215px;margin-inline:auto}
  .orbit-label{font-size:7px}
  .orbit-proof{padding:10px 12px;gap:8px}
  .orbit-proof b{font-size:23px}
  .profile-evidence{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:14px}
  .profile-evidence>div{border-bottom:0;border-right:1px solid var(--line);padding:13px 10px}
  .profile-evidence>div:last-child{border-right:0}
  .profile-evidence strong{font-size:19px}
  .profile-evidence span{font-size:7.2px;letter-spacing:.04em}
  .press-grid,.alumni-grid,.philosophy{grid-template-columns:1fr}
  .press-feature,.philosophy .principle:last-child{grid-column:auto}
  .press-card{padding:18px}
  .press-feature strong{font-size:21px}
  .alumni-card{padding:17px}
  .trajectory{grid-template-columns:1fr auto 1fr;grid-template-areas:'then arrow now' 'from arrow to';align-items:start}
  .trajectory small:nth-of-type(1){grid-area:then}.trajectory b:nth-of-type(1){grid-area:from}
  .trajectory em{grid-area:arrow;align-self:center}.trajectory small:nth-of-type(2){grid-area:now}.trajectory b:nth-of-type(2){grid-area:to}
  .trajectory small:nth-of-type(2),.trajectory b:nth-of-type(2){text-align:right}
  .principle{min-height:200px;padding:22px}

  /* Enrolment */
  .reason-grid{grid-template-columns:1fr}
  .reason{min-height:170px}
  .coverage-item{grid-template-columns:30px 1fr}
  .coverage-item span:last-child{display:none}
  .instructor-strip{grid-template-columns:1fr;text-align:left}
  .mini-orbit{width:100px}
  .fit-box{padding:21px}
  .price-card,.outputs-panel{padding:21px}
  .price{font-size:clamp(52px,17vw,72px)}

  /* Assessment */
  .assessment-page{padding-top:84px;padding-bottom:38px}
  .assessment-shell,.assessment-disclaimer{padding-inline:18px}
  .assessment-intro{grid-template-columns:1fr}
  .assessment-facts{display:none}
  .acard{padding:20px 16px}
  .card-head{gap:10px;margin-bottom:18px}
  .card-meta{font-size:8.5px}
  .qtext{font-size:clamp(26px,8vw,36px);max-width:none}
  .assessment-actions{gap:10px;align-items:center}
  .assessment-actions .btn{width:auto;min-width:132px}
  .quiz-hint{display:none}
  .brow{grid-template-columns:78px 1fr 32px;gap:8px}
  .res-sec,.rec{padding:18px}

  /* Contact */
  .contact-form{padding:20px}
  .contact-form-head{display:grid;grid-template-columns:1fr;gap:6px}
  .contact-form-head span{text-align:left}
  .contact-line{grid-template-columns:72px 1fr}
  .routing{grid-template-columns:1fr}
  .route{min-height:130px;padding:20px}
}

@media (max-width:360px){
  .panel-inner,.page-wrap,.footer-inner{padding-inline:16px}
  .nav{left:7px;right:7px}.nav-shell{padding-left:12px}
  .display{font-size:clamp(40px,12.8vw,50px)}
  .h1{font-size:clamp(34px,10vw,43px)}
  .metric{padding-inline:11px}.metric>span{font-size:7.8px}
  .profile-evidence span{font-size:6.7px}
  .operate-meta span{font-size:6.8px}
}

/* Data-saver/reduced-motion mode keeps the poster as the uniform background. */
html.data-saver .site-bg video{display:none}

/* Keyboard focus remains visible on touch-keyboard/tablet workflows. */
:focus-visible{outline:2px solid rgba(255,255,255,.86);outline-offset:3px}
.btn:focus-visible,.menu-btn:focus-visible,.nav-links a:focus-visible{outline-color:var(--red)}