/* Shared responsive safeguards for Suiting Club pages. */
html { max-width: 100%; overflow-x: hidden; }
body { min-width: 0; max-width: 100%; overflow-x: hidden; }
main, section, header, footer, .container { min-width: 0; }
img, picture, video, canvas, svg { max-width: 100%; }
input, textarea, select, button { max-width: 100%; }

footer .footer-columns > div > span {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .06em;
}

@media (min-width: 801px) {
  footer .footer-columns {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    align-items: start;
  }
}

@media (max-width: 1100px) {
  .header-inner { gap: 20px; }
  .main-nav { gap: 13px; }
  .header-socials { gap: 12px; }
  .header-socials .social-inline { gap: 12px; }
}

@media (max-width: 800px) {
  .header-inner { gap: 14px; }
  .header-actions { margin-left: auto; }
  .brand strong { font-size: 16px; }
  .section-heading, .reviews-heading { gap: 22px; }
  .intro-grid p:not(.eyebrow) { font-size: 19px; }
  .contact-buttons .button { justify-content: center; }
}

@media (max-width: 640px) {
  footer .footer-columns > div > span { font-size: 14px; }
  .section { padding: 72px 0; }
  .hero { min-height: 640px; }
  .hero-content { padding-top: 64px; }
  .hero h1 { font-size: clamp(42px, 13vw, 56px); line-height: .9; }
  .hero-copy { max-width: 100%; font-size: 15px; }
  .hero-actions { width: min(100%, 320px); }
  .intro-band { padding: 28px 0; }
  .intro-grid p:not(.eyebrow) { font-size: 18px; }
  .section-heading h2, .center-heading h2, .contact h2 { font-size: clamp(40px, 12vw, 52px); }
  .image-stack { width: calc(100% - 20px); }
  .image-stack img { height: min(120vw, 480px); }
  .image-badge { right: -10px; bottom: 18px; padding: 15px; }
  .image-badge strong { font-size: 31px; }
  .value-list { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .product-image { height: min(105vw, 390px); }
  .product-info p { min-height: auto; }
  .contact-buttons { align-items: stretch; flex-direction: column; }
  .contact-buttons .button { width: 100%; }
  .contact-form { padding: 28px 22px; }
  .footer-top > p { margin-bottom: 36px; }
  .footer-bottom { align-items: flex-start; }
  .footer-socials { flex-wrap: wrap; }
  .showcase-content h2 { font-size: clamp(56px, 18vw, 84px); }
}

@media (max-width: 380px) {
  .container { width: calc(100% - 28px); }
  .header-inner { width: calc(100% - 28px); }
  .brand strong { font-size: 14px; }
  .brand small { font-size: 7px; }
  .hero h1 { font-size: 42px; }
  .hero-title-static { font-size: .42em; }
  .hero-copy { overflow-wrap: anywhere; }
  .hero-look-selector > span { display: none; }
  .section-heading h2, .center-heading h2, .contact h2 { font-size: 39px; }
}

/* Shared page alignment: generous but consistent desktop gutters, with a premium capped measure. */
:root { --page-max-width: 1560px; --page-gutter: 5.5vw; }
.container,
.header-inner { width: min(var(--page-max-width), calc(100% - 11vw)); }

/* The hero intentionally retains its established composition and alignment. */
.hero .container { width: min(1180px, calc(100% - 48px)); }

/* These two editorial sections had more vertical breathing room than the rest of the page. */
.clients { padding: 92px 0; }
.clients .center-heading { margin-bottom: 34px; }

@media (max-width: 800px) {
  .header-inner { width: calc(100% - 11vw); }
}

@media (max-width: 520px) {
  .container,
  .header-inner { width: calc(100% - 32px); }
  .hero .container { width: calc(100% - 32px); }
  .clients { padding: 72px 0; }
}

/* Separate the adjacent About and Contact sections without changing their layout. */
.contact { background: #eeebe4; }

.footer-credit strong { color: var(--gold); font-weight: 700; }