/* ==========================================================================
   LAYOUT — macro structure (grids, flex, positioning) per section
   ========================================================================== */

/* ---------- Site header / nav ---------- */
.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
}
.header__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2.2rem 3.2rem;
  max-width:118rem;
  margin:0 auto;
}
.header__brand{
  display:flex;
  align-items:center;
  gap:1.1rem;
}
.header__links{
  display:flex;
  gap:3.6rem;
}
.header__toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
}
.hero__inner{
  max-width:118rem;
  margin:0 auto;
  padding:0 3.2rem 9.6rem;
  width:100%;
}
.hero__actions{
  margin-top:4rem;
  display:flex;
  gap:1.8rem;
  align-items:center;
  flex-wrap:wrap;
}

/* ---------- Trust bar ---------- */
.trust__inner{
  max-width:118rem;
  margin:0 auto;
  padding:0 3.2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.6rem;
  text-align:center;
}
.trust__names{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
}
.trust__row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.2rem 3.2rem;
}
/* Below 900px the first group (~84rem wide) no longer fits on one line, so the
   groups dissolve and all names share one wrapping flow — no orphan lines. */
@media (max-width: 900px){
  .trust__names{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:1.2rem 2.4rem; }
  .trust__row{ display:contents; }
}

/* ---------- About (Z pattern) ---------- */
.about__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7.2rem;
  align-items:center;
}
.about__media{ position:relative; }

/* ---------- Solutions + Gallery (full-bleed) ---------- */
.solutions-gallery__row{
  display:grid;
  grid-template-columns:minmax(38rem, 1fr) minmax(42rem, 1fr);
  grid-template-areas:
    "text images"
    "dept images";
  align-items:start;
}
.solutions-gallery__intro{
  grid-area:text;
  padding:9.6rem clamp(3.2rem, 5vw, 7.2rem) 9.6rem clamp(3.2rem, 6vw, 8rem);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.solutions-gallery__title-break{ display:none; }
@media (min-width:901px){ .solutions-gallery__title-break{ display:inline; } }

.solutions-gallery__departments{
  grid-area:dept;
  align-self:center;
  margin-top:6.4rem;
  padding:4.8rem clamp(3.2rem, 6vw, 8rem) 9.6rem clamp(3.2rem, 6vw, 8rem);
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  row-gap:4rem;
  column-gap:3.2rem;
}
.solutions-gallery__department{
  display:flex;
  gap:1.4rem;
  align-items:flex-start;
}

.solutions-gallery__gallery{
  grid-area:images;
  align-self:center;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  align-content:center;
  gap:0.8rem;
  padding-right:1.6rem;
}
.solutions-gallery__gallery-item{ overflow:hidden; position:relative; aspect-ratio:4/3; }
.solutions-gallery__gallery-item--tall{ grid-row:span 2; }
.solutions-gallery__gallery-item--wide{ grid-column:span 2; }

@media (max-width: 1600px) and (min-width: 901px){
  .solutions-gallery__row{
    grid-template-areas:
      "text images"
      "dept dept";
  }
  .solutions-gallery__departments{
    padding-top:9.6rem;
    padding-left:3.2rem;
    padding-right:3.2rem;
    padding-bottom:9.6rem;
    max-width:118rem;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    grid-template-columns:repeat(4, 1fr);
  }
}

/* ---------- Solutions grid (Production Solutions cards) ---------- */
.solutions__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
}

/* ---------- Vertical video ---------- */
.vertical-video__grid{
  display:grid;
  grid-template-columns:34rem 1fr;
  gap:6.4rem;
  align-items:center;
}
.vertical-video__visual{
  position:relative;
  aspect-ratio:9/16;
  max-width:34rem;
  overflow:hidden;
}

/* ---------- Team ---------- */
.team__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:4rem;
}
.team__photo{
  aspect-ratio:1/1;
  overflow:hidden;
  margin-bottom:2rem;
  position:relative;
}

/* ---------- Contact ---------- */
.contact__card{
  max-width:108rem;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  overflow:hidden;
}
.contact__form-col{ padding:0 3.2rem 0 0; margin:6.4rem 0 6.4rem 5.6rem; }
.contact__form{ max-width:46rem; }
.contact__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  margin-bottom:1.6rem;
}
.contact__field{ display:flex; flex-direction:column; gap:0.7rem; }
.contact__field--full{ grid-column:1 / -1; }
.contact__media{ position:relative; overflow:hidden; }

/* ---------- Footer ---------- */
.site-footer__inner{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:3.2rem;
}
.site-footer__brand{
  display:flex;
  align-items:center;
  gap:1rem;
}
.site-footer__top{
  flex-basis:100%;
  display:flex;
  flex-direction:column;
  gap:2.8rem;
  padding-bottom:3.2rem;
  border-bottom:1px solid var(--line);
}
.site-footer__social-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:2rem 4rem;
}
.site-footer__cols{
  flex-basis:100%;
  display:grid;
  /* Content-width columns spread edge to edge: equal gaps, and the last column
     ends flush with the share icons above. */
  grid-template-columns:repeat(3, auto);
  justify-content:space-between;
  gap:4.8rem 4rem;
}
@media (max-width: 900px){
  .site-footer__cols{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .site-footer__cols{ grid-template-columns:1fr; }
}
.site-footer__bottom{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:subgrid;
  row-gap:1.2rem;
  margin-top:0.8rem;
  padding-top:2.4rem;
}

/* ==========================================================================
   RESPONSIVE — layout adjustments per breakpoint
   ========================================================================== */
@media (max-width: 1340px){
  .solutions-gallery__gallery{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 900px){
  .header__links{ display:none; }
  .header__nav{ padding:1.6rem 2rem; }
  .hero{ align-items:flex-start; }
  .hero__inner{ padding-top:9.6rem; padding-bottom:5.6rem; }

  .solutions-gallery__row{
    grid-template-columns:1fr;
    grid-template-areas:
      "text"
      "images"
      "dept";
  }
  .solutions-gallery__intro{ padding:5.6rem 2rem; }
  .solutions-gallery__departments{ padding:4.8rem 2rem 6.4rem; max-width:none; grid-template-columns:1fr 1fr; gap:2rem 1.4rem; }
  .solutions-gallery__gallery{ grid-template-columns:1fr 1fr; padding:0 2rem; }

  .about__grid{ grid-template-columns:1fr; }
  /* Stacked: the next section's intro brings its own top padding, so trim both
     sides of the seam to match the gap above About. */
  .about{ padding-bottom:2.4rem; }
  .solutions-gallery{ padding-top:0; }

  .vertical-video__grid{ grid-template-columns:1fr; gap:3.2rem; }
  .vertical-video__visual{ max-width:22rem; margin:0 auto; }

  .solutions__grid{ grid-template-columns:1fr 1fr; }

  .team__grid{ grid-template-columns:1fr; gap:3.2rem; }

  /* minmax(0, …): a plain 1fr column never shrinks below its widest content
     (the category select), which pushed the form past the card edge. */
  .contact__card{ grid-template-columns:minmax(0, 1fr); }
  .contact__media{ min-height:26rem; order:-1; }
  .contact__form-col{ padding:3.6rem 2.4rem 4.4rem; margin:0; }

  .about__stat{ left:1.6rem; bottom:-2rem; padding:1.8rem 2rem; }
}

@media (max-width: 620px){
  .solutions__grid{ grid-template-columns:1fr; }
  .solutions-gallery__gallery{ grid-template-columns:1fr 1fr; }
  .solutions-gallery__departments{ grid-template-columns:1fr; gap:1.6rem; }
  .contact__row{ grid-template-columns:minmax(0, 1fr); }
  .trust__inner{ flex-direction:column; align-items:flex-start; gap:2rem; }
}

/* ---------- Header: theme toggle ---------- */
.header__actions{
  display:flex;
  align-items:center;
  gap:1.8rem;
}
.header__theme{
  display:flex;
  align-items:center;
  justify-content:center;
  width:3.6rem;
  height:3.6rem;
  flex-shrink:0;
}
.header__theme-icon{ width:1.9rem; height:1.9rem; }
/* Only the icon for the *other* mode is shown — it previews the click. */
:root[data-theme="light"] .header__theme-icon--moon{ display:block; }
:root[data-theme="light"] .header__theme-icon--sun{ display:none; }
:root:not([data-theme="light"]) .header__theme-icon--moon{ display:none; }
:root:not([data-theme="light"]) .header__theme-icon--sun{ display:block; }

/* ---------- Contact: benefits above the form ---------- */
.contact__benefits{
  max-width:108rem;
  margin:0 auto 6.4rem;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:3.6rem;
}
@media (max-width: 900px){
  .contact__benefits{ grid-template-columns:1fr 1fr; gap:2.8rem; margin-bottom:4.8rem; }
}
/* Phones: one box per row */
@media (max-width: 620px){
  .contact__benefits{ grid-template-columns:1fr; gap:3.2rem; }
}

/* ---------- Mobile menu (<= 900 px) ----------
   Header shows only brand + menu button; links, CTA and theme switch move into
   a full-screen panel. The panel sits just below the header (z-index 99), so
   brand and close button stay on top of it. */
.mobile-menu{ display:none; }
@media (max-width: 900px){
  .header__toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:0.6rem;
    width:4.4rem;
    height:4.4rem;
    margin-right:-1rem;
  }
  .header__actions .header__theme,
  .header__actions .header__cta{ display:none; }

  .mobile-menu{
    display:block;
    position:fixed;
    inset:0;
    z-index:99;
    overflow-y:auto;
    visibility:hidden;
    opacity:0;
  }
  .menu-open .mobile-menu{ visibility:visible; opacity:1; }
  .menu-open body{ overflow:hidden; }

  .mobile-menu__inner{
    min-height:100%;
    display:flex;
    flex-direction:column;
    padding:10rem 2rem 4rem;
  }
  .mobile-menu__footer{
    margin-top:auto;
    padding-top:4.8rem;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1.6rem;
  }
  .mobile-menu__cta{ align-self:stretch; text-align:center; }
  .mobile-menu__theme{ display:flex; align-items:center; gap:1rem; }
}