/* ============================================================
   WORKSOP WORKSPACE — SITE STYLES
   Brand Guidelines v2.4, May 2026
   White-led. Editorial. Calm. One clay CTA per view.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ---- Variables -------------------------------------------- */
:root {
  --white:     #FFFFFF;
  --linen:     #F5F1EA;
  --oak:       #C9A57B;
  --oak-soft:  #E5D6BE;
  --espresso:  #1A1714;
  --stone:     #5C5C58;
  --sage:      #8E9775;
  --clay:      #C57B57;
  --navy:      #203A5B;
  --charcoal:  #2B2B2B;
  --line:      #ECE8DF;
  --muted:     #8A8680;
  --font:      'Outfit', system-ui, sans-serif;
  --radius:    4px;
  --max-w:     1100px;
  --py:        120px;
  --px:        48px;
  --shadow-sm: 0 2px 8px rgba(26,23,20,0.06);
  --shadow-md: 0 8px 40px rgba(26,23,20,0.10);
}

/* ---- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: var(--font); cursor: pointer; }

/* ---- Base ------------------------------------------------- */
body {
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--white);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ---- Typography ------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font);
  color: var(--espresso);
  letter-spacing: -0.02em;
  font-weight: 600;
}

h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(28px, 4vw, 52px); line-height: 1.1; margin-bottom: 0; }
h3 { font-size: 22px; line-height: 1.3; }
h4 { font-size: 13px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--sage); }

p { margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--clay);
  font-weight: 600;
  margin-bottom: 20px;
}

.lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--stone);
  font-weight: 400;
  max-width: 600px;
}

/* ---- Layout ----------------------------------------------- */
.inner-container,
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
}

.section {
  padding: var(--py) 0;
  border-bottom: 1px solid var(--line);
}

.section:last-of-type { border-bottom: none; }

.section-header {
  margin-bottom: 72px;
}

.section-header h2 { margin-top: 10px; }

/* Colour variants — alias old names for back-compat */
.section-cream,
.section-warm  { background: var(--linen); }
.section-navy  { background: var(--espresso); }
.section-sage  { background: var(--linen); }

/* ---- Page Loader ------------------------------------------ */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--white);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

.loader-ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

.loader-ring-wrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.loader-ring-track { fill: none; stroke: var(--line); stroke-width: 3; }
.loader-ring-fill  {
  fill: none;
  stroke: var(--clay);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  animation: loaderSpin 1.4s linear infinite;
}

.loader-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  object-fit: contain;
}

.loader-msg {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  min-height: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

@keyframes loaderSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- Header ----------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 var(--line);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.logo img { height: 68px; width: auto; display: block; }

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--stone);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--espresso);
  transition: width 0.2s;
}

.nav-links a:hover { color: var(--espresso); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--espresso); font-weight: 600; }
.nav-links a.active::after { width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}

.nav-toggle .bar {
  width: 22px;
  height: 1.5px;
  background: var(--espresso);
  transition: all 0.25s ease;
  display: block;
}

.nav-toggle.active .bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.active .bar:nth-child(2) { opacity: 0; }
.nav-toggle.active .bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- Mobile nav drawer ------------------------------------ */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  top: 80px;
  background: var(--white);
  z-index: 99;
  flex-direction: column;
  padding: 40px 48px;
  gap: 8px;
  border-top: 1px solid var(--line);
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
  font-size: 22px;
  font-weight: 600;
  color: var(--espresso);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.mobile-nav .btn {
  margin-top: 20px;
  width: 100%;
  justify-content: center;
  font-size: 16px;
}

/* ---- Scroll-triggered animations (all pages) -------------- */
.animate-left  { opacity: 0; transform: translateX(-24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.animate-right { opacity: 0; transform: translateX(24px);  transition: opacity 0.7s ease, transform 0.7s ease; }
.animate-scale { opacity: 0; transform: scale(0.96);        transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-fade  { opacity: 0;                                transition: opacity 0.8s ease; }

.animate-left.is-visible,
.animate-right.is-visible,
.animate-scale.is-visible,
.animate-fade.is-visible  { opacity: 1; transform: none; }

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ---- Responsive nav --------------------------------------- */
@media (max-width: 900px) {
  .nav-links { display: none !important; }
  .nav-cta   { display: none !important; }
  .nav-toggle { display: flex; }
}

/* ---- Buttons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 28px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Primary — Clay. One per view. */
.btn              { background: var(--clay); color: var(--white); border-color: var(--clay); }
.btn:hover        { background: #b06b48; border-color: #b06b48; transform: translateY(-1px); color: var(--white); }

/* Dark — Espresso fill */
.btn-dark         { background: var(--espresso); color: var(--white); border-color: var(--espresso); }
.btn-dark:hover   { background: #2e2925; border-color: #2e2925; transform: translateY(-1px); color: var(--white); }

/* Outline — Espresso border, transparent fill */
.btn-outline      { background: transparent; color: var(--espresso); border-color: var(--espresso); }
.btn-outline:hover { background: var(--espresso); color: var(--white); transform: translateY(-1px); }

/* White — on dark backgrounds */
.btn-white        { background: var(--white); color: var(--espresso); border-color: var(--white); }
.btn-white:hover  { background: var(--linen); color: var(--espresso); transform: translateY(-1px); }

/* White outline — on dark backgrounds */
.btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn-outline-white:hover { background: rgba(255,255,255,0.1); color: var(--white); }

/* Sizes */
.btn-sm { padding: 10px 20px; font-size: 13px; }
.btn-lg { padding: 18px 40px; font-size: 17px; }
.btn-full { width: 100%; justify-content: center; }

/* ---- Scroll progress bar ---------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--clay);
  width: 0%;
  z-index: 200;
  pointer-events: none;
  transition: width 0.1s linear;
}

/* ---- Cinematic scroll scene (homepage hero) --------------- */
.scroll-scene {
  position: relative;
  height: 500vh;
}

.scroll-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--espresso);
  z-index: 1;
}

#scroll-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

.scroll-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 72px var(--px);
  background: linear-gradient(
    to top,
    rgba(26,23,20,0.72) 0%,
    rgba(26,23,20,0.30) 45%,
    rgba(26,23,20,0.10) 100%
  );
}

.scroll-text-wrap {
  position: relative;
  height: 130px;
  margin-bottom: 40px;
  max-width: 800px;
}

.scroll-text {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: clamp(32px, 5.5vw, 68px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.06;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
}

.scroll-text.active {
  opacity: 1;
  transform: translateY(0);
}

.scroll-cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.scroll-cta-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cta-phone-note {
  font-size: 13px;
  color: rgba(255,255,255,0.50);
  margin-top: 0;
}

.cta-phone-note a { color: var(--oak); text-decoration: none; }

.scroll-hint {
  position: absolute;
  right: var(--px);
  bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.scroll-hint-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
  writing-mode: vertical-rl;
}

.scroll-bar-track {
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}

.scroll-bar-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--clay);
  height: 0%;
  transition: height 0.12s linear;
}

/* ---- Stats bar -------------------------------------------- */
.stats-bar {
  background: var(--espresso);
  padding: 52px 0;
  border-bottom: none;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat-item {
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.stat-item:last-child { border-right: none; }

.stat-icon { display: none; }

.stat-value {
  font-size: 38px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}

.stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 500;
}

/* ---- Pain section ----------------------------------------- */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.pain-card {
  padding: 40px 40px 40px 0;
  border-right: 1px solid var(--line);
}

.pain-card:last-child { border-right: none; padding-right: 0; }
.pain-card:not(:first-child) { padding-left: 40px; }

.pain-number {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.pain-icon { display: none; }

.pain-card h3 {
  font-size: 20px;
  margin-bottom: 14px;
  font-weight: 600;
}

.pain-card p {
  font-size: 15px;
  color: var(--stone);
  line-height: 1.65;
  margin-bottom: 24px;
}

.pain-resolution {
  font-size: 14px;
  color: var(--sage);
  font-weight: 500;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  line-height: 1.55;
}

/* ---- Quote band ------------------------------------------- */
.quote-band {
  background: var(--linen);
  padding: 100px 0;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.quote-band blockquote {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 500;
  color: var(--espresso);
  letter-spacing: -0.02em;
  line-height: 1.4;
  max-width: 680px;
  margin: 0 auto 20px;
  font-style: normal;
}

.quote-attribution {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sage);
  font-weight: 600;
}

/* ---- Space grid ------------------------------------------- */
.space-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.space-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.3s;
}

.space-card:hover {
  border-color: var(--oak-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.space-img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.space-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.space-card:hover .space-img { transform: scale(1.05); }

.space-body {
  padding: 28px;
}

.space-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 14px;
}

.badge-blue,
.badge-available  { background: rgba(142,151,117,0.12); color: var(--sage); }
.badge-purple,
.badge-coming     { background: rgba(201,165,123,0.15); color: #9a7040; }
.badge-green,
.badge-private    { background: rgba(26,23,20,0.06); color: var(--espresso); }

.space-body h3 {
  font-size: 19px;
  margin-bottom: 10px;
  font-weight: 600;
}

.space-body p {
  font-size: 14px;
  color: var(--stone);
  margin: 0;
  line-height: 1.6;
}

/* ---- Features grid ---------------------------------------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.feature-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.features-grid .feature-card:nth-child(odd)  { padding-right: 48px; border-right: 1px solid var(--line); }
.features-grid .feature-card:nth-child(even) { padding-left: 48px; }
.features-grid .feature-card:nth-last-child(1),
.features-grid .feature-card:nth-last-child(2):nth-child(odd) { border-bottom: none; }

.feature-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(142,151,117,0.10);
  border-radius: var(--radius);
  color: var(--sage);
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-card h4 {
  color: var(--espresso);
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.feature-card p {
  font-size: 14px;
  color: var(--stone);
  margin: 0;
  line-height: 1.6;
}

/* ---- Pricing cards ---------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pricing-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.3s;
  position: relative;
}

.pricing-card:hover {
  border-color: var(--oak-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.pricing-card.featured {
  border-color: var(--espresso);
  border-width: 1.5px;
}

.badge,
.badge-coming,
.badge-blue,
.badge-green,
.badge-purple {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 16px;
}

.badge            { background: rgba(26,23,20,0.06); color: var(--espresso); }
.badge-coming     { background: rgba(201,165,123,0.15); color: #9a7040; }

.pricing-card h3 {
  font-size: 20px;
  margin-bottom: 6px;
  font-weight: 600;
}

.price {
  font-size: 44px;
  font-weight: 700;
  color: var(--espresso);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 20px 0 6px;
}

.price-unit { font-size: 16px; font-weight: 400; color: var(--muted); }

.price-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
  display: block;
}

.price-detail {
  font-size: 14px;
  color: var(--stone);
  line-height: 1.6;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.features-list li {
  font-size: 14px;
  color: var(--charcoal);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.features-list li:last-child { border-bottom: none; }

.check { color: var(--sage); flex-shrink: 0; }

.coming-soon-note {
  font-size: 13px;
  color: var(--muted);
  background: var(--linen);
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  line-height: 1.55;
}

.phase-coming { opacity: 0.8; }

/* ---- Find us ---------------------------------------------- */
.find-us-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.find-us-info h2 { margin-bottom: 32px; }

.find-us-lead {
  font-size: 17px;
  color: var(--stone);
  margin-bottom: 36px;
  line-height: 1.65;
}

.info-item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.info-item:first-of-type { border-top: 1px solid var(--line); }

.info-icon {
  color: var(--sage);
  flex-shrink: 0;
  padding-top: 2px;
}

.info-text strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.info-text p, .info-text a {
  font-size: 15px;
  color: var(--charcoal);
  margin-bottom: 2px;
}

.info-text a { text-decoration: none; transition: color 0.2s; }
.info-text a:hover { color: var(--clay); }

.info-rows {
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.info-row:first-child { border-top: 1px solid var(--line); }

.info-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.info-value {
  color: var(--charcoal);
  text-align: right;
}

.find-us-map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }

.map-embed { aspect-ratio: 1; }
.map-embed iframe { width: 100%; height: 100%; border: none; display: block; }

/* ---- Contact grid ----------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Full-width map sits below the form+info grid on /contact.
   Constrained by the inner-container above it, so it shares the
   site's max-width but stretches the full width of that container. */
.contact-map-full {
  margin-top: 64px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 21 / 9;
  background: var(--linen);
}
.contact-map-full iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
@media (max-width: 860px) {
  .contact-map-full {
    margin-top: 48px;
    aspect-ratio: 4 / 3;
  }
}

/* ---- Community band --------------------------------------- */
.gym-band {
  background: var(--espresso);
  padding: 96px 0;
  border-bottom: none;
}

.gym-band h2 {
  color: var(--white);
  margin-bottom: 20px;
  font-size: clamp(28px, 4vw, 48px);
}

.gym-lead {
  font-size: 17px;
  color: rgba(255,255,255,0.55);
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 56px;
}

.gym-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 48px;
}

.gym-pillar {
  background: rgba(255,255,255,0.03);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gym-pillar-icon { color: var(--sage); }

.gym-pillar span {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}

.gym-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--oak);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}

.gym-link:hover { color: var(--white); }

/* ---- CTA section ------------------------------------------ */
.cta-section {
  background: var(--espresso);
  padding: var(--py) 0;
}

.cta-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--px);
  text-align: center;
}

.cta-section h2 {
  color: var(--white);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 20px;
}

.cta-section p {
  color: rgba(255,255,255,0.55);
  font-size: 17px;
  margin-bottom: 36px;
}

.cta-section .cta-phone-note {
  margin-top: 16px;
  font-size: 14px;
}

/* ---- Page banner (inner pages) ---------------------------- */
.page-banner {
  background: var(--espresso);
  padding: 80px 0 72px;
  background-image: none !important; /* override any legacy inline styles */
}

.page-banner p,
.page-banner .section-subtitle {
  color: rgba(255,255,255,0.55);
  margin-top: 12px;
  max-width: 600px;
}

.page-banner .eyebrow { color: var(--oak); }

.page-banner .section-title { color: var(--white); }

/* section-navy text helpers */
.section-navy h2,
.section-navy h3,
.section-navy .section-title { color: var(--white); }
.section-navy p,
.section-navy .section-subtitle { color: rgba(255,255,255,0.55); }

.page-banner h1 {
  color: var(--white);
  font-size: clamp(28px, 3.6vw, 44px);
  margin-top: 12px;
  letter-spacing: -0.02em;
}

/* Eyebrow kicker on page banners (Worksop Workspace text above h1).
   Already used on /meeting-room and now /blog for visual rhythm. */
.page-banner .hero-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oak);
}

.page-banner .lead,
.page-banner p.lead {
  color: rgba(255,255,255,0.55);
  margin-top: 16px;
  max-width: 560px;
}

.section-title { font-size: clamp(28px, 4vw, 52px); line-height: 1.1; }
.section-subtitle { font-size: 17px; color: var(--stone); margin-top: 12px; max-width: 540px; }

/* ---- Footer ----------------------------------------------- */
footer,
.site-footer {
  background: var(--espresso);
  color: rgba(255,255,255,0.55);
  padding: 72px 0 40px;
  border-top: none;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

.footer-brand img {
  height: 30px;
  filter: brightness(0) invert(1);
  margin-bottom: 20px;
  display: block;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.75;
  max-width: 280px;
  color: rgba(255,255,255,0.45);
}

.footer-col h5 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.30);
  font-weight: 700;
  margin-bottom: 20px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,0.30);
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom a {
  color: rgba(255,255,255,0.30);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-bottom a:hover { color: rgba(255,255,255,0.7); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---- Modal (inner-page pattern: .modal-backdrop > .modal) - */
/* Brand-font lock: forces Outfit on every descendant of any modal,
   including form inputs/selects/labels/buttons that browsers
   otherwise render in system UI fonts. */
.modal-backdrop,
.modal-backdrop *,
.modal-backdrop input,
.modal-backdrop textarea,
.modal-backdrop select,
.modal-backdrop button,
.modal-backdrop label,
.modal-backdrop option,
.modal-backdrop input::placeholder {
  font-family: var(--font), system-ui, -apple-system, sans-serif !important;
}

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,23,20,0.65);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.modal-backdrop.open { display: flex; }

.modal-backdrop .modal {
  background: var(--white);
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  padding: 48px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
}

.modal-backdrop .modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 4px 8px;
  transition: color 0.2s;
}

.modal-backdrop .modal-close:hover { color: var(--espresso); }

.modal-backdrop .modal h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--espresso);
}

.modal-backdrop .modal > p {
  font-size: 15px;
  color: var(--stone);
  margin-bottom: 28px;
  line-height: 1.6;
}

/* ---- Waitlist form fields --------------------------------- */
.form-group { margin-bottom: 18px; }

/* Two-column row for first name + last name. Stacks on narrow screens. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.form-row .form-group,
.form-row > div {
  margin-bottom: 0;
}
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-row > div,
  .form-row .form-group { margin-bottom: 18px; }
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--espresso);
  margin-bottom: 6px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 15px;
  color: var(--charcoal);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--espresso);
  box-shadow: 0 0 0 3px rgba(26,23,20,0.06);
}

.btn-full { width: 100%; justify-content: center; }
.form-submit { width: 100%; margin-top: 8px; }

.form-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 14px;
}

/* Legacy modal (index.html uses .modal as overlay) */
.modal:not(.modal-backdrop .modal) {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,23,20,0.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: var(--white);
  border-radius: var(--radius);
  padding: 48px;
  width: 100%;
  max-width: 560px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 6px;
  transition: color 0.2s;
}

.modal-close:hover { color: var(--espresso); }

.modal-content h2 { font-size: 26px; margin-bottom: 10px; }
.modal-content p  { color: var(--stone); margin-bottom: 24px; font-size: 15px; }

/* ---- Blog grid -------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.3s;
}

.blog-card:hover {
  border-color: var(--oak-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.blog-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.blog-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.blog-card-body { padding: 24px; }

/* Category labels on blog cards — rendered as a tag bubble instead
   of a flat eyebrow line. Matches the brand's pill pattern. Espresso
   text on tinted sage background for readability (sage-on-sage was
   below WCAG-AA contrast). */
.blog-card-cat,
.blog-card-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--espresso);
  background: rgba(142,151,117,0.18);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.blog-card-body h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--espresso);
  line-height: 1.35;
}

.blog-card-body p {
  font-size: 14px;
  color: var(--stone);
  margin: 0;
  line-height: 1.55;
}

/* ---- Blog post page --------------------------------------- */
.blog-post-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 48px 96px;
}

.blog-post-header { margin-bottom: 56px; }

.blog-post-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 16px;
  display: block;
}

/* Individual blog post title — actual class used is .blog-post-title
   (not .blog-post-header h1, which targeted nothing). Caps the title
   at 32px so it doesn't dominate the page. */
.blog-post-header h1,
.blog-post-title,
.blog-post-wrap h1,
article.blog-post h1 {
  font-size: clamp(24px, 2.8vw, 32px) !important;
  line-height: 1.25 !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  color: var(--espresso) !important;
}

/* Blog card titles (grid on /blog and homepage journal teaser) */
.blog-card-title,
.blog-card h3 {
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.blog-post-meta {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.blog-post-featured-img {
  width: 100%;
  margin: 0 0 48px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16/9;
}

.blog-post-featured-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.blog-post-body { font-size: 17px; line-height: 1.75; color: var(--charcoal); }
.blog-post-body h2 { font-size: 22px; margin: 44px 0 14px; line-height: 1.25; letter-spacing: -0.01em; }
.blog-post-body h3 { font-size: 18px; margin: 32px 0 10px; letter-spacing: -0.005em; }
.blog-post-body p  { margin-bottom: 20px; }
.blog-post-body ul, .blog-post-body ol { padding-left: 24px; margin-bottom: 20px; }
.blog-post-body li { margin-bottom: 8px; }
.blog-post-body strong { color: var(--espresso); font-weight: 600; }
.blog-post-body a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }

.blog-post-callout {
  background: rgba(142,151,117,0.08);
  border-left: 3px solid var(--sage);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin: 32px 0;
}

.blog-post-callout p { margin: 0; font-size: 15px; color: var(--charcoal); }

.blog-breadcrumb {
  font-size: 13px;
  color: var(--muted);
  padding: 20px 48px 0;
  max-width: 720px;
  margin: 0 auto;
}

.blog-breadcrumb a { color: var(--muted); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--espresso); }
.blog-breadcrumb span { margin: 0 6px; }

.blog-cta-box {
  background: var(--espresso);
  border-radius: var(--radius);
  padding: 40px 36px;
  text-align: center;
  margin: 48px 0 0;
}

.blog-cta-box h3 { color: var(--white); font-size: 22px; margin-bottom: 10px; font-weight: 700; }
.blog-cta-box p  { color: rgba(255,255,255,0.55); margin-bottom: 24px; font-size: 15px; }

/* ---- Animations ------------------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.97) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-in {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-play-state: paused;
}

.d1 { animation-delay: 0.10s; }
.d2 { animation-delay: 0.22s; }
.d3 { animation-delay: 0.34s; }
.d4 { animation-delay: 0.46s; }

.animate-left,
.animate-right,
.animate-scale,
.animate-fade {
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-left  { opacity: 0; transform: translateX(-48px); }
.animate-right { opacity: 0; transform: translateX(48px); }
.animate-scale { opacity: 0; transform: scale(0.93) translateY(16px); }
.animate-fade  { opacity: 0; }

.animate-left.is-visible,
.animate-right.is-visible,
.animate-scale.is-visible,
.animate-fade.is-visible  { opacity: 1; transform: none; }

.animate-left.d1, .animate-right.d1, .animate-scale.d1 { transition-delay: 0.08s; }
.animate-left.d2, .animate-right.d2, .animate-scale.d2 { transition-delay: 0.18s; }
.animate-left.d3, .animate-right.d3, .animate-scale.d3 { transition-delay: 0.28s; }

/* Magnetic button */
.btn-magnetic { transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; }

/* ---- Misc utilities --------------------------------------- */
.text-center { text-align: center; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }
.mt-96 { margin-top: 96px; }

.section-link,
.space-link,
.gym-link-alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--espresso);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: gap 0.2s, color 0.2s;
}

.section-link:hover,
.space-link:hover { gap: 10px; color: var(--clay); }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 900px) {
  :root { --px: 32px; --py: 80px; }
  .header-inner { padding: 0 var(--px); }
  .space-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; }
  .gym-pillars { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .find-us-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  :root { --px: 24px; --py: 64px; }

  .nav-links {
    display: none;
    position: fixed;
    top: 80px; left: 0; right: 0; bottom: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 28px;
    gap: 0;
    z-index: 99;
    border-top: 1px solid var(--line);
    overflow-y: auto;
  }

  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 18px 0;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a::after { display: none; }

  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .nav-cta.header-cta { display: none; }

  .pain-grid { grid-template-columns: 1fr; }
  .pain-card { padding: 32px 0; border-right: none; border-bottom: 1px solid var(--line); }
  .pain-card:not(:first-child) { padding-left: 0; }
  .pain-card:last-child { border-bottom: none; }

  .features-grid { grid-template-columns: 1fr; }
  .feature-card { padding: 24px 0; }
  .features-grid .feature-card:nth-child(odd) { padding-right: 0; border-right: none; }
  .features-grid .feature-card:nth-child(even) { padding-left: 0; }

  .space-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .stat-item { border-right: none; }

  .scroll-overlay { padding: 40px var(--px) 48px; }
  .scroll-text-wrap { height: 100px; }
  .scroll-hint { display: none; }

  .gym-pillars { grid-template-columns: 1fr 1fr; }

  .blog-post-wrap { padding: 48px 24px 72px; }
  .blog-breadcrumb { padding: 16px 24px 0; }

  .modal-content { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .scroll-cta-buttons { flex-direction: column; align-items: flex-start; }
  .pricing-grid { max-width: none; }
  .gym-pillars { grid-template-columns: 1fr; }
}

/* ---- Sponsors / founding partners ------------------------- */
/* Homepage and dedicated page use this big presentation. */
.sponsors-section {
  background: var(--linen);
  padding: 96px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sponsors-section .inner-container { text-align: center; }
.sponsors-section h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  margin: 12px 0 14px;
  letter-spacing: -0.02em;
}
.sponsors-section .sponsors-lead {
  color: var(--stone);
  font-size: 17px;
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto 48px;
}

.sponsors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 880px;
  margin: 0 auto;
  align-items: stretch;
}

.sponsor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 32px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--line);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
  color: var(--charcoal);
}

.sponsor-card:hover {
  border-color: var(--oak-soft);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.sponsor-card-logo {
  width: 100%;
  max-width: 220px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.sponsor-card-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sponsor-card-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 8px;
}
.sponsor-card-name {
  font-size: 19px;
  font-weight: 600;
  color: var(--espresso);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.sponsor-card-blurb {
  font-size: 15px;
  color: var(--stone);
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 320px;
  text-align: center;
}
.sponsor-card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--clay);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.sponsor-card-link:hover { color: #b06b48; }

@media (max-width: 700px) {
  .sponsors-section { padding: 72px 0; }
  .sponsors-grid { grid-template-columns: 1fr; gap: 20px; }
  .sponsor-card { padding: 32px 24px; }
}

/* Compact footer sponsor strip — appears on every page */
.footer-sponsors {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 28px 0 24px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-sponsors-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
}
.footer-sponsor-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  padding: 10px 18px;
  border-radius: 8px;
  transition: transform 0.2s;
}
.footer-sponsor-logo:hover { transform: translateY(-1px); }
.footer-sponsor-logo img {
  height: 28px;
  width: auto;
  display: block;
}

@media (max-width: 600px) {
  .footer-sponsors { gap: 16px; padding: 24px 0 20px; }
  .footer-sponsor-logo { padding: 8px 14px; }
  .footer-sponsor-logo img { height: 22px; }
}

/* Dedicated /sponsors page hero blocks */
.sponsor-detail {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}
.sponsor-detail:last-child { border-bottom: none; }
.sponsor-detail-logo {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
}
.sponsor-detail-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.sponsor-detail-body h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.sponsor-detail-body .sponsor-strap {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 16px;
}
.sponsor-detail-body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--charcoal);
  margin: 0 0 14px;
}
.sponsor-detail-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.sponsor-detail-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--clay);
  letter-spacing: 0.01em;
  border: 1px solid var(--clay);
  padding: 8px 14px;
  border-radius: 100px;
  transition: background 0.2s, color 0.2s;
}
.sponsor-detail-links a:hover {
  background: var(--clay);
  color: var(--white);
}

@media (max-width: 760px) {
  .sponsor-detail { grid-template-columns: 1fr; gap: 24px; padding: 48px 0; }
  .sponsor-detail-logo { aspect-ratio: 16 / 7; padding: 24px; max-width: 320px; margin: 0 auto; }
}

/* ---- Thank-you page next-steps list ----------------------- */
.next-steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 48px;
}
.next-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.next-step:last-child { border-bottom: none; }
.next-step-num {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clay);
  color: var(--white);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.next-step:nth-child(2) .next-step-num { background: var(--sage); }
.next-step:nth-child(3) .next-step-num { background: var(--espresso); }
.next-step h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--espresso);
  letter-spacing: -0.01em;
}
.next-step p {
  font-size: 16px;
  color: var(--stone);
  margin: 0;
  line-height: 1.65;
}

/* ---- Bubble cards (homepage problem section) -------------- */
.bubble-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.bubble-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 56px 32px 36px;
  text-align: left;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.35s cubic-bezier(0.16,1,0.3,1),
              border-color 0.25s;
  isolation: isolate;
  /* No overflow:hidden — the .bubble-number hangs off the top edge
     by 18px and would get clipped. The hover gradient is masked
     onto the card via mask-image instead so the bubble can escape
     the bounding box freely. */
}

.bubble-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(140% 90% at 0% 0%, rgba(201,165,123,0.18), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
}

.bubble-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--oak-soft);
}

.bubble-card:hover::before { opacity: 1; }

.bubble-number {
  position: absolute;
  top: -18px;
  left: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clay);
  color: var(--white);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 18px rgba(197,123,87,0.28);
  animation: bubbleFloat 4s ease-in-out infinite;
}

.bubble-card:nth-child(2) .bubble-number { animation-delay: 0.6s; background: var(--sage); box-shadow: 0 6px 18px rgba(142,151,117,0.28); }
.bubble-card:nth-child(3) .bubble-number { animation-delay: 1.2s; background: var(--espresso); box-shadow: 0 6px 18px rgba(26,23,20,0.28); }

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.bubble-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--espresso);
}

.bubble-card p {
  font-size: 15px;
  color: var(--stone);
  line-height: 1.65;
  margin-bottom: 20px;
}

.bubble-resolution {
  font-size: 14px !important;
  color: var(--sage) !important;
  font-weight: 500 !important;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  line-height: 1.55;
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {
  .bubble-grid { grid-template-columns: 1fr; gap: 28px; }
  .bubble-card { padding: 48px 28px 32px; }
}

/* ---- Transport panel (homepage Find us) ------------------- */
.transport-panel {
  margin-top: 80px;
  padding: 56px 48px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.transport-head {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.transport-head h3 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 12px 0 14px;
  color: var(--espresso);
  letter-spacing: -0.02em;
}

.transport-head p {
  font-size: 16px;
  color: var(--stone);
  line-height: 1.65;
  margin: 0;
}

.transport-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.transport-card {
  padding: 32px 28px;
  background: var(--linen);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: border-color 0.25s, transform 0.25s;
}

.transport-card:hover {
  border-color: var(--oak-soft);
  transform: translateY(-2px);
}

.transport-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--white);
  color: var(--sage);
  margin-bottom: 18px;
}

.transport-card h4 {
  color: var(--espresso);
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.transport-card p {
  font-size: 14px;
  color: var(--stone);
  line-height: 1.6;
  margin-bottom: 14px;
}

.transport-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--clay);
  letter-spacing: 0.01em;
  transition: color 0.2s;
}
.transport-link:hover { color: #b06b48; }

@media (max-width: 900px) {
  .transport-panel { padding: 36px 24px; }
  .transport-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Footer social icons ---------------------------------- */
.social-icons {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.social-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.social-icon:hover {
  background: var(--clay);
  color: var(--white);
  transform: translateY(-1px);
}

/* ---- Floor plan on white --------------------------------- */
.floorplan-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  box-shadow: none;
  position: relative;
}
.floorplan-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  background: transparent;
  mix-blend-mode: multiply;
}

/* Phase markers overlaid on the floor plan.
   Default state: ONLY the colored pill is visible on top of the
   image — the floor plan stays fully readable. On hover or focus,
   a white card materialises around the pill revealing the
   headline + sub copy. Touch / small screens fall back to fully
   visible cards stacked below the plan. */
.floorplan-phase {
  position: absolute;
  top: 6%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  background: transparent;
  border-radius: 10px;
  box-shadow: none;
  text-align: left;
  max-width: 230px;
  z-index: 2;
  cursor: help;
  transition: padding 0.28s ease, background-color 0.28s ease,
              box-shadow 0.28s ease;
}
.floorplan-phase-1 { left: 2%; }
.floorplan-phase-2 { right: 2%; }

/* Hover / focus reveals the white card around the pill */
.floorplan-phase:hover,
.floorplan-phase:focus-within,
.floorplan-phase-pinned {
  padding: 16px 20px;
  background: var(--white);
  box-shadow: 0 18px 40px rgba(26,23,20,0.18), 0 1px 0 rgba(26,23,20,0.04);
}

/* .floorplan-phase-pinned (used on Phase 2) keeps the card open
   permanently so visitors can see at a glance that a section is
   coming later, without needing to hover */
.floorplan-phase-pinned .floorplan-phase-tag,
.floorplan-phase-pinned .floorplan-phase-tag-soon {
  margin-bottom: 4px;
  box-shadow: 0 2px 6px rgba(197,123,87,0.25);
}
.floorplan-phase-pinned .floorplan-phase-headline,
.floorplan-phase-pinned .floorplan-phase-sub {
  max-height: 80px;
  opacity: 1;
  transform: translateY(0);
}
.floorplan-phase-pinned { cursor: default; }

.floorplan-phase-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--sage);
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 0;
  box-shadow: 0 4px 12px rgba(142,151,117,0.35);
  transition: margin-bottom 0.28s ease, box-shadow 0.28s ease;
}
.floorplan-phase-tag-soon {
  background: var(--clay);
  box-shadow: 0 4px 12px rgba(197,123,87,0.35);
}
.floorplan-phase:hover .floorplan-phase-tag,
.floorplan-phase:focus-within .floorplan-phase-tag {
  margin-bottom: 4px;
  box-shadow: 0 2px 6px rgba(142,151,117,0.25);
}
.floorplan-phase:hover .floorplan-phase-tag-soon,
.floorplan-phase:focus-within .floorplan-phase-tag-soon {
  box-shadow: 0 2px 6px rgba(197,123,87,0.25);
}

/* Headline + sub start hidden, slide in on hover */
.floorplan-phase-headline,
.floorplan-phase-sub {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.32s ease, opacity 0.22s ease,
              transform 0.32s ease;
}

.floorplan-phase:hover .floorplan-phase-headline,
.floorplan-phase:focus-within .floorplan-phase-headline,
.floorplan-phase:hover .floorplan-phase-sub,
.floorplan-phase:focus-within .floorplan-phase-sub {
  max-height: 80px;
  opacity: 1;
  transform: translateY(0);
}

.floorplan-phase-headline {
  font-size: 16px;
  font-weight: 700;
  color: var(--espresso);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.floorplan-phase-sub {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .floorplan-phase { max-width: 44%; }
  .floorplan-phase:hover,
  .floorplan-phase:focus-within { padding: 12px 14px; }
  .floorplan-phase-tag { font-size: 9px; padding: 4px 9px; }
  .floorplan-phase-headline { font-size: 13px; }
  .floorplan-phase-sub { font-size: 10px; }
}

@media (hover: none) and (max-width: 900px) {
  /* Touch devices: skip the hover dance entirely. Stack the
     phase cards below the floor plan as fully visible cards
     so the info is always reachable without a hover event. */
  .floorplan-phase {
    position: static;
    max-width: none;
    margin-top: 12px;
    padding: 16px 20px;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 var(--line);
  }
  .floorplan-phase-1 { margin-top: 24px; }
  .floorplan-phase-tag { margin-bottom: 4px; }
  .floorplan-phase-headline,
  .floorplan-phase-sub {
    max-height: 200px;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 560px) {
  /* Same fallback for very small viewports regardless of input */
  .floorplan-phase {
    position: static;
    max-width: none;
    margin-top: 12px;
    padding: 16px 20px;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 var(--line);
  }
  .floorplan-phase-1 { margin-top: 24px; }
  .floorplan-phase-tag { margin-bottom: 4px; }
  .floorplan-phase-headline,
  .floorplan-phase-sub {
    max-height: 200px;
    opacity: 1;
    transform: none;
  }
}

/* ---- Floor plan zone markers ----------------------------- */
/* Small coloured pills positioned over each colour-coded area
   of the plan (blue desks, green offices, purple coffee, red
   hourly rooms, orange communal). */
.floorplan-zone {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  background: rgba(255,255,255,0.94);
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(26,23,20,0.14);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--espresso);
  white-space: nowrap;
  z-index: 3;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.zone-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Zone colours — sampled from the floor plan image so the dots
   read clearly as the same area */
.floorplan-zone-blue   .zone-dot,  .zone-dot-blue   { background: #5a8edb; }
.floorplan-zone-green  .zone-dot,  .zone-dot-green  { background: #6fb87a; }
.floorplan-zone-purple .zone-dot,  .zone-dot-purple { background: #b48bd7; }
.floorplan-zone-red    .zone-dot,  .zone-dot-red    { background: #e26d6d; }
.floorplan-zone-orange .zone-dot,  .zone-dot-orange { background: #f0a070; }

@media (max-width: 900px) {
  .floorplan-zone {
    font-size: 9px;
    padding: 4px 10px 4px 7px;
    gap: 5px;
  }
  .floorplan-zone .zone-dot { width: 7px; height: 7px; }
}

@media (max-width: 700px) {
  /* On phones the absolute markers crush together; rely on the
     legend below the plan instead */
  .floorplan-zone { display: none; }
}

/* Static colour legend — sits below the plan, always visible.
   Each item is a pill bubble with a coloured dot, name, and
   short description. Reads as a row of soft chips on desktop
   and stacks on mobile. */
.floorplan-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 36px auto 0;
  max-width: 980px;
  padding: 0 16px;
}

.floorplan-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(26,23,20,0.04);
  font-size: 13px;
  color: var(--stone);
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.floorplan-legend > span:hover {
  border-color: var(--oak-soft);
  box-shadow: 0 4px 14px rgba(26,23,20,0.08);
  transform: translateY(-1px);
}

.floorplan-legend strong {
  color: var(--espresso);
  font-weight: 600;
  margin-right: 2px;
}

.floorplan-legend .zone-dot {
  width: 11px;
  height: 11px;
}

@media (max-width: 700px) {
  .floorplan-legend {
    margin-top: 24px;
    padding: 0 24px;
    gap: 8px;
  }
  .floorplan-legend > span {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ---- Horizontal hover-expand gallery (Space page) -------- */
.expand-gallery {
  display: flex;
  gap: 12px;
  align-items: stretch;
  height: 520px;
  border-radius: 12px;
  overflow: hidden;
}

.expand-tile {
  flex: 1;
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow 0.7s cubic-bezier(0.16,1,0.3,1),
              flex 0.7s cubic-bezier(0.16,1,0.3,1),
              filter 0.5s ease,
              opacity 0.5s ease;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  filter: saturate(0.85) brightness(0.92);
}

.expand-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,23,20,0.78), rgba(26,23,20,0.05) 60%);
  z-index: 1;
}

.expand-tile-label {
  position: relative;
  z-index: 2;
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.expand-gallery:hover .expand-tile {
  flex: 0.4;
  filter: saturate(0.6) brightness(0.5);
}

.expand-gallery .expand-tile:hover {
  flex: 5;
  filter: saturate(1.05) brightness(1);
}

.expand-gallery .expand-tile:hover .expand-tile-label {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .expand-gallery {
    flex-direction: column;
    height: auto;
  }
  .expand-tile {
    flex: 1 1 220px;
    min-height: 220px;
    filter: saturate(1) brightness(1);
  }
  .expand-gallery:hover .expand-tile { flex: 1; filter: saturate(1) brightness(1); }
  .expand-tile-label { opacity: 1; transform: none; }
}

/* ---- Coming soon hero panel (meeting room) --------------- */
.coming-soon-hero {
  background: var(--linen);
  border: 1px solid var(--oak-soft);
  border-radius: 12px;
  padding: 56px 48px;
  text-align: center;
  margin: 0 auto;
  max-width: 820px;
}

.coming-soon-hero .badge-coming {
  background: var(--clay);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.16em;
  margin-bottom: 20px;
}

.coming-soon-hero h2 {
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 16px;
}

.coming-soon-hero p {
  color: var(--stone);
  font-size: 17px;
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto 28px;
}

@media (max-width: 768px) {
  .coming-soon-hero { padding: 36px 24px; }
}

/* ---- Pricing card readability fixes ----------------------- */
.pricing-card .price-sub {
  display: block;
  white-space: normal;
  line-height: 1.45;
  max-width: 100%;
}

.section-navy .pricing-card { background: var(--white); }
.section-navy .pricing-card h3,
.section-navy .pricing-card .price { color: var(--espresso); }
.section-navy .pricing-card .price-detail,
.section-navy .pricing-card .features-list li { color: var(--stone); }

/* ---- Location band readability fix (espresso → linen) ----- */
.gym-band {
  background: var(--linen);
  color: var(--charcoal);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.gym-band h2 {
  color: var(--espresso);
}

.gym-band p {
  color: var(--stone);
  font-size: 17px;
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto;
}

/* ---- FAQ Accordion ---------------------------------------- */
.faq-list {
  max-width: 740px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item:first-child {
  border-top: 1px solid var(--line);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--espresso);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.faq-q:hover { color: var(--clay); }

.faq-icon {
  flex-shrink: 0;
  color: var(--stone);
  transition: transform 0.3s ease, color 0.2s;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  color: var(--clay);
}

.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.open .faq-a {
  max-height: 400px;
}

.faq-a-inner {
  padding-bottom: 22px;
  color: var(--stone);
  line-height: 1.75;
  font-size: 16px;
}

/* faq-question/faq-answer variant (meeting-room, podcast-studio) */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--espresso);
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s;
}

.faq-question:hover { color: var(--clay); }

.faq-question::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  flex-shrink: 0;
  margin-left: 16px;
  color: var(--stone);
  transition: transform 0.3s ease, color 0.2s;
  display: inline-block;
}

.faq-item.open .faq-question { color: var(--clay); }
.faq-item.open .faq-question::after { transform: rotate(45deg); color: var(--clay); }

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.open .faq-answer { max-height: 400px; }

.faq-answer p {
  padding: 16px 0 22px;
  color: var(--stone);
  line-height: 1.75;
  font-size: 16px;
  border-bottom: 1px solid var(--line);
}

.faq-item:first-child .faq-question { border-top: 1px solid var(--line); }

/* ---- Comparison Table -------------------------------------
   Sits inside section-navy. Renders as a clean white card with
   tabular-aligned numbers; the commute (cost) column reads in
   stone, the Worksop Workspace column reads in espresso, and the
   total row blows the difference up so the comparison lands at a
   glance. */
.comparison-table {
  width: 100%;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  margin: 32px 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}

.cmp-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  align-items: center;
}

.cmp-row > div {
  padding: 18px 28px;
  font-size: 16px;
  color: var(--charcoal);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

/* First column = label */
.cmp-row > div:first-child {
  color: var(--stone);
  font-weight: 500;
  font-variant-numeric: normal;
}

/* Subtle vertical separators between the two outcome columns */
.cmp-row > div:nth-child(2) {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

/* Header */
.cmp-header { background: var(--linen); }
.cmp-header > div {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso);
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: none;
}
.cmp-header > div:first-child {
  color: var(--muted);
}

/* Body rows */
.cmp-row:not(.cmp-header):not(.cmp-total) > div {
  font-size: 16px;
}

/* Total row — the hero of the table.
   Border-top sits on the row container so it draws as one
   continuous line across all three cells. Putting it on each
   cell would let the column dividers break it into segments. */
.cmp-total {
  background: var(--linen);
  border-top: 2px solid var(--espresso);
}
.cmp-total > div {
  font-size: 28px;
  font-weight: 700;
  color: var(--espresso);
  letter-spacing: -0.02em;
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: none;
}
.cmp-total > div:first-child {
  font-size: 12px;
  font-weight: 700;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  letter-spacing: 0.14em;
}
.cmp-total > div:nth-child(2) {
  color: var(--clay);
}
.cmp-total > div:nth-child(3) {
  color: var(--sage);
}

/* Savings callout sits below — reads as a confident headline */
.savings-callout {
  text-align: center;
  background: var(--clay);
  color: var(--white);
  padding: 22px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 18px;
  margin: 24px 0 14px;
  letter-spacing: -0.005em;
  line-height: 1.5;
}
.savings-callout p { margin: 0; }

/* Caption note — readable on the navy section */
.section-navy .cmp-note,
.cmp-note {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  margin-top: 14px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 760px) {
  .cmp-row { grid-template-columns: 1fr 1fr; }
  .cmp-row > div:first-child {
    grid-column: 1 / -1;
    background: var(--linen);
    font-weight: 700;
    color: var(--stone);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 12px 24px 6px;
    border-bottom: none;
  }
  .cmp-row > div:not(:first-child) {
    padding: 8px 24px 18px;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 17px;
  }
  .cmp-row > div:nth-child(2) { border-right: 1px solid var(--line); }
  .cmp-header > div:first-child { display: none; }
  .cmp-header { grid-template-columns: 1fr 1fr; }
  .cmp-total > div:first-child {
    background: var(--linen);
    grid-column: 1 / -1;
    padding: 14px 24px 4px;
  }
  .cmp-total > div { font-size: 24px; padding-top: 16px; padding-bottom: 20px; }
}