/* ===== DR. TANJI — mobile & touch layer (loaded last on every page) ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
footer a{color:var(--muted);text-decoration:none;transition:color .3s}
footer a:hover{color:var(--accent)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- menu button + full-screen menu ---------- */
.menu-btn{display:none;position:relative;width:46px;height:46px;margin-right:-8px;border:0;background:transparent;color:var(--ink);cursor:pointer;z-index:102}
.menu-btn i{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .45s cubic-bezier(.16,1,.3,1),top .45s cubic-bezier(.16,1,.3,1),opacity .3s}
.menu-btn i:nth-child(1){top:17px}
.menu-btn i:nth-child(2){top:27px;left:19px}
.menu-open .menu-btn i:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .menu-btn i:nth-child(2){top:22px;left:11px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;justify-content:center;padding:110px 8vw calc(40px + env(safe-area-inset-bottom));background:rgba(5,5,6,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .45s cubic-bezier(.16,1,.3,1),visibility 0s linear .45s;overflow-y:auto;overscroll-behavior:contain}
.menu-open .mnav{opacity:1;visibility:visible;transition:opacity .45s cubic-bezier(.16,1,.3,1),visibility 0s}
.mnav a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,7.5vw,2.4rem);line-height:1.1;color:var(--ink);text-decoration:none;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1),color .3s}
.mnav a small{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent);min-width:22px}
.mnav a.active{color:var(--accent)}
.mnav a.active em,.mnav a:hover{color:var(--accent)}
.menu-open .mnav a{opacity:1;transform:none}
.menu-open .mnav a:nth-child(2){transition-delay:.04s}.menu-open .mnav a:nth-child(3){transition-delay:.08s}
.menu-open .mnav a:nth-child(4){transition-delay:.12s}.menu-open .mnav a:nth-child(5){transition-delay:.16s}.menu-open .mnav a:nth-child(6){transition-delay:.2s}
.mnav .mcta{margin-top:30px;align-self:flex-start;border:1px solid var(--accent);border-radius:100px;padding:16px 30px;font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.mnav .mfine{margin-top:28px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);line-height:1.9}
body.menu-open{overflow:hidden}

@media(max-width:900px){
  nav .links{display:none!important}
  .menu-btn{display:block}
  /* solid header on phones: content that scrolls up disappears cleanly behind it (no logo-over-text overlap) */
  nav{padding:calc(10px + env(safe-area-inset-top)) 5vw 10px;background:rgba(5,5,6,.94)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(237,235,230,.06),0 14px 24px -10px rgba(5,5,6,.9)}
  nav .brand{gap:5px}
  nav .brand-ico{height:38px}
  nav .brand-word{height:8px}
  .menu-open nav{background:transparent!important}
}
@media(min-width:901px){.mnav{display:none}}

/* ---------- touch / small screens: native scrolling, lighter effects ---------- */
@media(max-width:900px),(hover:none),(pointer:coarse){
  body{cursor:auto}
  .cur,.curR,.dots,.deck-dots{display:none!important}
  .grain{display:none}                       /* full-screen blend layer is costly on phones */
  [data-par]{transform:none!important;inset:0!important}
  .shot:hover img{transform:none}
  input,select,textarea,button{cursor:auto!important}
}

/* ---------- layout on phones & small tablets ---------- */
@media(max-width:900px){
  /* page-flow fallback (only if the slide deck is not running, e.g. JavaScript disabled) */
  body:not(.deck-ready) .phero{min-height:88vh;min-height:88svh;padding:120px 6vw 72px}
  body:not(.deck-ready) .epic{height:auto!important;min-height:86vh;min-height:86svh;padding:110px 6vw 80px!important}
  body:not(.deck-ready) #hero{height:100vh;height:100svh;min-height:560px}
  body:not(.deck-ready) #final{height:auto!important;min-height:100vh;min-height:100svh;padding:110px 6vw 80px}
  body:not(.deck-ready) .block{padding:88px 6vw}
  body:not(.deck-ready) :is(.system,.findlimit,.work){padding:96px 6vw!important}
  body:not(.deck-ready) .split{padding:88px 6vw!important}
  body:not(.deck-ready) .pull{padding:110px 6vw!important}
  body:not(.deck-ready) .who{padding:80px 0!important}
  body:not(.deck-ready) .stats{padding:56px 6vw 72px!important}
  /* slides on phones: clear the fixed header, keep side gutters, respect the iPhone home bar */
  /* !important: some sections carry an inline padding-top:0 that would slide content under the header */
  .deck-ready .slide{padding-top:92px!important;padding-bottom:calc(28px + env(safe-area-inset-bottom))!important}
  /* never let a slide's children shrink/overflow into each other; stack image+text sections vertically */
  .deck-ready .slide>*{flex-shrink:0}
  .deck-ready :is(.split,.two).slide{display:flex!important;flex-direction:column;justify-content:center;gap:36px}
  .deck-ready :is(.split,.two).slide.scrollable{justify-content:flex-start}
  .deck-ready .slide .shot{flex-shrink:0;min-height:0;width:100%;max-width:520px;margin-left:auto;margin-right:auto}
  .deck-ready .slide .personal-grid>*,.deck-ready .slide .cform-grid>*{min-width:0}
  .deck-ready .slide.scrollable{padding-top:100px!important;padding-bottom:calc(48px + env(safe-area-inset-bottom))!important}
  .deck-ready #hero.slide{padding:0!important}
  /* breathing room between eyebrow labels / big numbers and the headline below */
  .phero .ey,.epic .sm{margin-bottom:24px}
  .phero h1{line-height:1.14}
  .mnum{margin-bottom:10px}
  .deck-ready :is(.system,.findlimit,.work,.pull,.block,.phero,.split,.stats,#final).slide{padding-left:6vw;padding-right:6vw}
  .deck-ready .slide :is(.personal-grid,.cform-grid){padding-left:0!important;padding-right:0!important}
  .epic .c{padding:0!important}
  .hero-c{padding:80px 7vw 0}
  .hero-eye{letter-spacing:.34em;font-size:11px;margin-bottom:22px}
  .hint{bottom:calc(20px + env(safe-area-inset-bottom))}
  .stats .stat{text-align:center}
  #contactform .cform-copy{order:-1}
  /* readable type */
  .txt{font-size:1.06rem;line-height:1.75}
  .ey{letter-spacing:.3em;margin-bottom:20px}
  .epic .sm,#final .sm,.band .sm{letter-spacing:.3em;font-size:11px;margin-bottom:22px}
  .shot{max-height:none}
  /* system chain: compact pills that wrap cleanly */
  .chain{gap:8px 4px}
  .node{padding:11px 15px;font-size:11px;letter-spacing:.12em}
  .arrow{font-size:13px}
  /* buttons: comfortable tap targets */
  .btn,.magnetic{padding:18px 32px;letter-spacing:.24em;font-size:12px}
  .btn:hover,.magnetic:hover{letter-spacing:.24em}
  /* quiz */
  .fl-stage{min-height:0}
  .fl-opt{padding:16px 22px;font-size:1rem;text-align:center}
  /* cards/lists */
  .step{padding:30px 24px!important}
  .faq{padding:22px 22px}
  .mantra{margin-top:44px;gap:6px 16px}
  /* marquees */
  .marq span{padding:0 22px}
  .marq span::after{margin-left:44px}
  /* footer */
  footer{padding:56px 6vw calc(44px + env(safe-area-inset-bottom))}
  footer .fnav,footer>div{gap:4px 8px!important}
  footer .fnav a,footer>div>a{display:inline-block;padding:10px 8px}
}

/* about page: role cards open as a bottom sheet on phones (never clipped at screen edges) */
@media(max-width:640px){
  .jcard{position:fixed!important;left:16px!important;right:16px;top:auto!important;bottom:calc(16px + env(safe-area-inset-bottom));width:auto!important;max-width:none!important;transform:translateY(12px)!important;z-index:300!important;padding:18px 20px!important}
  .jrole.open .jcard{transform:none!important}
  .epic:has(.jrole.open){z-index:60}
  .jrole:hover:not(.open) .jcard{opacity:0!important}
  .jcard::after{display:none}
  .journey .ja{display:none}
  .journey{gap:10px}
}

@media(max-width:380px){
  .node{padding:10px 12px;font-size:10px}
  .phero h1{font-size:2rem}
}
@media(prefers-reduced-motion:reduce){.mnav,.mnav a,.menu-btn i{transition:none!important}}