/* =============================================
   THE LOFT 419 · Main Stylesheet
   Vanilla CSS — no build step required
   ============================================= */

/* ─── 1. Custom Properties ─── */
:root {
  /* Brand Colors */
  --teal:         #0F5870;
  --teal-dark:    #0a3d4f;
  --green:        #4E8542;
  --purple:       #6A1D59;
  --rose:         #A83248;
  --rose-dark:    #8e2a3e;
  --almond:       #E88F4A;
  --almond-text:  #B5691E;
  --charcoal:     #2E2E2E;

  /* Neutrals */
  --bg:           #EBE5DC;
  --bg-alt:       #E0D9CF;
  --bg-card:      #F0EBE3;
  --text-muted:   #6b6b6b;
  --text-placeholder: #c8c8c8;

  /* White opacity tokens */
  --white-80: rgba(255,255,255,0.80);
  --white-75: rgba(255,255,255,0.75);
  --white-50: rgba(255,255,255,0.50);

  /* Typography */
  --font-display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* Layout */
  --max-w:    1200px;
  --pad-x:    2rem;
  --nav-h:    72px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  /* Transition */
  --ease: 200ms ease;
}

/* ─── 2. Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* ─── 3. Typography ─── */
h1, h2, h3, h4, h5 { font-family: var(--font-body); font-weight: 700; line-height: 1.25; color: var(--charcoal); }
p { line-height: 1.65; }

/* ─── 4. Layout ─── */
.container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }

.section { padding-block: var(--sp-20); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--teal); color: #fff; }
.section--dark h2, .section--dark h3, .section--dark p { color: #fff; }
.section--charcoal { background: var(--charcoal); color: #fff; }
.section--charcoal h2, .section--charcoal h3, .section--charcoal p { color: #fff; }
.section--purple { background: var(--purple); color: #fff; }
.section--purple h2, .section--purple h3, .section--purple p { color: #fff; }

.section-eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: var(--sp-3);
}
.section--dark .section-eyebrow { color: var(--almond); }
.section--charcoal .section-eyebrow { color: var(--almond); }
.section--charcoal .section-lead { color: rgba(255,255,255,0.7); }
.section--charcoal .body-lg { color: rgba(255,255,255,0.7); }
.section--purple .section-eyebrow { color: var(--almond); }
.section--purple .section-lead { color: rgba(255,255,255,0.7); }
.section--purple .body-lg { color: rgba(255,255,255,0.7); }

/* Components on charcoal / purple — dark semi-transparent treatment */
.section--charcoal .membership-card,
.section--purple .membership-card {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
}
.section--charcoal .mc-label,
.section--purple .mc-label { color: var(--almond); }
.section--charcoal .mc-name,
.section--charcoal .mc-price-amount,
.section--purple .mc-name,
.section--purple .mc-price-amount { color: #fff; }
.section--charcoal .mc-price-period,
.section--charcoal .mc-tagline,
.section--purple .mc-price-period,
.section--purple .mc-tagline { color: rgba(255,255,255,0.7); }
.section--charcoal .mc-features li,
.section--purple .mc-features li { color: #fff; border-color: rgba(255,255,255,0.15); }
.section--charcoal .mc-features li i,
.section--purple .mc-features li i { color: var(--almond); }
.section--charcoal .membership-path-note,
.section--purple .membership-path-note { color: rgba(255,255,255,0.5); }

/* Exception: Corporate standard card stays light on purple */
#corporate .membership-card:not(.mc-featured) {
  background: var(--bg-card);
  border-color: rgba(0,0,0,0.08);
}
#corporate .membership-card:not(.mc-featured) .mc-label { color: var(--teal); }
#corporate .membership-card:not(.mc-featured) .mc-name,
#corporate .membership-card:not(.mc-featured) .mc-price-amount { color: var(--charcoal); }
#corporate .membership-card:not(.mc-featured) .mc-price-period,
#corporate .membership-card:not(.mc-featured) .mc-tagline { color: var(--text-muted); }
#corporate .membership-card:not(.mc-featured) .mc-features li { color: var(--charcoal); border-color: var(--bg-alt); }
#corporate .membership-card:not(.mc-featured) .mc-features li i { color: var(--green); }
#corporate .membership-card:not(.mc-featured) .btn-secondary {
  color: var(--teal);
  border-color: var(--teal);
  background: transparent;
}
#corporate .membership-card:not(.mc-featured) .btn-secondary:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* Feature-item cards on dark backgrounds */
.section--charcoal .feature-item--card,
.section--purple .feature-item--card {
  background: rgba(255,255,255,0.07);
  box-shadow: none;
}
.section--charcoal .feature-text,
.section--purple .feature-text { color: rgba(255,255,255,0.7); }
.section--charcoal .feature-icon--teal,
.section--purple .feature-icon--teal { background: var(--teal); color: #fff; }
.section--charcoal .feature-icon--green,
.section--purple .feature-icon--green { background: var(--green); color: #fff; }
.section--charcoal .feature-icon--rose,
.section--purple .feature-icon--rose { background: var(--rose); color: #fff; }

/* Amenity items on dark backgrounds */
.section--charcoal .amenity-item,
.section--purple .amenity-item {
  background: rgba(255,255,255,0.07);
  box-shadow: none;
}
.section--charcoal .amenity-item:hover,
.section--purple .amenity-item:hover { box-shadow: none; }
.section--charcoal .amenity-icon { background: rgba(255,255,255,0.15); color: #fff; }
/* Row 1: teal, almond, rose, green — Row 2: green, rose, almond, teal */
.section--purple .amenity-item:nth-child(1) .amenity-icon { background: var(--teal); color: #fff; }
.section--purple .amenity-item:nth-child(2) .amenity-icon { background: var(--almond); color: var(--charcoal); }
.section--purple .amenity-item:nth-child(3) .amenity-icon { background: var(--rose); color: #fff; }
.section--purple .amenity-item:nth-child(4) .amenity-icon { background: var(--green); color: #fff; }
.section--purple .amenity-item:nth-child(5) .amenity-icon { background: var(--green); color: #fff; }
.section--purple .amenity-item:nth-child(6) .amenity-icon { background: var(--rose); color: #fff; }
.section--purple .amenity-item:nth-child(7) .amenity-icon { background: var(--almond); color: var(--charcoal); }
.section--purple .amenity-item:nth-child(8) .amenity-icon { background: var(--teal); color: #fff; }
.section--charcoal .amenity-label,
.section--purple .amenity-label { color: #fff; }

/* Engage cards on dark backgrounds */
.section--charcoal .engage-card,
.section--purple .engage-card {
  background: rgba(255,255,255,0.07);
  border-top-color: var(--almond);
  box-shadow: none;
}
.section--charcoal .engage-card-icon,
.section--purple .engage-card-icon { background: rgba(255,255,255,0.15); }
.section--charcoal .engage-card-title,
.section--purple .engage-card-title { color: #fff; }
.section--charcoal .engage-card-text,
.section--purple .engage-card-text { color: rgba(255,255,255,0.7); }

/* Buttons on dark backgrounds */
.section--charcoal .btn-secondary,
.section--purple .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.07); }
.section--charcoal .btn-secondary:hover,
.section--purple .btn-secondary:hover { background: rgba(255,255,255,0.2); border-color: #fff; }

.section--charcoal .check-list li i,
.section--purple .check-list li i { color: var(--almond); }

.section-title { font-size: clamp(1.75rem, 3vw, 2.375rem); font-weight: 700; margin-bottom: var(--sp-4); }

.section-lead {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: var(--sp-12);
  line-height: 1.65;
}
.section--dark .section-lead { color: var(--white-75); }

.section-header { max-width: 720px; margin-bottom: var(--sp-12); }
.section-header.centered { margin-inline: auto; text-align: center; }
.section-header.centered .section-lead { margin-inline: auto; }
.section-header--mb10 { margin-bottom: var(--sp-10); }

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }

/* ─── 5. Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.75rem;
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 700;
  transition: background var(--ease), color var(--ease), transform var(--ease), border-color var(--ease);
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--rose); color: #fff; }
.btn-primary:hover { background: var(--rose-dark); }

.btn-secondary { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-secondary:hover { background: var(--teal); color: #fff; }

.btn-ghost-white { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-ghost-white:hover { background: rgba(255,255,255,0.22); border-color: #fff; }

.btn-lg { padding: 0.9rem 2.25rem; font-size: 1.125rem; }
.btn-group { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }

/* ─── 6. Header & Navigation ─── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  background: rgba(15, 88, 112, 0.75);
  transition: background var(--ease), box-shadow var(--ease);
}
.site-header.scrolled { background: var(--bg-card); box-shadow: var(--shadow-sm); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.site-logo { display: inline-flex; align-items: center; flex-shrink: 0; height: 36px; transition: opacity var(--ease); }
.site-logo:hover { opacity: 0.8; }
.site-logo-img { height: 100%; width: auto; display: block; }
.site-logo-img--dark { display: none; }
.site-header.scrolled .site-logo-img--light { display: none; }
.site-header.scrolled .site-logo-img--dark { display: block; }

.nav-links { display: flex; align-items: center; gap: var(--sp-8); }
.nav-links > li > a { font-size: 1.0625rem; font-weight: 700; color: rgba(255,255,255,0.9); transition: color var(--ease); }
.nav-links > li > a:hover { color: #fff; }
.nav-links > li > a.active { color: var(--almond); }

.site-header.scrolled .nav-links > li > a { color: var(--charcoal); }
.site-header.scrolled .nav-links > li > a:hover { color: var(--teal); }
.site-header.scrolled .nav-links > li > a.active { color: var(--teal); font-weight: 700; }

.nav-links .btn-primary { color: #fff; padding: 0.5rem 1.25rem; }
.nav-links .btn-primary:hover { color: #fff; }
.site-header.scrolled .nav-links .btn-primary,
.site-header.scrolled .nav-links .btn-primary:hover { color: #fff; }
.nav-links .btn-nav-outline { background: transparent; color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.4); padding: 0.5rem 1.25rem; }
.nav-links .btn-nav-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.8); color: #fff; }
.site-header.scrolled .nav-links .btn-nav-outline { color: var(--teal); border-color: var(--teal); }
.site-header.scrolled .nav-links .btn-nav-outline:hover { background: var(--teal); color: #fff; }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; color: #fff; transition: color var(--ease); }
.site-header.scrolled .nav-toggle { color: var(--charcoal); }
.nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 250ms ease, opacity 250ms ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── 7. Footer ─── */
.site-footer { background: var(--charcoal); color: rgba(255,255,255,0.65); padding-top: var(--sp-16); }

.footer-body {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-12);
  padding-bottom: var(--sp-12);
}

.footer-brand .site-logo { height: 144px; margin-bottom: var(--sp-4); }

.footer-tagline { font-size: 0.875rem; color: rgba(255,255,255,0.45); margin-bottom: var(--sp-6); line-height: 1.75; }

.footer-social { display: flex; gap: var(--sp-3); }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  transition: background var(--ease), color var(--ease);
}
.footer-social a:hover { background: var(--rose); color: #fff; }

.footer-col { width: max-content; }
.footer-body > .footer-col:nth-of-type(1) { justify-self: center; }
.footer-body > .footer-col--visit { justify-self: end; margin-right: var(--sp-8); }
.footer-col h4 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: var(--sp-4); }
.footer-col li { margin-bottom: var(--sp-2); }
.footer-col a { font-size: 0.875rem; color: var(--white-50); transition: color var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-col p { font-size: 0.875rem; color: rgba(255,255,255,0.5); line-height: 1.8; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-block: var(--sp-6); display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; color: rgba(255,255,255,0.3); }
.footer-bottom a { color: var(--almond); transition: color var(--ease); }
.footer-bottom a:hover { color: var(--almond-text); }

/* ─── 8. Hero ─── */
.hero {
  position: relative;
  min-height: clamp(480px, 65vh, 760px);
  display: flex;
  align-items: center;
  background: var(--teal);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; }
.hero-media img.active { opacity: 0.3; }
.hero-media .img-placeholder { position: absolute; inset: 0; border-radius: 0; border: none; background: rgba(0,0,0,0.2); }

.hero-content {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--nav-h) + var(--sp-12));
  padding-bottom: var(--sp-12);
  color: #fff;
  max-width: 740px;
}
.hero-eyebrow { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--almond); margin-bottom: var(--sp-4); }
.hero-title { font-family: var(--font-display); font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 1.0; letter-spacing: 0.02em; color: #fff; margin-bottom: var(--sp-5); }
.hero-subtitle { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 300; color: var(--white-80); margin-bottom: var(--sp-10); max-width: 560px; line-height: 1.65; }

/* ─── 9. Info Bar ─── */
.info-bar { background: var(--teal-dark); padding-block: var(--sp-3); }
.info-bar-inner { display: flex; align-items: center; justify-content: center; gap: var(--sp-8); flex-wrap: wrap; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }
.info-bar-item { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.875rem; color: var(--white-75); }
.info-bar-item i { color: var(--almond); font-size: 0.875rem; }

/* ─── 10. Page Hero (inner pages) ─── */
.page-hero { background: var(--teal); padding-top: calc(var(--nav-h) + var(--sp-16)); padding-bottom: var(--sp-16); }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin-bottom: var(--sp-4); letter-spacing: 0.02em; }
.page-hero p { font-size: 1.125rem; font-weight: 300; color: var(--white-80); max-width: 560px; line-height: 1.65; }

/* ─── 11. Amenity Grid ─── */
.amenity-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
.amenity-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); background: var(--bg-card); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform var(--ease), box-shadow var(--ease); }
.amenity-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.amenity-icon { width: 48px; height: 48px; border-radius: var(--r-md); background: rgba(15,88,112,0.09); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.amenity-label { font-size: 0.875rem; font-weight: 600; color: var(--charcoal); line-height: 1.3; }

/* ─── 12. Feature Items (Why section) ─── */
.feature-item { display: flex; flex-direction: column; gap: var(--sp-4); }
.feature-icon { width: 56px; height: 56px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.feature-icon--teal   { background: rgba(15,88,112,0.1);  color: var(--teal); }
.feature-icon--green  { background: rgba(78,133,66,0.1);  color: var(--green); }
.feature-icon--purple { background: rgba(106,29,89,0.1);  color: var(--purple); }
.feature-icon--rose   { background: rgba(168,50,72,0.1);  color: var(--rose); }
.feature-title { font-size: 1.25rem; font-weight: 700; }
.feature-text { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.65; }

/* ─── 13. Spaces Preview ─── */
.spaces-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
.spaces-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.spaces-photo { aspect-ratio: 1/1; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-alt); }
.spaces-photo img { width: 100%; height: 100%; object-fit: cover; }
.spaces-features { display: flex; flex-direction: column; gap: var(--sp-5); margin-bottom: var(--sp-8); }
.spaces-feature { display: flex; align-items: flex-start; gap: var(--sp-4); }
.spaces-feature-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.875rem; }
.spaces-feature-text h4 { font-size: 1rem; font-weight: 700; margin-bottom: var(--sp-1); color: var(--charcoal); }
.spaces-feature-text p { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.6; }

/* ─── 14. Membership Full-Width ─── */
.membership-full { background: var(--charcoal); padding-top: var(--sp-20); }
.membership-full .section-eyebrow { color: var(--almond); }
.membership-full h2 { color: #fff; }
.membership-full .section-lead { color: rgba(255,255,255,0.7); }
.membership-header { text-align: center; margin-bottom: var(--sp-12); }
.membership-header .section-lead { margin-inline: auto; }

.membership-cards { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.membership-card { background: var(--bg-card); border-radius: 0; padding: var(--sp-12) var(--sp-8); display: flex; flex-direction: column; border-right: 1px solid rgba(0,0,0,0.08); transition: box-shadow var(--ease), transform var(--ease); }
.membership-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); position: relative; z-index: 1; }
.membership-card:last-child { border-right: none; }
.membership-card.mc-featured { background: var(--teal); }
.membership-card.mc-featured .mc-label { color: var(--almond); }
.membership-card.mc-featured .mc-name,
.membership-card.mc-featured .mc-price-amount,
.membership-card.mc-featured .mc-price-period,
.membership-card.mc-featured .mc-tagline { color: #fff; }
.membership-card.mc-featured .mc-features li { color: #fff; border-color: rgba(255,255,255,0.15); }
.membership-card.mc-featured .mc-features li i { color: var(--almond); }

.mc-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin-bottom: var(--sp-4); display: block; }
.mc-name { font-size: 1.625rem; font-weight: 700; margin-bottom: var(--sp-5); color: var(--charcoal); }
.mc-price { display: flex; align-items: flex-end; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.mc-price-amount { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--charcoal); }
.mc-price-period { font-size: 0.9375rem; color: var(--text-muted); padding-bottom: 0.4rem; }
.mc-price-text { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--charcoal); }
.membership-card.mc-featured .mc-price-text { color: #fff; }
.mc-tagline { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: var(--sp-6); line-height: 1.55; }
.mc-features { flex: 1; margin-bottom: var(--sp-8); }
.mc-features li { font-size: 0.9375rem; padding-block: var(--sp-3); border-bottom: 1px solid var(--bg-alt); display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--charcoal); }
.mc-features li i { color: var(--green); font-size: 0.8125rem; margin-top: 4px; flex-shrink: 0; }

/* ─── 15. Raise the Roof ─── */
.raise-roof { background: var(--purple); padding-block: var(--sp-20); }
.raise-roof h2, .raise-roof p { color: #fff; }
.raise-roof .section-eyebrow { color: var(--almond); }
.raise-roof .section-lead { color: var(--white-75); }

.tile-option { background: rgba(255,255,255,0.1); border-radius: var(--r-lg); padding: var(--sp-8); text-align: center; border: 1px solid rgba(255,255,255,0.15); transition: background var(--ease), transform var(--ease); }
.tile-option:hover { background: rgba(255,255,255,0.18); transform: translateY(-3px); }
.tile-price { font-family: var(--font-display); font-size: 2.5rem; color: var(--almond); margin-bottom: var(--sp-2); }
.tile-name { font-size: 1.125rem; font-weight: 700; color: #fff; margin-bottom: var(--sp-3); }
.tile-desc { font-size: 0.875rem; color: rgba(255,255,255,0.65); }

/* ─── 16. Location & Parking ─── */
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: stretch; }
.map-embed { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); min-height: 420px; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.parking-options { display: flex; flex-direction: column; gap: var(--sp-6); }
.parking-option { padding-bottom: var(--sp-6); border-bottom: 1px solid var(--bg-alt); }
.parking-option:last-child { border-bottom: none; padding-bottom: 0; }
.parking-option h4 { font-size: 1rem; font-weight: 700; margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.parking-option h4 i { color: var(--teal); }
.parking-option p, .parking-option li { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.65; }
.parking-option ul { padding-left: var(--sp-4); list-style: disc; }
.parking-option li { margin-bottom: var(--sp-1); }
.parking-address { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: var(--sp-2); }

/* ─── 17. Newsletter ─── */
.newsletter-section { background: var(--teal); padding-block: var(--sp-20); text-align: center; }
.newsletter-section .section-eyebrow { color: var(--almond); }
.newsletter-section h2, .newsletter-section p { color: #fff; }
.newsletter-section .section-lead { color: var(--white-75); margin-bottom: var(--sp-8); }

/* ─── 18. Rooms ─── */
.room-card { background: var(--bg-card); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--ease), transform var(--ease); }
.room-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.room-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); }
.room-card-img img { width: 100%; height: 100%; object-fit: cover; }
.room-card-body { padding: var(--sp-6); }
.room-card-type { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin-bottom: var(--sp-2); }
.room-card-title { font-size: 1.375rem; font-weight: 700; margin-bottom: var(--sp-3); }
.room-card-desc { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: var(--sp-4); line-height: 1.6; }
.room-card-specs { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.room-spec { font-size: 0.875rem; color: var(--charcoal); display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.room-spec i { color: var(--teal); }
.room-card-amenities { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.amenity-tag { font-size: 0.8125rem; background: var(--bg-alt); color: var(--charcoal); padding: 0.2rem 0.625rem; border-radius: 20px; }

/* ─── 19. Placeholder ─── */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  color: #b0b0b0;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  padding: var(--sp-8);
  border: 2px dashed rgba(0,0,0,0.1);
  border-radius: var(--r-lg);
  width: 100%;
  height: 100%;
}
/* ─── 20. Community / Portal ─── */
.portal-cta { background: var(--teal); border-radius: var(--r-xl); padding: var(--sp-12); color: #fff; text-align: center; box-shadow: var(--shadow-md); }
.portal-cta h3 { color: #fff; font-size: 1.75rem; margin-bottom: var(--sp-4); }
.portal-cta p { color: var(--white-80); margin-bottom: var(--sp-8); font-size: 1.0625rem; }

/* ─── 21. About ─── */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
.about-split.reverse .about-text { order: 2; }
.about-split.reverse .about-media { order: 1; }
.about-media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; background: var(--bg-alt); }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.team-card { background: var(--bg-card); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); text-align: center; transition: box-shadow var(--ease), transform var(--ease); }
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.team-card-img { aspect-ratio: 1/1; background: var(--bg-alt); overflow: hidden; }
.team-card-img img { width: 100%; height: 100%; object-fit: cover; }
.team-card-body { padding: var(--sp-6); }
.team-card-name { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--sp-1); }
.team-card-role { font-size: 0.875rem; color: var(--teal); font-weight: 600; margin-bottom: var(--sp-3); }
.team-card-bio { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.65; }

/* ─── 22. Responsive ─── */
@media (max-width: 1024px) {
  :root { --pad-x: 1.5rem; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-body { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .location-grid { grid-template-columns: 1fr; }
  .about-split { grid-template-columns: 1fr; }
  .about-split.reverse .about-text,
  .about-split.reverse .about-media { order: unset; }
  .membership-cards { grid-template-columns: repeat(2, 1fr); }
  .membership-card { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08); }
  .membership-card.mc-featured { border-bottom-color: rgba(255,255,255,0.15); }
  .spaces-split { gap: var(--sp-10); }
}

@media (max-width: 768px) {
  :root { --sp-20: 3.5rem; --pad-x: 1.25rem; }

  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0; bottom: 0;
    background: var(--bg-card);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-8) var(--pad-x);
    gap: var(--sp-5);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open { display: flex; }
  .nav-links > li > a { color: var(--charcoal); font-size: 1.25rem; }
  .nav-links > li > a:hover { color: var(--teal); }
  .nav-links .btn-primary { font-size: 1rem; padding: 0.75rem 1.5rem; }

  .nav-toggle { display: flex; }
  .site-header { background: var(--teal); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-body { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-bottom { flex-direction: column; gap: var(--sp-3); text-align: center; }
  .info-bar-inner { gap: var(--sp-4); }

  .membership-cards { grid-template-columns: 1fr; }
  .membership-card { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08); padding: var(--sp-8); }

  .spaces-split { grid-template-columns: 1fr; }
  .spaces-photos { order: -1; }

  .amenity-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  :root { --pad-x: 1rem; }
  .amenity-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── 23. Nav CTA — Active Page (outline state) ─── */
.nav-links .btn-primary.active {
  border-color: var(--almond);
  color: #fff;
}
.site-header.scrolled .nav-links .btn-primary.active {
  border-color: var(--teal);
  color: #fff;
}

/* ─── 24. Membership Cards — Centered layouts for < 4 cards ─── */
.membership-cards--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 75%;
  margin-inline: auto;
}
.membership-cards--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 50%;
  margin-inline: auto;
}
.membership-cards--1 {
  grid-template-columns: 1fr;
  max-width: 25%;
  margin-inline: auto;
}
@media (max-width: 1024px) {
  .membership-cards--3 { max-width: 100%; grid-template-columns: repeat(3, 1fr); }
  .membership-cards--2 { max-width: 75%; }
  .membership-cards--1 { max-width: 50%; }
}
@media (max-width: 768px) {
  .membership-cards--3,
  .membership-cards--2 { max-width: 100%; grid-template-columns: 1fr; }
  .membership-cards--1 { max-width: 100%; }
}

/* ─── 25. Membership Path Cards ─── */
.path-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-top: var(--sp-12); }
.path-card { background: rgba(255,255,255,0.07); border-radius: var(--r-xl); padding: var(--sp-10) var(--sp-8); text-align: center; border: 1px solid rgba(255,255,255,0.12); transition: background var(--ease), transform var(--ease); display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.path-card:hover { background: rgba(255,255,255,0.13); transform: translateY(-3px); }
.path-card-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.375rem; margin-bottom: var(--sp-6); flex-shrink: 0; }
.path-card-icon--green { background: var(--green); }
.path-card-title { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: var(--sp-3); }
.path-card-desc { font-size: 0.9375rem; color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: var(--sp-8); flex: 1; }
.path-card-cta { font-size: 0.875rem; font-weight: 700; color: var(--almond); letter-spacing: 0.04em; display: flex; align-items: center; gap: var(--sp-2); }

/* Path cards on light backgrounds */
.section--alt .path-card { background: var(--bg-card); border-color: rgba(0,0,0,0.08); box-shadow: var(--shadow-sm); }
.section--alt .path-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.section--alt .path-card-title { color: var(--charcoal); }
.section--alt .path-card-desc { color: var(--text-muted); }
.section--alt .path-card-cta { color: var(--teal); }

/* ─── 26. Engage Cards ─── */
.engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.engage-card { background: var(--bg-card); border-radius: var(--r-xl); padding: var(--sp-8); box-shadow: var(--shadow-sm); border-top: 3px solid var(--teal); }
.engage-card-icon { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; margin-bottom: var(--sp-5); }
.engage-card-title { font-size: 1.0625rem; font-weight: 700; margin-bottom: var(--sp-3); }
.engage-card-text { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.65; }

@media (max-width: 1024px) {
  .engage-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .path-cards { grid-template-columns: 1fr; }
  .engage-grid { grid-template-columns: 1fr; }
}

/* ─── 27. Centered Container ─── */
.container--center { text-align: center; }

/* ─── 28. Section Title Variant ─── */
.section-title--mb4 { margin-bottom: var(--sp-4); }

/* ─── 29. Section Lead Variants ─── */
.section-lead--center { margin-inline: auto; }
.section-lead--cta { margin-inline: auto; margin-bottom: var(--sp-8); }

/* ─── 30. Button Group Centered ─── */
.btn-group--center { justify-content: center; }

/* ─── 31. Page Hero Eyebrow ─── */
.page-hero .section-eyebrow { color: var(--almond); }

/* ─── 32. Body Large Text ─── */
.body-lg {
  font-size: 1.0625rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.body-lg--mb4  { margin-bottom: var(--sp-4); }
.body-lg--mb6  { margin-bottom: var(--sp-6); }
.body-lg--mb8  { margin-bottom: var(--sp-8); }

/* ─── 33. Check List ─── */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.check-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.9375rem;
}
.check-list li i { color: var(--green); }

/* ─── 34. Feature Item Card Variant ─── */
.feature-item--card {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--ease), transform var(--ease);
}
.feature-item--card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.section--charcoal .feature-item--card:hover,
.section--purple .feature-item--card:hover { box-shadow: none; transform: translateY(-3px); }

/* ─── 35. Two-Column Split ─── */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
@media (max-width: 768px) {
  .split-2 { grid-template-columns: 1fr; }
}

/* ─── 36. About Media Images ─── */
.about-media img { width: 100%; height: 100%; object-fit: cover; }

/* ─── 37. Image — Cover with Rounded Corners ─── */
.img-cover-rounded {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r-xl);
}

/* ─── 38. Nexudus Calendar Embed ─── */
.nexudus-calendar-wrap {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0,0,0,0.07);
  background: var(--bg-card);
}
.nexudus-calendar-frame {
  display: block;
  border: 0;
  width: 100%;
  /* tall enough for a 6-row calendar month + Nexudus header; JS will expand further if needed */
  height: 950px;
}

/* ─── 39. Amenity Item — Large Padding ─── */
.amenity-item--lg { padding: var(--sp-8) var(--sp-6); }

/* ─── 40. Portal CTA Icon & Quick Links ─── */
.portal-cta-icon { font-size: 3rem; margin-bottom: var(--sp-4); opacity: 0.75; }
.portal-quick-links { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }

/* ─── 41. Footer Visit Column Links ─── */
.footer-col--visit a { color: var(--white-75); }

/* ─── 42. Section CTA Action ─── */
.section-cta-action { text-align: center; margin-top: var(--sp-10); }

/* ─── 43. Section Padding Override ─── */
.section--pb0 { padding-bottom: 0; }

/* ─── 44. Grid-3 with Bottom Margin ─── */
.grid-3--mb16 { margin-bottom: var(--sp-16); }

/* ─── 45. Path Cards — 3 Columns ─── */
.path-cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
  .path-cards--3 { grid-template-columns: 1fr; }
}

/* ─── 46. Path Card Icon — Purple ─── */
.path-card-icon--purple { background: var(--purple); }

/* ─── 47. Feature Icon — Corporate (solid circle) ─── */
.feature-icon--corporate {
  background: var(--purple);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
}

/* ─── 48. Constrained Grid-2 Variants ─── */
.grid-2--tiles { max-width: 640px; margin-inline: auto; }
.team-solo { max-width: 480px; margin-inline: auto; }

/* ─── 49. Spaces Section Title ─── */
.spaces-section-title { margin-bottom: var(--sp-8); }

/* ─── 50. Membership Path Note ─── */
.membership-path-note { text-align: center; margin-top: var(--sp-10); margin-bottom: var(--sp-10); font-size: 0.9375rem; color: var(--text-muted); }
.membership-full .membership-path-note { color: var(--white-50); }
/* In solid-bg sections with padding-bottom:0, the note's bottom margin collapses out
   of the section, exposing body color as a light stripe. Swap margin for padding so
   the spacing stays inside the section background. */
.section--charcoal.section--pb0 > .container > .membership-path-note:last-child,
.section--purple.section--pb0 > .container > .membership-path-note:last-child { margin-bottom: 0; padding-bottom: var(--sp-10); }

/* ─── 51. Inbound Company Pathway ─── */
.inbound-pathway { max-width: 760px; margin: var(--sp-4) auto 0; padding: var(--sp-8) var(--sp-6); background: var(--bg-card); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); text-align: center; }
.inbound-pathway-title { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: var(--sp-4); font-weight: 700; }
.inbound-pathway-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); font-size: 1rem; line-height: 1.4; margin-bottom: var(--sp-6); }
.inbound-step { display: inline-block; padding: var(--sp-2) var(--sp-4); background: var(--bg-alt); border-radius: var(--r-md); font-weight: 700; color: var(--charcoal); }
.inbound-arrow { color: var(--teal); font-weight: 700; font-size: 1.125rem; }
.inbound-pathway-foot { font-size: 0.9375rem; color: var(--text-muted); margin: 0; }

/* ─── 52. Parking Heading ─── */
.parking-title { font-size: 1.25rem; margin-bottom: var(--sp-6); }

/* ─── 53. Program Grid ─── */
.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.program-card { background: var(--bg-card); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-3); transition: background var(--ease), box-shadow var(--ease), transform var(--ease); }
.program-card:hover { background: #fff; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.program-card-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; margin-bottom: var(--sp-2); }
.program-card-title { font-size: 1.125rem; font-weight: 700; color: var(--charcoal); margin: 0; }
.program-card-meta { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal); margin: 0; }
.program-card-text { font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
/* Orphan handling: at 3 cols, if the last card is alone on its row (total cards ≡ 1 mod 3), place it in the middle column so it reads as centered. */
.program-grid > .program-card:last-child:nth-child(3n+1) { grid-column: 2; }
@media (max-width: 880px) {
  .program-grid { grid-template-columns: repeat(2, 1fr); }
  /* Reset the desktop orphan rule at 2 cols. */
  .program-grid > .program-card:last-child:nth-child(3n+1) { grid-column: auto; }
  /* At 2 cols, the last card is alone on its row when total cards is odd. Span the row and center at one-column width. */
  .program-grid > .program-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--sp-6)) / 2); }
}
@media (max-width: 560px) {
  .program-grid { grid-template-columns: 1fr; }
  /* Reset tablet orphan rule at 1 col — every card is naturally full-width. */
  .program-grid > .program-card:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
}

/* ─── 54. Weekly Rhythm ─── */
.rhythm-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); }
.rhythm-day { background: var(--bg-card); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-3); text-align: center; }
.rhythm-day-name { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.rhythm-anchor { padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-alt); display: flex; flex-direction: column; gap: 2px; }
.rhythm-anchor-name { font-size: 0.9375rem; font-weight: 700; color: var(--charcoal); line-height: 1.3; }
.rhythm-anchor-time { font-size: 0.75rem; color: var(--teal); font-weight: 700; }
.rhythm-monthly { margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6); background: var(--purple); color: #fff; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; text-align: center; }
.rhythm-monthly-label { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
.rhythm-monthly-name { font-size: 1.125rem; font-weight: 700; }
.rhythm-monthly-time { font-size: 0.9375rem; opacity: 0.85; }
@media (max-width: 880px) {
  .rhythm-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .rhythm-grid { grid-template-columns: 1fr; }
}