/* ---- style block 1 (originally at char offset 2429) ---- */
:root {
      --color-deep:    #1A2E1A;
      --color-primary: #2D5016;
      --color-accent:  #4A7C2F;
      --color-soft:    #8FAF7A;
      --color-light:   #F0F4EC;
      --color-white:   #FAFDF8;
      --color-gold:    #C9841A;
      --color-earth:   #8B6F47;
      --color-ash:     #E8E4DC;
      --color-night:   #0F1A0F;

      --gradient-hero: linear-gradient(
        to bottom,
        rgba(15, 26, 15, 0.3) 0%,
        rgba(15, 26, 15, 0.5) 60%,
        rgba(15, 26, 15, 0.85) 100%
      );

      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body:    'DM Sans', system-ui, sans-serif;

      --space-xs:  0.5rem;
      --space-sm:  1rem;
      --space-md:  1.5rem;
      --space-lg:  2.5rem;
      --space-xl:  4rem;
      --space-2xl: 6rem;
      --space-3xl: 8rem;

      --radius-sm:   6px;
      --radius-md:   12px;
      --radius-lg:   20px;
      --radius-xl:   32px;
      --radius-full: 9999px;
      --nav-bottom-h: 60px;
      --nav-top-h:    64px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      font-family: var(--font-body);
      background: var(--color-night);
      color: var(--color-white);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      /* Reserve space for fixed bottom nav on mobile */
      padding-bottom: var(--nav-bottom-h);
    }
    @media (min-width: 1024px) {
      body { padding-bottom: 0; padding-top: var(--nav-top-h); }
    }

    /* ── Global visibility toggle (used by all section modules) ─ */
    .section-hidden { display: none !important; }
    /* ── "Coming Soon" (Website CMS status) — the section/card stays
       visible and legible (so visitors can see what's coming), just
       gently dimmed with a small corner badge, instead of disappearing
       like Hidden/Draft or being fully obscured. ── */
    .msh-coming-soon { position: relative; }
    .msh-coming-soon > * { opacity: .5; pointer-events: none; user-select: none; }
    .msh-coming-soon::after {
      content: "✨ Coming Soon";
      position: absolute; top: 14px; left: 14px; z-index: 50;
      background: linear-gradient(135deg, #e4c47a, #c9a85c);
      color: #132d1e;
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .3px;
      padding: 7px 14px;
      border-radius: 999px;
      box-shadow: 0 4px 14px rgba(0,0,0,.28);
    }
    /* ── Dynamic custom sections (developer-created via CMS) ── */
    .msh-dyn-section{padding:70px 20px;background:#f4f1ea;}
    .msh-dyn-head{max-width:760px;margin:0 auto 40px;text-align:center;}
    .msh-dyn-eyebrow{font-size:26px;margin-bottom:8px;}
    .msh-dyn-title{font-family:Georgia,'Times New Roman',serif;font-size:34px;color:#1A3320;margin:0 0 12px;font-weight:600;}
    .msh-dyn-lead{font-size:16px;color:#8B6F47;line-height:1.6;margin:0 auto;max-width:600px;}
    .msh-dyn-divider{width:60px;height:2px;background:linear-gradient(90deg,transparent,#c9a85c,transparent);margin:20px auto 0;}
    .msh-dyn-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}
    .msh-dyn-card{background:#FAFDF8;border:1px solid #E8E4DC;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(26,46,26,.06);display:flex;flex-direction:column;}
    .msh-dyn-img{width:100%;height:190px;overflow:hidden;background:#eef2e8;}
    .msh-dyn-img img{width:100%;height:100%;object-fit:cover;display:block;}
    .msh-dyn-body{padding:20px;flex:1;display:flex;flex-direction:column;}
    .msh-dyn-card-title{font-family:Georgia,serif;font-size:21px;color:#1A3320;margin:0 0 8px;font-weight:600;}
    .msh-dyn-metarow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
    .msh-dyn-meta{font-size:12px;font-weight:700;color:#8B6F47;background:rgba(201,168,92,.12);border-radius:20px;padding:3px 10px;}
    .msh-dyn-text{font-size:14.5px;color:#5a5a52;line-height:1.6;margin:0 0 12px;}
    .msh-dyn-map{width:100%;border-radius:12px;overflow:hidden;margin:6px 0 14px;border:1px solid #E8E4DC;}
    .msh-dyn-map iframe{width:100%;height:220px;border:0;display:block;}
    .msh-dyn-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px;}
    .msh-dyn-link{font-size:13.5px;font-weight:700;color:#1A3320;text-decoration:none;border:1px solid #E8E4DC;border-radius:20px;padding:8px 14px;transition:background .15s,border-color .15s;}
    .msh-dyn-link:hover{background:rgba(201,168,92,.1);border-color:#c9a85c;}

    /* ── Skip-to-content link (accessibility) ────────────────── */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 12px;
      padding: 8px 16px;
      background: var(--color-primary);
      color: #fff;
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 500;
      border-radius: 0 0 var(--radius-sm) var(--radius-sm);
      z-index: 10000;
      text-decoration: none;
      transition: top 0.2s ease;
    }
    .skip-link:focus { top: 0; }

/* ---- style block 2 (originally at char offset 7641) ---- */
/* ==========================================================
       msh-nav.css  —  Mobile bottom nav + Desktop top nav
       Phase 11 · Merge
       ========================================================== */

    /* ── Desktop top nav ──────────────────────────────────────── */
    .msh-top-nav {
      display: none; /* hidden on mobile */
    }
    @media (min-width: 1024px) {
      .msh-top-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: var(--nav-top-h);
        padding: 0 var(--space-lg);
        z-index: 8000;
        transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
        background: transparent;
      }
      /* Scrolled state — solid white with shadow */
      .msh-top-nav.msh-nav-solid {
        background: rgba(250, 253, 248, 0.97);
        box-shadow: 0 2px 20px rgba(26, 46, 26, 0.10);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }
      .msh-top-nav-logo {
        font-family: var(--font-display);
        font-size: 1.35rem;
        font-weight: 500;
        letter-spacing: -0.01em;
        color: var(--color-white);
        text-decoration: none;
        transition: color 0.3s ease;
        white-space: nowrap;
        line-height: 1.2;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .msh-top-nav-logo-img {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        object-fit: cover;
        display: none;
        flex-shrink: 0;
      }
      .msh-top-nav-logo span {
        display: block;
        font-family: var(--font-body);
        font-size: 0.65rem;
        font-weight: 400;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-gold);
        margin-top: 1px;
      }
      .msh-nav-solid .msh-top-nav-logo { color: var(--color-deep); }
      .msh-nav-solid .msh-top-nav-logo span { color: var(--color-gold); }

      .msh-top-nav-links {
        display: flex;
        align-items: center;
        gap: var(--space-lg);
        list-style: none;
      }
      .msh-top-nav-links a {
        font-family: var(--font-body);
        font-size: 0.875rem;
        font-weight: 400;
        letter-spacing: 0.03em;
        color: rgba(250, 253, 248, 0.85);
        text-decoration: none;
        padding: 4px 0;
        position: relative;
        transition: color 0.2s ease;
      }
      .msh-top-nav-links a::after {
        content: "";
        position: absolute;
        bottom: -2px; left: 0; right: 0;
        height: 1.5px;
        background: var(--color-gold);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.25s ease;
      }
      .msh-top-nav-links a:hover { color: rgba(250, 253, 248, 1); }
      .msh-top-nav-links a:hover::after { transform: scaleX(1); }
      .msh-top-nav-links a.msh-nav-active { color: #fff; }
      .msh-top-nav-links a.msh-nav-active::after { transform: scaleX(1); }

      /* Solid state — links go dark */
      .msh-nav-solid .msh-top-nav-links a { color: var(--color-deep); }
      .msh-nav-solid .msh-top-nav-links a:hover { color: var(--color-primary); }
      .msh-nav-solid .msh-top-nav-links a.msh-nav-active { color: var(--color-primary); }

      .msh-top-nav-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-body);
        font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: 0.03em;
        padding: 10px 22px;
        border-radius: var(--radius-xl);
        border: none;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        background: var(--color-primary);
        color: #fff;
        box-shadow: 0 4px 16px rgba(45, 80, 22, 0.45);
        transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
        -webkit-tap-highlight-color: transparent;
      }
      .msh-top-nav-cta:hover {
        background: var(--color-accent);
        box-shadow: 0 6px 24px rgba(45, 80, 22, 0.55);
        transform: translateY(-1px);
      }
      .msh-top-nav-cta:active { transform: scale(0.97); }
    }

    /* ── Mobile bottom nav ────────────────────────────────────── */
    .msh-bottom-nav {
      display: flex;
      align-items: stretch;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: var(--nav-bottom-h);
      background: var(--color-white);
      border-top: 1px solid var(--color-ash);
      box-shadow: 0 -4px 20px rgba(26, 46, 26, 0.08);
      z-index: 8000;
      /* Safe area for notched phones */
      padding-bottom: env(safe-area-inset-bottom, 0);
      height: calc(var(--nav-bottom-h) + env(safe-area-inset-bottom, 0));
    }
    @media (min-width: 1024px) {
      .msh-bottom-nav { display: none; }
    }

    .msh-bnav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px 4px 4px;
      color: #9BAA90;
      -webkit-tap-highlight-color: transparent;
      text-decoration: none;
      transition: color 0.18s ease;
      outline: none;
      position: relative;
    }
    .msh-bnav-item:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: -2px;
    }
    .msh-bnav-item svg {
      flex-shrink: 0;
      transition: transform 0.18s ease;
    }
    .msh-bnav-label {
      font-family: var(--font-body);
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1;
    }

    /* Active indicator — green dot above tab */
    .msh-bnav-item::before {
      content: "";
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 24px; height: 2.5px;
      background: var(--color-primary);
      border-radius: 0 0 var(--radius-sm) var(--radius-sm);
      transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .msh-bnav-item.msh-bnav-active {
      color: var(--color-primary);
    }
    .msh-bnav-item.msh-bnav-active::before {
      transform: translateX(-50%) scaleX(1);
    }
    .msh-bnav-item.msh-bnav-active svg {
      transform: translateY(-1px);
    }

    @media (prefers-reduced-motion: reduce) {
      .msh-bnav-item, .msh-bnav-item svg,
      .msh-bnav-item::before,
      .msh-top-nav, .msh-top-nav-logo,
      .msh-top-nav-links a,
      .msh-top-nav-links a::after { transition: none !important; }
    }

/* ---- style block 3 (originally at char offset 14448) ---- */
/* hero.css */
    .hero-section {
      position: relative;
      width: 100%;
      min-height: 100svh;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-color: var(--color-night);
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      background-color: var(--color-night);
      background-size: cover;
      background-position: 65% 25%;
      background-repeat: no-repeat;
      transition: opacity 0.6s ease;
      z-index: 1;
    }
    .hero-bg.hero-fallback {
      background-image: linear-gradient(160deg, #0F2610 0%, #1A3818 35%, #2D5016 70%, #1A2E1A 100%);
    }
    .hero-mountain {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      z-index: 2;
      pointer-events: none;
      line-height: 0;
    }
    .vellingiri-svg { width: 100%; height: auto; display: block; }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: var(--gradient-hero);
      z-index: 3;
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      z-index: 4;
      text-align: center;
      padding: var(--space-2xl) var(--space-md) var(--space-xl);
      max-width: 640px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-sm);
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(201, 132, 26, 0.15);
      border: 1px solid rgba(201, 132, 26, 0.35);
      color: var(--color-gold);
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: var(--radius-full);
      margin-bottom: var(--space-xs);
      opacity: 0;
      animation: heroReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
    }
    .hero-badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--color-gold);
      animation: glow 2s ease-in-out infinite;
      flex-shrink: 0;
    }
    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 10vw, 5rem);
      font-weight: 300;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--color-white);
      margin: 0;
      opacity: 0;
      animation: heroReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
    }
    .hero-subtitle {
      font-family: var(--font-body);
      font-size: clamp(0.95rem, 3vw, 1.15rem);
      font-weight: 300;
      color: var(--color-soft);
      letter-spacing: 0.01em;
      margin: 0;
      opacity: 0;
      animation: heroReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
    }
    .hero-tagline {
      font-family: var(--font-display);
      font-size: clamp(0.9rem, 2.5vw, 1.05rem);
      font-style: italic;
      font-weight: 400;
      color: var(--color-gold);
      margin: var(--space-xs) 0 0;
      opacity: 0;
      animation: heroReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      justify-content: center;
      margin-top: var(--space-md);
      opacity: 0;
      animation: heroReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
    }
    .hero-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 14px 26px;
      border-radius: var(--radius-xl);
      border: none;
      cursor: pointer;
      white-space: nowrap;
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }
    .hero-btn:active { transform: scale(0.97); }
    .hero-btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
    .hero-btn-primary {
      background: var(--color-primary);
      color: #fff;
      box-shadow: 0 4px 20px rgba(45, 80, 22, 0.5);
    }
    .hero-btn-primary:hover {
      background: var(--color-accent);
      box-shadow: 0 8px 32px rgba(45, 80, 22, 0.6);
      transform: translateY(-1px);
    }
    .hero-btn-whatsapp {
      background: rgba(37, 211, 102, 0.12);
      color: #fff;
      border: 1.5px solid rgba(37, 211, 102, 0.45);
    }
    .hero-btn-whatsapp:hover {
      background: rgba(37, 211, 102, 0.22);
      border-color: rgba(37, 211, 102, 0.7);
      transform: translateY(-1px);
    }
    .hero-btn-call {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.85);
      border: 1.5px solid rgba(255, 255, 255, 0.25);
    }
    .hero-btn-call:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.45);
      color: #fff;
      transform: translateY(-1px);
    }
    .hero-scroll-indicator {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      color: rgba(255, 255, 255, 0.55);
      font-family: var(--font-body);
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px 12px;
      -webkit-tap-highlight-color: transparent;
      opacity: 0;
      animation: heroReveal 0.8s ease 1.2s forwards;
      transition: color 0.2s ease;
    }
    .hero-scroll-indicator:hover { color: rgba(255, 255, 255, 0.85); }
    .hero-scroll-indicator svg { animation: scrollBounce 2.2s ease-in-out infinite; }
    @keyframes heroReveal {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes scrollBounce {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(6px); }
    }
    @keyframes glow {
      0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201, 132, 26, 0.5); }
      50%       { opacity: 0.7; box-shadow: 0 0 0 4px rgba(201, 132, 26, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-badge, .hero-title, .hero-subtitle,
      .hero-tagline, .hero-actions, .hero-scroll-indicator {
        animation: none !important; opacity: 1; transform: none;
      }
      .hero-scroll-indicator svg, .hero-badge-dot { animation: none !important; }
    }
    .hero-section.section-hidden { display: none; }
    @media (min-width: 640px) {
      .hero-content { padding: var(--space-2xl) var(--space-lg) var(--space-xl); gap: var(--space-md); }
      .hero-actions { flex-wrap: nowrap; }
      .hero-btn { padding: 15px 30px; font-size: 0.95rem; }
    }
    @media (min-width: 1024px) {
      .hero-bg { background-position: center 25%; }
      .hero-content { max-width: 720px; gap: var(--space-md); }
      .hero-btn-primary { padding: 16px 36px; font-size: 1rem; }
      .vellingiri-svg { max-height: 320px; }
    }

/* ---- style block 4 (originally at char offset 21712) ---- */
/* sacred-spaces.css */
    .ss-section {
      background: var(--color-deep);
      padding: var(--space-2xl) 0;
      overflow: hidden;
    }
    .ss-section.section-hidden { display: none; }

    .ss-header {
      text-align: center;
      padding: 0 var(--space-md);
      margin-bottom: var(--space-xl);
    }
    .ss-eyebrow {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: var(--space-xs);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .ss-title {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 8vw, 3.5rem);
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: var(--color-white);
      margin-bottom: var(--space-sm);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
    }
    .ss-lead {
      font-family: var(--font-body);
      font-size: clamp(0.95rem, 3vw, 1.1rem);
      font-weight: 300;
      line-height: 1.7;
      color: var(--color-soft);
      max-width: 540px;
      margin: 0 auto var(--space-md);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
    }
    .ss-divider {
      width: 48px;
      height: 1px;
      margin: 0 auto;
      background: linear-gradient(to right, transparent, var(--color-gold), transparent);
      opacity: 0;
      transform: scaleX(0.4);
      transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
    }
    .ss-section.ss-revealed .ss-eyebrow,
    .ss-section.ss-revealed .ss-title,
    .ss-section.ss-revealed .ss-lead,
    .ss-section.ss-revealed .ss-divider {
      opacity: 1;
      transform: none;
    }
    .ss-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-md);
      padding: 0 var(--space-md);
      max-width: 1200px;
      margin: 0 auto;
      justify-content: center; /* fewer cards than columns → centered, not stretched with a lopsided gap */
    }
    .ss-card {
      background: #1E331E;
      border: 1px solid rgba(74, 124, 47, 0.12);
      border-radius: var(--radius-md);
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity 0.65s ease,
        transform 0.65s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
      cursor: pointer;
    }
    .ss-card.ss-card-visible { opacity: 1; transform: translateY(0); }
    .ss-card:hover {
      border-color: rgba(201, 132, 26, 0.3);
      box-shadow: 0 8px 40px rgba(15, 26, 15, 0.6), 0 0 0 1px rgba(201, 132, 26, 0.12);
    }
    .ss-card:focus-within { outline: 2px solid var(--color-gold); outline-offset: 2px; }
    .ss-card-image {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: linear-gradient(135deg, #1A2E1A 0%, #0F1A0F 100%);
      flex-shrink: 0;
    }
    /* Smart fit, works for any uploaded photo's dimensions: the real
       photo (below) never gets cropped — object-fit:contain always
       shows 100% of it. Any leftover space that creates (a square or
       portrait photo in this wide box) is filled by this same photo,
       blurred and zoomed behind it, so it never reads as empty space,
       regardless of what shape photo a client uploads. */
    .ss-card-image::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--card-bg-img, none);
      background-size: cover;
      background-position: center;
      filter: blur(22px) brightness(0.55);
      transform: scale(1.15);
      z-index: 0;
    }
    .ss-card-image img {
      position: relative;
      z-index: 1;
      width: 100%; height: 100%;
      object-fit: contain;
      display: block;
      transition: transform 0.5s ease;
    }
    .ss-card:hover .ss-card-image img { transform: scale(1.04); }
    .ss-card-image-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 2.5rem;
      font-weight: 300;
      color: rgba(143, 175, 122, 0.3);
      letter-spacing: 0.04em;
      user-select: none;
    }
    .ss-gallery-badge {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: rgba(15, 26, 15, 0.75);
      border: 1px solid rgba(201, 132, 26, 0.25);
      color: var(--color-gold);
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      padding: 4px 10px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      gap: 5px;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      pointer-events: none;
    }
    .ss-gallery-badge svg { flex-shrink: 0; }
    .ss-card-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 40%, rgba(15, 26, 15, 0.65) 100%);
      pointer-events: none;
    }
    .ss-card-body {
      padding: var(--space-md);
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      flex: 1;
    }
    .ss-card-name {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 4vw, 1.6rem);
      font-weight: 400;
      line-height: 1.2;
      color: var(--color-white);
      margin: 0;
    }
    .ss-card-desc {
      font-family: var(--font-body);
      font-size: 0.925rem;
      font-weight: 300;
      line-height: 1.65;
      color: rgba(143, 175, 122, 0.85);
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .ss-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: var(--space-xs);
      padding-top: var(--space-xs);
      border-top: 1px solid rgba(74, 124, 47, 0.1);
    }
    .ss-maps-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--color-gold);
      text-decoration: none;
      padding: 6px 0;
      transition: color 0.2s ease, gap 0.2s ease;
    }
    .ss-maps-link:hover { color: #e09520; gap: 9px; }
    .ss-maps-link svg { flex-shrink: 0; }
    .ss-photos-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: none;
      border: 1px solid rgba(74, 124, 47, 0.25);
      color: var(--color-soft);
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.03em;
      padding: 6px 12px;
      border-radius: var(--radius-full);
      cursor: pointer;
      transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    }
    .ss-photos-btn:hover {
      border-color: rgba(201, 132, 26, 0.4);
      color: var(--color-gold);
      background: rgba(201, 132, 26, 0.06);
    }
    /* Skeletons */
    .ss-skeleton {
      pointer-events: none;
      cursor: default;
      opacity: 1 !important;
      transform: none !important;
      border-color: rgba(74, 124, 47, 0.08) !important;
    }
    .ss-skeleton-image {
      background: linear-gradient(90deg, #121F12 25%, #1A2E1A 50%, #121F12 75%);
      background-size: 200% 100%;
      animation: ssShimmer 1.6s ease infinite;
    }
    .ss-skeleton-line {
      height: 14px;
      border-radius: var(--radius-sm);
      background: linear-gradient(90deg, #121F12 25%, #1A2E1A 50%, #121F12 75%);
      background-size: 200% 100%;
      animation: ssShimmer 1.6s ease infinite;
    }
    .ss-skeleton-title { height: 22px; width: 65%; }
    .ss-skeleton-text  { width: 90%; }
    .ss-skeleton-short { width: 55%; }
    .ss-card-body .ss-skeleton-line + .ss-skeleton-line { margin-top: 10px; }
    @keyframes ssShimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    /* Lightbox */
    .ss-lightbox {
      position: fixed;
      inset: 0;
      z-index: 9000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ss-lightbox[hidden] { display: none; }
    .ss-lightbox-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(10, 15, 10, 0.93);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .ss-lightbox-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 900px;
      max-height: 90vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-lg) var(--space-md);
    }
    .ss-lightbox-stage {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      max-height: 70vh;
    }
    .ss-lightbox-img {
      max-width: 100%;
      max-height: 70vh;
      object-fit: contain;
      border-radius: var(--radius-md);
      box-shadow: 0 16px 64px rgba(0, 0, 0, 0.7);
      display: block;
    }
    .ss-lightbox-close {
      position: absolute;
      top: 16px; right: 16px;
      width: 40px; height: 40px;
      border-radius: 50%;
      background: rgba(26, 46, 26, 0.8);
      border: 1px solid rgba(143, 175, 122, 0.2);
      color: var(--color-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
      z-index: 2;
    }
    .ss-lightbox-close:hover { background: rgba(45, 80, 22, 0.9); color: var(--color-white); }
    .ss-lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(26, 46, 26, 0.7);
      border: 1px solid rgba(143, 175, 122, 0.15);
      color: var(--color-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
      z-index: 2;
    }
    .ss-lightbox-nav:hover { background: rgba(45, 80, 22, 0.9); color: var(--color-white); }
    .ss-lightbox-nav.ss-lightbox-hidden { opacity: 0; pointer-events: none; }
    .ss-lightbox-prev { left: 8px; }
    .ss-lightbox-next { right: 8px; }
    .ss-lightbox-dots {
      position: absolute;
      bottom: 20px;
      left: 0; right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .ss-lightbox-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: rgba(143, 175, 122, 0.3);
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .ss-lightbox-dot.ss-dot-active { background: var(--color-gold); transform: scale(1.25); }
    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .ss-eyebrow, .ss-title, .ss-lead, .ss-divider, .ss-card { transition: none !important; }
      .ss-skeleton-image, .ss-skeleton-line { animation: none !important; }
    }
    /* Tablet */
    @media (min-width: 640px) {
      .ss-grid { grid-template-columns: repeat(2, 1fr); }
      .ss-lightbox-prev { left: 16px; }
      .ss-lightbox-next { right: 16px; }
    }
    /* Desktop */
    @media (min-width: 1024px) {
      .ss-section { padding: var(--space-3xl) 0; }
      /* auto-fit + a capped card width instead of a fixed 3-column grid —
         with 2 cards this centers them at a natural size instead of
         stretching into 3 equal columns and leaving an empty gap on one
         side. Still wraps into more rows once there are enough cards. */
      .ss-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 360px)); gap: var(--space-lg); }
      .ss-card-desc { -webkit-line-clamp: 4; }
    }

/* ---- style block 5 (originally at char offset 33132) ---- */
/* ============================================================
   MS HomeStays — Accommodation Section Styles
   Phase 3 | accommodation.css
   ============================================================ */

/* ── Section shell ──────────────────────────────────────────── */
.ac-section {
  background: var(--color-white);
  padding: var(--space-2xl) 0;
  overflow: hidden;
}

.ac-section.section-hidden {
  display: none;
}

/* ── Header ─────────────────────────────────────────────────── */
.ac-header {
  text-align: center;
  padding: 0 var(--space-md);
  margin-bottom: var(--space-xl);
}

.ac-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ac-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-deep);
  margin-bottom: var(--space-sm);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.ac-lead {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-earth);
  max-width: 540px;
  margin: 0 auto var(--space-md);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}

.ac-divider {
  width: 48px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

/* ── Revealed state ─────────────────────────────────────────── */
.ac-section.ac-revealed .ac-eyebrow,
.ac-section.ac-revealed .ac-title,
.ac-section.ac-revealed .ac-lead,
.ac-section.ac-revealed .ac-divider {
  opacity: 1;
  transform: none;
}

/* ── Grid ────────────────────────────────────────────────────── */
.ac-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding: 0 var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Card ────────────────────────────────────────────────────── */
.ac-card {
  background: var(--color-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(26, 46, 26, 0.06), 0 8px 32px rgba(26, 46, 26, 0.04);
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.ac-card.ac-card-visible {
  opacity: 1;
  transform: translateY(0);
}

.ac-card:hover {
  border-color: rgba(74, 124, 47, 0.35);
  box-shadow: 0 8px 32px rgba(26, 46, 26, 0.12), 0 24px 64px rgba(26, 46, 26, 0.08);
}

/* ── Card image ──────────────────────────────────────────────── */
.ac-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-light) 0%, var(--color-ash) 100%);
  flex-shrink: 0;
}

.ac-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.ac-card:hover .ac-card-image img {
  transform: scale(1.04);
}

/* ── Swipeable photo gallery (native scroll-snap) ─────────────── */
.ac-gallery {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.ac-gallery::-webkit-scrollbar { display: none; height: 0; }
.ac-gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  position: relative;
}
.ac-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Dot indicators */
.ac-gallery-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
}
.ac-gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  transition: width 0.25s ease, background 0.25s ease;
}
.ac-gallery-dot.active {
  width: 18px;
  border-radius: 3px;
  background: #fff;
}

/* Image fallback */
.ac-card-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  color: rgba(74, 124, 47, 0.25);
  letter-spacing: 0.04em;
  user-select: none;
}

/* ── Availability badge ──────────────────────────────────────── */
.ac-avail-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ac-avail-badge.ac-available {
  background: rgba(15, 26, 15, 0.72);
  color: #5FD68A;
  border: 1px solid rgba(95, 214, 138, 0.35);
}

.ac-avail-badge.ac-occupied {
  background: rgba(15, 26, 15, 0.72);
  color: #F2994A;
  border: 1px solid rgba(242, 153, 74, 0.4);
}

/* Availability dot */
.ac-avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ac-available .ac-avail-dot {
  background: #5FD68A;
  animation: acPulse 2s ease-in-out infinite;
}

.ac-occupied .ac-avail-dot {
  background: #F2994A;
}

@keyframes acPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111, 207, 151, 0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(111, 207, 151, 0); }
}

/* ── Card body ───────────────────────────────────────────────── */
.ac-card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
}

.ac-card-name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4vw, 1.65rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-deep);
  margin: 0;
}

/* Stars row */
.ac-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 2px 0;
}

.ac-star {
  color: var(--color-gold);
  font-size: 0.85rem;
  line-height: 1;
}

/* Amenity chips — max 3 shown on card */
.ac-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-xs) 0;
}

.ac-amenity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-light);
  border: 1px solid var(--color-ash);
  color: var(--color-deep);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.ac-capacity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-light);
  border: 1px solid var(--color-ash);
  color: var(--color-soft);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  margin: 0 0 var(--space-xs);
}

.ac-amenity-more {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-ash);
  color: var(--color-soft);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  padding: 5px 10px;
  border-radius: var(--radius-full);
}

/* Price */
.ac-price {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  font-weight: 400;
  color: var(--color-gold);
  line-height: 1;
  margin: var(--space-xs) 0 0;
}

.ac-price-unit {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-earth);
  margin-left: 2px;
}

/* ── Card actions ────────────────────────────────────────────── */
.ac-card-actions {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 11px 20px;
  border-radius: var(--radius-xl);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.ac-btn:active { transform: scale(0.97); }

.ac-btn-outline {
  background: transparent;
  border: 1.5px solid var(--color-ash);
  color: var(--color-deep);
  flex: 1;
}

.ac-btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.ac-btn-primary {
  background: var(--color-primary);
  color: #fff;
  flex: 1;
  box-shadow: 0 4px 16px rgba(45, 80, 22, 0.3);
}

.ac-btn-primary:hover {
  background: var(--color-accent);
  box-shadow: 0 6px 24px rgba(45, 80, 22, 0.4);
  transform: translateY(-1px);
}

/* ── Skeleton ────────────────────────────────────────────────── */
.ac-skeleton {
  pointer-events: none;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--color-ash) !important;
}

.ac-skeleton-image {
  background: linear-gradient(90deg, #F0F4EC 25%, #E8E4DC 50%, #F0F4EC 75%);
  background-size: 200% 100%;
  animation: acShimmer 1.6s ease infinite;
}

.ac-skeleton-line {
  height: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #F0F4EC 25%, #E8E4DC 50%, #F0F4EC 75%);
  background-size: 200% 100%;
  animation: acShimmer 1.6s ease infinite;
  margin-bottom: 10px;
}

.ac-skeleton-title { height: 22px; width: 60%; }
.ac-skeleton-text  { width: 85%; }
.ac-skeleton-short { width: 50%; }
.ac-skeleton-price { height: 26px; width: 40%; margin-top: 4px; }

@keyframes acShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ac-eyebrow, .ac-title, .ac-lead, .ac-divider, .ac-card { transition: none !important; }
  .ac-skeleton-image, .ac-skeleton-line { animation: none !important; }
  .ac-available .ac-avail-dot { animation: none !important; }
}

/* ── Tablet ──────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .ac-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Desktop ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .ac-section {
    padding: var(--space-3xl) 0;
  }
  .ac-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

/* ---- style block 6 (originally at char offset 43771) ---- */
/* ============================================================
   MS HomeStays — Food & Services Section Styles
   Phase 4 | food-services.css
   ============================================================ */

/* ── Section shell ──────────────────────────────────────────── */
.fs-section {
  background: var(--color-light);
  padding: var(--space-2xl) 0;
  overflow: hidden;
}

.fs-section.section-hidden {
  display: none;
}

/* ── Header ─────────────────────────────────────────────────── */
.fs-header {
  text-align: center;
  padding: 0 var(--space-md);
  margin-bottom: var(--space-lg);
}

.fs-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fs-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-deep);
  margin-bottom: var(--space-sm);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.fs-lead {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-earth);
  max-width: 540px;
  margin: 0 auto var(--space-md);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}

.fs-divider {
  width: 48px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

/* ── Revealed state ─────────────────────────────────────────── */
.fs-section.fs-revealed .fs-eyebrow,
.fs-section.fs-revealed .fs-title,
.fs-section.fs-revealed .fs-lead,
.fs-section.fs-revealed .fs-divider {
  opacity: 1;
  transform: none;
}

/* ── Tab switcher ───────────────────────────────────────────── */
.fs-tabs-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-md);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* fade edges hint on mobile */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 90%,
    transparent 100%
  );
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
}

.fs-tabs-wrap::-webkit-scrollbar { display: none; }

.fs-section.fs-revealed .fs-tabs-wrap {
  opacity: 1;
  transform: none;
}

.fs-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-white);
  border: 1.5px solid var(--color-ash);
  color: var(--color-earth);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.fs-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.fs-tab.fs-tab-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(45, 80, 22, 0.28);
}

.fs-tab-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Panels container ───────────────────────────────────────── */
.fs-panels {
  padding: 0 var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Single panel ───────────────────────────────────────────── */
.fs-panel {
  display: none;
}

.fs-panel.fs-panel-active {
  display: block;
  animation: fsPanelIn 0.3s ease forwards;
}

@keyframes fsPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Items grid ─────────────────────────────────────────────── */
.fs-items-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

/* ── Item card ──────────────────────────────────────────────── */
.fs-item-card {
  background: var(--color-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  box-shadow: 0 1px 6px rgba(26, 46, 26, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.fs-item-card.fs-item-visible {
  opacity: 1;
  transform: translateY(0);
}

.fs-item-card.fs-item-unavailable {
  opacity: 0.55;
}

.fs-item-card:hover {
  border-color: rgba(74, 124, 47, 0.3);
  box-shadow: 0 4px 20px rgba(26, 46, 26, 0.09);
}

/* ── Item image ─────────────────────────────────────────────── */
.fs-item-image {
  width: 90px;
  min-height: 90px;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-light) 0%, var(--color-ash) 100%);
  position: relative;
}

.fs-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback icon when no image */
.fs-item-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
}

/* ── Item body ──────────────────────────────────────────────── */
.fs-item-body {
  flex: 1;
  padding: 14px var(--space-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.fs-item-name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  font-weight: 400;
  color: var(--color-deep);
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fs-item-desc {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-earth);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Item price + availability row ──────────────────────────── */
.fs-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: 6px;
}

.fs-item-price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-gold);
  line-height: 1;
}

.fs-item-unavail-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #EB5757;
  background: rgba(235, 87, 87, 0.08);
  border: 1px solid rgba(235, 87, 87, 0.2);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

/* ── Empty state per panel ──────────────────────────────────── */
.fs-empty {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--color-soft);
}

/* ── Skeleton loading ───────────────────────────────────────── */
.fs-skeleton-card {
  background: var(--color-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  height: 90px;
}

.fs-skeleton-img {
  width: 90px;
  background: linear-gradient(90deg, #F0F4EC 25%, #E8E4DC 50%, #F0F4EC 75%);
  background-size: 200% 100%;
  animation: fsShimmer 1.6s ease infinite;
  flex-shrink: 0;
}

.fs-skeleton-body {
  flex: 1;
  padding: 14px var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.fs-skeleton-line {
  height: 13px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #F0F4EC 25%, #E8E4DC 50%, #F0F4EC 75%);
  background-size: 200% 100%;
  animation: fsShimmer 1.6s ease infinite;
}

.fs-skeleton-title { width: 55%; height: 16px; }
.fs-skeleton-text  { width: 80%; }
.fs-skeleton-price { width: 30%; }

@keyframes fsShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fs-eyebrow, .fs-title, .fs-lead, .fs-divider,
  .fs-tabs-wrap, .fs-item-card { transition: none !important; }
  .fs-skeleton-img, .fs-skeleton-line { animation: none !important; }
  .fs-panel.fs-panel-active { animation: none !important; }
}

/* ── Tablet ──────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .fs-items-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fs-item-image {
    width: 110px;
    min-height: 110px;
  }
}

/* ── Desktop ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .fs-section {
    padding: var(--space-3xl) 0;
  }

  .fs-tabs-wrap {
    justify-content: center;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .fs-items-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  .fs-item-image {
    width: 120px;
    min-height: 120px;
  }
}

/* ---- style block 7 (originally at char offset 53352) ---- */
/* ============================================================
   MS HomeStays — Places Nearby Section Styles
   Phase 5 | places.css
   ============================================================ */

/* ── Section shell ──────────────────────────────────────────── */
.pl-section {
  background: var(--color-white);
  padding: var(--space-2xl) 0;
  overflow: hidden;
}

.pl-section.section-hidden {
  display: none;
}

/* ── Header ─────────────────────────────────────────────────── */
.pl-header {
  text-align: center;
  padding: 0 var(--space-md);
  margin-bottom: var(--space-xl);
}

.pl-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.pl-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-deep);
  margin-bottom: var(--space-sm);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.pl-lead {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-earth);
  max-width: 540px;
  margin: 0 auto var(--space-md);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}

.pl-divider {
  width: 48px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

/* ── Revealed state ─────────────────────────────────────────── */
.pl-section.pl-revealed .pl-eyebrow,
.pl-section.pl-revealed .pl-title,
.pl-section.pl-revealed .pl-lead,
.pl-section.pl-revealed .pl-divider {
  opacity: 1;
  transform: none;
}

/* ── List container ─────────────────────────────────────────── */
.pl-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 0 var(--space-md);
  max-width: 900px;
  margin: 0 auto;
}

/* ── Card ────────────────────────────────────────────────────── */
.pl-card {
  background: var(--color-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(26, 46, 26, 0.05);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.pl-card.pl-card-visible {
  opacity: 1;
  transform: translateY(0);
}

.pl-card:hover {
  border-color: rgba(74, 124, 47, 0.3);
  box-shadow: 0 6px 28px rgba(26, 46, 26, 0.1);
}

/* ── Card image ──────────────────────────────────────────────── */
.pl-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-light) 0%, var(--color-ash) 100%);
  flex-shrink: 0;
}
.pl-card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--card-bg-img, none);
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(0.6);
  transform: scale(1.15);
  z-index: 0;
}

.pl-card-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.5s ease;
}

.pl-card:hover .pl-card-image img {
  transform: scale(1.03);
}

/* Image fallback */
.pl-card-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  line-height: 1;
}

/* ── Distance badge — the signature element ──────────────────── */
.pl-distance-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 26, 15, 0.78);
  border: 1px solid rgba(143, 175, 122, 0.25);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pl-distance-badge svg {
  flex-shrink: 0;
  color: var(--color-soft);
}

/* Travel time chip */
.pl-time-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 26, 15, 0.78);
  border: 1px solid rgba(201, 132, 26, 0.25);
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pl-time-badge svg {
  flex-shrink: 0;
}

/* ── Card body ───────────────────────────────────────────────── */
.pl-card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pl-card-name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.5vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-deep);
  margin: 0;
}

.pl-card-desc {
  font-family: var(--font-body);
  font-size: 0.925rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-earth);
  margin: 0;
}

/* ── Card footer ─────────────────────────────────────────────── */
.pl-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-ash);
}

/* Distance + time row (text version, below image) */
.pl-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pl-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-soft);
}

.pl-meta-item svg {
  flex-shrink: 0;
  color: var(--color-accent);
}

/* Maps link */
.pl-maps-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  text-decoration: none;
  padding: 7px 14px;
  border: 1.5px solid rgba(45, 80, 22, 0.25);
  border-radius: var(--radius-full);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.pl-maps-link:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.pl-maps-link svg { flex-shrink: 0; }

/* ── Skeleton ────────────────────────────────────────────────── */
.pl-skeleton {
  pointer-events: none;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--color-ash) !important;
}

.pl-skeleton-image {
  background: linear-gradient(90deg, #F0F4EC 25%, #E8E4DC 50%, #F0F4EC 75%);
  background-size: 200% 100%;
  animation: plShimmer 1.6s ease infinite;
}

.pl-skeleton-line {
  height: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #F0F4EC 25%, #E8E4DC 50%, #F0F4EC 75%);
  background-size: 200% 100%;
  animation: plShimmer 1.6s ease infinite;
  margin-bottom: 10px;
}

.pl-skeleton-title { height: 22px; width: 55%; }
.pl-skeleton-text  { width: 90%; }
.pl-skeleton-short { width: 45%; }

@keyframes plShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pl-eyebrow, .pl-title, .pl-lead, .pl-divider,
  .pl-card { transition: none !important; }
  .pl-skeleton-image, .pl-skeleton-line { animation: none !important; }
}

/* ── Tablet — side-by-side layout ───────────────────────────── */
@media (min-width: 640px) {
  .pl-card {
    flex-direction: row;
    align-items: stretch;
  }

  .pl-card-image {
    width: 280px;
    aspect-ratio: unset;
    flex-shrink: 0;
  }

  .pl-card-body {
    flex: 1;
    justify-content: center;
    padding: var(--space-lg);
  }
}

/* ── Desktop ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .pl-section {
    padding: var(--space-3xl) 0;
  }

  .pl-list {
    max-width: 960px;
    gap: var(--space-lg);
  }

  .pl-card-image {
    width: 340px;
  }
}

/* ---- style block 8 (originally at char offset 61718) ---- */
/* ============================================================
   MS HomeStays — Educational Institutions Section Styles
   Phase 6 | education.css
   ============================================================ */

/* ── Section shell ──────────────────────────────────────────── */
.ed-section {
  background: var(--color-light);
  padding: var(--space-2xl) 0;
  overflow: hidden;
}

.ed-section.section-hidden {
  display: none;
}

/* ── Header ─────────────────────────────────────────────────── */
.ed-header {
  text-align: center;
  padding: 0 var(--space-md);
  margin-bottom: var(--space-xl);
}

.ed-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ed-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-deep);
  margin-bottom: var(--space-sm);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.ed-lead {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-earth);
  max-width: 600px;
  margin: 0 auto var(--space-md);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}

.ed-divider {
  width: 48px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

/* ── Revealed state ─────────────────────────────────────────── */
.ed-section.ed-revealed .ed-eyebrow,
.ed-section.ed-revealed .ed-title,
.ed-section.ed-revealed .ed-lead,
.ed-section.ed-revealed .ed-divider {
  opacity: 1;
  transform: none;
}

/* ── Grid ────────────────────────────────────────────────────── */
.ed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding: 0 var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Card ────────────────────────────────────────────────────── */
.ed-card {
  background: var(--color-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(26, 46, 26, 0.05);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ed-card.ed-card-visible {
  opacity: 1;
  transform: translateY(0);
}

.ed-card:hover {
  border-color: rgba(74, 124, 47, 0.3);
  box-shadow: 0 6px 28px rgba(26, 46, 26, 0.1);
}

/* ── Card image ──────────────────────────────────────────────── */
.ed-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-light) 0%, var(--color-ash) 100%);
  flex-shrink: 0;
}
.ed-card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--card-bg-img, none);
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(0.6);
  transform: scale(1.15);
  z-index: 0;
}

.ed-card-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.5s ease;
}

.ed-card:hover .ed-card-image img {
  transform: scale(1.03);
}

/* Image fallback */
.ed-card-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  line-height: 1;
}

/* Distance badge over image */
.ed-distance-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 26, 15, 0.78);
  border: 1px solid rgba(143, 175, 122, 0.25);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ed-distance-badge svg {
  flex-shrink: 0;
  color: var(--color-soft);
}

/* ── Card body ───────────────────────────────────────────────── */
.ed-card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
}

.ed-card-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.65rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-deep);
  margin: 0;
}

.ed-card-desc {
  font-family: var(--font-body);
  font-size: 0.925rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-earth);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Card footer ─────────────────────────────────────────────── */
.ed-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-ash);
  flex-wrap: wrap;
}

/* Link buttons — shared style */
.ed-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-ash);
  color: var(--color-deep);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.ed-link-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-primary);
  background: rgba(74, 124, 47, 0.06);
}

.ed-link-btn svg { flex-shrink: 0; }

/* Maps button — green tint on hover */
.ed-maps-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Distance meta text (left side of footer) */
.ed-footer-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-soft);
}

.ed-footer-meta svg {
  flex-shrink: 0;
  color: var(--color-accent);
}

/* Footer actions group */
.ed-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* ── Skeleton ────────────────────────────────────────────────── */
.ed-skeleton {
  pointer-events: none;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--color-ash) !important;
}

.ed-skeleton-image {
  background: linear-gradient(90deg, #E8E4DC 25%, #F0F4EC 50%, #E8E4DC 75%);
  background-size: 200% 100%;
  animation: edShimmer 1.6s ease infinite;
}

.ed-skeleton-line {
  height: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #E8E4DC 25%, #F0F4EC 50%, #E8E4DC 75%);
  background-size: 200% 100%;
  animation: edShimmer 1.6s ease infinite;
  margin-bottom: 10px;
}

.ed-skeleton-title { height: 22px; width: 60%; }
.ed-skeleton-text  { width: 88%; }
.ed-skeleton-short { width: 42%; }

@keyframes edShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ed-eyebrow, .ed-title, .ed-lead, .ed-divider,
  .ed-card { transition: none !important; }
  .ed-skeleton-image, .ed-skeleton-line { animation: none !important; }
}

/* ── Tablet ──────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .ed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Desktop ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .ed-section {
    padding: var(--space-3xl) 0;
  }

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

  .ed-card-desc {
    -webkit-line-clamp: 4;
  }
}

/* ---- style block 9 (originally at char offset 102590) ---- */
.ac-search-bar {
  background: var(--color-deep);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem 1rem;
  margin: 0 var(--space-md) var(--space-lg);
  box-shadow: 0 8px 40px rgba(26,46,26,0.18);
}
.ac-search-inner {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.ac-search-label {
  display: block;
  color: var(--color-soft);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.ac-search-input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(143,175,122,0.3);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}
.ac-search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(255,255,255,0.1);
}
.ac-search-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}
.ac-guest-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(143,175,122,0.3);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease;
  text-align: left;
}
.ac-guest-toggle:hover,
.ac-guest-toggle[aria-expanded="true"] {
  border-color: var(--color-accent);
  background: rgba(255,255,255,0.1);
}
.ac-guest-toggle svg {
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.ac-guest-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.ac-guest-panel {
  display: none;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-top: 0.5rem;
  box-shadow: 0 4px 20px rgba(26,46,26,0.12);
}
.ac-guest-panel.open { display: block; }
.ac-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-ash);
}
.ac-stepper-row:last-of-type { border-bottom: none; }
.ac-stepper-info { display: flex; flex-direction: column; gap: 2px; }
.ac-stepper-lbl {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-deep);
}
.ac-stepper-sub {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-soft);
}
.ac-stepper { display: flex; align-items: center; gap: 12px; }
.ac-step-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1; padding: 0;
}
.ac-step-btn:hover { background: var(--color-primary); color: #fff; }
.ac-step-btn:active { transform: scale(0.94); }
.ac-step-val {
  font-size: 17px; font-weight: 700;
  min-width: 26px; text-align: center;
  color: var(--color-deep);
  font-family: var(--font-body);
}
.ac-guest-done {
  width: 100%; margin-top: 0.875rem;
  padding: 0.625rem;
  border: none; border-radius: var(--radius-md);
  background: var(--color-primary); color: #fff;
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s ease;
}
.ac-guest-done:hover { background: var(--color-accent); }
.ac-search-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0.9375rem 1.5rem;
  border: none; border-radius: var(--radius-xl);
  background: var(--color-gold); color: #fff;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(201,132,26,0.25);
  transition: background 0.2s ease, transform 0.15s ease;
  margin-top: 0.25rem;
}
.ac-search-btn:hover { background: #b5730f; transform: translateY(-1px); }
.ac-search-btn:active { transform: translateY(0); }
.ac-search-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }
.ac-search-summary {
  display: none;
  margin-top: 0.875rem;
  padding: 0.625rem 1rem;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-soft);
  text-align: center;
  border: 1px solid rgba(143,175,122,0.15);
}
.ac-search-total {
  margin: 0.25rem 0 0.375rem;
  font-family: var(--font-body);
}
.ac-search-total-amt {
  font-size: 0.9375rem; font-weight: 700; color: var(--color-deep);
}
.ac-search-total-nights { font-size: 0.75rem; color: var(--color-soft); }
.ac-guest-line {
  font-family: var(--font-body);
  font-size: 0.6875rem; color: var(--color-soft);
  margin-top: 0.125rem; letter-spacing: 0.02em;
}
.ac-card.ac-unavail { opacity: 0.55; }
.ac-card.ac-unavail .ac-btn-primary { display: none; }
.ac-unavail-label {
  font-family: var(--font-body);
  font-size: 0.875rem; color: var(--color-soft);
  font-style: italic; margin: 0.375rem 0;
}
.ac-capacity-warn {
  font-family: var(--font-body);
  font-size: 0.8125rem; color: #B8863B;
  background: rgba(184, 134, 59, 0.1);
  border: 1px solid rgba(184, 134, 59, 0.3);
  border-radius: var(--radius-sm, 6px);
  padding: 0.375rem 0.625rem;
  margin: 0.375rem 0;
  line-height: 1.4;
}
@media (min-width: 640px) {
  .ac-search-bar { padding: 1.5rem; margin: 0 0 var(--space-lg); }
  .ac-search-inner { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
  .ac-search-field { flex: 1; min-width: 0; }
  .ac-search-guest-field { flex: 1.2; position: relative; }
  .ac-guest-panel {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    z-index: 200; min-width: 280px;
  }
  .ac-search-btn {
    flex: 0 0 auto; width: auto;
    padding: 0.9375rem 2rem;
    white-space: nowrap; margin-top: 0; align-self: flex-end;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ac-search-btn:hover { transform: none; }
  .ac-step-btn:active  { transform: none; }
}

/* ---- style block 10 (originally at char offset 190401) ---- */
/* gallery.css */

    /* ── Section shell ──────────────────────────────────────── */
    .gl-section {
      background: var(--color-night);
      padding: var(--space-2xl) 0;
      overflow: hidden;
    }
    .gl-section.section-hidden { display: none; }

    /* ── Header ─────────────────────────────────────────────── */
    .gl-header {
      text-align: center;
      padding: 0 var(--space-md);
      margin-bottom: var(--space-lg);
    }
    .gl-eyebrow {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: var(--space-xs);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .gl-title {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 8vw, 3.5rem);
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: var(--color-white);
      margin-bottom: var(--space-sm);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
    }
    .gl-lead {
      font-family: var(--font-body);
      font-size: clamp(0.95rem, 3vw, 1.1rem);
      font-weight: 300;
      line-height: 1.7;
      color: var(--color-soft);
      max-width: 540px;
      margin: 0 auto var(--space-md);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
    }
    .gl-divider {
      width: 48px;
      height: 1px;
      margin: 0 auto var(--space-lg);
      background: linear-gradient(to right, transparent, var(--color-gold), transparent);
      opacity: 0;
      transform: scaleX(0.4);
      transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
    }
    .gl-section.gl-revealed .gl-eyebrow,
    .gl-section.gl-revealed .gl-title,
    .gl-section.gl-revealed .gl-lead,
    .gl-section.gl-revealed .gl-divider {
      opacity: 1;
      transform: none;
    }

    /* ── Category cover cards (one photo per category, scroll) ──── */
    .gl-covers-wrap {
      padding: 0 var(--space-md);
      max-width: 1200px;
      margin: 0 auto var(--space-md);
    }
    .gl-covers {
      display: flex;
      gap: var(--space-sm);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: var(--space-xs);
      scrollbar-width: none;
    }
    .gl-covers::-webkit-scrollbar { display: none; }
    .gl-cover-card {
      flex: 0 0 auto;
      width: 42%;
      max-width: 190px;
      scroll-snap-align: start;
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
      text-align: left;
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .gl-cover-card-img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: var(--radius-md);
      display: block;
      background: var(--color-ash, #eee);
    }
    .gl-cover-card-label {
      margin-top: 6px;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--color-earth);
      text-align: center;
    }
    @media (min-width: 640px) { .gl-cover-card { width: 22%; } }

    /* ── Category filter tabs ───────────────────────────────── */
    .gl-filters {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-xs);
      padding: 0 var(--space-md);
      margin-bottom: var(--space-lg);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
    }
    .gl-section.gl-revealed .gl-filters {
      opacity: 1;
      transform: none;
    }
    .gl-filter-btn {
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 8px 18px;
      border-radius: var(--radius-full);
      border: 1px solid rgba(143, 175, 122, 0.25);
      background: transparent;
      color: var(--color-soft);
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }
    .gl-filter-btn:hover {
      border-color: rgba(143, 175, 122, 0.5);
      color: var(--color-white);
    }
    .gl-filter-btn.gl-active {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-white);
    }
    .gl-filter-btn:focus-visible {
      outline: 2px solid var(--color-gold);
      outline-offset: 2px;
    }

    /* ── Masonry grid ───────────────────────────────────────── */
    .gl-grid-wrap {
      padding: 0 var(--space-md);
      max-width: 1200px;
      margin: 0 auto;
    }
    .gl-grid {
      columns: 2;
      column-gap: 10px;
    }
    .gl-item {
      break-inside: avoid;
      margin-bottom: 10px;
      border-radius: var(--radius-md);
      overflow: hidden;
      position: relative;
      cursor: pointer;
      display: block;
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity 0.55s ease,
        transform 0.55s ease,
        box-shadow 0.25s ease;
    }
    .gl-item.gl-item-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .gl-item:hover .gl-item-overlay {
      opacity: 1;
    }
    .gl-item:hover .gl-item-img {
      transform: scale(1.04);
    }
    .gl-item:focus-visible {
      outline: 2px solid var(--color-gold);
      outline-offset: 2px;
    }
    .gl-item-img-wrap {
      position: relative;
      width: 100%;
      overflow: hidden;
      background: linear-gradient(135deg, #1A2E1A 0%, #0F1A0F 100%);
      display: block;
    }
    .gl-item-img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform 0.45s ease;
    }
    .gl-item-fallback {
      width: 100%;
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1A2E1A 0%, #0F1A0F 100%);
    }
    .gl-item-fallback-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      opacity: 0.4;
    }
    .gl-item-fallback-monogram {
      font-family: var(--font-display);
      font-size: 1.8rem;
      font-weight: 300;
      color: var(--color-soft);
      letter-spacing: 0.05em;
    }
    .gl-item-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(15,26,15,0.85) 0%, rgba(15,26,15,0.1) 60%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 12px;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .gl-item-caption {
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 400;
      color: var(--color-white);
      line-height: 1.3;
    }
    .gl-item-category-tag {
      font-family: var(--font-body);
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 3px;
      display: block;
    }
    /* Expand icon */
    .gl-item-expand {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(15,26,15,0.65);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .gl-item:hover .gl-item-expand { opacity: 1; }

    /* Hidden items (filtered out) */
    .gl-item.gl-filtered {
      display: none;
    }

    /* Skeleton items */
    .gl-skeleton-item {
      border-radius: var(--radius-md);
      overflow: hidden;
      margin-bottom: 10px;
      break-inside: avoid;
    }
    .gl-skeleton-img {
      width: 100%;
      background: #1A2E1A;
      border-radius: var(--radius-md);
      animation: glShimmer 1.4s ease-in-out infinite;
    }
    @keyframes glShimmer {
      0%   { opacity: 0.5; }
      50%  { opacity: 0.8; }
      100% { opacity: 0.5; }
    }

    /* ── Lightbox overlay ───────────────────────────────────── */
    .gl-lightbox {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(10, 16, 10, 0.96);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }
    .gl-lightbox.gl-lb-open {
      opacity: 1;
      pointer-events: auto;
    }
    .gl-lb-inner {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 56px 16px 80px;
    }
    .gl-lb-img-wrap {
      position: relative;
      max-width: 900px;
      max-height: 75vh;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .gl-lb-img {
      max-width: 100%;
      max-height: 72vh;
      border-radius: var(--radius-md);
      box-shadow: 0 16px 64px rgba(0,0,0,0.7);
      display: block;
      object-fit: contain;
      transition: opacity 0.25s ease;
    }
    .gl-lb-img.gl-lb-loading {
      opacity: 0;
    }
    .gl-lb-spinner {
      position: absolute;
      width: 36px;
      height: 36px;
      border: 2px solid rgba(143, 175, 122, 0.2);
      border-top-color: var(--color-soft);
      border-radius: 50%;
      animation: glSpin 0.7s linear infinite;
    }
    @keyframes glSpin {
      to { transform: rotate(360deg); }
    }
    .gl-lb-caption-wrap {
      text-align: center;
      padding: var(--space-sm) var(--space-md) 0;
      max-width: 560px;
    }
    .gl-lb-caption-cat {
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 4px;
    }
    .gl-lb-caption-text {
      font-family: var(--font-display);
      font-size: clamp(1rem, 3vw, 1.3rem);
      font-weight: 300;
      color: var(--color-white);
      font-style: italic;
    }
    /* Close button */
    .gl-lb-close {
      position: absolute;
      top: 14px;
      right: 16px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      color: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }
    .gl-lb-close:hover { background: rgba(255,255,255,0.18); }
    .gl-lb-close:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
    /* Prev / Next */
    .gl-lb-prev,
    .gl-lb-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      color: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      outline: none;
      z-index: 2;
    }
    .gl-lb-prev { left: 10px; }
    .gl-lb-next { right: 10px; }
    .gl-lb-prev:hover { background: rgba(255,255,255,0.18); transform: translateY(-50%) translateX(-2px); }
    .gl-lb-next:hover { background: rgba(255,255,255,0.18); transform: translateY(-50%) translateX(2px); }
    .gl-lb-prev:focus-visible,
    .gl-lb-next:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
    /* Counter */
    .gl-lb-counter {
      position: absolute;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-body);
      font-size: 0.75rem;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.45);
    }

    /* ── Empty state ─────────────────────────────────────────── */
    .gl-empty {
      text-align: center;
      padding: var(--space-xl) var(--space-md);
      color: var(--color-soft);
      font-family: var(--font-body);
      font-size: 0.95rem;
      display: none;
    }
    .gl-empty.gl-empty-visible { display: block; }

    /* ── Responsive ─────────────────────────────────────────── */
    @media (min-width: 640px) {
      .gl-grid {
        columns: 3;
        column-gap: 12px;
      }
      .gl-grid-wrap { padding: 0 var(--space-lg); }
      .gl-lb-prev { left: 20px; }
      .gl-lb-next { right: 20px; }
      .gl-lb-prev,
      .gl-lb-next { width: 48px; height: 48px; }
    }
    @media (min-width: 1024px) {
      .gl-grid {
        columns: 4;
        column-gap: 14px;
      }
      .gl-lb-inner { padding: 60px 80px 90px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .gl-item,
      .gl-item-img,
      .gl-item-overlay,
      .gl-item-expand,
      .gl-lightbox,
      .gl-lb-img { transition: none !important; animation: none !important; }
      .gl-item { opacity: 1 !important; transform: none !important; }
      .gl-skeleton-img { animation: none !important; }
    }

/* ---- style block 11 (originally at char offset 225861) ---- */
/* reviews.css */

    /* ── Section shell ──────────────────────────────────────── */
    .rv-section {
      background: var(--color-light);
      padding: var(--space-2xl) 0;
      overflow: hidden;
    }
    .rv-section.section-hidden { display: none; }

    /* ── Header ─────────────────────────────────────────────── */
    .rv-header {
      text-align: center;
      padding: 0 var(--space-md);
      margin-bottom: var(--space-xl);
    }
    .rv-eyebrow {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: var(--space-xs);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .rv-title {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 8vw, 3.5rem);
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: var(--color-deep);
      margin-bottom: var(--space-sm);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
    }
    .rv-lead {
      font-family: var(--font-body);
      font-size: clamp(0.95rem, 3vw, 1.1rem);
      font-weight: 300;
      line-height: 1.7;
      color: var(--color-earth);
      max-width: 540px;
      margin: 0 auto var(--space-md);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
    }
    .rv-divider {
      width: 48px;
      height: 1px;
      margin: 0 auto;
      background: linear-gradient(to right, transparent, var(--color-primary), transparent);
      opacity: 0;
      transform: scaleX(0.4);
      transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
    }
    .rv-section.rv-revealed .rv-eyebrow,
    .rv-section.rv-revealed .rv-title,
    .rv-section.rv-revealed .rv-lead,
    .rv-section.rv-revealed .rv-divider {
      opacity: 1;
      transform: none;
    }

    /* ── Summary bar (avg rating + total count) ─────────────── */
    .rv-summary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-md);
      margin: var(--space-lg) 0;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
    }
    .rv-section.rv-revealed .rv-summary { opacity: 1; transform: none; }
    .rv-summary-score {
      font-family: var(--font-display);
      font-size: 3.5rem;
      font-weight: 300;
      line-height: 1;
      color: var(--color-deep);
    }
    .rv-summary-right {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .rv-summary-stars {
      display: flex;
      gap: 3px;
    }
    .rv-summary-count {
      font-family: var(--font-body);
      font-size: 0.8rem;
      color: var(--color-earth);
      letter-spacing: 0.03em;
    }

    /* ── Reviews grid ───────────────────────────────────────── */
    .rv-grid-wrap {
      padding: 0 var(--space-md);
      max-width: 1200px;
      margin: 0 auto;
    }
    .rv-grid {
      display: flex;
      gap: var(--space-md);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: var(--space-sm);
      scrollbar-width: none;
    }
    .rv-grid::-webkit-scrollbar { display: none; }
    .rv-card {
      flex: 0 0 auto;
      width: 84%;
      max-width: 340px;
      scroll-snap-align: start;
      background: var(--color-white);
      border: 1px solid var(--color-ash);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity 0.55s ease,
        transform 0.55s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    }
    .rv-card.rv-card-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .rv-card:hover {
      box-shadow: 0 4px 20px rgba(26, 46, 26, 0.1);
      border-color: rgba(74, 124, 47, 0.2);
    }

    /* Card top row */
    .rv-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-sm);
    }
    .rv-card-info { flex: 1; min-width: 0; }
    .rv-card-name {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 500;
      color: var(--color-deep);
      margin: 0 0 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rv-card-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .rv-card-stars { display: flex; gap: 2px; }
    .rv-card-date {
      font-family: var(--font-body);
      font-size: 0.75rem;
      color: var(--color-earth);
      letter-spacing: 0.02em;
    }

    /* Verified badge */
    .rv-verified-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(45, 80, 22, 0.08);
      border: 1px solid rgba(45, 80, 22, 0.2);
      color: var(--color-primary);
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: var(--radius-full);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .rv-verified-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-primary);
      flex-shrink: 0;
    }

    /* Message */
    .rv-card-message {
      font-family: var(--font-body);
      font-size: 0.97rem;
      font-weight: 300;
      line-height: 1.7;
      color: var(--color-deep);
      margin: 0;
    }
    .rv-card-message-expanded { }
    .rv-card-toggle {
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--color-primary);
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      letter-spacing: 0.02em;
      -webkit-tap-highlight-color: transparent;
    }
    .rv-card-toggle:hover { text-decoration: underline; }

    /* Star SVG helpers */
    .rv-star {
      width: 14px;
      height: 14px;
      fill: var(--color-gold);
    }
    .rv-star-empty {
      fill: none;
      stroke: var(--color-ash);
      stroke-width: 1.5px;
    }
    .rv-star-lg {
      width: 20px;
      height: 20px;
      fill: var(--color-gold);
    }
    .rv-star-lg-empty {
      fill: none;
      stroke: var(--color-ash);
      stroke-width: 1.5px;
    }

    /* ── Skeleton cards ─────────────────────────────────────── */
    .rv-skeleton {
      background: var(--color-white);
      border: 1px solid var(--color-ash);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }
    .rv-skeleton-line {
      background: var(--color-ash);
      border-radius: 4px;
      animation: rvShimmer 1.4s ease-in-out infinite;
    }
    .rv-skeleton-name  { height: 18px; width: 55%; }
    .rv-skeleton-stars { height: 14px; width: 100px; margin-top: 2px; }
    .rv-skeleton-text  { height: 14px; width: 100%; }
    .rv-skeleton-short { height: 14px; width: 70%; }
    @keyframes rvShimmer {
      0%   { opacity: 0.4; }
      50%  { opacity: 0.7; }
      100% { opacity: 0.4; }
    }

    /* ── Empty state ─────────────────────────────────────────── */
    .rv-empty {
      text-align: center;
      padding: var(--space-xl) var(--space-md);
      color: var(--color-earth);
      font-family: var(--font-body);
      font-size: 0.95rem;
      display: none;
    }
    .rv-empty.rv-empty-visible { display: block; }

    /* ── Submit review CTA ──────────────────────────────────── */
    .rv-submit-wrap {
      text-align: center;
      padding: var(--space-lg) var(--space-md) 0;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
    }
    .rv-section.rv-revealed .rv-submit-wrap { opacity: 1; transform: none; }
    .rv-submit-label {
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--color-earth);
      margin-bottom: var(--space-sm);
    }
    .rv-submit-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 13px 28px;
      border-radius: var(--radius-xl);
      border: 1.5px solid var(--color-primary);
      background: transparent;
      color: var(--color-primary);
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }
    .rv-submit-btn:hover {
      background: var(--color-primary);
      color: var(--color-white);
      box-shadow: 0 4px 20px rgba(45, 80, 22, 0.3);
    }
    .rv-submit-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

    /* ── Review submission modal ─────────────────────────────── */
    .rv-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 8000;
      background: rgba(10, 16, 10, 0.72);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }
    .rv-modal-backdrop.rv-modal-open {
      opacity: 1;
      pointer-events: auto;
    }
    .rv-modal {
      background: var(--color-white);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      width: 100%;
      max-width: 560px;
      padding: var(--space-lg) var(--space-md) var(--space-xl);
      transform: translateY(40px);
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      position: relative;
      max-height: 90vh;
      overflow-y: auto;
    }
    .rv-modal-backdrop.rv-modal-open .rv-modal {
      transform: translateY(0);
    }
    .rv-modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--color-ash);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--color-deep);
      transition: background 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }
    .rv-modal-close:hover { background: var(--color-soft); color: var(--color-white); }
    .rv-modal-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
    .rv-modal-title {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 400;
      color: var(--color-deep);
      margin-bottom: var(--space-xs);
    }
    .rv-modal-subtitle {
      font-family: var(--font-body);
      font-size: 0.88rem;
      color: var(--color-earth);
      margin-bottom: var(--space-md);
      line-height: 1.5;
    }

    /* Step indicators */
    .rv-steps {
      display: flex;
      align-items: center;
      gap: 0;
      margin-bottom: var(--space-md);
    }
    .rv-step-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-ash);
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .rv-step-dot.rv-step-active {
      background: var(--color-primary);
      transform: scale(1.3);
    }
    .rv-step-dot.rv-step-done { background: var(--color-accent); }
    .rv-step-line {
      flex: 1;
      height: 1px;
      background: var(--color-ash);
      margin: 0 6px;
    }

    /* Form fields */
    .rv-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: var(--space-sm);
    }
    .rv-label {
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-deep);
    }
    .rv-input {
      font-family: var(--font-body);
      font-size: 1rem;
      color: var(--color-deep);
      background: var(--color-light);
      border: 1.5px solid var(--color-ash);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      width: 100%;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      -webkit-appearance: none;
    }
    .rv-input:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1);
    }
    .rv-input::placeholder { color: var(--color-soft); }
    .rv-input.rv-input-error { border-color: #c0392b; }
    .rv-input-hint {
      font-family: var(--font-body);
      font-size: 0.78rem;
      color: var(--color-earth);
    }
    .rv-input-error-msg {
      font-family: var(--font-body);
      font-size: 0.78rem;
      color: #c0392b;
      display: none;
    }
    .rv-input-error-msg.rv-error-visible { display: block; }

    /* Star rating picker */
    .rv-star-picker {
      display: flex;
      gap: 8px;
      margin-bottom: var(--space-sm);
    }
    .rv-star-pick-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 2px;
      -webkit-tap-highlight-color: transparent;
      outline: none;
      transition: transform 0.15s ease;
    }
    .rv-star-pick-btn:hover { transform: scale(1.15); }
    .rv-star-pick-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
    .rv-star-pick-svg {
      width: 32px;
      height: 32px;
      fill: var(--color-ash);
      transition: fill 0.15s ease;
    }
    .rv-star-pick-svg.rv-star-selected { fill: var(--color-gold); }
    .rv-star-rating-label {
      font-family: var(--font-body);
      font-size: 0.82rem;
      color: var(--color-earth);
      margin-bottom: var(--space-sm);
      min-height: 1.2em;
    }

    /* OTP input row */
    /* ── Booking selection cards ────────────────────────────── */
    .rv-booking-card {
      display: flex;
      align-items: flex-start;
      gap: var(--space-sm);
      padding: 14px;
      border: 1.5px solid var(--color-ash);
      border-radius: var(--radius-md);
      margin-bottom: 10px;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      background: var(--color-white);
    }
    .rv-booking-card:hover {
      border-color: rgba(74, 124, 47, 0.4);
      box-shadow: 0 2px 12px rgba(26, 46, 26, 0.08);
    }
    .rv-booking-card.rv-booking-selected {
      border-color: var(--color-primary);
      background: rgba(45, 80, 22, 0.04);
      box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1);
    }
    .rv-booking-radio {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid var(--color-ash);
      flex-shrink: 0;
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.2s ease;
    }
    .rv-booking-card.rv-booking-selected .rv-booking-radio {
      border-color: var(--color-primary);
    }
    .rv-booking-radio-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-primary);
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    .rv-booking-card.rv-booking-selected .rv-booking-radio-dot { opacity: 1; }
    .rv-booking-info { flex: 1; min-width: 0; }
    .rv-booking-name {
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--color-deep);
      margin-bottom: 2px;
    }
    .rv-booking-id {
      font-family: var(--font-body);
      font-size: 0.75rem;
      color: var(--color-primary);
      font-weight: 500;
      letter-spacing: 0.04em;
      margin-bottom: 4px;
    }
    .rv-booking-meta {
      font-family: var(--font-body);
      font-size: 0.78rem;
      color: var(--color-earth);
      line-height: 1.4;
    }

    /* ── Booking recap strip (top of step 3) ─────────────────── */
    .rv-booking-recap {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(45, 80, 22, 0.06);
      border: 1px solid rgba(45, 80, 22, 0.15);
      border-radius: var(--radius-md);
      padding: 10px 14px;
      margin-bottom: var(--space-sm);
    }
    .rv-recap-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(45, 80, 22, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .rv-recap-text { flex: 1; min-width: 0; }
    .rv-recap-room {
      font-family: var(--font-body);
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--color-deep);
    }
    .rv-recap-id {
      font-family: var(--font-body);
      font-size: 0.72rem;
      color: var(--color-primary);
      letter-spacing: 0.04em;
    }

    /* Primary modal button */
    .rv-modal-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 14px;
      border-radius: var(--radius-xl);
      border: none;
      background: var(--color-primary);
      color: var(--color-white);
      cursor: pointer;
      margin-top: var(--space-sm);
      transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }
    .rv-modal-btn:hover {
      background: var(--color-accent);
      box-shadow: 0 4px 20px rgba(45, 80, 22, 0.35);
    }
    .rv-modal-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .rv-modal-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

    /* Success state */
    .rv-success-wrap {
      text-align: center;
      padding: var(--space-lg) 0;
      display: none;
    }
    .rv-success-wrap.rv-success-visible { display: block; }
    .rv-success-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(45, 80, 22, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto var(--space-sm);
    }
    .rv-success-title {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--color-deep);
      margin-bottom: var(--space-xs);
    }
    .rv-success-msg {
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--color-earth);
      line-height: 1.6;
    }

    /* ── Responsive ─────────────────────────────────────────── */
    @media (min-width: 640px) {
      .rv-card { width: 47%; }
      .rv-grid-wrap { padding: 0 var(--space-lg); }
      .rv-modal {
        border-radius: var(--radius-lg);
        margin: auto;
        margin-bottom: var(--space-lg);
      }
      .rv-modal-backdrop { align-items: center; }
    }
    @media (min-width: 1024px) {
      .rv-card { width: 31%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .rv-card,
      .rv-modal,
      .rv-modal-backdrop { transition: none !important; animation: none !important; }
      .rv-card { opacity: 1 !important; transform: none !important; }
      .rv-skeleton-line { animation: none !important; }
    }

/* ---- style block 12 (originally at char offset 286016) ---- */
/* faq.css */

    /* ── Section shell ──────────────────────────────────────── */
    .fq-section {
      background: var(--color-white);
      padding: var(--space-2xl) 0;
      overflow: hidden;
    }
    .fq-section.section-hidden { display: none; }

    /* ── Header ─────────────────────────────────────────────── */
    .fq-header {
      text-align: center;
      padding: 0 var(--space-md);
      margin-bottom: var(--space-xl);
    }
    .fq-eyebrow {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: var(--space-xs);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .fq-title {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 8vw, 3.5rem);
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: var(--color-deep);
      margin-bottom: var(--space-sm);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
    }
    .fq-lead {
      font-family: var(--font-body);
      font-size: clamp(0.95rem, 3vw, 1.1rem);
      font-weight: 300;
      line-height: 1.7;
      color: var(--color-earth);
      max-width: 540px;
      margin: 0 auto var(--space-md);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
    }
    .fq-divider {
      width: 48px;
      height: 1px;
      margin: 0 auto;
      background: linear-gradient(to right, transparent, var(--color-primary), transparent);
      opacity: 0;
      transform: scaleX(0.4);
      transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
    }
    .fq-section.fq-revealed .fq-eyebrow,
    .fq-section.fq-revealed .fq-title,
    .fq-section.fq-revealed .fq-lead,
    .fq-section.fq-revealed .fq-divider {
      opacity: 1;
      transform: none;
    }

    /* ── Accordion list ─────────────────────────────────────── */
    .fq-list-wrap {
      max-width: 760px;
      margin: 0 auto;
      padding: 0 var(--space-md);
    }
    .fq-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .fq-item {
      border-bottom: 1px solid var(--color-ash);
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity 0.5s ease,
        transform 0.5s ease;
    }
    .fq-item:first-child { border-top: 1px solid var(--color-ash); }
    .fq-item.fq-item-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Question button */
    .fq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
      padding: var(--space-md) 0;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }
    .fq-question:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
      border-radius: 4px;
    }
    .fq-question-text {
      font-family: var(--font-body);
      font-size: clamp(0.95rem, 2.5vw, 1.05rem);
      font-weight: 500;
      color: var(--color-deep);
      line-height: 1.45;
      flex: 1;
      transition: color 0.2s ease;
    }
    .fq-item.fq-open .fq-question-text {
      color: var(--color-primary);
    }

    /* Chevron icon */
    .fq-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--color-light);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.25s ease, transform 0.3s ease;
    }
    .fq-icon svg {
      transition: transform 0.3s ease;
    }
    .fq-item.fq-open .fq-icon {
      background: var(--color-primary);
    }
    .fq-item.fq-open .fq-icon svg {
      transform: rotate(180deg);
    }
    .fq-icon svg path,
    .fq-icon svg polyline {
      stroke: var(--color-deep);
      transition: stroke 0.25s ease;
    }
    .fq-item.fq-open .fq-icon svg path,
    .fq-item.fq-open .fq-icon svg polyline {
      stroke: #fff;
    }

    /* Answer panel */
    .fq-answer-wrap {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .fq-item.fq-open .fq-answer-wrap {
      /* max-height set via JS to content height */
    }
    .fq-answer {
      font-family: var(--font-body);
      font-size: clamp(0.9rem, 2.5vw, 1rem);
      font-weight: 300;
      line-height: 1.75;
      color: var(--color-deep);
      padding-bottom: var(--space-md);
      padding-right: var(--space-lg);
    }

    /* ── Skeleton ────────────────────────────────────────────── */
    .fq-skeleton-item {
      border-bottom: 1px solid var(--color-ash);
      padding: var(--space-md) 0;
    }
    .fq-skeleton-item:first-child { border-top: 1px solid var(--color-ash); }
    .fq-skeleton-line {
      background: var(--color-ash);
      border-radius: 4px;
      animation: fqShimmer 1.4s ease-in-out infinite;
    }
    .fq-skeleton-q { height: 16px; width: 75%; }
    .fq-skeleton-q2 { height: 16px; width: 55%; margin-top: 6px; }
    @keyframes fqShimmer {
      0%   { opacity: 0.4; }
      50%  { opacity: 0.75; }
      100% { opacity: 0.4; }
    }

    /* ── Empty state ─────────────────────────────────────────── */
    .fq-empty {
      text-align: center;
      padding: var(--space-xl) var(--space-md);
      color: var(--color-earth);
      font-family: var(--font-body);
      font-size: 0.95rem;
      display: none;
    }
    .fq-empty.fq-empty-visible { display: block; }

    /* ── Contact nudge ───────────────────────────────────────── */
    .fq-contact-nudge {
      text-align: center;
      padding: var(--space-lg) var(--space-md) 0;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
    }
    .fq-section.fq-revealed .fq-contact-nudge { opacity: 1; transform: none; }
    .fq-nudge-text {
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--color-earth);
      margin-bottom: var(--space-sm);
    }
    .fq-wa-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 12px 24px;
      border-radius: var(--radius-xl);
      border: 1.5px solid rgba(37, 211, 102, 0.5);
      background: rgba(37, 211, 102, 0.06);
      color: var(--color-deep);
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .fq-wa-btn:hover {
      background: rgba(37, 211, 102, 0.14);
      border-color: rgba(37, 211, 102, 0.75);
      box-shadow: 0 4px 16px rgba(37, 211, 102, 0.15);
    }
    .fq-wa-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

    /* ── Responsive ─────────────────────────────────────────── */
    @media (min-width: 640px) {
      .fq-list-wrap { padding: 0 var(--space-lg); }
      .fq-answer { padding-right: var(--space-xl); }
    }
    @media (prefers-reduced-motion: reduce) {
      .fq-item,
      .fq-answer-wrap,
      .fq-icon,
      .fq-icon svg { transition: none !important; animation: none !important; }
      .fq-item { opacity: 1 !important; transform: none !important; }
      .fq-skeleton-line { animation: none !important; }
    }

/* ---- style block 13 (originally at char offset 307894) ---- */
/* contact.css */

    /* ── Section shell ──────────────────────────────────────── */
    .ct-section {
      background: var(--color-deep);
      padding: var(--space-2xl) 0 0;
      overflow: hidden;
    }
    .ct-section.section-hidden { display: none; }

    /* ── Header ─────────────────────────────────────────────── */
    .ct-header {
      text-align: center;
      padding: 0 var(--space-md);
      margin-bottom: var(--space-xl);
    }
    .ct-eyebrow {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: var(--space-xs);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .ct-title {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 8vw, 3.5rem);
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: var(--color-white);
      margin-bottom: var(--space-sm);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
    }
    .ct-lead {
      font-family: var(--font-body);
      font-size: clamp(0.95rem, 3vw, 1.1rem);
      font-weight: 300;
      line-height: 1.7;
      color: var(--color-soft);
      max-width: 480px;
      margin: 0 auto var(--space-md);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
    }
    .ct-divider {
      width: 48px;
      height: 1px;
      margin: 0 auto;
      background: linear-gradient(to right, transparent, var(--color-gold), transparent);
      opacity: 0;
      transform: scaleX(0.4);
      transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
    }
    .ct-section.ct-revealed .ct-eyebrow,
    .ct-section.ct-revealed .ct-title,
    .ct-section.ct-revealed .ct-lead,
    .ct-section.ct-revealed .ct-divider {
      opacity: 1;
      transform: none;
    }

    /* ── Contact cards grid ─────────────────────────────────── */
    .ct-cards-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--space-md);
    }
    .ct-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-sm);
      margin-bottom: var(--space-lg);
    }
    .ct-card {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-md);
      padding: var(--space-sm) var(--space-md);
      display: grid;
      grid-template-columns: 40px 1fr;
      grid-template-rows: auto auto;
      column-gap: var(--space-sm);
      row-gap: 2px;
      align-items: center;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      transition:
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.18s ease,
        box-shadow 0.22s ease;
      -webkit-tap-highlight-color: transparent;
      opacity: 0;
      transform: translateY(20px);
    }
    .ct-card.ct-card-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .ct-card:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.18);
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    .ct-card:focus-visible {
      outline: 2px solid var(--color-gold);
      outline-offset: 2px;
    }
    .ct-card-icon {
      grid-column: 1;
      grid-row: 1 / 3;
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ct-card-icon-wa   { background: rgba(37, 211, 102, 0.15); }
    .ct-card-icon-call { background: rgba(74, 124, 47, 0.2); }
    .ct-card-icon-mail { background: rgba(201, 132, 26, 0.15); }
    .ct-card-label {
      grid-column: 2;
      grid-row: 1;
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-soft);
    }
    .ct-card-value {
      grid-column: 2;
      grid-row: 2;
      font-family: var(--font-body);
      font-size: 0.92rem;
      font-weight: 400;
      color: var(--color-white);
      line-height: 1.4;
      word-break: break-all;
    }
    .ct-card-wa   .ct-card-value { color: #4AE07A; }
    .ct-card-call .ct-card-value { color: var(--color-soft); }
    .ct-card-mail .ct-card-value { color: var(--color-gold); }

    /* Address card — full width */
    .ct-address-card {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      margin-bottom: var(--space-lg);
      display: flex;
      align-items: flex-start;
      gap: var(--space-md);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.55s ease 0.2s, transform 0.55s ease 0.2s;
    }
    .ct-address-card.ct-card-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .ct-address-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      background: rgba(201, 132, 26, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .ct-address-body { flex: 1; min-width: 0; }
    .ct-address-label {
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-soft);
      margin-bottom: 6px;
    }
    .ct-address-text {
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 300;
      color: var(--color-white);
      line-height: 1.65;
      margin: 0 0 var(--space-sm);
    }
    .ct-directions-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      color: var(--color-gold);
      background: none;
      border: 1px solid rgba(201, 132, 26, 0.35);
      border-radius: var(--radius-full);
      padding: 7px 16px;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s ease, border-color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .ct-directions-btn:hover {
      background: rgba(201, 132, 26, 0.1);
      border-color: rgba(201, 132, 26, 0.6);
    }
    .ct-directions-btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

    /* ── Google Maps embed ──────────────────────────────────── */
    .ct-map-wrap {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #1A2E1A;
      overflow: hidden;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
      margin-bottom: var(--space-lg);
    }
    .ct-map-wrap.ct-card-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .ct-map-wrap iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      filter: grayscale(20%) contrast(1.05);
    }
    .ct-map-fallback {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-sm);
      background: linear-gradient(135deg, #1A2E1A 0%, #0F1A0F 100%);
    }
    .ct-map-fallback-text {
      font-family: var(--font-body);
      font-size: 0.88rem;
      color: var(--color-soft);
    }

    /* ── Social links row ───────────────────────────────────── */
    .ct-social-wrap {
      display: flex;
      justify-content: center;
      gap: var(--space-sm);
      padding: 0 var(--space-md) var(--space-lg);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
    }
    .ct-section.ct-revealed .ct-social-wrap { opacity: 1; transform: none; }
    .ct-social-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-soft);
      text-decoration: none;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.18s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .ct-social-btn:hover {
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.25);
      color: var(--color-white);
      transform: translateY(-2px);
    }
    .ct-social-btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

    /* ── Footer strip ───────────────────────────────────────── */
    .ct-footer {
      background: var(--color-night);
      padding: var(--space-lg) var(--space-md);
      text-align: center;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .ct-footer-logo-img {
      width: 44px;
      height: 44px;
      border-radius: 11px;
      object-fit: cover;
      display: none;
      margin: 0 auto 8px;
    }
    .ct-footer-logo {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 300;
      color: var(--color-white);
      letter-spacing: 0.02em;
      margin-bottom: 6px;
    }
    .ct-footer-tagline {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 0.88rem;
      color: var(--color-gold);
      margin-bottom: var(--space-sm);
    }
    .ct-footer-copy {
      font-family: var(--font-body);
      font-size: 0.72rem;
      color: rgba(143, 175, 122, 0.5);
      letter-spacing: 0.04em;
    }

    /* ── Floating WhatsApp button (all pages) ───────────────── */
    .ct-wa-float {
      position: fixed;
      bottom: 80px;   /* above mobile nav bar */
      right: 18px;
      z-index: 7000;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #25D366;
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      border: none;
      outline: none;
      opacity: 0;
      pointer-events: none;
    }
    .ct-wa-float.ct-wa-float-visible {
      opacity: 1;
      pointer-events: auto;
      animation: ctWaAppear 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .ct-wa-float:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
    }
    .ct-wa-float:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    @keyframes ctWaAppear {
      from { opacity: 0; transform: scale(0.7) translateY(12px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* ── Responsive ─────────────────────────────────────────── */
    @media (min-width: 640px) {
      .ct-cards { grid-template-columns: 1fr 1fr 1fr; }
      .ct-cards-wrap { padding: 0 var(--space-lg); }
      .ct-map-wrap { aspect-ratio: 21 / 9; }
      .ct-wa-float { bottom: 32px; width: 56px; height: 56px; }
    }
    @media (min-width: 1024px) {
      .ct-cards { grid-template-columns: repeat(3, 1fr); }
      .ct-map-wrap { max-height: 420px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ct-card,
      .ct-address-card,
      .ct-map-wrap,
      .ct-wa-float { transition: none !important; animation: none !important; }
      .ct-card         { opacity: 1 !important; transform: none !important; }
      .ct-address-card { opacity: 1 !important; transform: none !important; }
      .ct-map-wrap     { opacity: 1 !important; transform: none !important; }
      .ct-wa-float.ct-wa-float-visible { opacity: 1; animation: none; }
    }