/*
 * Homepage grid: the visual sections share one outer rail, while navigation
 * and editorial/product content sit on one consistent inner rail.
 */
:root {
  --home-outer: 1280px;
  --home-inner: 960px;
  --home-gutter: 24px;
  --home-inset: calc((var(--home-outer) - var(--home-inner)) / 2);
}

.header {
  padding-left: max(var(--home-gutter), calc((100vw - var(--home-inner)) / 2));
  padding-right: max(var(--home-gutter), calc((100vw - var(--home-inner)) / 2));
}

.home-carousel,
.hot-products,
.quote-banner,
.profile-section,
.new-showcase,
.client-voices,
.news-section,
.contact,
.site-footer {
  box-sizing: border-box;
  width: min(var(--home-outer), 100%);
  max-width: var(--home-outer);
  margin-left: auto;
  margin-right: auto;
}

/* The carousel belongs to the outer visual rail; its image no longer leaks wider. */
.home-carousel { max-width: var(--home-outer); }

/* Content placed inside colored/visual modules follows the 960px inner rail. */
.hot-products { padding-left: var(--home-inset); padding-right: var(--home-inset); }
.profile-section { padding-left: var(--home-inset); padding-right: var(--home-inset); }
.new-showcase { padding-left: var(--home-inset); padding-right: var(--home-inset); }
.client-voices { padding-left: var(--home-inset); padding-right: var(--home-inset); }
.news-section { padding-left: var(--home-inset); padding-right: var(--home-inset); }
.contact { padding-left: var(--home-inset); padding-right: var(--home-inset); }
.site-footer { padding-left: var(--home-inset); padding-right: var(--home-inset); }

@media (max-width: 1280px) {
  .header { padding-left: var(--home-gutter); padding-right: var(--home-gutter); }
  .home-carousel,
  .hot-products,
  .quote-banner,
  .profile-section,
  .new-showcase,
  .client-voices,
  .news-section,
  .contact,
  .site-footer { width: 100%; max-width: none; }
  .hot-products,
  .profile-section,
  .new-showcase,
  .client-voices,
  .news-section,
  .contact,
  .site-footer { padding-left: max(var(--home-gutter), 12.5vw); padding-right: max(var(--home-gutter), 12.5vw); }
}

@media (max-width: 900px) {
  .header { padding-left: 18px; padding-right: 18px; }
  .hot-products,
  .profile-section,
  .new-showcase,
  .client-voices,
  .news-section,
  .contact,
  .site-footer { padding-left: 24px; padding-right: 24px; }
}