/* ======================================================================
   THE FRAME
   Every section on the site used to carry its own idea of where the page
   begins. At 1600px the left edge of the content landed at 140, 160, 196,
   210 or 280 depending on which section you were looking at, and the
   subpages disagreed with the landing page. One measure, one gutter, one
   rule — loaded last so it settles the argument.

   Full-bleed blocks are the deliberate exceptions: the globe stage and the
   logo ticker are meant to run to the edge of the glass.
   ====================================================================== */
:root {
  --sa-frame:     1180px;                    /* the measure every section shares */
  --sa-frame-gut: clamp(20px, 3.4vw, 56px);  /* the least air at the page's edge */
}

.sa-net-in,
.sa-net-note-in,
.sa-proof-in,
.sa-ab-in,
.sa-pillars-in,
.sa-cta .sa-cta-inner,
.sa-cta.is-demo .sa-cta-inner,
.sa-gal .sa-gal-in,
.sa-gal.is-page .sa-gal-in,
.sa-gal.is-sol .sa-gal-in,
.sa-foot .sa-foot-in {
  width: min(var(--sa-frame), 100% - 2 * var(--sa-frame-gut));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* the foot keeps its own vertical rhythm, only its sides are handed over */
.sa-foot .sa-foot-in {
  padding-top: clamp(52px, 6.2vw, 92px);
  padding-bottom: clamp(26px, 3vw, 40px);
}

/* The sections themselves stop setting a side gutter of their own — the CTA
   carried 80px, the demo variant a clamp, and those stacked on top of the
   wrapper's own inset so the same block sat further in than its neighbours.
   The wrapper alone decides where the page begins. */
.sa-net,
.sa-proof,
.sa-cta,
.sa-cta.is-demo,
.sa-gal,
.sa-gal.is-page,
.sa-ab-hero,
.sa-found,
.sa-pillars,
.sa-team,
.sa-office,
.sa-case,
.sa-foot {
  padding-left: 0;
  padding-right: 0;
}

/* a later sheet narrows this one on small screens; the frame outranks it */
.sa-pillars .sa-pillars-in,
.sa-gal.is-sol .sa-gal-in,
.sa-gal.is-page .sa-gal-in {
  width: min(var(--sa-frame), 100% - 2 * var(--sa-frame-gut));
}

/* The handful of pages still on the old template keep their own containers,
   which start 50px further in than everything else on the site. They are
   brought onto the same edge here rather than left as the odd ones out. */
/* the old template's own section gutters, on top of everything else */
.page-wrapper [class^="section_"],
.page-wrapper [class*=" section_"],
.page-wrapper .padding-global-p4d,
.page-wrapper .padding-global {
  padding-left: 0;
  padding-right: 0;
}
.page-wrapper .container-large,
.page-wrapper .container-medium,
.page-wrapper .container-small {
  width: min(var(--sa-frame), 100% - 2 * var(--sa-frame-gut));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* The old template floated its subpage content on a rounded card inset from
   the page edge — a different shape from every section on the rest of the
   site. It becomes a plain band like the others: full width, square, and
   its contents on the shared measure. */
.page-wrapper .content_contact,
.page-wrapper .content_logo,
.page-wrapper .project-content {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}

/* A carousel on one of the old pages was sized for a container that no
   longer has side padding, so on a phone it ran 22px past the edge. */
.page-wrapper .portfolio11_list,
.page-wrapper .portfolio11_component,
.page-wrapper .w-dyn-items {
  max-width: 100%;
}
.page-wrapper .portfolio11_item,
.page-wrapper .portfolio11_image-wrapper,
.page-wrapper .portfolio11_image { max-width: 100%; }
body .page-wrapper .portfolio11_list {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
body .page-wrapper .portfolio11_list > * { min-width: 0; }
@media (max-width: 620px) {
  body .page-wrapper .portfolio11_list { grid-template-columns: 1fr; }
}