/* ---------- mobile optimisation ---------- */
.mbar { display: none; }
.swipe-hint { display: none; }
@media (max-width: 860px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .wrap { padding: 0 18px; }
  h2 { font-size: clamp(28px, 7.5vw, 34px); }
  .lead { font-size: 17px; }
  .sec { padding: 56px 0; }
  .sec.tight { padding: 40px 0; }
  .head-row { margin-bottom: 28px; }

  /* header */
  .topbar .wrap { justify-content: center; padding-top: 7px; padding-bottom: 7px; }
  .topbar .wrap > div:first-child { display: none; }
  .navbar, header.site.scrolled .navbar { height: 62px; }
  .brand img, header.site.scrolled .brand img { height: 40px; }
  .burger { width: 44px; height: 44px; }
  .drawer .panel a { padding: 13px 10px; }

  /* bottom action bar */
  .mbar { display: grid; grid-template-columns: .85fr 1.2fr 1.25fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(6,44,82,.4); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 50px; border-radius: 14px; font-family: var(--head); font-weight: 600; font-size: 14.5px; white-space: nowrap; text-decoration: none; }
  .mbar .c { background: var(--mist); color: var(--navy); }
  .mbar .w { background: #25D366; color: #fff; }
  .mbar .b { background: var(--orange); color: #fff; }
  .fab { bottom: calc(80px + env(safe-area-inset-bottom)); right: 14px; }
  .fab .call, .fab .wa { display: none; }

  /* hero */
  .hero { min-height: calc(100svh - 96px); }
  .hero .wrap { padding-top: 80px; padding-bottom: 80px; }
  .hero h1 { font-size: clamp(38px, 11vw, 48px); }
  .hero .intro { font-size: 17px; margin: 16px 0 24px; }
  .hero .btn-row { flex-direction: column; align-items: stretch; }
  .hero .btn-row .btn { width: 100%; }
  .hero .caption { display: none; }
  .dots button { width: 12px; height: 12px; }
  .finder { margin-top: -40px; }
  .finder h2 { font-size: 23px; }
  .chips { gap: 8px; }
  .chip { padding: 10px 14px; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }

  /* marquee */
  .marquee { padding: 12px 0; margin-top: 40px; }
  .marquee span { font-size: 20px; gap: 28px; padding: 0 14px; }

  /* stats */
  .stat { padding: 4px 16px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat b { font-size: 42px; }

  /* treatment cards */
  .g4 { gap: 12px; }
  .tcard .tx { padding: 12px 14px 14px; }
  .tcard h3 { font-size: 16px; }
  .tcard .arrow { display: none; }
  .tcard:hover { transform: none; }

  /* horizontal swipe rows */
  .swipe { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -18px; padding: 4px 18px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 82%; scroll-snap-align: start; }
  .swipe-hint { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 4px; }
  .sec.navy .swipe-hint, .journey .swipe-hint { color: #9FBAD6; }
  .swipe-hint i { width: 26px; height: 3px; border-radius: 3px; background: currentColor; position: relative; overflow: hidden; }
  .swipe-hint i::after { content: ''; position: absolute; inset: 0; background: var(--lime); animation: hint 1.8s ease-in-out infinite; }
  @keyframes hint { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

  /* journey as swipe carousel */
  .journey .pin { padding: 56px 0 40px; }
  .journey .intro { padding: 0 18px; margin-bottom: 22px; flex-direction: column; align-items: flex-start; }
  .journey .track { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 18px 10px; gap: 14px; scrollbar-width: none; }
  .journey .track::-webkit-scrollbar { display: none; }
  .jcard { flex: 0 0 82vw; width: auto; height: 400px; scroll-snap-align: start; }
  .jcard img { transform: none; }
  .jcard b { font-size: 70px; }
  .jcard h3 { font-size: 26px; }

  /* team + filters */
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px 22px; padding: 2px 18px 8px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filters .chip { flex: 0 0 auto; }
  .person .tx { padding: 12px; }
  .person h3 { font-size: 15px; }
  .person p { font-size: 12.5px; }

  /* explorer tabs */
  .tablist { margin: 0 -18px; padding: 2px 18px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .tablist::-webkit-scrollbar { display: none; }
  .tablist button { scroll-snap-align: start; padding: 12px 16px; font-size: 15px; border: 1px solid var(--line); }
  .panel-card .im { aspect-ratio: 16 / 10; }
  .panel-card .bd { padding: 22px; }
  .panel-card h2 { font-size: 26px !important; }

  /* gallery */
  .masonry { columns: 2; column-gap: 10px; }
  .masonry button { margin-bottom: 10px; }
  .masonry figcaption { font-size: 12px; padding: 22px 10px 8px; }
  .lightbox { padding: 12px; }
  .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: 24px; }
  .lightbox .lb-prev { left: calc(50% - 64px); } .lightbox .lb-next { right: calc(50% - 64px); }

  /* page hero */
  .phero .wrap { padding-top: 40px; padding-bottom: 40px; gap: 24px; }
  .phero h1 { font-size: clamp(34px, 9vw, 42px); }
  .phero p { font-size: 16px; }
  .phero .ring { width: 260px; height: 260px; border-width: 40px; right: -110px; top: -90px; }

  /* branches / collage */
  .branch { padding: 26px 0; gap: 20px; }
  .collage .photo.b { width: 44%; bottom: -20px; border-width: 5px; }
  .badge-float { left: 14px; top: 14px; padding: 12px 14px; }
  .badge-float b { font-size: 26px; }

  /* forms + booking */
  .form { padding: 22px 18px; border-radius: 22px; }
  .opt { padding: 13px 14px; min-height: 50px; }
  .qlabel { font-size: 18px; }
  .book .btn-row .btn { flex: 1; }
  .summary { padding: 4px 14px; font-size: 15px; }
  .side-card { padding: 22px; }

  /* cta */
  .cta { padding: 30px 22px; border-radius: 22px; }
  .cta .btn-row { width: 100%; flex-direction: column; }
  .cta .btn { width: 100%; }

  /* statement + story */
  .statement p.big { font-size: clamp(28px, 8vw, 36px); }
  .story .st h3 { font-size: 24px; }
  .story .st p { font-size: 16px; }

  /* footer */
  footer.site { padding-top: 48px; }
  .fgrid4 { grid-template-columns: 1fr; gap: 6px; }
  footer .about { margin-bottom: 18px; }
  .fcol { border-bottom: 1px solid rgba(255,255,255,.1); }
  .fcol summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; }
  .fcol summary::-webkit-details-marker { display: none; }
  .fcol summary h4 { margin: 0; }
  .fcol summary::after { content: '+'; font-size: 26px; color: var(--lime); line-height: 1; transition: transform .25s; }
  .fcol[open] summary::after { transform: rotate(45deg); }
  .fcol ul { padding-bottom: 14px; gap: 0; }
  .fcol ul a { display: block; padding: 9px 0; }
  .map { display: none; }
  .dir-btn { display: inline-flex !important; }
  .fbar { margin-top: 26px; flex-direction: column; gap: 8px; }

  /* motion: lighter on phones */
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(30px); }
  [data-reveal] { transition-duration: .6s; transition-delay: calc(var(--d, 0) * 50ms); }
}
@media (min-width: 861px) {
  .fcol summary { pointer-events: none; list-style: none; }
  .fcol summary::-webkit-details-marker { display: none; }
  .dir-btn { display: none !important; }
}
@media (max-width: 380px) {
  .mbar a { font-size: 14px; gap: 6px; }
  .mbar svg { display: none; }
  .g4 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Drawer Accordions & Mobile Navigation ---------- */
.drawer-acc {
  display: flex;
  flex-direction: column;
}
.drawer-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--ink);
  font-family: var(--head);
  font-weight: 500;
  font-size: 18px;
  transition: background .2s ease, color .2s ease;
}
.drawer-acc-head:hover, .drawer-acc-head:active {
  background: var(--mist);
}
.drawer-acc-head > span, .drawer-acc-head > a {
  flex: 1;
}
.drawer-acc.open > .drawer-acc-head {
  color: var(--blue);
  font-weight: 600;
}
.drawer-acc-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  transition: transform .25s ease, color .2s ease;
}
.drawer-acc.open > .drawer-acc-head .drawer-acc-btn {
  transform: rotate(180deg);
  color: var(--blue);
}
.drawer-acc-content {
  display: none;
  padding: 4px 6px 10px 14px;
  flex-direction: column;
  gap: 2px;
  max-height: 50vh;
  overflow-y: auto;
  border-left: 2px solid var(--mist);
  margin-left: 10px;
}
.drawer-acc.open > .drawer-acc-content {
  display: flex;
}
.drawer-acc-content a.sub {
  font-family: var(--text) !important;
  font-size: 14px !important;
  padding: 7px 10px !important;
  color: var(--body) !important;
  border-radius: 6px;
  text-decoration: none;
}
.drawer-acc-content a.sub:hover {
  background: var(--mist);
  color: var(--blue) !important;
}

@media (max-width: 1100px) {
  nav.main {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .drop, .drop.wide {
    display: none !important;
  }
  .burger {
    display: flex !important;
  }
}