/* ==========================================================================
   Massage therapy page.
   A deliberate visual replica of the live GHL page, section for section:
   the crimson-washed photo hero, the centred crimson eyebrow and heading,
   the four white option cards, the solid crimson conditions band, the
   two-by-two reasons block beside the therapist photo, the outlined FAQ
   accordion and the cream card floating on a washed photo.
   Scoped to .page-edmonton-massage-therapy so it cannot leak.
   ASCII only.
   ========================================================================== */

.page-edmonton-massage-therapy{--m-cream:#F5F5F0}

/* ---------- hero: photo strip under a crimson wash ---------- */
.m-hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(430px,52vw,700px);display:flex;align-items:center}
.m-hero__media{position:absolute;inset:0;z-index:-2}
.m-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.m-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(196,30,58,.28) 0%,rgba(196,30,58,.55) 55%,rgba(255,255,255,.88) 100%);
}
.m-hero__inner{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto;padding-block:clamp(48px,7vw,96px)}
.m-hero h1{color:#fff;max-width:16ch;text-shadow:0 2px 24px rgba(120,10,28,.36)}
.m-hero p{color:#fff;max-width:62ch;margin-top:var(--sp-3);font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.66;text-shadow:0 1px 14px rgba(120,10,28,.32)}
.m-hero .btn{margin-top:var(--sp-4)}

/* ---------- centred section head ---------- */
.m-head{text-align:center;max-width:74ch;margin-inline:auto;margin-bottom:clamp(30px,3.6vw,54px)}
.m-eyebrow{
  font-family:var(--body);font-weight:700;color:var(--crimson);
  font-size:.92rem;letter-spacing:.22em;margin-bottom:var(--sp-2);
}
.m-head h2{color:var(--crimson)}
.m-head p{margin-top:var(--sp-2);color:var(--ink-soft)}

/* ---------- four option cards ---------- */
.m-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,26px);align-items:stretch}
.m-card{
  background:var(--paper);border:1px solid #E8E2E3;border-radius:2px;
  padding:clamp(24px,2.2vw,34px);display:flex;flex-direction:column;gap:14px;
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease);
}
.m-card:hover,.m-card.fx{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--crimson)}
.m-card h3{color:var(--crimson);font-family:var(--body);font-weight:700;font-size:1.16rem;line-height:1.3;transition:color var(--t-fast) var(--ease)}
.m-card:hover h3,.m-card.fx h3{color:var(--crimson-deep)}
.m-card p{color:var(--ink-soft);font-size:.985rem;line-height:1.62}

/* ---------- solid crimson conditions band ---------- */
.m-band{background:var(--crimson);color:#fff;padding-block:clamp(52px,6.4vw,90px)}
.m-band h2{color:#fff;text-align:center}
.m-band__sub{
  text-align:center;color:#fff;max-width:88ch;margin:var(--sp-3) auto 0;
  font-weight:700;letter-spacing:.09em;line-height:1.9;font-size:clamp(.92rem,1.05vw,1.02rem);
}
.m-cond{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(32px,3.6vw,50px)}
.m-cond span{
  display:block;text-align:center;padding:15px 14px;border:1px solid rgba(255,255,255,.42);
  border-radius:2px;font-weight:600;font-size:.98rem;color:#fff;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.m-cond span:hover,.m-cond span.fx{background:#fff;color:var(--crimson);border-color:#fff;transform:translateY(-3px)}

/* ---------- reasons, two by two beside the therapist photo ---------- */
.m-why{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,4.4vw,70px);align-items:start}
.m-why h2{color:var(--crimson)}
.m-why__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.6vw,38px);margin-top:clamp(26px,3vw,40px)}
.m-why__item h3{color:var(--crimson);font-family:var(--body);font-weight:700;font-size:1.1rem;line-height:1.32;margin-bottom:10px;transition:color var(--t-fast) var(--ease)}
.m-why__item:hover h3,.m-why__item.fx h3{color:var(--crimson-deep)}
.m-why__item p{color:var(--ink-soft);font-size:.97rem;line-height:1.62}
.m-why__media{border:1px solid #E8E2E3;padding:10px;background:var(--paper)}
.m-why__media img{width:100%;height:auto;display:block}

/* ---------- FAQ, outlined accordion ---------- */
.m-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.5vw,20px);align-items:start}
.m-faq__item{border:1.5px solid var(--crimson);border-radius:4px;background:var(--paper);overflow:hidden}
.m-faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;background:none;border:0;text-align:left;
  font-family:var(--body);font-weight:700;font-size:1.02rem;line-height:1.36;color:var(--ink);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.m-faq__q:hover,.m-faq__item.fx .m-faq__q{color:var(--crimson);background:var(--crimson-wash)}
.m-faq__q svg{width:16px;height:16px;flex:none;color:var(--crimson);transition:transform var(--t-fast) var(--ease)}
.m-faq__q[aria-expanded="true"] svg{transform:rotate(180deg)}
.m-faq__a{padding:0 22px 20px;color:var(--ink-soft);font-size:.97rem;line-height:1.65;margin:0}
.m-faq__a[hidden]{display:none}

/* ---------- closing card on a washed photo ---------- */
.m-close{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(48px,6vw,86px)}
.m-close__media{position:absolute;inset:0;z-index:-2}
.m-close__media img{width:100%;height:100%;object-fit:cover}
.m-close::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(196,30,58,.62),rgba(196,30,58,.52))}
.m-close__card{
  background:var(--m-cream);max-width:1000px;margin-inline:auto;
  padding:clamp(30px,4vw,62px) clamp(24px,4vw,62px);
}
.m-close__card h2{color:var(--crimson)}
.m-close__card p{color:var(--ink-soft);margin-top:var(--sp-3);line-height:1.72}
.m-close__card .btn{margin-top:var(--sp-4)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .m-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-cond{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .m-why{grid-template-columns:1fr}
  .m-faq{grid-template-columns:1fr}
}
@media (max-width:720px){
  .m-cards{grid-template-columns:1fr}
  .m-cond{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-why__grid{grid-template-columns:1fr}
  .m-hero{min-height:auto}
}

/* Partner logo block. The live page presents the KARMA Therapeutics mark on a
   plain ground at its natural size, not as a cropped photographic frame, so it
   is contained rather than stretched to the column. */
.m-partner__media{display:flex;align-items:center;justify-content:center}
.m-partner__media img{width:100%;max-width:430px;height:auto;border-radius:var(--r-md);display:block}
@media (max-width:900px){ .m-partner__media{order:-1;margin-bottom:var(--sp-3)} }