/* Reset body/html padding — section CSS files (services, why, testimonials) set
   body padding for standalone use; override here for the combined page. */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

html {
  scroll-padding-top: 89px;
}

body {
  padding-top: 89px !important;
}

[data-theme=blue] {
  background-color: #757629
}

.content-grid {
  --padding-inline: 1rem;
  width: 100%;
  --content-max-width: 1500px;
  --breakout-max-width: 85ch;
  --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
  display: grid;
  grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end]
}

.content-grid>:not(.breakout, .full-width) {
  grid-column: content;
  width: 100%;
  padding-inline: 0px
}

.content-grid>.breakout {
  grid-column: breakout
}

.content-grid>.full-width {
  grid-column: full-width
}

.testimonial-section.content-grid {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto
}

.section-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 50px;
  padding: 0 20px;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f2f0e8;
  border-radius: 999px;
  padding: 9px 20px;
  font-family: var(--serif, 'Playfair Display', Georgia, serif);
  font-size: 16px;
  font-weight: 500;
  color: #4b4942;
  margin-bottom: 24px;
}

.section-eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold, #c2a05f);
}

.section-title {
  font-family: var(--serif, 'Playfair Display', Georgia, serif);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink, #23242a);
}

.section-title .text-muted {
  color: #7b8c85;
}

/* Uniform Section Spacing — use section tag to avoid hitting footer's .contact column */
section.about,
section.commitment,
section.why-choose,
section.services,
section.services2,
section.testimonials,
section.faq,
section.contact {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

@media (max-width: 768px) {

  section.about,
  section.commitment,
  section.why-choose,
  section.services,
  section.services2,
  section.testimonials,
  section.faq,
  section.contact {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}

/* Uniform Section Width — match the content-grid max-width of 1500px */
.about-grid,
.commitment-grid,
.wc-grid,
.svc-grid,
.s2-grid,
.tst-card,
.faq__inner,
.ft-inner {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .about-grid,
  .commitment-grid,
  .wc-grid,
  .svc-grid,
  .s2-grid,
  .tst-card,
  .faq__inner,
  .ft-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Testimonials: padding on the section keeps the card off the viewport edges */
.testimonials {
  padding-inline: 24px;
}

@media (max-width: 768px) {
  .testimonials {
    padding-inline: 0;
  }
}

/* ── Grid-item overflow guard (min-content can exceed fr allocation) ── */
.commitment-photo,
.commitment-right,
.tst-left,
.tst-right,
.wc-photo,
.wc-cards,
.accordion,
.visual,
.about-media,
.about-copy {
  min-width: 0;
}

/* ── Mobile section-header ── */
@media (max-width: 600px) {
  .section-header {
    margin-bottom: 32px;
  }

  .section-title {
    font-size: clamp(26px, 7vw, 36px);
  }
}

/* ── Touch target minimum size ── */
a, button {
  min-height: 24px;
  min-width: 24px;
}