/* ===========================================================
   TAL: The Abilities Lounge — Stylesheet
   Soft lavender, fun, family-friendly, and spacious.
   =========================================================== */

:root {
  /* ===========================================================
     THEME: Dark Teal  (swapped from the Red theme; original was Lavender)
     The variable names keep the "--lavender-*" prefix on purpose so the
     rest of the stylesheet needs no edits to change the theme.
     To revert: copy the RED THEME (or ORIGINAL LAVENDER THEME) block from
     the bottom of this :root rule over the values below, and update the
     HTML <meta name="theme-color">.
     =========================================================== */

  /* Dark teal palette (light -> dark) */
  --lavender-50:  #EEF7F7;
  --lavender-100: #D5ECEE;
  --lavender-200: #ACD9DD;
  --lavender-300: #79BFC6;
  --lavender-400: #449CA6;
  --lavender-500: #1F7E8A;
  --lavender-600: #136B77;
  --lavender-700: #0C4D56;

  --ink:        #25393B;
  --ink-soft:   #5E726F;
  --white:      #ffffff;

  /* Light tints for text/details on the dark teal panels */
  --on-dark-1:  #EAF6F6;
  --on-dark-2:  #CBE6E8;
  --on-dark-3:  #A3CCD1;
  --on-dark-4:  #D6EAEB;

  --accent-mint:  #A8E0D0;
  --accent-peach: #FAD7C8;
  --accent-sun:   #FBE8A6;

  --shadow-sm: 0 4px 14px rgba(15, 70, 80, 0.12);
  --shadow-md: 0 10px 30px rgba(15, 70, 80, 0.18);
  --shadow-lg: 0 20px 50px rgba(15, 70, 80, 0.22);

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;

  --maxw: 1080px;

  /* ===========================================================
     RED THEME — revert reference. To go back to red, paste these over the
     values above (and set <meta name="theme-color"> to #BE3B33):
       --lavender-50:#FDF4F3;  --lavender-100:#FBE6E4; --lavender-200:#F6CFCB;
       --lavender-300:#EDACA6; --lavender-400:#E08079; --lavender-500:#D2554C;
       --lavender-600:#BE3B33; --lavender-700:#97271F;
       --ink:#40302E; --ink-soft:#7C6A66;
       --on-dark-1:#FDECEC; --on-dark-2:#F7D6D6; --on-dark-3:#E8B4B0; --on-dark-4:#F4CFCC;
       --shadow-sm:0 4px 14px rgba(150,45,40,.12);
       --shadow-md:0 10px 30px rgba(150,45,40,.18);
       --shadow-lg:0 20px 50px rgba(150,45,40,.22);
       (nav-overlay: rgba(60,28,26,.45);  about-portrait shadow: rgba(150,45,40,.30))
     ===========================================================
     ORIGINAL LAVENDER THEME — revert reference. To go back to purple,
     paste these over the values above:
       --lavender-50:#F7F4FC;  --lavender-100:#EFE9FA; --lavender-200:#E2D8F5;
       --lavender-300:#D0BFEE; --lavender-400:#B8A4E0; --lavender-500:#9C82D4;
       --lavender-600:#8163BF; --lavender-700:#6A4FA3;
       --ink:#463F57; --ink-soft:#6B6480;
       --on-dark-1:#F1EBFF; --on-dark-2:#E7DEFB; --on-dark-3:#CDBFF0; --on-dark-4:#D8CCF2;
       --shadow-sm:0 4px 14px rgba(124,95,191,.10);
       --shadow-md:0 10px 30px rgba(124,95,191,.16);
       --shadow-lg:0 20px 50px rgba(124,95,191,.20);
     (and change the HTML <meta name="theme-color"> back to #8163BF)
     =========================================================== */
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #ffffff;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Form controls don't inherit fonts by default — force Montserrat everywhere. */
button, input, select, textarea { font-family: inherit; }

h1, h2, h3, .logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.4em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1.1em; }

a { color: var(--lavender-700); }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* generous breathing room between sections */
section { padding: clamp(56px, 9vw, 120px) 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 16px 34px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--lavender-500), var(--lavender-600));
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.btn-ghost {
  background: var(--white);
  color: var(--lavender-700);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--lavender-100);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.3rem;
}
.logo img.logo-mark {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: #fff;
  object-fit: contain;
  padding: 3px;
  box-shadow: var(--shadow-sm);
}
.logo small {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* Persistent header action links (e.g. Message Us) beside the menu button */
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-link:hover { background: var(--lavender-100); color: var(--lavender-700); }

/* On phones, collapse the logo to its icon and tighten the action links so
   both tabs + the menu button fit comfortably */
@media (max-width: 600px) {
  .logo span { display: none; }
  .nav-actions { gap: 6px; }
  .nav-link { padding: 7px 11px; font-size: 0.85rem; }
}

/* Hamburger button */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 50px; height: 50px;
  background: var(--white);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  padding: 0 13px;
}
.nav-toggle span {
  display: block; height: 3px; width: 100%;
  background: var(--lavender-600);
  border-radius: 3px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Slide-out menu */
.nav-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(340px, 86vw);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  padding: 96px 28px 40px;
  transform: translateX(110%);
  transition: transform 0.32s cubic-bezier(.5,.05,.3,1);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nav-menu.open { transform: translateX(0); }

.nav-menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.18rem;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, transform 0.15s ease;
}
.nav-menu a:hover { background: var(--lavender-100); transform: translateX(4px); }
.nav-menu a .emoji { font-size: 1.4rem; }
.nav-menu .menu-cta { margin-top: 18px; justify-content: center; }

/* Founding Friends membership CTA (homepage, between mission and spaces) */
.founding-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
.founding-media img {
  width: clamp(220px, 30vw, 340px);
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: block;
  position: relative;
  z-index: 1;
  cursor: zoom-in;
  transform-origin: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.founding-media img:hover,
.founding-media img:focus-visible {
  transform: scale(1.25);
  box-shadow: var(--shadow-lg);
  z-index: 5;
}
.founding-body .lead { margin-bottom: 22px; }
/* Reversed variant: text left, flyer right (used by the Pizza Party CTA) */
.founding--reverse .founding-grid { grid-template-columns: 1fr auto; }
.founding--reverse .founding-media { order: 2; }
@media (max-width: 760px) {
  .founding-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .founding--reverse .founding-grid { grid-template-columns: 1fr; }
}

/* "Forms" dropdown inside the slide-out menu */
.nav-group { display: flex; flex-direction: column; }
.nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  color: var(--ink);
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.18rem;
  padding: 16px 18px; border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.nav-group-toggle:hover { background: var(--lavender-100); }
.nav-group-toggle .chev { transition: transform 0.25s ease; color: var(--lavender-600); flex: 0 0 auto; }
.nav-group-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-sub {
  display: flex; flex-direction: column;
  max-height: 0; overflow: hidden;
  transition: max-height 0.28s ease;
}
.nav-sub a.nav-sublink {
  font-size: 1rem;
  color: var(--ink-soft);
  padding: 12px 18px 12px 34px;
}

.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 45, 50, 0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 55;
}
.nav-overlay.show { opacity: 1; visibility: visible; }

.menu-close {
  position: absolute;
  top: 22px; right: 22px;
  width: 44px; height: 44px;
  border: none; border-radius: 12px;
  background: var(--lavender-100);
  color: var(--lavender-700);
  font-size: 1.4rem; cursor: pointer;
  line-height: 1;
}

/* ---------- Tagline marquee (under header) ---------- */
.tagline-marquee {
  overflow: hidden;
  background: linear-gradient(180deg, var(--lavender-100) 0%, #ffffff 100%);
  padding: 11px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.tagline-track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: scroll-x 34s linear infinite;
}
.tagline-track .w {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 0.82rem;
  color: var(--lavender-600);
  padding: 0 22px;
}
.tagline-track .sep {
  color: var(--lavender-300);
  font-size: 0.7rem;
}

/* ---------- Hero ---------- */
.hero {
  padding: 0;
  position: relative;
}
.hero-photo {
  position: relative;
  min-height: clamp(300px, 50vh, 460px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px 44px;
  background: #ffffff;
  will-change: opacity, transform;
}
.hero-logo {
  width: min(260px, 52vw);
  height: auto;
  margin-bottom: clamp(12px, 2.4vh, 22px);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-inner p {
  font-size: clamp(1.08rem, 2.2vw, 1.38rem);
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 1.4em;
  max-width: 660px;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.scroll-cue {
  position: absolute;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  color: var(--lavender-600);
  font-size: 2rem;
  animation: bob 1.8s ease-in-out infinite;
  text-decoration: none;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0);} 50% { transform: translate(-50%,10px);} }

/* ---------- About ---------- */
.about { text-align: center; }
.about-portrait {
  width: clamp(200px, 38vw, 300px);
  height: clamp(200px, 38vw, 300px);
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 28px;
  background: var(--lavender-300);
  box-shadow: 0 18px 44px rgba(15, 70, 80, 0.30);
  border: 8px solid #fff;
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-10px);} }
.about .lead {
  max-width: 720px;
  margin: 0 auto 1.4em;
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  color: var(--ink-soft);
}
.eyebrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--lavender-600);
  background: var(--lavender-100);
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 48px;
}
.feature-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--lavender-100);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feature-card .ico {
  font-size: 2.6rem;
  display: inline-grid;
  place-items: center;
  width: 76px; height: 76px;
  border-radius: 20px;
  margin-bottom: 16px;
  background: var(--lavender-100);
}
.feature-card h3 { margin-bottom: 6px; }
.feature-card p { color: var(--ink-soft); margin: 0; font-size: 0.98rem; }

/* ---------- Flip cards ("Our Space Includes") ---------- */
.flip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

.flip-card {
  appearance: none;
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  perspective: 1200px;
  aspect-ratio: 3 / 4;
}

.flip-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(.4, .1, .2, 1);
  transform-style: preserve-3d;
}
/* Flip on hover (mouse), on keyboard focus, and on the .flipped class (tap) */
.flip-card:hover .flip-inner,
.flip-card:focus-visible .flip-inner,
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }

.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--lavender-100);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-card:hover .flip-face,
.flip-card:focus-visible .flip-face,
.flip-card.flipped .flip-face { box-shadow: var(--shadow-md); }

/* Front — the "photo" + label */
.flip-front { background: var(--white); }
.flip-photo {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--lavender-200), var(--lavender-400));
}
.flip-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Emoji now sits in its own band ABOVE the photo (not on top of it) */
.flip-ico {
  font-size: 2.2rem;
  line-height: 1;
  padding: 12px 0 8px;
  text-align: center;
}
.flip-cue {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--lavender-700);
  display: grid; place-items: center;
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
}
/* Back — the description */
.flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--lavender-500), var(--lavender-700));
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 26px 24px;
}
.flip-back-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}
.flip-desc { color: var(--on-dark-1); font-size: 0.98rem; line-height: 1.6; }
.flip-hint {
  margin-top: 6px;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  opacity: 0.85;
}

@media (max-width: 760px) {
  .flip-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .flip-grid { grid-template-columns: 1fr; }
}

/* ---------- Book Now ---------- */
.book {
  text-align: center;
}
.book-card {
  background: linear-gradient(135deg, var(--lavender-500), var(--lavender-700));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 7vw, 72px) clamp(24px, 6vw, 64px);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.book-card::before,
.book-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.book-card::before { width: 260px; height: 260px; top: -90px; right: -60px; }
.book-card::after  { width: 180px; height: 180px; bottom: -70px; left: -40px; }
.book-card h2 { color: #fff; position: relative; }
.book-card p { color: var(--on-dark-1); position: relative; max-width: 560px; margin: 0 auto 1.8em; }
.book-card .btn { position: relative; }
.book-note { font-size: 0.9rem; color: var(--on-dark-2); margin-top: 18px; }

/* Contact details inside the "Ready to visit?" card */
.book-contact {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin: 22px auto 0;
  color: var(--on-dark-1);
}
.book-contact-item {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
  text-align: center;
}
.book-contact-item a { color: #fff; text-decoration: underline; }
.book-contact-item a:hover { opacity: 0.85; }

/* Social links inside the "Ready to visit?" card */
.book-social { position: relative; margin-top: 22px; }
.book-social-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: 12px;
}
.social-row { display: flex; gap: 14px; justify-content: center; }
.social-link {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.social-link:hover {
  background: #fff;
  color: var(--lavender-700);
  transform: translateY(-3px);
}
.social-link svg { width: 22px; height: 22px; fill: currentColor; display: block; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  text-align: center;
  padding: clamp(60px, 10vw, 120px) 0 clamp(20px, 4vw, 48px);
}
.page-hero p { color: var(--ink-soft); max-width: 620px; margin: 0 auto; font-size: 1.1rem; }

/* ---------- Prose (legal / long-form text pages, e.g. Privacy Policy) ---------- */
.prose { max-width: 760px; color: var(--ink-soft); }
.prose h2 { color: var(--ink); font-size: 1.3rem; margin: 1.8em 0 0.5em; }
.prose p { margin: 0 0 1em; line-height: 1.7; }
.prose ul { margin: 0 0 1em; padding-left: 1.25em; line-height: 1.7; }
.prose li { margin: 0 0 0.5em; }
.prose strong { color: var(--ink); }
.prose a { color: var(--lavender-600); text-decoration: underline; }

/* ---------- Marquee (Reviews) ---------- */
.marquee {
  overflow: hidden;
  padding: 14px 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll-x 45s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  width: 400px; height: 300px;
  margin-right: 22px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, var(--lavender-200), var(--lavender-400));
  display: grid; place-items: center;
  color: var(--lavender-700);
  font-weight: 700;
  position: relative;
}
.marquee-item img { width: 100%; height: 100%; object-fit: contain; }
.marquee-item .ph {
  text-align: center; padding: 16px;
  color: #fff; opacity: 0.9; font-size: 0.95rem;
}

/* ---------- Google Reviews ---------- */
.reviews-head {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.g-logo {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.5rem;
}
.g-logo .b { color:#4285F4 } .g-logo .r{color:#EA4335} .g-logo .y{color:#FBBC05}
.g-logo .g{color:#34A853}
.stars { color: #FBBC05; font-size: 1.3rem; letter-spacing: 2px; }
.reviews-sub { text-align:center; color: var(--ink-soft); margin-bottom: 44px; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.review-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--lavender-100);
  display: flex; flex-direction: column; gap: 12px;
}
.review-card .top { display:flex; align-items:center; gap: 14px; }
.review-card .avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 700;
  font-family: 'Montserrat', sans-serif; font-size: 1.2rem;
  background: linear-gradient(135deg, var(--lavender-400), var(--lavender-600));
}
.review-card .who { font-weight: 700; }
.review-card .when { color: var(--ink-soft); font-size: 0.85rem; }
.review-card .stars { font-size: 1.05rem; }
.review-card p { color: var(--ink-soft); margin: 0; }
.review-card .gmark { margin-top: auto; font-size: 0.8rem; color: var(--ink-soft); display:flex; align-items:center; gap:6px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faq-item {
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--lavender-100);
  overflow: hidden;
}
.faq-q {
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 22px 26px;
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  font-size: 1.12rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-q .chev { transition: transform 0.25s ease; color: var(--lavender-600); flex: 0 0 auto; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 26px;
  color: var(--ink-soft);
}
/* max-height is set inline by main.js from the panel's real height, so answers
   of any length expand without clipping. This rule only handles the padding. */
.faq-item.open .faq-a { padding: 0 26px 24px; }

/* ---------- Coming soon (third tab) ---------- */
.soon { text-align: center; }
.soon .emoji-big { font-size: 4rem; margin-bottom: 12px; }
.soon p { color: var(--ink-soft); max-width: 560px; margin: 0 auto 1.4em; }

/* ---------- Map embed ---------- */
.map-embed {
  width: 100%;
  margin-top: 28px;
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: clamp(340px, 52vh, 560px);
  border: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--lavender-700);
  color: var(--on-dark-1);
  padding: 56px 0 36px;
}
.site-footer .container { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.site-footer h3 { color: #fff; }
.site-footer a { color: var(--on-dark-1); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-bottom {
  text-align: center; color: var(--on-dark-3); font-size: 0.85rem;
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.15);
}

/* ---------- Helpers ---------- */
.center { text-align: center; }
.mt-lg { margin-top: 40px; }

/* ---------- Split rows (room / experience walkthrough) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
.split + .split { margin-top: clamp(44px, 7vw, 96px); }
.split.reverse .split-media { order: 2; }

.split-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--lavender-200), var(--lavender-400));
  display: grid; place-items: center;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media .ph {
  color: #fff; text-align: center; padding: 20px; font-weight: 700; opacity: 0.95;
}
.split-media .ph small { display:block; font-weight: 600; opacity: 0.85; margin-top: 4px; }

.split-text .step {
  display: inline-block;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  color: var(--lavender-600); font-size: 0.85rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px;
}
.split-text h2,
.split-text h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 10px; }
.split-text p { color: var(--ink-soft); }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pill {
  background: var(--lavender-100);
  color: var(--lavender-700);
  font-weight: 700; font-size: 0.85rem;
  padding: 7px 15px; border-radius: 999px;
}

/* ---------- Events list ---------- */
.event-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.event-card {
  display: flex; gap: 22px; align-items: center;
  background: var(--white);
  border: 1px solid var(--lavender-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 22px 26px;
}
a.event-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.event-date {
  flex: 0 0 auto;
  width: 78px; height: 78px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--lavender-500), var(--lavender-700));
  color: #fff; display: grid; place-items: center; text-align: center;
  font-family: 'Montserrat', sans-serif; line-height: 1;
}
.event-date .m { font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }
.event-date .d { font-size: 1.7rem; font-weight: 700; }
/* Flyer thumbnail used in place of the date pill (e.g. Pizza Party) */
.event-media {
  flex: 0 0 auto;
  width: clamp(140px, 24vw, 190px);
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: block;
  transition: transform 0.25s ease;
}
.event-card:hover .event-media { transform: scale(1.03); }
.event-body h3 { margin: 0 0 4px; font-size: 1.2rem; }
.event-body p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }
.event-body .event-cta { margin-top: 10px; color: var(--lavender-700); font-weight: 600; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  max-width: var(--maxw);
  margin: 0 auto;
  align-items: start;
}
.info-card {
  background: var(--white);
  border: 1px solid var(--lavender-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 34px;
}
.info-item { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--lavender-100); }
.info-item:last-child { border-bottom: none; }
.info-item .ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  background: var(--lavender-100); display: grid; place-items: center; font-size: 1.3rem;
}
.info-item h3 { margin: 0 0 2px; font-family: 'Montserrat', sans-serif; font-size: 1.05rem; }
.info-item p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .event-card { flex-direction: row; }
}

@media (max-width: 600px) {
  .marquee-item { width: 320px; height: 240px; }
}

/* ---------- Accessibility helpers ---------- */

/* Visually hidden, but available to screen readers (e.g. the homepage <h1>). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first tab stop, lets keyboard users jump past the nav. */
.skip-link {
  position: absolute;
  left: -999px; top: 0;
  z-index: 100;
  background: var(--lavender-700);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Consistent, visible focus ring for keyboard users. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--lavender-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Footer intro paragraph (was an inline style). */
.footer-about { max-width: 320px; color: var(--on-dark-4); margin: 0; }

/* ---------- Active page indicator ---------- */
.nav-menu a.active {
  background: var(--lavender-100);
  color: var(--lavender-700);
}
.footer-links a.active { text-decoration: underline; }

/* ---------- Layout utilities (replace common inline styles) ---------- */
.pt-0  { padding-top: 0 !important; }
.pb-0  { padding-bottom: 0 !important; }
.pt-sm { padding-top: 24px !important; }
.measure { max-width: 760px; margin: 0 auto; }

/* ---------- Reduced motion ----------
   Several looping animations (the two marquees, the bobbing scroll cue, the
   floating portrait) can be uncomfortable for visitors with motion sensitivity,
   who are squarely part of TAL's audience. Respect their system preference. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tagline-track,
  .marquee-track,
  .scroll-cue,
  .about-portrait { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}