/* Skin & Beyond — clean mobile-only layer.
   Loaded only at <= 820px. Desktop styling remains in style.css untouched. */
@media (max-width: 820px){
  :root{--aamc-header:68px}

  html,body{width:100%;max-width:100%;overflow-x:hidden!important;background:#fff7ef!important}
  body{overscroll-behavior-x:none}
  .stage,.aamcHome{width:100%!important;max-width:100%!important;overflow-x:hidden!important}

  /* Header / mobile navigation */
  .aamcHeader{
    height:var(--aamc-header)!important;
    background:rgba(248,241,235,.72)!important;
    backdrop-filter:blur(18px) saturate(110%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(110%)!important;
    border-bottom:1px solid rgba(255,255,255,.76)!important;
    box-shadow:0 6px 20px rgba(92,67,48,.08)!important;
    color:#342a23!important;
  }
  .aamcHeaderInner{height:100%!important;grid-template-columns:minmax(0,1fr) auto!important;padding:0 14px!important;gap:10px!important}
  .aamcBrandGroup{min-width:0!important;gap:5px!important}
  .aamcLogoButton{width:154px!important;max-width:calc(100vw - 86px)!important;padding:0!important}
  .aamcLogoButton img{display:block!important;width:100%!important;height:auto!important;filter:none!important;opacity:1!important;content:url('assets/skin-beyond-logo-mobile-v24.png')!important}
  .aamcHeaderActions,.aamcDesktopNav{display:none!important}
  .aamcBack{width:18px!important;height:34px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#8c633d!important;font-size:24px!important;line-height:1!important;padding:0!important}
  .stage.innerPage .aamcBack{display:grid!important}

  .aamcMobileToggle{display:flex!important;width:42px!important;height:42px!important;gap:7px!important;padding:0!important;border:0!important;background:transparent!important;z-index:2!important}
  .aamcMobileToggle span{display:block!important;width:26px!important;height:1.5px!important;background:#87613e!important;border-radius:2px!important;transform-origin:center!important;transition:transform .24s ease,opacity .18s ease!important}
  .aamcMobileToggle.open span:nth-child(1){transform:translateY(4.25px) rotate(45deg)!important}
  .aamcMobileToggle.open span:nth-child(2){opacity:1!important;transform:translateY(-4.25px) rotate(-45deg)!important}

  .aamcMobileNav{
    display:block!important;position:fixed!important;z-index:4998!important;left:0!important;right:0!important;top:var(--aamc-header)!important;
    height:calc(100dvh - var(--aamc-header))!important;
    background:rgba(246,239,233,.985)!important;
    backdrop-filter:blur(22px) saturate(108%)!important;-webkit-backdrop-filter:blur(22px) saturate(108%)!important;
    color:#352d26!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transform:translateY(-8px)!important;transition:opacity .22s ease,transform .22s ease,visibility .22s!important;
  }
  .aamcMobileNav.open{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important}
  .aamcMobileNavScroll{height:100%!important;overflow-y:auto!important;padding:16px 20px 76px!important;-webkit-overflow-scrolling:touch}
  .aamcMobileNavScroll>button,.aamcMobileNavScroll>a{
    display:flex!important;width:100%!important;min-height:52px!important;align-items:center!important;justify-content:space-between!important;
    padding:0!important;border:0!important;border-bottom:1px solid rgba(111,80,54,.13)!important;background:transparent!important;
    color:#352d26!important;text-decoration:none!important;text-align:left!important;font:400 20px/1.15 Georgia,serif!important;
  }
  .aamcMobileServicesMenu{max-height:0!important;overflow:hidden!important;background:transparent!important;transition:max-height .26s ease!important}
  .aamcMobileServicesMenu.open{max-height:170px!important}
  .aamcMobileServicesMenu button{display:block!important;width:100%!important;min-height:44px!important;padding:0 0 0 12px!important;border:0!important;border-bottom:1px solid rgba(111,80,54,.09)!important;background:transparent!important;color:#9a7047!important;text-align:left!important;font-size:10px!important;font-weight:650!important;letter-spacing:1.5px!important}
  body.mobileNavOpen{overflow:hidden!important}

  /* Opening hero — shorter, phone-native composition */
  .aamcHome{padding-top:0!important}
  .aamcHero{
    position:relative!important;width:100%!important;height:clamp(520px,70svh,610px)!important;min-height:0!important;max-height:none!important;
    padding:var(--aamc-header) 0 0!important;overflow:hidden!important;background:#f7e7de!important;
  }
  .aamcHeroSlides,.aamcHeroSlide,.aamcHeroShade{inset:0!important}
  .aamcHeroSlide{background-size:cover!important;background-repeat:no-repeat!important;background-position:center center!important;transform:none!important}
  .aamcHeroSlide[data-hero-key='trusculpt']{background-position:50% center!important}
  .aamcHeroSlide[data-hero-key='fillers']{background-image:url('assets/hero-refined-volume-mobile-v24.png')!important;background-size:auto 67%!important;background-position:center 18%!important}
  .aamcHeroSlide[data-hero-key='laser']{background-position:56% center!important}
  .aamcHeroSlide[data-hero-key='collagen']{background-position:52% center!important}
  .aamcHeroSlide[data-hero-key='pigmentation']{background-position:52% center!important}
  .aamcOriginalHeroSlide{background-position:56% center!important}
  .aamcOriginalHeroPortrait{left:30%!important;top:13%!important;height:46%!important;width:auto!important;max-width:none!important;opacity:.80!important}
  .aamcHeroShade{background:linear-gradient(0deg,rgba(255,247,239,.97) 0%,rgba(255,247,239,.82) 34%,rgba(255,247,239,.24) 62%,rgba(255,247,239,.08) 100%)!important}
  .aamcHeroContent{left:18px!important;right:18px!important;top:auto!important;bottom:86px!important;width:auto!important;transform:none!important;color:#3d3026!important;z-index:7!important}
  .aamcHeroContent h1{max-width:92%!important;margin:0 0 10px!important;font-size:clamp(43px,12.6vw,59px)!important;line-height:.91!important;letter-spacing:-2px!important;color:#3d3026!important}
  .aamcHeroContent h1 em{color:#a46f39!important}
  .aamcHeroLead{max-width:94%!important;margin:0 0 13px!important;color:#695747!important;font-size:11px!important;line-height:1.48!important}
  .aamcOutlineCta{min-height:38px!important;padding:0 13px!important;border-radius:0!important;border:1px solid rgba(146,101,58,.52)!important;background:rgba(255,250,245,.38)!important;color:#865f36!important;font-size:7px!important;letter-spacing:1.3px!important}
  .aamcHeroDots{display:none!important}
  .homePromoTickerGrid.aamcHeroPromoTicker{display:block!important;left:14px!important;right:14px!important;bottom:16px!important;width:auto!important;height:50px!important;overflow:visible!important}
  .aamcHeroPromoTicker .homePromoTickerViewport{inset:0!important;overflow:visible!important}
  .aamcHeroPromoTicker .homePromoText{left:0!important;right:0!important;bottom:0!important;width:100%!important;text-align:center!important;white-space:normal!important;font-size:clamp(18px,5.6vw,25px)!important;line-height:1.03!important}

  /* Featured treatments — equal cards, one per row, normal photo crops */
  .aamcFeaturedBridge{margin:0!important;padding:16px 12px 0!important;position:relative!important;z-index:9!important}
  .aamcFeaturedBridgeInner{width:100%!important;max-width:none!important;margin:0!important;padding:18px 14px 16px!important;border-radius:18px!important;box-sizing:border-box!important}
  .aamcBridgeHead{display:block!important;margin:0 0 14px!important}
  .aamcBridgeHead h2{margin:0 0 8px!important;font-size:36px!important;line-height:.98!important}
  .aamcBridgeHead p{margin:0!important;font-size:11px!important;line-height:1.55!important}
  .aamcBridgeCards{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .aamcBridgeCard{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:16/9!important;border-radius:14px!important;overflow:hidden!important;background:#eadfd6!important}
  .aamcBridgeCard img{display:block!important;width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important;object-position:center!important;transform:none!important;background:transparent!important}
  .aamcBridgeCard:nth-child(1) img{object-position:center 52%!important}
  .aamcBridgeCard:nth-child(2) img{object-position:center 55%!important}
  .aamcBridgeCard:nth-child(3) img{object-position:center 47%!important}
  .aamcBridgeCard:hover img{transform:none!important}
  .aamcBridgeCard span{padding:12px 13px!important}
  .aamcBridgeCard strong{font-size:16px!important}
  .aamcBridgeCard em{font-size:8px!important;letter-spacing:1px!important}

  /* Free-consultation form */
  .aamcConsultBar{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;min-height:0!important;margin:16px 0 0!important;display:grid!important;grid-template-columns:1fr 1fr!important;background:linear-gradient(180deg,#fff4eb,#f6e4d8)!important;box-shadow:0 16px 28px rgba(104,70,39,.13)!important}
  .aamcConsultIntro{display:block!important;grid-column:1/-1!important;padding:14px 14px 10px!important;border-right:0!important;border-bottom:1px solid rgba(72,57,43,.12)!important}
  .aamcConsultIntro strong{font-size:18px!important}
  .aamcConsultBar>label{padding:10px 11px 8px!important;min-height:62px!important}
  .aamcConsultBar>label:nth-of-type(2){border-right:0!important}
  .aamcConsultBar>label:nth-of-type(3){grid-column:1/-1!important;border-right:0!important}
  .aamcConsultBar input,.aamcConsultBar select{font-size:11px!important;height:27px!important}
  .aamcPhoneField>div{height:27px!important}
  .aamcPhoneField input{height:25px!important}
  .aamcConsultBar>button{grid-column:1/-1!important;min-height:43px!important;border-radius:0!important;padding:0 12px!important;font-size:7px!important}

  /* Specializations — centered card with equal side peeks */
  .aamcSpecializations{padding:58px 0 68px!important;overflow:hidden!important}
  .aamcSectionHead{width:calc(100% - 32px)!important;margin:0 auto 22px!important;grid-template-columns:1fr auto!important;gap:12px!important}
  .aamcSectionHead h2{font-size:40px!important;line-height:.98!important}
  .aamcSectionHead>p{grid-column:1/-1!important;grid-row:2!important;margin:0!important;font-size:11px!important;line-height:1.55!important}
  .aamcSliderButtons{grid-column:2!important;grid-row:1!important;align-self:end!important}
  .aamcSliderButtons button{width:36px!important;height:36px!important}
  .aamcSpecialtyViewport{width:100%!important;max-width:100%!important;padding:0!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:none!important;scroll-behavior:auto!important;scrollbar-width:none!important;-ms-overflow-style:none!important;-webkit-overflow-scrolling:touch!important}
  .aamcSpecialtyViewport::-webkit-scrollbar{display:none!important}
  .aamcSpecialtyTrack{display:flex!important;flex-wrap:nowrap!important;gap:12px!important;min-width:max-content!important;padding:0!important;will-change:scroll-position!important}
  .aamcSpecialtyCard{flex:0 0 58vw!important;width:58vw!important;max-width:242px!important;height:300px!important;border-radius:16px!important;scroll-snap-align:none!important}
  .aamcSpecialtyCard img{width:100%!important;height:100%!important;object-fit:cover!important}
  .aamcSpecialtyCard>span{left:15px!important;right:15px!important;bottom:15px!important}
  .aamcSpecialtyCard strong{font-size:22px!important}

  /* Lower homepage: preserve the approved design but make widths phone-safe. */
  .aamcAboutBand,.aamcContactHome{grid-template-columns:1fr!important;width:100%!important}
  .aamcAboutImage{min-height:360px!important}
  .aamcAboutCopy{padding:54px 20px 60px!important}
  .aamcAboutCopy h2{font-size:44px!important}
  .aamcTechnology{padding:62px 0 70px!important}
  .aamcTechnologyGrid{width:calc(100% - 28px)!important;display:flex!important;flex-direction:column!important;gap:11px!important}
  .aamcTechCard,.aamcTechCard.large{width:100%!important;height:330px!important;min-height:330px!important}
  .aamcCtaBand{padding:48px 20px!important}
  .aamcCtaBand h2{font-size:43px!important}
  .aamcContactVisual{min-height:350px!important}
  .aamcContactDetails{padding:52px 20px 60px!important}
  .aamcContactDetails h2{font-size:43px!important}
  .aamcFooter{padding:50px 20px 24px!important}
  .aamcFooterBrand img{content:url('assets/skin-beyond-logo-mobile-v24.png')!important;width:205px!important;height:auto!important;filter:none!important}

  /* Existing content pages remain underneath the glass header and fit phone width. */
  .panel:not(.adminPage){top:0!important;left:0!important;right:0!important;width:100%!important;height:100dvh!important;max-width:none!important;padding:calc(var(--aamc-header) + 28px) 16px 64px!important;overflow-x:hidden!important;overflow-y:auto!important;box-sizing:border-box!important}
  #panelContent{width:100%!important;max-width:100%!important;margin:8px auto!important;box-sizing:border-box!important}
  .panel:not(.adminPage) .grid,.panel:not(.adminPage) .contactGrid,.panel:not(.adminPage) .productDetailGrid,.panel:not(.adminPage) .pickupGrid{grid-template-columns:1fr!important}
  .panel:not(.adminPage) img{max-width:100%!important}

  .chatPanel{right:8px!important;top:var(--aamc-header)!important;width:calc(100vw - 16px)!important;height:calc(100dvh - var(--aamc-header) - 8px)!important;border-radius:0 0 14px 14px!important}
}

@media (max-width: 430px){
  .aamcLogoButton{width:148px!important}
  .aamcHero{height:clamp(510px,69svh,575px)!important}
  .aamcHeroContent{bottom:82px!important}
  .aamcHeroContent h1{font-size:clamp(41px,12.8vw,55px)!important}
  .aamcSpecialtyCard{flex-basis:58vw!important;width:58vw!important;height:286px!important}
}