:root {
      --bg:        #FDF8F2;
      --forest:    #1C3D2E;
      --forest-mid:#2A5940;
      --coral:     #E87C4A;
      --amber:     #C89038;
      --blush:     #F5DDD0;
      --cream:     #FFF6EC;
      --text:      #1A1A1A;
      --text-soft: #5A4A3A;
    }

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

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      overflow-x: hidden;
      line-height: 1.6;
    }

    .f-display { font-family: 'Fraunces', serif; }

    /* ─── Scroll reveal ─────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
                  transform 0.75s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.in { opacity: 1; transform: none; }
    .reveal-delay-1 { transition-delay: 0.12s; }
    .reveal-delay-2 { transition-delay: 0.24s; }
    .reveal-delay-3 { transition-delay: 0.36s; }
    .reveal-delay-4 { transition-delay: 0.48s; }
    /* Fallback — ensures content is always visible */
    .reveal-shown { opacity: 1 !important; transform: none !important; }

    /* ─── Page load animations ──────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(40px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .load-1 { animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
    .load-2 { animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.25s both; }
    .load-3 { animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.4s both; }
    .load-4 { animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.55s both; }

    /* ─── Nav ───────────────────────────────────────────── */
    #nav {
      position: fixed; inset: 0 0 auto 0; z-index: 100;
      padding: 22px 48px;
      display: flex; align-items: center; justify-content: space-between;
      transition: background 0.35s ease, padding 0.35s ease,
                  box-shadow 0.35s ease;
    }
    #nav.solid {
      background: rgba(253,248,242,0.96);
      backdrop-filter: blur(12px);
      padding: 14px 48px;
      box-shadow: 0 2px 24px rgba(28,61,46,0.07);
    }
    .nav-logo { font-family: 'Fraunces', serif; font-style: italic; font-weight: 700;
      font-size: 1.45rem; color: white; text-decoration: none; letter-spacing: -0.01em;
      transition: color 0.3s; }
    #nav.solid .nav-logo { color: var(--forest); }
    .nav-link { color: rgba(255,255,255,0.82); text-decoration: none; font-size: 0.9rem;
      font-weight: 500; transition: color 0.2s; }
    .nav-link:hover { color: white; }
    #nav.solid .nav-link { color: var(--text-soft); }
    #nav.solid .nav-link:hover { color: var(--forest); }

    /* ─── Buttons ───────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 32px; border-radius: 50px;
      font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.95rem;
      text-decoration: none; border: none; cursor: pointer;
      transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.3s ease, opacity 0.2s ease;
    }
    .btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
    .btn:active { transform: scale(0.96) !important; }

    .btn-coral {
      background: var(--coral); color: white;
      box-shadow: 0 8px 28px rgba(232,124,74,0.38);
    }
    .btn-coral:hover {
      transform: scale(1.06) translateY(-3px);
      box-shadow: 0 16px 40px rgba(232,124,74,0.52);
    }

    .btn-ghost {
      background: transparent; color: white;
      border: 2px solid rgba(255,255,255,0.45);
    }
    .btn-ghost:hover {
      transform: scale(1.04) translateY(-2px);
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.8);
    }

    .btn-forest {
      background: var(--forest); color: white;
      box-shadow: 0 8px 28px rgba(28,61,46,0.3);
    }
    .btn-forest:hover {
      transform: scale(1.06) translateY(-3px);
      box-shadow: 0 16px 40px rgba(28,61,46,0.45);
    }

    /* ─── Tag pill ──────────────────────────────────────── */
    .tag {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 18px; border-radius: 50px;
      background: var(--forest); color: white;
      font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
    }
    .tag::before {
      content: ''; width: 8px; height: 8px; border-radius: 50%;
      background: var(--coral); flex-shrink: 0;
    }
    .tag-light {
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.25);
      color: white;
    }
    .tag-blush { background: var(--blush); color: var(--forest); }
    .tag-blush::before { background: var(--amber); }

    /* ─── Hero ──────────────────────────────────────────── */
    .hero {
      position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden;
      display: flex; align-items: flex-end;
      background: var(--forest);
    }
    .hero-img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: 50% 52%; opacity: 0.68;
    }
    @media (max-width: 768px) {
      .hero-img { object-position: 50% 46%; }
    }
    .hero-grad {
      position: absolute; inset: 0;
      background: linear-gradient(
        to top,
        rgba(18,42,28,0.92) 0%,
        rgba(18,42,28,0.5) 45%,
        rgba(18,42,28,0.15) 100%
      );
    }
    .hero-content { position: relative; z-index: 2; padding: 0 6% 10vh; max-width: 900px; }

    /* ─── Stats strip ───────────────────────────────────── */
    .stats { background: var(--forest); padding: 42px 0; }
    .stat-num {
      font-family: 'Fraunces', serif; font-style: italic; font-weight: 700;
      font-size: 2.6rem; color: var(--blush); line-height: 1;
    }
    .stat-label {
      font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em;
      text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 6px;
    }

    /* ─── Photo card (polaroid-style) ───────────────────── */
    .photo-card {
      border-radius: 16px; overflow: hidden;
      box-shadow: 0 18px 50px rgba(28,61,46,0.18);
      transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.35s ease;
      position: relative; cursor: default;
    }
    .photo-card:hover {
      transform: rotate(0deg) scale(1.04) translateY(-10px) !important;
      box-shadow: 0 32px 70px rgba(28,61,46,0.28);
      z-index: 5;
    }

    /* ─── Feature cards ─────────────────────────────────── */
    .feat-card {
      background: white; border-radius: 28px; padding: 36px 28px;
      box-shadow: 0 6px 32px rgba(28,61,46,0.07);
      transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.3s ease;
    }
    .feat-card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 24px 56px rgba(28,61,46,0.14);
    }
    .feat-icon {
      width: 56px; height: 56px; border-radius: 16px;
      background: var(--blush);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; margin-bottom: 20px;
      transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
    }
    .feat-card:hover .feat-icon { transform: rotate(-8deg) scale(1.1); }

    /* ─── Service cards ─────────────────────────────────── */
    .service-card {
      border-radius: 28px; padding: 40px 32px;
      transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.35s ease;
    }
    .service-card:hover { transform: translateY(-8px) scale(1.01); }
    .check-item { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .check-dot {
      width: 22px; height: 22px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.65rem; flex-shrink: 0;
    }

    /* ─── Gallery grid (masonry — tiles always exactly fill their frame) ─── */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 132px;
      grid-auto-flow: row dense;
      gap: 16px;
    }
    .gallery-item {
      border-radius: 20px; overflow: hidden;
      box-shadow: 0 8px 32px rgba(28,61,46,0.1);
      transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.3s ease;
      cursor: pointer;
      grid-row: span 2;
    }
    .gallery-item.tall { grid-row: span 3; }
    .gallery-item.wide { grid-column: span 2; grid-row: span 2; }
    .gallery-item:hover {
      transform: scale(1.04) translateY(-6px);
      box-shadow: 0 20px 50px rgba(28,61,46,0.2);
      z-index: 5; position: relative;
    }
    .gallery-item img { width: 100%; height: 100%; display: block; object-fit: cover; }

    /* ─── Review cards ──────────────────────────────────── */
    .review-card {
      background: white; border-radius: 24px; padding: 28px;
      box-shadow: 0 6px 28px rgba(28,61,46,0.07);
      transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.3s ease;
    }
    .review-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 50px rgba(28,61,46,0.14);
    }
    .stars { color: var(--amber); letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 14px; }

    /* ─── Themed section ────────────────────────────────── */
    .themed-wrap {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    }
    .themed-photo {
      border-radius: 18px; overflow: hidden;
      box-shadow: 0 10px 36px rgba(28,61,46,0.18);
      transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
    }
    .themed-photo:hover { transform: scale(1.05) translateY(-6px); z-index: 5; position: relative; }
    .themed-photo img { width: 100%; height: 280px; object-fit: cover; display: block; }

    /* ─── Noise texture overlay ─────────────────────────── */
    .noise::after {
      content: '';
      position: absolute; inset: 0; pointer-events: none; z-index: 0;
      opacity: 0.025;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
    }

    /* ─── Misc ──────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--forest); border-radius: 3px; }

    /* ─── Mobile ────────────────────────────────────────── */
    @media (max-width: 768px) {
      #nav { padding: 18px 24px; }
      #nav.solid { padding: 12px 24px; }
      .hero-content { padding: 0 6% 12vh; }
      .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 110px; }
      .gallery-item.wide { grid-column: span 2; }
      .themed-wrap { grid-template-columns: repeat(2, 1fr); }
      .themed-wrap .themed-photo:last-child { display: none; }
      /* Stack two-column grids */
      #about-grid, #services-grid, #themed-grid, #stats-grid, #feats-grid {
        grid-template-columns: 1fr !important;
      }
      #about-grid .collage-col { height: 360px !important; }
      #stats-grid { grid-template-columns: repeat(2,1fr) !important; }
      .max-w-840 { max-width: 100% !important; }
    }
    @media (max-width: 480px) {
      .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 150px; }
      .gallery-item.wide { grid-column: span 1; }
    }

/* ─── Before/After slider ───────────────────────────────────────── */
.ba-section { padding: 130px 0; background: var(--cream); position: relative; }
.ba-container { max-width: 1200px; margin: 0 auto; padding: 0 48px; text-align: center; }
.ba-eyebrow { font-size: 0.72rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--coral); margin-bottom: 20px; font-weight: 500; }
.ba-title { font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--forest); margin-bottom: 56px; line-height: 1.05; letter-spacing: -0.01em; }
.ba-title em { color: var(--coral); font-style: italic; }
.ba-slider { position: relative; aspect-ratio: 4 / 5; max-width: 600px; margin: 0 auto; overflow: hidden; border-radius: 14px; user-select: none; cursor: ew-resize; box-shadow: 0 20px 60px rgba(28,61,46,0.18); background: var(--bg); }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba-img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-after { z-index: 1; }
/* No transition during drag — the wipe must track the pointer exactly.
   The 0.05s linear transition made it lag ~50ms behind the finger.
   .ba-animating (toggled by JS) re-adds a smooth glide only for
   programmatic pair switches (thumbnail / prev / next). */
.ba-before { z-index: 2; clip-path: inset(0 50% 0 0); will-change: clip-path; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; will-change: left; z-index: 3; }
.ba-slider.ba-animating .ba-before { transition: clip-path 0.34s cubic-bezier(0.22,1,0.36,1); }
.ba-slider.ba-animating .ba-handle { transition: left 0.34s cubic-bezier(0.22,1,0.36,1); }
/* Spinner shown only if a switch is still loading after ~180ms — the
   transition-delay means instant (cache-hot) switches never flash it. */
.ba-slider::after {
  content: ""; position: absolute; z-index: 4; top: 50%; left: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.5); border-top-color: #fff;
  opacity: 0; pointer-events: none;
  animation: baSpin 0.7s linear infinite;
  transition: opacity 0.12s ease;
}
.ba-slider.ba-loading { cursor: progress; }
.ba-slider.ba-loading::after { opacity: 1; transition-delay: 0.18s; }
@keyframes baSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ba-slider::after { animation: none; } }
.ba-handle-line { flex: 1; width: 4px; background: white; box-shadow: 0 0 14px rgba(0,0,0,0.45), 0 0 2px rgba(0,0,0,0.35); border-radius: 2px; }
.ba-handle-btn { width: 64px; height: 64px; border-radius: 50%; background: white; display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.05); color: var(--forest); transition: transform 0.25s ease, box-shadow 0.25s ease; margin: 6px 0; flex-shrink: 0; }
.ba-handle-btn svg { width: 26px; height: 26px; stroke-width: 3; }
.ba-slider:hover .ba-handle-btn { transform: scale(1.12); box-shadow: 0 10px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.05); }
@keyframes baHandleHint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.ba-slider:not(:hover) .ba-handle-btn { animation: baHandleHint 2.6s ease-in-out 1s 2; }
.ba-pill { position: absolute; top: 24px; padding: 8px 18px; color: white; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; border-radius: 999px; font-weight: 600; pointer-events: none; z-index: 2; }
.ba-pill-before { left: 24px; background: rgba(0,0,0,0.55); }
.ba-pill-after { right: 24px; background: var(--coral); }
.ba-thumbs { display: flex; gap: 14px; justify-content: center; margin-top: 28px; }
.ba-thumb { width: 88px; height: 88px; border-radius: 10px; overflow: hidden; border: 3px solid transparent; padding: 0; background: none; cursor: pointer; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.ba-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-thumb:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(28,61,46,0.15); }
.ba-thumb[data-active] { border-color: var(--coral); }
.ba-caption { margin-top: 22px; color: var(--text-soft); font-size: 0.95rem; }
@media (max-width: 768px) {
  .ba-slider { max-width: 100%; }
  .ba-handle-btn { width: 54px; height: 54px; }
  .ba-handle-btn svg { width: 22px; height: 22px; }
}

/* ─── Reviews carousel ──────────────────────────────────────────── */
.reviews-section { padding: 130px 0; background: var(--cream); position: relative; overflow: hidden; }
.reviews-bg-orb { position: absolute; top: -40px; right: -40px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(28,61,46,0.07) 0%, transparent 70%); pointer-events: none; }
.reviews-container { max-width: 880px; margin: 0 auto; padding: 0 48px; text-align: center; position: relative; }
.reviews-eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--coral); padding: 6px 14px; background: rgba(232,124,74,0.1); border-radius: 999px; margin-bottom: 22px; font-weight: 500; }
.reviews-title { font-size: clamp(2.2rem, 4.5vw, 3.2rem); color: var(--forest); margin-bottom: 56px; letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; }
.reviews-title em { font-style: italic; color: var(--coral); font-weight: 700; }
.reviews-carousel { position: relative; display: flex; align-items: center; gap: 18px; }
/* Cards are stacked in a single grid cell so the track always grows to the
   tallest card — the white box can never be shorter than its text. This
   replaces the old `position:absolute; inset:0` + fixed 280px, which clipped
   long reviews on narrow viewports (text spilled out the top and bottom). */
.reviews-track { flex: 1; min-width: 0; display: grid; }
.review-card-c { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 0.45s ease, transform 0.45s ease; padding: 48px 44px; background: white; border-radius: 18px; box-shadow: 0 16px 50px rgba(28,61,46,0.08); display: flex; flex-direction: column; justify-content: center; transform: translateY(8px); }
.review-card-c[data-active] { opacity: 1; pointer-events: auto; transform: translateY(0); }
.review-card-c .stars { color: var(--coral); font-size: 1.2rem; letter-spacing: 0.18em; margin-bottom: 22px; }
.review-card-c p { font-size: 1.15rem; line-height: 1.75; color: var(--text); margin-bottom: 24px; font-style: italic; font-family: 'Fraunces', serif; font-weight: 400; }
.review-card-c .review-author { color: var(--text-soft); font-size: 0.95rem; font-weight: 500; }
.reviews-arrow { width: 52px; height: 52px; border-radius: 50%; background: white; border: 1px solid rgba(28,61,46,0.12); font-size: 1.6rem; color: var(--forest); cursor: pointer; flex-shrink: 0; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; line-height: 1; padding: 0 0 4px 0; box-shadow: 0 4px 14px rgba(28,61,46,0.06); }
.reviews-arrow:hover { background: var(--blush); transform: scale(1.06); box-shadow: 0 6px 18px rgba(28,61,46,0.12); }
.reviews-dots { margin-top: 36px; display: flex; gap: 10px; justify-content: center; }
.reviews-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(28,61,46,0.2); cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; }
.reviews-dots button:hover { background: rgba(28,61,46,0.4); }
.reviews-dots button[data-active] { background: var(--coral); transform: scale(1.3); }
@media (max-width: 720px) {
  .reviews-container { padding: 0 18px; }
  .reviews-carousel { gap: 8px; }
  .reviews-arrow { width: 42px; height: 42px; font-size: 1.3rem; }
  .review-card-c { padding: 30px 22px; }
  .review-card-c p { font-size: 1.05rem; }
}

/* ─── Gallery enhancements + lightbox ───────────────────────────── */
.gallery-item { cursor: pointer; overflow: hidden; transition: transform 0.3s ease; }
.gallery-item img { transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-cta-link { display: inline-block; color: var(--coral); border-bottom: 1px solid var(--coral); text-decoration: none; padding-bottom: 2px; font-weight: 500; transition: color 0.2s, border-color 0.2s; }
.gallery-cta-link:hover { color: var(--forest); border-bottom-color: var(--forest); }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: lbFadeIn 0.3s ease-out; }
.lightbox[hidden] { display: none; }
.lightbox-img { max-width: 88vw; max-height: 88vh; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); animation: lbZoomIn 0.4s cubic-bezier(0.16,1,0.3,1); }
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: none; border: none; color: white; cursor: pointer; opacity: 0.55; transition: opacity 0.2s, transform 0.2s; line-height: 1; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { opacity: 1; transform: scale(1.1); }
.lightbox-close { top: 24px; right: 24px; font-size: 2.4rem; padding: 8px 14px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); font-size: 3.5rem; padding: 0 24px; }
.lightbox-prev:hover, .lightbox-next:hover { transform: translateY(-50%) scale(1.1); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbZoomIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ─── Home contact ─────────────────────────────────────────────── */
.contact-home { padding: 130px 0; background: var(--bg); }
.contact-home-container { max-width: 1240px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.contact-eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--coral); padding: 6px 14px; background: rgba(232,124,74,0.1); border-radius: 999px; margin-bottom: 22px; font-weight: 500; }
.contact-title { font-size: clamp(2.2rem, 4.5vw, 3.2rem); color: var(--forest); margin-bottom: 24px; letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; }
.contact-blurb { color: var(--text-soft); margin-bottom: 36px; line-height: 1.75; font-size: 1.02rem; }
.contact-row { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(28,61,46,0.12); align-items: start; }
.contact-row:last-of-type { border-bottom: 1px solid rgba(28,61,46,0.12); }
.contact-row strong { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--forest); font-weight: 600; padding-top: 2px; }
.contact-row span { color: var(--text); line-height: 1.6; }
.contact-wa-link { color: var(--coral); text-decoration: none; border-bottom: 1px solid var(--coral); transition: color 0.2s, border-color 0.2s; }
.contact-wa-link:hover { color: var(--forest); border-bottom-color: var(--forest); }
.contact-page-cta { display: inline-block; margin-top: 32px; color: var(--coral); border-bottom: 1px solid var(--coral); text-decoration: none; padding-bottom: 2px; font-weight: 500; }
.contact-home-map { min-height: 480px; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(28,61,46,0.1); background: var(--cream); }
.contact-home-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-map-placeholder { width: 100%; height: 100%; min-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--forest); opacity: 0.5; padding: 40px; text-align: center; }
.contact-map-placeholder p { font-size: 0.92rem; }
@media (max-width: 880px) {
  .contact-home-container { grid-template-columns: 1fr; gap: 40px; }
  .contact-home-map { min-height: 320px; }
  .contact-map-placeholder { min-height: 320px; }
}

/* ─── Home booking ─────────────────────────────────────────────── */
.booking-home { padding: 130px 0; background: var(--cream); }
.booking-container { max-width: 820px; margin: 0 auto; padding: 0 48px; }
.booking-eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--coral); padding: 6px 14px; background: rgba(232,124,74,0.1); border-radius: 999px; margin-bottom: 22px; font-weight: 500; }
.booking-title { font-size: clamp(2.2rem, 4.5vw, 3.2rem); color: var(--forest); margin-bottom: 18px; letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; text-align: left; }
.booking-title em { font-style: italic; color: var(--coral); font-weight: 700; }
.booking-sub { color: var(--text-soft); margin-bottom: 56px; font-size: 1.05rem; line-height: 1.7; }
.booking-form fieldset { border: none; padding: 0; margin: 0 0 40px; }
.booking-form legend { font-family: 'Fraunces', serif; font-size: 1.25rem; color: var(--forest); margin-bottom: 22px; padding: 0; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.booking-step-num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--coral); color: white; font-family: 'DM Sans', sans-serif; font-size: 0.92rem; font-weight: 600; font-style: normal; }
.booking-radio { display: block; padding: 18px 20px; margin-bottom: 10px; background: white; border: 1.5px solid rgba(28,61,46,0.12); border-radius: 12px; cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.booking-radio:hover { border-color: var(--coral); }
.booking-radio input { margin-right: 14px; vertical-align: middle; accent-color: var(--coral); }
.booking-radio-label { display: inline-flex; flex-direction: column; gap: 2px; vertical-align: middle; }
.booking-radio-label strong { color: var(--forest); font-weight: 600; font-size: 1rem; }
.booking-radio-label > span { color: var(--text-soft); font-size: 0.88rem; }
.booking-radio:has(input:checked) { border-color: var(--coral); background: rgba(232,124,74,0.06); box-shadow: 0 4px 14px rgba(232,124,74,0.08); }
.booking-field { display: block; margin-bottom: 16px; }
.booking-field label { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--forest); margin-bottom: 8px; font-weight: 600; }
.booking-field input[type="text"], .booking-field input[type="tel"], .booking-field input[type="date"], .booking-field select, .booking-field textarea { width: 100%; padding: 14px 16px; border: 1.5px solid rgba(28,61,46,0.15); border-radius: 10px; font-family: inherit; font-size: 0.98rem; background: white; color: var(--text); transition: border-color 0.2s; }
.booking-field input:focus, .booking-field select:focus, .booking-field textarea:focus { outline: none; border-color: var(--coral); }
.booking-field textarea { resize: vertical; min-height: 60px; }
.booking-row-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.booking-preview { background: white; border-radius: 12px; padding: 24px; margin: 28px 0; border: 1px dashed rgba(28,61,46,0.2); }
.booking-preview strong { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--forest); margin-bottom: 12px; font-weight: 600; }
.booking-preview pre { white-space: pre-wrap; font-family: 'Fraunces', serif; color: var(--text); font-size: 1.02rem; line-height: 1.7; margin: 0; font-style: italic; }
.booking-submit { display: flex; align-items: center; justify-content: center; width: 100%; padding: 20px; background: #25D366; color: white; border: none; border-radius: 999px; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: transform 0.2s, background 0.2s, box-shadow 0.2s; font-family: inherit; box-shadow: 0 8px 20px rgba(37,211,102,0.25); }
.booking-submit:hover { background: #1ebc5d; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,211,102,0.35); }
.booking-reassurance { text-align: center; color: var(--text-soft); font-size: 0.9rem; margin-top: 18px; }
@media (max-width: 600px) {
  .booking-row-two { grid-template-columns: 1fr; }
  .booking-title { font-size: 2rem; }
}

/* ─── Multipage shared shell ────────────────────────────────────── */
.page-hero { padding: 160px 48px 100px; background: var(--forest); color: white; text-align: center; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 700px; background: radial-gradient(circle, rgba(232,124,74,0.12) 0%, transparent 65%); pointer-events: none; }
.page-hero-inner { max-width: 840px; margin: 0 auto; position: relative; z-index: 1; }
.page-eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--blush); margin-bottom: 22px; font-weight: 500; padding: 6px 16px; background: rgba(245,221,208,0.12); border-radius: 999px; }
.page-h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin-bottom: 26px; line-height: 1.04; letter-spacing: -0.02em; font-weight: 700; }
.page-h1 em { color: var(--blush); font-style: italic; }
.page-lede { font-size: 1.12rem; line-height: 1.75; opacity: 0.9; }
.section-h2 { font-size: clamp(2rem, 4.5vw, 3rem); color: var(--forest); text-align: center; margin-bottom: 48px; letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; }
.page-end-cta { padding: 130px 48px; background: var(--cream); text-align: center; }
.page-end-cta h2 { font-size: clamp(2rem, 4.5vw, 3rem); color: var(--forest); margin-bottom: 18px; letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; }
.page-end-cta-blurb { color: var(--text-soft); margin-bottom: 36px; font-size: 1.05rem; }
.page-end-cta-note {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: 12px; max-width: 600px; margin: 0 auto 36px; padding: 18px 28px;
  background: var(--blush); color: var(--forest);
  border-radius: 20px; font-size: 1.06rem; font-weight: 500; line-height: 1.55;
  box-shadow: 0 12px 30px rgba(232,124,74,0.18);
}
.page-end-cta-note-tag {
  flex-shrink: 0; background: var(--coral); color: #fff;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
}
.big-cta { display: inline-block; padding: 18px 42px; background: var(--coral); color: white; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 1.02rem; transition: transform 0.2s, background 0.2s, box-shadow 0.2s; box-shadow: 0 8px 24px rgba(232,124,74,0.25); }
.big-cta:hover { background: #d96d3b; transform: translateY(-3px); box-shadow: 0 12px 32px rgba(232,124,74,0.35); }

/* ─── Services page ─────────────────────────────────────────────── */
.package-section { padding: 110px 48px; max-width: 1180px; margin: 0 auto; }
.package-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.package-card { background: white; border-radius: 20px; padding: 56px 44px; box-shadow: 0 16px 50px rgba(28,61,46,0.08); position: relative; }
.package-card-luxury { background: var(--forest); color: white; }
.package-tag { position: absolute; top: 24px; right: 24px; padding: 6px 14px; background: var(--blush); color: var(--forest); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 999px; font-weight: 600; }
.package-tag-luxury { background: var(--coral); color: white; }
.package-card h2 { font-size: 2.2rem; margin-bottom: 14px; color: var(--forest); font-weight: 700; letter-spacing: -0.01em; }
.package-card-luxury h2 { color: white; }
.package-price { font-weight: 600; margin-bottom: 30px; color: var(--coral); font-size: 1.05rem; }
.package-card-luxury .package-price { color: var(--blush); }
.package-features { list-style: none; padding: 0; margin: 0 0 36px; }
.package-features li { padding: 12px 0; border-bottom: 1px solid rgba(28,61,46,0.1); position: relative; padding-left: 26px; font-size: 0.96rem; }
.package-features li::before { content: "✓"; position: absolute; left: 0; color: var(--coral); font-weight: 700; }
.package-card-luxury .package-features li { border-color: rgba(255,255,255,0.12); }
.package-card-luxury .package-features li::before { color: var(--blush); }
.package-cta { display: inline-block; padding: 16px 32px; border-radius: 999px; background: var(--forest); color: white; text-decoration: none; font-weight: 600; transition: transform 0.2s, background 0.2s; }
.package-cta:hover { transform: translateY(-2px); }
.package-card-luxury .package-cta { background: var(--coral); }
.addons-section { padding: 90px 48px; max-width: 820px; margin: 0 auto; }
.addons-table { width: 100%; border-collapse: collapse; }
.addons-table td { padding: 20px 0; border-bottom: 1px solid rgba(28,61,46,0.12); font-size: 1rem; }
.addons-table td:last-child { text-align: right; font-weight: 600; color: var(--coral); }
.services-faq-section { padding: 90px 48px; max-width: 820px; margin: 0 auto; }
.services-faq-list details { margin-bottom: 14px; padding: 22px 28px; background: white; border-radius: 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(28,61,46,0.05); transition: box-shadow 0.2s; }
.services-faq-list details[open] { box-shadow: 0 8px 24px rgba(28,61,46,0.08); }
.services-faq-list summary { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 600; color: var(--forest); list-style: none; position: relative; padding-right: 32px; }
.services-faq-list summary::-webkit-details-marker { display: none; }
.services-faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--coral); font-weight: 400; transition: transform 0.2s; }
.services-faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.services-faq-list details p { margin-top: 14px; color: var(--text-soft); line-height: 1.75; }
@media (max-width: 768px) { .package-grid { grid-template-columns: 1fr; } }

/* ─── Gallery page ──────────────────────────────────────────────── */
.gallery-full { padding: 110px 0; background: var(--bg); }
.gallery-full-container { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
.gallery-themed-page { padding: 110px 0; background: var(--cream); }
.gallery-themed-container { max-width: 1180px; margin: 0 auto; padding: 0 48px; text-align: center; }
.gallery-themed-blurb { color: var(--text-soft); margin: -28px 0 48px; font-size: 1.05rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.themed-photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.themed-strip-photo { border-radius: 14px; overflow: hidden; box-shadow: 0 8px 28px rgba(28,61,46,0.1); }
.themed-strip-photo img { width: 100%; height: 360px; object-fit: cover; display: block; transition: transform 0.7s ease-out; }
.themed-strip-photo:hover img { transform: scale(1.04); }
@media (max-width: 768px) { .themed-photo-strip { grid-template-columns: 1fr; } }

/* ─── Contact page ──────────────────────────────────────────────── */
.contact-page-grid { padding: 110px 48px; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; }
.contact-page-info { display: flex; flex-direction: column; gap: 20px; }
.contact-card { background: white; padding: 32px; border-radius: 14px; box-shadow: 0 8px 28px rgba(28,61,46,0.06); }
.contact-card-label { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--forest); font-weight: 600; margin-bottom: 14px; }
.contact-card-value { color: var(--text); line-height: 1.7; font-size: 1rem; }
.contact-hours { width: 100%; border-collapse: collapse; }
.contact-hours td { padding: 10px 0; border-bottom: 1px solid rgba(28,61,46,0.08); color: var(--text); }
.contact-hours tr:last-child td { border-bottom: none; }
.contact-hours td:last-child { text-align: right; color: var(--text-soft); }
.contact-wa-btn { display: inline-flex; align-items: center; margin-top: 16px; padding: 14px 26px; background: #25D366; color: white; border-radius: 999px; text-decoration: none; font-weight: 600; transition: transform 0.2s, background 0.2s; }
.contact-wa-btn:hover { background: #1ebc5d; transform: translateY(-2px); }
.contact-page-map { border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(28,61,46,0.1); background: var(--cream); min-height: 500px; }
.contact-form-section { padding: 110px 48px; background: var(--cream); }
.contact-form-container { max-width: 720px; margin: 0 auto; }
.contact-form-blurb { text-align: center; color: var(--text-soft); margin: -28px 0 48px; font-size: 1.05rem; }
.contact-form { background: white; padding: 44px; border-radius: 16px; box-shadow: 0 16px 50px rgba(28,61,46,0.08); }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 880px) {
  .contact-page-grid { grid-template-columns: 1fr; }
  .contact-form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 28px; }
}

/* ─── Booking page ──────────────────────────────────────────────── */
.booking-page-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 56px; max-width: 1280px; margin: 0 auto; padding: 90px 48px 130px; align-items: start; }
.booking-page-form-wrap { background: white; padding: 48px; border-radius: 18px; box-shadow: 0 16px 50px rgba(28,61,46,0.08); }
.booking-page-form-wrap .booking-form fieldset { margin-bottom: 32px; }
.booking-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 100px; }
.booking-side-card { background: var(--cream); padding: 30px; border-radius: 14px; }
.booking-side-card h3 { font-size: 1.3rem; color: var(--forest); margin-bottom: 18px; font-weight: 700; }
.booking-side-card table { width: 100%; border-collapse: collapse; }
.booking-side-card td { padding: 10px 0; border-bottom: 1px solid rgba(28,61,46,0.08); font-size: 0.94rem; }
.booking-side-card tr:last-child td { border-bottom: none; }
.booking-side-card td:last-child { text-align: right; font-weight: 600; color: var(--coral); }
.booking-side-card ul { list-style: none; padding: 0; margin: 0; }
.booking-side-card li { padding: 8px 0 8px 22px; color: var(--text); position: relative; font-size: 0.96rem; }
.booking-side-card li::before { content: "✓"; position: absolute; left: 0; color: var(--coral); font-weight: 700; }
.booking-side-card p { color: var(--text-soft); line-height: 1.8; font-size: 0.95rem; }
.booking-side-card p strong { color: var(--forest); }
@media (max-width: 980px) {
  .booking-page-grid { grid-template-columns: 1fr; gap: 32px; padding: 60px 32px 90px; }
  .booking-side { position: static; }
  .booking-page-form-wrap { padding: 32px 24px; }
}

/* ─── Scroll progress bar ───────────────────────────────────────── */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--coral), var(--blush)); z-index: 200; width: 0; transition: width 0.05s linear; pointer-events: none; }

/* ─── Hero subtle Ken Burns ─────────────────────────────────────── */
@keyframes kenBurns { 0% { transform: scale(1.04) translate(0, 0); } 50% { transform: scale(1.10) translate(-1%, -1%); } 100% { transform: scale(1.04) translate(0, 0); } }
.hero-img { animation: kenBurns 24s ease-in-out infinite; transform-origin: center; will-change: transform; }

/* ─── Animated nav underlines ───────────────────────────────────── */
#nav .nav-link { position: relative; padding-bottom: 4px; transition: color 0.2s; }
#nav .nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--coral); transform: scaleX(0); transform-origin: right; transition: transform 0.32s cubic-bezier(0.65,0,0.35,1); }
#nav .nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ─── Stat counter reveal ──────────────────────────────────────── */
.stat-num { display: inline-block; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.stat[data-counted] .stat-num { animation: statPop 0.6s cubic-bezier(0.16,1,0.3,1); }
@keyframes statPop { 0% { transform: scale(0.85) translateY(8px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }

/* ─── Card hover lift (packages, reviews, etc.) ────────────────── */
.package-card, .contact-card, .booking-side-card, .review-card-c {
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s cubic-bezier(0.16,1,0.3,1);
}
.package-card:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(28,61,46,0.14); }
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(28,61,46,0.1); }
.booking-side-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(28,61,46,0.08); }

/* ─── Marquee pause on hover ────────────────────────────────────── */
.marquee:hover { animation-play-state: paused; }
.marquee-track:hover, .marquee-row:hover { animation-play-state: paused; }

/* ─── Pill/eyebrow shimmer on view ──────────────────────────────── */
@keyframes shimmerIn { 0% { opacity: 0; letter-spacing: 0.18em; } 100% { opacity: 1; letter-spacing: 0.35em; } }
.reviews-eyebrow, .booking-eyebrow, .ba-eyebrow, .contact-eyebrow, .gallery-home-eyebrow, .page-eyebrow { animation: shimmerIn 0.9s ease-out 0.1s both; }

/* ─── Booking radio: pop on check ──────────────────────────────── */
.booking-radio { transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s; }
.booking-radio:has(input:checked) { transform: translateX(4px); }

/* ─── Gallery tile clip-reveal (more dramatic) ─────────────────── */
.gallery-item { clip-path: inset(0 0 100% 0); opacity: 0; transition: clip-path 0.8s cubic-bezier(0.16,1,0.3,1), opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.3s ease; }
.gallery-item.in { clip-path: inset(0); opacity: 1; }
/* Keyboard affordance — tiles are role="button" and open the lightbox on
   Enter/Space; the global :focus-visible rule only covers real a/button
   elements, so the div tiles need their own ring. */
.gallery-item:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

/* ─── Booking submit button shimmer ────────────────────────────── */
.booking-submit { position: relative; overflow: hidden; }
.booking-submit::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transition: left 0.6s; }
.booking-submit:hover::before { left: 100%; }

/* ─── Big CTA shimmer ──────────────────────────────────────────── */
.big-cta { position: relative; overflow: hidden; }
.big-cta::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.7s; }
.big-cta:hover::before { left: 100%; }

/* ─── Hero text breathing ───────────────────────────────────────── */
.hero-content h1 { animation: heroBreathe 8s ease-in-out infinite; }
@keyframes heroBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ─── Smooth focus ring everywhere ─────────────────────────────── */
/* :focus-visible (not :focus) so a mouse click never draws the ring —
   keyboard navigation still shows it. Fixes the orange box around the
   booking radios on click while keeping accessibility intact. */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

/* ─── Respect reduced-motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .hero-img, .hero-content h1, .marquee, .marquee-track, .marquee-row { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { transition-duration: 0.001s !important; animation-duration: 0.001s !important; }
}

/* ─── Services price list (client price set) ──────────────────── */
.svc-section { padding: 96px 48px; max-width: 1080px; margin: 0 auto; }
.svc-section + .svc-section { padding-top: 0; }
.svc-head { text-align: center; margin-bottom: 14px; }
.svc-eyebrow { display: inline-block; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--coral); font-weight: 700; margin-bottom: 14px; }
.svc-head h2 { font-family: 'Fraunces', serif; font-size: clamp(2rem, 4.5vw, 2.8rem); color: var(--forest); letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; }
.svc-intro { max-width: 720px; margin: 18px auto 0; text-align: center; color: var(--text-soft); line-height: 1.8; font-size: 1rem; }
.svc-tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 52px; }
.svc-tier { background: white; border-radius: 20px; padding: 44px 40px; box-shadow: 0 16px 50px rgba(28,61,46,0.08); position: relative; }
.svc-tier-luxury { background: var(--forest); color: white; }
.svc-tier h3 { font-family: 'Fraunces', serif; font-size: 1.7rem; font-weight: 700; color: var(--forest); margin-bottom: 6px; letter-spacing: -0.01em; }
.svc-tier-luxury h3 { color: white; }
.svc-tier-sub { color: var(--text-soft); font-size: 0.92rem; line-height: 1.7; margin-bottom: 26px; }
.svc-tier-luxury .svc-tier-sub { color: rgba(255,255,255,0.7); }
.svc-points { list-style: none; padding: 0; margin: 0 0 30px; }
.svc-points li { position: relative; padding: 0 0 16px 28px; font-size: 0.92rem; line-height: 1.6; color: var(--text-soft); }
.svc-tier-luxury .svc-points li { color: rgba(255,255,255,0.78); }
.svc-points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--coral); font-weight: 700; }
.svc-tier-luxury .svc-points li::before { color: var(--blush); }
.svc-points strong { color: var(--forest); font-weight: 600; }
.svc-tier-luxury .svc-points strong { color: var(--blush); }
.price-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.price-table caption { text-align: left; font-family: 'Fraunces', serif; font-size: 1.02rem; font-weight: 600; color: var(--forest); padding: 18px 0 8px; letter-spacing: 0.01em; }
.svc-tier-luxury .price-table caption { color: var(--blush); }
.price-table td { padding: 11px 0; border-bottom: 1px solid rgba(28,61,46,0.1); font-size: 0.92rem; color: var(--text-soft); }
.svc-tier-luxury .price-table td { border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.78); }
.price-table td:last-child { text-align: right; font-weight: 600; color: var(--coral); white-space: nowrap; }
.svc-tier-luxury .price-table td:last-child { color: var(--blush); }
.price-qual { font-size: 0.74em; font-weight: 500; color: var(--text-soft); opacity: 0.72; margin-left: 3px; }
.svc-tier-luxury .price-qual { color: rgba(255,255,255,0.55); }
.svc-note { margin-top: 22px; font-size: 0.82rem; color: var(--text-soft); opacity: 0.85; line-height: 1.6; font-style: italic; }
.svc-tier-luxury .svc-note { color: rgba(255,255,255,0.6); }
.svc-single { background: white; border-radius: 20px; padding: 44px 40px; box-shadow: 0 16px 50px rgba(28,61,46,0.08); margin-top: 44px; }
.svc-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; }
.alc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.pkg-credit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.pkg-credit-card { background: var(--cream); border: 1px solid rgba(200,144,56,0.22); border-radius: 16px; padding: 32px 24px; text-align: center; }
.pkg-credit-card .pkg-amt { font-family: 'Fraunces', serif; font-size: 1.7rem; font-weight: 700; color: var(--forest); }
.pkg-credit-card .pkg-disc { margin-top: 6px; font-size: 0.95rem; font-weight: 600; color: var(--coral); letter-spacing: 0.02em; }
@media (max-width: 768px) {
  .svc-section { padding: 64px 24px; }
  .svc-tier-grid, .svc-twocol, .alc-grid { grid-template-columns: 1fr; }
  .svc-twocol, .alc-grid { gap: 36px; }
  .pkg-credit { grid-template-columns: 1fr; }
}

/* ─── Scannability pass (round 3) ──────────────────────────────── */
/* SVG icons replace emoji in feature/service cards */
.feat-icon svg { width: 26px; height: 26px; color: var(--forest); stroke-width: 1.8; }
.svc-ico { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.svc-ico svg { width: 30px; height: 30px; stroke-width: 1.8; }

/* Lead sentence — the one line that must land at a skim */
.lead-line { font-size: 1.12rem; line-height: 1.6; color: var(--text); font-weight: 500; max-width: 60ch; }
.section-lede { max-width: 56ch; }

/* Hygiene strip — replaces the dense safety paragraph with scannable rows */
.hygiene-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 26px 0 32px; }
.hygiene-item { display: flex; align-items: flex-start; gap: 12px; }
.hygiene-item svg { width: 22px; height: 22px; color: var(--coral); flex-shrink: 0; margin-top: 2px; stroke-width: 1.9; }
.hygiene-item b { display: block; font-size: 0.95rem; color: var(--forest); font-weight: 600; line-height: 1.35; }
.hygiene-item span { display: block; font-size: 0.84rem; color: var(--text-soft); line-height: 1.45; margin-top: 2px; }
@media (max-width: 768px) { .hygiene-strip { grid-template-columns: 1fr; gap: 14px; } }

/* Tighten over-long body copy site-wide for scanning */
.svc-intro { max-width: 62ch; }
.svc-tier-sub { font-size: 0.9rem; }
.page-lede { max-width: 56ch; margin-left: auto; margin-right: auto; }

/* ════════════════════════════════════════════════════════════════════════
   Client round 4 — responsive nav, before/after expansion, social, footer
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Nav cluster (preserves the original desktop layout) ───────────────── */
.nav-cluster { display: flex; align-items: center; gap: 32px; }
.nav-menu { display: flex; align-items: center; gap: 32px; }
.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: none; cursor: pointer; color: white;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
#nav.solid .nav-toggle { color: var(--forest); }
.nav-toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 0.28s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  #nav { padding: 16px 22px; }
  #nav.solid { padding: 12px 22px; }
  .nav-logo { font-size: 1.18rem; }
  .nav-cluster { gap: 12px; }
  .nav-toggle { display: flex; }
  .nav-cta { padding: 9px 16px !important; font-size: 0.8rem !important; }
  .nav-cta svg { width: 14px; height: 14px; }
  /* Links collapse into a dropdown panel anchored under the fixed bar */
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #FDF8F2; backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px rgba(28,61,46,0.14);
    padding: 8px 22px 16px;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .nav-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-menu .nav-link {
    display: block !important; color: var(--text-soft);
    padding: 15px 4px; font-size: 1rem; font-weight: 600;
    border-bottom: 1px solid rgba(28,61,46,0.1);
  }
  .nav-menu .nav-link:last-child { border-bottom: none; }
  .nav-menu .nav-link::after { display: none; }
}
@media (max-width: 360px) {
  .nav-logo { font-size: 1.05rem; }
  .nav-cta { padding: 8px 13px !important; }
}

/* ─── Before/After — controls row + scrollable thumb rail ───────────────── */
.ba-controls {
  display: flex; align-items: center; gap: 14px;
  max-width: min(680px, 100%); margin: 28px auto 0;
}
.ba-nav {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: white; border: 1px solid rgba(28,61,46,0.12);
  color: var(--forest); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(28,61,46,0.06);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.ba-nav:hover { background: var(--blush); transform: scale(1.06); box-shadow: 0 6px 18px rgba(28,61,46,0.12); }
.ba-nav:active { transform: scale(0.95); }
.ba-thumbs {
  display: flex; gap: 12px; flex: 1; min-width: 0;
  overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: 6px 2px; margin: 0;
  scrollbar-width: none; justify-content: flex-start;
}
.ba-thumbs::-webkit-scrollbar { display: none; }
.ba-thumb {
  width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  border: 3px solid transparent; padding: 0; background: none; cursor: pointer;
  flex-shrink: 0; scroll-snap-align: center;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ba-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-thumb:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(28,61,46,0.15); }
.ba-thumb[data-active] { border-color: var(--coral); }
#baCounter { white-space: nowrap; font-weight: 600; color: var(--forest); }
@media (max-width: 768px) {
  .ba-controls { gap: 10px; }
  .ba-thumb { width: 60px; height: 60px; }
}
@media (max-width: 600px) {
  .ba-section { padding: 84px 0; }
  .ba-container { padding: 0 20px; }
  .ba-title { margin-bottom: 36px; }
}

/* ─── Social section ───────────────────────────────────────────────────── */
.social-section { padding: 120px 0; background: var(--forest); position: relative; overflow: hidden; }
.social-section::before {
  content: ""; position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 620px; height: 620px; pointer-events: none;
  background: radial-gradient(circle, rgba(232,124,74,0.14) 0%, transparent 65%);
}
.social-container { max-width: 1080px; margin: 0 auto; padding: 0 48px; text-align: center; position: relative; z-index: 1; }
.social-eyebrow {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--blush); margin-bottom: 22px;
  font-weight: 500; padding: 6px 16px; background: rgba(245,221,208,0.12); border-radius: 999px;
}
.social-title { font-size: clamp(2.2rem, 4.5vw, 3.2rem); color: white; margin-bottom: 16px; letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; }
.social-title em { font-style: italic; color: var(--blush); }
.social-blurb { color: rgba(255,255,255,0.72); max-width: 52ch; margin: 0 auto 44px; line-height: 1.7; font-size: 1.02rem; }
.social-grid { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.social-card {
  display: flex; align-items: center; gap: 18px;
  flex: 1 1 300px; max-width: 360px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px; padding: 22px 26px; text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.25s ease, box-shadow 0.3s ease;
}
.social-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.13); box-shadow: 0 20px 44px rgba(0,0,0,0.28); }
.social-ico {
  width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; color: white;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.social-ico svg { width: 26px; height: 26px; }
.social-ig .social-ico { background: linear-gradient(135deg, #feda75 0%, #fa7e1e 28%, #d62976 56%, #962fbf 78%, #4f5bd5 100%); }
.social-tt .social-ico { background: #111111; }
.social-card:hover .social-ico { transform: scale(1.08) rotate(-4deg); }
.social-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.social-meta strong { color: white; font-size: 1.05rem; font-weight: 600; }
.social-meta span { color: rgba(255,255,255,0.6); font-size: 0.9rem; }
.social-arrow { margin-left: auto; color: rgba(255,255,255,0.5); font-size: 1.3rem; transition: transform 0.25s ease, color 0.25s ease; }
.social-card:hover .social-arrow { transform: translateX(5px); color: white; }
@media (max-width: 600px) {
  .social-section { padding: 84px 0; }
  .social-container { padding: 0 22px; }
  .social-grid { flex-direction: column; }
  .social-card { flex: 1 1 auto; max-width: none; }
}

/* ─── Unified footer (with social icons) ───────────────────────────────── */
.site-footer { background: #122A1C; padding: 48px 0; }
.site-footer-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 40px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px;
}
.footer-name { color: white; font-size: 1.5rem; font-weight: 700; font-style: italic; margin-bottom: 6px; }
.footer-addr { color: rgba(255,255,255,0.45); font-size: 0.82rem; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover { background: rgba(255,255,255,0.16); color: white; transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-copy { color: rgba(255,255,255,0.32); font-size: 0.78rem; text-align: center; }
@media (max-width: 680px) {
  .site-footer-inner { flex-direction: column; text-align: center; gap: 20px; padding: 0 24px; }
  .footer-social { justify-content: center; }
}

/* ─── Small-phone hardening (≤400px) ───────────────────────────────────── */
/* minmax(0,1fr) lets the stats tracks shrink below their content's
   min-content — the "★★★★★" token was forcing a 21px horizontal
   overflow at 360px. */
@media (max-width: 768px) {
  #stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
  .stat-num { font-size: 2rem; }
  .stat-label { font-size: 0.68rem; letter-spacing: 0.05em; }
}

/* ════════════════════════════════════════════════════════════════════════
   Responsive spacing pass (round 5) — uniform mobile rhythm
   ════════════════════════════════════════════════════════════════════════
   Root cause: section padding was hardcoded at desktop scale on phones —
   100–130px vertical and 40–48px horizontal — so content read cramped
   sideways inside huge empty vertical bands while desktop stayed spacious.
   Only a few round-4 sections had mobile rules; the rest did not.

   This normalises EVERY section (inline-styled via .sec/.sec-inner, plus
   every class-based section across all 5 pages) to one consistent scale.
   Desktop is untouched: every rule below lives inside a mobile media query,
   so wide layouts are byte-identical to before.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Inline homepage sections: vertical on .sec, horizontal on .sec-inner.
     !important is needed only because the source padding is inline. */
  .sec       { padding-top: 76px !important; padding-bottom: 76px !important; }
  .sec-inner { padding-left: 24px !important; padding-right: 24px !important; }

  /* Homepage class sections — vertical on section, horizontal on container */
  .reviews-section, .contact-home, .booking-home,
  .ba-section, .social-section           { padding-top: 76px; padding-bottom: 76px; }
  .reviews-container, .contact-home-container, .booking-container,
  .ba-container, .social-container       { padding-left: 24px; padding-right: 24px; }

  /* Inner pages — sections that pad horizontally on the section itself */
  .package-section, .addons-section, .services-faq-section,
  .svc-section, .contact-form-section,
  .page-end-cta, .contact-page-grid      { padding-top: 76px; padding-bottom: 76px;
                                           padding-left: 24px; padding-right: 24px; }
  .page-hero                             { padding: 104px 24px 64px; }
  .booking-page-grid                     { padding: 64px 24px 80px; }

  /* Inner pages — sections that pad horizontally on an inner container */
  .gallery-full, .gallery-themed-page    { padding-top: 76px; padding-bottom: 76px; }
  .gallery-full-container,
  .gallery-themed-container              { padding-left: 24px; padding-right: 24px; }

  /* Internal gaps that compound the cramp on the homepage */
  #about-grid   { gap: 44px !important; }
  .feat-card    { padding: 30px 24px; }
  .service-card { padding: 32px 26px; }
}
@media (max-width: 480px) {
  .sec       { padding-top: 58px !important; padding-bottom: 58px !important; }
  .sec-inner { padding-left: 20px !important; padding-right: 20px !important; }

  .reviews-section, .contact-home, .booking-home,
  .ba-section, .social-section           { padding-top: 58px; padding-bottom: 58px; }
  .reviews-container, .contact-home-container, .booking-container,
  .ba-container, .social-container       { padding-left: 20px; padding-right: 20px; }

  .package-section, .addons-section, .services-faq-section,
  .svc-section, .contact-form-section,
  .page-end-cta, .contact-page-grid      { padding-top: 58px; padding-bottom: 58px;
                                           padding-left: 20px; padding-right: 20px; }
  .page-hero                             { padding: 100px 20px 56px; }
  .booking-page-grid                     { padding: 56px 20px 72px; }

  .gallery-full, .gallery-themed-page    { padding-top: 58px; padding-bottom: 58px; }
  .gallery-full-container,
  .gallery-themed-container              { padding-left: 20px; padding-right: 20px; }
}

/* ─── Link hover fades (moved out of inline on* handlers for a strict CSP) ─── */
.link-blush-fade:hover { color: #fff !important; border-color: #fff !important; }
.link-white-fade:hover { color: rgba(255,255,255,0.9) !important; }

/* ─── Spam honeypot — hidden from people, bait for bots (Formspree _gotcha) ─── */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

/* ─── Inline form status (contact + booking) ─── */
.form-status { margin-top: 18px; padding: 14px 18px; border-radius: 12px; font-size: 0.95rem; line-height: 1.6; }
.form-status[hidden] { display: none; }
.form-status.is-ok { background: rgba(37,211,102,0.12); color: #176b3a; border: 1px solid rgba(37,211,102,0.35); }
.form-status.is-info { background: var(--cream); color: var(--text); border: 1px solid rgba(28,61,46,0.18); }
.form-status a { color: var(--coral); font-weight: 600; }

/* ─── Image loading: brand-tone placeholders + gentle fade-in ──────────────
   Goal: never a stark-white box before an image loads, no layout jump, and a
   soft fade once each image decodes. CSP forbids inline JS, so the fade is
   driven by an external delegated listener in js/main.js that toggles
   `.is-loaded`. Everything degrades safely:
   - The wrapper carries a brand-tone background, so the reserved box shows a
     warm colour (not white) while bytes are in flight on slow/unstable wifi.
   - Images are only hidden-then-faded when `<html>` has `.js` (set early by
     main.js). With JS disabled, or before main.js runs, images stay fully
     visible — no stuck-invisible content, ever.
   - A `load` fallback also reveals anything still pending after window load. */

/* Soft brand tone behind every content-image wrapper. The image covers it on
   success; on slow load or failure the warm tone is what the user sees.
   `.img-ph` is the explicit hook; the image-bearing containers below get the
   same tone so no inline change to each wrapper's markup is needed and the
   desktop look is unchanged once images load (they paint over the tone). */
.img-ph,
.gallery-item,
.photo-card,
.ba-img,
.ba-slider {
  background-color: var(--blush);
  background-image: linear-gradient(135deg, var(--cream) 0%, var(--blush) 100%);
}

/* Fade-in only kicks in once main.js has flagged JS support, so a no-JS or
   pre-hydration render shows images immediately (desktop stays identical). */
html.js img.img-fade {
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity;
}
html.js img.img-fade.is-loaded {
  opacity: 1;
}
/* Once faded in, drop the hint so it never lingers as a compositing cost. */
html.js img.img-fade.is-loaded {
  will-change: auto;
}

/* The hero image already has its own opacity (0.68) + Ken Burns; fade it via a
   separate hidden→shown swing that lands on its design opacity, so the top of
   the page is the forest tone first, then the photo eases in. */
html.js .hero-img.img-fade { opacity: 0; }
html.js .hero-img.img-fade.is-loaded { opacity: 0.68; }

/* Failed image: keep the reserved box + warm tone, hide the broken-image glyph
   and any alt sprawl. main.js stamps data-failed and swaps to a 1x1 pixel. */
img[data-failed] {
  opacity: 1 !important;
  object-fit: cover;
  background-color: var(--blush);
  background-image: linear-gradient(135deg, var(--cream) 0%, var(--blush) 100%);
}

/* Users who opt out of motion get an instant show, no opacity swing. */
@media (prefers-reduced-motion: reduce) {
  html.js img.img-fade { transition: none; }
}

/* ─── Print — price list & contact details are likely save-to-PDF targets ─── */
@media print {
  #nav, .nav-toggle, .scroll-progress, .page-end-cta, .booking-home, .booking-form,
  .contact-home-map, .contact-page-map, .social-section, .reviews-section, .ba-section,
  .lightbox, .footer-social, .hero-grad { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  section, .sec, .noise, .hero { background: #fff !important; color: #000 !important; padding: 16px 0 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .price-table, .svc-tier, .svc-tier-grid, .price-row { break-inside: avoid; }
  *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
}