/* ---------- RESPONSIVE ---------- */
  html, body {
    overflow-x:hidden;
  }

  @media (max-width: 900px) {
    .nav-links {
      position:fixed;
      inset:0;
      width:100%;
      height:100vh;
      height:100dvh;
      max-width:100vw;
      overflow-x:hidden;
      overscroll-behavior-x:none;
      touch-action:pan-y;
      z-index:70;
      isolation:isolate;
      display:grid;
      grid-template-columns:minmax(0, 1.15fr) minmax(270px, .7fr);
      grid-template-rows:repeat(5, auto);
      align-content:center;
      column-gap:clamp(52px, 9vw, 130px);
      row-gap:clamp(12px, 2vh, 22px);
      margin:0;
      padding:clamp(90px, 12vh, 130px) clamp(42px, 8vw, 120px) clamp(48px, 8vh, 90px);
      background:#090e0e;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .7s var(--ease-soft), visibility 0s linear 1s;
      -webkit-backface-visibility:hidden;
      backface-visibility:hidden;
      will-change:opacity;
    }
    .nav-links::before,
    .nav-links::after {
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
    }
    .nav-links::before {
      opacity:.09;
      transform:scale(1.04) translateZ(0);
      transition:opacity .8s var(--ease-soft);
    }
    /* Scoped to .mobile-open so the browser only fetches this background
       photo the first time a visitor actually opens the mobile menu,
       instead of on every single mobile page load regardless of whether
       the menu is ever opened (background-image URLs are fetched as soon
       as a matching rule applies, not only when the element is visible). */
    .nav-links.mobile-open::before {
      background:url('https://images.unsplash.com/photo-1519823551278-64ac92734fb1?fm=jpg&q=70&w=2000&auto=format&fit=crop') center / cover no-repeat;
    }
    .nav-links::after {
      background:linear-gradient(110deg, rgba(5,9,9,.82) 0%, rgba(7,12,12,.92) 54%, rgba(3,7,7,.98) 100%);
    }
    .burger {
      display:block;
      position:relative;
      z-index:80;
    }
    .nav-cta {
      display:none;
    }
    .nav-links.mobile-open {
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transition-delay:0s;
    }
    .nav-links.mobile-open::before {
      opacity:.13;
      transform:scale(1.04) translateZ(0);
    }
    .nav-links > li {
      position:relative;
      z-index:1;
      min-width:0;
      max-width:100%;
      opacity:0;
      transform:translate3d(0, 20px, 0);
      transition:opacity .9s var(--ease-soft), transform .9s var(--ease-luxury);
      -webkit-backface-visibility:hidden;
      backface-visibility:hidden;
      will-change:opacity, transform;
    }
    .nav-links > li:not(.nav-overlay-info) {
      grid-column:1;
    }
    .nav-links.mobile-open > li {
      opacity:1;
      transform:translate3d(0, 0, 0);
    }
    .nav-links.mobile-open > li:nth-child(2) { transition-delay:.13s; }
    .nav-links.mobile-open > li:nth-child(3) { transition-delay:.26s; }
    .nav-links.mobile-open > li:nth-child(4) { transition-delay:.39s; }
    .nav-links.mobile-open > li:nth-child(5) { transition-delay:.52s; }
    .nav-links.mobile-open > li:nth-child(6) { transition-delay:.65s; }
    .nav-links > li:not(.nav-overlay-info) > a {
      display:inline-block;
      padding:0;
      color:var(--paper);
      font-family:'Instrument Serif', serif;
      font-size:clamp(4rem, 7vw, 5.75rem);
      line-height:.9;
      letter-spacing:-.025em;
      opacity:.94;
      transition:color .55s var(--ease-soft), transform .65s var(--ease-luxury), opacity .55s var(--ease-soft);
    }
    .nav-links:hover > li:not(.nav-overlay-info) > a { opacity:.94; }
    .nav-links > li:not(.nav-overlay-info) > a:hover,
    .nav-links > li:not(.nav-overlay-info) > a:focus-visible {
      color:var(--accent-gold);
      opacity:1;
      transform:translateX(20px);
      outline:none;
    }
    .nav-links > li:not(.nav-overlay-info) > a::after { display:none; }
    .mobile-nav-booking {
      display:block;
    }
    .nav-overlay-info {
      display:block;
      grid-column:2;
      grid-row:1 / span 5;
      align-self:center;
      padding:12px 0 12px clamp(34px, 5vw, 72px);
      border-left:1px solid var(--accent-gold);
      color:rgba(247,244,236,.74);
    }
    .nav-overlay-info .eyebrow { color:var(--accent-gold); }
    .nav-overlay-info > p {
      max-width:30ch;
      margin:0 0 34px;
      color:rgba(247,244,236,.58);
      font-size:.9rem;
    }
    .nav-overlay-info dl { margin:0; }
    .nav-overlay-info dl > div { margin-top:22px; }
    .nav-overlay-info dt {
      margin-bottom:5px;
      color:var(--accent-gold);
      font-family:'JetBrains Mono', monospace;
      font-size:.62rem;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .nav-overlay-info dd { margin:0; font-size:.82rem; line-height:1.7; }
    .nav-overlay-info a {
      padding:0;
      color:inherit;
      font-family:inherit;
      font-size:inherit;
      line-height:inherit;
      opacity:1;
      overflow-wrap:anywhere;
    }
    .nav-links:hover .nav-overlay-info a { opacity:1; }
    .nav-overlay-info a::after { display:none; }
    .home .treatments-grid,
    .treatments-grid {
      grid-template-columns:repeat(2,1fr);
    }
    .why-grid {
      grid-template-columns:repeat(2,1fr);
      row-gap:36px;
    }
    .intro .wrap, .contact .wrap {
      grid-template-columns:1fr;
    }
    .section-head {
      grid-template-columns:1fr;
    }
    .hero .wrap {
      grid-template-columns:1fr;
      padding-bottom:40px;
    }
    .hero-meta {
      text-align:left;
      margin-top:20px;
    }
    .therapist-grid {
      grid-template-columns:1fr;
    }
    .therapist-solo {
      grid-template-columns:1fr;
      text-align:left;
      padding:32px 28px;
    }
    .foot-links {
      gap:36px;
    }
  }

  @media (max-width: 640px) {
    .wrap {
      padding:0 20px;
    }
    .nav-links {
      grid-template-columns:1fr;
      grid-template-rows:repeat(5, auto) auto;
      align-content:center;
      gap:10px;
      padding:82px 24px 28px;
      overflow-y:auto;
    }
    .fade-in-up,
    .t-card.fade-in-up {
      transform:translate3d(0, 18px, 0);
      transition:opacity .7s var(--ease-soft), transform .78s var(--ease-luxury);
      -webkit-backface-visibility:hidden;
      backface-visibility:hidden;
      will-change:opacity, transform;
    }
    .fade-in-up.is-visible,
    .t-card.fade-in-up.is-visible {
      transform:translate3d(0, 0, 0);
    }
    .nav-links > li {
      transition-duration:.7s;
    }
    .nav-links > li:not(.nav-overlay-info) > a {
      font-size:clamp(2.65rem, 13vw, 3.6rem);
      line-height:.92;
    }
    .nav-links > li:not(.nav-overlay-info) > a:hover,
    .nav-links > li:not(.nav-overlay-info) > a:focus-visible {
      transform:translateX(10px);
    }
    .nav-overlay-info {
      grid-column:1;
      grid-row:6;
      margin-top:14px;
      padding:18px 0 0;
      border-top:1px solid var(--accent-gold);
      border-left:0;
    }
    .nav-overlay-info > p { display:none; }
    .nav-overlay-info dl {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px 18px;
    }
    .nav-overlay-info dl > div { margin:0; }
    .nav-overlay-info dl > div:last-child { grid-column:1 / -1; }
    .nav-overlay-info dd { font-size:.72rem; line-height:1.5; }
    .home .treatments-grid,
    .treatments-grid {
      grid-template-columns:1fr;
    }
    .home #treatments .treatments-grid {
      display:flex;
      box-sizing:border-box;
      gap:16px;
      overflow-x:auto;
      overflow-y:hidden;
      padding:2px 0 18px;
      scroll-snap-type:x mandatory;
      scroll-padding-inline:0;
      overscroll-behavior-inline:contain;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .home #treatments .treatments-grid::-webkit-scrollbar {
      display:none;
    }
    .home #treatments .t-card {
      display:block;
      flex:0 0 calc(100% - 56px);
      width:calc(100% - 56px);
      max-width:calc(100% - 56px);
      min-width:0;
      scroll-snap-align:center;
      scroll-snap-stop:always;
    }
    .home #treatments .t-card:first-child { scroll-snap-align:start; }
    .home #treatments .t-card:last-child { scroll-snap-align:end; }
    .home #treatments .t-card.fade-in-up,
    .home #treatments .t-card.fade-in-up.is-visible {
      opacity:1;
      transform:none;
      transition:none;
    }
    .home #treatments .t-card:hover {
      border-color:var(--line);
      transform:translateY(0) scale(1);
      box-shadow:0 2px 4px rgba(31,46,43,.04);
    }
    .home #treatments .t-card:hover::after {
      opacity:.65;
      transform:scaleX(.16);
    }
    .home #treatments .t-card h3,
    .home #treatments .t-card::after,
    .home #treatments .t-card a,
    .home #treatments .t-card .t-photo,
    .home #treatments .t-card .t-photo-wrap::after {
      transition:none;
    }
    .home #treatments .t-card:hover h3 { transform:none; }
    .home #treatments .t-card:hover .t-photo {
      transform:none;
      filter:saturate(.82) contrast(1.04);
    }
    .home #treatments .t-card:hover .t-photo-wrap::after { opacity:1; }
    .home #treatments .t-card:hover a:not(.t-card-book) {
      color:var(--deep);
      opacity:.8;
      border-color:rgba(31,46,43,.28);
    }
    .services .services-grid {
      display:flex;
      box-sizing:border-box;
      gap:16px;
      overflow-x:auto;
      overflow-y:hidden;
      padding:2px 0 18px;
      scroll-snap-type:x mandatory;
      scroll-padding-inline:0;
      overscroll-behavior-inline:contain;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .services .services-grid::-webkit-scrollbar {
      display:none;
    }
    .services .service-card {
      flex:0 0 calc(100% - 56px);
      width:calc(100% - 56px);
      max-width:calc(100% - 56px);
      min-width:0;
      scroll-snap-align:center;
      scroll-snap-stop:always;
    }
    .services .service-card:first-child { scroll-snap-align:start; }
    .services .service-card:last-child { scroll-snap-align:end; }
    .why-grid {
      grid-template-columns:1fr;
    }
    section {
      padding:56px 0;
    }
    .hero {
      /* Keep the Hero/About boundary stable while Safari's browser chrome
         expands and collapses. Dynamic viewport units resize during scroll. */
      min-height:100vh;
      min-height:100svh;
      padding-top:96px;
    }
    .hero .wrap {
      align-content:center;
      padding-bottom:42px;
    }
    .hero h1 {
      max-width:16ch;
      margin-top:4px;
      line-height:1;
    }
    .hero-sub-desktop { display:none; }
    .hero-sub-mobile { display:inline; }
    .hero-sub {
      max-width:29ch;
      margin-top:26px;
      padding:0;
      font-size:.96rem;
      line-height:1.65;
    }
    .hero-cta {
      flex-direction:column;
      align-items:flex-start;
      gap:16px;
      margin-top:34px;
    }
    .hero-cta .btn-primary {
      padding:15px 24px;
    }
    .hero-cta .btn-ghost {
      padding:2px 0 5px;
      border:0;
      border-bottom:1px solid rgba(247,244,236,.5);
      border-radius:0;
      background:transparent;
      box-shadow:none;
    }
    .hero-cta .btn-ghost:hover {
      background:transparent;
      color:var(--accent-gold);
      transform:none;
    }
    .hero-meta {
      display:none;
    }
    nav.wrap {
      height:68px;
    }

    /* stop mono-space price columns from squeezing service names */
    .svc-row {
      flex-wrap:wrap;
      gap:2px 12px;
    }
    .svc-price {
      padding-left:0;
    }
    .t-card {
      padding:28px 22px;
    }
    .therapist-solo {
      padding:26px 22px;
    }
    .testimonial {
      padding:72px 0;
    }
    .testimonial blockquote {
      max-width:100%;
    }
    .foot-top {
      flex-direction:column;
    }
    .foot-links {
      width:100%;
      justify-content:space-between;
      gap:24px;
    }
    .foot-bottom {
      flex-direction:column;
      gap:6px;
    }

    .page-hero {
      padding:88px 0 52px;
      isolation:isolate;
      transform:translateZ(0);
    }
    .page-hero.services-hero {
      min-height:100vh;
      min-height:100svh;
      padding:96px 0 56px;
      background-position:center top;
    }
  }

  @media (max-width: 400px) {
    .hero h1 {
      font-size:2.3rem;
      max-width:14ch;
    }
    .logo {
      font-size:1.6rem;
    }
    .btn {
      padding:12px 18px;
      font-size:0.7rem;
    }
  }