/* TPV MOBILE HARDENING — 14 SEP 2026
   Loaded after style.css so mobile rules are deterministic even with the site's layered desktop styling.
*/
html{width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;}
body{width:100%;max-width:100%;overflow-x:hidden;}
img,iframe{max-width:100%;}

@media (max-width:1100px){
  /* Header */
  .nav{height:68px!important;padding:7px 18px!important;gap:10px!important;position:sticky!important;top:0!important;}
  .brand{min-width:0!important;flex:1 1 auto!important;gap:7px!important;}
  .brand img{width:42px!important;height:50px!important;object-fit:contain!important;}
  .brand span{font-size:14px!important;line-height:.82!important;}
  .brand small{font-size:6px!important;letter-spacing:1.5px!important;margin-top:5px!important;}
  .nav nav,.nav-cta{display:none!important;}
  .menu{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;margin-left:auto!important;padding:0!important;border:0!important;background:transparent!important;color:#10233f!important;font-size:25px!important;line-height:1!important;}
  .nav nav.open{display:flex!important;position:absolute!important;top:68px!important;left:0!important;right:0!important;padding:12px 24px 18px!important;background:rgba(255,255,255,.98)!important;backdrop-filter:blur(16px)!important;flex-direction:column!important;gap:0!important;box-shadow:0 18px 35px rgba(16,35,63,.14)!important;}
  .nav nav.open a{display:block!important;width:100%!important;padding:12px 4px!important;font-size:14px!important;}

  /* Hero: always stack */
  .hero{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;min-height:auto!important;padding:48px 22px 0!important;}
  .hero-content{order:1!important;width:100%!important;max-width:none!important;}
  .hero h1{font-size:clamp(42px,9vw,62px)!important;line-height:.94!important;letter-spacing:-2.4px!important;margin-bottom:20px!important;}
  .hero p{font-size:16px!important;line-height:1.55!important;max-width:none!important;}
  .hero-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:22px!important;}
  .hero-actions .btn{padding:12px 17px!important;font-size:12px!important;}
  .hero-image{order:2!important;width:100%!important;max-width:720px!important;height:430px!important;min-height:430px!important;margin:20px auto 0!important;overflow:visible!important;}
  .hero-image .hero-cutout{width:112%!important;height:112%!important;max-width:none!important;right:-6%!important;bottom:-2%!important;object-fit:contain!important;object-position:center bottom!important;}
  .hero-tag{right:3%!important;bottom:6%!important;padding:12px 15px!important;}
  .hero-tag b{font-size:16px!important;}
  .hero-tag span{font-size:8px!important;}
  .hero-geometry{inset:0!important;overflow:visible!important;}
  .hero-stats{order:3!important;grid-column:auto!important;width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;margin:20px 0 0!important;padding:18px 0 24px!important;}
  .hero-stats div{padding:0 10px!important;margin-bottom:12px!important;}
  .hero-stats b{font-size:26px!important;}
  .hero-stats span{font-size:10px!important;line-height:1.3!important;display:block!important;}

  /* Common section spacing */
  .section{padding:68px 22px!important;}
  .label{font-size:9px!important;letter-spacing:1.7px!important;margin-bottom:22px!important;}
  .intro,.diff-head,.program-head,.method-head,.school-head,.fac-head,.team-head,.ig-head,
  .corporate-head,.corporate-hero-row{grid-template-columns:1fr!important;gap:20px!important;align-items:start!important;}
  .intro h2,.diff-head h2,.program-head h2,.method-head h2,.school-head h2,.team-head h2,.ig-head h2{font-size:clamp(36px,8vw,54px)!important;line-height:.98!important;letter-spacing:-1.8px!important;}
  .intro>p,.diff-head>p,.program-head>p,.method-head>p,.school-head>p,.fac-head>p,.ig-note{font-size:14px!important;line-height:1.65!important;}

  /* About / difference */
  .about-body,.vision,.school-grid,.implementation,.tna,.team-cards{grid-template-columns:1fr!important;}
  .about-body{gap:30px!important;margin-top:35px!important;}
  .story p{font-size:15px!important;}
  .audience-grid{grid-template-columns:1fr 1fr!important;}
  .comparison{grid-template-columns:1fr!important;gap:12px!important;margin:35px 0!important;}
  .versus{padding:3px!important;}
  .values{grid-template-columns:1fr 1fr!important;}

  /* Programs / corporate */
  .program-cards,.program-banner,.employee-learning-grid{grid-template-columns:1fr!important;}
  .program-cards{gap:14px!important;margin-top:32px!important;}
  .p-card{min-height:0!important;padding:24px!important;}
  .p-card h3{font-size:29px!important;}
  .program-banner{padding:15px!important;}
  .corporate-feature-photo{height:360px!important;}

  /* VER / school / residential */
  .ver{grid-template-columns:1fr!important;}
  .ver-visual{padding:30px 22px 0!important;}
  .ver-copy{padding:48px 22px!important;}
  .ver-copy h2{font-size:64px!important;}
  .ver-photo-grid,.school-photos,.day-grid,.fac-grid,.ig-grid{grid-template-columns:1fr 1fr!important;}
  .school-grid>img{height:380px!important;}

  /* Method */
  .learning-cycle{transform:none!important;display:grid!important;grid-template-columns:1fr!important;gap:12px!important;height:auto!important;min-height:0!important;margin:30px 0!important;}
  .learning-cycle:before,.cycle-center{display:none!important;}
  .learning-cycle article{position:static!important;width:100%!important;min-height:0!important;}
  .impl{grid-template-columns:1fr!important;}
  .method-photo-grid{grid-template-columns:1fr!important;}

  /* TNA / team */
  .tna{padding:68px 22px!important;gap:28px!important;}
  .tna-steps{grid-template-columns:1fr 1fr!important;}
  .team-layout{grid-template-columns:1fr!important;gap:28px!important;}
  .team-hero-photo.team-designed{height:330px!important;}
  .team-hero-photo.team-designed img{width:min(300px,82%)!important;}
  .team-details{grid-template-columns:1fr!important;gap:14px!important;}
  .team-person{padding:24px 20px!important;}

  /* Instagram / contact */
  .ig-head{display:grid!important;}
  .ig-head .btn{justify-self:start!important;}
  .ig-grid{gap:12px!important;}
  .contact{grid-template-columns:1fr!important;padding:68px 22px!important;}
  .contact-orb{display:none!important;}
  .contact-buttons{display:grid!important;grid-template-columns:1fr!important;}
  .contact-buttons .btn{width:100%!important;}

  /* Footer */
  footer{flex-direction:column!important;align-items:flex-start!important;padding:24px 22px!important;gap:12px!important;}
  .footer-brand{min-width:0!important;}
}

@media (max-width:700px){
  .nav{height:64px!important;padding:6px 14px!important;}
  .nav nav.open{top:64px!important;}
  .brand img{width:40px!important;height:48px!important;}
  .menu{width:40px!important;height:40px!important;}
  .hero{padding:40px 18px 0!important;}
  .hero h1{font-size:46px!important;}
  .hero-image{height:390px!important;min-height:390px!important;margin-top:15px!important;}
  .hero-image .hero-cutout{width:120%!important;height:120%!important;right:-10%!important;}
  .section{padding:58px 18px!important;}
  .audience-grid,.values,.ver-photo-grid,.school-photos,.day-grid,.fac-grid,.ig-grid,.tna-steps{grid-template-columns:1fr!important;}
  .photo-story-grid,.mini-gallery,.photo-grid,.method-photo-grid{grid-template-columns:1fr!important;}
  .frame-wide,.frame-portrait,.frame-tall,.mini-gallery .photo-frame,.ver-photo-grid .photo-frame,.school-photos .photo-frame,.method-photo-grid .photo-frame{height:290px!important;}
  .photo-story-grid .frame-wide{height:310px!important;}
  .corporate-feature-photo{height:300px!important;}
  .school-grid>img{height:300px!important;}
  .team-hero-photo.team-designed{height:300px!important;}
  .team-hero-photo.team-designed img{width:min(280px,84%)!important;}
  .hero-stats{grid-template-columns:1fr 1fr!important;}
  .hero-stats div:nth-child(2){border-right:0!important;}
  .hero-stats div:nth-child(4){border-right:0!important;}
}

/* MOBILE READABILITY PASS — 14 SEP 2026
   Increase type sizes substantially for real-phone viewing. Preserve layout and imagery. */
@media (max-width:700px){
  body{font-size:16px!important;line-height:1.65!important;}
  .nav{height:68px!important;padding:7px 16px!important;}
  .brand img{width:43px!important;height:52px!important;}
  .brand span{font-size:15px!important;line-height:.88!important;}
  .brand small{font-size:7px!important;letter-spacing:1.7px!important;}
  .menu{width:44px!important;height:44px!important;font-size:27px!important;}
  .nav nav.open{top:68px!important;padding:10px 20px 18px!important;background:rgba(255,255,255,.99)!important;}
  .nav nav.open a{font-size:16px!important;font-weight:800!important;padding:14px 4px!important;color:#10233f!important;}

  .hero{padding:42px 20px 0!important;}
  .hero .eyebrow{font-size:11px!important;letter-spacing:2px!important;margin-bottom:16px!important;}
  .hero h1{font-size:48px!important;line-height:.98!important;letter-spacing:-2.2px!important;margin-bottom:22px!important;}
  .hero p{font-size:17px!important;line-height:1.6!important;}
  .hero-actions{gap:10px!important;margin-top:24px!important;}
  .hero-actions .btn{font-size:14px!important;padding:13px 18px!important;min-height:46px!important;}
  .hero-image{height:400px!important;min-height:400px!important;margin-top:18px!important;}
  .hero-tag{padding:13px 16px!important;}
  .hero-tag b{font-size:17px!important;}
  .hero-tag span{font-size:9px!important;letter-spacing:1.4px!important;}
  .hero-stats{padding:20px 0 25px!important;margin-top:16px!important;}
  .hero-stats div{padding:0 12px!important;}
  .hero-stats b{font-size:29px!important;}
  .hero-stats span{font-size:12px!important;line-height:1.35!important;}
  .ticker{font-size:13px!important;letter-spacing:2.2px!important;padding:12px!important;}

  .section{padding:64px 20px!important;}
  .label{font-size:10px!important;letter-spacing:1.8px!important;margin-bottom:24px!important;}
  .eyebrow{font-size:10px!important;letter-spacing:1.7px!important;}
  .intro h2,.diff-head h2,.program-head h2,.method-head h2,.school-head h2,.team-head h2,.ig-head h2,
  .fac-head h2{font-size:40px!important;line-height:1.02!important;letter-spacing:-1.7px!important;}
  .intro>p,.diff-head>p,.program-head>p,.method-head>p,.school-head>p,.fac-head>p,.ig-note{font-size:16px!important;line-height:1.65!important;}
  .story p,.about-body p{font-size:16px!important;line-height:1.65!important;}
  .quote{font-size:19px!important;line-height:1.35!important;padding:20px!important;}

  .audience h3{font-size:29px!important;}
  .audience-grid article{padding:22px!important;min-height:155px!important;}
  .audience-grid strong{font-size:21px!important;}
  .audience-grid span{font-size:13px!important;line-height:1.4!important;}

  .vision-copy{padding:64px 20px!important;}
  .vision-copy h2{font-size:42px!important;line-height:1.02!important;}
  .vision-copy p,.mission p{font-size:16px!important;line-height:1.65!important;}
  .mission b{font-size:11px!important;}

  .comparison{margin:38px 0!important;gap:12px!important;}
  .side{padding:26px!important;border-radius:22px!important;}
  .side h3{font-size:25px!important;}
  .side p{font-size:15px!important;line-height:1.45!important;padding:11px 0!important;}
  .versus{font-size:16px!important;}
  .values article{padding:25px!important;min-height:180px!important;}
  .values h3{font-size:22px!important;margin:20px 0 7px!important;}
  .values p{font-size:14px!important;line-height:1.5!important;}
  .values span{font-size:12px!important;}

  .program-cards{gap:16px!important;}
  .p-card{padding:25px!important;min-height:0!important;}
  .p-card>span{font-size:12px!important;letter-spacing:1.7px!important;}
  .p-card h3{font-size:29px!important;line-height:1.05!important;margin:23px 0 12px!important;}
  .p-card p,.p-card li{font-size:15px!important;line-height:1.55!important;}
  .p-card ul{padding-left:20px!important;}
  .program-scope,.p-card button{font-size:14px!important;padding:12px 16px!important;}

  .ver-copy{padding:50px 20px!important;}
  .ver-copy h2{font-size:64px!important;}
  .ver-copy h3{font-size:18px!important;}
  .ver-copy .lead,.ver-copy>p{font-size:16px!important;line-height:1.65!important;}
  .ver-benefits span{font-size:12px!important;padding:9px 12px!important;}
  .ver-copy blockquote{font-size:18px!important;line-height:1.4!important;}

  .school-copy h3{font-size:29px!important;line-height:1.1!important;}
  .school-copy p,.school-features p{font-size:15px!important;line-height:1.55!important;}
  .outcomes span{font-size:14px!important;padding:14px!important;}

  .day>div{padding:25px!important;}
  .day>div>span{font-size:11px!important;letter-spacing:1.6px!important;}
  .day h3{font-size:28px!important;line-height:1.08!important;}
  .day p{font-size:15px!important;line-height:1.55!important;}
  .day h4{font-size:13px!important;}
  .activity-list b{font-size:11px!important;}
  .day .small{font-size:14px!important;}

  .learning-cycle article{padding:24px!important;}
  .learning-cycle article strong{font-size:20px!important;}
  .learning-cycle article p{font-size:15px!important;line-height:1.55!important;}

  .tna{padding:64px 20px!important;}
  .tna-copy h2{font-size:42px!important;line-height:1.02!important;}
  .tna-copy>p{font-size:16px!important;line-height:1.6!important;}
  .tna-steps{gap:12px!important;}
  .tna-steps article{padding:25px!important;min-height:155px!important;}
  .tna-steps h3{font-size:22px!important;}
  .tna-steps p{font-size:14px!important;line-height:1.5!important;}

  .facilitation .fac-head h2{font-size:42px!important;line-height:1.02!important;}
  .facilitation .fac-head p{font-size:16px!important;line-height:1.65!important;}
  .fac{padding:25px!important;}
  .fac h3{font-size:23px!important;}
  .fac p,.fac li{font-size:14px!important;line-height:1.55!important;}

  .team-head h2{font-size:42px!important;}
  .team-head p{font-size:16px!important;line-height:1.6!important;}
  .team-person{padding:25px 20px!important;}
  .team-person>span{font-size:11px!important;letter-spacing:1.6px!important;}
  .team-person h3{font-size:30px!important;}
  .team-person p{font-size:15px!important;line-height:1.6!important;}
  .person-stats b{font-size:20px!important;}
  .person-stats small{font-size:9px!important;}

  .ig-head h2{font-size:40px!important;}
  .ig-note{font-size:15px!important;}
  .ig-head .btn{font-size:14px!important;padding:13px 18px!important;}

  .contact{padding:64px 20px!important;}
  .contact h2{font-size:40px!important;line-height:1.02!important;}
  .contact p{font-size:16px!important;line-height:1.6!important;}
  .contact-buttons .btn{font-size:15px!important;min-height:58px!important;}
  .contact small,.contact .address,.contact .contact-details{font-size:13px!important;line-height:1.55!important;}
  .map-preview{height:240px!important;}

  footer{padding:28px 20px!important;}
  .footer-brand strong{font-size:14px!important;}
  .footer-brand p,footer small{font-size:12px!important;line-height:1.5!important;}
}

/* =========================================================
   TPV V7 — MOBILE-FIRST READABILITY + PERSISTENT NAVIGATION
   14 SEP 2026
   This pass deliberately prioritizes legibility over fitting more
   content on one screen. Desktop styling is untouched.
   ========================================================= */
@media (max-width: 900px){
  html{scroll-padding-top:76px!important;overflow-x:hidden!important;}
  body{overflow-x:hidden!important;padding-top:70px!important;}

  /* Keep the navigation permanently visible while the user scrolls. */
  header.nav{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:70px!important;
    z-index:1000!important;
    padding:7px 18px!important;
    background:rgba(255,255,255,.98)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    box-shadow:0 6px 24px rgba(16,35,63,.12)!important;
  }
  .progress{z-index:1100!important;top:0!important;}
  .menu{
    display:grid!important;
    place-items:center!important;
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    margin-left:auto!important;
    padding:0!important;
    border:1px solid #d8dee8!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#10233f!important;
    font-size:25px!important;
    line-height:1!important;
    box-shadow:0 4px 12px rgba(16,35,63,.08)!important;
  }
  .nav nav.open{
    position:absolute!important;
    top:70px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    padding:8px 22px 20px!important;
    background:rgba(255,255,255,.99)!important;
    border-top:1px solid #edf0f4!important;
    box-shadow:0 20px 40px rgba(16,35,63,.16)!important;
    max-height:calc(100vh - 70px)!important;
    overflow:auto!important;
  }
  .nav nav.open a{
    display:block!important;
    width:100%!important;
    padding:14px 3px!important;
    font-size:17px!important;
    line-height:1.2!important;
    font-weight:800!important;
    color:#10233f!important;
  }

  /* More breathing room and readable text throughout the site. */
  .section,
  .tna,
  .contact,
  .residential{padding-left:20px!important;padding-right:20px!important;}

  .section p:not(.eyebrow),
  .section li,
  .story p,
  .about-body p,
  .diff-head>p,
  .program-head>p,
  .method-head>p,
  .school-head>p,
  .fac-head>p,
  .team-head>p,
  .ig-note,
  .p-card p,
  .p-card li,
  .day p,
  .day .small,
  .school-copy p,
  .school-features p,
  .ver-copy .lead,
  .ver-copy>p,
  .tna-copy>p,
  .fac p,
  .fac li,
  .team-person p,
  .contact-content>p:not(.eyebrow){
    font-size:17px!important;
    line-height:1.65!important;
  }

  .section h2,
  .intro h2,
  .diff-head h2,
  .program-head h2,
  .method-head h2,
  .school-head h2,
  .fac-head h2,
  .team-head h2,
  .ig-head h2{
    font-size:clamp(40px,10vw,52px)!important;
    line-height:1.02!important;
    letter-spacing:-1.8px!important;
  }

  .label{font-size:11px!important;line-height:1.3!important;letter-spacing:2px!important;}
  .eyebrow{font-size:11px!important;line-height:1.4!important;}

  /* Hero */
  .hero{padding:42px 20px 0!important;}
  .hero h1{font-size:clamp(44px,11vw,58px)!important;line-height:.98!important;letter-spacing:-2.3px!important;}
  .hero p{font-size:18px!important;line-height:1.6!important;}
  .hero-actions .btn{font-size:15px!important;min-height:48px!important;padding:13px 18px!important;}
  .hero-stats b{font-size:30px!important;}
  .hero-stats span{font-size:13px!important;line-height:1.4!important;}

  /* Cards and lists */
  .side h3{font-size:27px!important;}
  .side p{font-size:16px!important;line-height:1.5!important;padding:12px 0!important;}
  .values h3{font-size:24px!important;}
  .values p{font-size:15px!important;line-height:1.5!important;}
  .audience-grid strong{font-size:23px!important;}
  .audience-grid span{font-size:15px!important;line-height:1.45!important;}
  .p-card h3{font-size:31px!important;}
  .p-card>span{font-size:12px!important;}
  .program-scope{font-size:15px!important;min-height:44px!important;}
  .day h3{font-size:30px!important;}
  .day h4{font-size:14px!important;}
  .activity-list b{font-size:12px!important;}
  .tna-steps h3{font-size:24px!important;}
  .tna-steps p{font-size:15px!important;line-height:1.5!important;}
  .fac h3{font-size:25px!important;}
  .team-person h3{font-size:32px!important;}
  .person-stats b{font-size:22px!important;}
  .person-stats small{font-size:10px!important;}
  .ig-card span{font-size:11px!important;letter-spacing:1px!important;}

  /* Contact / footer */
  .contact h2{font-size:clamp(39px,10vw,52px)!important;}
  .contact-interest{font-size:16px!important;line-height:1.5!important;padding:16px 18px!important;}
  .contact-buttons .btn{font-size:16px!important;min-height:60px!important;}
  .contact-info{font-size:15px!important;line-height:1.55!important;}
  .contact-info span,.contact-info a{font-size:15px!important;line-height:1.55!important;}
  .map-link{font-size:15px!important;min-height:52px!important;}
  footer{font-size:14px!important;line-height:1.5!important;}
  .footer-brand strong{font-size:15px!important;}
}

@media (max-width: 480px){
  .section,.tna,.contact,.residential{padding-left:18px!important;padding-right:18px!important;}
  .hero{padding-left:18px!important;padding-right:18px!important;}
  .hero h1{font-size:45px!important;}
  .hero p{font-size:17px!important;}
  .section h2,.intro h2,.diff-head h2,.program-head h2,.method-head h2,.school-head h2,.fac-head h2,.team-head h2,.ig-head h2{font-size:39px!important;}
  .section p:not(.eyebrow),.story p,.about-body p,.diff-head>p,.program-head>p,.method-head>p,.school-head>p,.fac-head>p,.team-head>p,.ig-note,.p-card p,.p-card li,.day p,.school-copy p,.school-features p,.ver-copy .lead,.ver-copy>p,.tna-copy>p,.fac p,.fac li,.team-person p,.contact-content>p:not(.eyebrow){font-size:16px!important;line-height:1.65!important;}
  .audience-grid,.values,.tna-steps{grid-template-columns:1fr!important;}
  .audience-grid article{min-height:135px!important;}
  .values article{min-height:165px!important;}
  .tna-steps article{min-height:145px!important;}
}