/* Incremental refinement. The original layout, palette and photographs remain the foundation. */
:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --reading-ink: #51434a;
  --secondary-ink: #70545e;
}

.section { padding-block: var(--space-7); }
.services { padding-top: var(--space-6); }
.section-heading { margin-bottom: var(--space-5); }
.section-heading p { margin-top: var(--space-3); }
.hero-copy { padding-block: var(--space-5); }
.hero-copy > p { margin-top: var(--space-4); color: var(--reading-ink); }
.hero-actions { margin-top: var(--space-4); gap: var(--space-3); }
.hero-note { margin-top: var(--space-4); }
.hero h1 { text-wrap: balance; }

.service p, .about-copy > p:not(.intro), .review-preview > p,
.faq-intro p, details p, .contact-copy > p, .contact-details p,
.section-heading p { color: var(--reading-ink); }
.gallery-footnote, .contact-details span, .contact-copy > .contact-demo {
  color: var(--secondary-ink);
}
.topbar-muted { color: #ded1d6; }
.footer-brand p, .footer-contact p, .footer-bottom,
.footer-grid > div:not(.footer-brand) > a:not(.footer-book) { color: #d9cbd1; }

.button { min-height: 52px; font-size: 14px; padding: 14px 24px; }
.button-small { min-height: 48px; padding: 12px 20px; }
.socials button, .dialog-close, .gallery-controls button {
  min-width: 44px;
  min-height: 44px;
}
.text-link, .service-link, .footer-book, .privacy-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}
.privacy-link { min-width: 80px; }
.topbar-inner { min-height: 44px; }
.topbar .icon { width: 15px; height: 15px; }
.topbar .socials .icon, .footer .socials .icon { width: 18px; height: 18px; }
.contact-socials .text-link { font-size: 15px; }
.header nav > a:not(.button) { min-height: 44px; min-width: 44px; }
.topbar button:focus-visible, .footer a:focus-visible,
.footer button:focus-visible, .gallery-dialog button:focus-visible {
  outline-color: var(--blush);
}

.services-grid { gap: var(--space-4); grid-auto-rows: 1fr; }
.service-photo { aspect-ratio: 8 / 5; flex-shrink: 0; }
.service-content { padding: var(--space-3); gap: 0; }
.service p { min-height: 0; margin-top: var(--space-2); }
.service-link { margin-top: var(--space-2); }
.service h3 { line-height: 1.15; }
.about-copy > p:not(.intro) { line-height: 1.85; }
.check-list { gap: var(--space-2); margin-block: var(--space-3) var(--space-4); }
.about-caption { color: var(--secondary-ink); }

.faq-list details { margin-bottom: 12px; }
.faq-list summary { min-height: 80px; font-size: 16px; line-height: 1.5; padding-block: 20px; }
.faq-list details[open] { background: var(--blush); }
.faq-list details[open] summary { color: var(--rose-dark); font-weight: 600; }
.faq-list details[open] > p { animation: answer-in .2s var(--ease); }
.faq-list details p { line-height: 1.8; padding-bottom: var(--space-3); }
@keyframes answer-in {
  from { opacity: .7; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.care-choice label { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
select { min-height: 52px; font-size: 16px; }
.contact-details { gap: var(--space-4); }
.contact-details h3 { font-size: 15px; }
.contact-details p { font-size: 15px; }
.contact-copy > .contact-demo { line-height: 1.65; }
.message-preview #booking-care { margin: 0 0 var(--space-2); color: var(--rose-dark); font-size: 14px; }
.gallery-item img { object-position: center; }
.gallery-item > span { line-height: 1.5; }
.gallery-dialog { scrollbar-gutter: stable; }
#gallery-image { touch-action: pan-y; user-select: none; }
.gallery-controls { gap: 12px; }
.footer-grid { gap: var(--space-5); }
.footer-grid > div:not(.footer-brand) > a:not(.footer-book) {
  min-height: 44px;
  font-size: 14px;
  margin-block: 4px;
}
.footer-bottom { gap: var(--space-3); }

@media (min-width: 701px) and (max-width: 1180px) {
  .section { padding-block: 80px; }
  .hero-copy { padding-block: var(--space-4); }
  .hero-note { margin-top: var(--space-3); }
  .services-grid { gap: var(--space-3); }
  .service h3 { min-height: 2.3em; }
  .footer-grid { gap: var(--space-5) var(--space-6); }
}
@media (min-width: 701px) and (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service h3 { font-size: 28px; }
  .service-photo { aspect-ratio: 3 / 2; }
  .about-grid { gap: var(--space-4); }
}
@media (max-width: 700px) {
  .section { padding-block: var(--space-6); }
  .services { padding-top: var(--space-5); }
  .section-heading { margin-bottom: var(--space-4); }
  .section-heading p { margin-top: var(--space-2); }
  .hero-copy { padding-block: var(--space-4); }
  .hero-copy > p { margin-top: var(--space-3); font-size: 16px; }
  .hero-actions { gap: 12px 16px; margin-top: var(--space-3); }
  .hero-actions .button, .hero-actions .text-link { font-size: 14px; }
  .hero-actions .button { min-height: 52px; padding-inline: 22px; }
  .hero-note { margin-top: var(--space-3); }
  .topbar-inner { min-height: 36px; }
  .benefits { padding-block: var(--space-4); }
  .benefits-grid { gap: var(--space-3) var(--space-2); }
  .benefit h2 { font-size: 14px; }
  .benefit p { line-height: 1.6; }
  .services-grid { gap: var(--space-3); }
  .service-content { padding: var(--space-3); }
  .service p { font-size: 16px; line-height: 1.8; }
  .service-link { font-size: 14px; }
  .about-grid { gap: var(--space-4); }
  .about-copy h2 { font-size: 42px; }
  .about-copy .intro { margin-top: var(--space-3); }
  .check-list { font-size: 14px; line-height: 1.65; }
  .check-list li { align-items: start; }
  .check-list .icon { margin-top: 4px; }
  .about .button, .invitation .button, .contact-copy > .button { font-size: 14px; }
  .reviews-grid { gap: var(--space-4); }
  .review-preview { padding: var(--space-4); }
  .faq-grid { gap: var(--space-4); }
  .faq-list details { padding-inline: var(--space-2); }
  .faq-list summary { min-height: 76px; }
  .contact-grid { gap: var(--space-5); }
  .contact-copy > p { font-size: 16px; }
  .contact-details { gap: var(--space-4); }
  .footer-grid { gap: var(--space-4) var(--space-3); }
  .footer-grid > div:not(.footer-brand) > a:not(.footer-book) { min-height: 44px; margin-block: 0; display: flex; align-items: center; }
  .footer h2 { margin-bottom: var(--space-2); }
  .footer-contact p { font-size: 14px; }
  .gallery-dialog .dialog-close { width: 44px; height: 44px; }
}
@media (hover: none) {
  .gallery-item > span { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-list details[open] > p { animation: none; }
}