/* massage.css — /massage-therapy/ only. Loaded via $page['css'] AFTER site.css
 * (see the contract note at the top of _inc/head.php).
 *
 * Ported from _source/katie-massage-partner.html, with three deliberate
 * changes, all forced by the fact that this page now wears Kramer's chrome
 * instead of being a standalone document:
 *
 *  1. EVERYTHING IS SCOPED UNDER .mt AND PREFIXED mt-. The comp used bare
 *     .hero, .btn, .lead, .eyebrow, .visit, .cta, .actions and a bare <footer>
 *     — every one of which already means something in site.css. Unprefixed,
 *     this file would restyle Kramer's header, footer and buttons on this page
 *     and nowhere else, which is the worst kind of bug to find later. The warm
 *     tokens are declared on .mt, not :root, for the same reason: they stop at
 *     the wrapper, so the blue header above it and the blue footer below it are
 *     untouched.
 *  2. NO prefers-color-scheme BLOCK. The comp shipped a full dark palette;
 *     Kramer's chrome is light-only, so honouring it would have left the page
 *     half-dark between a white header and a blue footer. Light mode only.
 *  3. .wrap IS REUSED FROM site.css, not redefined. Both are
 *     min(1180px, 100% - 44px), so the page's gutters line up with the header's
 *     and the footer's at every width. Redefining it is how that drifts.
 *
 * The comp's color-mix() values are written out as literal rgba() here — the
 * palette is fixed, so the indirection bought nothing and cost legibility.
 *
 * The palette is intentionally NOT Kramer's blue/teal. This is an independent
 * practitioner who rents space at 815 Broadway, and the warm earth/sage shift
 * is what tells a visitor they have moved from "our services" to "our
 * partner". Kramer's colors are locked (see CLAUDE.md); these are Katie's.
 */

.mt {
  /* ---- Katie's palette (warm earth + sage) ---- */
  --mt-bg: #faf8f5;
  --mt-surface: #ffffff;
  --mt-card: #f5f3ef;
  --mt-ink: #2e251f;
  --mt-muted: #7e7167;
  --mt-primary: #a57a50;
  --mt-secondary: #ba855e;
  --mt-accent: #cdbca2;
  --mt-sage: #81a791;
  --mt-sage-soft: rgba(129, 167, 145, .18);
  --mt-line: #e7e2da;
  --mt-on: #faf8f5;
  --mt-hero-ink: #ffffff;
  --mt-hero-muted: rgba(255, 255, 255, .90);
  --mt-sh-sm: 0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .10);
  --mt-sh-lg: 0 20px 25px -5px rgb(0 0 0 / .10), 0 8px 10px -6px rgb(0 0 0 / .10);
  --mt-serif: 'Playfair Display', Georgia, serif;
  --mt-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

  background: var(--mt-bg);
  color: var(--mt-ink);
  font-family: var(--mt-sans);
  font-size: 16px;
  line-height: 1.72;
}

.mt h1,
.mt h2,
.mt h3 {
  margin: 0;
  color: var(--mt-ink);
  font-family: var(--mt-serif);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
}

/* ---- Hero ------------------------------------------------------------- */
.mt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(760px, 86vh);
  display: flex;
  align-items: center;
  padding: clamp(64px, 8vw, 110px) 0;
  color: var(--mt-hero-ink);
  background:
    linear-gradient(to bottom, #00000059, #00000080, #00000073),
    url('/assets/img/katie-deep-tissue-massage-alexandria-mn.jpg') center 42% / cover no-repeat;
}
.mt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .72fr);
  gap: clamp(48px, 8vw, 108px);
  align-items: center;
}
.mt-eyebrow,
.mt-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--mt-secondary);
  font-family: var(--mt-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .19em;
  line-height: 1.4;
  text-transform: uppercase;
}
.mt-eyebrow::before,
.mt-label::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
}
.mt-hero .mt-eyebrow {
  margin-top: 13px;
  color: rgba(255, 255, 255, .70);
}
.mt-brand-name {
  max-width: 690px;
  margin: 0;
  color: #ffffff;
  font-family: var(--mt-serif);
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.015em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .48);
}
.mt-brand-name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .42);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color .2s ease;
}
.mt-brand-name a:hover {
  text-decoration-color: #ffffff;
}
.mt-hero h1 {
  max-width: 760px;
  margin-top: 20px;
  /* The comp topped out at 6.25rem on a page with no chrome above it. Under a
     76px sticky header this hero also has to hold the brand name, the eyebrow,
     the lead and the button, so the ceiling comes down a step. */
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.mt-hero h1 em {
  color: var(--mt-hero-ink);
  font-style: normal;
}
.mt-lead {
  max-width: 660px;
  margin: 25px 0 0;
  color: var(--mt-hero-muted);
  font-size: clamp(1.08rem, 1.9vw, 1.3rem);
  font-weight: 300;
  line-height: 1.65;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.mt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ---- Buttons (Katie's, not .btn) -------------------------------------- */
.mt-btn {
  display: inline-flex;
  min-height: 51px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--mt-sans);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--mt-sh-sm);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.mt-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--mt-sh-lg);
}
.mt-btn-primary {
  background: var(--mt-primary);
  color: var(--mt-on);
}
.mt-btn-primary:hover {
  background: #9a714a;
}
/* On a photo, the filled earth button loses contrast — the comp flips it to
   white there, and so does this. */
.mt-hero .mt-btn-primary,
.mt-cta .mt-btn {
  border-color: #e5e7eb;
  background: #ffffff;
  color: #1f2937;
}
.mt-hero .mt-btn-primary:hover,
.mt-cta .mt-btn:hover {
  background: #f9fafb;
}

/* ---- Hero portrait ---------------------------------------------------- */
.mt-portrait {
  position: relative;
  width: min(100%, 420px);
  justify-self: end;
}
.mt-portrait::before {
  content: "";
  position: absolute;
  inset: 24px -22px -22px 24px;
  border-radius: 22px;
  background: var(--mt-sage-soft);
  z-index: -1;
}
.mt-portrait img {
  width: 100%;
  /* height:auto is load-bearing. The <img> carries width/height attributes for
     CLS, and those map to CSS presentational hints — without this the hint's
     height:1400px wins over aspect-ratio and the portrait renders 1400px tall. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 22px;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}
.mt-portrait-note {
  position: absolute;
  right: -18px;
  bottom: 26px;
  width: 205px;
  padding: 16px 18px;
  border-radius: 15px;
  background: var(--mt-surface);
  color: var(--mt-ink);
  box-shadow: var(--mt-sh-lg);
}
.mt-portrait-note strong {
  display: block;
  font-family: var(--mt-serif);
  font-size: 1.28rem;
  line-height: 1.25;
}
.mt-portrait-note span {
  display: block;
  margin-top: 4px;
  color: var(--mt-muted);
  font-size: .84rem;
  line-height: 1.4;
}

/* ---- Intro ------------------------------------------------------------ */
.mt-intro {
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--mt-bg);
}
.mt-intro-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(44px, 8vw, 116px);
  align-items: center;
}
.mt-intro h2 {
  margin-top: 14px;
  font-size: clamp(2.35rem, 4.8vw, 4.35rem);
}
.mt-intro-copy {
  font-size: 1.08rem;
}
.mt-intro-copy p {
  margin: 0;
  color: var(--mt-muted);
}
.mt-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 32px;
}
.mt-proof div {
  min-height: 118px;
  padding: 20px;
  border: 1px solid var(--mt-line);
  border-radius: 15px;
  background: var(--mt-surface);
  box-shadow: var(--mt-sh-sm);
}
.mt-proof strong {
  display: block;
  color: var(--mt-primary);
  font-family: var(--mt-serif);
  font-size: 1.48rem;
  line-height: 1.2;
}
.mt-proof span {
  display: block;
  margin-top: 7px;
  color: var(--mt-muted);
  font-size: .88rem;
}

/* ---- Katie's approach ------------------------------------------------- */
.mt-approach {
  padding: clamp(54px, 6.5vw, 80px) 0;
  background: var(--mt-card);
}
.mt-approach-inner {
  max-width: 1040px;
}
.mt-approach > .wrap > .mt-label {
  display: flex;
  width: fit-content;
  margin: 0 auto;
}
.mt-approach-copy {
  margin-top: 34px;
}
.mt-quote {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 54px);
  border: 1px solid rgba(186, 133, 94, .30);
  border-radius: 20px;
  background: var(--mt-surface);
  box-shadow: var(--mt-sh-sm);
  text-align: center;
}
.mt-quote::before {
  content: "\201C";
  position: absolute;
  top: -30px;
  left: 28px;
  color: var(--mt-sage-soft);
  font-family: var(--mt-serif);
  font-size: 7rem;
  line-height: 1;
}
.mt-quote p {
  position: relative;
  margin: 0;
  color: var(--mt-ink);
  font-family: var(--mt-serif);
  font-size: clamp(1.5rem, 3vw, 2.45rem);
  line-height: 1.42;
}

/* "A natural complement" — the one filled card on the page */
.mt-complement {
  max-width: 900px;
  margin: 40px auto 0;
  padding: clamp(32px, 5vw, 52px);
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--mt-secondary);
  color: var(--mt-on);
  box-shadow: var(--mt-sh-sm);
}
.mt-complement .mt-label {
  color: rgba(250, 248, 245, .72);
}
.mt-complement h2 {
  margin-top: 16px;
  color: var(--mt-on);
  font-size: clamp(2.15rem, 3.6vw, 3.45rem);
}
.mt-complement p {
  margin: 14px 0 0;
  color: rgba(250, 248, 245, .78);
}
.mt-reasons {
  list-style: none;
  margin: 29px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.mt-reasons li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
}
.mt-reasons svg {
  width: 30px;
  height: 30px;
  margin-top: -1px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(250, 248, 245, .14);
  color: var(--mt-on);
}

/* ---- Services --------------------------------------------------------- */
.mt-services {
  padding: clamp(44px, 5.5vw, 68px) 0 clamp(72px, 9vw, 120px);
  background: var(--mt-bg);
}
.mt-enhance {
  max-width: 800px;
  margin: 0 auto 42px;
  padding: 30px 36px;
  border: 2px solid var(--mt-primary);
  border-radius: 16px;
  background: var(--mt-surface);
  color: var(--mt-ink);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.62;
  text-align: center;
  box-shadow: var(--mt-sh-lg);
}
.mt-enhance strong {
  color: var(--mt-primary);
}
.mt-thai-expl h3 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  text-align: center;
}
.mt-thai-expl h3::after {
  content: "";
  display: block;
  width: 68px;
  height: 2px;
  margin: 22px auto 0;
  background: var(--mt-primary);
}
.mt-thai-expl p {
  max-width: 800px;
  margin: 24px auto 0;
  color: var(--mt-ink);
  font-size: 1.08rem;
  text-align: center;
}
.mt-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 20px;
}
.mt-service {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(186, 133, 94, .30);
  border-radius: 18px;
  background: var(--mt-surface);
  box-shadow: var(--mt-sh-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mt-service:hover {
  transform: translateY(-5px);
  box-shadow: var(--mt-sh-lg);
}
.mt-service img {
  width: 100%;
  height: 245px;
  object-fit: cover;
  transition: transform .5s ease;
}
.mt-service:hover img {
  transform: scale(1.035);
}
.mt-service-body {
  padding: 27px 27px 30px;
}
.mt-service h3 {
  font-size: 1.85rem;
}
.mt-service p {
  margin: 12px 0 0;
  color: var(--mt-muted);
}
.mt-service-tag {
  display: block;
  margin-top: 20px;
  color: var(--mt-primary);
  font-size: .86rem;
  font-weight: 700;
}
/* the Thai specialty card: wide, badged, ringed */
.mt-service-thai {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  margin-top: 30px;
  border: 2px solid rgba(186, 133, 94, .40);
  box-shadow: 0 0 0 2px rgba(186, 133, 94, .10), var(--mt-sh-sm);
}
.mt-service-thai::before {
  content: "Katie\2019s specialty";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--mt-sage);
  color: #ffffff;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: var(--mt-sh-sm);
}
.mt-service-thai img {
  height: 100%;
  min-height: 340px;
}
.mt-service-thai .mt-service-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 46px);
}
.mt-booking {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--mt-line);
  text-align: center;
}
.mt-booking p {
  margin: 0;
  color: var(--mt-ink);
  font-family: var(--mt-serif);
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  font-weight: 600;
}
.mt-booking .mt-btn {
  min-width: 170px;
}

/* ---- Plan your visit (Katie's hours + Katie's phone) ------------------ */
.mt-visit-sec {
  padding: clamp(72px, 9vw, 116px) 0;
  background: var(--mt-card);
}
.mt-visit {
  padding: clamp(32px, 5vw, 52px);
  border: 1px solid var(--mt-line);
  border-radius: 20px;
  background: var(--mt-surface);
  box-shadow: var(--mt-sh-sm);
}
.mt-visit h2 {
  margin-top: 14px;
  font-size: clamp(2.15rem, 3.6vw, 3.45rem);
}
.mt-visit dl {
  margin: 30px 0 0;
}
.mt-visit-row {
  padding: 22px 0;
  border-bottom: 1px solid var(--mt-line);
}
.mt-visit-row:first-child {
  padding-top: 4px;
}
.mt-visit-row:last-child {
  padding-bottom: 2px;
  border-bottom: none;
}
.mt-visit dt {
  color: var(--mt-secondary);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.mt-visit dd {
  margin: 9px 0 0;
  font-weight: 600;
  line-height: 1.55;
}
.mt-visit a {
  color: var(--mt-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mt-visit a:hover {
  color: var(--mt-ink);
}
.mt-visit-call a {
  font-size: 1.18rem;
  font-weight: 700;
}
.mt-hours-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px;
  align-items: baseline;
  padding: 11px 0;
}
.mt-hours-entry:first-child {
  padding-top: 2px;
}
.mt-hours-entry:last-child {
  padding-bottom: 0;
}
.mt-hours-entry + .mt-hours-entry {
  border-top: 1px solid rgba(231, 226, 218, .62);
}
.mt-hours-days {
  font-weight: 700;
  white-space: nowrap;
}
.mt-hours-time {
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mt-hours-time .mt-mer {
  margin-left: .22em;
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .05em;
}
.mt-hours-note {
  grid-column: 1;
  justify-self: start;
  margin-top: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--mt-sage-soft);
  color: var(--mt-ink);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ---- Closing CTA ------------------------------------------------------ */
.mt-cta {
  padding: 0 0 clamp(72px, 9vw, 116px);
  background: var(--mt-card);
}
.mt-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 34px;
  align-items: center;
  padding: clamp(38px, 6vw, 68px);
  border-radius: 22px;
  color: #ffffff;
  /* The comp used Katie's headshot here. It is a tight portrait, and this band
     is ~3:1 — at `cover` it crops to a close-up of her mouth and nose behind
     the heading. The Thai room shot survives the crop (hands, candles, mat),
     and it keeps her face to the hero portrait, which is framed for it. */
  background:
    linear-gradient(to bottom, #00000059, #00000080, #00000073),
    url('/assets/img/katie-thai-bodywork-alexandria-mn.jpg') center 42% / cover no-repeat;
  box-shadow: var(--mt-sh-lg);
}
.mt-cta-inner h2 {
  margin: 0;
  max-width: 720px;
  color: #ffffff;
  font-size: clamp(2.3rem, 4vw, 3.85rem);
}
.mt-cta-inner p {
  margin: 15px 0 0;
  color: rgba(255, 255, 255, .80);
}
.mt-closing {
  position: relative;
  max-width: 900px;
  margin: 40px auto 0;
  padding: clamp(30px, 5vw, 54px);
  border: 1px solid rgba(186, 133, 94, .30);
  border-radius: 20px;
  background: var(--mt-surface);
  box-shadow: var(--mt-sh-sm);
  text-align: center;
}
.mt-closing::before {
  content: "\201C";
  position: absolute;
  top: -30px;
  left: 28px;
  color: var(--mt-sage-soft);
  font-family: var(--mt-serif);
  font-size: 7rem;
  line-height: 1;
}
.mt-closing p {
  position: relative;
  margin: 0;
  color: var(--mt-ink);
  font-family: var(--mt-serif);
  font-size: clamp(1.5rem, 3vw, 2.45rem);
  line-height: 1.42;
}

/* ---- Katie's own details block ----------------------------------------
 * This is what the comp's standalone <footer> became. Kramer's footer ships
 * below it (it is the site's footer and carries Kramer's NAP); Katie's name,
 * address and text line belong to her, so they stay in the page, inside .mt,
 * clearly hers. */
.mt-partner {
  padding: 34px 0 42px;
  background: var(--mt-ink);
  color: rgba(250, 248, 245, .70);
  font-size: .9rem;
}
.mt-partner-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.mt-partner a {
  color: rgba(250, 248, 245, .80);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mt-partner a:hover {
  color: #ffffff;
}
.mt-last-resort {
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(250, 248, 245, .16);
  color: rgba(250, 248, 245, .62);
  font-size: .84rem;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 960px) {
  .mt-hero {
    min-height: auto;
  }
  .mt-hero-grid,
  .mt-intro-grid {
    grid-template-columns: 1fr;
  }
  .mt-portrait {
    justify-self: start;
    width: min(72vw, 470px);
    margin-top: 12px;
  }
  .mt-booking {
    flex-direction: column;
  }
  .mt-cta-inner {
    grid-template-columns: 1fr;
  }
  .mt-cta-inner .mt-btn {
    justify-self: start;
  }
}
@media (max-width: 640px) {
  .mt-hero {
    padding: 48px 0 66px;
    background-position: 58% center;
  }
  .mt-brand-name {
    font-size: clamp(1.55rem, 7.5vw, 2.15rem);
  }
  .mt-hero h1 {
    margin-top: 17px;
    font-size: clamp(2.3rem, 11vw, 3.4rem);
  }
  .mt-actions {
    display: grid;
  }
  .mt-btn {
    width: 100%;
  }
  .mt-portrait {
    width: calc(100% - 12px);
  }
  .mt-portrait::before {
    inset: 14px -12px -12px 14px;
  }
  .mt-portrait-note {
    right: -8px;
    bottom: 18px;
    width: 184px;
  }
  .mt-proof,
  .mt-service-grid {
    grid-template-columns: 1fr;
  }
  .mt-proof div {
    min-height: auto;
  }
  .mt-enhance {
    padding: 24px 22px;
    font-size: 1.12rem;
  }
  .mt-service-thai {
    grid-template-columns: 1fr;
  }
  .mt-service-thai img {
    height: 240px;
    min-height: 0;
  }
  .mt-service img {
    height: 230px;
  }
  .mt-hours-entry {
    column-gap: 12px;
  }
  .mt-partner-row {
    display: grid;
  }
}
@media (max-width: 380px) {
  .mt-hours-entry {
    grid-template-columns: 1fr;
  }
  .mt-hours-time {
    margin-top: 1px;
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mt-btn,
  .mt-service,
  .mt-service img {
    transition: none;
  }
}