/* ================================================================
   LOFT 331 — MASTER STYLESHEET
   One external file replacing the duplicated per-page CSS that used
   to live in 5 separate CoachLab "Custom CSS" fields.

   HOW THIS FILE IS ORGANIZED
   1. Design tokens (:root)
   2. CoachLab-native overrides — UNPREFIXED on purpose. These target
      CoachLab's own built-in classes (text-widget-content, toggle-widget,
      section-hero, grid-column, etc). Renaming them would break the
      override, since that markup is generated by CoachLab, not us.
   3. Navigation — UNPREFIXED on purpose, per your instruction. This is
      your own funnel nav and is meant to override CoachLab's native nav.
   4. L331 shared design system — every class below this point that is
      NOT in section 6 or 7 is prefixed with l331- and is safe to use
      on any page without colliding with CoachLab.
   5. L331 "Spaces" grid — Home-page-only classes. These got a new
      l331-spaces- namespace because the OLD class names (workspace-grid,
      header, title, btn-book, price-*, etc.) are reused, with different
      CSS, by the cal.com booking widget below. See the README for the
      manual class-renames you'll need to make in the Home page builder.
   6. CAL.COM BOOKING WIDGET — frozen, unprefixed, byte-identical to what
      was already live on the About + Meeting pages. DO NOT RENAME OR
      RESTYLE anything in this section without testing the live booking
      flow first. We agreed to revisit this block in a separate pass.
   7. Google Reviews slider widget — CSS reconstructed; the JS/HTML for
      this was already on your Home page, but no matching CSS existed in
      any uploaded file, so the widget has been unstyled until now.
   8. Billing period toggle — reusable segmented control (Monthly /
      Quarterly / Annual) used on desk-membership info-cards. New,
      isolated namespace (l331-billing-), doesn't touch anything above.
   9. FAQ section — flat-divider accordion (no boxes), 2-column layout,
      centered header. New, isolated namespace (l331-faq-).
   ================================================================ */


/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  --color-white:        #ffffff;
  --color-gray-50:      #f8fafc;
  --color-gray-100:     #f1f5f9;
  --color-gray-200:     #e2e8f0;
  --color-gray-300:     #cbd5e1;
  --color-gray-500:     #64748b;
  --color-gray-700:     #334155;
  --color-gray-900:     #0f172a;
  --color-gray-500-a:   rgba(102,102,102,0.5);
  --color-white-15:     rgba(255,255,255,0.15);
  --color-white-20:     rgba(255,255,255,0.20);
  --color-white-50:     rgba(255,255,255,0.50);
  --color-green-500:    #1a5c44;
  --color-green-600: #013C3F;
  --color-green-muted: #a9dcdfde;
  --color-beige-muted: #f1f1e6;
  --color-gray-muted: #cbcbcb;
  --color-cyan-600:     #0891b2;
  --color-cyan-900:     #083344;
  --color-yellow-400:   #fbbc04;
  --color-aqua-light:   #e8f4fa;
  --gradient-accent: linear-gradient(150deg, #003630ff 0%, #003630db 0%, #0036301a 60%);
  --font-sans:    'Lato', sans-serif;
  --font-display: "Fraunces", serif;
  --text-xs: 0.75rem;
  --text-sm: 0.88rem;
  --text-base: 1rem;
  --text-md: 1.1rem;
  --text-lg: clamp(24px, 0.45vw + 16px, 26.4px);
  --text-xl: clamp(26px, 0.79vw + 18px, 35.2px);
  --text-2xl: clamp(28px, 1.79vw + 28px, 47.2px);
  --text-3xl: clamp(30px, 2.02vw + 28px, 62.4px);
  --text-4xl: clamp(32px, 4.5vw + 18px, 83.2px);
  --leading-tight:  1;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose: 1.75;
  --tracking-wide:   0.05em;
  --tracking-normal:  0em;
  --tracking-tight:   -0.025em;
  --tracking-tighter: -0.065em;
  --space-2:  clamp(0.5rem, 0.5rem + 0.25vw, 0.75rem);
  --space-3: clamp(0.75rem, 0.75rem + 0.5vw, 1.25rem);
  --space-4:  clamp(1rem, 1rem + 0.5vw, 1.5rem);
  --space-6:  clamp(1.5rem, 1.5rem + 0.75vw, 2.25rem);
  --space-8:  clamp(2rem, 2rem + 1vw, 3rem);
  --space-10: clamp(2.5rem, 2.5rem + 1.25vw, 3.75rem);
  --space-12: clamp(3rem, 3rem + 1.5vw, 4.5rem);
  --space-14: clamp(3.5rem, 3.5rem + 1.75vw, 5.25rem);
  --space-16: clamp(4rem, 4rem + 2vw, 6rem);
  --space-18: clamp(4.5rem, 4.5rem + 2.25vw, 6.75rem);
  --space-20: clamp(5rem, 5rem + 2.5vw, 7.5rem);
  --space-24: clamp(6rem, 6rem + 3vw, 9rem);
  --space-split: clamp(3.5rem, 2.5rem + 0.75vw, 5.25rem);
  --width-h1: clamp(400px, 50vw + 100px, 800px);
  --p-1:  0.25rem;
  --p-2:  0.50rem;
  --p-3:  0.75rem;
  --p-4:  1.00rem;
  --p-5:  1.25rem;
  --p-6:  1.50rem;
  --p-8:  2.00rem;
  --p-10: 2.50rem;
  --p-12: 3.00rem;
  --p-16: 4.00rem;
  --p-button: 14px 28px;
  --max-width: 1520px;
  --border-radius-sm:   8px;
  --border-radius-md:   12px;
  --border-radius-lg:   16px;
  --border-radius-xl:   24px;
  --border-radius-pill: 9999px;
  --border-radius-50:   50px;
  --shadow-sm:    0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --shadow-md:    0 10px 20px -6px rgba(15,23,42,0.08), 0 4px 12px -2px rgba(15,23,42,0.04);
  --shadow-lg:    0 12px 20px -8px rgba(15,23,42,0.12), 0 4px 12px -2px rgba(15,23,42,0.08);
  --shadow-badge: 0 4px 10px rgba(0,0,0,0.15);
  --transition-speed:   0.35s;
  --transition-bezier:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-spring:  cubic-bezier(0.16, 1, 0.30, 1);
}


/* ================================================================
   2. SIMVOLY-NATIVE OVERRIDES — UNPREFIXED ON PURPOSE
   ================================================================ */
.note-editable.panel-body h1, .text-widget-content h1 { font-size: var(--text-3xl)!important; letter-spacing: var(--tracking-tighter)!important; }
.note-editable.panel-body h2, .text-widget-content h2 { font-size: var(--text-2xl)!important; letter-spacing: var(--tracking-tighter)!important; }
.note-editable.panel-body h3, .text-widget-content h3 { font-size:var(--text-xl)!important; letter-spacing: var(--tracking-tighter)!important; }
.note-editable.panel-body h4, .text-widget-content h4 { font-size: var(--text-lg)!important; letter-spacing: var(--tracking-tighter)!important; }
.note-editable.panel-body h5, .text-widget-content h5 { font-size: var(--text-base)!important; letter-spacing: var(--tracking-tight)!important; }
.note-editable.panel-body p, .text-widget-content p { font-size: var(--text-base)!important; }

.gradient-accent { background: var(--gradient-accent) !important; position: relative; overflow: hidden; }
.lazyImage { border-radius: var(--border-radius-md); }
.tos-prev { background: var(--color-green-600); }

@media (max-width: 1024px) { .grid-content { width: 92%; } }



@media screen and (max-width: 768px) {
  .column-remove .grid-column.grid-column-no-widgets.justify-flex-start { padding-top: 0; }
}

.widget-form input[type=text], .widget-form select, .widget-form textarea { padding: 15px 25px; box-sizing: border-box; font-size: 12px; }
.social-media-button i { padding: 8px; }
.hr-title { margin: 10px 0; }

.toggle-widget.style-4 .toggle-header { font-size: var(--text-base) !important; font-weight: 600; color: var(--color-cyan-900); line-height: 1.4; }
.toggle-widget.style-4 section { border-radius: var(--border-radius-sm); }
.toggle-widget.style-4 .toggle-widget-content { border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm); }

#text-widget-1775248070929 .text-widget-content p { width: clamp(100%, 25rem + 25vw, 100%) !important; box-sizing: border-box; }

.type1.icon-section .icon { margin-right: 13px!important; margin-top: 0px; }
.type1.icon-section i.icon-section-icon { font-size: 15px; padding: 0; }
.type3.icon-section .icon i { line-height: 37px; width: 100%; text-align: center; font-size: 18px; }
.type3.icon-section header { padding-left: 30px; box-sizing: border-box; width: 100%; }
.type3.icon-section .icon { position: absolute; top: 0; left: 0; width: 15px; height: 50px; border-radius: 25px; }


/* ================================================================
   3. NAVIGATION — UNPREFIXED ON PURPOSE
   ================================================================ */
/* ----------------------------------------------------------------
   OLD NAV — COMMENTED OUT, KEPT FOR REFERENCE (not in use).
   HTML was removed from Simvoly and replaced by the Home hero
   floating nav (Section 23). TO RESTORE: delete this opening marker
   and the closing marker at the end of this section.
   (Two already-disabled props — border-bottom, box-shadow — were
   removed from .navbar so this wrap is valid; CSS comments can't nest.)
   ----------------------------------------------------------------
.logo-image {height: clamp(56px, 16vw, 75px);width: auto;display: block;object-fit: contain;}
.logo-container { display: flex; align-items: center; text-decoration: none; }
.logo-text { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: var(--tracking-tighter); color: var(--color-gray-700); }

.navbar {background-color: rgba(255, 255, 255, 0.95);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);position: sticky;top: 0;z-index: 100;width: 100%;background: #fff;transition: transform 0.3s ease, opacity 0.3s ease;}
.navbar--hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }

.navbar-inner { margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 125px; font-family: var(--font-sans); width: 92%; max-width: 1380px; }

.nav-toggle:checked ~ .mobile-menu { opacity: 1; pointer-events: auto; padding: 16px var(--p-2); border-top-color: var(--color-gray-200); transform: translateY(0); }

.navbar-menu {display: none;align-items: center;height: 100%;gap: var(--p-12);}
.nav-item { height: 100%; display: flex; align-items: center; }

.navbar-link { font-size: 16px; color: var(--color-gray-700); font-weight: 500; text-decoration: none; letter-spacing: var(--tracking-tight); transition: color var(--transition-speed); height: 100%; display: flex; align-items: center; font-family: var(--font-sans); }
.navbar-link:hover { color: var(--color-green-500); max-width: 1380px; }
.nav-item:hover .navbar-link { border-bottom: none; }

.navbar-actions { display: none; align-items: center; gap: 16px; }
.nav-lang { font-size: var(--text-sm); color: #0f172a; text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: var(--p-2); }

.mega-menu-wrapper { position: fixed; top: 125px; left: 0; width: 100%; background: var(--color-white); border-bottom: 1px solid var(--color-gray-200); padding-bottom: var(--p-6); opacity: 0; visibility: hidden; transform: translateY(5px); transition: all 0.2s var(--transition-bezier); z-index: 99; }
.nav-item:hover .mega-menu-wrapper { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-menu-inner {max-width: var(--max-width);margin: 0 auto;padding-top: var(--p-8);display: grid;grid-template-columns: 1fr 1.25fr 1fr;gap: var(--space-16);box-shadow: none;max-width: 1380px;width: 92%;}

.mega-col-intro { display: flex; flex-direction: column; align-items: flex-start; }
.mega-col-intro .btn-outline { background: transparent !important; border: 1px solid var(--color-gray-300); color: var(--color-green-600) !important; }
.mega-title {font-family: var(--font-display);font-size: 2.75rem;color: var(--color-green-600);margin-bottom: 16px;font-weight: 600;letter-spacing: var(--tracking-tighter);}
.mega-desc { font-size: var(--text-sm); color: #64748b; line-height: var(--leading-normal); margin-bottom: var(--p-8); }

.mega-col-categories { display: flex; flex-direction: column; gap: var(--p-2); }
.cat-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px; border-radius: var(--border-radius-sm); background: transparent; border: none; text-align: left; cursor: pointer; transition: background var(--transition-speed); text-decoration: none; }
.cat-btn:hover, .cat-btn.active {background: var(--color-gray-200);}
.cat-btn-text h4 {font-size: var(--text-base);color: var(--color-gray-700);font-weight: normal;margin-bottom: var(--p-2);}
.cat-btn-text p { font-size: var(--text-sm); color: #64748b; line-height: var(--leading-tight); }
.cat-chevron { color: #64748b; font-size: var(--text-lg); }

.mega-col-links { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.mega-sublinks-panel { display: none; flex-direction: column; gap: 16px; }
.mega-sublinks-panel.active { display: flex; }
.mega-sublink { font-size: var(--text-base); color: #0f172a; text-decoration: none; transition: color var(--transition-speed); }
.mega-sublink:hover { color: var(--color-green-500); }

.mega-col-promos { display: grid; grid-template-columns: 1fr; gap: 16px; }
.promo-card { position: relative; border-radius: var(--border-radius-md); overflow: hidden; height: 180px; display: flex; flex-direction: column; text-decoration: none; background-color: var(--color-gray-200); background-size: cover; background-position: center; }
.promo-card:nth-child(1) { background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=600'); }
.promo-card:nth-child(2) { background-image: url('https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&q=80&w=600'); }
.promo-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%); z-index: 1; }
.promo-content { position: relative; z-index: 2; padding: var(--p-5); margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; }
.promo-badge { background: var(--color-yellow-400); color: #0f172a; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 4px 8px; border-radius: var(--border-radius-pill); margin-bottom: auto; position: absolute; top: var(--p-5); left: var(--p-5); z-index: 2; }
.promo-content h3 { color: var(--color-white); font-size: var(--text-base); font-weight: 600; line-height: var(--leading-snug); margin-bottom: var(--p-2); }
.promo-content p { color: var(--color-gray-100); font-size: 12px; line-height: var(--leading-tight); }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.hamburger-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; }
.hamburger-btn span { display: block; width: 22px; height: 2px; background-color: #0f172a; border-radius: 2px; transition: all 0.25s ease; }

.mobile-menu { position: fixed; top: 125px; left: 0; width: 100%; opacity: 0; pointer-events: none; flex-direction: column; display: flex; background: var(--color-white); border-top: 1px solid transparent; padding: 0 var(--p-2) 32px !important; gap: 4px; transition: opacity 0.3s ease; z-index: 9999; overflow-y: auto; max-height: calc(100vh - 125px); box-shadow: none; }
.mobile-menu a {text-align: center;font-size: var(--text-sm);color: var(--color-gray-700);font-weight: 500;padding: 15px var(--p-6);border-radius: var(--border-radius-sm);transition: background-color 0.2s, color 0.2s;text-decoration: none;}
.mobile-menu a:hover, .mobile-menu a.active { background: var(--color-gray-50); color: var(--color-green-600); }

@media (min-width: 1024px) { .navbar-menu, .navbar-actions { display: flex; } }
@media (max-width: 1023px) { .hamburger-btn { display: flex; } }
@media (max-width: 1023px) { .navbar-inner { padding-left:0; padding-right:0; } }

.nav-toggle:checked ~ .navbar-inner .hamburger-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .navbar-inner .hamburger-btn span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .navbar-inner .hamburger-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
   ----------------------------------------------------------------
   END OLD NAV — COMMENTED OUT
   ---------------------------------------------------------------- */


/* ================================================================
   4. L331 SHARED DESIGN SYSTEM
   ================================================================ */

/* --- Buttons --- */
.l331-btn {display: inline-flex;align-items: center;justify-content: center;padding: var(--p-button);font-family: var(--font-sans);font-weight: 500;text-decoration: none;border-radius: var(--border-radius-50);border: none;cursor: pointer;transition: all var(--transition-speed) var(--transition-bezier);font-size: var(--text-sm)!important;background-color: var(--color-green-600) !important;color: var(--color-white) !important;margin-top: var(--p-2);display: inline-flex;/* text-decoration: none; */}
@media (max-width: 768px) { .l331-btn { padding: var(--p-button); font-size: var(--text-sm); } }
.l331-btn-outline {background: transparent !important;border: 1px solid var(--color-white);color: var(--color-white) !important;display: inline-flex;align-items: center;justify-content: center;padding: var(--p-button);font-family: var(--font-sans);font-weight: 500;text-decoration: none;border-radius: var(--border-radius-50);}
.l331-btn-book-light { background: var(--color-green-600); color: var(--color-white)!important; border: 1px solid var(--color-gray-200); padding: var(--p-button); font-size: 14px; font-weight: 500; border-radius: var(--border-radius-pill); transition: all 0.2s; cursor: pointer; box-shadow: var(--shadow-sm); display: inline-flex; text-decoration: none; }
.l331-btn-book-light:hover { background: var(--color-green-500); }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--p-button); font-family: var(--font-sans); font-weight: 500; text-decoration: none; border-radius: var(--border-radius-50); border: none; cursor: pointer; transition: all var(--transition-speed) var(--transition-bezier); font-size: var(--text-sm)!important; background-color: var(--color-green-600) !important; color: var(--color-white) !important; }
@media (max-width: 768px) { .btn { padding: var(--p-button); font-size: var(--text-sm); margin-bottom: 16px; } }
.btn-outline { background: transparent !important; border: 1px solid var(--color-white); color: var(--color-white) !important; }
.mobile-cta { display: block; text-align: center; background-color: var(--color-green-600) !important; color: var(--color-white) !important; border-radius: var(--border-radius-50); font-weight: 500; }

/* --- Hero --- */
.l331-hero { position: relative; z-index: 1; }
.l331-hero-section {max-width: var(--max-width);margin: 0 auto;max-width: 1420px;}
.l331-hero-banner {position: relative;border-radius: var(--border-radius-xl);height: 646px;overflow: hidden;color: var(--color-white);background-color: #003630;} /* dark-green fallback (matches the overlay gradient's base color) so a slow-loading hero image never shows a blank/white flash mid-load — the space always looks intentional */
@media (max-width: 1024px) { .l331-hero-banner { height: auto; min-height: 500px; } }
@media (max-width: 768px) { .l331-hero-banner { min-height: 450px; border-radius: var(--border-radius-md); } }
.l331-hero-banner-image-wrap {position: absolute;inset: 0;border-radius: inherit;overflow: hidden;z-index: 1;}
.l331-hero-banner-image {width: 100%;height: 100%;object-fit: cover;filter: brightness(0.65);aspect-ratio: 4 / 3;min-height: 500px;border-radius: var(--border-radius-lg);}
.l331-hero-overlay-mask {position: absolute;inset: 0;background: var(--gradient-accent);mix-blend-mode: unset;opacity: 1.55;z-index: 2;border-radius: var(--border-radius-lg);}
.l331-hero-bottom-area { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; width: 100%; padding: 0; }
@media (max-width: 1024px) { .l331-hero-bottom-area { position: absolute; flex-direction: column; align-items: stretch; padding: var(--p-6); gap: var(--space-8); } }
@media (max-width: 768px) { .l331-hero-bottom-area {position: absolute;flex-direction: column;align-items: flex-start;padding: var(--p-6);bottom: 0;gap: 12px;} }
.l331-hero-texts-container {display: flex;flex-direction: row;justify-content: space-between;align-items: flex-end;width: 70%;padding: 0px 0 50px 50px;gap: var(--space-8);}
@media (max-width: 1024px) { .l331-hero-texts-container { width: 100%; padding: 0; flex-direction: column; align-items: flex-start; } }
@media (max-width: 768px) { .l331-hero-texts-container { width: 100%; padding: 0; flex-direction: column; align-items: flex-start; gap: 12px; } }
.l331-hero-text-block {max-width: 800px;width: 100%;flex-grow: 1;}
.l331-hero-title-main {font-size: var(--text-4xl);line-height: var(--leading-tight);margin-bottom: var(--p-2);letter-spacing: var(--tracking-tighter);font-family: var(--font-display);font-weight: 600;max-width: var(--width-h1);}
.l331-hero-subtitle-description {font-size: calc(var(--text-md));color: var(--color-white);line-height: var(--leading-normal);font-family: var(--font-sans);width: 100%;margin-bottom: 16px;max-width: 680px;}
@media (max-width: 768px) { .l331-hero-subtitle-description { margin-bottom: 8px; } }
.l331-hero-ctas {display: flex;align-items: center;gap: 16px;margin-top: 16px;flex-wrap: wrap;}
@media (max-width: 768px) { .l331-hero-ctas {margin-top: var(--p-1);gap: 10px;} }

/* --- Page content / layout ---
   Site-wide container convention (mirrors the live Simvoly theme, where every
   .grid-content / .container is centered to max-width: 1420px with side
   gutters). Everything below the hero flows through this centered band.
   The old rule used `min-width: 100%`, which forced full-bleed content
   edge-to-edge and broke the container width site-wide. */
.l331-container-width { max-width: 1420px; margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; box-sizing: border-box; }
/* .l331-page-wrapper is a pass-through: the centered band lives on
   .l331-page-section (below) so EVERY section on EVERY page is constrained the
   same way the live site constrains every .grid-content, regardless of whether
   a page's <main> or an individual section carries this class. */
.l331-page-wrapper { width: 100%; box-sizing: border-box; }
.l331-section-content { padding-top: var(--space-8); padding-bottom: var(--space-16); }
.l331-section-header { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); }
@media (min-width: 768px) { .l331-section-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.l331-section-subtitle { font-size: var(--text-base); color: #64748b; line-height: var(--leading-normal); max-width: 480px; }
.l331-section-title {font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 600;line-height: var(--leading-tight);letter-spacing: var(--tracking-tighter);color: var(--color-green-600);}
.l331-feature-icon { color: var(--color-green-600); background: var(--color-white); padding: var(--p-3); border-radius: var(--border-radius-pill); box-shadow: var(--shadow-sm); display: flex; }
.l331-feature-item { display: flex; align-items: center; gap: 16px; background: var(--color-gray-50); padding: var(--p-5); border-radius: var(--border-radius-md); border: 1px solid var(--color-gray-200); }
.l331-feature-text { font-size: var(--text-base); color: #0f172a; font-weight: 500; }
.l331-features-list { display: flex; flex-direction: column; gap: var(--space-4); max-width: 600px; }
.l331-header-number { font-size: var(--text-lg); font-weight: 500; color: #64748b; margin-top: 8px; }
.l331-header-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1; letter-spacing: var(--tracking-tighter); color: var(--color-green-600); }
@media (max-width: 768px) { .l331-header-title { font-size: 2.5rem; } }
.l331-header-description { font-size: var(--text-sm); color: var(--color-gray-700); line-height: var(--leading-normal); }
.l331-page-header { display: flex; justify-content: space-between; align-items: flex-end; padding-top: var(--space-6); padding-bottom: var(--space-4); gap: var(--space-8); flex-wrap: wrap; }
.l331-page-hero-image { margin-bottom: var(--space-12); }
.l331-page-hero-image img { width: 100%; height: 500px; object-fit: cover; border-radius: var(--border-radius-xl); }
.l331-feature-bullets {list-style: none;padding: 0;margin: .25rem .75rem;display: flex;flex-direction: column;gap: var(--p-4);}
.l331-feature-bullets li {display: flex;align-items: center;gap: var(--p-3);font-size: var(--text-sm);font-family: var(--font-sans);color: var(--color-gray-700);line-height: var(--leading-snug);}
.l331-feature-bullets li svg {flex-shrink: 0;color: var(--color-green-600);width: 16px;height: 16px;}
.l331-split-left { display: flex; flex-direction: column; gap: var(--space-4); }
.l331-split-left p { font-size: var(--text-base); color: var(--color-gray-700); line-height: var(--leading-normal); font-family: var(--font-sans); }

/* Vertical rhythm for legal copy: base gap gives paragraph-to-paragraph
   breathing room; h3 headers then add margin-top to separate from the previous
   section and a modest margin-bottom so the header sits comfortably above (not
   cramped against) its own following paragraph. Previously everything shared a
   flat var(--space-2) gap, so headers read as glued to the paragraph below and
   sections had no separation — the "no proper flow" Dave flagged. */
.l331-split-left.l331-agreement-content { gap: var(--space-3) !important; }
.l331-agreement-content h3, .l331-agreement-content ul, .l331-agreement-content li { margin: 0; padding: 0; line-height: var(--space-4); }
.l331-agreement-content h3 { font-family: var(--font-display); font-weight: 800 !important; letter-spacing: var(--tracking-tighter); color: var(--color-green-600); font-size: var(--text-lg); margin-top: var(--space-4); margin-bottom: var(--p-2); }
.l331-agreement-content ul { margin: var(--p-1) 0 var(--p-2) var(--p-5); list-style-type: disc; }
.l331-agreement-content li { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-gray-700); line-height: 1.4; margin-bottom: var(--p-1); }
.l331-agreement-content p:last-of-type { margin-bottom: 0; }
.l331-agreement-content h3:first-of-type { margin-top: 0; }
.l331-split-right { position: relative; }
.l331-split-section { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-16); }
@media (max-width: 1024px) { .l331-split-section { grid-template-columns: 1fr; gap: var(--space-8); } }

/* Agreement / legal-copy variant: single full-width column (no info-card
   right rail). REUSABLE — shared by virtual-office-agreement,
   exp-access-agreement, coworking-service-agreement. Pair with
   .l331-agreement-content on the inner .l331-split-left. */
.l331-agreement-section.l331-split-section { grid-template-columns: 1fr; gap: 0; }
.l331-agreement-section .l331-split-left { max-width: 900px; }

/* "Our Location" two-column: text + Google Map side by side (mirrors the live
   section-location layout). Balanced columns, vertically centered, map reuses
   the .l331-contact-map box styling. Collapses to stacked under 1024px via the
   base .l331-split-section media query. */
.l331-location-split { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-10); }
.l331-location-split .l331-split-left h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--tracking-tighter); color: var(--color-green-600); font-size: var(--text-2xl); margin: 0 0 var(--p-4); }

/* --- Universal section spacing ---
   One rule controls all inter-section spacing site-wide.
   Apply l331-page-section to every <section> on every page.
   Individual section classes (l331-feature-split-section,
   l331-landing-section, etc.) are structural only — no spacing. */
.l331-page-section {padding-top: var(--space-16); max-width: 1420px; margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; box-sizing: border-box;}
.l331-hero-section {padding-top: var(--space-8); max-width: 1420px; margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; box-sizing: border-box;}   /* hero takes a smaller top padding; placed AFTER .l331-page-section so it overrides the default space-16. Same centered 1420px band as every other section (matches live grid-content). */
@media (max-width: 768px) {
  .l331-page-section, .l331-hero-section, .l331-container-width { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* --- Feature split --- */
.l331-feature-split-section {}
.l331-feature-split-grid {display: grid;grid-template-columns: 2fr 2fr;gap: var(--space-16);align-items: flex-start;}
@media (max-width: 1024px) {
  .l331-feature-split-grid {grid-template-columns: 1fr;gap: var(--space-6);}
  .l331-feature-split-image { order: 1; }
  .l331-feature-split-content { order: 2; }
}
.l331-feature-split-content {display: flex;flex-direction: column;gap: var(--space-3);}
.l331-feature-split-heading {font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 600;color: var(--color-green-600);letter-spacing: var(--tracking-tighter);height: var(--leading-tight);max-width: 18ch;line-height: 1.1;}
.l331-feature-split-tagline {font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-gray-700); line-height: var(--leading-normal); }
.l331-feature-split-text {font-family: var(--font-sans);font-size: var(--text-base);color: var(--color-gray-700);line-height: var(--leading-loose);}
.l331-feature-split-image img {width: 100%;height: 485px;aspect-ratio: 4 / 3;object-fit: cover;border-radius: 12px;box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);}
.l331-feature-split-image .l331-gallery-slide img { box-shadow: none; }
/* Single-column layout: let aspect-ratio 4/3 drive height so all images stay consistent (matches live). */
@media (max-width: 1024px) {.l331-feature-split-image img {height: auto;}}
/* Mobile: cap to a fixed shorter height (matches live). */
@media (max-width: 520px) {.l331-feature-split-image img {height: 345px;}}

/* --- Gallery slider ---
   Height chain mirrors .l331-feature-split-image img so the gallery slide
   matches the fixed-height cards exactly (matches live: all 485px desktop). */
.l331-gallery-slider {position: relative;width: 100%;height: 485px;overflow: hidden;border-radius: 12px;box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);}
.l331-gallery-slider > input { position: absolute; opacity: 0; pointer-events: none; }
.l331-gallery-track { display: flex; width: 200%; height: 100%; transition: transform 0.4s ease; will-change: transform; }
.l331-gallery-slide { flex: 0 0 50%; height: 100%; }
.l331-gallery-slide img {width: 100%;height: 100%;object-fit: cover;border-radius: 12px;display: block;}
@media (max-width: 1024px) { .l331-gallery-slider { height: auto; aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .l331-gallery-slider { height: 345px; aspect-ratio: auto; } }
.l331-gallery-controls { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.l331-gallery-controls label { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; user-select: none; }
.l331-gallery-prev { left: 12px; }
.l331-gallery-next { right: 12px; }
.l331-gallery-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 10px; z-index: 2; }
.l331-gallery-dots label { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.6); cursor: pointer; }
#gs-1:checked ~ .l331-gallery-track { transform: translateX(0%); }
#gs-2:checked ~ .l331-gallery-track { transform: translateX(-50%); }
#gs-1:checked ~ .l331-gallery-controls .l331-gallery-next-on-1 { display: flex; }
#gs-2:checked ~ .l331-gallery-controls .l331-gallery-prev-on-2 { display: flex; }
#gs-1:checked ~ .l331-gallery-dots label:nth-child(1) { background: rgba(255,255,255,0.95); }
#gs-2:checked ~ .l331-gallery-dots label:nth-child(2) { background: rgba(255,255,255,0.95); }

/* --- Info card --- */
.l331-info-card {background: var(--color-gray-50);border-radius: 12px;padding: var(--space-10);display: flex;flex-direction: column;gap: var(--space-4);border: 1px solid var(--color-gray-200);background-image: radial-gradient(circle at 100% 0%, var(--color-white) 0%, transparent 60%);}
.l331-card-item { display: flex; flex-direction: column; gap: 4px; }
.l331-card-label { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 500; padding-bottom: var(--p-1); }
.l331-card-value {font-family: var(--font-display);font-size: var(--text-lg);font-weight: 600;color: var(--color-green-600);letter-spacing: var(--tracking-tighter);}
.l331-card-footer-item {margin-top: var(--space-4);padding-top: var(--space-4);border-top: 1px solid var(--color-gray-200);display: flex;align-items: center;justify-content: space-between;gap: var(--space-4);}
.l331-card-footer-item p { font-size: 11px; color: #64748b; line-height: var(--leading-normal); max-width: 150px; }

/* --- Gallery --- */
.l331-gallery-section { max-width: 1420px; display: flex; flex-direction: column; gap: var(--space-4); }
.l331-gallery-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.l331-gallery-row-2 img { width: 100%; height: 400px; object-fit: cover; border-radius: 12px; }
.l331-gallery-row-1 img { width: 100%; height: 500px; object-fit: cover; border-radius: 12px; }
@media (max-width: 768px) {
  .l331-gallery-row-2 { grid-template-columns: 1fr; }
  .l331-page-hero-image img, .l331-gallery-row-2 img, .l331-gallery-row-1 img { height: 300px; }
}
.l331-gallery-square { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
@media (max-width: 768px) { .l331-gallery-square { border-radius: var(--border-radius-md); } }
.l331-gallery-169 { width: 100%; }
.l331-gallery-169 img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 12px; display: block; }

/* --- Social proof --- */
.l331-avatars { display: flex; }
.l331-avatar { width: 3rem; height: 3rem; border-radius: 9999px; border: 2px solid var(--color-white); object-fit: cover; margin-left: -0.75rem; }
.l331-avatar:first-child { margin-left: 0; }
.l331-rating-box { display: flex; flex-direction: column; gap: 0.25rem; }
.l331-rating-stars {display: flex;align-items: center;color: var(--color-green-600);gap: 0.5rem;font-weight: 700;font-size: var(--text-lg);padding-bottom: 0.25rem;}
.l331-rating-text {color: var(--color-green-600);font-size: var(--text-sm);padding-top: .25rem;}
.l331-social-proof {display: flex;align-items: center;gap: 1rem;padding-bottom: 0;}
.l331-stars-container { display: flex; color: var(--color-yellow-400); font-size: var(--text-lg); letter-spacing: 2px; }

/* --- CTA banner --- */
.l331-cta-section {padding: var(--space-4) 0;}
.l331-cta-wrapper {position: relative;border-radius: var(--border-radius-xl);overflow: hidden;padding: var(--space-24) var(--space-8) var(--space-18) var(--space-8);text-align: center;background-color: var(--color-green-600);color: var(--color-white);box-shadow: var(--shadow-lg);max-height: 650px;}
.l331-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); z-index: 1; }
.l331-cta-overlay {position: absolute;inset: 0;opacity: 0.88;z-index: 2;}
.l331-cta-content {position: relative;z-index: 3;max-width: 660px;margin: 0 auto;}
.l331-cta-title {font-size: var(--text-3xl) !important;color: var(--color-white);margin-bottom: var(--space-2);font-family: var(--font-display);font-weight: 600;letter-spacing: var(--tracking-tight);}
.l331-cta-sub { font-size: var(--text-base); font-family: var(--font-sans); color: var(--color-white-50); margin-bottom: var(--space-4); margin-top: var(--space-4); }
.l331-cta-btn { background-color: var(--color-white); color: var(--color-green-600); border: 1px solid var(--color-white); padding: var(--p-button); box-shadow: var(--shadow-sm); }
.l331-cta-btn:hover { background-color: transparent; color: var(--color-white); transform: translateY(-2px); }
.l331-cta-phone {margin-top: var(--space-4);display: block;font-size: var(--text-sm);font-family: var(--font-sans);color: var(--color-white-50);font-weight: 500;color: var(--color-green-600);}
.l331-cta-phone a {color: var(--color-cyan-600);text-decoration: underline;}

/* --- eXp page --- */
.l331-section-services { z-index: 999999; }
.l331-included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.l331-included-label { font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--color-gray-700); margin-bottom: var(--space-2) !important; font-family: Inter-tight, sans-serif !important; }
.l331-not-included li { color: var(--color-gray-700); }
.l331-not-included li::before { content: "✕"; font-size: 10px; color: var(--color-gray-400); }
@media (max-width: 640px) { .l331-included-grid { grid-template-columns: 1fr; gap: var(--space-4); } }
.l331-exp-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 99999; align-items: center; justify-content: center; }
.l331-exp-modal-overlay.active { display: flex; }
.l331-exp-modal { background: #fff; border-radius: 12px; width: 100%; max-width: 840px; max-height: 95vh; overflow-y: auto; position: relative; z-index: 1000000; padding: 50px; }
.l331-exp-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--color-gray-600); line-height: 1; }

.l331-exp-hero .l331-hero-texts-container { width: 95%; }
.l331-exp-hero .l331-hero-text-block { max-width: 800px; width: var(--width-h1); }
.l331-exp-hero .l331-hero-title-main { line-height: 0.95; }
.l331-exp-hero .l331-hero-subtitle-description { font-size: var(--text-base); max-width: 550px; }
@media (max-width: 768px) { .l331-exp-hero .l331-hero-subtitle-description { font-size: 14px; margin-bottom: 8px; } }


/* ================================================================
   5. L331 "SPACES" GRID — Home page only.
   ================================================================ */
.l331-spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr) !important; gap: var(--space-4); }
@media (min-width: 1024px) { .l331-spaces-grid { grid-template-columns: repeat(3, 1fr); } }

.l331-spaces-navigation-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: calc(-1 * var(--p-2)); }
@media (max-width: 768px) { .l331-spaces-navigation-row { justify-content: flex-start; } }
@media (max-width: 1023px) { .l331-spaces-navigation-row { display: none !important; } }
.l331-spaces-tab-label {font-family: var(--font-sans);font-size: var(--text-sm);color: #64748b;text-transform: none;letter-spacing: var(--tracking-normal);}

.l331-spaces-header { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
@media (min-width: 768px) { .l331-spaces-header { flex-direction: row; align-items: center; } }
.l331-spaces-header-left { flex: 1; }
.l331-spaces-header-right { flex: 1; max-width: 480px; }
.l331-spaces-title {font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 600;line-height: var(--leading-normal);letter-spacing: var(--tracking-tighter);color: var(--color-green-600);}
.l331-spaces-subtitle {font-size: var(--text-base);color: var(--color-gray-700);line-height: var(--leading-loose);}

.l331-spaces-card-footer {padding: var(--p-2) 0 var(--p-6);margin-top: auto;display: flex;justify-content: space-between;align-items: center;}
.l331-spaces-price-container { display: flex; align-items: baseline; gap: 2px; }
.l331-spaces-price-amount { font-size: 22px; font-weight: 500; color: #0f172a; letter-spacing: var(--tracking-tight); }
.l331-spaces-price-unit { font-size: var(--text-sm); color: #64748b; }
.l331-spaces-btn-book { background-color: var(--color-green-600); color: var(--color-white) !important; border: none; font-size: var(--text-sm); font-family: var(--font-sans); font-weight: 500; padding: var(--p-button); border-radius: var(--border-radius-50); cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; box-shadow: var(--shadow-sm); }
.l331-spaces-btn-book:hover { background-color: var(--color-green-500); }
.l331-spaces-btn-book:active { transform: scale(0.97); }

.l331-spaces-image-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 10; background-color: var(--color-gray-200); overflow: hidden; }
.l331-spaces-image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--transition-spring); }

.l331-spaces-card { background-color: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s var(--transition-spring), box-shadow 0.3s ease; box-shadow: var(--shadow-sm); }
.l331-spaces-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.l331-spaces-card:hover .l331-spaces-image-wrapper img { transform: scale(1.05); }

.l331-spaces-status-badge { position: absolute; top: 12px; left: 12px; background-color: var(--color-white); color: #0f172a !important; font-size: 11px; font-weight: 500; padding: var(--p-1) var(--p-3); border-radius: var(--border-radius-pill); display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow-badge); border: 1px solid var(--color-gray-200); z-index: 10; }

.l331-spaces-card-content {padding: var(--p-6);display: flex;flex-direction: column;flex-grow: 1;gap: var(--space-2);min-height: 180px;}
.l331-spaces-card-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--p-2); }
.l331-spaces-card-title {font-family: var(--font-display);font-size: var(--text-lg);font-weight: 600;color: var(--color-green-600);line-height: var(--leading-tight);letter-spacing: var(--tracking-tighter);word-wrap: break-word;}
.l331-spaces-card-text {font-family: var(--font-sans);font-size: 16px;color: var(--color-gray-700);line-height: var(--leading-normal);word-wrap: break-word;}
.l331-spaces-card-location { display: flex; align-items: center; gap: var(--p-2); font-size: var(--text-sm); color: #64748b; }
.l331-spaces-features-row { display: flex; flex-wrap: wrap; gap: var(--p-2); margin-top: 2px; }
.l331-spaces-feature-pill { background-color: var(--color-gray-50); color: var(--color-gray-700); border: 0.05px solid var(--color-gray-200); font-size: 11px; font-weight: 500; padding: 6px 14px; border-radius: var(--border-radius-pill); display: inline-flex; align-items: center; gap: var(--p-1); }

.l331-spaces-tab-control { display: inline-flex; background-color: transparent; padding: 4px; border-radius: 9px; gap: 4px; border: 1px solid var(--color-gray-300); will-change: box-shadow; animation: l331-spaces-pulse-border 3s ease infinite; }
@keyframes l331-spaces-pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(1, 54, 46, 0.25); }
  50% { box-shadow: 0 0 0 2px rgba(1, 54, 46, 0); }
}
.l331-spaces-tab-control .l331-spaces-tab-btn { background: transparent; border: none; padding: var(--p-3) var(--p-8); border-radius: 9px; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--color-green-500); cursor: pointer; transition: background-color 0.2s var(--transition-spring), color 0.2s ease, box-shadow 0.2s ease; }
.l331-spaces-tab-control .l331-spaces-tab-btn:hover { color: #0f172a; }
.l331-spaces-tab-control .l331-spaces-tab-btn.active { background-color: #01362e; color: #ffffff; box-shadow: var(--shadow-sm); }

@media (max-width: 1023px) {
  .l331-spaces-swipe-container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 1rem; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .l331-spaces-swipe-container::-webkit-scrollbar { display: none; }
  #workspaces-view.l331-spaces-tab-content, #passes-view.l331-spaces-tab-content, .l331-spaces-grid { display: contents !important; }
  .l331-spaces-card { flex: 0 0 100%; max-width: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
}
@media (max-width: 480px) {
  .l331-spaces-btn-book { padding: var(--p-3) 16px; }
  .l331-spaces-card-content {padding: var(--p-6) var(--p-6);gap: var(--p-3);}
  .l331-spaces-feature-pill { padding: var(--p-1) var(--p-2); }
  .l331-spaces-tab-control .l331-spaces-tab-btn { padding: var(--p-2) 16px; }
}


/* ================================================================
   6. CAL.COM BOOKING WIDGET — FROZEN, UNPREFIXED, DO NOT RENAME
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Base body typography. The live site's <body> resolves text to Lato
   (sans-serif) via the Simvoly platform CSS we intentionally dropped; without
   an explicit rule here, unstyled elements (buttons, footnotes, rating text,
   card copy) fell back to the UA default (Times/serif). This restores the
   site-wide sans-serif baseline so those elements match live. */
body { font-family: var(--font-sans); color: #222222; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.workspace-page-wrapper { font-family: var(--font-sans, sans-serif); color: var(--color-gray-900, #111827); min-height: 40vh; width: 100%; }
@media (max-width: 768px) { .workspace-page-wrapper { padding: 0px; } }
@media (max-width: 480px) { .workspace-page-wrapper { padding: 0px; } }

.showcase-container {width: 100%;max-width: 1440px;margin: 0 auto;display: flex;flex-direction: column;gap: var(--space-4, 1.5rem);padding-bottom: var(--space-12);}
.tab-content { display: none !important; }
.tab-content.active { display: block !important; }
.workspace-grid { display: grid; grid-template-columns: 1fr !important; gap: var(--space-4, 1rem); }
@media (min-width: 640px) { .workspace-grid { grid-template-columns: 1fr !important; } }
@media (min-width: 1024px) { .workspace-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 1023px) { .workspace-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 640px) { .workspace-grid { grid-template-columns: 1fr !important; } }

.workspace-card { background-color: var(--color-white, #ffffff); border: 1px solid #e2e8f0 !important; border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; outline: none !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.workspace-card:hover, .workspace-card:focus, .workspace-card:focus-within, .workspace-card:active { border-color: #cbd5e1 !important; outline: none !important; outline-width: 0px !important; box-shadow: 0 10px 20px -6px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04) !important; }

.image-wrapper { position: relative; width: 100%; height: 720px; background-color: #ffffff !important; overflow: hidden; color-scheme: light !important; border-top: 1px solid #e2e8f0 !important; outline: none !important; }
.image-wrapper:hover, .image-wrapper:focus, .image-wrapper:active { outline: none !important; border-top: 1px solid #cbd5e1 !important; }
@media (max-width: 768px) { .image-wrapper { height: 700px; } }

.cal-container { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease; }
.cal-container.hidden { visibility: hidden; opacity: 0; pointer-events: none; z-index: 1; }
.cal-container.visible { visibility: visible; opacity: 1; pointer-events: auto; z-index: 2; }

.image-wrapper iframe, .image-wrapper iframe:focus, .image-wrapper iframe:active, .image-wrapper iframe:hover { width: 100% !important; height: 100% !important; border: none !important; outline: none !important; outline-width: 0px !important; box-shadow: none !important; display: block; background-color: #ffffff !important; color-scheme: light !important; opacity: 0; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

.skeleton-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; z-index: 5; display: flex; flex-direction: column; padding: var(--p-8, 2rem) var(--p-12, 3rem); gap: 32px; pointer-events: none; opacity: 1; transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out; }
.skeleton-overlay.hidden { opacity: 0; visibility: hidden; }
@media (max-width: 768px) { .skeleton-overlay { padding: var(--p-4, 1rem) var(--p-6, 1.5rem); gap: 20px; } }

.skeleton-bone { background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: skeleton-pulse 1.6s infinite linear; border-radius: 8px; }
@keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.sk-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sk-title { width: 180px; height: 28px; }
.sk-nav { width: 84px; height: 28px; }
.sk-days-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; }
.sk-day-label { height: 16px; border-radius: 4px; width: 70%; margin: 0 auto; }
.sk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; flex-grow: 1; }
.sk-cell { aspect-ratio: 1; border-radius: 50%; width: 100%; max-width: 48px; margin: 0 auto; }

.status-badge { position: absolute; top: 12px; left: 12px; background-color: var(--color-white, #ffffff); color: var(--color-gray-900, #111827); font-size: 11px; font-weight: 500; padding: var(--p-1, 0.25rem) var(--p-3, 0.75rem); border-radius: 9999px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); border: 1px solid var(--color-gray-200, #e2e8f0); z-index: 10; }

.card-content { padding: var(--p-5, 1.25rem); display: flex; flex-direction: column; flex-grow: 1; gap: var(--p-4, 1rem); }
@media (max-width: 480px) { .card-content { padding: var(--p-4, 1rem); gap: var(--p-3, 0.75rem); } }

.card-header-row { display: flex; justify-content: space-between; align-items: center; gap: var(--p-2, 0.5rem); width: 100%; }
@media (max-width: 768px) { .card-header-row { flex-direction: column; align-items: flex-start; gap: var(--space-4, 1rem); } }

.card-title { font-family: var(--font-display, sans-serif); font-size: 24px; font-weight: 600; color: var(--color-green-600, #01362E); line-height: var(--leading-tight, 1.25); letter-spacing: var(--tracking-tight, -0.025em); word-wrap: break-word; }
.card-text { font-family: var(--font-sans, sans-serif); font-size: 0.95rem; color: inherit; line-height: var(--leading-tight, 1.25); word-wrap: break-word; }
.card-location { display: flex; align-items: center; gap: var(--p-2, 0.5rem); font-size: var(--text-sm, 0.875rem); color: var(--color-gray-500, #6b7280); }
.location-icon { color: var(--color-gray-500, #6b7280); flex-shrink: 0; }
.features-row { display: flex; flex-wrap: wrap; gap: var(--p-2, 0.5rem); margin-top: 2px; }
.feature-pill { background-color: var(--color-gray-50, #f9fafb); color: #444444; border: 0.05px solid var(--color-gray-200, #e2e8f0); font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 9999px; display: inline-flex; align-items: center; gap: var(--p-1, 0.25rem); }
@media (max-width: 480px) { .feature-pill { padding: var(--p-1, 0.25rem) var(--p-2, 0.5rem); } }

.navigation-row { display: flex; justify-content: flex-end; margin-top: 0; }
@media (max-width: 768px) { .navigation-row { width: 100%; justify-content: flex-start; } }

.tab-control { display: inline-flex; background-color: var(--color-gray-200, #e5e7eb); padding: 3px; border-radius: 33px; gap: 4px; border: 1px solid rgba(15, 23, 42, 0.04); }
.tab-btn { background: transparent; border: none; padding: 0.35rem 1rem; border-radius: 33px; font-family: inherit; font-size: var(--text-sm, 0.875rem); font-weight: 500; color: var(--color-gray-500, #6b7280); cursor: pointer; transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, box-shadow 0.2s ease; }
.tab-btn:hover { color: var(--color-gray-900, #111827); }
.tab-btn.active { background-color: var(--color-white, #ffffff); color: var(--color-green-600, #01362E); box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04); }
@media (max-width: 480px) { .tab-btn { padding: var(--p-2, 0.5rem) var(--p-4, 1rem); } }


/* ================================================================
   7. GOOGLE REVIEWS SLIDER
   ================================================================ */
.l331-reviews {--l331-reviews-bg: #ffffff;--l331-reviews-card-bg: #ffffff;--l331-reviews-card-border: #e8eaed;--l331-reviews-text-primary: #202124;--l331-reviews-text-secondary: #70757a;--l331-reviews-star-fill: #fbbc04;--l331-reviews-star-empty: #dadce0;--l331-reviews-link: #1a73e8;--l331-reviews-radius: 10px;--l331-reviews-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 2px 8px rgba(60, 64, 67, 0.08);--l331-reviews-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--l331-reviews-font-display: Fraunces, Georgia, "Times New Roman", serif;background: var(--l331-reviews-bg);overflow: hidden;margin-top: 0;}
.l331-reviews *, .l331-reviews *::before, .l331-reviews *::after {box-sizing: border-box;}
.l331-reviews-heading {font-family: var(--font-display)!important;font-size: var(--text-2xl)!important;font-weight: 600;color: var(--color-green-600)!important;text-align: center;margin-bottom: var(--space-10);letter-spacing: var(--tracking-tighter);}
.l331-reviews-row {margin: 0 0 20px;}
.l331-reviews-row:last-child { margin-bottom: 0; }
.l331-reviews-mask { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 1) 64px, rgba(0, 0, 0, 1) calc(100% - 64px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 1) 64px, rgba(0, 0, 0, 1) calc(100% - 64px), transparent 100%); }
.l331-reviews-track { display: flex; align-items: stretch; gap: 20px; width: max-content; will-change: transform; }
.l331-reviews-track--a { animation: l331-reviews-scroll-left 58s linear infinite; }
.l331-reviews-track--b { animation: l331-reviews-scroll-right 52s linear infinite; }
@keyframes l331-reviews-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes l331-reviews-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.l331-review-card {flex: 0 0 auto;width: 340px;min-height: 310px;background: var(--color-white);border: 1px solid var(--l331-reviews-card-border);border-radius: var(--l331-reviews-radius);box-shadow: var(--l331-reviews-shadow);padding: 20px;display: flex;flex-direction: column;font-family: var(--l331-reviews-font-body);}
.l331-review-card-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.l331-review-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 16px; font-weight: 600; }
.l331-review-identity { flex: 1 1 auto; min-width: 0; }
.l331-review-name { display: block; font-size: 14px; font-weight: 600; color: var(--l331-reviews-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l331-review-time { display: block; font-size: 12px; color: var(--l331-reviews-text-secondary); margin-top: 2px; }
.l331-review-google-icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.l331-review-stars { display: flex; gap: 2px; margin-bottom: 10px; }
.l331-review-star { width: 16px; height: 16px; }
.l331-review-text {font-size: 14px;line-height: 1.55;color: var(--l331-reviews-text-primary);margin: 0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;}
.l331-review-text--expanded { -webkit-line-clamp: unset; overflow: visible; }
.l331-review-readmore { align-self: flex-start; margin-top: 6px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--l331-reviews-link); cursor: pointer; }
.l331-review-readmore:hover { text-decoration: underline; }
.l331-review-readmore:focus-visible { outline: 2px solid var(--l331-reviews-link); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 640px) { .l331-reviews {} .l331-review-card { width: 270px; padding: 16px; } .l331-reviews-mask { -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 1) 28px, rgba(0, 0, 0, 1) calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 1) 28px, rgba(0, 0, 0, 1) calc(100% - 28px), transparent 100%); } }
@media (prefers-reduced-motion: reduce) { .l331-reviews-track--a, .l331-reviews-track--b { animation: none; } }


/* ================================================================
   8. BILLING PERIOD TOGGLE
   ================================================================ */
.l331-billing-toggle { display: flex; width: 100%; background-color: transparent; padding: 4px; border-radius: 9px; gap: 4px; border: 1px solid var(--color-gray-300); box-sizing: border-box; }
.l331-billing-toggle-btn { flex: 1 1 0; min-width: 0; background: transparent; border: none; padding: var(--p-2) var(--p-2); border-radius: 7px; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--color-green-500); cursor: pointer; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.2s ease, color 0.2s ease; }
.l331-billing-toggle-btn:hover { color: #0f172a; }
.l331-billing-toggle-btn.active { background-color: #01362e; color: #ffffff; }
.l331-billing-toggle-btn.active:hover { color: #ffffff; }
.l331-billing-note {display: block;font-family: var(--font-sans);font-size: var(--text-xs);/* font-style: italic; */color: var(--color-gray-500);margin-top: 6px;min-height: 1em;}


/* ================================================================
   9. FAQ SECTION
   ================================================================ */
.l331-faq-section {}
.l331-faq-wrapper {max-width: var(--max-width);margin: 0 auto;padding: 0 var(--space-4);box-sizing: border-box;}
.l331-faq-header { max-width: 700px; margin: 0 auto; text-align: center; }
.l331-faq-eyebrow { font-family: var(--font-sans); font-size: var(--text-sm); color: #64748b; text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--p-2); }
.l331-faq-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-12); margin-top: var(--space-10); }
@media (max-width: 768px) { .l331-faq-columns { grid-template-columns: 1fr; gap: 0; } }
.l331-faq-list { border-top: 1px solid var(--color-gray-200); }
.l331-faq-item { border-bottom: 1px solid var(--color-gray-200); }
.l331-faq-question {width: 100%;display: flex;align-items: center;justify-content: space-between;gap: var(--space-4);padding: var(--space-4) 0;background: none;border: none;cursor: pointer;text-align: left;font-family: var(--font-sans);font-size: var(--text-md);font-weight: normal;color: var(--color-green-600);letter-spacing: var(--tracking-tight);}
.l331-faq-icon { flex-shrink: 0; color: #64748b; font-size: var(--text-lg); transition: transform 0.3s var(--transition-spring); }
.l331-faq-item.active .l331-faq-icon { transform: rotate(180deg); }
.l331-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--transition-spring); }
.l331-faq-answer-inner { padding-bottom: var(--space-6); }
.l331-faq-answer p { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-gray-700); line-height: var(--leading-normal); margin-bottom: var(--p-2); }
.l331-faq-answer p:last-child { margin-bottom: 0; }


/* ================================================================
   10. MOBILE HERO — STANDALONE SNIPPET (.l331-mobile-hero)
   ================================================================ */
.l331-mobile-hero { display: none; }
@media (max-width: 768px) {
  .l331-mobile-hero { display: block; position: relative; overflow: hidden; }
  .l331-mobile-hero-content {position: relative;z-index: 2;padding: var(--p-16) 0;}
  .l331-mobile-hero-title {font-family: var(--font-display);font-size: calc(var(--text-4xl)*1.2);line-height: var(--leading-tight);letter-spacing: var(--tracking-tighter);font-weight: 600;color: var(--color-white);margin-bottom: var(--p-2);}
  .l331-mobile-hero-subtitle {font-family: var(--font-sans);font-size: var(--text-base);line-height: var(--leading-normal);color: var(--color-gray-50);margin-bottom: var(--p-6);}
  .l331-hero-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--p-2); width: 100%; }
  .l331-hero-category-tile {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: var(--p-2);padding: 26px var(--p-2);background: #ffffffc2;border: 1px solid #f5f6fa;border-radius: var(--border-radius-lg);text-decoration: none;text-align: center;}
  .l331-hero-category-icon {display: flex;color: var(--color-green-600);}
  .l331-hero-category-icon svg { width: 24px; height: 24px; }
  .l331-hero-category-label {font-family: var(--font-sans);font-size: var(--text-xs);font-weight: 500;color: var(--color-green-600);line-height: var(--leading-tight);}
}


/* ================================================================
   11. LANDING PAGE — HERO (l331-landing-hero-*)
   ================================================================ */
.l331-landing-wrap { max-width: 1520px; margin: 0 auto; padding: var(--p-2); box-sizing: border-box; }
.l331-landing-section {box-sizing: border-box;/* padding-bottom: var(--space-18); */overflow: hidden;}

.l331-landing-hero {position: relative;width: 100%;height: 70vh;min-height: 600px;border-radius: var(--border-radius-xl);overflow: hidden;background: #0f172a;box-shadow: var(--shadow-lg);}
.l331-landing-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.l331-landing-hero-overlay {position: absolute;inset: 0;background: #2222224d;}
.l331-landing-hero-bigtext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; opacity: 0.08; z-index: 1; }
.l331-landing-hero-bigtext span { font-family: var(--font-display); font-size: clamp(80px, 18vw, 280px); font-weight: 600; color: var(--color-white); letter-spacing: var(--tracking-tighter); line-height: 1; }
.l331-landing-hero-nav {position: relative;z-index: 3;display: flex;align-items: center;justify-content: space-between;padding: var(--space-6) var(--space-8);}
.l331-landing-hero-logo { display: flex; align-items: center; gap: var(--p-2); color: var(--color-white); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.l331-landing-hero-logo-img {height: clamp(50px, 12vw, 80px);width: auto;display: block;object-fit: contain;}
.l331-landing-hero-menu { display: none; align-items: center; gap: var(--p-1); background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--border-radius-pill); padding: var(--p-1); }
@media (min-width: 900px) { .l331-landing-hero-menu { display: flex; } }
.l331-landing-hero-menu a { color: rgba(255,255,255,0.9); font-family: var(--font-sans); font-size: var(--text-sm); text-decoration: none; padding: var(--p-2) var(--p-5); border-radius: var(--border-radius-pill); transition: background 0.2s ease; }
.l331-landing-hero-menu a:hover { background: rgba(255,255,255,0.15); }
.l331-landing-hero-cta { display: inline-flex; align-items: center; gap: var(--p-3); background: var(--color-white); color: var(--color-green-600); padding: var(--p-1) var(--p-1) var(--p-1) var(--p-5); border-radius: var(--border-radius-pill); text-decoration: none; font-family: var(--font-sans); font-weight: 500; font-size: var(--text-sm); }
.l331-landing-hero-cta-icon { width: 32px; height: 32px; background: var(--color-green-600); color: var(--color-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.l331-landing-hero-content {position: absolute;bottom: 0;left: 0;right: 0;z-index: 3;display: flex;flex-direction: column;gap: var(--space-6);padding: var(--space-6) var(--space-8) var(--space-10) var(--space-8);}
@media (min-width: 900px) { .l331-landing-hero-content { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.l331-landing-hero-text {max-width: 675px;}
.l331-landing-hero-eyebrow {display: none;}
.l331-landing-hero-title { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 600; color: var(--color-white); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); margin-bottom: 16px; }
.l331-landing-hero-sub {font-family: var(--font-sans);font-size: calc(var(--text-md)*1.2);color: rgba(255,255,255,0.85);line-height: var(--leading-normal);margin-bottom: var(--p-6);}
.l331-landing-stats {display: none;}
@media (min-width: 900px) { .l331-landing-stats {width: 313px;} }
.l331-landing-stat { background: rgba(255,255,255,0.12); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: var(--p-5); }
.l331-landing-stat-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--p-2); }
.l331-landing-stat-number {font-family: var(--font-display);font-size: var(--text-lg);font-weight: 600;color: var(--color-white);letter-spacing: var(--tracking-tight);}
.l331-landing-stat svg { color: rgba(255,255,255,0.6); width: 20px; height: 20px; }
.l331-landing-stat-label { font-family: var(--font-sans); font-size: var(--text-sm); color: rgba(255,255,255,0.75); }


/* ================================================================
   12. LANDING PAGE — ABOUT (l331-landing-about-*)
   ================================================================ */
.l331-landing-about-title {font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 600;color: var(--color-green-600);letter-spacing: var(--tracking-tighter);line-height: var(--leading-tight);margin-bottom: 16px;}
.l331-landing-about-lede { margin-bottom: 16px; }
.l331-landing-about-grid {display: grid;grid-template-columns: 7fr 7fr;gap: var(--space-12);align-items: flex-start;}
@media (max-width: 1024px) { .l331-landing-about-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
.l331-landing-amenities {display: grid;grid-template-columns: 1fr 1fr;gap: var(--p-5);margin-top: var(--p-1);padding: var(--p-1);}
.l331-landing-amenity { display: flex; align-items: center; gap: var(--p-3); }
.l331-landing-amenity-icon {width: 36px;height: 36px;flex-shrink: 0;background: var(--color-gray-100);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: var(--color-green-600);}
.l331-landing-amenity-label {font-family: var(--font-sans);font-size: var(--text-sm);font-weight: 500;color: var(--color-gray-700);}
.l331-landing-about-image-wrap { position: relative; height: 500px; border-radius: var(--border-radius-xl); overflow: hidden; }
.l331-landing-about-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l331-landing-about-caption {position: absolute;left: var(--p-6);right: var(--p-6);bottom: var(--p-6);background: #e1e1e1a8;backdrop-filter: blur(8px);border-radius: var(--border-radius-md);padding: 16px;display: inline-block;max-width: 320px;}
.l331-landing-about-caption span { display: block; font-family: var(--font-sans); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #64748b; margin-bottom: var(--p-1); }
.l331-landing-about-caption p { font-family: var(--font-sans); font-weight: 500; color: #0f172a; margin: 0; }


/* ================================================================
   13. LANDING PAGE — LOCATION (l331-landing-location-*)
   ================================================================ */
.l331-landing-location { position: relative; border-radius: var(--border-radius-xl); overflow: hidden; background: var(--color-green-600); color: var(--color-white); }
.l331-landing-location-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.l331-landing-location-overlay { position: absolute; inset: 0; background: linear-gradient(to right, var(--color-green-600) 20%, rgba(1,54,46,0.7) 70%, transparent 100%); }
.l331-landing-location-grid {position: relative;z-index: 2;display: grid;grid-template-columns: 1fr 1fr;gap: var(--space-10);padding: var(--space-12) var(--space-8);}
@media (max-width: 900px) { .l331-landing-location-grid {grid-template-columns: 1fr;padding-bottom: var(--space-12);gap: 0;justify-items: center;} }
.l331-landing-location-eyebrow { display: block; font-family: var(--font-sans); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: rgba(255,255,255,0.7); margin-bottom: var(--p-2); }
.l331-landing-location-title {font-family: var(--font-display);font-size: var(--text-3xl);font-weight: 600;letter-spacing: var(--tracking-tighter);margin-bottom: 16px;line-height: 1.10;}
.l331-landing-location-text {font-family: var(--font-sans);font-size: var(--text-base);color: rgba(255,255,255,0.85);line-height: var(--leading-normal);margin-bottom: var(--space-6);}
@media (max-width: 900px) { .l331-landing-location-list {margin-bottom: 0px!important;} }
.l331-landing-location-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: var(--space-6); }
.l331-landing-location-item {display: flex;align-items: center;gap: 16px;font-size: var(--text-base);}
.l331-landing-location-badge { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 700; font-size: var(--text-sm); }
.l331-landing-location-item span:last-child { color: rgba(255,255,255,0.85); font-family: var(--font-sans); }
.l331-landing-location-insight-col { display: flex; align-items: flex-end; }
.l331-landing-location-insight { background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: var(--p-5); }
@media (max-width: 900px) { .l331-landing-location-insight { display: none; }}
.l331-landing-location-insight svg { margin-bottom: var(--p-2); width: 24px; height: 24px; }
.l331-landing-location-insight p {font-family: var(--font-sans);font-size: var(--text-base);color: rgba(255,255,255,0.9);margin: 0;line-height: var(--leading-normal);}



/* ================================================================
   14. LANDING PAGE — SPACES
   ================================================================ */
.l331-landing-spaces-header-row {display: flex;flex-direction: column;gap: var(--space-2);margin-bottom: var(--space-6);}
@media (min-width: 768px) { .l331-landing-spaces-header-row { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.l331-landing-spaces-link { display: inline-flex; align-items: center; gap: var(--p-2); font-family: var(--font-sans); font-weight: 500; color: var(--color-green-600); text-decoration: none; flex-shrink: 0; }


/* ================================================================
   15. LANDING PAGE — LEAD MAGNET CTA (l331-landing-cta-*)
   ================================================================ */
.l331-landing-cta {position: relative;background: var(--color-gray-50);border-radius: var(--border-radius-xl);padding: var(--space-18) var(--space-6);text-align: center;overflow: hidden;margin-bottom: var(--space-18);}
.l331-landing-cta-blob { position: absolute; width: 280px; height: 280px; border-radius: 50%; filter: blur(60px); opacity: 0.25; }
.l331-landing-cta-blob--1 { top: -80px; left: -80px; background: var(--color-cyan-600); }
.l331-landing-cta-blob--2 { bottom: -80px; right: -80px; background: var(--color-yellow-400); }
.l331-landing-cta-inner {position: relative;z-index: 2;max-width: 700px;margin: 0 auto;}
.l331-landing-cta-eyebrow { display: block; font-family: var(--font-sans); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #64748b; margin-bottom: 16px; }
.l331-landing-cta h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--color-green-600); letter-spacing: var(--tracking-tighter); margin-bottom: 16px; }
.l331-landing-cta p {font-family: var(--font-sans);font-size: var(--text-base);color: var(--color-gray-700);margin-bottom: var(--space-6);line-height: var(--leading-normal);}
.l331-landing-cta-note { font-family: var(--font-sans); font-size: var(--text-sm); color: #64748b; margin-top: 16px; }


/* ================================================================
   16. LANDING PAGE — VIDEO + WHY
   ================================================================ */
.l331-landing-video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
@media (max-width: 900px) { .l331-landing-video-grid { grid-template-columns: 1fr; } }
.l331-landing-video-wrap { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0f172a; cursor: pointer; }
.l331-landing-video-wrap img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.l331-landing-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.l331-landing-video-play-outer { width: 76px; height: 76px; background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.l331-landing-video-play-inner { width: 54px; height: 54px; background: var(--color-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.l331-landing-why h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--color-green-600); letter-spacing: var(--tracking-tighter); margin-bottom: 16px; }
.l331-landing-why p { font-family: var(--font-sans); font-size: var(--text-lg); color: #64748b; line-height: var(--leading-normal); margin-bottom: var(--space-6); }
.l331-landing-checklist { display: flex; flex-direction: column; gap: var(--p-3); margin-bottom: var(--space-6); }
.l331-landing-checklist-item { display: flex; align-items: flex-start; gap: var(--p-3); }
.l331-landing-checklist-item svg { color: var(--color-green-600); width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.l331-landing-checklist-item span { font-family: var(--font-sans); color: var(--color-gray-700); }
.l331-landing-quote { border-top: 1px solid var(--color-gray-200); padding-top: var(--space-6); font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--color-green-600); }


/* ================================================================
   17. LANDING PAGE — CONTACT
   ================================================================ */
.l331-landing-contact { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-md); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-10); }
@media (min-width: 900px) { .l331-landing-contact { flex-direction: row; } }
.l331-landing-contact-left, .l331-landing-contact-right { flex: 1; }
.l331-landing-contact h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--color-green-600); letter-spacing: var(--tracking-tighter); margin-bottom: 16px; }
.l331-landing-contact-left > p { font-family: var(--font-sans); font-size: var(--text-lg); color: #64748b; max-width: 400px; margin-bottom: var(--space-6); }
.l331-landing-contact-method { display: flex; align-items: center; gap: 16px; margin-bottom: var(--p-5); }
.l331-landing-contact-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--color-gray-50); display: flex; align-items: center; justify-content: center; color: var(--color-green-600); flex-shrink: 0; }
.l331-landing-contact-method-label { display: block; font-family: var(--font-sans); font-size: var(--text-sm); color: #64748b; }
.l331-landing-contact-method-value { font-family: var(--font-sans); font-weight: 600; color: #0f172a; text-decoration: none; }
.l331-landing-contact-right { background: var(--color-gray-50); border-radius: 12px; padding: var(--space-6); }
.l331-landing-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.l331-landing-form-group { display: flex; flex-direction: column; gap: var(--p-1); margin-bottom: 16px; }
.l331-landing-form-group label { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #64748b; }
.l331-landing-form-group input { font-family: var(--font-sans); background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--border-radius-sm); padding: var(--p-3) 16px; color: #0f172a; }
.l331-landing-form-group input:focus { outline: 2px solid var(--color-green-500); outline-offset: 1px; }
.l331-landing-form-submit { width: 100%; background: var(--color-green-600); color: var(--color-white); border: none; font-family: var(--font-sans); font-weight: 500; padding: 16px; border-radius: var(--border-radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--p-2); }


/* ================================================================
   18. LANDING PAGE — FOOTER
   ================================================================ */
.l331-landing-footer { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; justify-content: space-between; padding: var(--space-8) var(--space-4); border-top: 1px solid var(--color-gray-200); margin-top: var(--space-16); }
@media (min-width: 768px) { .l331-landing-footer { flex-direction: row; } }
.l331-landing-footer-logo { display: flex; align-items: center; gap: var(--p-2); font-family: var(--font-display); font-weight: 600; color: var(--color-green-600); }
.l331-landing-footer-links { display: flex; gap: var(--space-6); }
.l331-landing-footer-links a { font-family: var(--font-sans); font-size: var(--text-sm); color: #64748b; text-decoration: none; }
.l331-landing-footer-copy { font-family: var(--font-sans); font-size: var(--text-xs); color: #64748b; }


/* ================================================================
   19. FEATURE SPLIT — ICON GRID (l331-feature-split-icons-*)
   ================================================================ */
.l331-feature-split-icons { display: grid; grid-template-columns: 2fr 2fr; gap: var(--p-6); margin: var(--p-3) 0; }
.l331-feature-split-icon-item { display: flex; align-items: center; gap: var(--p-3); }
.l331-feature-split-icon-badge { width: 38px; height: 38px; flex-shrink: 0; background: var(--color-gray-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-green-600); }
.l331-feature-split-icon-badge svg { width: 18px; height: 18px; }
.l331-feature-split-icon-label {font-family: var(--font-sans);font-size: var(--text-sm);font-weight: 500;color: var(--color-gray-700);line-height: var(--leading-snug);}
.l331-feature-split-cta { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--p-2); font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; letter-spacing: var(--tracking-tight); color: var(--color-green-600) !important; text-decoration: none; padding-bottom: 3px; margin-top: var(--p-2); transition: opacity 0.2s ease; }
.l331-feature-split-cta:hover { opacity: 0.7; }
.l331-feature-split-cta svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.l331-feature-split-cta:hover svg { transform: translateX(4px); }


/* ================================================================
   20. SPACES SIMPLE 4-CARD GRID (l331-spaces-simple-*)
   ================================================================ */
.l331-spaces-simple-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.l331-spaces-see-more-row {
  text-align: center;
  margin-top: var(--space-6);
}
.l331-spaces-see-more-link {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-green-600);
  text-decoration: underline;
}
.l331-spaces-learn-more-link {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-green-600) !important;
  text-decoration: underline !important;
  letter-spacing: var(--tracking-tight);
}
@media (max-width: 1023px) {
  .l331-spaces-simple-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .l331-spaces-simple-container { grid-template-columns: repeat(1, 1fr); }
}


/* ================================================================
   20. TESTIMONIALS SECTION (l331-testimonials-*)
   ================================================================ */
.l331-testimonials-header { margin-bottom: var(--space-10); }
.l331-testimonials-header h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--color-green-600); letter-spacing: var(--tracking-tighter); line-height: var(--leading-tight); margin-bottom: var(--p-2); }
.l331-testimonials-header p { font-family: var(--font-sans); font-size: var(--text-base); color: #64748b; }
.l331-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .l331-testimonials-grid { grid-template-columns: 1fr; } }
.l331-testimonial-card { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--border-radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.l331-testimonial-mark { font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--color-green-600); opacity: 0.25; margin-bottom: calc(-1 * var(--space-4)); }
.l331-testimonial-quote { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-gray-700); line-height: var(--leading-normal); flex: 1; }
.l331-testimonial-footer { border-top: 1px solid var(--color-gray-200); padding-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; }
.l331-testimonial-author { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: #0f172a; }
.l331-testimonial-stars { color: var(--color-yellow-400); font-size: var(--text-sm); letter-spacing: 2px; }


/* ================================================================
   21. MEETING ROOM BOOKING PAGE (l331-booking-*)
   ================================================================ */
.l331-booking-hero { padding: var(--space-16) var(--space-6) var(--space-12); text-align: center; border-bottom: 1px solid var(--color-gray-200); }
.l331-booking-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--p-2); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #64748b; background: var(--color-gray-100); border-radius: var(--border-radius-pill); padding: var(--p-1) 16px; margin-bottom: var(--p-6); }
.l331-booking-hero h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--color-green-600); letter-spacing: var(--tracking-tighter); line-height: var(--leading-tight); max-width: 720px; margin: 0 auto 16px; }
.l331-booking-hero p { font-family: var(--font-sans); font-size: var(--text-md); color: #64748b; max-width: 540px; margin: 0 auto; line-height: var(--leading-normal); }

.l331-booking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); max-width: 1200px; margin: 0 auto; }
@media (max-width: 900px) { .l331-booking-grid { grid-template-columns: 1fr; max-width: 480px; } }

.l331-booking-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--border-radius-xl); padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); position: relative; transition: box-shadow 0.25s ease; }
.l331-booking-card:hover { box-shadow: var(--shadow-lg); }
.l331-booking-card--featured { border-color: var(--color-green-600); border-width: 2px; box-shadow: var(--shadow-md); }

.l331-booking-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--color-green-600); color: var(--color-white); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: var(--p-1) 16px; border-radius: var(--border-radius-pill); white-space: nowrap; }

.l331-booking-duration { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--color-green-600); letter-spacing: var(--tracking-tighter); line-height: 1; }
.l331-booking-name { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: #64748b; margin-top: var(--p-1); }

.l331-booking-timebar { display: flex; align-items: center; gap: var(--p-3); padding: 16px 0; border-top: 1px solid var(--color-gray-100); border-bottom: 1px solid var(--color-gray-100); }
.l331-booking-timebar-track { display: flex; gap: 3px; flex: 1; }
.l331-booking-timebar-track span { height: 6px; flex: 1; background: var(--color-gray-200); border-radius: 9999px; }
.l331-booking-timebar-track span.filled { background: var(--color-green-600); }
.l331-booking-timebar-label { font-family: var(--font-sans); font-size: var(--text-xs); color: #64748b; white-space: nowrap; }

.l331-booking-desc { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-gray-700); line-height: var(--leading-normal); }

.l331-booking-includes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--p-3); }
.l331-booking-includes li { display: flex; align-items: center; gap: var(--p-3); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-gray-700); }
.l331-booking-includes li svg { flex-shrink: 0; color: var(--color-green-600); width: 15px; height: 15px; }

.l331-booking-cta { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-gray-100); }
.l331-booking-cta .l331-btn { width: 100%; justify-content: center; margin-top: 0; font-size: var(--text-base) !important; padding: 16px 28px; }
.l331-booking-cta .l331-btn:hover { opacity: 0.88; }
.l331-booking-note { font-family: var(--font-sans); font-size: var(--text-xs); color: #64748b; text-align: center; margin-top: var(--p-3); }

.l331-booking-footer { text-align: center; padding: var(--space-12) var(--space-6); border-top: 1px solid var(--color-gray-200); }
.l331-booking-footer p { font-family: var(--font-sans); font-size: var(--text-sm); color: #64748b; }
.l331-booking-footer a { color: var(--color-green-600); font-weight: 500; text-decoration: none; }
.l331-booking-footer a:hover { text-decoration: underline; }


/* ================================================================
   22. MEETING ROOM BOOKING MODAL (l331-meeting-modal-*)
   ================================================================ */
.l331-meeting-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 99999; align-items: center; justify-content: center; padding: 16px; }
.l331-meeting-modal-overlay.active { display: flex; }
.l331-meeting-modal { background: #fff; border-radius: 12px; width: 100%; max-width: 920px; max-height: 95vh; overflow-y: auto; position: relative; z-index: 1000000; padding: 16px; }
.l331-meeting-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 28px; cursor: pointer; color: #64748b; line-height: 1; z-index: 10; }
.l331-meeting-modal-close:hover { color: #0f172a; }


/* ================================================================
   23. GLOBAL OVERLAY NAV (l331-hero-floating-* / l331-hnav-* / l331-mob-*)
   Pasted in the Simvoly funnel GLOBAL HEAD -> renders on every page.
   Sits as a transparent overlay on TOP of each page's own hero image.
   Each page builds its hero natively (set the image per page in the
   builder); the nav is NOT inside the hero.
   Desktop (>=1024px): floating glass pill nav with hover dropdowns.
   Mobile (<=1023px):  hamburger + slide-down accordion drawer.
   Old site nav is commented out in Section 3. Toggling of .is-open is
   handled by JS in the global head.
   position:absolute => the nav scrolls away with the hero. To keep it
   pinned to the top while scrolling, change the two nav bars to
   position:fixed (note: glass style needs a solid bg on scroll then).
   ================================================================ */
  /* ── DESKTOP FLOATING NAV ── */
  .l331-hero-floating-nav {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);   /* center it */
    width: 84%;
    max-width: 1380px;   /* pill floats within the hero; 80% keeps healthy side margins as it scales down */
    padding: var(--space-16) 0;   /* vertical padding positions the menu down from the top */
    box-sizing: border-box;
    z-index: 1000;
    align-items: center;
    justify-content: space-between;
  }
  @media (min-width: 1024px) { .l331-hero-floating-nav { display: flex; } }

  .l331-hero-floating-logo { display: flex; align-items: center; text-decoration: none; }
  .l331-hero-floating-logo-img { height: clamp(50px, 8vw, 70px); width: auto; display: block; object-fit: contain; }

  .l331-hero-pill-menu {
    display: flex; align-items: center; gap: var(--p-1);
    background: rgba(255,255,255,0.12); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--border-radius-pill); padding: var(--p-1);
  }
  .l331-hero-pill-menu > a {
    color: rgba(255,255,255,0.9); font-family: var(--font-sans); font-size: var(--text-sm);
    text-decoration: none; padding: var(--p-2) var(--p-4);
    border-radius: var(--border-radius-pill); transition: background 0.2s ease; white-space: nowrap;
  }
  .l331-hero-pill-menu > a:hover { background: rgba(255,255,255,0.15); }

  .l331-hnav-item { position: relative; display: inline-flex; align-items: center; }
  .l331-hnav-parent {
    color: rgba(255,255,255,0.9)!important;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-decoration: none;
    padding: var(--p-2) var(--p-4);
    border-radius: var(--border-radius-pill);
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
  }
  .l331-hnav-parent:hover { background: rgba(255,255,255,0.15); }

  .l331-hnav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--border-radius-md);
    padding: var(--p-2);
    min-width: 130px;
    z-index: 100;
    flex-direction: column;
    gap: 2px;
  }
  .l331-hnav-dropdown.is-open { display: flex; }
  .l331-hnav-dropdown a {
    color: rgba(255,255,255,0.85); font-family: var(--font-sans); font-size: var(--text-sm);
    text-decoration: none; padding: var(--p-3) var(--p-4);
    border-radius: var(--border-radius-sm); white-space: nowrap;
    display: block; transition: background 0.15s ease;
  }
  .l331-hnav-dropdown a:hover { background: rgba(255,255,255,0.12); }

  .l331-hero-floating-cta {
    display: inline-flex; align-items: center; gap: var(--p-3);
    background: var(--color-white); color: var(--color-green-600);
    padding: var(--p-1) var(--p-1) var(--p-1) var(--p-5);
    border-radius: var(--border-radius-pill); text-decoration: none;
    font-family: var(--font-sans); font-weight: 500; font-size: var(--text-sm); white-space: nowrap;
  }
  .l331-hero-floating-cta-icon {
    width: 32px; height: 32px; background: var(--color-green-600);
    color: var(--color-white); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }

  /* ── MOBILE NAV BAR ── */
  .l331-mob-nav {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 84%;
    max-width: 1380px;
    box-sizing: border-box;
    z-index: 1000;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-16) 0;
  }
  @media (max-width: 1023px) { .l331-mob-nav { display: flex; } }

  .l331-mob-logo { display: flex; align-items: center; text-decoration: none; }
  .l331-mob-logo-img {height: 66px;width: auto;display: block;object-fit: contain;}

  .l331-mob-hamburger {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 5px; background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--border-radius-md); padding: var(--p-2) var(--p-3);
    cursor: pointer; width: 44px; height: 44px;
  }
  .l331-mob-hamburger span {
    display: block; width: 20px; height: 2px;
    background: var(--color-white); border-radius: 2px;
    transition: all 0.25s ease;
  }
  .l331-mob-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .l331-mob-hamburger.is-open span:nth-child(2) { opacity: 0; }
  .l331-mob-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── MOBILE DRAWER ── */
  .l331-mob-drawer {
    display: none;
    /* Anchor just under the hamburger: top padding (space-16) + the centered
       hamburger's lower edge (~60px). Hugs the button instead of the bar's
       padded bottom, so there's no dead gap below the menu. */
    position: absolute; top: calc(var(--space-16) + 60px);
    left: 50%; right: auto; transform: translateX(-50%);
    width: calc(100% - 2 * var(--p-4)); max-width: 400px;
    z-index: 999;
    background: rgba(15,23,42,0.96); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--border-radius-lg);
    padding: var(--p-3);
    flex-direction: column; gap: 2px;
    animation: l331-drawer-in 0.2s ease;
  }
  @keyframes l331-drawer-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .l331-mob-drawer.is-open { display: flex; }

  .l331-mob-link {
    color: rgba(255,255,255,0.9); font-family: var(--font-sans); font-size: var(--text-base);
    text-decoration: none; padding: var(--p-3) var(--p-4);
    border-radius: var(--border-radius-sm); display: block;
    transition: background 0.15s ease;
  }
  .l331-mob-link:hover { background: rgba(255,255,255,0.08); }

  /* Accordion rows */
  .l331-mob-accordion { display: flex; flex-direction: column; }
  .l331-mob-accordion-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.9); font-family: var(--font-sans); font-size: var(--text-base);
    padding: var(--p-3) var(--p-4); border-radius: var(--border-radius-sm);
    text-align: left; transition: background 0.15s ease;
  }
  .l331-mob-accordion-btn:hover { background: rgba(255,255,255,0.08); }
  .l331-mob-chevron { transition: transform 0.25s ease; flex-shrink: 0; }
  .l331-mob-accordion-btn.is-open .l331-mob-chevron { transform: rotate(180deg); }

  .l331-mob-accordion-panel {
    display: none; flex-direction: column; gap: 0;
    padding-left: var(--p-4);
    border-left: 1px solid rgba(255,255,255,0.12);
    margin: 2px 0 4px var(--p-4);
  }
  .l331-mob-accordion-panel.is-open { display: flex; }
  .l331-mob-sub-link {
    color: rgba(255,255,255,0.7); font-family: var(--font-sans); font-size: var(--text-sm);
    text-decoration: none; padding: var(--p-2) var(--p-3);
    border-radius: var(--border-radius-sm); display: block;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .l331-mob-sub-link:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.95); }

  .l331-mob-cta-link {
    display: block; text-align: center; margin-top: var(--p-2);
    background: var(--color-white); color: var(--color-green-600) !important;
    font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm);
    padding: var(--p-3) var(--p-4); border-radius: var(--border-radius-pill);
    text-decoration: none;
  }


/* ================================================================
   24. SHARED OVERLAY NAV (l331-nav-*) + PER-PAGE HERO (l331-hero-*)
   PRO ARCHITECTURE — the correct split:
   • NAV lives ONCE in the GLOBAL HEAD as a transparent overlay bar.
     Full-width outer + a centered max-width:1380 inner, so it aligns to
     the site content regardless of its containing block. Desktop = glass
     pill w/ hover dropdowns; mobile = hamburger -> full-screen fixed menu.
     JS-FREE (checkbox + <details>). NO isolation (would trap z-index).
   • HERO is built PER PAGE with a REAL <img> (the LCP image: fast and
     preload-scannable — never a CSS background). The nav floats on top.
   • Keep the anti-FOUC script in the global head (hides body until load).
   ================================================================ */

/* ---------- SHARED OVERLAY NAV ---------- */
.l331-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  color: var(--color-white);
  font-family: var(--font-sans);
  /* contrast scrim: keeps the white logo/links/hamburger legible over bright
     parts of any hero image; fades to nothing so it isn't a visible band. */
  /* background: linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.18) 55%, transparent 100%); */
  }
/* FOUC guard: the nav ships with an inline style="visibility:hidden" attribute on
   the <nav class="l331-nav"> element, so the raw nav never paints before this
   stylesheet loads. This rule reveals it already-styled. !important is required to
   override the inline attribute. Pure CSS, so it cannot affect the dropdown. */
nav.l331-nav { visibility: visible !important; }
/* Solid nav variant for heroless pages (build.py adds `l331-nav--solid` when a
   page declares `has_hero: false`). The default nav is white text on a
   transparent, absolutely-positioned bar meant to overlay a dark hero image; on
   a page with no hero that is white-on-white and illegible. Here the bar gets a
   dark brand background AND becomes an in-flow (relative) block so it no longer
   overlaps the first section of content. Appearance on hero pages is untouched. */
.l331-nav--solid { position: relative; background: var(--color-green-600); }
/* On heroless pages the nav is a real, in-flow header bar — not a pill floating
   over a tall hero image. So it should read as a compact top bar: the large
   floating-hero vertical padding (var(--space-14) ≈ 56–84px each side) is
   collapsed to normal header padding (--p-4 = 16px), which removes the
   oversized, disconnected green band Dave flagged. Horizontal gutter unchanged. */
.l331-nav--solid .l331-nav-inner { padding-top: var(--p-4); padding-bottom: var(--p-4); }
/* Slightly smaller logo in the compact bar so it doesn't dominate the shorter
   header height (hero pages keep the larger floating logo). */
.l331-nav--solid .l331-nav-logo-img { height: clamp(48px, 5vw, 60px); }
.l331-nav-inner {
  /* Align nav content's left edge with hero/page-section content: use the SAME
     fixed-padding centering band as .l331-hero-section / .l331-page-section
     (max-width 1420px + 28px side padding), NOT a percentage width. A % width
     and a fixed-padding band only coincide at a few viewport widths and drift
     apart everywhere else, which is why the logo and hero title were misaligned
     as the viewport resized. Vertical padding (floating-hero band) preserved. */
  max-width: 1420px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-14) 28px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-4);
  }
/* ---------------------------------------------------------------------------
   Nav logo ↔ hero title left-edge alignment (responsive).

   .l331-nav-inner shares the SAME centering band as .l331-hero-section /
   .l331-page-section (max-width:1420px; margin:auto), so its content edge = the
   hero SECTION content edge at every width. But the hero TITLE is inset further
   than the section edge, by an amount that changes per breakpoint:

     ≥1024px : +50px   (.l331-hero-texts-container padding-left:50px)  section pad 28px
     769–1023: +24px   (.l331-hero-bottom-area padding:var(--p-6)=24px) section pad 28px
     ≤768px  : +24px   (.l331-hero-bottom-area padding:var(--p-6)=24px) section pad --space-4

   To land the LOGO exactly on the hero title text, nav-inner's left padding =
   (section side padding) + (hero-title extra inset) at each tier. These rules are
   placed AFTER the base .l331-nav-inner rule so they win on source order.
   Heroless pages (.l331-nav--solid) have no hero title, so they're excluded and
   keep the plain section-aligned band. The right side keeps 28px/space-4 so the
   pill still fills the band via justify-content:space-between.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .l331-nav:not(.l331-nav--solid) .l331-nav-inner { padding-left: calc(28px + 50px); padding-right: calc(28px + 50px); }
}
@media (min-width: 769px) and (max-width: 1023.98px) {
  .l331-nav:not(.l331-nav--solid) .l331-nav-inner { padding-left: calc(28px + var(--p-6)); padding-right: calc(28px + var(--p-6)); }
}
@media (max-width: 768px) {
  .l331-nav:not(.l331-nav--solid) .l331-nav-inner { padding-left: calc(var(--space-4) + var(--p-6)); padding-right: calc(var(--space-4) + var(--p-6)); }
}
.l331-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.l331-nav-logo { display: inline-flex; align-items: center; text-decoration: none; }
.l331-nav-logo-img {height: clamp(65px, 7vw, 80px);width: auto;display: block;object-fit: contain;}

/* desktop pill */
.l331-nav-menu {
  display: none;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--border-radius-pill);
  padding: 8px;
  }
@media (min-width: 1024px) { .l331-nav-menu { display: flex; } }
.l331-nav-link { color: rgba(255,255,255,0.92); font-size: var(--text-sm); text-decoration: none;
  padding: var(--p-2) var(--p-4); border-radius: var(--border-radius-pill); white-space: nowrap; transition: background 0.2s ease; cursor: pointer; }
.l331-nav-link:hover { background: rgba(255,255,255,0.16); }

/* desktop dropdown (hover) */
.l331-nav-dd { position: relative; display: inline-flex; }
.l331-nav-dd-panel {
  display: none;
  position: absolute;
  top: 100%;
  margin-top: 8px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  padding: var(--p-2);
  background: var(--color-green-600);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 20;
  }
/* invisible bridge fills the 8px gap so hover survives link -> panel */
.l331-nav-dd-panel::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.l331-nav-dd:hover .l331-nav-dd-panel { display: flex; }
.l331-nav-dd-panel a { color: rgba(255,255,255,0.9); font-size: var(--text-sm); text-decoration: none;
  padding: var(--p-3) var(--p-4); border-radius: var(--border-radius-sm); white-space: nowrap; transition: background 0.15s ease; }
.l331-nav-dd-panel a:hover { background: rgba(255,255,255,0.14); }

/* desktop CTA */
.l331-nav-cta { display: none; align-items: center; gap: var(--p-3); background: var(--color-white);
  color: var(--color-green-600) !important; padding: var(--p-1) var(--p-1) var(--p-1) var(--p-5);
  border-radius: var(--border-radius-pill); text-decoration: none; font-weight: 500; font-size: var(--text-sm); white-space: nowrap; }
@media (min-width: 1024px) { .l331-nav-cta { display: inline-flex; } }
.l331-nav-cta-icon { width: 32px; height: 32px; background: var(--color-green-600); color: var(--color-white);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* hamburger (mobile) */
.l331-nav-burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 46px; height: 46px; border-radius: var(--border-radius-md); cursor: pointer; flex-shrink: 0;
  background: rgba(0,0,0,0.30); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.45); }
@media (min-width: 1024px) { .l331-nav-burger { display: none; } }
.l331-nav-burger span { display: block; width: 20px; height: 2px; background: var(--color-white); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
.l331-nav-toggle:checked ~ .l331-nav-inner .l331-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.l331-nav-toggle:checked ~ .l331-nav-inner .l331-nav-burger span:nth-child(2) { opacity: 0; }
.l331-nav-toggle:checked ~ .l331-nav-inner .l331-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile FULL-SCREEN menu */
.l331-nav-mobile { display: none; position: fixed; inset: 0; z-index: 2147483647;
  flex-direction: column; padding: var(--space-6); background: var(--color-green-600); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.l331-nav-toggle:checked ~ .l331-nav-mobile { display: flex; }
@media (min-width: 1024px) { .l331-nav-mobile { display: none !important; } }
.l331-nav-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-10); }
.l331-nav-close { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  font-size: 28px; line-height: 1; color: #fff; cursor: pointer; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.25); border-radius: var(--border-radius-md); background: rgba(255,255,255,0.08); }
.l331-nav-mobile-links { display: flex; flex-direction: column; }
.l331-nav-mobile-links > a, .l331-nav-acc > summary {
  color: #fff !important; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600;
  letter-spacing: var(--tracking-tighter); line-height: 1.1; text-decoration: none;
  padding: var(--p-4) 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.l331-nav-acc > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.l331-nav-acc > summary::-webkit-details-marker { display: none; }
.l331-nav-acc-chevron { width: 22px; height: 22px; transition: transform 0.25s ease; flex-shrink: 0; }
.l331-nav-acc[open] > summary .l331-nav-acc-chevron { transform: rotate(180deg); }
.l331-nav-acc-panel { display: flex; flex-direction: column; padding: var(--p-2) 0 var(--p-4); }
.l331-nav-acc-panel a { color: rgba(255,255,255,0.82) !important; font-family: var(--font-sans);
  font-size: var(--text-md); text-decoration: none; padding: var(--p-2) 0; }
.l331-nav-mobile-cta { display: block; text-align: center; margin-top: auto; background: var(--color-white);
  color: var(--color-green-600) !important; font-weight: 600; font-size: var(--text-base);
  padding: var(--p-4); border-radius: var(--border-radius-pill); text-decoration: none; }

/* ---------- PER-PAGE HERO (real <img>) — l331-phero-* namespace
   (renamed from l331-hero-* to avoid colliding with the old Section 4
   .l331-hero / .l331-hero-ctas / .l331-hero-title* classes). ---------- */
.l331-phero {
  position: relative;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  min-height: clamp(480px, 68vh, 700px);
  display: flex;
  align-items: flex-end;
  }
.l331-phero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
.l331-phero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
280deg, rgba(1, 54, 46, 0.55) 0%, rgba(1, 54, 46, 0.12) 38%, rgba(1, 54, 46, 0.78) 100%);
  }
.l331-phero-inner { position: relative; z-index: 2; max-width: 760px; color: var(--color-white);
  padding: var(--space-6); padding-top: calc(var(--space-16) + 64px); /* clears the overlay nav */ }
.l331-phero-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-4xl);
  line-height: 1.02; letter-spacing: var(--tracking-tighter); margin-bottom: var(--p-3); }
.l331-phero-sub { font-size: var(--text-md); color: rgba(255,255,255,0.9); line-height: var(--leading-normal);
  margin-bottom: var(--p-6); max-width: 560px; }
.l331-phero-ctas { display: flex; flex-wrap: wrap; gap: var(--p-3); }
.l331-phero-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--p-button);
  border-radius: var(--border-radius-pill); font-size: var(--text-sm); font-weight: 500; text-decoration: none;
  background: var(--color-white); color: var(--color-green-600) !important; border: 1px solid var(--color-white); transition: opacity 0.2s ease; }
.l331-phero-btn:hover { opacity: 0.9; }
.l331-phero-btn--ghost { background: transparent; color: var(--color-white) !important; }
.l331-phero-btn--ghost:hover { background: rgba(255,255,255,0.12); opacity: 1; }

/* ================================================================
   25. SITE FOOTER (l331-footer-*) — new for the static rebuild.
   Content matches the live site's footer widget; markup rewritten as
   clean semantic HTML (the live version is Simvoly's own grid/widget
   scaffolding with zero corresponding rules in this stylesheet).
   ================================================================ */
.l331-footer {
  background: rgba(1, 60, 63, 1);
  padding: var(--space-16) var(--space-6);
  color: var(--color-white);
  }
.l331-footer-inner {
  max-width: 1420px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
  }
.l331-footer-logo { height: 56px; width: auto; display: block; object-fit: contain; margin-bottom: var(--p-4); }
.l331-footer-tagline { font-size: var(--text-sm); line-height: var(--leading-normal); color: rgba(255,255,255,0.85); max-width: 42ch; }
.l331-footer-heading { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-white); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--p-4); }
.l331-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--p-3); }
.l331-footer-links a, .l331-footer-text-only { color: rgba(255,255,255,0.85); font-size: var(--text-sm); text-decoration: none; }
.l331-footer-links a:hover { color: var(--color-white); text-decoration: underline; }
.l331-footer-address { font-style: normal; font-size: var(--text-sm); line-height: var(--leading-loose); color: rgba(255,255,255,0.85); }
.l331-footer-address a { color: rgba(255,255,255,0.85); text-decoration: none; }
.l331-footer-address a:hover { color: var(--color-white); text-decoration: underline; }
@media (max-width: 1023px) {
  .l331-footer-inner { grid-template-columns: 1fr 1fr; }
  .l331-footer-brand { grid-column: 1 / -1; }
}

/* ================================================================
   26. HOME PAGE GAPS — new for the static rebuild.
   Two classes present in the live Home markup (Dave's authored code)
   that had no matching rule in the copied production stylesheet:
     - .btn-white   : hero "Book a Tour" button, white variant that sits
                      over the dark hero image (base .l331-btn is green).
     - .l331-reviews-header : wrapper around the testimonials heading;
                      .l331-reviews-heading already centres itself, so this
                      only guarantees the wrapper doesn't collapse spacing.
   Built from existing design tokens (see Section 0 token block).
   ================================================================ */
.l331-btn.btn-white {
  background-color: var(--color-white) !important;
  color: var(--color-green-600) !important;
}
.l331-btn.btn-white:hover { background-color: var(--color-gray-50) !important; }

/* ================================================================
   27. CONTACT PAGE (l331-contact-*) — new for the static rebuild.
   Live /contact is Simvoly's own FormWidget (posts to Simvoly's own
   backend via a hidden formid token) plus a Google Maps iframe embed.
   The widget markup carries zero reusable classes, so this is a clean
   semantic rewrite: same fields/labels/order as live, wired to Netlify
   Forms per the site-wide forms convention. Built from existing design
   tokens (see Section 0 token block).
   ================================================================ */
.l331-contact-section { padding-bottom: var(--space-16); }
.l331-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}
@media (max-width: 1023px) {
  .l331-contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
.l331-contact-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-green-600);
  letter-spacing: var(--tracking-tighter);
  margin-bottom: var(--p-4);
}
.l331-contact-lede {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-gray-700);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-6);
}
.l331-contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.l331-contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.l331-contact-field { display: flex; flex-direction: column; gap: var(--p-2); flex: 1; }
.l331-contact-field-row { display: flex; gap: var(--space-4); }
@media (max-width: 640px) {
  .l331-contact-field-row { flex-direction: column; gap: var(--space-4); }
}
.l331-contact-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gray-700);
}
.l331-contact-form input[type="text"],
.l331-contact-form input[type="email"],
.l331-contact-form input[type="tel"],
.l331-contact-form select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-sm);
  padding: var(--p-3) var(--p-4);
  width: 100%;
  box-sizing: border-box;
}
.l331-contact-form input:focus,
.l331-contact-form select:focus {
  outline: 2px solid var(--color-green-600);
  outline-offset: 1px;
}
.l331-contact-consent { margin-top: var(--p-2); }
.l331-contact-checkbox { display: flex; align-items: flex-start; gap: var(--p-3); cursor: pointer; }
.l331-contact-checkbox input { margin-top: 3px; flex-shrink: 0; }
.l331-contact-checkbox span { font-size: var(--text-xs); color: var(--color-gray-500); line-height: var(--leading-normal); }
.l331-contact-checkbox a, .l331-contact-terms a { color: var(--color-cyan-600); }
.l331-contact-terms { font-size: var(--text-xs); color: var(--color-gray-500); }
.l331-contact-submit {
  align-self: flex-start;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.l331-contact-map {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.l331-contact-map-iframe { display: block; width: 100%; height: 100%; }
/* Exp Access "Our Location" map is landscape on live (~1.274:1), not square. */
.l331-location-split .l331-contact-map { aspect-ratio: 609 / 478; }

.l331-reviews-header { text-align: center; }

/* --- Tour page (GHL form embed) --- */
.l331-tour-intro { max-width: 720px; margin: var(--space-16) auto var(--space-8); text-align: center; }
.l331-tour-intro h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--color-green-600); letter-spacing: var(--tracking-tighter); margin-bottom: 16px; }
.l331-tour-intro p { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-gray-700); line-height: var(--leading-normal); margin-bottom: var(--space-4); }
.l331-tour-form { max-width: 720px; margin: 0 auto var(--space-16); }
.l331-tour-form iframe { display: block; width: 100%; background: var(--color-white); box-shadow: var(--shadow-md); }

/* ================================================================
   28. SKIP LINK (l331-skip-link) — a11y, injected by build.py before nav.
   Standard visually-hidden-until-focused pattern.
   ================================================================ */
.l331-skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 2147483647;
  background: var(--color-white);
  color: var(--color-green-600) !important;
  padding: var(--p-3) var(--p-5);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.l331-skip-link:focus {
  top: var(--space-4);
}