/* =========================================================
   D-40 MOBILE EXPERIENCE
   Distinct phone/tablet layout while preserving desktop design.
========================================================= */
:root{--mobile-header:76px;--safe-bottom:env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{min-width:0;overflow-x:hidden}
img,video,canvas,svg{max-width:100%;height:auto}
input,select,textarea,button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}

/* Phone-only floating action bar, inserted by mobile.js */
.d40-mobile-dock{display:none}
.d40-mobile-backdrop{display:none}

@media (max-width: 991px){
  :root{--mobile-header:76px}
  body.is-menu-open{overflow:hidden;touch-action:none}
  header{height:var(--mobile-header);position:fixed!important;top:0;left:0;right:0;z-index:5000!important;background:rgba(2,5,11,.92)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
  .navbar{height:100%;padding:10px 18px!important;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .logo{position:relative;z-index:5002}.logo img{height:54px!important;width:auto!important}
  .navbar>.btn-primary{display:none!important}
  .menu-btn{display:grid!important;place-items:center;width:48px;height:48px;border:1px solid rgba(91,203,255,.34);border-radius:15px;background:linear-gradient(145deg,rgba(16,33,55,.96),rgba(4,11,21,.96));box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.08);font-size:20px;cursor:pointer;position:relative;z-index:5002}
  .nav-links{position:fixed!important;inset:0 0 0 auto!important;top:0!important;right:-100%!important;width:min(88vw,390px)!important;height:100dvh!important;padding:110px 24px calc(110px + var(--safe-bottom))!important;margin:0!important;background:linear-gradient(165deg,rgba(5,10,19,.99),rgba(8,20,38,.99))!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:8px!important;overflow-y:auto!important;box-shadow:-30px 0 80px rgba(0,0,0,.65);border-left:1px solid rgba(87,203,255,.25);transition:right .38s cubic-bezier(.2,.8,.2,1)!important;z-index:5001!important}
  .nav-links:before{content:'D-40 CONTROL MENU';display:block;color:#67e9ff;font:700 12px/1 Inter,sans-serif;letter-spacing:.24em;margin:0 8px 18px}
  .nav-links.active{right:0!important}
  .nav-links li{width:100%;list-style:none}
  .nav-links a{display:flex!important;align-items:center;min-height:56px;padding:14px 16px!important;border-radius:14px;font-size:18px!important;font-weight:700!important;letter-spacing:.02em;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05)}
  .nav-links a.active,.nav-links a:hover{background:linear-gradient(90deg,rgba(0,132,255,.22),rgba(99,74,255,.13));border-color:rgba(64,204,255,.35);transform:translateX(4px)}
  .nav-links a:after{display:none!important}
  .d40-mobile-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.3s;z-index:4999}
  body.is-menu-open .d40-mobile-backdrop{opacity:1;visibility:visible}
  body:not(.guide-mobile) main,body:not(.guide-mobile) .hero:first-of-type{scroll-margin-top:var(--mobile-header)}
  .hero{min-height:100svh!important;height:auto!important;padding:calc(var(--mobile-header) + 72px) 22px 120px!important;display:flex;align-items:center}
  .hero-content{width:100%;max-width:720px;margin:0 auto;text-align:center!important}
  .hero h1{font-size:clamp(3.35rem,14.5vw,6.8rem)!important;line-height:.82!important;overflow-wrap:anywhere}
  .hero h1 span:hover{transform:none!important}
  .hero p{font-size:clamp(1rem,4.3vw,1.15rem)!important;line-height:1.65!important;white-space:normal!important;margin-inline:auto;max-width:42rem}
  .hero-buttons{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%;max-width:420px;margin:26px auto 0!important}
  .hero-buttons a,.hero .btn-primary,.hero .btn-secondary{width:100%!important;min-height:54px;display:grid;place-items:center}
  .hero:before{top:24%!important;left:-40%!important;font-size:28vw!important;opacity:.65}
  .d40-marquee{margin-top:var(--mobile-header);padding:10px 0!important}.d40-marquee-track{font-size:11px!important;gap:24px!important;animation-duration:20s!important}.d40-marquee-track span:before{margin-right:24px!important}
  section{padding:68px 20px!important}
  section h2{font-size:clamp(2.5rem,11vw,4.2rem)!important;line-height:.95!important}
  .service-grid,.event-grid,.package-grid,.review-grid,.gallery-grid,.card-grid,.form-grid{grid-template-columns:1fr!important;gap:16px!important}
  .card,.event-card,.package-card,.review-card,.gallery-item{transform:none!important;border-radius:20px!important;padding:25px!important}
  .card:hover,.event-card:hover,.package-card:hover,.review-card:hover,.gallery-item:hover{transform:translateY(-4px)!important}
  .stats{grid-template-columns:1fr 1fr!important;gap:1px!important;padding:0!important}.stat{padding:28px 12px!important;min-width:0}.stat h2{font-size:2.25rem!important}.stat p{font-size:.8rem;line-height:1.35}
  .custom-sections{width:auto!important;margin:48px 16px!important}.custom-section-inner{padding:32px 22px!important;border-radius:22px!important}.custom-section.type-split .custom-section-inner{grid-template-columns:1fr!important;gap:20px!important}.custom-section h2{font-size:clamp(2.7rem,13vw,4.5rem)!important}
  footer{padding:60px 22px calc(110px + var(--safe-bottom))!important;text-align:center}.footer-links{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important;width:100%;max-width:360px;margin-inline:auto}.footer-links a{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px}.socials{justify-content:center}
  .d40-mobile-dock{position:fixed;display:grid;grid-template-columns:1fr 1.45fr;gap:8px;left:10px;right:10px;bottom:calc(10px + var(--safe-bottom));z-index:4500;padding:8px;border:1px solid rgba(89,205,255,.27);border-radius:20px;background:rgba(3,8,16,.9);box-shadow:0 18px 55px rgba(0,0,0,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .d40-mobile-dock a{min-width:0;min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;text-decoration:none;color:#fff;font:700 13px Inter,sans-serif;letter-spacing:.02em;border:1px solid rgba(255,255,255,.08);background:#101a29}
  .d40-mobile-dock a:last-child{background:linear-gradient(100deg,#0878ff,#7447ee);border-color:transparent;box-shadow:0 8px 28px rgba(0,119,255,.28)}
  .scroll-top{bottom:calc(88px + var(--safe-bottom))!important;right:14px!important}
  .d40-announcement{padding:10px 42px 10px 12px!important;font-size:11px!important;line-height:1.45}.d40-announcement a{display:inline-block;margin-left:4px!important}
  table{display:block!important;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}

@media (max-width: 600px){
  .stats{grid-template-columns:1fr 1fr!important}.stat h2{font-size:1.9rem!important}
  .footer-links{grid-template-columns:1fr}
  .gallery-grid img{height:auto!important;aspect-ratio:4/3;object-fit:cover}
  .package-card{padding:28px 20px!important}.package-card.featured{transform:none!important}
  .contact-container,.about-grid,.contact-grid{grid-template-columns:1fr!important}
  input,select,textarea{font-size:16px!important;max-width:100%}
}

/* Client Guide becomes a mobile app-like experience */
@media (max-width: 900px){
  .guide-shell{display:block!important}.guide-nav{position:sticky!important;top:0!important;width:100%!important;height:auto!important;z-index:4000!important;padding:10px 14px!important;display:flex!important;align-items:center!important;gap:12px!important;overflow-x:auto!important;background:rgba(4,10,18,.96)!important;backdrop-filter:blur(18px)}
  .guide-nav .guide-logo{width:82px!important;min-width:82px}.guide-nav>small{display:none!important}.guide-nav .links{display:flex!important;gap:8px!important;white-space:nowrap!important}.guide-nav .links a{min-width:max-content!important;padding:10px 13px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:12px!important}.guide-main{margin-left:0!important;width:100%!important}.hero-guide{min-height:calc(100svh - 75px)!important;padding:68px 20px!important}.chapter{padding:64px 20px!important}.chapter-head{grid-template-columns:1fr!important;gap:12px!important}.chapter-number{font-size:3.2rem!important}.timeline{overflow-x:auto!important}.timeline-row{min-width:680px!important}.energy{overflow-x:auto!important}.energy svg{min-width:720px!important}.save-bar{position:sticky!important;bottom:calc(76px + var(--safe-bottom));z-index:3000;padding:12px!important;border-radius:18px;background:rgba(4,10,18,.93);backdrop-filter:blur(16px)}
}

/* Admin + customer portals */
@media (max-width: 800px){
  body:has(.top){padding-bottom:calc(18px + var(--safe-bottom))}
  .top{position:sticky!important;top:0;z-index:2000;padding:14px!important;gap:12px!important;background:rgba(9,17,29,.96)!important;backdrop-filter:blur(18px)}
  .top h1{font-size:clamp(1.35rem,6vw,2rem)!important;line-height:1.05}.top>div:last-child{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;width:100%}.top .btn,.top button{margin:0!important;text-align:center;min-height:44px;display:grid;place-items:center}
  .wrap{width:auto!important;margin:14px!important;display:block!important}.wrap>.card{margin-bottom:14px}
  .tabs{position:sticky;top:92px;z-index:1500;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;padding:8px 4px 12px;margin:0 -4px 14px!important;background:#070b12;scroll-snap-type:x proximity}.tab{min-width:max-content;scroll-snap-align:start;padding:11px 14px!important}
  .panel{padding:16px!important;border-radius:14px!important}.stats{grid-template-columns:1fr 1fr!important}.grid{grid-template-columns:1fr!important}
  .row{align-items:stretch!important}.row>*{max-width:100%}.row input,.row select,.row textarea{flex:1 1 100%!important;width:100%!important}
  .editor{min-height:58vh!important;font-size:13px!important}
  .item{padding:12px!important;overflow:hidden}.item .row button{width:100%}
  table{font-size:13px}.card{padding:16px!important}
}

@media (max-width: 430px){
  .top>div:last-child{grid-template-columns:1fr!important}.stats{grid-template-columns:1fr!important}
  .d40-mobile-dock{grid-template-columns:.85fr 1.4fr}.d40-mobile-dock a{font-size:12px}
}

@media (prefers-reduced-motion:reduce){.nav-links,.d40-mobile-backdrop{transition:none!important}}