:root {
    --bg: #FAF9F6; --card: #F3EFE8; --ink: #2E2E2E; --ink-soft: #6B6B6B;
    --mud: #8B4513; --water: #2F6B63; --sand: #C4A24A; --line: #E6D8C3;
    --fill: #38761D;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--bg); color: var(--ink); font-family: 'Work Sans', sans-serif; }
  img, video { max-width: 100%; display: block; object-fit: cover; }
  a { color: inherit; text-decoration: none; }
  h1,h2,h3 { font-family: 'Fraunces', serif; font-weight: 600; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
  .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; display: block; }
  .btn { font-weight: 600; font-size: 15px; border-radius: 999px; padding: 12px 24px; display: inline-flex; align-items: center; gap: 8px; }
  .btn-primary { background: var(--fill); color: var(--bg); }
  .btn-outline { border: 1.5px solid var(--ink); color: var(--ink); }

  header { position: sticky; top: 0; z-index: 50; background: rgba(241,238,223,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
  .header-inner { max-width: 1120px; margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 16px; flex-wrap: wrap; }
  .logo { display: flex; align-items: center; gap: 8px; }
  .logo-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--fill); display: flex; align-items: center; justify-content: center; color: var(--bg); font-family: 'Fraunces',serif; font-weight: 600; font-size: 14px; }
  .logo-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; }
  nav { display: flex; gap: 18px; flex-wrap: wrap; }
  nav a, nav span.grp { font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
  .grp:after { content: " ▾"; font-size: 10px; }
  .header-social { display: flex; align-items: center; gap: 10px; }
  .header-social a { color: var(--ink-soft); display: flex; }
  .header-social svg { width: 15px; height: 15px; }
  .header-cta-group { display: flex; align-items: center; gap: 14px; }
  .mobile-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--ink); padding: 4px; }
  .mobile-toggle svg { width: 22px; height: 22px; display: block; }
  .mobile-menu { display: none; flex-direction: column; gap: 2px; padding: 8px 24px 20px; border-top: 1px solid var(--line); background: var(--bg); }
  .mobile-menu.open { display: flex; }
  .mobile-menu a:not(.btn) { text-decoration: none; color: var(--ink); font-size: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .mobile-menu a.active { font-weight: 600; color: var(--mud); }
  .mobile-menu .btn { text-align: center; justify-content: center; margin-top: 14px; }
  @media (max-width: 480px) { .header-social { display: none; } }
  @media (max-width: 860px) {
    nav { display: none; }
    .mobile-toggle { display: block; }
  }

  /* hero */
  .hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; }
  .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,46,46,.55) 0%, rgba(46,46,46,.35) 45%, rgba(46,46,46,.75) 100%); }
  .hero-content { position: relative; max-width: 1120px; margin: 0 auto; padding: 60px 24px 40px; width: 100%; text-align: center; }
  .hero h1 { font-size: clamp(30px,5vw,52px); line-height: 1.1; color: var(--bg); margin: 0 auto 16px; max-width: 720px; }
  .hero p { font-size: 17px; color: #E6D8C3; max-width: 480px; margin: 0 auto 26px; line-height: 1.5; }
  .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }

  /* avatar row */
  .avatar-row { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; position: relative; z-index: 2; }
  .avatar-item { text-align: center; width: 130px; }
  .avatar-photo { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; margin: 0 auto 10px; border: 2px solid rgba(252,250,242,.6); }
  .avatar-photo img { width: 100%; height: 100%; }
  .avatar-item p { font-size: 12.5px; color: var(--bg); line-height: 1.35; }

  /* full-bleed statement */
  .statement { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .statement video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .statement .scrim { position: absolute; inset: 0; background: rgba(46,46,46,.6); }
  .statement .txt { position: relative; z-index: 2; max-width: 640px; text-align: center; padding: 40px 24px; }
  .statement h2 { font-size: clamp(24px,3.2vw,34px); color: var(--bg); line-height: 1.25; }

  /* feature section: text + media */
  .feature { padding: 64px 24px; }
  .feature-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
  .feature-inner.reverse { direction: rtl; }
  .feature-inner.reverse > * { direction: ltr; }
  .feature h2 { font-size: clamp(24px,3vw,32px); margin-bottom: 14px; }
  .feature p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; max-width: 420px; }
  .feature-media { border-radius: 20px; overflow: hidden; }
  .feature-media img, .feature-media video { width: 100%; height: 320px; }
  @media (max-width: 860px) { .feature-inner, .feature-inner.reverse { grid-template-columns: 1fr; direction: ltr; } }

  /* zones triptych */
  .zones { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 64px 24px; }
  .zones-head { max-width: 1120px; margin: 0 auto 36px; text-align: center; }
  .zones-head h2 { font-size: clamp(24px,3vw,32px); }
  .zones-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
  .zone-card { border-radius: 18px; overflow: hidden; background: var(--bg); }
  .zone-media { height: 200px; overflow: hidden; }
  .zone-media img, .zone-media video { width: 100%; height: 100%; }
  .zone-body { padding: 18px 20px; }
  .zone-body h3 { font-size: 16px; margin-bottom: 4px; }
  .zone-body p { font-size: 13px; color: var(--ink-soft); }
  @media (max-width: 860px) { .zones-grid { grid-template-columns: 1fr; } }

  /* two-card row (boarding + grooming) */
  .duo { padding: 64px 24px; }
  .duo-head { max-width: 1120px; margin: 0 auto 32px; text-align: center; }
  .duo-head h2 { font-size: clamp(24px,3vw,32px); }
  .duo-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .duo-card { display: block; border-radius: 20px; overflow: hidden; position: relative; height: 320px; }
  .duo-card img, .duo-card video { width: 100%; height: 100%; }
  .duo-card .duo-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(0deg, rgba(46,46,46,.85), transparent); }
  .duo-card .duo-label h3 { color: var(--bg); font-size: 19px; }
  .duo-card .duo-label p { color: #E6D8C3; font-size: 13px; margin-top: 2px; }
  @media (max-width: 860px) { .duo-grid { grid-template-columns: 1fr; } }

  /* why us */
  .whyus { position: relative; min-height: 420px; display: flex; align-items: center; overflow: hidden; }
  .whyus img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .whyus .scrim { position: absolute; inset: 0; background: rgba(46,46,46,.7); }
  .whyus-content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; text-align: center; padding: 60px 24px; }
  .whyus-content .eyebrow { color: var(--sand); }
  .whyus-content h2 { color: var(--bg); font-size: clamp(24px,3vw,32px); margin-bottom: 16px; }
  .whyus-content p { color: #E6D8C3; font-size: 15.5px; line-height: 1.6; margin-bottom: 20px; }
  .whyus-content .sign { color: var(--sand); font-family: 'Fraunces', serif; font-size: 16px; }

  /* closing CTA */
  .closing { padding: 64px 24px; text-align: center; }
  .closing-photos { display: flex; justify-content: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
  .closing-photos img { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--card); }
  .closing h2 { font-size: clamp(24px,3vw,32px); margin-bottom: 10px; }
  .closing p { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 24px; }

  /* how it works */
  .hiw { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 64px 24px; }
  .hiw-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  .hiw-step { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 24px 20px; text-align: center; position: relative; }
  .hiw-step .num { width: 32px; height: 32px; border-radius: 50%; background: var(--fill); color: var(--bg); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; margin: 0 auto 14px; }
  .hiw-step h3 { font-size: 15px; margin-bottom: 6px; }
  .hiw-step p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
  .hiw-arrow { display: none; }
  @media (min-width: 861px) {
    .hiw-inner { position: relative; }
    .hiw-step:not(:last-child):after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--mud); font-size: 16px; }
  }
  @media (max-width: 860px) { .hiw-inner { grid-template-columns: 1fr; max-width: 360px; } .hiw-step:not(:last-child):after { display: none; } }

  /* gallery grid */
  .gallery { padding: 64px 24px; }
  .gallery-head { max-width: 1120px; margin: 0 auto 28px; }
  .gallery-head h2 { font-size: clamp(24px,3vw,32px); }
  .gallery-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
  .gallery-grid img { border-radius: 12px; height: 110px; width: 100%; }
  @media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(3,1fr); } }

  /* trust strip */
  .trust { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .trust-inner { max-width: 1120px; margin: 0 auto; display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; padding: 18px 24px; }
  .trust-inner span { font-size: 13.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
  .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mud); }

  /* faq */
  .faq { padding: 64px 24px; }
  .faq-inner { max-width: 720px; margin: 0 auto; }
  .faq-item { border-top: 1px solid var(--line); }
  .faq-item summary { font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; padding: 16px 0; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item p { font-size: 13.5px; color: var(--ink-soft); padding-bottom: 16px; line-height: 1.5; }

  /* location teaser */
  .loc-teaser { max-width: 1120px; margin: 0 auto 40px; padding: 40px 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--fill); border-radius: 24px; color: var(--bg); }
  .loc-teaser h3 { color: var(--bg); font-size: 20px; margin-bottom: 4px; }
  .loc-teaser p { color: #E6D8C3; font-size: 13.5px; }
  /* testimonials */
  .testimonials { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 64px 24px; }
  .testimonials-inner { max-width: 1120px; margin: 0 auto; }
  .testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 28px; }
  .t-card { background: var(--bg); border-radius: 16px; padding: 20px; }
  .t-card p.quote { font-size: 14px; color: var(--ink-soft); line-height: 1.55; font-style: italic; margin-bottom: 12px; }
  .t-card p.name { font-size: 13px; font-weight: 600; color: var(--ink); }
  @media (max-width: 860px) { .testimonials-grid { grid-template-columns: 1fr; } }

  /* pricing grid (session types) */
  .pricing { padding: 64px 24px; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .pricing-head { max-width: 1120px; margin: 0 auto 32px; text-align: center; }
  .pricing-head h2 { font-size: clamp(24px,3vw,32px); }
  .pricing-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
  .price-card { background: var(--bg); border-radius: 16px; padding: 20px; position: relative; }
  .price-card.popular { border: 2px solid var(--mud); }
  .price-tag { position: absolute; top: -10px; left: 16px; background: var(--mud); color: var(--bg); font-size: 10.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; }
  .price-card h3 { font-size: 15px; margin-bottom: 6px; }
  .price-card .amount { font-family: 'Fraunces', serif; font-weight: 600; font-size: 26px; color: var(--ink); margin-bottom: 10px; }
  .price-card .amount span { font-size: 12px; font-weight: 400; color: var(--ink-soft); }
  .price-card ul { list-style: none; margin: 0 0 16px; padding: 0; }
  .price-card li { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 6px; padding-left: 14px; position: relative; }
  .price-card li:before { content: "·"; position: absolute; left: 2px; color: var(--mud); font-weight: 700; }
  @media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr; } }

  /* simple page hero (for sub-pages) */
  .page-hero { position: relative; min-height: 380px; display: flex; align-items: center; overflow: hidden; }
  .page-hero img, .page-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .page-hero .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,46,46,.6) 0%, rgba(46,46,46,.7) 100%); }
  .page-hero-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; text-align: center; padding: 40px 24px; }
  .page-hero h1 { font-size: clamp(28px,4.5vw,44px); color: var(--bg); line-height: 1.15; margin-bottom: 14px; }
  .page-hero p { color: #E6D8C3; font-size: 16px; line-height: 1.55; max-width: 560px; margin: 0 auto; }
  /* asymmetric showcase (large + stacked) */
  .showcase { padding: 72px 24px; }
  .showcase-head { max-width: 1120px; margin: 0 auto 32px; }
  .showcase-head h2 { font-size: clamp(28px,4vw,42px); line-height: 1.1; }
  .showcase-head p { font-size: 15px; color: var(--ink-soft); max-width: 480px; margin-top: 10px; }
  .showcase-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .showcase-large { position: relative; height: 480px; border-radius: 20px; overflow: hidden; display: block; }
  .showcase-large img, .showcase-large video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
  .showcase-large:hover img, .showcase-large:hover video { transform: scale(1.05); }
  .showcase-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; height: 480px; }
  .showcase-item { position: relative; border-radius: 20px; overflow: hidden; display: block; }
  .showcase-item img, .showcase-item video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
  .showcase-item:hover img, .showcase-item:hover video { transform: scale(1.05); }
  .showcase-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(46,46,46,.85) 0%, rgba(46,46,46,.15) 55%, transparent 100%); }
  .showcase-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; z-index: 2; }
  .showcase-caption h3 { color: var(--bg); font-size: 22px; margin-bottom: 4px; }
  .showcase-caption p { color: var(--line); font-size: 13px; }
  .showcase-item .showcase-caption h3 { font-size: 16px; }
  .showcase-item .showcase-caption p { font-size: 11.5px; }
  .showcase-item .showcase-caption { padding: 16px; }
  @media (max-width: 860px) {
    .showcase-grid { grid-template-columns: 1fr; }
    .showcase-large { height: 320px; }
    .showcase-stack { height: auto; }
    .showcase-item { height: 200px; }
  }

  /* flagship grid (asymmetric: 1 large + 3 stacked) */
  .flagship { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 72px 24px; }
  .flagship-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .flagship-stack-3 { display: grid; grid-template-rows: repeat(3,1fr); gap: 14px; height: 480px; }
  @media (max-width: 860px) {
    .flagship-grid { grid-template-columns: 1fr; }
    .flagship-stack-3 { height: auto; }
    .flagship-stack-3 .showcase-item { height: 160px; }
  }

  footer { border-top: 1px solid var(--line); padding: 40px 24px 28px; }
  .footer-inner { max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
  .footer-col h4 { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mud); margin-bottom: 10px; }
  .footer-col a, .footer-col span { display: block; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px; }
  .footer-social { display: flex; gap: 14px; }
  .footer-social a { font-weight: 600; }
  .footer-bottom { max-width: 1120px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); text-align: center; }