/* ==========================================================================
   Shechter Therapies — shared styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Jost:wght@300;400;500&display=swap');

:root {
  --olive: #98A89B;
  --olive-dark: #7D8F81;
  --beige: #D8CDB8;
  --white: #F9F9F9;
  --ink: #43483F;
  --ink-soft: #3A3D38;
  --body-grey: #4F544B;
  --muted: #8B8F85;
  --beige-label: #6C7268;
  --placeholder: #A9ADA2;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Jost', Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--white);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
}

p { margin: 0; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 36px;
  min-height: 56px;
  font-family: var(--font-ui);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease;
  white-space: nowrap;
}

.btn-white {
  background: var(--white);
  color: var(--ink);
}
.btn-white:hover { background: var(--olive); color: var(--white); }

.btn-olive {
  background: var(--olive);
  color: var(--white);
}
.btn-olive:hover { background: var(--ink); color: var(--white); }

.btn-dark {
  background: var(--ink);
  color: var(--white);
}
.btn-dark:hover { background: var(--olive); color: var(--white); }

.btn-beige {
  background: var(--beige);
  color: var(--ink);
}
.btn-beige:hover { background: var(--ink); color: var(--white); }

.btn-full {
  width: 100%;
  justify-content: space-between;
}

/* ---- Burger + nav panel ---- */

.burger {
  position: fixed;
  top: clamp(18px, 3.5vw, 40px);
  right: clamp(18px, 3.5vw, 40px);
  z-index: 30;
  width: 56px;
  height: 56px;
  background: var(--white);
  box-shadow: 0 6px 26px rgba(67, 72, 63, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 180ms ease;
}
.burger:hover { background: var(--olive); }
.burger:hover .burger-bar { background: var(--white); }

.burger-bar {
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: background-color 180ms ease;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(67, 72, 63, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.nav-panel {
  position: fixed;
  top: clamp(18px, 3.5vw, 40px);
  right: clamp(18px, 3.5vw, 40px);
  z-index: 25;
  width: min(320px, calc(100vw - 36px));
  background: var(--white);
  box-shadow: 0 18px 60px rgba(67, 72, 63, 0.28);
  padding: 96px 40px 40px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

body.menu-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}
body.menu-open .nav-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.nav-list a {
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 180ms ease;
}
.nav-list a:hover { color: var(--olive); }
.nav-list a[aria-current="page"] { color: var(--olive); }

.nav-meta {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--beige);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
}
.nav-meta a { transition: color 180ms ease; }
.nav-meta a:hover { color: var(--olive-dark); }

/* ---- Hero ---- */

.hero-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  grid-auto-rows: 1fr;
  height: 100dvh;
}

.hero-panel {
  position: relative;
  display: block;
  overflow: hidden;
}
#pilates-panel { background: var(--beige); }
#massage-panel { background: var(--olive); }

.hero-panel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#pilates-panel .hero-panel-photo { object-position: 50% 55%; }
#massage-panel .hero-panel-photo { object-position: 55% 45%; }

.hero-panel-scrim {
  position: absolute;
  inset: 0;
}
#pilates-panel .hero-panel-scrim {
  background: linear-gradient(180deg, rgba(249,249,249,0.35) 0%, rgba(249,249,249,0) 28%, rgba(67,72,63,0.45) 100%);
}
#massage-panel .hero-panel-scrim {
  background: linear-gradient(180deg, rgba(249,249,249,0.30) 0%, rgba(249,249,249,0) 28%, rgba(67,72,63,0.50) 100%);
}

.hero-panel-content {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(28px, 5vw, 56px) clamp(24px, 4.5vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.hero-eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.85;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(60px, 9.2vw, 98px);
  line-height: 1;
  color: var(--white);
}

.hero-logo {
  position: absolute;
  top: clamp(20px, 4vw, 46px);
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.hero-logo img {
  width: clamp(210px, 52vw, 480px);
  height: auto;
  filter: drop-shadow(0 2px 18px rgba(249,249,249,0.85));
}

@media (max-width: 879px) {
  .hero-panels { height: auto; min-height: 100dvh; }
}

/* ---- Page layout (interior pages) ---- */

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 96px);
}

.page-narrow { max-width: 1020px; }

.page-header {
  padding-top: clamp(96px, 11vw, 150px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

.page-header-logo {
  display: inline-block;
  width: clamp(200px, 30vw, 320px);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}

.page-title {
  font-family: var(--font-display);
  font-weight: 300;
}

.page-title--pilates { font-size: clamp(60px, 9.8vw, 116px); }
.page-title--massage { font-size: clamp(58px, 8.6vw, 104px); }
.page-title--contact { font-size: clamp(34px, 4.4vw, 52px); text-wrap: pretty; }

/* ---- Intro block (Pilates / Massage) ---- */

.intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(48px, 6vw, 88px);
}

.intro-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 55%;
}
.intro-photo--massage { object-position: 55% 45%; }

.intro-lead {
  font-family: var(--font-display);
  font-weight: 300;
  margin-bottom: 20px;
}
.intro-lead--pilates { font-size: clamp(36px, 3.9vw, 48px); }
.intro-lead--massage { font-size: clamp(35px, 3.75vw, 47px); }

.intro-body {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.75;
  color: var(--body-grey);
}
.intro-body + .intro-body { margin-top: 18px; }

.intro-cta { margin-top: 28px; }

/* ---- Class Times ---- */

.section-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
}

.class-times {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.class-times-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 16px);
  margin-top: 16px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.term-dates {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(21px, 2.1vw, 27px);
  color: var(--ink);
  max-width: 62ch;
}

.booking-note {
  font-size: 16px;
  font-weight: 300;
  color: var(--body-grey);
  max-width: 62ch;
}

.venues {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  align-items: start;
}

.venue {
  border: 1px solid var(--beige);
  padding: clamp(26px, 3.2vw, 40px);
}

.venue-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(23px, 2.3vw, 29px);
  color: var(--ink);
}

.venue-address {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  margin-top: 6px;
}

.venue-rows {
  margin-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--beige);
}

.venue-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: clamp(14px, 1.7vw, 18px) 0;
  border-bottom: 1px solid var(--beige);
}
.venue-row:last-child { border-bottom: none; }

.venue-day {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 23px);
  color: var(--ink);
}

.venue-time {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--body-grey);
}

/* ---- FAQ ---- */

.faq {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.faq-list {
  margin-top: 20px;
  border-top: 1px solid var(--beige);
}

.faq-item {
  border-bottom: 1px solid var(--beige);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: clamp(20px, 2.4vw, 26px) 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 32px);
  color: var(--ink);
  transition: color 180ms ease;
}
.faq-question:hover { color: var(--olive); }

.faq-glyph {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 300;
  color: var(--olive);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 220ms ease;
}

.faq-answer-inner {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--body-grey);
  max-width: 62ch;
  padding-bottom: clamp(20px, 2.4vw, 26px);
}

.faq-item.is-open .faq-answer { max-height: 600px; }

/* ---- Closing beige band (service pages) ---- */

.closing-band {
  background: var(--beige);
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: clamp(56px, 7vw, 96px);
}

.closing-band-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px);
  color: var(--ink);
}

/* ---- About page ---- */

.about-intro {
  max-width: 1020px;
  margin: 0 auto;
  padding-top: clamp(56px, 7vw, 88px);
}

.about-portrait {
  float: left;
  width: clamp(150px, 24vw, 260px);
  height: clamp(150px, 24vw, 260px);
  object-fit: cover;
  margin: 6px clamp(24px, 3.4vw, 44px) 20px 0;
}
.about-portrait--square { border-radius: 0; }

.about-logo {
  width: clamp(200px, 30vw, 320px);
  margin: 0 0 clamp(14px, 1.8vw, 22px);
}

.about-lead {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(33px, 3.6vw, 42px);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 22px;
}

.about-body {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--body-grey);
  margin-bottom: 22px;
}

.about-clear { clear: both; }

.credentials {
  max-width: 1020px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  background: var(--beige);
  padding: clamp(32px, 4vw, 48px);
}

.credentials-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--beige-label);
  margin-bottom: 18px;
}

.credentials p {
  font-size: 19px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.65;
}
.credentials p + p { margin-top: 16px; }

.booking-band {
  background: var(--beige);
  padding: clamp(56px, 8vw, 104px) clamp(24px, 6vw, 96px);
  margin-top: clamp(56px, 7vw, 96px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
}

.booking-band-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  color: var(--ink);
}

.booking-band-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- Contact page ---- */

.contact-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
  max-width: 1020px;
  margin: 0 auto;
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.contact-right {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 40px);
}

.contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-rule {
  border: none;
  border-top: 1px solid var(--beige);
  margin: 0;
}

.contact-detail-group {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-detail-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
}

.contact-detail-value {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink);
  transition: color 180ms ease;
}
.contact-detail-value:hover { color: var(--olive); }

/* ---- Policy pages ---- */

.policy-body {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(56px, 7vw, 96px);
  max-width: 68ch;
}

.policy-body p {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--body-grey);
  margin-bottom: 18px;
}

/* ---- Footer ---- */

.site-footer {
  margin-top: 0;
}

.site-footer .page {
  max-width: 1520px;
  border-top: 1px solid var(--beige);
  padding-top: clamp(44px, 6vw, 76px);
  padding-bottom: clamp(30px, 4vw, 44px);
}

.footer-contact .site-footer { margin-top: clamp(220px, 34vw, 460px); }

.footer-row-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(30px, 4vw, 56px);
  align-items: start;
}

.footer-block-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(29px, 2.9vw, 36px);
  color: var(--ink);
}

.footer-block-descriptor {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 8px;
}

.footer-label {
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 14px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 18px;
  font-weight: 300;
  color: var(--body-grey);
  transition: color 180ms ease;
}
.footer-links a:hover { color: var(--olive); }

.footer-row-2 {
  border-top: 1px solid var(--beige);
  margin-top: clamp(34px, 4.5vw, 56px);
  padding-top: clamp(20px, 2.4vw, 26px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.footer-row-2 a { transition: color 180ms ease; }
.footer-row-2 a:hover { color: var(--olive); }

/* ---- Responsive tweaks ---- */

@media (max-width: 700px) {
  .intro { grid-template-columns: 1fr; }
  .contact-main { grid-template-columns: 1fr; }
}