/* ==================================================
   LAYOUT
   Purpose:
   Page scaffolding — containers, full-width bands,
   the responsive grid primitives every card section
   reuses, section headings and the page hero used by
   inner (service / technology / industry / location)
   pages.
================================================== */

/* ==================================================
   CONTAINER
   One horizontal gutter definition for the whole site
   so every section lines up on a shared left edge.
================================================== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

/* ==================================================
   SECTION BANDS
   Vertical rhythm and surface treatment. Modifiers pick
   the background; padding stays constant so the page
   reads as an even stack.
================================================== */

.section {
  position: relative;
  padding-block: var(--section-padding);
}

.section--sm     { padding-block: var(--section-padding-sm); }
.section--tight  { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--muted  { background-color: var(--surface-muted); }
.section--sunken { background-color: var(--surface-sunken); }

/* Dark feature band. Used for the process, CTA and technology-expertise
   sections so the page breathes between light stretches of cards. */
.section--dark {
  background: var(--gradient-night);
  color: var(--color-on-dark-muted);
  isolation: isolate;
}

.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark .section-heading__title {
  color: var(--color-on-dark);
}

.section--dark .section-heading__lead,
.section--dark .text-lead {
  color: var(--color-on-dark-muted);
}

/* Faint engineering grid, drawn in CSS so it costs no request. */
.section--grid-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
  pointer-events: none;
}

/* Hairline divider between two same-coloured bands. */
.section--divided {
  border-top: 1px solid var(--color-border);
}

/* ==================================================
   SECTION HEADING
   Shared eyebrow / title / lead cluster that opens
   nearly every section on the site.
================================================== */

.section-heading {
  max-width: 720px;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading--wide { max-width: 860px; }

.section-heading__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-600);
}

.section-heading__eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--brand-500);
  border-radius: var(--radius-pill);
}

.section--dark .section-heading__eyebrow {
  color: var(--brand-300);
}

.section-heading--center .section-heading__eyebrow::before {
  display: none;
}

.section-heading__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--s-4);
}

.section-heading__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 62ch;
}

.section-heading--center .section-heading__lead {
  margin-inline: auto;
}

/* Heading on the left, supporting action on the right. */
.section-heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.section-heading-row .section-heading {
  margin-bottom: 0;
  flex: 1 1 420px;
}

/* ==================================================
   GRID PRIMITIVES
   Auto-fitting grids so card sections reflow without a
   media query per breakpoint. The minimum track width
   is what actually drives the column count.
================================================== */

.grid {
  display: grid;
  gap: var(--gap-grid);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid--6 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }

/* Fixed two-up split used for text-beside-visual blocks. */
.split {
  display: grid;
  gap: clamp(2rem, 1.4rem + 3vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

.split__media--first { order: -1; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
  .split--wide-media { grid-template-columns: 0.85fr 1.15fr; }
  .split__media--first { order: 0; }
}

/* ==================================================
   INNER PAGE LAYOUT
   Two-column shell used by service, technology, industry
   and location pages: editorial column plus a sticky
   sidebar of related links and a conversion card.
================================================== */

.page-layout {
  display: grid;
  gap: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  /* minmax(0, 1fr), not 1fr.
     A bare `1fr` track has an automatic minimum of min-content, so any child
     wider than the viewport — the technology pages' stack table carries a
     520px min-width — pushes the track wider than its container instead of
     being clipped. That produced 163px of horizontal page overflow on every
     technology page at phone widths. Pinning the minimum to zero lets the
     table's own overflow-x container do its job. */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* Same reasoning: the column must be allowed to be narrower than its widest
   child so scrollable regions inside it actually scroll. */
.page-layout__main,
.page-layout__aside {
  min-width: 0;
}

@media (min-width: 1024px) {
  .page-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .page-layout__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--s-6));
  }
}

.page-layout__main > * + * {
  margin-top: clamp(2.5rem, 2rem + 2.4vw, 4rem);
}

/* ==================================================
   PAGE HERO
   Compact hero for every page that is not the homepage:
   breadcrumb, H1, lead paragraph and inline actions on
   the dark brand surface.
================================================== */

.page-hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.9rem + 3vw, 4.5rem) clamp(3rem, 2.2rem + 3.6vw, 5rem);
  background: var(--gradient-night);
  color: var(--color-on-dark-muted);
  isolation: isolate;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: min(620px, 70%);
  aspect-ratio: 1;
  z-index: -1;
  background: radial-gradient(circle, rgba(22, 104, 255, 0.34), transparent 66%);
  filter: blur(20px);
  pointer-events: none;
}

.page-hero__inner {
  max-width: 820px;
}

.page-hero__title {
  font-size: var(--fs-h1);
  color: var(--color-on-dark);
  margin-block: var(--s-5) var(--s-5);
}

.page-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-on-dark-muted);
  max-width: 62ch;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

/* Compact key facts strip beneath the page hero copy. */
.page-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-8);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.page-hero__fact {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--color-on-dark-muted);
}

.page-hero__fact::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-400);
  flex-shrink: 0;
}

/* ==================================================
   STACK / FLOW UTILITIES
================================================== */

.stack > * + *      { margin-top: var(--s-4); }
.stack-sm > * + *   { margin-top: var(--s-2); }
.stack-lg > * + *   { margin-top: var(--s-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.cluster--center { justify-content: center; }