/* Shutteris Stage 7B.5 — Global Layout & Content Alignment Cleanup
   Goal: remove large pale informational section backgrounds and create one
   balanced, centered content system without disturbing functional cards,
   photography imagery, the black/red brand sections, booking UX or navigation.
*/

:root{
  --stage7b5-max:1240px;
  --stage7b5-reading:920px;
  --stage7b5-wide-reading:1080px;
  --stage7b5-gutter:clamp(18px,3vw,32px);
  --stage7b5-line:#E7E1DC;
}

/* Global content frame: centered page architecture with predictable gutters. */
main > .section,
.section{
  width:100%;
  max-width:var(--stage7b5-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--stage7b5-gutter)!important;
  padding-right:var(--stage7b5-gutter)!important;
}

/* Remove the broad pale/tinted panels that make content feel boxed-in.
   Intentional black/red brand sections and individual cards are left alone. */
.section.soft,
.seo-depth,
.note-panel,
.terms-box,
.article-cta,
.stage7a4-pricing,
.package-guide,
.home-standard,
.premium-brief,
.pricing-page #weddings{
  background:#fff!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Large informational panels should not look like floating rounded cards. */
.section.soft,
.seo-depth,
.note-panel,
.terms-box{
  border-radius:0!important;
}

/* A subtle structural rule is cleaner than a tinted background. */
.note-panel,
.terms-box,
.article-cta{
  border-color:var(--stage7b5-line)!important;
}

/* Professional centered content column.
   The block is centered; reading text stays left-aligned. */
.section-head{
  width:100%;
  max-width:var(--stage7b5-reading);
  margin-left:auto!important;
  margin-right:auto!important;
}

.section-head > .eyebrow{
  display:block;
  margin-bottom:12px;
}

.section-head h1,
.section-head h2{
  max-width:var(--stage7b5-reading);
}

.section-head p{
  max-width:860px!important;
}

/* AI/SEO answer sections are common across the site.
   Balance their paragraphs into a clean editorial two-column layout on desktop. */
.seo-depth{
  max-width:var(--stage7b5-max)!important;
}

.seo-depth .section-head{
  max-width:var(--stage7b5-wide-reading);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(34px,5vw,72px);
  row-gap:18px;
  align-items:start;
  margin-bottom:0!important;
}

.seo-depth .section-head > .eyebrow,
.seo-depth .section-head > h1,
.seo-depth .section-head > h2{
  grid-column:1 / -1;
}

.seo-depth .section-head > h1,
.seo-depth .section-head > h2{
  max-width:980px;
  margin-bottom:10px!important;
}

.seo-depth .section-head > p{
  max-width:none!important;
  margin:0!important;
  line-height:1.75!important;
}

/* Standard page intros keep generous width but no left-heavy composition. */
.page-hero:not(.gallery-hero),
.article > header,
.legal{
  margin-left:auto!important;
  margin-right:auto!important;
}

.page-hero:not(.gallery-hero) > .eyebrow,
.page-hero:not(.gallery-hero) > h1,
.page-hero:not(.gallery-hero) > p{
  max-width:980px;
}

.page-hero:not(.gallery-hero) > p{
  max-width:820px!important;
}

/* Split/editorial sections get a consistent professional gap and alignment. */
.split,
.editorial,
.form-layout,
.location-detail{
  column-gap:clamp(36px,6vw,80px)!important;
}

.split-copy,
.intro-main,
.form-note{
  max-width:760px;
}

/* Keep cards, service tiles and pricing rows visually separate on the white canvas. */
.service-tile,
.guide-card,
.price-card,
.location-card,
.contact-card,
.smart-form,
.stage7a4-price-card,
.stage7a4-location-card{
  box-shadow:none!important;
}

/* Desktop section rhythm. */
@media(min-width:901px){
  .section-head{
    margin-bottom:46px!important;
  }

  .seo-depth{
    padding-top:clamp(76px,6vw,92px)!important;
    padding-bottom:clamp(76px,6vw,92px)!important;
  }
}

/* Tablet/mobile: return editorial answer sections to one readable column. */
@media(max-width:900px){
  .seo-depth .section-head{
    grid-template-columns:1fr;
    row-gap:16px;
  }

  .seo-depth .section-head > .eyebrow,
  .seo-depth .section-head > h1,
  .seo-depth .section-head > h2{
    grid-column:auto;
  }

  .section-head{
    max-width:760px;
  }
}

@media(max-width:700px){
  :root{
    --stage7b5-gutter:18px;
  }

  main > .section,
  .section{
    padding-left:var(--stage7b5-gutter)!important;
    padding-right:var(--stage7b5-gutter)!important;
  }

  .section-head{
    margin-left:0!important;
    margin-right:0!important;
  }

  .seo-depth .section-head > h1,
  .seo-depth .section-head > h2{
    margin-bottom:4px!important;
  }
}

@media(max-width:420px){
  :root{
    --stage7b5-gutter:16px;
  }
}