/* hero-skeleton.css — massage-themed skeleton loader + pressure-point hero accent
   Added 2026-06-20. Self-contained: does NOT modify styles.css or main.js.
   Themed via existing :root vars (light + [data-theme=dark]); honors prefers-reduced-motion.
   The loading "skeleton" IS an anatomy/pressure-point motif (spine + trigger points). */

/* ============ Loading skeleton (anatomy / pressure-point motif) ============ */
#mbm-skel{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; padding:24px;
  background:radial-gradient(120% 90% at 50% 16%, var(--cream-fade,#fdf0e9) 0%, var(--cream-bg,#fceade) 62%);
  opacity:1; visibility:visible;
  transition:opacity .55s ease, visibility 0s linear .55s;
  /* failsafe: if JS never runs, the loader still clears so the page is never trapped */
  animation:mbmSkelAutohide .6s ease 3.2s forwards;
}
#mbm-skel.is-done{ opacity:0; visibility:hidden; pointer-events:none; animation:none; }
@keyframes mbmSkelAutohide{ to{ opacity:0; visibility:hidden; } }

.mbm-skel-figure{ width:170px; height:230px; }
.mbm-spine{ fill:none; stroke:var(--gold,#C8B896); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340; animation:mbmDraw 1.8s ease forwards .1s; }
.mbm-vert{ fill:var(--sage,#8B9A7F); opacity:0; animation:mbmPop .5s ease forwards; }
.mbm-relief{ fill:none; stroke:var(--orange,#ec6f23); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:120; stroke-dashoffset:120; opacity:.5; animation:mbmFlow 2.6s ease-in-out infinite; }
.mbm-pt .core{ fill:var(--rust,#9b440d); }
.mbm-pt .ring{ fill:none; stroke:var(--rust,#9b440d); stroke-width:2;
  transform-box:fill-box; transform-origin:center; animation:mbmPulse 2.1s ease-out infinite; }

.mbm-skel-lines{ width:min(420px,86vw); display:flex; flex-direction:column; align-items:center; gap:14px; }
.skel-bar{ height:16px; width:100%; border-radius:9px;
  background:linear-gradient(90deg, var(--line,#f9d4bd) 25%, rgba(255,255,255,.65) 37%, var(--line,#f9d4bd) 63%);
  background-size:400% 100%; animation:mbmShimmer 1.4s ease-in-out infinite; }
.skel-bar.t1{ width:62%; height:13px; }
.skel-bar.t2{ width:90%; }
.skel-bar.t3{ width:78%; }
.skel-bar.btn{ width:150px; height:44px; border-radius:26px; margin-top:6px; opacity:.9;
  background:linear-gradient(90deg, var(--rust,#9b440d) 25%, var(--orange,#ec6f23) 50%, var(--rust,#9b440d) 75%);
  background-size:400% 100%; }
.mbm-skel-cap{ font-family:var(--font-title,'Playfair Display',serif); font-size:14px;
  letter-spacing:.04em; color:var(--muted,#6e6358); opacity:.85; }

@keyframes mbmShimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
@keyframes mbmDraw{ to{ stroke-dashoffset:0 } }
@keyframes mbmFlow{ 0%{stroke-dashoffset:120} 50%{stroke-dashoffset:0; opacity:.75} 100%{stroke-dashoffset:-120; opacity:.5} }
@keyframes mbmPop{ to{ opacity:1 } }
@keyframes mbmPulse{ 0%{ stroke-opacity:.6; transform:scale(.5) } 70%{ stroke-opacity:0; transform:scale(2.1) } 100%{ stroke-opacity:0; transform:scale(2.1) } }

/* ============ Hero acupressure points (labeled, interactive, subtle) ============
   Six glowing points over the hero; hover (desktop) or tap (focus) reveals a label
   naming the region and what it treats. Hidden on phones to keep the hero clean. */
.mbm-acupoints{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.mbm-acupoints .apt{ position:absolute; transform:translate(-50%,-50%); pointer-events:auto;
  appearance:none; -webkit-appearance:none; background:transparent; border:0; padding:0; cursor:pointer; }
.mbm-acupoints .apt-dot{ position:relative; display:block; width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,228,196,.98) 0%, rgba(236,111,35,.92) 42%, rgba(236,111,35,0) 74%);
  box-shadow:0 0 12px 3px rgba(236,111,35,.42); animation:mbmFloat 7.5s ease-in-out infinite; }
.mbm-acupoints .apt-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(255,255,255,.7); animation:mbmRing 4.2s ease-out infinite; }
/* label chip — hidden until hover/focus */
.mbm-acupoints .apt-tip{ position:absolute; left:50%; bottom:calc(100% + 11px);
  transform:translateX(-50%) translateY(6px); display:flex; flex-direction:column; align-items:center; gap:1px;
  white-space:nowrap; background:rgba(20,18,17,.93); color:#fff;
  font-family:var(--font-body,system-ui,sans-serif); font-size:13px; font-weight:700; line-height:1.2;
  padding:7px 12px; border-radius:9px; box-shadow:0 8px 22px rgba(0,0,0,.34);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.mbm-acupoints .apt-tip small{ font-size:11px; font-weight:500; opacity:.82; }
.mbm-acupoints .apt-tip::after{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:rgba(20,18,17,.93); }
.mbm-acupoints .apt:hover .apt-tip,
.mbm-acupoints .apt:focus-visible .apt-tip{ opacity:1; transform:translateX(-50%) translateY(0); }
.mbm-acupoints .apt:hover .apt-dot,
.mbm-acupoints .apt:focus-visible .apt-dot{ box-shadow:0 0 16px 5px rgba(236,111,35,.72); }
.mbm-acupoints .apt:focus-visible{ outline:none; }
/* positions (kept toward the edges so they never sit under the headline) */
.mbm-acupoints .apt-neck{   top:18%; left:18%; }
.mbm-acupoints .apt-traps{  top:30%; left:81%; }
.mbm-acupoints .apt-mid{    top:50%; left:11%; }
.mbm-acupoints .apt-lumbar{ top:62%; left:87%; }
.mbm-acupoints .apt-glutes{ top:75%; left:21%; }
.mbm-acupoints .apt-calves{ top:83%; left:73%; }
.mbm-acupoints .apt-traps  .apt-dot{ animation-delay:.9s; }
.mbm-acupoints .apt-mid    .apt-dot{ animation-delay:1.6s; }
.mbm-acupoints .apt-lumbar .apt-dot{ animation-delay:.5s; }
.mbm-acupoints .apt-glutes .apt-dot{ animation-delay:2.1s; }
.mbm-acupoints .apt-calves .apt-dot{ animation-delay:1.2s; }
@keyframes mbmFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
@keyframes mbmRing{ 0%{ opacity:.5; transform:scale(.6) } 70%{ opacity:0; transform:scale(2) } 100%{ opacity:0; transform:scale(2) } }
@media (max-width:640px){ .mbm-acupoints{ display:none; } }

/* ============ Reduced motion: no shimmer/pulse, instant reveal ============ */
@media (prefers-reduced-motion: reduce){
  #mbm-skel{ animation:mbmSkelAutohide .01s ease .2s forwards; transition:none; }
  .mbm-spine,.mbm-vert,.mbm-relief,.skel-bar,.skel-bar.btn,.mbm-pt .ring,
  .mbm-acupoints .apt-dot,.mbm-acupoints .apt-dot::after{ animation:none !important; }
  .mbm-spine{ stroke-dashoffset:0 } .mbm-vert{ opacity:1 }
}

/* ============ Anatomy hero — layered-anatomy bg + glass service cards (2026-06-21) ============
   Replaces the old spa-photo hero + floating acupoint orbs. Body + glowing trigger points are
   baked into themed hero images (light/dark) swapped by the site's existing [data-theme] toggle;
   the headline + glass cards are real HTML overlaid on top. */
.hero.hero--anatomy{
  text-align:left;
  /* push the centered figure right so it sits mid-gap between the copy and the cards;
     the left overshoot gap hides under the solid part of the ::before scrim */
  background-position:calc(100% + 205px) center; background-size:cover;
  background-image:url('/img/hero-anatomy-light2.jpg?c=3');
  background-image:image-set(url('/img/hero-anatomy-light2.webp?c=3') type('image/webp'),url('/img/hero-anatomy-light2.jpg?c=3') type('image/jpeg'));
  color:var(--title-text,#1D2023);
}
:root[data-theme="dark"] .hero.hero--anatomy{
  background-image:url('/img/hero-anatomy-dark.jpg?c=3');
  background-image:image-set(url('/img/hero-anatomy-dark.webp?c=3') type('image/webp'),url('/img/hero-anatomy-dark.jpg?c=3') type('image/jpeg'));
  color:#fff;
}
/* left scrim for headline legibility — uses the themed bg colour so it works in both modes */
.hero.hero--anatomy::before{ background:linear-gradient(90deg,var(--cream-bg) 0%,var(--cream-bg) 34%,rgba(0,0,0,0) 68%); opacity:.94; }
:root[data-theme="dark"] .hero.hero--anatomy::before{ background:linear-gradient(90deg,var(--cream-bg) 0%,var(--cream-bg) 34%,rgba(0,0,0,0) 68%); opacity:.94; }
:root[data-theme="dark"] .hero.hero--anatomy::after{ background:none; }

.hero--anatomy .hero-grid{
  position:relative; z-index:2; width:94%; max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:center;
}
.hero.hero--anatomy .hero-copy{ max-width:560px; }
.hero.hero--anatomy h1{ color:inherit; margin-bottom:18px; font-size:clamp(34px,4.6vw,58px); line-height:1.08; }
.hero.hero--anatomy .hero-tagline{ color:inherit; opacity:.95; margin-bottom:26px; max-width:25em; text-shadow:none; }
.hero--anatomy .hero-actions{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.hero--anatomy .hero-3d-link{ font-weight:700; color:var(--rust); text-decoration:none; border-bottom:2px solid transparent; transition:border-color .2s; }
.hero--anatomy .hero-3d-link:hover{ border-bottom-color:var(--rust); }

.hero-cards{ display:flex; flex-direction:column; gap:14px; }
.hero-card{
  display:flex; align-items:flex-start; gap:14px; padding:15px 17px; border-radius:16px;
  background:rgba(255,255,255,.55); border:1px solid rgba(155,68,13,.16);
  box-shadow:0 8px 30px rgba(40,22,8,.10);
  -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
  /* clickable: rendered as <button> that opens an info popup */
  font:inherit; color:inherit; text-align:left; width:100%; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hero-card:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(40,22,8,.17); border-color:rgba(155,68,13,.32); }
.hero-card:focus-visible{ outline:2px solid var(--rust,#9b440d); outline-offset:2px; }
.hero-card > div{ flex:1; min-width:0; }
.hero-card::after{ content:"\203A"; flex:none; align-self:center; margin-left:4px; font-size:22px; line-height:1; color:var(--rust,#9b440d); opacity:.5; }
.hero-card .hero-card-soon{ display:inline-block; margin-left:6px; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--rust,#9b440d); padding:2px 7px; border-radius:999px; vertical-align:middle; }
:root[data-theme="dark"] .hero-card{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); box-shadow:0 8px 30px rgba(0,0,0,.42); }
.hero-card-ico{ flex:none; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(224,36,52,.12); color:#bd1b2b; }
:root[data-theme="dark"] .hero-card-ico{ background:rgba(236,111,35,.18); color:#f0a24e; }
.hero-card-ico svg{ width:22px; height:22px; }
.hero-card h3{ margin:0 0 2px; font-size:16.5px; color:var(--title-text,#1D2023); }
:root[data-theme="dark"] .hero-card h3{ color:#fff; }
.hero-card p{ margin:0; font-size:13px; line-height:1.42; color:var(--body-text,#50555C); }
:root[data-theme="dark"] .hero-card p{ color:#c9ced6; }

/* phones + small tablets: show the FULL anatomy image as a top band (model always visible in
   BOTH themes), with three compact service cards on each side of the body. The center column is
   intentionally reserved so the cards never sit on top of the model. Band height ≈ width *
   1071/1920 ≈ 56vw. */
/* ≤900px phones/tablets AND 901–1024px PORTRAIT tablets (e.g. 980px iPad-class): a tall,
   narrow hero box made cover+center-right crop the centred figure off-screen, so the owner
   saw only the cream margin. Same band treatment keeps the model fully visible there too. */
@media (max-width:900px), (min-width:901px) and (max-width:1024px) and (orientation:portrait){
  .hero.hero--anatomy{
    margin-top:0; padding-top:0; min-height:auto; display:block;
    background-color:var(--cream-bg);
    background-size:contain; background-position:top center; background-repeat:no-repeat;
  }
  .hero.hero--anatomy::before,
  :root[data-theme="dark"] .hero.hero--anatomy::before,
  :root[data-theme="dark"] .hero.hero--anatomy::after{ background:none; opacity:0; }
  .hero--anatomy .hero-grid{
    --hero-band:calc(56vw + 4px);
    grid-template-columns:1fr;
    grid-template-areas:"cards" "copy";
    grid-template-rows:var(--hero-band) auto;
    gap:18px;
    padding:0 0 32px;
  }
  .hero.hero--anatomy .hero-copy{ max-width:none; }
  .hero--anatomy .hero-copy{ grid-area:copy; }
  .hero-cards{
    grid-area:cards;
    align-self:stretch;
    display:grid;
    grid-template-columns:minmax(82px,.78fr) minmax(130px,1.45fr) minmax(82px,.78fr);
    grid-template-rows:repeat(3,minmax(0,1fr));
    gap:7px 8px;
    padding:10px 0 8px;
    overflow:visible;
  }
  .hero-card{
    min-width:0;
    min-height:0;
    width:100%;
    height:100%;
    align-items:center;
    gap:7px;
    padding:8px 7px;
    border-radius:11px;
    box-shadow:0 6px 18px rgba(40,22,8,.12);
  }
  .hero-card:nth-child(1){ grid-column:1; grid-row:1; }
  .hero-card:nth-child(3){ grid-column:1; grid-row:2; }
  .hero-card:nth-child(5){ grid-column:1; grid-row:3; }
  .hero-card:nth-child(2){ grid-column:3; grid-row:1; }
  .hero-card:nth-child(4){ grid-column:3; grid-row:2; }
  .hero-card:nth-child(6){ grid-column:3; grid-row:3; }
  .hero-card::after{ display:none; }
  .hero-card-ico{ width:28px; height:28px; border-radius:8px; }
  .hero-card-ico svg{ width:17px; height:17px; }
  .hero-card h3{
    margin:0;
    font-size:12.5px;
    line-height:1.08;
    overflow-wrap:anywhere;
  }
  .hero-card p{ display:none; }
  .hero-card .hero-card-soon{
    margin-left:0;
    margin-top:2px;
    padding:1px 5px;
    font-size:8px;
    line-height:1.2;
  }
}
@media (max-width:480px){
  .hero--anatomy .hero-grid{ --hero-band:calc(56vw + 10px); width:96%; }
  .hero-cards{
    grid-template-columns:minmax(76px,.72fr) minmax(142px,1.55fr) minmax(76px,.72fr);
    gap:6px;
    padding:8px 0 7px;
  }
  .hero-card{ gap:5px; padding:7px 5px; border-radius:10px; }
  .hero-card{ flex-direction:column; align-items:flex-start; justify-content:center; }
  .hero-card > div{ width:100%; }
  .hero-card-ico{ width:25px; height:25px; border-radius:7px; }
  .hero-card-ico svg{ width:15px; height:15px; }
  .hero-card h3{ font-size:11px; }
  .hero-card:nth-child(1) h3,
  .hero-card:nth-child(2) h3,
  .hero-card:nth-child(6) h3{ font-size:0; }
  .hero-card:nth-child(1) h3::before,
  .hero-card:nth-child(2) h3::before,
  .hero-card:nth-child(6) h3::before{
    display:block;
    font-size:11px;
    line-height:1.08;
  }
  .hero-card:nth-child(1) h3::before{ content:"Deep Tissue"; }
  .hero-card:nth-child(2) h3::before{ content:"Myo Align"; }
  .hero-card:nth-child(6) h3::before{ content:"Sports Recovery"; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIDEO HERO — personal-brand hero (feedback from Mark Kashef, 2026-07-20).
   Self-contained: the legacy .hero--anatomy rules above stay intact/dormant so
   the anatomy hero can be reverted by swapping the section class back.
   ══════════════════════════════════════════════════════════════════════════ */
.hero.hero--video{ text-align:left; background:var(--cream-bg); color:var(--title-text,#1D2023);
  min-height:auto; margin-top:0; padding:clamp(28px,5vw,64px) 0; }
:root[data-theme="dark"] .hero.hero--video{ color:#fff; background:var(--cream-bg); }
/* neutralise the base photo-hero scrims — this hero sits on a solid cream panel */
.hero.hero--video::before,
.hero.hero--video::after,
:root[data-theme="dark"] .hero.hero--video::before,
:root[data-theme="dark"] .hero.hero--video::after{ display:none; background:none; }
.hero.hero--video h1{ text-shadow:none; }
.hero.hero--video .hero-tagline{ font-style:italic; }
.hero--video .hero-grid{ position:relative; z-index:2; width:94%; max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,52px); align-items:center; }
.hero.hero--video .hero-copy{ max-width:560px; }
.hero.hero--video h1{ color:inherit; margin-bottom:18px; font-size:clamp(34px,4.6vw,58px); line-height:1.08; }
.hero--video h1 .hl-pain{ text-decoration:underline; text-decoration-style:double;
  text-decoration-color:var(--rust,#e02434); text-decoration-thickness:2px; text-underline-offset:5px; }
.hero.hero--video .hero-tagline{ color:inherit; opacity:.95; margin-bottom:22px; max-width:26em; text-shadow:none; }
.hero--video .hero-actions{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.hero--video .hero-sublinks{ margin-top:10px; font-size:14.5px; font-weight:700;
  display:flex; flex-wrap:wrap; align-items:center; }
.hero--video .hero-sublinks a{ color:var(--rust-strong,#bd1b2b); text-decoration:none;
  border-bottom:2px solid transparent; transition:border-color .2s;
  display:inline-flex; align-items:center; min-height:44px; }
.hero--video .hero-sublinks a:hover,
.hero--video .hero-sublinks a:focus-visible{ border-bottom-color:var(--rust,#e02434); }
.hero--video .hero-sublink-why{ font-weight:400; color:var(--muted,#6A6051); margin-left:5px; }
.hero--video .hero-sublinks-dot{ margin:0 10px; opacity:.5; }
@media (max-width:480px){ .hero--video .hero-sublinks{ flex-direction:column; align-items:flex-start; }
  .hero--video .hero-sublinks-dot{ display:none; } }
.hero--video .hero-media{ position:relative; }
.hero--video .hero-vid{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:20px; box-shadow:0 22px 55px rgba(60,30,20,.22); background:#1a1410; }
@media (max-width:820px){
  .hero--video .hero-grid{ grid-template-columns:1fr; gap:22px; }
  /* Video sits BELOW the copy on phones: with it first, the Book button landed under
     the fold at 375x667 and the price line under .mob-bar at 390x844 (2026-09-13). */
  .hero--video .hero-vid{ aspect-ratio:16/9; }
  .hero--video .hero-copy{ max-width:none; }
}

/* "What I Do" service cards — relocated out of the hero, own class so the
   legacy .hero-card mobile grid rules can't reach them. */
.services-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:1040px; margin:0 auto; }
.svc-card{ display:flex; align-items:flex-start; gap:14px; padding:18px; border-radius:16px;
  background:var(--card-bg,#fff); border:1px solid var(--cream-border,#e3d8c8);
  box-shadow:var(--shadow-card,0 8px 30px rgba(40,22,8,.08));
  font:inherit; color:inherit; text-align:left; width:100%; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.svc-card:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(40,22,8,.15); border-color:rgba(155,68,13,.32); }
.svc-card:focus-visible{ outline:2px solid var(--rust,#9b440d); outline-offset:2px; }
.svc-card > div{ flex:1; min-width:0; }
.svc-card::after{ content:"\203A"; flex:none; align-self:center; margin-left:4px; font-size:22px; line-height:1; color:var(--rust,#9b440d); opacity:.5; }
:root[data-theme="dark"] .svc-card{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); box-shadow:0 8px 30px rgba(0,0,0,.42); }
.svc-card h3{ margin:0 0 3px; font-size:16.5px; color:var(--title-text,#1D2023); }
:root[data-theme="dark"] .svc-card h3{ color:#fff; }
.svc-card p{ margin:0; font-size:13.5px; line-height:1.45; color:var(--body-text,#50555C); }
:root[data-theme="dark"] .svc-card p{ color:#c9ced6; }
@media (max-width:860px){ .services-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){
  .services-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
  .svc-card{ flex-direction:column; align-items:center; text-align:center; gap:9px; padding:13px 8px; }
  .svc-card > div{ flex:none; }
  .svc-card p{ display:none; }
  .svc-card::after{ display:none; }
  .svc-card h3{ font-size:12.5px; line-height:1.25; margin:0; }
  /* The pill styling above is scoped to .hero-card, so inside a .svc-card the badge
     rendered as plain text — the tile read "Thermal Imaging Soon". Restyle it here. */
  .svc-card .hero-card-soon{ display:block; width:fit-content; margin:4px auto 0; font-size:9px; font-weight:800;
    letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--rust,#9b440d);
    padding:2px 6px; border-radius:999px; }
}