/* Mai.Physio — single-page site.
   Foundations (tokens, element defaults) come from styles.css. This file only
   adds the page's layout and component styles, built on those tokens. */

/* ── utilities ─────────────────────────────────────────── */

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
}
.skip:focus { inset-inline-start: var(--space-4); top: var(--space-4); }

/* The hidden attribute must beat the layout display values set below. */
[hidden] { display: none !important; }

.inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: var(--space-9) 0; }
.sunken { background: var(--surface-sunken); }
.muted { color: var(--text-muted); }
.relaxed { line-height: var(--lh-relaxed); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-normal); }

/* Lucide swaps <i data-lucide> for an <svg>; size it via the icon itself. */
[data-lucide], .lucide { width: 1.25em; height: 1.25em; flex: 0 0 auto; stroke-width: 2; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--teal-600);
  letter-spacing: var(--ls-wide);
}
.eyebrow.center { justify-content: center; }
.eyebrow-rule { width: 26px; height: 1.5px; background: var(--clay-400); }

.section-heading { text-align: center; max-width: var(--container-narrow); margin: 0 auto var(--space-7); }
.section-heading h2 { margin: var(--space-3) 0 var(--space-4); }
.section-heading p { margin: 0; }

.center-cta { text-align: center; margin-top: var(--space-7); }

/* ── buttons ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.985); box-shadow: none; }

.btn-sm { padding: 9px 18px; font-size: var(--fs-small); }
.btn-md { padding: 13px 26px; font-size: var(--fs-small); }
.btn-lg { padding: 16px 32px; font-size: var(--fs-body); }
.btn-full { width: 100%; }

.btn-primary { background: var(--color-primary); color: var(--text-onbrand); box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--color-primary-hover); color: var(--text-onbrand); }

.btn-accent { background: var(--color-accent); color: var(--text-onbrand); box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--color-accent-hover); color: var(--text-onbrand); }

.btn-secondary { background: transparent; border-color: var(--teal-300); color: var(--teal-700); }
.btn-secondary:hover { background: var(--teal-50); border-color: var(--teal-400); color: var(--teal-700); }

.btn-whatsapp { background: #25d366; color: #fff; margin-top: var(--space-3); }
.btn-whatsapp:hover { background: #1eb457; color: #fff; }

.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ── header ────────────────────────────────────────────── */

#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft);
}
#site-header.scrolled {
  background: rgba(251, 248, 243, 0.9);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom-color: var(--border-subtle);
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
/* Lockup: mark PNG + text wordmark, mirroring the design system's Logo. */
.logo { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo img { height: 62px; width: auto; }
.wordmark { display: flex; flex-direction: column; line-height: 1; direction: ltr; text-align: left; }
.wordmark-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 29px;
  color: var(--text-strong);
  letter-spacing: var(--ls-tight);
}
.wordmark-name span { color: var(--teal-500); }
.wordmark-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: var(--ls-wide);
}
.logo.on-dark img { height: 68px; }
.logo.on-dark .wordmark-name { color: #fff; }
.logo.on-dark .wordmark-name span { color: var(--clay-200); }
.logo.on-dark .wordmark-tag { color: var(--teal-100); }

.nav { display: flex; align-items: center; gap: var(--space-1); }
.nav a {
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.nav a:hover { background: var(--teal-100); color: var(--teal-700); text-decoration: none; }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-default);
  background: var(--surface-card);
  color: var(--teal-700);
  cursor: pointer;
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-5) var(--space-5);
  background: rgba(251, 248, 243, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-menu a:not(.btn) {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  text-decoration: none;
}
.mobile-menu a:not(.btn):hover { background: var(--teal-100); color: var(--teal-700); }
.mobile-menu .btn { margin-top: var(--space-2); }

/* ── hero ──────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; }
.hero-glow {
  position: absolute;
  inset-inline-start: -10%;
  top: -20%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, var(--teal-100), transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-9);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: var(--space-5); }
.hero-copy h1 { margin: 0; }
.hero-copy .lead { margin: 0; color: var(--text-muted); max-width: 46ch; }
.accent-word { color: var(--teal-500); }

.hero-points {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}
.hero-points svg { color: var(--teal-500); }

.hero-media { position: relative; }
.hero-photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background: var(--teal-100);
}
/* The image is cropped to sit close to the 4/5 frame, so cover trims only a
   little from the sides and the subjects stay mid-frame — clear of the badge. */
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-badge {
  position: absolute;
  inset-inline-end: -22px;
  bottom: 28px;
  max-width: 240px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  line-height: 1.35;
}
.hero-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--clay-100);
  color: var(--clay-600);
  flex: 0 0 auto;
}

/* Fillable image placeholders — swap for real photos. */
.photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--teal-50);
  color: var(--teal-600);
  text-align: center;
  padding: var(--space-5);
  font-size: var(--fs-small);
}
.photo-placeholder svg { width: 40px; height: 40px; opacity: 0.5; }

/* ── stats band ────────────────────────────────────────── */

.stats-band { background: var(--teal-600); padding: var(--space-7) 0; }
/* Flex rather than a fixed grid: the band balances itself for any number of
   stats, and an odd one left over on a narrow screen centers instead of
   stranding itself in a column. */
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}
.stat { flex: 1 1 160px; }
.stat { display: flex; flex-direction: column; gap: var(--space-1); text-align: center; }
.stat-value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  color: #fff;
  line-height: 1;
}
.stat-label { color: var(--teal-100); font-size: var(--fs-body); }

/* ── letters gallery ───────────────────────────────────── */

.letters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.letter {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.letter:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.letter img { width: 100%; height: auto; border-radius: var(--radius-xs); }

.letter-zoom {
  position: absolute;
  inset-inline-end: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(23, 29, 27, 0.78);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.letter-zoom svg { width: 15px; height: 15px; }
.letter:hover .letter-zoom, .letter:focus-visible .letter-zoom { opacity: 1; }

/* ── lightbox ──────────────────────────────────────────── */

#lightbox {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  overflow: visible;
}
#lightbox::backdrop { background: rgba(23, 29, 27, 0.82); backdrop-filter: blur(3px); }

.lightbox-inner { position: relative; }
#lightbox img {
  display: block;
  max-width: min(92vw, 900px);
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--white);
}
.lightbox-close {
  position: absolute;
  inset-inline-end: -14px;
  top: -14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--surface-card);
  color: var(--text-strong);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft);
}
.lightbox-close:hover { background: var(--sand-100); }

/* ── draft placeholders ────────────────────────────────── */
/* Unfilled CONTENT entries. Deliberately unmistakable for real content —
   they must never read as a genuine stat or patient quote. */

.draft { position: relative; }
.stat.draft .stat-value {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--teal-200);
  border: 2px dashed var(--teal-400);
  border-radius: var(--radius-pill);
  padding: 4px 18px;
  font-style: italic;
}
.stat.draft { align-items: center; }

/* ── cards ─────────────────────────────────────────────── */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.card-lg { padding: var(--space-6); }
.card-tint { background: var(--teal-50); border-color: var(--teal-100); box-shadow: none; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

.service, .step { display: flex; flex-direction: column; gap: var(--space-3); }
.service h3, .step h3 { margin: 0; font-size: var(--fs-h4); }
.service p, .step p { margin: 0; color: var(--text-muted); }
.service { transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft); }
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.step { position: relative; }
.step-num {
  position: absolute;
  inset-inline-end: var(--space-5);
  top: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 40px;
  color: var(--teal-100);
  line-height: 1;
}

.medallion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  flex: 0 0 auto;
}
.medallion svg { width: 28px; height: 28px; }
.medallion.brand { background: var(--teal-100); color: var(--teal-600); }
.medallion.sky { background: var(--sky-100); color: var(--sky-600); }
.medallion.accent { background: var(--clay-100); color: var(--clay-600); }

/* ── about ─────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); align-items: center; }
.about-photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 3 / 4;
  background: var(--clay-50);
}
/* object-position biases upward: the faces sit in the top half, so a centred
   crop beheads Mai when the frame goes landscape on tablet. */
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.about-copy { display: flex; flex-direction: column; gap: var(--space-4); }
.about-copy h2 { margin: var(--space-2) 0 0; }
.about-copy p { margin: 0; }

.timeline-block { margin-top: var(--space-9); }
.timeline-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.timeline-item h3 { margin: 2px 0 var(--space-2); font-size: var(--fs-h4); }
.timeline-item p { margin: 0; color: var(--text-muted); }
.timeline-year {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--clay-600);
  letter-spacing: var(--ls-wide);
}

.badges { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.badge svg { width: 16px; height: 16px; }
.badge.brand { background: var(--teal-100); color: var(--teal-700); }
.badge.accent { background: var(--clay-100); color: var(--clay-600); }

.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.principle { display: flex; gap: var(--space-3); align-items: flex-start; }
.principle > svg { color: var(--teal-500); width: 24px; height: 24px; margin-top: 3px; }
.principle strong { display: block; color: var(--text-strong); font-size: var(--fs-small); }
.principle span { font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-normal); }

/* ── contact ───────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); align-items: start; }

#contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
#contact-form h3 { margin: 0; }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-strong); }
.hint { font-size: var(--fs-caption); color: var(--text-muted); }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > svg {
  position: absolute;
  inset-inline-start: var(--space-4);
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  pointer-events: none;
}
.input-wrap:has(> svg) input { padding-inline-start: calc(var(--space-4) * 2 + 20px); }

.input-wrap input, .input-wrap textarea {
  width: 100%;
  padding: 14px var(--space-4);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-strong);
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.input-wrap textarea { resize: vertical; line-height: var(--lh-normal); }
.input-wrap input::placeholder, .input-wrap textarea::placeholder { color: var(--ink-400); }
.input-wrap input:focus, .input-wrap textarea:focus {
  outline: none;
  border-color: var(--teal-400);
  box-shadow: 0 0 0 4px var(--teal-100);
}
.input-wrap input:focus + svg { color: var(--teal-500); }
.field.invalid input { border-color: var(--status-error); }
.field.invalid .hint { color: var(--status-error); }

/* Honeypot — hidden from people, still submitted by bots. Not display:none,
   which some bots detect and skip. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-error {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--red-50);
  color: var(--status-error);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}
.form-success h3, .form-success p { margin: 0; }
.success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--status-success);
}
.success-icon svg { width: 40px; height: 40px; }

.contact-side { display: flex; flex-direction: column; gap: var(--space-5); }
.card-tint .detail + .detail { margin-top: var(--space-5); }
.detail { display: flex; gap: var(--space-3); align-items: center; text-decoration: none; }
a.detail:hover { text-decoration: none; }
a.detail:hover .detail-value { color: var(--teal-700); }
.detail-text { display: flex; flex-direction: column; }
.detail-label { font-size: var(--fs-caption); color: var(--text-muted); font-weight: var(--fw-semibold); }
.detail-value {
  font-size: var(--fs-body);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  transition: color var(--dur-fast) var(--ease-soft);
}

/* ── footer ────────────────────────────────────────────── */

/* Scoped to the page footer — testimonial cards use <footer> too. */
body > footer { background: var(--teal-700); color: #fff; }
.footer-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-7);
}
.footer-col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col > .logo { align-self: flex-start; }
.footer-col p { margin: var(--space-2) 0 0; color: var(--teal-100); font-size: var(--fs-small); max-width: 260px; }
.footer-head { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-body); color: #fff; }
.footer-col a { color: var(--teal-100); font-size: var(--fs-small); text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-text { display: flex; align-items: center; gap: var(--space-2); color: var(--teal-100); font-size: var(--fs-small); }
.footer-text svg { width: 18px; height: 18px; color: var(--clay-200); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: var(--space-5) var(--space-6);
  text-align: center;
  color: var(--teal-200);
  font-size: var(--fs-caption);
}

/* ── responsive ────────────────────────────────────────── */

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-7); padding-top: var(--space-6); }
  /* Keep the 4/5 portrait ratio: the photo is a vertical composition, and a
     landscape frame crops it to ceiling with the subjects hidden behind the badge. */
  .hero-media { order: -1; max-width: 420px; margin-inline: auto; }
  .hero-badge { inset-inline-end: var(--space-4); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .letters-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { gap: var(--space-6); }
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-photo { max-width: 380px; aspect-ratio: 4 / 3; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Five nav items with Hebrew labels need real room — below this the row gets
   cramped and the links wrap, so hand over to the burger earlier. */
@media (max-width: 940px) {
  .nav, .header-cta { display: none; }
  .burger { display: inline-flex; }
}

@media (max-width: 620px) {
  .section { padding: var(--space-8) 0; }
  .inner, .header-inner, .hero-inner, .footer-grid { padding-inline: var(--space-5); }
  .grid-3 { grid-template-columns: 1fr; }
  .letters-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .letter-zoom { display: none; }
  .lightbox-close { inset-inline-end: 4px; top: -52px; }
  .principles { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-points { gap: var(--space-3); flex-direction: column; }
  .btn-row .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}