/*
 * Hybrid layout shell
 *
 * Section backgrounds and selected media bands remain full width, while the
 * readable content area stops growing on large screens. Existing mobile
 * spacing remains unchanged.
 */
:root {
  --ator-content-max: 1320px;
  --ator-fluid-gutter: clamp(24px, 6vw, 96px);
  --ator-container-pad: max(
    var(--ator-fluid-gutter),
    calc((100vw - var(--ator-content-max)) / 2)
  );
}

/* Full-width bands with a centered, bounded content area. */
.site-header,
main > section:not(.trust-strip):not(.production-gallery):not(.buyer-trust):not(.process-image),
.site-footer .footer-main,
.site-footer .footer-bottom {
  padding-left: var(--ator-container-pad);
  padding-right: var(--ator-container-pad);
}

/* Align the header action with the footer's right container edge. */
.site-header .header-cta {
  margin-right: 0;
}

/* Align positioned hero metadata with the same content edge. */
.hero .hero-note {
  right: var(--ator-container-pad);
}

/* Image-led content remains visually wide but follows the container rhythm. */
main > .process-image {
  margin-left: var(--ator-container-pad);
  margin-right: var(--ator-container-pad);
}

/* Deliberate full-width exceptions: card strips and production imagery. */
main > .trust-strip,
main > .production-gallery,
main > .buyer-trust {
  width: 100%;
  max-width: none;
}

@media (max-width: 800px) {
  :root {
    --ator-container-pad: 24px;
  }

  .site-header .header-cta {
    margin-right: 0;
  }

  main > .process-image {
    margin-left: var(--ator-container-pad);
    margin-right: var(--ator-container-pad);
  }
}

@media (max-width: 390px) {
  :root {
    --ator-container-pad: 20px;
  }
}

/* Homepage section headings share the process section's left content edge. */
main:has(> .hero) > .intro,
main:has(> .hero) > .sectors,
main:has(> .hero) > .faq,
main:has(> .hero) .services-head,
main:has(> .hero) .reference-projects-head {
  display: block;
  text-align: left;
}

main:has(> .hero) > .intro > .section-label,
main:has(> .hero) > .sectors > .section-label,
main:has(> .hero) > .faq > .section-label,
main:has(> .hero) .services-head > .section-label,
main:has(> .hero) .reference-projects-head > .section-label {
  margin-bottom: 24px;
}

/* Full-width section boxes must accommodate the bounded content gutters. */
main > .legal-page {
  max-width: none;
}

.branch-refresh > section {
  padding-left: var(--ator-container-pad);
  padding-right: var(--ator-container-pad);
}

/* Translated headings and narrow grid cells may wrap without being clipped. */
main h1,
main h2,
main h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.contact-page-hero > *,
.contact-page-main > *,
.simple-contact-form,
.simple-contact-form .form-grid > *,
.simple-contact-form input,
.simple-contact-form select,
.simple-contact-form textarea,
.branch-service-row > *,
.branch-profile-card > *,
.next-steps-grid > * {
  min-width: 0;
}

/* Keep the translation notice below the fixed navigation. */
.legal-translation-note {
  margin-top: 102px;
}

/* Switch to the compact navigation before desktop items crowd each other. */
@media (min-width: 801px) and (max-width: 1100px) {
  .site-header .desktop-nav,
  .site-header .header-cta {
    display: none;
  }

  .site-header .brand {
    flex: none;
  }

  .site-header .ator-language {
    order: 3;
    margin-left: auto;
    margin-right: 12px;
  }

  .site-header .mobile-menu {
    display: block;
    order: 4;
    margin-left: 0;
  }

  .mobile-menu .mobile-menu-section {
    border-bottom: 1px solid #ffffff1f;
  }

  .mobile-menu .mobile-menu-section > summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 58px;
    padding: 15px 0;
    border: 0;
    color: #d7b49d;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .mobile-menu .mobile-menu-section > summary::after {
    content: "+";
    color: #fff;
    font-family: var(--font-sans);
    font-size: 24px;
    line-height: 1;
  }

  .mobile-menu .mobile-menu-section[open] > summary::after {
    transform: rotate(45deg);
  }

  .mobile-menu .mobile-menu-section > a {
    padding-left: 10px;
  }
}

@media (min-width: 1101px) and (max-width: 1280px) {
  .site-header .desktop-nav {
    gap: 22px;
    font-size: 13px;
  }

  .site-header .header-cta {
    width: 205px;
    margin-left: 18px;
    font-size: 12px;
  }
}

@media (max-width: 800px) {
  .legal-translation-note {
    margin-top: 94px;
  }
}