:root {
  /* Warm editorial palette */
  --cream: #f4ede0;
  --cream-soft: #faf6ed;
  --cream-deep: #ece3d2;
  --ink: #1f1b16;
  --ink-soft: #3d362c;
  --taupe: #7a6f5f;
  --taupe-soft: #a89e8d;
  --clay: #c75a3e;      /* terracotta */
  --clay-deep: #9e4028;
  --forest: #2c4a3a;    /* deep green */
  --forest-soft: #4a6b57;
  --honey: #e8a04a;     /* warm mustard */
  --honey-soft: #f5d782;
  --trust: #3a6b7a;     /* muted slate-teal — medical-trust accent */
  --trust-soft: #d6e4e8;
  --border: rgba(31, 27, 22, 0.12);
  --border-strong: rgba(31, 27, 22, 0.22);

  /* Type */
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  font-feature-settings: "ss01", "ss02";
}

/* Subtle grain overlay — gives the whole page a paper feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 980px; margin: 0 auto; padding: 0 32px; }

/* ——— Mono labels used throughout ——— */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 28px; height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.eyebrow.left::before { display: none; }
.eyebrow.left::after { display: none; }
.eyebrow.left { padding-left: 0; }

/* ——— Display type rules ——— */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.005em; color: var(--ink); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--clay); }

/* ========== ANNOUNCEMENT RIBBON ========== */
.ribbon {
  background: var(--forest);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 16px;
  text-align: center;
  position: relative;
}
.ribbon a { color: var(--honey-soft); text-decoration: underline; text-underline-offset: 3px; margin: 0 4px; }
.ribbon .r-star { display: inline-block; animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== NAV ========== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 237, 224, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.brand-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand small {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--taupe);
  text-transform: uppercase;
  margin-top: 2px;
}
.brand .stack { line-height: 1; }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  font-size: 0.95rem;
  color: var(--ink-soft);
  position: relative;
  transition: color 0.25s ease;
}
.nav-links a:hover { color: var(--clay); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--clay);
  transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 13px 22px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
}
.nav-cta:hover { background: var(--clay); transform: translateY(-1px); }
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  color: var(--ink);
}

/* ========== HERO ========== */
.hero {
  position: relative;
  padding: 70px 0 110px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 70px;
  align-items: end;
}
.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 28px 0 24px;
}
.hero-title em {
  font-style: italic;
  color: var(--clay);
  display: inline-block;
}
.hero-title .flourish {
  display: inline-block;
  transform: translateY(6px);
  margin: 0 4px;
  color: var(--honey);
}
.hero-lede {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 440px;
  margin-bottom: 36px;
  line-height: 1.55;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
}
.btn-primary:hover { background: var(--clay); border-color: var(--clay); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-clay {
  background: var(--clay);
  color: var(--cream);
  border: 1px solid var(--clay);
}
.btn-clay:hover { background: var(--clay-deep); border-color: var(--clay-deep); transform: translateY(-2px); }
.btn .arrow { transition: transform 0.3s ease; }
.btn:hover .arrow { transform: translate(3px, -3px); }

/* Hero trust row */
.hero-trust {
  display: flex;
  gap: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.trust {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trust .big {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--forest);
  line-height: 1;
}
.trust .big em { font-style: italic; color: var(--clay); }
.trust .lbl {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* Hero visual — a stylized portrait card */
.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 460px;
  justify-self: end;
  width: 100%;
}
.portrait {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background:
    linear-gradient(165deg, rgba(199, 90, 62, 0.08), rgba(44, 74, 58, 0.3)),
    url('doctor.jpg') center top/cover;
  filter: contrast(1.05) saturate(0.92);
  box-shadow: 0 30px 80px -20px rgba(31, 27, 22, 0.25);
}
.portrait-frame {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(244, 237, 224, 0.3);
  pointer-events: none;
}
.portrait-caption {
  position: absolute;
  left: 28px;
  bottom: 28px;
  color: var(--cream);
  z-index: 2;
}
.portrait-caption .dr {
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1;
}
.portrait-caption .dr em { font-style: italic; color: var(--honey-soft); }
.portrait-caption .deg {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: 0.9;
}

/* Rotating stamp badge */
.stamp {
  position: absolute;
  top: -26px;
  left: -26px;
  width: 128px;
  height: 128px;
  z-index: 3;
  animation: slowSpin 22s linear infinite;
}
.stamp circle-text { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; }
@keyframes slowSpin { to { transform: rotate(360deg); } }

/* Floating 4.9 card */
.floating-card {
  position: absolute;
  right: -30px;
  bottom: 80px;
  background: var(--cream-soft);
  padding: 18px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: 0 20px 40px -10px rgba(31, 27, 22, 0.15);
  z-index: 3;
  max-width: 220px;
  transform: rotate(3deg);
}
.floating-card .stars {
  color: var(--honey);
  letter-spacing: 2px;
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.floating-card .txt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 8px;
}
.floating-card .who {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* Decorative hero squiggle */
.hero-squiggle {
  position: absolute;
  left: 10%;
  bottom: 40px;
  color: var(--honey);
  opacity: 0.7;
  pointer-events: none;
}

/* ========== MARQUEE TICKER ========== */
.marquee {
  background: var(--ink);
  color: var(--cream);
  padding: 22px 0;
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.marquee-track {
  display: flex;
  gap: 60px;
  animation: scroll 28s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--serif);
  font-size: 1.8rem;
}
.marquee-item em { font-style: italic; color: var(--honey-soft); }
.marquee-item .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay);
  display: inline-block;
}
@keyframes scroll { to { transform: translateX(-50%); } }

/* ========== KIDS OFFER POSTCARD ========== */
.offer-section { padding: 110px 0; }
.postcard {
  position: relative;
  background: var(--cream-soft);
  border: 1px solid var(--border-strong);
  padding: 60px 70px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  box-shadow: 0 20px 60px -30px rgba(31, 27, 22, 0.3);
  transform: rotate(-0.6deg);
  max-width: 1100px;
  margin: 0 auto;
}
.postcard::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px dashed var(--border-strong);
  pointer-events: none;
}
.postcard-mark {
  position: absolute;
  top: -20px;
  right: 40px;
  background: var(--clay);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 20px;
  transform: rotate(3deg);
  box-shadow: 0 6px 14px -4px rgba(199, 90, 62, 0.4);
}
.postcard-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 12px;
}
.postcard-title em { font-style: italic; color: var(--clay); }
.postcard-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--forest);
  margin-bottom: 24px;
}
.postcard-body {
  color: var(--ink-soft);
  font-size: 1rem;
  margin-bottom: 28px;
  max-width: 420px;
}
.postcard-date {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--honey-soft);
  color: var(--ink);
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
  border-radius: 2px;
}
.postcard-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Postcard right side — hand-drawn-style tooth + kids */
.postcard-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 340px;
  min-height: 260px;
  justify-self: center;
}
.free-burst {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.free-burst svg {
  width: 100%;
  height: 100%;
  animation: slowSpin 16s linear infinite;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(199, 90, 62, 0.35));
}
.free-burst .free-text {
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  color: var(--cream);
  font-size: 3rem;
  line-height: 1;
  text-align: center;
  transform: rotate(-6deg);
  text-shadow: 0 2px 0 rgba(31, 27, 22, 0.18);
  z-index: 2;
  pointer-events: none;
}
.free-burst .free-text small {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ========== ABOUT (editorial magazine style) ========== */
.about { padding: 120px 0; background: var(--cream-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.about-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: start;
}
.about-image {
  position: sticky;
  top: 120px;
  aspect-ratio: 3 / 4;
  width: 100%;
  background:
    linear-gradient(165deg, rgba(44, 74, 58, 0.08), rgba(199, 90, 62, 0.18)),
    url('doctor.jpg') center top/cover;
  filter: contrast(1.04) saturate(0.95);
  border-radius: 2px;
  box-shadow: 0 40px 70px -30px rgba(31, 27, 22, 0.35);
}
.about-image-caption {
  position: absolute;
  bottom: -12px; right: -12px;
  background: var(--cream);
  padding: 14px 20px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.about-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1;
  margin-bottom: 36px;
}
.about-title em { font-style: italic; color: var(--clay); display: block; }
.about-copy p { font-size: 1.08rem; color: var(--ink-soft); margin-bottom: 22px; line-height: 1.7; }
.about-copy p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 4.2rem;
  float: left;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  color: var(--clay);
  font-style: italic;
}
.pull-quote {
  border-left: 2px solid var(--clay);
  padding: 12px 0 12px 28px;
  margin: 36px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--forest);
}
.pull-quote cite {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-top: 14px;
  font-style: normal;
}
.values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.value h4 {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.value h4 .num {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--clay);
  display: block;
  margin-bottom: 8px;
}
.value p { font-size: 0.95rem; color: var(--ink-soft); }

/* ========== SERVICES — numbered editorial ========== */
.services { padding: 120px 0; }
.services-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 70px;
}
.services-head h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.services-head h2 em { font-style: italic; color: var(--clay); }
.services-head p {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 420px;
}
.service-list {
  border-top: 1px solid var(--ink);
}
.service-row {
  display: grid;
  grid-template-columns: 80px 1fr 2fr 100px;
  gap: 32px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: padding 0.4s ease;
}
.service-row:hover { padding-left: 20px; }
.service-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 100%;
  background: var(--honey-soft);
  opacity: 0.3;
  transition: width 0.4s ease;
  z-index: -1;
}
.service-row:hover::before { width: 100%; }
.service-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--clay);
  line-height: 1;
}
.service-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--ink);
  line-height: 1.1;
}
.service-desc {
  font-size: 0.98rem;
  color: var(--ink-soft);
  max-width: 500px;
}
.service-arrow {
  text-align: right;
  color: var(--ink);
  transition: transform 0.3s ease, color 0.3s ease;
}
.service-row:hover .service-arrow { transform: translate(6px, -6px); color: var(--clay); }

/* ========== PHILOSOPHY / HOW IT WORKS ========== */
.philosophy {
  background: var(--forest);
  color: var(--cream);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.philosophy::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(232, 160, 74, 0.12), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(199, 90, 62, 0.1), transparent 60%);
  pointer-events: none;
}
.philosophy .eyebrow { color: var(--honey-soft); }
.philosophy h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--cream);
  line-height: 1;
  margin-bottom: 16px;
  max-width: 800px;
}
.philosophy h2 em { font-style: italic; color: var(--honey-soft); }
.philosophy-lede { color: rgba(244, 237, 224, 0.75); max-width: 560px; margin-bottom: 70px; font-size: 1.08rem; }
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
}
.step {
  padding: 36px 28px;
  border: 1px solid rgba(244, 237, 224, 0.18);
  background: rgba(244, 237, 224, 0.04);
  border-radius: 2px;
  backdrop-filter: blur(4px);
  transition: all 0.35s ease;
}
.step:hover {
  background: rgba(244, 237, 224, 0.08);
  transform: translateY(-4px);
  border-color: rgba(232, 160, 74, 0.4);
}
.step-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.2rem;
  color: var(--honey-soft);
  line-height: 1;
  margin-bottom: 20px;
  display: block;
}
.step h4 {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--cream);
  margin-bottom: 10px;
}
.step p {
  color: rgba(244, 237, 224, 0.7);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ========== REVIEWS — polaroid / notecard style ========== */
.reviews { padding: 120px 0; }
.reviews-head { text-align: center; margin-bottom: 70px; }
.reviews-head h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  margin-top: 16px;
}
.reviews-head h2 em { font-style: italic; color: var(--clay); }
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.review {
  background: var(--cream-soft);
  padding: 32px 30px 28px;
  border: 1px solid var(--border);
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.review:nth-child(1) { transform: rotate(-1deg); }
.review:nth-child(2) { transform: rotate(0.5deg); margin-top: 24px; }
.review:nth-child(3) { transform: rotate(-0.5deg); }
.review:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(31, 27, 22, 0.18);
}
.review .q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 4rem;
  color: var(--clay);
  line-height: 0.6;
  opacity: 0.4;
  margin-bottom: 6px;
  display: block;
}
.review-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 24px;
}
.review-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-strong);
}
.review-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--clay);
  color: var(--cream);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
}
.review-avatar.alt { background: var(--forest); }
.review-avatar.alt2 { background: var(--honey); color: var(--ink); }
.review-name { font-weight: 500; color: var(--ink); font-size: 0.96rem; }
.review-sub { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); margin-top: 2px; }
.review-stars { margin-left: auto; color: var(--honey); font-size: 0.88rem; letter-spacing: 2px; }

/* ========== FAQ ========== */
.faq { padding: 120px 0; background: var(--cream-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.faq-head { text-align: center; margin-bottom: 60px; }
.faq-head h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  margin-top: 16px;
}
.faq-head h2 em { font-style: italic; color: var(--clay); }
.faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--ink); }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-start;
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink);
  line-height: 1.2;
  transition: color 0.25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--clay); }
.faq-toggle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--clay);
  line-height: 0.8;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-body {
  padding: 0 40px 24px 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 680px;
  animation: fadeIn 0.4s ease;
}
.faq-body a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== CONTACT ========== */
.contact { padding: 120px 0; }
.contact-head { text-align: center; margin-bottom: 70px; }
.contact-head h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  margin-top: 16px;
}
.contact-head h2 em { font-style: italic; color: var(--clay); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}
.letterhead {
  background: var(--cream-soft);
  border: 1px solid var(--border-strong);
  padding: 42px 40px;
  position: relative;
}
.letterhead::before {
  content: '';
  position: absolute;
  top: 12px; left: 12px; right: 12px; bottom: 12px;
  border: 1px solid var(--border);
  pointer-events: none;
}
.letterhead-top {
  text-align: center;
  padding-bottom: 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.letterhead-top .name {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--ink);
}
.letterhead-top .name em { font-style: italic; color: var(--clay); }
.letterhead-top .sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-top: 6px;
}
.letterhead-info { display: grid; gap: 22px; }
.info-row { display: flex; gap: 16px; }
.info-row .ico {
  width: 40px; height: 40px;
  border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  color: var(--clay);
  flex-shrink: 0;
  border-radius: 2px;
}
.info-row .lbl {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 4px;
}
.info-row .val { font-size: 0.98rem; color: var(--ink); line-height: 1.45; }
.info-row .val a { color: var(--ink); border-bottom: 1px solid var(--border-strong); transition: color 0.2s ease, border-color 0.2s ease; }
.info-row .val a:hover { color: var(--clay); border-color: var(--clay); }
.info-row .val .secondary { display: block; font-size: 0.88rem; color: var(--taupe); margin-top: 2px; }

.map {
  margin-top: 28px;
  height: 220px;
  border: 1px solid var(--border-strong);
  overflow: hidden;
  filter: sepia(0.1) contrast(0.95);
}
.map iframe { width: 100%; height: 100%; border: 0; }

/* Form */
.form-card {
  background: var(--cream-soft);
  border: 1px solid var(--border-strong);
  padding: 42px 40px;
}
.form-card h3 {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.form-card h3 em { font-style: italic; color: var(--clay); }
.form-card .note {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 28px;
}
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
  display: block;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--cream);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.98rem;
  border-radius: 2px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--clay);
  background: var(--cream-soft);
}
.field textarea { min-height: 100px; resize: vertical; font-family: inherit; }
.submit-row { display: flex; gap: 14px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.form-success {
  display: none;
  padding: 16px 20px;
  background: var(--forest);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  margin-top: 16px;
}
.form-success.show { display: block; }

/* ========== FOOTER ========== */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 80px 0 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(244, 237, 224, 0.12);
  margin-bottom: 28px;
}
.footer-brand {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--cream);
  margin-bottom: 12px;
  line-height: 1;
}
.footer-brand em { font-style: italic; color: var(--honey-soft); }
.footer-about p {
  color: rgba(244, 237, 224, 0.65);
  max-width: 320px;
  margin-bottom: 22px;
  font-size: 0.95rem;
}
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 36px; height: 36px;
  border: 1px solid rgba(244, 237, 224, 0.2);
  display: grid; place-items: center;
  color: var(--cream);
  border-radius: 50%;
  transition: all 0.25s ease;
}
.footer-socials a:hover { background: var(--clay); border-color: var(--clay); }
.footer-col h5 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--honey-soft);
  margin-bottom: 22px;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { color: rgba(244, 237, 224, 0.7); font-size: 0.95rem; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--cream); }
.footer-col p { color: rgba(244, 237, 224, 0.65); font-size: 0.92rem; line-height: 1.6; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, 0.45);
}

/* ========== FLOATING ACTIONS ========== */
.floating {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.float-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream);
  box-shadow: 0 10px 25px -6px rgba(31, 27, 22, 0.35);
  transition: transform 0.3s ease;
  position: relative;
}
.float-btn:hover { transform: scale(1.08); }
.float-wa { background: #25d366; }
.float-wa::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: #25d366;
  opacity: 0.35;
  animation: pulse 2s ease-in-out infinite;
  z-index: -1;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.25); opacity: 0; }
}
.float-call { background: var(--clay); display: none; }

/* ========== REVEAL ========== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ========== BRAND LOGO ========== */
.brand-logo {
  width: 44px; height: 44px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center top;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
}

/* ========== NAV SEARCH ========== */
.nav-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(31,27,22,0.06);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 7px 16px;
  transition: border-color 0.2s;
}
.nav-search:focus-within { border-color: var(--clay); background: var(--cream-soft); }
.nav-search svg { color: var(--taupe); flex-shrink: 0; }
.nav-search input {
  border: none; background: none; outline: none;
  font-family: var(--sans); font-size: 0.88rem; color: var(--ink);
  width: 180px;
}
.nav-search input::placeholder { color: var(--taupe-soft); }
.nav-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--cream-soft);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 16px 40px -10px rgba(31,27,22,0.18);
  z-index: 200;
  overflow: hidden;
}
.nav-search-results.open { display: block; }
.nav-search-result {
  padding: 11px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: background 0.15s;
}
.nav-search-result:hover { background: var(--cream-deep); }
.nav-search-result .tag {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--clay);
  background: rgba(199,90,62,0.1); padding: 2px 7px; border-radius: 3px;
  flex-shrink: 0;
}

/* /* ========== CONTACT (original) ==========*/


/* ========== RESPONSIVE ========== */
@media (max-width: 1100px) {
  .container, .narrow { padding: 0 28px; }
  .hero-grid { gap: 50px; }
  .services-head { grid-template-columns: 1fr; gap: 20px; }
  .service-row { grid-template-columns: 60px 1fr 1.5fr 70px; gap: 24px; }
  .about-inner { gap: 60px; }
  .postcard { padding: 50px 50px; gap: 40px; }
}

@media (max-width: 900px) {
  .nav-search { display: none; }
  .hero { padding: 50px 0 80px; }
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .hero-visual { max-width: 380px; justify-self: start; }
  .floating-card { right: -10px; }
  .about-inner { grid-template-columns: 1fr; gap: 50px; }
  .about-image { position: static; max-width: 420px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .review-grid { grid-template-columns: 1fr 1fr; }
  .review:nth-child(3) { grid-column: span 2; max-width: 500px; justify-self: center; }
  .postcard { grid-template-columns: 1fr; padding: 50px 36px; text-align: left; }
  .postcard-visual { max-width: 260px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .marquee-item { font-size: 1.4rem; }
  .nav-inner { height: 68px; }
}

@media (max-width: 640px) {
  .container, .narrow { padding: 0 22px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .nav-inner { height: 62px; }
  .hero { padding: 40px 0 60px; }
  .hero-title { font-size: 3rem; }
  .hero-actions .btn { flex: 1; justify-content: center; min-width: 0; padding: 14px 18px; }
  .hero-trust { gap: 24px; }
  .trust .big { font-size: 1.6rem; }
  .floating-card { display: none; }
  .stamp { width: 90px; height: 90px; top: -14px; left: -14px; }
  .marquee { padding: 16px 0; }
  .marquee-item { font-size: 1.15rem; gap: 10px; }
  .marquee-track { gap: 36px; }
  .offer-section { padding: 70px 0; }
  .postcard { padding: 40px 26px; transform: rotate(0deg); }
  .postcard-mark { right: 20px; padding: 8px 14px; font-size: 0.62rem; }
  .postcard-title { font-size: 2.2rem; }
  .postcard-sub { font-size: 1.1rem; }
  .about { padding: 70px 0; }
  .services { padding: 70px 0; }
  .service-row {
    grid-template-columns: 50px 1fr 40px;
    gap: 16px;
    padding: 24px 0;
  }
  .service-row .service-desc { grid-column: 2 / 4; font-size: 0.9rem; margin-top: -8px; }
  .service-num { font-size: 1.8rem; }
  .service-title { font-size: 1.2rem; }
  .philosophy { padding: 70px 0; }
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .step { padding: 28px 22px; }
  .reviews { padding: 70px 0; }
  .review-grid { grid-template-columns: 1fr; }
  .review:nth-child(3) { grid-column: auto; max-width: none; }
  .review { transform: none !important; padding: 28px 24px; }
  .faq { padding: 70px 0; }
  .faq-item summary { font-size: 1.1rem; padding: 18px 0; }
  .faq-body { padding-right: 0; font-size: 0.94rem; }
  .contact { padding: 70px 0; }
  .letterhead, .form-card { padding: 32px 26px; }
  .form-row { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .footer { padding: 60px 0 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .float-call { display: grid; }
}

@media (max-width: 380px) {
  .hero-title { font-size: 2.5rem; }
  .postcard-title { font-size: 1.9rem; }
  .about-copy p:first-of-type::first-letter { font-size: 3.4rem; }
}

/* ==========================================================
   APPOINTMENT SLOT SYSTEM — calendar, slots, admin, reminders
   ========================================================== */

/* Calendar header (month + nav) */
.booking-wrap { margin-top: 6px; }
.booking-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; margin-bottom: 16px; }
.booking-head .month-label { font-family: var(--serif); font-size: 1.7rem; font-style: italic; color: var(--ink); line-height: 1; letter-spacing: -0.01em; }
.booking-head .month-label span { font-style: normal; color: var(--taupe); margin-left: 8px; font-size: 1rem; letter-spacing: 0.05em; }
.month-nav { display: flex; gap: 8px; }
.month-nav button {
  width: 38px; height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--cream-soft);
  color: var(--ink-soft);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.2rem;
  transition: all 0.2s ease;
}
.month-nav button:hover:not(:disabled) { border-color: var(--clay); color: var(--clay); transform: translateY(-1px); }
.month-nav button:disabled { opacity: 0.3; cursor: not-allowed; }

/* Weekday strip + day grid */
.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--taupe); text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding-top: 10px; }
.cal-day {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.cal-day:hover:not(.is-disabled):not(.is-outside):not(.is-full) { background: var(--cream-soft); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 6px 16px -12px rgba(31,27,22,0.3); }
.cal-day.is-today { border-color: var(--honey); box-shadow: inset 0 0 0 1px var(--honey); }
.cal-day.is-selected { background: var(--clay); color: var(--cream); border-color: var(--clay-deep); font-weight: 600; box-shadow: 0 10px 24px -14px rgba(199,90,62,0.6); }
/* Partial-day tint — honey at low fill → clay as it saturates */
/* Fill-level tints: few bookings → warm amber; more → orange; nearly full → red tint. */
.cal-day.is-partial-low  { background: rgba(122, 181, 117, 0.10); border-color: rgba(68, 140, 63, 0.35); color: #2c4a3a; }
.cal-day.is-partial-mid  { background: rgba(232, 160, 74, 0.22); border-color: rgba(232, 160, 74, 0.7); }
.cal-day.is-partial-high { background: rgba(199, 90, 62, 0.22); border-color: rgba(199, 90, 62, 0.65); color: #8a3d28; }
.cal-day.is-partial-low.is-selected, .cal-day.is-partial-mid.is-selected, .cal-day.is-partial-high.is-selected { background: var(--clay); border-color: var(--clay-deep); }
/* Day content layout: number on top, fill dots on bottom */
.cal-day-num { line-height: 1; }
.cal-day-fill { display: flex; gap: 2px; margin-top: 4px; height: 4px; align-items: center; justify-content: center; }
.cal-day-fill i { width: 3px; height: 3px; border-radius: 50%; background: rgba(122,111,95,0.35); display: inline-block; }
.cal-day-fill i.on { background: var(--clay); }
.cal-day.is-selected .cal-day-fill i { background: rgba(244,237,224,0.35); }
.cal-day.is-selected .cal-day-fill i.on { background: var(--cream); }
.cal-day.is-outside { color: var(--taupe-soft); cursor: default; opacity: 0.45; pointer-events: none; }
.cal-day.is-disabled { color: var(--taupe-soft); cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(122,111,95,0.5); }
.cal-day.is-full { color: #a84627; background: rgba(199, 90, 62, 0.35); border-color: rgba(199, 90, 62, 0.7); cursor: not-allowed; font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(168, 70, 39, 0.6); }
.cal-day.is-full::before {
  content: ''; position: absolute; inset: 6px;
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(199,90,62,0.14) 3px, rgba(199,90,62,0.14) 4px);
  border-radius: 8px;
}

/* Legend under calendar */
.cal-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--taupe);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-legend .l-avail  { background: var(--cream-soft); border: 1px solid var(--border-strong); }
.cal-legend .l-sel    { background: var(--clay); }
.cal-legend .l-full   { background: repeating-linear-gradient(45deg, var(--cream), var(--cream) 2px, rgba(199,90,62,0.3) 2px, rgba(199,90,62,0.3) 3px); border: 1px solid var(--border); }
.cal-legend .l-today  { background: var(--cream-soft); border: 1px solid var(--border); position: relative; }
.cal-legend .l-today::after { content: ''; position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); width: 3px; height: 3px; background: var(--honey); border-radius: 50%; }

/* Time slots panel */
.slots-panel {
  margin-top: 22px;
  padding: 20px 22px;
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.slots-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.slots-title h4 { font-family: var(--serif); font-size: 1.3rem; font-style: italic; color: var(--ink); font-weight: 400; }
.slots-title .count { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); }
.slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot-btn {
  padding: 11px 6px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: all 0.15s ease;
  cursor: pointer;
}
/* Default (available): clean with subtle green hint — clearly "you can book this". */
.slot-btn { background: rgba(122, 181, 117, 0.08); border: 1px solid rgba(68, 140, 63, 0.35); color: #2c4a3a; }
.slot-btn:hover:not(:disabled):not(.is-selected) { background: rgba(122, 181, 117, 0.18); border-color: #4a7a5e; color: #2c4a3a; transform: translateY(-1px); box-shadow: 0 6px 14px -10px rgba(44, 74, 58, 0.4); }

/* Selected: filled forest green — "this is your chosen slot". */
.slot-btn.is-selected { background: var(--forest); color: var(--cream); border-color: var(--forest); font-weight: 600; box-shadow: 0 8px 18px -12px rgba(44, 74, 58, 0.7); }

/* Booked: soft red + line-through — clearly "taken, not available". Visible even on mobile. */
.slot-btn.is-booked {
  background: rgba(199, 90, 62, 0.14);
  color: #8a3d28;
  border: 1px dashed rgba(199, 90, 62, 0.6);
  text-decoration: line-through;
  text-decoration-color: rgba(138, 61, 40, 0.65);
  text-decoration-thickness: 1.5px;
  cursor: not-allowed;
}

/* Blocked: striped pattern — admin-set unavailability. */
.slot-btn.is-blocked {
  background: repeating-linear-gradient(45deg, rgba(138, 127, 110, 0.10), rgba(138, 127, 110, 0.10) 4px, rgba(138, 127, 110, 0.22) 4px, rgba(138, 127, 110, 0.22) 8px);
  color: var(--taupe);
  border: 1px dashed rgba(138, 127, 110, 0.6);
  cursor: not-allowed;
}

/* Lunch break: warm amber tint — doctor's break, not bookable. */
.slot-btn.is-lunch {
  background: rgba(232, 160, 74, 0.1);
  color: #8a6000;
  border: 1px dashed rgba(232, 160, 74, 0.5);
  cursor: not-allowed;
  font-size: 0.68rem;
}

.slot-btn:disabled { opacity: 0.95; }
.slots-empty { text-align: center; color: var(--taupe); font-style: italic; padding: 24px 0; font-family: var(--serif); font-size: 1.05rem; }

/* Confirmation ribbon below calendar */
.booking-summary {
  background: var(--forest);
  color: var(--cream);
  padding: 14px 18px;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-top: 16px;
  display: none;
  align-items: center; gap: 12px;
}
.booking-summary.is-on { display: flex; }
.booking-summary svg { flex-shrink: 0; color: var(--honey-soft); }
.booking-summary .em { color: var(--honey-soft); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; margin-right: 8px; display: block; margin-bottom: 2px; }
.booking-summary .val { color: var(--cream); font-size: 0.92rem; letter-spacing: 0.02em; }

/* Admin bar */
.admin-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 22px;
  display: none;
  align-items: center; justify-content: space-between;
  gap: 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 16px 36px -14px rgba(0,0,0,0.4);
}
.admin-bar.is-on { display: flex; }
.admin-bar .admin-title { color: var(--honey-soft); display: inline-flex; align-items: center; gap: 8px; }
.admin-bar .admin-title::before { content: '◆'; color: var(--clay); }
.admin-bar .admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-bar .admin-btn {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(244,237,224,0.28);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 0.15s ease;
  cursor: pointer;
}
.admin-bar .admin-btn:hover { border-color: var(--honey); color: var(--honey-soft); }
.admin-bar .admin-btn.danger:hover { border-color: var(--clay); color: var(--clay); }
body.admin-on { padding-top: 48px; }

/* Admin hint line inside slots panel */
.admin-hint {
  display: none;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 8px;
  margin-top: 14px;
  line-height: 1.6;
}
body.admin-on .admin-hint { display: block; }
.admin-hint b { color: var(--honey-soft); font-weight: 500; }

/* Admin bookings list */
.bookings-mini {
  display: none;
  background: rgba(31,27,22,0.05);
  padding: 16px 18px;
  border-radius: 10px;
  margin-top: 14px;
  max-height: 220px;
  overflow: auto;
}
body.admin-on .bookings-mini { display: block; }
.bookings-mini h5 { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); margin-bottom: 10px; }
.bookings-mini .row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft); }
.bookings-mini .row:last-child { border-bottom: 0; }
.bookings-mini .row .k { color: var(--clay); }
.bookings-mini .empty { font-family: var(--serif); font-style: italic; color: var(--taupe); font-size: 1rem; }

/* Reminder toast */
.reminder-toast {
  position: fixed;
  bottom: 30px; left: 30px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--clay);
  padding: 18px 24px 18px 20px;
  border-radius: 12px;
  max-width: 360px;
  box-shadow: 0 24px 48px -20px rgba(31,27,22,0.4);
  font-family: var(--sans);
  z-index: 300;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}
.reminder-toast.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.reminder-toast .eyebrow-r { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay); margin-bottom: 6px; display: block; }
.reminder-toast .rem-title { font-family: var(--serif); font-size: 1.35rem; font-style: italic; line-height: 1.2; margin-bottom: 6px; color: var(--ink); }
.reminder-toast .rem-body { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.reminder-toast .rem-close { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; display: grid; place-items: center; color: var(--taupe); font-size: 1.3rem; background: none; border: 0; cursor: pointer; }
.reminder-toast .rem-close:hover { color: var(--clay); }
@media (max-width: 640px) {
  .reminder-toast { left: 16px; right: 16px; bottom: 96px; max-width: none; }
}

/* Post-booking action card — shown after patient submits */
/* Post-booking confirmation — now a full-screen modal overlay.
   Before: small inline card in the booking column.
   After:  centered popup with backdrop, shown on top of everything. */
.post-book {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 20px;
  background: rgba(31, 27, 22, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}
.post-book.is-on {
  display: flex;
  animation: pbIn 0.28s ease;
}
.post-book .pb-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 32px 30px;
  max-width: 440px;
  width: 100%;
  position: relative;
  box-shadow: 0 30px 80px -30px rgba(31,27,22,0.55);
  animation: pbCardIn 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}
@keyframes pbIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pbCardIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.post-book .pb-eyebrow { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--trust); margin-bottom: 8px; display: inline-flex; align-items: center; gap: 10px; }
.post-book .pb-eyebrow::before { content: '✓'; display: grid; place-items: center; width: 20px; height: 20px; background: var(--trust); color: var(--cream); border-radius: 50%; font-size: 0.72rem; letter-spacing: 0; }
.post-book h4 { font-family: var(--serif); font-size: 1.4rem; font-style: italic; margin-bottom: 4px; color: var(--ink); font-weight: 400; }
.post-book p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.55; }
.post-book p b { color: var(--clay); font-weight: 500; }
.post-book .pb-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.post-book .pb-btn {
  padding: 11px 18px; border-radius: 8px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--border-strong); background: var(--cream-soft); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.18s ease;
  text-decoration: none;
}
.post-book .pb-btn:hover { border-color: var(--clay); color: var(--clay); transform: translateY(-1px); }
.post-book .pb-btn.primary { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.post-book .pb-btn.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--honey-soft); }
.post-book .pb-btn svg { width: 14px; height: 14px; }
/* Big primary CTA inside the modal — main action the patient should tap */
.post-book .pb-btn-big { width: 100%; justify-content: center; padding: 16px 20px; font-size: 0.78rem; letter-spacing: 0.16em; }
.post-book .pb-btn-big svg { width: 18px; height: 18px; }
.post-book .pb-btn-subtle { background: transparent; border-color: transparent; color: var(--taupe); font-size: 0.66rem; padding: 8px 12px; }
.post-book .pb-btn-subtle:hover { color: var(--ink); background: transparent; border-color: transparent; transform: none; }
.post-book .pb-actions { flex-direction: column; align-items: stretch; gap: 8px; }
.post-book .pb-dismiss { position: absolute; top: 10px; right: 12px; color: var(--taupe); font-size: 1.2rem; background: none; border: 0; cursor: pointer; padding: 4px 8px; line-height: 1; }
.post-book .pb-dismiss:hover { color: var(--clay); }

/* Walk-in quick-entry card (inside slots panel, admin-only) */
.walkin-card {
  display: none;
  margin-top: 16px; padding: 18px 20px;
  background: var(--cream);
  border: 1px dashed var(--clay);
  border-radius: 10px;
}
.walkin-card.is-on { display: block; animation: pbIn 0.25s ease; }
.walkin-card .walkin-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.walkin-card .walkin-head h5 { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink); font-weight: 400; }
.walkin-card .walkin-head .wi-slot { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--clay); }
.walkin-card .walkin-head .close { background: none; border: 0; font-size: 1.2rem; color: var(--taupe); cursor: pointer; line-height: 1; padding: 0 4px; }
.walkin-card .walkin-head .close:hover { color: var(--clay); }
.walkin-card .wi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.walkin-card input, .walkin-card select {
  width: 100%; padding: 10px 12px;
  background: var(--cream-soft);
  border: 1px solid var(--border-strong);
  font-family: var(--sans); font-size: 0.92rem;
  color: var(--ink);
  border-radius: 6px;
}
.walkin-card input:focus, .walkin-card select:focus { outline: none; border-color: var(--clay); background: var(--cream); }
.walkin-card .wi-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.walkin-card .wi-submit {
  padding: 11px 18px;
  background: var(--forest); color: var(--cream);
  border: 0; border-radius: 6px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}
.walkin-card .wi-submit:hover { background: var(--ink); color: var(--honey-soft); }
.walkin-card .wi-hint { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); }

/* Upgraded bookings-mini rows — now with per-row action buttons */
.bookings-mini .row { flex-wrap: wrap; gap: 8px; padding: 8px 0; }
.bookings-mini .row .info { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; min-width: 60%; align-items: center; }
.bookings-mini .row .info .k { color: var(--clay); }
.bookings-mini .row .info .src { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--honey); padding: 2px 6px; border: 1px solid rgba(232,160,74,0.4); border-radius: 3px; }
.bookings-mini .row .actions { display: flex; gap: 4px; flex-wrap: wrap; }
.bookings-mini .row .actions button {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 4px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: all 0.15s ease;
}
.bookings-mini .row .actions button:hover { border-color: var(--clay); color: var(--clay); }
.bookings-mini .row .actions button.cancel:hover { border-color: var(--clay-deep); color: var(--clay-deep); }
.bookings-mini .row .actions button.confirm { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.bookings-mini .row .actions button.confirm:hover { background: var(--ink); border-color: var(--ink); color: var(--honey-soft); }

/* Notification permission nudge in admin bar */
.admin-bar .admin-perm {
  background: var(--clay); color: var(--cream);
  border: 1px solid var(--clay);
}
.admin-bar .admin-perm:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--cream); }

@media (max-width: 640px) {
  .booking-head .month-label { font-size: 1.4rem; }
  .cal-day { font-size: 0.88rem; }
  .cal-day-fill { margin-top: 2px; }
  .slots-panel { padding: 16px 14px; }
  .slots-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); }
  .slot-btn { padding: 10px 4px; font-size: 0.72rem; }
  .walkin-card .wi-row { grid-template-columns: 1fr; }
  .post-book { padding: 18px 18px; }
}