/* =========================================================
   Bolton Lake Dental Website UI Kit — layout + component CSS
   (depends on ../../colors_and_type.css for tokens + classes)
   ========================================================= */

body { background: var(--canvas); }
.bld-app { min-height: 100vh; }
.bld-page { padding: 0 0 var(--space-section); }
.bld-container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-xxl); }
.bld-section { padding: var(--space-section) 0; }
.bld-section--tight { padding: var(--space-xxl) 0; }

/* ---------- NAV ---------- */
.bld-nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--canvas);
  height: 56px;
  display: flex; align-items: center; gap: var(--space-xl);
  padding: 0 var(--space-xxl);
  border-bottom: 1px solid var(--hairline-soft);
}
.bld-logo {
  font-family: var(--font-sans);
  font-weight: 540;
  font-size: 20px;
  letter-spacing: -0.3px;
  color: var(--ink);
  text-decoration: none;
}
.bld-nav-links { display: flex; gap: var(--space-lg); margin-right: auto; }
.bld-nav-link {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 330;
  letter-spacing: -0.14px;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 4px;
}
.bld-nav-link.is-active { font-weight: 540; }
.bld-nav-cta { display: flex; gap: var(--space-xs); }
.bld-nav-cta .btn { font-size: 16px; padding: 6px 14px; }
.bld-nav-cta .btn-secondary { padding: 6px 14px 8px; }

/* ---------- MARQUEE ---------- */
.bld-marquee {
  background: var(--inverse-canvas);
  color: var(--inverse-ink);
  height: 36px;
  overflow: hidden;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--inverse-canvas);
}
.bld-marquee-track {
  display: flex; align-items: center; gap: var(--space-xl);
  white-space: nowrap;
  animation: bld-marquee 38s linear infinite;
  padding-left: var(--space-xl);
}
.bld-marquee-item {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.bld-marquee-dot {
  width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .5;
  flex: none;
}
@keyframes bld-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- HERO ---------- */
.bld-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-xxl);
  align-items: end;
  padding: var(--space-section) var(--space-xxl) var(--space-xxl);
  max-width: 1280px; margin: 0 auto;
}
.bld-hero-copy { display: flex; flex-direction: column; gap: var(--space-lg); }
.bld-hero-copy .t-eyebrow { opacity: .7; }
.bld-hero-h {
  font-size: 86px; font-weight: 340; line-height: 1.00;
  letter-spacing: -1.72px; margin: 0;
  text-wrap: balance;
}
.bld-hero-sub { max-width: 480px; margin: 0; }
.bld-hero-cta { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.bld-hero-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-soft);
}

/* ---------- COLOR BLOCK ---------- */
.bld-block {
  margin: var(--space-section) auto;
  max-width: calc(1280px - 2 * var(--space-xxl));
  border-radius: var(--radius-lg);
  padding: var(--space-section) var(--space-xxl);
  color: var(--ink);
}
.bld-block--lime    { background: var(--block-lime); }
.bld-block--lilac   { background: var(--block-lilac); }
.bld-block--cream   { background: var(--block-cream); }
.bld-block--mint    { background: var(--block-mint); }
.bld-block--pink    { background: var(--block-pink); }
.bld-block--coral   { background: var(--block-coral); }
.bld-block--navy    { background: var(--block-navy); color: var(--inverse-ink); }
.bld-block-inner {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--space-lg);
}
.bld-block--center .bld-block-inner { text-align: center; align-items: center; }
.bld-block-eye { opacity: .75; }
.bld-block--navy .bld-block-eye { color: rgba(255,255,255,.85); }
.bld-block-h {
  font-family: var(--font-sans);
  font-size: 60px;
  font-weight: 420;
  line-height: 1.05;
  letter-spacing: -0.96px;
  margin: 0;
  text-wrap: balance;
}
.bld-block-h em,
.bld-block-h .lp-italic {
  font-style: italic;
  font-weight: 380;
}
.bld-block-body { margin: 0; max-width: 560px; }

/* ---------- SERVICE GRID ---------- */
.bld-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.bld-service-card {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-height: 260px;
  display: flex; flex-direction: column; gap: var(--space-sm);
  color: var(--ink);
}
.bld-service-card--lime  { background: var(--block-lime); }
.bld-service-card--lilac { background: var(--block-lilac); }
.bld-service-card--cream { background: var(--block-cream); }
.bld-service-card--mint  { background: var(--block-mint); }
.bld-service-card--pink  { background: var(--block-pink); }
.bld-service-card--coral { background: var(--block-coral); }
.bld-service-card-top { display: flex; align-items: center; justify-content: space-between; }
.bld-service-card-eye { opacity: .7; font-size: 14px; letter-spacing: 0.5px; }
.bld-service-card-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bld-service-card-h {
  margin: auto 0 0;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 540;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.bld-service-card-body {
  margin: 0;
  font-size: 15px;
  font-weight: 330;
  letter-spacing: -0.14px;
  line-height: 1.45;
}

/* ---------- PRICING ---------- */
.bld-pricing { width: 100%; }
.bld-pricing-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(255,255,255,.55);
  border-radius: var(--radius-pill);
  margin: 0 auto var(--space-xl);
}
.bld-pricing-body {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
  gap: var(--space-xxl);
  background: var(--canvas);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  padding: var(--space-xxl);
}
.bld-pricing-amount {
  font-family: var(--font-sans);
  font-size: 64px;
  font-weight: 340;
  letter-spacing: -1.2px;
  line-height: 1;
  margin: 8px 0 12px;
}
.bld-pricing-features {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.bld-pricing-features li {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--hairline-soft);
}
.bld-pricing-features li:first-child { border-top: none; }
.bld-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  margin-top: 4px;
  flex: none;
}
.bld-check svg { stroke: var(--semantic-success); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- CONTACT FORM ---------- */
.bld-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.bld-contact-grid label { display: flex; flex-direction: column; gap: 6px; }
.bld-contact-grid .t-eyebrow { font-size: 13px; opacity: .7; }
.bld-contact-grid-wide { grid-column: 1 / -1; }
.bld-contact-form textarea.input { font-family: var(--font-sans); resize: vertical; }
.bld-contact-actions { margin-top: var(--space-lg); display: flex; align-items: center; }

/* ---------- TEAM ---------- */
.bld-team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg);
}
.bld-team-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.bld-team-card image-slot { display: block; background: var(--surface-soft); border-radius: var(--radius-md); }
.bld-team-meta { display: flex; flex-direction: column; gap: 4px; padding-top: var(--space-xs); }
.bld-team-name {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 540;
  letter-spacing: -0.3px;
  margin: 0;
}

/* ---------- FAQ ---------- */
.bld-faq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.bld-faq-item { border-top: 1px solid rgba(0,0,0,.18); }
.bld-faq-item:last-child { border-bottom: 1px solid rgba(0,0,0,.18); }
.bld-faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  padding: var(--space-lg) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg);
  font-family: inherit; color: inherit; text-align: left;
}
.bld-faq-icon { flex: none; }
.bld-faq-icon svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.bld-faq-a { padding: 0 0 var(--space-lg); max-width: 640px; margin: 0; }

/* ---------- HOURS COLUMN ---------- */
.bld-hours { display: flex; flex-direction: column; gap: var(--space-sm); }
.bld-hours-row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--hairline-soft); }
.bld-hours-row:first-child { border-top: none; }
.bld-map {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  position: relative; overflow: hidden;
}
.bld-map-pin {
  position: absolute; left: 38%; top: 52%;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-magenta); border: 4px solid #fff;
}

/* ---------- TWO-UP LAYOUT (contact form + hours/map) ---------- */
.bld-two-up {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-xxl);
  align-items: start;
}

/* ---------- FOOTER ---------- */
.bld-footer {
  background: var(--canvas);
  padding: var(--space-section) var(--space-xxl);
  border-top: 1px solid var(--hairline);
}
.bld-footer-top {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-xxl);
  max-width: 1280px; margin: 0 auto;
}
.bld-footer-mark {
  font-family: var(--font-sans);
  font-size: 72px;
  font-weight: 540;
  letter-spacing: -1.4px;
  line-height: 0.95;
}
.bld-footer-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl);
}
.bld-footer-col { display: flex; flex-direction: column; gap: var(--space-xs); }
.bld-footer-head { opacity: .65; margin-bottom: var(--space-xs); font-size: 13px; }
.bld-footer-link { font-family: var(--font-sans); font-size: 15px; font-weight: 330; color: var(--ink); text-decoration: none; letter-spacing: -0.14px; }
.bld-footer-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.bld-footer-bottom {
  max-width: 1280px; margin: var(--space-section) auto 0;
  display: flex; gap: var(--space-xl);
  border-top: 1px solid var(--hairline-soft);
  padding-top: var(--space-lg);
  opacity: .7;
}

/* ---------- TEMPLATE / GALLERY TILES ---------- */
.bld-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.bld-gallery-tile {
  background: var(--surface-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.bld-gallery-tile image-slot { display: block; aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius-sm); }
.bld-gallery-cap { display: flex; justify-content: space-between; align-items: center; }
.bld-gallery-cap .t-caption { opacity: .6; }

/* ---------- BREATHING ROOMS ---------- */
.bld-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: var(--space-md);
}
.bld-section-h {
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: 420;
  letter-spacing: -0.78px;
  line-height: 1.04;
  margin: 0 0 var(--space-xl);
  max-width: 760px;
  text-wrap: balance;
}
.bld-section-h em,
.bld-section-h .lp-italic {
  font-style: italic;
  font-weight: 380;
  color: var(--ink);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .bld-nav { padding: 0 var(--space-lg); gap: var(--space-md); }
  .bld-nav-links { display: none; }
  .bld-hero { grid-template-columns: 1fr; padding: var(--space-xxl) var(--space-lg); }
  .bld-hero-h { font-size: 56px; letter-spacing: -1px; }
  .bld-services { grid-template-columns: repeat(2, 1fr); }
  .bld-pricing-body { grid-template-columns: 1fr; padding: var(--space-xl); }
  .bld-team-grid { grid-template-columns: repeat(2, 1fr); }
  .bld-gallery { grid-template-columns: repeat(2, 1fr); }
  .bld-two-up { grid-template-columns: 1fr; }
  .bld-footer-top { grid-template-columns: 1fr; }
  .bld-footer-mark { font-size: 48px; }
  .bld-block { padding: var(--space-xxl) var(--space-lg); }
  .bld-block-h { font-size: 44px; letter-spacing: -0.6px; }
  .bld-container { padding: 0 var(--space-lg); }
}