/* Section Spacing — symmetric top/bottom so section boundaries are clearly distinguishable */
.section {
  padding: var(--section-padding-y) 0;
  transition: padding var(--transition-slow) ease-out;
}

.section--white {
  background: var(--white);
}

.section--grey {
  background: var(--grey);
  transition: padding-bottom 0.6s ease-out;
}

/* Section 4 - Social Proof: Blue background */
.section--blue {
  background: var(--blue);
}

.section--blue .section__inner {
  justify-items: center;
}



/* Gap 5.1 fixed: removed !important padding-top override that added 32px asymmetric top padding
   to Section 5. The 32px extra had no structural justification — standard --section-space-desktop
   applies uniformly per Olympic vertical rhythm guidelines. */

.section--blue .testimonial-carousel ~ .logo-placeholders {
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

/* Section 4 - White text on blue background */
.section--blue .section__inner > .section__title {
  grid-column: 1 / -1;
  text-align: center !important;
  margin-bottom: var(--space-lg);
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
}

.section--blue .section__title,
.section--blue .testimonial-card__quote,
.section--blue .testimonial-card__author,
.section--blue .testimonial-card__role {
  color: var(--white);
}

/* Gap 4.2 fixed: duplicate text-align centering for .section--blue removed here.
   The canonical rule is in the Swiss grid refactor block below (with explanatory comment).
   layout.css loads after components.css, so specificity battle managed by !important
   is resolved in the single later-cascade rule. */

.section--blue .testimonial-carousel {
  grid-column: 1 / -1;
  justify-content: center;
}

.section--blue .testimonial-card {
  margin: 0 auto;
  max-width: 800px;
  text-align: center;
}

.section--blue .testimonial-card__quote,
.section--blue .testimonial-card__author,
.section--blue .testimonial-card__role {
  margin-left: auto;
  margin-right: auto;
}

.section--blue .testimonial-card__role {
  color: rgba(255, 255, 255, 0.8); /* Slightly muted white for role text */
}

/* Ensure final-cta-section button doesn't stretch */
.final-cta-section .btn {
  display: inline-block;
  width: auto;
  max-width: none;
}

/* Section 2 (Common Challenges) — grey area aligns with package cards in section 5; same 1200px container + space-lg gutter */
.hero-section + .section {
  position: relative;
  will-change: auto;
  padding-top: calc(var(--section-padding-y) + var(--space-lg));
  padding-bottom: var(--section-space-desktop);
  background: var(--white);
  padding-left: 0;
  padding-right: 0;
}

/* Section 2 inner: same as section 5 — max-width 1200px, margin auto, padding 0 space-lg so grey aligns with package card edges */
.hero-section + .section .section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Grey wrapper: same width as package cards area (inner content); gutter space-lg for sides and between cards; vertical padding matches “above title / below button” */
.hero-section + .section .section-2__grey {
  background: var(--grey);
  border-radius: var(--radius-lg);
  padding: calc(var(--space-lg) * 2) var(--space-lg) calc(var(--space-lg) * 2) var(--space-lg);
  box-shadow: 0 4px 20px rgba(29, 29, 29, 0.06), 0 2px 10px rgba(29, 29, 29, 0.03);
}

/* Gap 2.1 fixed: replaced calc(--space-lg*2 - --space-md) = 40px (off token scale)
   with --space-xl: 48px (nearest on-scale token). */
/* Section 2: Load more button — space above matches padding below */
.hero-section + .section .section-2__load-more {
  text-align: center;
  margin-top: var(--space-xl);
}

/* Ensure consistent spacing: remove bottom margin from last element 
   so section padding controls the spacing uniformly */
.section__inner > *:last-child {
  margin-bottom: 0;
}

/* Section 5 packages title — canonical rule */
.section__inner:has(> .section__title + .packages-grid) > .section__title {
  grid-column: 2 / span 10;
  margin-bottom: var(--space-md);
}

/* Hero Section */
.hero-section {
  position: relative;
  z-index: 1;
  height: auto;
  display: block;
  background: var(--white);
  padding: var(--section-padding-y) 0;
}

.hero-section__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Gap 1.2 fixed: reduced margin-bottom from --space-lg (32px) to --space-sm (16px).
   Olympic proximity principle: tighten logo-to-headline grouping so brand mark
   reads as paired with the headline, not separated from it. */
.hero-section__logo {
  width: 80px;
  height: 80px;
  margin-bottom: var(--space-sm);
  flex-shrink: 0;
}

.hero-section__headline {
  margin: 0;
  line-height: var(--lh-tight);
  /* margin-bottom handled by parent gap */
  flex: 0 0 auto;
}

.hero-section__subhead {
  margin: 0;
  line-height: var(--lh-body);
  color: var(--muted);
  flex: 0 0 auto;
  max-width: 60ch;
}

/* Anchor scroll offset — compensates for fixed header so anchor targets are not hidden behind nav */
#approach-section,
#packages-section {
  scroll-margin-top: 100px;
}

/* Features Grid */
/* Process Section (“Our Approach”) */
/* Text left-aligned with grey section above; inner uses same 1200px + space-lg as section 2; FAQ card expands in remaining width. */
.section__inner:has(.approach-section) .section__header-text {
  grid-column: 1 / -1;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
}

.section__inner:has(.approach-section) .approach-section {
  grid-column: 1 / -1;
}

.process-step {
  flex: 0 0 100%; /* Each card takes full width of container */
  padding: var(--space-lg);
  border: 1px solid #d8d8d8;
  border-radius: var(--radius-md);
  background: var(--white);
  box-sizing: border-box;
  min-width: 0; /* Prevent flex items from overflowing */
  /* Match height with text area - stretch to fill container */
  display: flex;
  flex-direction: column;
  /* Ensure card can extend to match text area height */
  height: 100%;
  /* Ensure card content doesn't overflow */
  overflow: visible;
}

.process-step__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.process-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--blue);
  color: var(--white);
  border-radius: 50%;
  font-weight: var(--weight-bold);
  font-size: var(--font-size-body);
  /* Ensure perfect centering */
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
}

.process-step__title {
  margin: 0;
  flex: 1;
}

.process-step__description {
  color: var(--muted);
  font-size: var(--font-size-body);
}

.package-card {
  min-width: 0;
  box-sizing: border-box;
}

/* Testimonial Carousel */
.testimonial-carousel {
  display: grid;
  align-items: center;
  margin: 0;
  padding: 0;
}

.testimonial-card {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 800px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
  text-align: left;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  margin: 0 auto;
}

.testimonial-card--active {
  opacity: 1;
  pointer-events: auto;
}

/* Gap 4.1 fixed: replaced raw line-height: 1.35 with var(--lh-ui): 1.4.
   The quote is at --type-h3 size; --lh-ui: 1.4 is the closest appropriate token
   for above-body-size text in a pull quote context. Slightly more open than 1.35,
   correct for legibility at --font-size-label size. */
.testimonial-card__quote {
  font-size: var(--font-size-label);
  font-style: italic;
  margin-bottom: var(--space-sm);
  color: var(--text);
  line-height: var(--lh-ui);
}

.testimonial-card__author {
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-xs);
  color: var(--text);
  font-size: var(--font-size-body);
  display: block; /* Ensure it's visible */
}

.testimonial-card__role {
  color: var(--muted);
  font-size: var(--font-size-body);
  margin-bottom: 0;
  display: block; /* Ensure it's visible */
  /* Ensure role text is always visible */
  visibility: visible;
  opacity: 1;
}

/* Final CTA Section — content centered vertically, minimal gap between heading and button */
.final-cta-section {
  text-align: left;
  padding: calc(var(--space-xl) / 2) 0;
  display: block;
  min-height: auto;
}

.final-cta-section .section__inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* Gap 6.1 (CSS) fixed: increased font-size from --font-size-label (--type-h3) to
   --font-size-heading (--type-h2) to match all other section headings.
   Section 6 minimal content (one heading + one button) warrants a full section-heading
   size — undersizing created a "secondary" visual weight inconsistent with other sections.
   Note: HTML semantic change (<p> → <h2>) is deferred to plan 03-03. */
.final-cta-section__heading {
  font-size: var(--font-size-heading);
  font-weight: 700;
  margin: 0 0 var(--space-sm) 0;
  text-align: left;
}


.service-card {
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.service-card__title {
  margin-bottom: var(--space-sm);
}

.service-card__description {
  color: var(--muted);
  margin-bottom: var(--space-lg);
  flex: 1;
}

.service-card__cta {
  margin-top: auto;
}

.values-list ul {
  list-style: none;
  padding: 0;
}

.values-list li {
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  margin-bottom: var(--space-md);
}

.values-list li:last-child {
  margin-bottom: 0;
}

.values-list li h3 {
  margin-bottom: var(--space-sm);
}

/* Legacy responsive block removed; swiss grid media rules live below. */

/* -------------------------------------------------------------------------- */
/* Swiss modular grid refactor overrides                                      */
/* -------------------------------------------------------------------------- */

:root {
  --grid-columns-desktop: 12;
  --grid-columns-mobile: 4;
  --grid-gutter-desktop: 24px;
  --grid-gutter-mobile: 16px;
  --grid-padding-desktop: 24px;
  --grid-padding-mobile: 16px;
  --grid-max-width: 1200px;
  --section-space-desktop: clamp(48px, 5vw, 72px);
  --section-space-mobile: clamp(40px, 8vw, 56px);
  --hero-min-height: clamp(260px, 32vh, 340px);
}

main {
  padding-top: var(--space-3xl);
}

.site-header {
  padding: var(--space-md) 0;
}

.site-header__inner,
.hero-section__inner,
.section__inner,
.site-footer__inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding-left: var(--grid-padding-desktop);
  padding-right: var(--grid-padding-desktop);
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr));
  column-gap: var(--grid-gutter-desktop);
  row-gap: var(--space-sm);
  align-items: start;
}

.section {
  padding-top: var(--section-space-desktop) !important;
  padding-bottom: var(--section-space-desktop) !important;
}

.section__inner > * {
  grid-column: 1 / -1;
}

/* Explicit HTML grid modules/spans for visible structure */
.grid-module {
  grid-column: 1 / -1;
}

.grid-span-10 {
  grid-column: 1 / span 10;
}

.grid-span-8 {
  grid-column: 1 / span 8;
}

.grid-span-6 {
  grid-column: 1 / span 6;
}

.grid-span-4 {
  grid-column: 1 / span 4;
}

.site-header__logo {
  grid-column: 1 / span 4;
  justify-self: start;
}

.hero-section {
  min-height: var(--hero-min-height);
  height: auto;
  display: flex;
  align-items: center;
  padding-top: var(--section-space-desktop);
  padding-bottom: var(--section-space-desktop);
}

/* Gap 1.3 fixed: replaced uniform gap: --space-md with gap: 0 on container;
   use per-element margins to create differentiated proximity grouping.
   Olympic proximity principle: subhead + body are more closely related to
   each other than to the headline above them. */
.hero-section__content {
  grid-column: 3 / span 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: center;
  text-align: center;
  margin: 0 auto;
  max-width: none;
  gap: 0;
}

.hero-section__inner > h1,
.hero-section__inner > .type-headline,
.hero-section__inner > p,
.hero-section__inner > .subhead {
  grid-column: 1 / span 8;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.section__title,
.section__intro,
.final-cta-section__heading,
.testimonial-card,
.site-footer__copyright {
  text-align: left !important;
}

.section--blue .section__title {
  text-align: center !important;
  margin-bottom: var(--space-lg);
}

.section--blue .section__inner > .section__title {
  grid-column: 1 / -1;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
}

/* Gap 1.3: per-element margins for differentiated hero proximity grouping.
   headline → subhead: --space-sm (16px) — they're related but distinct.
   subhead → body: --space-xs (8px) — tightly paired; body elaborates the subhead.
   body → actions: --space-md (24px) — button group separated from text block. */
.hero-section__headline {
  margin-bottom: var(--space-sm);
}

.hero-section__subhead {
  margin-bottom: var(--space-xs);
}

.hero-section__body:last-of-type {
  margin-bottom: var(--space-md);
}

.hero-section__headline,
.hero-section__subhead {
  text-align: center !important;
}

/* Gap 1.1 fixed: max-width reduced from 80ch to 70ch.
   Olympic guideline: long text should not exceed 70ch per line. */
.hero-section__body {
  text-align: center;
  align-self: center;
  width: 100%;
  max-width: 70ch;
}

/* Blue section (testimonials): keep everything centered; override generic left-align above */
.section--blue,
.section--blue .section__inner,
.section--blue .testimonial-carousel,
.section--blue .testimonial-card,
.section--blue .testimonial-card__quote,
.section--blue .testimonial-card__author,
.section--blue .testimonial-card__role {
  text-align: center !important;
}

.hero-section__placeholder {
  text-align: center !important;
  margin: 0 auto;
  max-width: 52ch;
  color: var(--muted);
}

.hero-section__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  width: 100%;
}

.hero-section__actions .btn,
.hero-section__actions button {
  min-width: 202px;
}

.section__title {
  grid-column: 2 / span 8;
  margin-bottom: var(--space-md);
}

.section__intro {
  grid-column: 2 / span 8;
  margin: 0;
  max-width: 60ch;
}

.section-2__grey {
  grid-column: 2 / span 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: calc(var(--space-lg) * 2) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--grey);
}

/* Section 2: prevent double-spacing between heading and intro — gap handles it */
.section-2__grey .section__title {
  margin-bottom: 0;
}

/* Section 2: extra space between intro text and the cards below */
.section-2__grey .section__intro {
  margin-bottom: var(--space-lg);
  max-width: 100%;
}

/* Gap 2.1 (Swiss grid rule): replaced calc off-scale value with --space-xl token. */
.section-2__load-more {
  text-align: center;
  margin-top: var(--space-xl);
}

.features-grid,
.packages-grid,
.service-cards-grid,
.process-steps {
  grid-column: 2 / span 10;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--space-md);
}

.features-grid,
.packages-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Section 5: 4th card (a la carte) spans full width at desktop */
.package-card--wide {
  grid-column: 1 / -1;
}

/* Mid-range stabilization window: preserve desktop composition while avoiding cramped card/button states */
@media (min-width: 768px) and (max-width: 1045px) {
  /* 2-column layout at mid-breakpoint: carousel shows 2 cards side-by-side (RESP-02) */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  /* Normalize section-2 title row height so varying title wraps don't create visual jitter */
  .feature-card__content-inner {
    display: grid;
    grid-template-rows: auto minmax(4.5em, auto) 1fr;
    align-content: start;
  }

  .feature-card__title {
    margin-bottom: 0;
  }

  .feature-card__description {
    margin-top: var(--space-sm);
  }

  /* Section 5: 2×2 grid at mid-breakpoint — all 4 cards equal size (RESP-03) */
  .packages-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* At mid-breakpoint, a la carte card is equal size — no full-width spanning */
  .package-card--wide {
    grid-column: auto;
  }

  .section__inner:has(> .section__title + .packages-grid) > .section__title {
    grid-column: 2 / span 10;
  }
}

.features-grid > *,
.packages-grid > *:not(.package-card--wide) {
  grid-column: auto;
  min-width: 0;
}

.packages-grid > .package-card--wide {
  min-width: 0;
}

.service-cards-grid > *,
.process-steps > * {
  grid-column: span 3;
  min-width: 0;
}

.section__inner:has(.approach-section) .section__header-text {
  grid-column: 2 / span 10;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
}

/* Gap 3.1 fixed: removed max-width: none override on Section 3 header paragraph.
   At desktop (column ~95ch wide), unrestricted paragraph line length far exceeds
   the Olympic 70ch upper limit. Removing this override allows the global p { max-width: 60ch }
   to apply — keeping text within the 40–70ch readable range. */

.section__inner:has(.approach-section) {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter-desktop);
  row-gap: var(--space-md);
  align-items: start;
}

/* Gap 3.2 resolved: removed legacy padding-bottom: --space-xl (48px) after buyer-eye review
   confirmed the extra bottom padding inside the approach-section contributed to the Section 2→3
   visual gap reading as too large. The two-column layout no longer needs this workaround —
   the Swiss grid alignment is correct without it. Section's own --section-space-desktop padding
   provides the correct vertical rhythm. */
.section__inner:has(.approach-section) .approach-section {
  grid-column: 2 / span 10;
  width: 100%;
  margin: 0;
  padding-bottom: 0;
}

.process-step {
  padding: var(--space-lg);
  box-shadow: none;
}

.testimonial-carousel {
  grid-column: 2 / span 10;
}

.testimonial-card {
  max-width: 100%;
  margin: 0;
}

.values-list {
  grid-column: 1 / span 8;
  max-width: none;
  margin: 0;
}

.card {
  grid-column: 1 / span 8;
}

.final-cta-section {
  min-height: auto;
}

.final-cta-section .section__inner {
  justify-items: center;
  text-align: left;
}

.final-cta-section .section__inner > * {
  grid-column: 4 / span 6;
  text-align: left !important;
}

.contact-form,
.contact-modal__form {
  grid-column: 1 / span 6;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.modal__content .contact-modal__form {
  grid-column: 1 / -1;
  width: 100%;
  justify-self: center;
  align-self: start;
  height: auto;
}

.contact-form__field {
  margin-bottom: 0;
}

.contact-form__actions {
  margin-top: 0;
  margin-bottom: 0;
  justify-content: flex-start;
}

.modal__content {
  max-width: 520px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.modal__close {
  top: var(--space-md);
  right: var(--space-md);
}

.site-footer {
  padding: var(--space-md) 0 var(--space-md);
}

.site-footer__social {
  grid-column: 1 / span 6;
  justify-content: flex-start;
  margin-bottom: 0;
}

/* Gap 7.1: restored border-top: none override after buyer-eye review confirmed the divider
   line creates visual noise in the minimal footer — the social icons and copyright read more
   cleanly without a separating rule. Olympic principle: "use lines purposefully" — this line
   adds no compositional value in a two-row footer this compact. */
.site-footer__copyright {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--space-sm);
  padding-bottom: 0;
  border-top: none;
}

.site-footer .site-footer__inner {
  justify-items: center;
  row-gap: 0;
}

.site-footer .site-footer__social {
  grid-column: 4 / span 6;
  justify-content: center;
}

.site-footer .site-footer__copyright {
  grid-column: 4 / span 6;
  text-align: center;
}

@media (min-width: 577px) and (max-width: 768px) {
  .site-header__inner,
  .hero-section__inner,
  .section__inner,
  .site-footer__inner {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 24px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .section {
    padding-top: clamp(40px, 6vw, 56px) !important;
    padding-bottom: clamp(40px, 6vw, 56px) !important;
  }

  .site-header__logo,
  .grid-module,
  .grid-span-10,
  .grid-span-8,
  .grid-span-6,
  .grid-span-4,
  .hero-section__content,
  .hero-section__inner > h1,
  .hero-section__inner > .type-headline,
  .hero-section__inner > p,
  .hero-section__inner > .subhead,
  .section__title,
  .section__intro,
  .section-2__grey,
  .section-2__grey > .section__title,
  .section-2__grey > .section__intro,
  .section-2__grey > .features-grid,
  .section-2__grey > .section-2__load-more,
  .values-list,
  .card,
  .contact-form,
  .contact-modal__form,
  .site-footer__social,
  .site-footer__copyright,
  .final-cta-section .section__inner > * {
    grid-column: 1 / -1;
  }

  .service-cards-grid,
  .process-steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  .service-cards-grid > *,
  .process-steps > * {
    grid-column: span 3;
  }

  .features-grid,
  .packages-grid {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .section__inner:has(> .section__title + .packages-grid) > .section__title {
    grid-column: 1 / -1;
  }

  .section__inner:has(.approach-section) .section__header-text,
  .section__inner:has(.approach-section) .approach-section {
    grid-column: 1 / -1;
  }

  .testimonial-carousel {
    grid-column: 1 / -1;
  }

  .section--blue .section__inner > .section__title {
    margin-bottom: var(--space-md);
  }

  .section--blue .section__inner {
    row-gap: 0;
  }

  .final-cta-section .section__inner {
    justify-items: center;
  }

  .site-footer .site-footer__social,
  .site-footer .site-footer__copyright {
    grid-column: 1 / -1;
    text-align: center;
    justify-content: center;
  }

  .modal__content {
    padding: var(--space-lg) var(--space-md);
  }
}

@media (max-width: 576.999px) {
  main {
    padding-top: var(--space-2xl);
  }

  .site-header {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }

  .site-header__inner,
  .hero-section__inner,
  .section__inner,
  .site-footer__inner {
    grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
    column-gap: var(--grid-gutter-mobile);
    row-gap: var(--space-sm);
    padding-left: var(--grid-padding-mobile);
    padding-right: var(--grid-padding-mobile);
  }

  .section {
    padding-top: var(--section-space-mobile) !important;
    padding-bottom: var(--section-space-mobile) !important;
  }

  .hero-section {
    min-height: auto;
    padding-top: var(--section-space-mobile);
    padding-bottom: calc(var(--section-space-mobile) + var(--section-space-mobile));
  }

  .hero-section__body:last-of-type {
    margin-bottom: var(--space-lg);
  }

  /* Gap 5.1 fixed: removed mobile !important padding-top override for Section 5.
     Standard --section-space-mobile applies uniformly across all sections. */

  .site-header__logo,
  .grid-module,
  .grid-span-10,
  .grid-span-8,
  .grid-span-6,
  .grid-span-4,
  .hero-section__content,
  .hero-section__inner > h1,
  .hero-section__inner > .type-headline,
  .hero-section__inner > p,
  .hero-section__inner > .subhead,
  .section__title,
  .section__intro,
  .section-2__grey,
  .section-2__grey > .section__title,
  .section-2__grey > .section__intro,
  .section-2__grey > .features-grid,
  .section-2__grey > .section-2__load-more,
  .values-list,
  .card,
  .contact-form,
  .contact-modal__form,
  .site-footer__social,
  .site-footer__copyright,
  .final-cta-section .section__inner > * {
    grid-column: 1 / -1;
  }

  .site-footer .site-footer__social,
  .site-footer .site-footer__copyright {
    grid-column: 1 / -1;
    text-align: center;
    justify-content: center;
  }

  .final-cta-section .section__inner {
    justify-items: center;
  }

  .section__inner:has(> .section__title + .packages-grid) > .section__title {
    grid-column: 1 / -1;
  }

  .section-2__grey {
    padding: var(--space-lg) var(--space-md);
  }

  .features-grid,
  .packages-grid {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .service-cards-grid,
  .process-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  .features-grid > *,
  .packages-grid > *,
  .service-cards-grid > *,
  .process-steps > * {
    grid-column: 1 / -1;
  }

  .section__inner:has(.approach-section) .section__header-text,
  .section__inner:has(.approach-section) .approach-section {
    grid-column: 1 / -1;
  }

  .modal__content {
    padding: var(--space-lg) var(--space-md);
  }

  /* Blue section: some padding below title on mobile (between heading and testimonial carousel) */
  .section--blue .section__inner > .section__title {
    margin-bottom: var(--space-md);
  }
  .section--blue .section__inner {
    row-gap: 0;
  }

}