/* Final phone and tablet polish. Loaded last so touch behaviour stays predictable. */
html,body{max-width:100%;overflow-x:clip}
img,video,svg{max-width:100%}

@media(max-width:1024px){
  nav.top{padding:.9rem clamp(1rem,3vw,1.6rem)}
  #mtog{min-width:76px;min-height:48px;justify-content:flex-end;padding:.65rem 0;touch-action:manipulation}
  .nav-logo{height:48px;min-width:0}

  /* Preserve the editorial overlap at tablet size without losing the headline. */
  #hero .hero-bg{left:43%;right:6%;top:12%;bottom:10%}
  .hero-frame{padding-top:7.25rem;justify-content:center}
  .hh{font-size:clamp(4.5rem,11.5vw,7rem);margin-bottom:clamp(8rem,15vh,12rem)}
  .hero-low{width:min(37rem,72%)}

  .p-hero{padding-top:8.75rem}
  .p-hero-split-media,.p-hero-photo .p-hero-img{width:min(100%,520px)}
  .ft-grid{column-gap:3rem;row-gap:3rem}
}

@media(max-width:760px){
  :root{--mobile-pad:clamp(1.25rem,5vw,1.65rem)}
  body{font-size:16px;-webkit-text-size-adjust:100%}
  .container{padding-left:var(--mobile-pad);padding-right:var(--mobile-pad)}
  section{scroll-margin-top:72px}
  .btn{min-height:44px;touch-action:manipulation}
  .link-u{display:inline-flex;align-items:center;min-height:44px}

  nav.top{min-height:72px;padding:.7rem var(--mobile-pad)}
  .nav-logo{height:42px;min-width:0}
  #mtog{min-height:48px;min-width:82px;font-size:.58rem;gap:.65rem}
  #mtog .hamb{width:24px}
  .mov-contact a{display:inline-flex;align-items:center;min-height:44px}

  /* Mobile hero: a cinematic photograph, a title crossing its edge, and a quiet editorial footer. */
  #hero{height:clamp(620px,76svh,680px);min-height:0;background:#060606}
  #hero .hero-bg{left:0;right:0;top:72px;bottom:38%;height:auto;overflow:hidden}
  #hero .hero-bg-img{top:-10%;height:120%;object-position:55% 34%;filter:saturate(.55) sepia(.06) contrast(1.12) brightness(.68)}
  #hero .hero-scrim::before{background:linear-gradient(90deg,rgba(6,6,6,.16),transparent 48%,rgba(6,6,6,.12))}
  #hero .hero-scrim::after{background:linear-gradient(to top,rgba(6,6,6,.92) 0%,rgba(6,6,6,.08) 38%,rgba(6,6,6,.2) 100%)}
  .hero-frame{min-height:0;height:100%;padding:72px var(--mobile-pad) 1.15rem;justify-content:initial}
  .hero-frame::before{content:"PERSONAL SKIN RITUALS";top:5.85rem;left:var(--mobile-pad);right:auto;transform:none;max-width:62%;font-size:.38rem;letter-spacing:.22em;white-space:nowrap;overflow:visible}
  .hero-frame::after{content:"01  /  PAZARDZHIK";display:block;position:absolute;top:5.85rem;right:var(--mobile-pad);bottom:auto;writing-mode:horizontal-tb;font-family:var(--ff-b);font-size:.38rem;letter-spacing:.18em;color:rgba(201,169,110,.78)}
  .hero-bottom{display:block}
  .hh{position:absolute;z-index:4;top:36.5svh;left:var(--mobile-pad);right:var(--mobile-pad);font-size:clamp(3.25rem,16.7vw,4.85rem);line-height:.71;margin:0;max-width:none;padding:0;letter-spacing:-.065em;text-shadow:0 8px 32px rgba(0,0,0,.62)}
  .hh-row-1,.hh-row-2,.hh-row-3{margin-left:0;padding-left:0}
  .hh-row-2{transform:translateX(14%)}
  .hh-row-3{transform:translateX(3%)}
  .hero-low{position:absolute;z-index:4;left:var(--mobile-pad);right:var(--mobile-pad);top:57svh;bottom:auto;width:auto;padding:0;background:transparent!important;display:block}
  .hero-low::before{content:"DIAGNOSE  ·  TREAT  ·  GLOW";display:block;margin-bottom:.65rem;font-size:.38rem;letter-spacing:.25em;color:var(--brass)}
  .hs{font-size:.76rem;line-height:1.58;max-width:42ch;margin:0 0 1rem;color:rgba(244,237,226,.68)}
  .h-actions{width:100%}.h-actions .btn{width:100%;min-height:50px;justify-content:center}

  /* Comfortable type and section rhythm, without turning everything into cards. */
  #stats{padding-block:5rem}
  #about,#spotlight,#rituals,#ba,.skin-journal{padding-block:6.5rem}
  .manifesto-grid,.about-grid{gap:2.75rem}
  .manifesto-line,.about-h,.sec-h{overflow-wrap:normal;word-break:normal}
  .ritual-row{margin-bottom:7rem}
  .ritual-copy p,.journal-notes p,.about-p{font-size:.84rem;line-height:1.75}

  /* Full-bleed ritual tabs: balanced image, copy and controls on short phones. */
  .treatment-tabs{min-height:880px}
  .tabs-shell{min-height:880px;padding:5.25rem var(--mobile-pad) 1.5rem;gap:1rem;grid-template-rows:auto minmax(300px,1fr) auto}
  .tabs-intro h2{font-size:clamp(3.25rem,14vw,4.8rem);line-height:.77;max-width:9ch;margin-top:1rem}
  .tabs-copy-stack{min-height:310px;align-self:end}
  .tab-copy{justify-content:flex-end}
  .tab-copy>span{margin-bottom:.8rem}
  .tab-copy h3{font-size:clamp(2.6rem,11.5vw,4rem);line-height:.82;max-width:9ch;margin-bottom:1rem;overflow-wrap:normal;word-break:normal;hyphens:none}
  .tab-copy p{font-size:.79rem;line-height:1.65;max-width:36ch}
  .tab-copy>div{margin-top:1.25rem;gap:1rem;flex-wrap:wrap}
  .tab-copy button{min-height:48px;padding:.85rem 1.25rem;touch-action:manipulation}
  .tabs-nav{gap:.25rem 1rem}
  .tab-trigger{min-height:48px;padding:.55rem 0;touch-action:manipulation}
  .tab-trigger:hover{transform:none}

  .skin-journal{padding-bottom:7rem}
  .journal-head h2{font-size:clamp(3.35rem,14vw,5.4rem);line-height:.78}
  .journal-stage{grid-template-rows:58vw 42vw 52vw;gap:.65rem;margin-top:3.25rem;padding-inline:var(--mobile-pad)}
  .journal-quote{font-size:clamp(1.9rem,8.8vw,3rem)}
  .journal-notes{padding-top:4rem;gap:3rem}

  /* Inner-page intros stay dramatic, but no longer consume empty screens. */
  .p-hero{padding:7.25rem 0 4rem}
  .p-hero h1{font-size:clamp(3.25rem,16.2vw,5rem);line-height:.8;max-width:9ch}
  .p-hero p{font-size:1rem;line-height:1.65;margin-top:1.25rem}
  .p-hero-chip{margin-top:1.35rem;min-height:44px;align-items:center}
  .p-hero-plain{min-height:0}
  .p-hero-split-media{max-width:100%;margin-bottom:2rem}

  /* Horizontal controls remain scrollable and feel intentional under a thumb. */
  .tr-nav,.ak-tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:.75rem;margin-right:calc(var(--mobile-pad) * -1)}
  .tr-nav::-webkit-scrollbar,.ak-tabs::-webkit-scrollbar{display:none}
  .tr-nav button,.ak-tabs button{flex:0 0 auto;min-height:44px;scroll-snap-align:start;touch-action:manipulation}
  .tr-headr{grid-template-columns:36px minmax(0,1fr) auto;column-gap:.7rem}
  .tr-body-in{padding-left:36px}
  .tr-pr{white-space:nowrap}

  #skin-test-home{padding:6.5rem var(--mobile-pad)}
  .skin-test-photo{height:auto;aspect-ratio:4/5;max-height:560px}
  .skin-test-copy h2{font-size:clamp(3rem,14vw,4.8rem);line-height:.82}

  #faq,#contact{padding-block:5.5rem}
  .faq-q{min-height:56px;font-size:1rem;line-height:1.35;padding:1rem 0;touch-action:manipulation}
  .contact-grid{gap:4rem}
  .contact-hours-row{gap:1.5rem;max-width:none}
  .contact-hours-row span:last-child{text-align:right}
  .contact-link{padding:.45rem 0;overflow-wrap:anywhere}
  .vch-preset{min-height:44px;touch-action:manipulation}

  /* Booking and quiz panels use native-safe font sizes and generous tap targets. */
  #bw-panel,#quiz-panel{max-width:100%;overscroll-behavior:contain}
  .bw-close,.qz-close,#bw-close,#quiz-close{min-width:44px!important;min-height:44px!important}
  .bw-field input,.bw-field textarea,.bw-field select{font-size:16px;min-height:50px}
  .bw-chip,.qz-opt{min-height:44px;display:inline-flex;align-items:center;line-height:1.25;touch-action:manipulation}
  .bw-actions .btn,.qz-next,.qz-prev{min-height:48px}

  footer{padding:0 var(--mobile-pad) 1.75rem!important}
  footer::before{font-size:clamp(3.25rem,17vw,5.1rem);line-height:.72;padding:4.5rem 0 2.25rem!important}
  .ft-grid{grid-template-columns:1fr!important;text-align:left!important;padding-top:1.5rem;gap:0!important}
  .ft-col{padding:1.65rem 0 0!important}
  .ft-tagline{margin-left:0!important;margin-right:0!important}
  .ft-bottom{align-items:flex-start!important;text-align:left!important;gap:1.25rem}
  .ft-list a,.ft-social a{display:inline-flex;align-items:center;min-height:40px}

  .reveal-ready .letter{transition-delay:calc(var(--letter-index) * 14ms)}
}

@media(max-width:380px){
  .hh{font-size:clamp(3.05rem,16.4vw,4.1rem)}
  .hero-frame::before,.hero-frame::after{font-size:.34rem;letter-spacing:.14em}
  .tabs-intro h2{font-size:3.15rem}
  .tab-copy h3{font-size:2.55rem;max-width:10ch}
  .tab-copy p{font-size:.75rem}
  .journal-stage{grid-template-columns:1.08fr .92fr}
  footer::before{font-size:3.2rem}
}

@media(max-height:720px) and (max-width:760px){
  #hero{height:72svh;min-height:500px}
  #hero .hero-bg{bottom:36%}
  .hh{top:34svh;font-size:clamp(3rem,14.8vw,4.2rem)}
  .hero-low{top:53.5svh;bottom:auto}
  .hero-low::before{display:none}
  .hs{font-size:.7rem;line-height:1.48;margin-bottom:.7rem}
  .h-actions .btn{min-height:46px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}