/* ============================================================
   The Massage Guy — design system
   Extracted from the approved homepage (Home.dc.html).
   Oswald display / Arimo body · off-white canvas · gradient-blended
   color sections · natural photos · staggered scroll reveals.
   ============================================================ */

:root {
  --canvas: #F7F4F0;
  --ink: #1B1B1F;
  --blue: #0D6CA6;
  --sky: #9CD0F2;
  --maroon: #7B2D42;
  --maroon-dark: #692638;
  --maroon-deep: #5C2233;
  --rose: #C4788A;
  --footer-ink: #17181C;
  --photo-bg: #E8E1D8;
  --pad-x: clamp(20px, 5vw, 72px);
  --pad-y: clamp(72px, 9vw, 140px);
  --ease-unhurried: cubic-bezier(.22, 1, .36, 1);
}

html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink); }
body { font-family: Arimo, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--maroon); text-decoration: none; }
a:hover { color: var(--blue); }
::selection { background: var(--sky); color: var(--ink); }
img { max-width: 100%; display: block; }

/* ---------- type ---------- */
.eyebrow {
  margin: 0 0 clamp(14px, 2vw, 24px);
  font-family: Oswald, sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--maroon);
}
.eyebrow--blue { color: var(--blue); }
.eyebrow--sky { color: var(--sky); }
.eyebrow--rose { color: var(--rose); }
.eyebrow--faint { color: rgba(255,255,255,.5); }

.display-1 {
  margin: 0; font-family: Oswald, sans-serif; font-weight: 500;
  font-size: clamp(46px, 8.2vw, 128px); line-height: .98; letter-spacing: -.01em;
  text-transform: uppercase; max-width: 16ch; text-wrap: balance;
}
.display-2 {
  margin: 0; font-family: Oswald, sans-serif; font-weight: 500;
  font-size: clamp(40px, 5.6vw, 84px); line-height: 1; letter-spacing: -.005em; text-transform: uppercase;
}
.display-3 {
  margin: 0; font-family: Oswald, sans-serif; font-weight: 500;
  font-size: clamp(38px, 5vw, 76px); line-height: 1; text-transform: uppercase;
}
.display-4 {
  margin: 0; font-family: Oswald, sans-serif; font-weight: 500;
  font-size: clamp(36px, 4.6vw, 68px); line-height: 1.02; text-transform: uppercase; text-wrap: balance;
}
.lede { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.75; color: rgba(27,27,31,.82); }
.lede--ondark { color: rgba(255,255,255,.85); }
.body-copy { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.8; color: rgba(27,27,31,.82); }
.muted { color: rgba(27,27,31,.65); }

/* ---------- buttons (press micro-interaction: pressure is the theme) ---------- */
.btn {
  display: inline-block; background: var(--maroon); color: #ffffff;
  font-family: Oswald, sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; padding: 17px 32px;
  border-radius: 2px; transition: background .3s, transform .15s;
}
.btn:hover { background: var(--maroon-dark); color: #ffffff; }
.btn:active { transform: scale(.97) translateY(1px); }
.btn--small { font-size: 13px; padding: 14px 26px; }
.btn--large { font-size: 15px; font-weight: 600; padding: 20px 40px; }
.btn--light { background: var(--canvas); color: var(--maroon); }
.btn--light:hover { background: #ffffff; color: var(--maroon-dark); }
.btn--ghost {
  background: transparent; border: 1px solid rgba(27,27,31,.35); color: var(--ink);
  padding: 16px 32px; transition: border-color .3s, color .3s, transform .15s;
}
.btn--ghost:hover { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn--ghost-ondark { border-color: rgba(255,255,255,.45); color: #ffffff; }
.btn--ghost-ondark:hover { border-color: #ffffff; color: #ffffff; }
.link-underline {
  font-family: Oswald, sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--maroon);
  border-bottom: 2px solid var(--rose); padding-bottom: 4px;
}
.link-underline:hover { color: var(--blue); border-bottom-color: var(--blue); }

/* ---------- header ---------- */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px;
  padding: clamp(18px, 2.5vw, 28px) var(--pad-x); background: var(--canvas);
}
.site-header .brand {
  font-family: Oswald, sans-serif; font-weight: 600; font-size: 17px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink);
}
.site-header nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-left: auto;
  font-family: Oswald, sans-serif; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
}
.site-header nav a { color: var(--ink); }
.site-header nav a:hover { color: var(--maroon); }
.site-header nav a.nav-book {
  background: var(--maroon); color: #ffffff; padding: 12px 22px; border-radius: 2px;
  transition: background .3s, transform .15s;
}
.site-header nav a.nav-book:hover { background: var(--maroon-dark); color: #ffffff; }
.site-header nav a.nav-book:active { transform: scale(.97) translateY(1px); }

/* ---------- sections & gradient-blended bands ---------- */
.section { background: var(--canvas); padding: var(--pad-y) var(--pad-x); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.band--sky {
  background: linear-gradient(180deg, var(--canvas) 0px, var(--sky) 200px, var(--sky) calc(100% - 140px), var(--canvas) 100%);
  color: var(--ink);
  padding: clamp(160px, 18vw, 280px) var(--pad-x) clamp(120px, 14vw, 220px);
}
.band--blue {
  background: linear-gradient(180deg, var(--canvas) 0px, var(--blue) 220px, var(--blue) 100%);
  color: #ffffff;
  padding: clamp(240px, 26vw, 380px) var(--pad-x) clamp(120px, 14vw, 210px);
}
.band--blue-exit { background: linear-gradient(180deg, var(--blue) 0px, var(--canvas) 170px); padding: 0 var(--pad-x) var(--pad-y); }
.band--maroon {
  background: linear-gradient(180deg, var(--canvas) 0px, var(--maroon) 220px, var(--maroon) calc(100% - 120px), var(--maroon-deep) 100%);
  color: #ffffff;
  padding: clamp(220px, 24vw, 340px) var(--pad-x) clamp(100px, 12vw, 180px);
}
.band--rose {
  background: linear-gradient(180deg, var(--canvas) 0px, var(--rose) 220px, var(--rose) calc(100% - 140px), var(--canvas) 100%);
  color: var(--ink);
  padding: clamp(160px, 18vw, 280px) var(--pad-x) clamp(120px, 14vw, 220px);
}
/* Hero band for interior pages: shorter blend, one dominant color per page */
.page-hero { background: var(--canvas); padding: clamp(36px, 6vw, 84px) var(--pad-x) clamp(48px, 7vw, 110px); }

/* ---------- layout helpers ---------- */
.row { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 88px); align-items: flex-start; }
.row--center { align-items: center; }
.row--end { align-items: flex-end; }
.row--baseline { align-items: baseline; gap: 16px 40px; }

.photo-frame { position: relative; background: var(--photo-bg); overflow: hidden; box-shadow: 0 30px 60px rgba(27,27,31,.18); }
.photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- index rows (the "Five ways in" list pattern) ---------- */
.index-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px;
  padding: clamp(20px, 3vw, 32px) 0; border-top: 1px solid rgba(27,27,31,.18);
  color: var(--ink); transition: color .3s;
}
.index-row:last-child { border-bottom: 1px solid rgba(27,27,31,.18); }
.index-row:hover { color: var(--blue); }
.index-row:hover .index-row__title, .index-row:hover .index-row__arrow { color: inherit; }
.index-row--maroon:hover { color: var(--maroon); }
.index-row__num { font-family: Oswald, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .1em; min-width: 32px; }
.index-row__title {
  flex: 1 1 240px; font-family: Oswald, sans-serif; font-weight: 500;
  font-size: clamp(26px, 3.2vw, 44px); line-height: 1.05; text-transform: uppercase; color: inherit;
}
.index-row__desc { flex: 1.2 1 300px; max-width: 520px; font-size: 16px; line-height: 1.65; color: rgba(27,27,31,.68); }
.index-row__arrow { font-family: Oswald, sans-serif; font-size: 20px; color: inherit; }

/* ---------- rate cards ---------- */
.rate-cards { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 48px); }
.rate-card { flex: 1 1 220px; border-top: 3px solid var(--maroon); padding-top: 22px; }
.rate-card__price { margin: 0; font-family: Oswald, sans-serif; font-weight: 500; font-size: clamp(52px, 5.6vw, 88px); line-height: 1; }
.rate-card__length { margin: 8px 0 0; font-family: Oswald, sans-serif; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: rgba(27,27,31,.7); }
.rate-card__note { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: rgba(27,27,31,.62); }

/* ---------- ruled list (the "For bodies that…" pattern) ---------- */
.ruled-list { display: grid; gap: 0; }
.ruled-list > * {
  margin: 0; padding: 16px 0; border-top: 1px solid var(--rule, rgba(13,108,166,.35));
  font-family: Oswald, sans-serif; font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 400; text-transform: uppercase; letter-spacing: .04em;
}
.ruled-list > *:last-child { border-bottom: 1px solid var(--rule, rgba(13,108,166,.35)); }
.ruled-list--maroon > *, .ruled-list--maroon > *:last-child { border-color: rgba(123,45,66,.35); }
.ruled-list--onwhite > *, .ruled-list--onwhite > *:last-child { border-color: rgba(255,255,255,.35); }

/* ---------- stat blocks ---------- */
.stat-grid { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 48px); }
.stat { flex: 1 1 180px; border-top: 2px solid rgba(27,27,31,.18); padding-top: 16px; }
.stat--onmaroon { border-top-color: rgba(255,255,255,.3); }
.stat__label { margin: 0; font-family: Oswald, sans-serif; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.stat__note { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: rgba(27,27,31,.62); }
.stat--onmaroon .stat__note { color: rgba(255,255,255,.7); }

/* ---------- blog cards ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(28px, 3.5vw, 52px) clamp(24px, 3vw, 44px); }
.post-card { color: var(--ink); display: grid; gap: 16px; align-content: start; }
.post-card__photo { position: relative; background: var(--photo-bg); overflow: hidden; aspect-ratio: 3 / 2; }
.post-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-unhurried); }
.post-card:hover .post-card__photo img { transform: scale(1.04); }
.post-card__date { margin: 0; font-family: Oswald, sans-serif; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(27,27,31,.5); }
.post-card__title { margin: 0; font-family: Oswald, sans-serif; font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; text-transform: uppercase; color: inherit; }
.post-card:hover .post-card__title { color: var(--maroon); }
.post-card__excerpt { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(27,27,31,.68); }

/* ---------- article (blog post body) ---------- */
.article { max-width: 720px; }
.article > p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.85; color: rgba(27,27,31,.85); margin: 0 0 1.4em; }
.article h2 {
  font-family: Oswald, sans-serif; font-weight: 500; font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1; text-transform: uppercase; margin: 2.2em 0 .8em; letter-spacing: .01em;
}
.article h3 {
  font-family: Oswald, sans-serif; font-weight: 500; font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.15; text-transform: uppercase; margin: 1.8em 0 .7em;
}
.article ul, .article ol { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.8; color: rgba(27,27,31,.85); padding-left: 1.2em; margin: 0 0 1.4em; }
.article li { margin-bottom: .4em; }
.article img { width: 100%; height: auto; margin: 2em 0; }
.article blockquote {
  margin: 2em 0; padding-left: 24px; border-left: 3px solid var(--rose);
  font-family: Oswald, sans-serif; font-size: clamp(20px, 2vw, 28px); line-height: 1.4; color: var(--ink);
}
.article a { border-bottom: 1px solid var(--rose); }
.article a:hover { border-bottom-color: var(--blue); }
.article em.footnote { display: block; font-size: 14px; color: rgba(27,27,31,.55); }

/* ---------- FAQ ---------- */
.faq-item { border-top: 1px solid rgba(27,27,31,.18); padding: clamp(20px, 2.6vw, 30px) 0; }
.faq-item:last-child { border-bottom: 1px solid rgba(27,27,31,.18); }
.faq-item h3 { margin: 0 0 10px; font-family: Oswald, sans-serif; font-weight: 500; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.2; text-transform: uppercase; }
.faq-item p, .faq-item ul { margin: 0; font-size: 16px; line-height: 1.75; color: rgba(27,27,31,.75); }
.faq-item ul { padding-left: 1.2em; margin-top: .5em; }

/* ---------- footer ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--maroon-deep) 0px, var(--footer-ink) 180px);
  color: rgba(255,255,255,.75); padding: clamp(48px, 6vw, 80px) var(--pad-x);
}
.site-footer a { color: rgba(255,255,255,.75); font-size: 15px; }
.site-footer a:hover { color: #ffffff; }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: clamp(36px, 5vw, 88px); }
.site-footer .footer-brand { margin: 0 0 14px; font-family: Oswald, sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .24em; text-transform: uppercase; color: #ffffff; }
.site-footer .footer-head { margin: 0 0 4px; font-family: Oswald, sans-serif; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.site-footer .legal { margin: clamp(36px, 5vw, 56px) 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.45); }

/* ---------- reveal motion (slow settle, ease-in on scroll) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1.2s var(--ease-unhurried), transform 1.2s var(--ease-unhurried); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ---------- misc ---------- */
.crumb { margin: 0 0 clamp(18px, 2.5vw, 30px); font-family: Oswald, sans-serif; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(27,27,31,.45); }
.crumb a { color: rgba(27,27,31,.6); }
.crumb a:hover { color: var(--maroon); }
.neigh-list { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.neigh-list li { margin: 0; }
.neigh-list a, .neigh-list span {
  display: inline-block; font-family: Oswald, sans-serif; font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; padding: 10px 16px; border: 1px solid rgba(27,27,31,.25); border-radius: 2px; color: var(--ink);
}
.neigh-list a:hover { border-color: var(--blue); color: var(--blue); }
.neigh-list span { color: var(--ink); }