/* LiveWell Burpengary page styles. Loads base.css, which loads the design tokens.
   The burp- class prefix (and the bp- form ids) is short for Burpengary Road, where the precinct is.
   The file runs in three blocks: page styles, then "Page overrides", then "Refinements".
   Later rules override earlier ones. */
@import url('base.css');

/* ===== Nav: opening pill ===== */
.burp-nav .lw-nav-logo img { height: 42px; }
.burp-opening {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-3);
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--lw-light);
}
.burp-opening .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lw-peace);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--lw-peace) 80%, transparent);
  animation: burp-pulse 2.4s ease-out infinite;
}
@keyframes burp-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--lw-peace) 70%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ===== Hero: full-width photo with overlay copy ===== */
.burp-hero {
  position: relative; overflow: hidden;
  min-height: 720px; height: calc(100vh - 70px); max-height: 880px;
  display: flex; align-items: flex-end;
  color: var(--lw-whisper);
}
.burp-hero-img {
  position: absolute; inset: 0;
}
.burp-hero-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  transform: scale(1.02);
  filter: saturate(0.92) brightness(0.94) contrast(1.02);
}
.burp-hero-img::before {
  /* Brand tint: a warm Fog wash pulls the photo toward the Gumleaf palette
     and gives the white type more contrast. */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(178, 181, 151, 0.16) 0%, rgba(178, 181, 151, 0) 60%),
    rgba(47, 55, 47, 0.30);
  mix-blend-mode: normal;
  pointer-events: none;
}
.burp-hero-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(47,55,47,0.40) 0%,
    rgba(47,55,47,0.18) 30%,
    rgba(47,55,47,0.20) 55%,
    rgba(47,55,47,0.85) 100%);
  pointer-events: none;
}
.burp-hero-inner { position: relative; z-index: 1; padding-bottom: 72px; padding-top: 80px; width: 100%; }
.burp-hero-top-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 12.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lw-whisper); opacity: 0.92; margin-bottom: 22px;
}
.burp-hero-top-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lw-whisper);
}
.burp-hero-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.75rem, 6.4vw + 1rem, 6.5rem);
  line-height: 1; letter-spacing: -0.022em;
  margin: 0 0 24px; max-width: 14ch; text-wrap: balance;
  color: var(--lw-whisper);
}
.burp-hero-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.burp-hero-lede {
  font-family: var(--font-sans); font-size: 20px; line-height: 1.55;
  max-width: 560px; margin: 0 0 40px;
  color: color-mix(in oklab, white 92%, transparent);
}
.burp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.burp-hero-meta {
  display: flex; flex-wrap: wrap; gap: 36px;
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid color-mix(in oklab, white 22%, transparent);
  font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: color-mix(in oklab, white 70%, transparent);
}
.burp-hero-meta strong { color: var(--lw-whisper); font-weight: 400; font-family: var(--font-serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 16px; }

/* ===== Intro band ===== */
.burp-intro {
  padding: 96px 0; background: var(--lw-whisper);
}
.burp-intro-grid {
  display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start;
}
@media (min-width: 900px) { .burp-intro-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); gap: 96px; } }
.burp-intro-eyebrow { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); }
.burp-intro-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 3.2vw + 1rem, 3.5rem);
  line-height: 1.05; letter-spacing: -0.018em;
  margin: 18px 0 0; text-wrap: balance;
}
.burp-intro-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.burp-intro-bullets {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
  margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border-soft);
  list-style: none; padding-left: 0;
}
.burp-intro-bullets li {
  font-family: var(--font-sans); font-size: 15.5px; color: var(--fg-1);
  display: flex; gap: 10px;
}
.burp-intro-bullets li::before {
  content: ''; flex: 0 0 8px; height: 8px; margin-top: 7px;
  background: var(--lw-fog); border-radius: 50%;
}

/* ===== Intro 4-tile photo collage ===== */
.burp-intro-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
  aspect-ratio: 4 / 5;
}
@media (max-width: 720px) { .burp-intro-photos { aspect-ratio: 1 / 1; } }
.burp-intro-photo {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  background: var(--lw-sage);
}
.burp-intro-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  transition: transform var(--t-slow) var(--ease-out);
}
.burp-intro-photo:hover img { transform: scale(1.04); }
.burp-intro-photo.tall { grid-row: span 1; }
@media (min-width: 720px) {
  .burp-intro-photos { aspect-ratio: 1 / 1.15; }
  .burp-intro-photo:nth-child(1) { transform: translateY(-12%); }
  .burp-intro-photo:nth-child(4) { transform: translateY(12%); }
}

/* ===== Location: text and render photo ===== */
.burp-map-section { padding: 112px 0; background: var(--lw-light); }
.burp-map-grid { display: grid; grid-template-columns: 1fr; gap: 56px; }
@media (min-width: 900px) { .burp-map-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 80px; align-items: stretch; } }
.burp-map-info { padding: 8px 0; }
.burp-map-info .burp-map-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 3.2vw + 1rem, 3.25rem);
  line-height: 1.06; letter-spacing: -0.018em; margin: 0 0 26px; text-wrap: balance;
}
.burp-map-info .burp-map-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.burp-map-info .ld { font-family: var(--font-sans); font-size: 17.5px; line-height: 1.6; color: var(--fg-2); margin: 0 0 32px; }

.burp-location-photo {
  position: relative;
  min-height: 540px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--lw-sage);
  box-shadow: var(--shadow-2);
}
.burp-location-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  transition: transform var(--t-slow) var(--ease-out);
}
.burp-location-photo:hover img { transform: scale(1.02); }
.burp-location-photo-tag {
  position: absolute; left: 20px; bottom: 20px;
  background: color-mix(in oklab, var(--lw-whisper) 92%, transparent);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-1);
  display: inline-flex; align-items: center; gap: 10px;
  backdrop-filter: blur(8px);
}
.burp-location-photo-tag .dot { width: 7px; height: 7px; background: var(--lw-fog); border-radius: 50%; }

.burp-distance-list { display: flex; flex-direction: column; gap: 0; }
.burp-distance-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--border-soft);
  align-items: baseline;
}
.burp-distance-row:first-child { border-top: 1px solid var(--border-soft); }
.burp-distance-row .pl { font-family: var(--font-display); font-weight: 300; font-size: 20px; letter-spacing: -0.008em; color: var(--fg-1); }
.burp-distance-row .ds { font-family: var(--font-serif); font-style: italic; font-size: 15.5px; color: var(--fg-2); }

/* ===== Full-bleed photo interlude (rhythm breather) ===== */
.burp-interlude {
  position: relative;
  height: clamp(360px, 56vh, 620px);
  overflow: hidden;
  background: var(--lw-fog);
}
.burp-interlude > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
}
.burp-interlude::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(47,55,47,0) 35%, rgba(47,55,47,0.7) 100%),
    linear-gradient(0deg, rgba(47,55,47,0.10) 0%, rgba(47,55,47,0.10) 100%);
}
.burp-interlude-inner {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; align-items: flex-end;
  padding-bottom: 56px;
}
.burp-interlude-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: color-mix(in oklab, white 78%, transparent);
  margin-bottom: 14px;
}
.burp-interlude-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lw-whisper);
}
.burp-interlude-quote {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 4.4vw + 1rem, 4.5rem);
  line-height: 1.02; letter-spacing: -0.022em;
  margin: 0; max-width: 18ch; text-wrap: balance;
  color: var(--lw-whisper);
}
.burp-interlude-quote em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.burp-interlude-tag {
  position: absolute; right: 32px; top: 28px;
  background: color-mix(in oklab, var(--lw-whisper) 86%, transparent);
  padding: 8px 16px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-1);
  backdrop-filter: blur(8px);
}
@media (min-width: 1100px) { .burp-interlude-tag { right: 72px; } }

/* ===== Section ===== */
.burp-section { padding: 112px 0; }
.burp-section--alt { background: var(--lw-whisper); }
.burp-section--sage { background: var(--lw-sage); }
.burp-section--fog { background: var(--lw-fog); color: var(--lw-whisper); }

.burp-section-head {
  display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px;
  align-items: end;
}
@media (min-width: 900px) {
  .burp-section-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; }
}
.burp-section-eyebrow {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fg-3); margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.burp-section-eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; opacity: 0.55; }
.burp-section--fog .burp-section-eyebrow { color: color-mix(in oklab, white 55%, transparent); }

.burp-section-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem);
  line-height: 1.05; letter-spacing: -0.018em;
  margin: 0; text-wrap: balance;
}
.burp-section-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.burp-section-lede {
  font-family: var(--font-sans); font-size: 18px; line-height: 1.6; color: var(--fg-2);
  margin: 0; max-width: 580px;
}
.burp-section--fog .burp-section-lede { color: color-mix(in oklab, white 78%, transparent); }

/* ===== Directory category filter (burpengary.js shows and hides the directory cards) ===== */
.burp-cat-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 32px;
}
.burp-cat-row button {
  font-family: var(--font-sans); font-size: 14px;
  padding: 10px 20px; border-radius: var(--r-pill);
  background: transparent; color: var(--fg-2);
  border: 1px solid var(--border-mid);
  cursor: pointer;
  transition: all var(--t-base) var(--ease-out);
  letter-spacing: 0.01em;
}
.burp-cat-row button:hover { color: var(--fg-1); border-color: var(--lw-fog); }
.burp-cat-row button.is-active {
  background: var(--lw-fog); color: var(--lw-whisper); border-color: var(--lw-fog);
}

/* ===== Tenant directory grid ===== */
.burp-tenants {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 600px) { .burp-tenants { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .burp-tenants { grid-template-columns: repeat(3, 1fr); } }
.burp-tenant {
  background: var(--lw-whisper); border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-slow) var(--ease-out);
  text-decoration: none; color: inherit;
}
.burp-tenant:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.burp-tenant-img {
  aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--lw-sage); position: relative;
}
.burp-tenant-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  transition: transform var(--t-slow) var(--ease-out);
}
.burp-tenant:hover .burp-tenant-img img { transform: scale(1.05); }
.burp-tenant-cat {
  position: absolute; top: 14px; left: 14px;
  background: color-mix(in oklab, var(--lw-whisper) 92%, transparent);
  padding: 7px 14px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-1);
  backdrop-filter: blur(6px);
}
.burp-tenant-soon {
  position: absolute; top: 14px; right: 14px;
  background: var(--lw-fog); color: var(--lw-whisper);
  padding: 7px 14px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.burp-tenant-body { padding: 26px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.burp-tenant .nm {
  font-family: var(--font-display); font-weight: 300; font-size: 26px;
  letter-spacing: -0.012em; line-height: 1.12; color: var(--fg-1);
}
.burp-tenant .nm em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.burp-tenant .ds { font-family: var(--font-serif); font-style: italic; font-size: 15.5px; color: var(--fg-2); margin-bottom: 8px; }
.burp-tenant .mt {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans); font-size: 12.5px; color: var(--fg-3);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.burp-tenant .mt .arr { transition: transform var(--t-base) var(--ease-out); }
.burp-tenant:hover .mt .arr { transform: translateX(3px); }

/* ===== Medical and wellness: sage band ===== */
.burp-mw-grid {
  display: grid; grid-template-columns: 1fr; gap: 48px;
}
@media (min-width: 900px) { .burp-mw-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr); gap: 80px; align-items: center; } }
.burp-mw-image {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--r-md); overflow: hidden; background: var(--lw-light);
}
.burp-mw-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.burp-mw-image-stamp {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px;
  background: var(--lw-whisper);
  -webkit-mask: url('../logos/LiveWell-Icon-Fog.svg') center / contain no-repeat;
          mask: url('../logos/LiveWell-Icon-Fog.svg') center / contain no-repeat;
}

.burp-mw-services { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: color-mix(in oklab, var(--lw-fog) 12%, transparent); border-radius: var(--r-sm); overflow: hidden; margin-top: 36px; }
.burp-mw-service {
  background: color-mix(in oklab, var(--lw-sage) 92%, white);
  padding: 26px 26px;
  display: flex; flex-direction: column; gap: 6px;
}
.burp-mw-service .ix { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); }
.burp-mw-service .nm {
  font-family: var(--font-display); font-weight: 300; font-size: 22px;
  letter-spacing: -0.008em; line-height: 1.2; color: var(--fg-1);
}
.burp-mw-service .nm em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.burp-mw-service .ds { font-family: var(--font-serif); font-style: italic; font-size: 14.5px; color: var(--fg-2); }

/* ===== Timeline ===== */
.burp-timeline {
  display: grid; grid-template-columns: 1fr;
  gap: 0;
  position: relative;
  margin-top: 32px;
}
@media (min-width: 900px) {
  .burp-timeline { grid-template-columns: repeat(5, 1fr); }
  .burp-timeline::before {
    content: ''; position: absolute; left: 0; right: 0; top: 36px;
    height: 1px; background: var(--border-soft);
  }
}
.burp-mile {
  padding: 24px 14px 0;
  position: relative;
  border-top: 1px solid var(--border-soft);
}
@media (min-width: 900px) {
  .burp-mile { border-top: 0; padding: 60px 18px 24px; }
  .burp-mile + .burp-mile { border-top: 0; }
}
.burp-mile-dot {
  display: none;
}
@media (min-width: 900px) {
  .burp-mile-dot {
    display: block; position: absolute; top: 30px; left: 18px;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--lw-whisper); border: 1.5px solid var(--lw-fog);
  }
  .burp-mile.is-done .burp-mile-dot { background: var(--lw-fog); }
  .burp-mile.is-now .burp-mile-dot {
    background: var(--lw-fog);
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--lw-fog) 18%, transparent);
  }
}
.burp-mile .when {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px;
}
.burp-mile.is-now .when { color: var(--lw-fog); font-weight: 700; }
.burp-mile .what {
  font-family: var(--font-display); font-weight: 300; font-size: 22px;
  letter-spacing: -0.008em; line-height: 1.2; color: var(--fg-1); margin: 0 0 10px;
}
.burp-mile .what em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.burp-mile .ds { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--fg-2); line-height: 1.55; }
.burp-mile.is-pending .what, .burp-mile.is-pending .ds { color: var(--fg-3); }

.burp-progress {
  margin-top: 56px; padding: 28px 32px;
  background: var(--lw-light); border-radius: var(--r-md);
  display: grid; grid-template-columns: 1fr; gap: 14px;
  align-items: center;
}
@media (min-width: 720px) { .burp-progress { grid-template-columns: auto 1fr auto; gap: 32px; } }
.burp-progress .pct {
  font-family: var(--font-display); font-weight: 300; font-size: 56px;
  letter-spacing: -0.022em; line-height: 1; color: var(--fg-1);
}
.burp-progress .pct em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.55em; vertical-align: 0.25em; }
.burp-progress .label {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px;
}
.burp-progress .desc {
  font-family: var(--font-serif); font-style: italic; font-size: 15.5px; color: var(--fg-2); line-height: 1.55;
}
.burp-progress .bar {
  position: relative;
  height: 4px; background: var(--border-soft); border-radius: 2px; overflow: hidden;
  margin-top: 12px;
}
.burp-progress .bar > span {
  position: absolute; inset: 0 auto 0 0;
  background: var(--lw-fog); border-radius: 2px;
  animation: bar-grow 1400ms var(--ease-out) both;
}
@keyframes bar-grow { from { width: 0; } }

/* ===== Leasing band (Fog) ===== */
.burp-leasing { position: relative; overflow: hidden; }
.burp-leasing::before {
  content: ''; position: absolute; inset: 0;
  -webkit-mask-image: url('../patterns/LiveWell-Pattern-Fog.svg');
          mask-image: url('../patterns/LiveWell-Pattern-Fog.svg');
  -webkit-mask-size: 55% auto; mask-size: 55% auto;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: right -10% center; mask-position: right -10% center;
  background: var(--lw-sage);
  opacity: 0.18; pointer-events: none;
}
.burp-leasing > * { position: relative; z-index: 1; }
.burp-leasing-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: start; }
@media (min-width: 900px) { .burp-leasing-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }
/* The leasing form reuses the master page's class names (.master-form, .master-field), but
   master.css isn't loaded on this page: the .burp-leasing-form rules style it. */
.burp-leasing-form .master-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.burp-leasing-form .full { grid-column: 1 / -1; }
.burp-leasing-form label {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: color-mix(in oklab, white 55%, transparent);
  display: block; margin-bottom: 8px;
}
.burp-leasing-form input, .burp-leasing-form select, .burp-leasing-form textarea {
  width: 100%;
  font-family: var(--font-sans); font-size: 15px; padding: 14px 16px;
  background: color-mix(in oklab, var(--lw-fog) 80%, white);
  border: 1px solid color-mix(in oklab, white 20%, transparent);
  border-radius: var(--r-sm); color: var(--lw-whisper); outline: none;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.burp-leasing-form input::placeholder, .burp-leasing-form textarea::placeholder {
  color: color-mix(in oklab, white 45%, transparent);
}
.burp-leasing-form input:focus, .burp-leasing-form select:focus, .burp-leasing-form textarea:focus {
  border-color: var(--lw-whisper); background: color-mix(in oklab, var(--lw-fog) 70%, white);
}
.burp-leasing-form textarea { resize: vertical; min-height: 110px; }

.burp-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; padding-top: 28px; border-top: 1px solid color-mix(in oklab, white 18%, transparent); }
.burp-stats-row .nm {
  font-family: var(--font-display); font-weight: 300; font-size: 36px;
  letter-spacing: -0.018em; line-height: 1; color: var(--lw-whisper);
}
.burp-stats-row .nm em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.burp-stats-row .lb { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in oklab, white 60%, transparent); margin-top: 10px; }

/* ===== End-cap quote ===== */
.burp-endcap {
  background: var(--lw-light); padding: 128px 0 120px; text-align: center;
}
.burp-endcap-mark {
  width: 48px; height: 48px; margin: 0 auto 32px;
  -webkit-mask: url('../logos/LiveWell-Icon-Fog.svg') center / contain no-repeat;
          mask: url('../logos/LiveWell-Icon-Fog.svg') center / contain no-repeat;
  background: var(--lw-fog);
}
.burp-endcap-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.25rem, 3.2vw + 1rem, 3.75rem);
  line-height: 1.1; letter-spacing: -0.018em;
  margin: 0 auto; max-width: 900px;
}
.burp-endcap-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.burp-endcap-sub {
  font-family: var(--font-serif); font-style: italic; font-size: 14px;
  color: var(--fg-3); margin-top: 22px;
}

/* ===== Page overrides =====
   Page-wide rules for this page: link colours, the fixed nav, the 52px lockup and the
   six-milestone timeline grid. */
a { color: var(--fg-1); }
a:hover { color: #1f2520; }
/* The nav is fixed to the top of the viewport (the master page's nav is sticky).
   .burp-nav-spacer keeps its place in the page flow; its height is set under "Refinements". */
.lw-nav.burp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
/* The Burpengary lockup is taller than the master wordmark, so the nav logo is 52px high. */
.burp-nav .lw-nav-logo img { height: 52px; }
/* The timeline has six milestones: three columns from 900px, one row of six from 1240px. */
@media (min-width: 900px) {
  .burp-timeline {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 8px;
  }
  .burp-timeline::before { display: none; }
  .burp-timeline .burp-mile,
  .burp-timeline .burp-mile + .burp-mile {
    padding: 24px 18px 24px;
    border-top: 1px solid var(--border-soft);
  }
  .burp-mile-dot { display: none; }
}
@media (min-width: 1240px) {
  .burp-timeline {
    grid-template-columns: repeat(6, 1fr);
    row-gap: 0;
  }
  .burp-timeline::before { display: block; }
  .burp-timeline .burp-mile,
  .burp-timeline .burp-mile + .burp-mile {
    padding: 60px 14px 24px;
    border-top: 0;
  }
  .burp-mile-dot { display: block; }
}

/* ===== Refinements =====
   These come later in the file, so they override the rules above. Add new adjustments here. */

/* Fixed nav: the spacer and the anchor offsets match the nav height, 81px at every width
   (52px lockup + 2 × 14px padding + 1px border). If the nav height changes, update every
   81px value in this block. */
.burp-nav-spacer { height: 81px; }
main section[id] { scroll-margin-top: 81px; }

/* The nav logo links to #top (the <main>), which isn't a section, so it needs its own
   offset to land at the very top of the page. */
main#top { scroll-margin-top: 81px; }

/* Hero height: the viewport less the 81px nav. */
.burp-hero { height: calc(100vh - 81px); }

/* Phones: below 480px the lockup, the "Opens …" pill and the menu button don't fit side
   by side. The pill is left out of the nav there (the opening date is in the hero directly
   below) and the full 52px lockup stays, so the nav is still 81px high. */
@media (max-width: 479px) {
  .burp-opening { display: none; }
}

/* Under 360px the bottom-aligned hero copy is taller than the fixed hero box, so here the
   hero grows to fit its copy and the eyebrow stays clear of the nav. */
@media (max-width: 359px) {
  .burp-hero { height: auto; max-height: none; min-height: clamp(720px, calc(100vh - 81px), 880px); }
}

/* Timeline milestone titles are <h3>. The token base (tokens/base.css) sets every h3 in
   italic, so this keeps the titles upright and the one italic word stands out. */
.burp-mile .what { font-style: normal; }

/* The token base resets every <p> margin to 0 0 1em (0 when last) and sets h4 line-height
   to 1.2. These set 1em above and below the milestone notes and the end-cap line, so
   each note clears the next milestone's rule on phones, and a 1.5 line-height on the
   footer column headings. */
.burp-mile .ds { margin: 1em 0; }
.burp-endcap .burp-endcap-sub { margin-bottom: 1em; }
.lw-footer--fog .lw-footer-col h4 { line-height: 1.5; }

/* Medical centre services: one column below 360px, so the grid fits 320px screens. */
@media (max-width: 359px) {
  .burp-mw-services { grid-template-columns: minmax(0, 1fr); }
}

/* Directory cards narrower than 310px: the status pill (top right) sits under the category
   pill (top left) so the two don't overlap. Browsers without container queries keep them
   side by side. */
.burp-tenant-img { container-type: inline-size; }
@container (max-width: 309px) {
  .burp-tenant-soon { right: auto; left: 14px; top: 50px; }
}

/* Footer links on hover keep their light colour on the dark footer; the page-wide a:hover
   above would turn them dark. The opacity hover from base.css still shows. */
.lw-footer--fog a:hover { color: inherit; }

/* Normal text wrapping on this page, so headings break where the layout expects. The token base
   (tokens/base.css) sets text-wrap: pretty and balance. Class rules above that set
   text-wrap: balance on specific titles still apply. */
body { text-wrap: wrap; }
h1, h2, h3, h4 { text-wrap: wrap; }

/* Motion: on this page --ease-out uses its own curve. It drives the hover
   and focus transitions, the mobile menu and the leasing progress bar. Scroll reveals use
   --lw-ease-soft (base.css) instead. */
:root { --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); }

/* Leasing band circle pattern at 8% opacity: subtle and low contrast, matching the master
   page (Honey Sage on Fog, brand guidelines p.36). */
.burp-leasing::before { opacity: 0.08; }
/* Phones: the band is one tall column, so the pattern sits bottom right, beside the Send
   button, rather than behind the form fields. */
@media (max-width: 899px) {
  .burp-leasing::before { -webkit-mask-position: right -18% bottom 24px; mask-position: right -18% bottom 24px; }
}

/* Type: one serif, used once (same rule as the master page). Libre Baskerville italic stays
   only on the single accent word in headlines and names; captions, descriptions and small
   print use IBM Plex Sans (brand guidelines pp.21-23). Numbers stay in Space Grotesk. */
.burp-hero-meta strong,
.burp-distance-row .ds,
.burp-tenant .ds,
.burp-mw-service .ds,
.burp-mile .ds,
.burp-progress .desc,
.burp-endcap-sub,
.lw-footer-brand p { font-family: var(--font-sans); font-style: normal; }
.burp-hero-meta strong { font-size: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: 600; }
.burp-progress .pct em,
.burp-stats-row .nm em { font-family: inherit; font-style: normal; font-weight: inherit; }

/* Leasing form: two equal columns, and one column under 600px (same as the master page's
   form), so labels such as "Practice or business" don't wrap and push their field out of
   line on phones. */
.burp-leasing-form .master-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 599px) {
  .burp-leasing-form .master-form { grid-template-columns: minmax(0, 1fr); }
}
/* Leasing stats: the area range (208–292) stays on one line. */
.burp-stats-row .nm { white-space: nowrap; }

/* Directory cards on hover keep one even border (the token a:hover rule would recolour only
   the bottom edge); the lift and shadow are the hover effect. */
a.burp-tenant:hover { border-color: var(--border-soft); }

/* Netlify Forms spam trap: never shown (same rule as master.css). */
.lw-hp { display: none !important; }

/* Form buttons: dimmed only while sending (site.js sets data-state); once sent, the button
   stays at full strength. A disabled button shows the default cursor. */
.burp-leasing-form button[data-state="sending"] { opacity: 0.7; }
.burp-leasing-form button[disabled] { cursor: default; }

/* Leasing brochure downloads: a button under the stats in the Leasing section, a second beside
   "See what's available" in the Directory, and a footer link. Download buttons (.burp-dl) nudge
   their arrow down on hover, not sideways like the other chevrons. */
.burp-brochure { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 32px; }
.burp-brochure .meta {
  font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.02em;
  color: color-mix(in oklab, white 60%, transparent);
}
.burp-btn-pair { display: flex; flex-wrap: wrap; gap: 12px; }

/* Section labels are the page's real headings (the H1 in the hero, H2s below) so search engines
   read what each section is about; the large brand lines under them are paragraphs. The token
   base gives every h1/h2 a light weight and tight line-height, so the labels take back the
   weight and spacing they had as plain text. */
h1.burp-hero-top-eyebrow,
h2.burp-intro-eyebrow,
h2.burp-section-eyebrow { font-weight: 400; line-height: 1.5; }
.lw-btn.burp-dl:hover .chev { transform: translateY(2px); }

/* Avril's direct phone and email, under the leasing form on the Fog background. */
.burp-leasing-direct {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6; margin: 22px 0 0;
  color: color-mix(in oklab, white 75%, transparent);
}
.burp-leasing-direct a { color: var(--lw-whisper); text-decoration: underline; text-decoration-color: color-mix(in oklab, white 40%, transparent); text-underline-offset: 4px; }
.burp-leasing-direct a:hover { text-decoration-color: var(--lw-whisper); }

/* Links in body text (intro, timeline): underlined, the same way as the leasing contact links. */
.burp-intro p a, .burp-mile .ds a { color: var(--lw-fog); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--lw-fog) 35%, transparent); text-underline-offset: 4px; }
.burp-intro p a:hover, .burp-mile .ds a:hover { text-decoration-color: var(--lw-fog); }

/* Leasing FAQ: one open/close row per question. The questions are <h3>s inside <summary> for
   search engines; the token base styles every h3 in the italic accent face, so .q resets it to
   the display face used for the other large text on the page. */
.burp-faq { border-top: 1px solid var(--border-mid); max-width: 880px; }
.burp-faq details { border-bottom: 1px solid var(--border-soft); }
.burp-faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 22px 0;
}
.burp-faq summary::-webkit-details-marker { display: none; }
.burp-faq summary::after {
  content: '+'; flex: none; font-family: var(--font-display); font-weight: 300; font-size: 26px;
  line-height: 1; color: var(--fg-3); transition: transform var(--t-base, 200ms) var(--ease-out, ease);
}
.burp-faq details[open] summary::after { transform: rotate(45deg); }
.burp-faq summary:focus-visible { outline: 2px solid var(--fg-1); outline-offset: 4px; }
.burp-faq .q {
  font-family: var(--font-display); font-style: normal; font-weight: 400;
  font-size: clamp(1.1rem, 0.6vw + 0.95rem, 1.35rem); line-height: 1.35; letter-spacing: -0.005em;
  color: var(--fg-1); margin: 0;
}
.burp-faq summary:hover .q { color: color-mix(in oklab, var(--fg-1) 80%, transparent); }
.burp-faq .a {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.65; color: var(--fg-2);
  max-width: 64ch; margin: 0; padding: 0 0 24px;
}
@media (prefers-reduced-motion: reduce) { .burp-faq summary::after { transition: none; } }