/* ---------------------------------------------------------------------------
 * interior.css — shared shell + section patterns for every non-Home template.
 * Patterns land here as each page is built; page CSS carries only what is
 * unique to that page. All values come from the Figma section bundles.
 * ------------------------------------------------------------------------- */

/* The header is fixed and transparent over the hero. Interior pages that do not
   open with a full-bleed hero need the height reserved instead. */
.site-main--page,
.site-main--single,
.site-main--archive,
.site-main--search,
.site-main--404 {
  padding-top: var(--header-h, 100px);
  background: var(--bg, #ffffff);
}

/* A template whose first child is a full-bleed hero paints under the header. */
.site-main--has-hero {
  padding-top: 0;
}

.site-main--archive .section-header,
.site-main--search .section-header {
  margin-bottom: clamp(24px, 4vw, 48px);
}

/* --- Page hero (About 668:652) ------------------------------------------- */
.page-hero {
  display: flex;
  align-items: flex-end;
  /* Full-viewport hero like the Home one (client round 11) — supersedes the
     Figma's fixed 940px frame. svh keeps phones honest about their browser
     chrome; the copy stays bottom-anchored (client kept the About layout). */
  min-height: 100vh;
  min-height: 100svh;
  /* The fixed header overlays the hero: reserve its height so tall copy on a
     short window can never slide under the menu. */
  padding-top: var(--header-h, 174px);
  /* Same fill stack as the Home hero: a 75%-opacity grey→black gradient over a
     flat 20% black wash, plus the Figma crop on the photo. */
  --overlay-layers:
    linear-gradient(180deg, rgba(102, 102, 102, 0.015) 0%, rgba(0, 0, 0, 0.75) 100%),
    rgba(var(--black-rgb, 0, 0, 0), 0.2);
  /* Every hero on the site scales the same way: a proportional `cover` crop.
     Pages differ ONLY in focal point, and they set it through --hero-focus
     rather than background-position — page CSS loads after this file, so a
     direct property there would also outrank the mobile rule below (client
     round 16 standardisation). */
  background-size: cover;
  background-position: var(--hero-focus, center);
}

/* About's hero fill is scaleMode STRETCH in Figma (x 1.8%–93.9%, y 43%–97.2% of
   the source). Reproducing that literally scales the photo unevenly — 132.92%
   wide by 181.34% tall — which visibly distorts it, and the taller the hero the
   worse it gets (client round 13). Keep the base `cover` and carry only the
   crop's focal point: the centre of the Figma window, x ≈ 48%, y ≈ 70%. */
.page-hero--about {
  --hero-focus: 48% 70%;
}

/* On a portrait phone the hero box is taller than the photo's aspect, so `cover`
   scales by height and the FULL vertical range shows — i.e. the sky-heavy top
   half the Figma crop had cut away, with the excavator squeezed at the bottom.
   Zoom by height instead (auto keeps it proportional, so no stretch) and anchor
   to the bottom. Portrait guarantees 1.78 × 1.35 × height > width, so the photo
   still covers the box. */
@media (max-width: 767px) and (orientation: portrait) {
  .page-hero {
    background-size: auto 135%;
    background-position: 50% bottom;
  }
}

.page-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 21px;
  max-width: calc(1758px + var(--gutter) * 2);
  padding-bottom: 50px;
}

.page-hero h1 {
  margin: 0;
  font-size: clamp(40px, 5.21vw, 100px);
  line-height: 1.11;
  color: var(--white, #ffffff);
}

.page-hero h1 .accent {
  color: var(--brand, #008AF7);
}

.page-hero h1 {
  max-width: var(--hero-heading-width, 1479px);
}

.page-hero .lead {
  max-width: var(--hero-lead-width, 588px);
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--white, #ffffff);
}

.page-hero .btn-layout {
  margin-top: 7px;
}

/* --- 404 hero ------------------------------------------------------------ */
.page-hero--404 {
  --hero-heading-width: 1280px;
  --hero-lead-width: 650px;
  --hero-focus: 50% 50%;
}

.page-hero--404 .error-code {
  margin: 0;
  font-family: var(--display, system-ui, sans-serif);
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--brand, #008AF7);
}

.page-hero--404 h1 .accent {
  display: block;
}

.page-hero--404 .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 7px;
}

.page-hero--404 .btn-layout {
  margin-top: 0;
}

@media (max-width: 575px) {
  .page-hero--404 .buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}

/* --- Split intro over a figures card (About 674:706) --------------------- */
.intro-figures {
  /* Figma 674:706 centres 564px of content in a 942px frame → 189px each side.
     The 199px this used to carry was the shortfall of a content block that
     renders ~20px shorter than the design being hidden in the padding. */
  padding-block: 189px;
  background: var(--bg, #ffffff);
}

.intro-figures-inner {
  display: flex;
  flex-direction: column;
  gap: 125px;
  max-width: calc(1750px + var(--gutter) * 2);
}

.intro-figures .split {
  display: grid;
  grid-template-columns: minmax(0, 705px) minmax(0, 875px);
  justify-content: space-between;
  gap: clamp(40px, 9.2vw, 177px);
}

.intro-figures h2 {
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.234;
}

.intro-figures .body p {
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 1.4444;
}

.intro-figures .body p:last-child {
  margin-bottom: 0;
}

.intro-figures .figures {
  display: grid;
  grid-template-columns: minmax(0, 523px) minmax(0, 232px) minmax(0, 498px);
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 8vw, 154px);
  padding: 53px 94px 52px 95px;
  /* Figma Frame 154 is a fixed 257px card: 53 + 132 of content + 52 leaves 20px
     of slack that the design splits above and below the centred row. Without
     the min-height the card renders 237px and the section loses those 20px. */
  min-height: 257px;
  border-radius: 36px;
  background: #F9F9F9;
}

.intro-figures .figure {
  display: flex;
  align-items: center;
  gap: 16px;
}

.intro-figures .badge,
.value-grid .badge,
.pillars .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 90px;
  height: 90px;
  border-radius: 18px;
  background: var(--icon-blue, #0099FF);
  color: var(--white, #ffffff);
}

.intro-figures .badge .cnm-icon {
  width: 32px;
  height: 32px;
}

.intro-figures .figure .value {
  margin: 0;
  font-family: var(--display, system-ui, sans-serif);
  font-size: clamp(30px, 3.33vw, 64px);
  font-weight: 700;
  line-height: 1.234;
  color: var(--brand, #008AF7);
}

.intro-figures .figure .value {
  white-space: nowrap;
}

.intro-figures .figure .label {
  margin: 1px 0 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--brand, #008AF7);
}

/* Figma sets the two founding labels side by side under the range, 53px apart. */
.intro-figures .figure-founded .label {
  display: flex;
  gap: 53px;
}

.intro-figures .figure .text {
  min-width: 0;
}

/* --- Photo band (About 676:687) ------------------------------------------ */
/* The band takes either a still (Contact, Concrete Recycling) or a looping
   muted video (About, client round 11) — both obey the same box. */
.photo-band img,
.photo-band video {
  display: block;
  width: 100%;
  /* The photo is content, not a background: it stops at the 1920 design width
     and centres beyond it instead of growing to the viewport (client round 11). */
  max-width: 1920px;
  margin-inline: auto;
  height: auto;
  /* Crop is per band, set inline by template-parts/photo-band.php — no
     content-named modifier classes (client round 20). */
  aspect-ratio: var(--band-ratio, 1920 / 835);
  object-fit: cover;
}

/* A band can also arrive as a core image block dropped straight into the post
   content instead of through the template part (Services CPT — Trucking &
   Delivery). It carries no theme class, so it kept its intrinsic 2.8:1 at every
   width and collapsed to a ~138px strip on a phone, while the video band on the
   sibling page took the 4/3 crop. Same box, so both read as one component. The
   desktop crop is deliberately NOT forced here: the editor image keeps its own
   ratio above 767 (approved as-is), it only picks up the cap, the centring and
   the mobile tiers below. */
.site-main > .wp-block-image > figure.size-full > img {
  display: block;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

/* --- Eyebrow band (About 1043:2138 / 1043:2143) -------------------------- */
/* One rule serves every band on the site (About ×2, Services ×2, Concrete
   Recycling). min-height rather than height: the Figma only ever shows a
   one-line label, but "Why contractors choose Crush" wraps on phones and a fixed
   height would clip it (client round 14). */
.eyebrow-band {
  display: flex;
  align-items: center;
  min-height: 150px;
  margin: 0;
  padding-block: 16px;
  background: var(--brand, #008AF7);
  color: var(--white, #ffffff);
}

.eyebrow-band > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--display, system-ui, sans-serif);
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 700;
  /* Figma's 79/36 line box was the leading that centred a SINGLE line inside the
     150px band; flexbox already centres the label, and on two lines that leading
     showed up as a 53px gap between them (client round 14). */
  line-height: 1.25;
}

.eyebrow-band img {
  width: 66px;
  height: auto;
}

/* --- Process cards (About 884:1420) -------------------------------------- */
.process {
  background: #F6F6F6;
}

.process-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 51px;
  min-height: 969px;
  justify-content: center;
  max-width: calc(1760px + var(--gutter) * 2);
}

.process .head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.process h2 {
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.234;
  color: var(--muted, #909091);
}

.process .head p {
  max-width: 465px;
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--black, #000000);
}

/* Flex rather than grid so a hovered step can widen and its neighbours give up
   the space (client round 11). --cards-per-row replaces the grid track count at
   each breakpoint; the 0.01px trim keeps sub-pixel rounding from wrapping a row,
   and flex-grow stays 0 so a short last row keeps the column width instead of
   stretching across it. */
.process .cards {
  --cards-per-row: 5;
  --card-gap: 26px;
  --card-basis: calc(
    (100% - var(--card-gap) * (var(--cards-per-row) - 1)) / var(--cards-per-row) - 0.01px
  );
  --card-open: calc(var(--card-basis) * 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-gap);
  /* Figma's Team Members Container (1006:1930) is 526px tall around 472px cards,
     i.e. 27px of slack above and below. `.process-inner` centres its content in
     a fixed 969px box, so without this the whole block sits 27px too low. */
  padding-block: 27px;
}

.process .card {
  display: flex;
  flex: 0 1 var(--card-basis);
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--white, #ffffff);
  transition: flex-basis 0.35s ease;
}

.process .card > img {
  width: 100%;
  height: auto;
  aspect-ratio: 329 / 273;
  object-fit: cover;
}

/* The "open card" state the Figma shows on Stockpile, wired to hover: the card
   under the pointer widens by 12% and the others each give up an equal slice, so
   the line still adds up to 100% and nothing wraps. Gated at 1400px — that is
   where all five cards share a single row. Below it they wrap into two or three
   rows, and shrinking every non-hovered card would open holes at the end of the
   rows the pointer is not even on. */
@media (hover: hover) and (min-width: 1400px) {
  /* Freeze the photo height at what the resting card width gives it, so the
     widening turns into crop instead of scale: the row's images stay aligned
     and only the hovered card's box changes, as in the Figma. */
  .process .card > img {
    aspect-ratio: auto;
    height: min(273px, calc((100vw - var(--gutter) * 2 - 26px * 4) / 5 * 273 / 329));
  }

  .process .cards:has(.card:hover) .card {
    flex-basis: calc(var(--card-basis) - var(--card-open) / (var(--cards-per-row) - 1));
  }

  .process .cards:has(.card:hover) .card:hover {
    flex-basis: calc(var(--card-basis) + var(--card-open));
  }
}

/* 992–1399 the five cards wrap 3 + 2, so "shrink everyone else" would open holes
   at the end of the row the pointer is not on. The row composition is fixed per
   breakpoint, so each row compensates within itself (client round 16 — the
   effect was previously dead below 1400 and the client reads that as broken). */
@media (hover: hover) and (min-width: 992px) and (max-width: 1399px) {
  .process .cards:has(.card:nth-child(-n+3):hover) .card:nth-child(-n+3) {
    flex-basis: calc(var(--card-basis) - var(--card-open) / 2);
  }

  .process .cards:has(.card:nth-child(-n+3):hover) .card:nth-child(-n+3):hover {
    flex-basis: calc(var(--card-basis) + var(--card-open));
  }

  .process .cards:has(.card:nth-child(n+4):hover) .card:nth-child(n+4) {
    flex-basis: calc(var(--card-basis) - var(--card-open));
  }

  .process .cards:has(.card:nth-child(n+4):hover) .card:nth-child(n+4):hover {
    flex-basis: calc(var(--card-basis) + var(--card-open));
  }
}

@media (prefers-reduced-motion: reduce) {
  .process .cards {
    --card-open: 0px;
  }

  .process .card {
    transition: none;
  }
}

.process .card .body {
  position: relative;
  flex: 1;
  min-height: 199px;
  padding: 31px 40px;
}

.process .card h3 {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--brand, #008AF7);
}

.process .card .body p {
  margin: 0;
  font-size: 18px;
  line-height: 1.2222; /* 22/18 in Figma */
  color: var(--black, #000000);
}

.process .card .watermark {
  position: absolute;
  right: 40px;
  bottom: 31px;
  width: 27px;
  height: 26px;
  background-color: var(--light, #E8E8E8);
  -webkit-mask-image: url("../img/logo-mark.svg");
  mask-image: url("../img/logo-mark.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* --- Two icon pillars on brand (About 678:699) --------------------------- */
.pillars {
  padding-block: 121px;
  background: var(--brand, #008AF7);
  color: var(--white, #ffffff);
}

.pillars-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 456px));
  justify-content: center;
  gap: clamp(48px, 9.8vw, 189px);
  text-align: center;
}

.pillars .pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.pillars .badge {
  width: 72px;
  height: 72px;
  background: var(--white, #ffffff);
  color: var(--brand, #008AF7);
}

.pillars .badge .cnm-icon {
  width: 32px;
  height: 32px;
}

.pillars h2 {
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.234;
  color: var(--white, #ffffff);
}

.pillars p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
}

/* --- Value grid (About 1006:2019) ---------------------------------------- */
.value-grid {
  padding-block: 119px;
  background: #F6F6F6;
}

.value-grid-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 47px;
  max-width: calc(1548px + var(--gutter) * 2);
}

.value-grid .head {
  display: flex;
  align-items: center;
  gap: 20px;
}

.value-grid .badge {
  width: 72px;
  height: 72px;
}

.value-grid .badge .cnm-icon {
  width: 36px;
  height: 36px;
}

.value-grid h2 {
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.234;
  color: var(--brand, #008AF7);
}

.value-grid .cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px 84px;
  width: 100%;
}

.value-grid .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 284px;
  padding: 46px 49px 46px 50px;
  border-radius: 18px;
  background: var(--white, #ffffff);
  text-align: center;
}

.value-grid .card h3 {
  margin: 0;
  font-size: clamp(24px, 1.875vw, 36px);
  line-height: 1.222;
  color: var(--brand, #008AF7);
}

.value-grid .card p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--ink, #212529);
}

/* --- Media + content row (About 680:695) --------------------------------- */
.media-content {
  display: grid;
  /* Figma space-betweens a 1069px image and a 616px text column inside 80px
     padding, which resolves to a 75px gutter at the 1920px design width. */
  grid-template-columns: minmax(0, 1069px) minmax(0, 616px);
  align-items: center;
  justify-content: space-between;
  gap: 75px;
  /* Content caps at the 1920 design width while the section keeps bleeding:
     past 1920 the side padding absorbs the surplus so the image and the text
     hold the Figma's 80px inset instead of drifting apart (client round 11). */
  padding: 113px max(80px, calc((100% - 1920px) / 2 + 80px));
  background: var(--bg, #ffffff);
}

.media-content .media {
  width: 100%;
  height: auto;
  aspect-ratio: 1069 / 614;
  object-fit: cover;
}

.media-content .text {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.media-content .eyebrow {
  margin: 0;
  font-family: var(--display, system-ui, sans-serif);
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 700;
  line-height: 1.222;
  color: var(--brand, #008AF7);
}

.media-content h2 {
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.3125; /* 84/64 in Figma */
}

.media-content .text p:last-child {
  max-width: 504px;
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--black, #000000);
}

/* --- CTA band on brand (About 690:1312) ---------------------------------- */
.cta-band {
  padding-block: 176px;
  background: var(--brand, #008AF7);
  color: var(--white, #ffffff);
}

.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 88px;
  max-width: calc(1324px + var(--gutter) * 2);
}

.cta-band .mark {
  flex: none;
  width: 266px;
  height: auto;
}

.cta-band .text {
  display: flex;
  flex-direction: column;
  gap: 31px;
  max-width: 970px;
}

.cta-band h2 {
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.234;
  color: var(--white, #ffffff);
}

.cta-band .text > p {
  max-width: 819px;
  margin: -14px 0 0;
  font-family: var(--display, system-ui, sans-serif);
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 600;
  line-height: 1;
}

.cta-band .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 31px;
}

/* On the brand background the button arrow is white, not blue. */
.cta-band .btn-layout .cnm-icon {
  color: var(--white, #ffffff);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1399px) {
  .intro-figures .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .intro-figures .figures {
    gap: 32px;
    padding: 40px 48px;
  }

  .process .cards {
    --cards-per-row: 3;
  }

  .media-content {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 48px;
    padding-inline: var(--gutter);
  }

  .value-grid .cards {
    gap: 32px;
  }
}

@media (max-width: 991px) {
  .page-hero h1 .break {
    display: none;
  }

  .intro-figures,
  .value-grid,
  .pillars,
  .cta-band {
    padding-block: 64px;
  }

  .intro-figures-inner {
    gap: 56px;
  }

  .intro-figures .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .intro-figures .figures {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .eyebrow-band {
    padding-block: 40px;
  }

  .process .cards {
    --cards-per-row: 2;
  }

  .pillars-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .value-grid .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Stacked Team section: the photo goes full-bleed on all three edges — sides
     and top — and only the copy keeps the gutter, so the image reads as a band
     instead of a framed thumbnail (client round 13). */
  .media-content {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 0 48px;
    padding-inline: 0;
  }

  .media-content .text {
    padding-inline: var(--gutter);
  }

  .cta-band-inner {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .cta-band .mark {
    width: 160px;
  }

  .cta-band .buttons {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .process .cards {
    --cards-per-row: 1;
  }

  /* One card per row means the 329/273 photo scales with the full viewport: 598px
     tall at 767, and a 4543px section to scroll past. Cap it to a banner crop
     (client round 18) — the card lands around 380-420px instead of 483-797. */
  .process .card > img {
    aspect-ratio: auto;
    height: clamp(150px, 42vw, 220px);
  }

  .value-grid .cards {
    grid-template-columns: 1fr;
  }

  /* Card copy runs to 20px of the edge on phones — the desktop 32/40px inset
     wastes a third of the line length at this width (client round 13). */
  .value-grid .card {
    padding: 20px;
  }

  .process .card .body {
    padding: 20px;
  }

  .process .card .watermark {
    right: 20px;
    bottom: 20px;
  }

  /* Shorter eyebrow band on phones (client round 13) — a floor, so a label that
     wraps to two lines grows the band instead of being clipped. The tighter
     padding keeps even the two-line label ("Why contractors choose Crush") at
     the 110px the client asked for. */
  .eyebrow-band {
    min-height: 110px;
    padding-block: 24px;
  }

  /* The two founding labels sit side by side in the Figma; at phone width the
     pair overruns the card, so they stack. */
  .intro-figures .figure-founded .label {
    flex-direction: column;
    gap: 8px;
  }

  /* Smaller icon chip and wrappable values, so the copy gets the width back
     (client round 13). The 90px badge plus a nowrap "2012 - 2025" was 342px of
     content in a 320px viewport — the overflow the mobile gate caught. */
  .intro-figures .badge {
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }

  .intro-figures .badge .cnm-icon {
    width: 26px;
    height: 26px;
  }

  .intro-figures .figure .value {
    white-space: normal;
  }

  .cta-band .buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 16px;
  }
}

@media (max-width: 575px) {
  .intro-figures .figures {
    padding: 32px 24px;
  }
}

/* A 2.2-3.1:1 band collapses to a 130-190px strip on a phone, too thin to read
   as an image at all. Every band — still or video — takes a taller crop below
   767 and a taller one again on the narrowest phones (client rounds 13, 20). */
@media (max-width: 767px) {
  .photo-band img,
  .photo-band video,
  .site-main > .wp-block-image > figure.size-full > img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 480px) {
  .photo-band img,
  .photo-band video,
  .site-main > .wp-block-image > figure.size-full > img {
    aspect-ratio: 4 / 3;
  }
}

/* --- Photo grid (Services 738:1258) -------------------------------------- */
.photo-grid {
  padding-block: 51px;
  background: var(--bg, #ffffff);
}

.photo-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: calc(1760px + var(--gutter) * 2);
}

.photo-grid h2 {
  margin: 0;
  font-size: clamp(24px, 1.875vw, 36px);
  line-height: 1.222;
}

/* Figma draws a pair of arrow chips beside the heading with no prototype link,
   so they are decorative rather than real controls. */
.photo-grid .chips {
  display: flex;
  gap: 16px;
}

/* Real slider controls (client round 14). The Figma chip is 46×26; the button
   keeps that visual size and takes its touch target from the padding around it. */
.photo-grid .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius, 3px);
  background: var(--brand, #008AF7);
  color: var(--white, #ffffff);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.photo-grid .chip:hover,
.photo-grid .chip:focus-visible {
  background: var(--ink, #212529);
}

.photo-grid .chip.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .photo-grid .chip {
    transition: none;
  }
}

.photo-grid .chip .cnm-icon {
  width: 17px;
  height: 14px;
}

/* Swiper track (client round 14): the Figma's static 4-up row is now a looping
   strip driven by the arrow chips. Slide widths come from the breakpoints in
   sliders.js; the 1736px cap keeps the row on the Figma's 4 × 434 + gaps. */
/* Two classes on purpose: Swiper's own stylesheet sets `.swiper { padding: 0 }`
   and loads after the theme CSS, so a single-class rule here loses and the
   controls end up flush against the photos (client round 14). */
.photo-grid .photo-grid-images {
  max-width: calc(1736px + 20px);
  margin-inline: auto;
  padding: 48px 10px;
}

.photo-grid-images .swiper-slide {
  height: auto;
}

/* Each photo is a lightbox trigger. The anchor has to be a block so it takes
   the slide's width instead of collapsing to an inline box around the image;
   line-height: 0 keeps the inline descender gap out of the slide height. */
.photo-grid-images a {
  display: block;
  line-height: 0;
  cursor: zoom-in;
}

.photo-grid-images img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* --- Alternating service rows (Services 730:1552) ------------------------ */
/* The Figma parent frame allots 1566px; its auto-layout child reports 2809px
   because two hidden rows (UTILITIES, ASPHALT PAVING) still count toward that
   figure. The page total (6485px) confirms 1566px is what the page uses. */
.service-rows {
  background: rgba(var(--light-rgb, 232, 232, 232), 0.24);
}

.service-rows-inner {
  display: flex;
  flex-direction: column;
  gap: 91px;
  padding: 60px 58px;
}

/* The white card hugs its content instead of running to the section edge: the
   two columns cap at 747 + 81 + 740 = 1568, so past that the card was only
   growing its own empty inset (438px a side at 2560). The grey band still
   bleeds full width; below 1768px of room this rule is inert. */
.service-rows .card {
  display: grid;
  grid-template-columns: minmax(0, 747px) minmax(0, 740px);
  align-items: center;
  justify-content: center;
  gap: 81px;
  max-width: 1768px;
  margin-inline: auto;
  padding: 38px 100px;
  border-radius: 37px;
  background: var(--white, #ffffff);
}

.service-rows .card img {
  width: 100%;
  height: auto;
  aspect-ratio: 747 / 496;
  object-fit: cover;
  border-radius: 18px;
}

.service-rows .card-flip img {
  order: 2;
}

.service-rows .card .text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.service-rows .card-flip .text {
  align-items: flex-end;
  text-align: right;
}

/* Figma 719:1261: the title is brand blue at 64/700 with a 2px blue rule the full
   width of the text column 18px below it, then the copy 19px under the rule. */
.service-rows .card h2 {
  align-self: stretch;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--brand, #008AF7);
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.234;
  color: var(--brand, #008AF7);
}

.service-rows .card p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--ink, #212529);
}

/* --- Standards icon cards (Services 879:1345) ---------------------------- */
.standards-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 119px;
  min-height: 1387px;
  justify-content: center;
  padding-block: 100px;
  max-width: calc(1548px + var(--gutter) * 2);
}

.standards h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.234;
  text-align: center;
}

.standards .cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 67px 84px;
  width: 100%;
}

.standards .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Icons align across the row: with `center` each card's block floated to its
     own vertical middle, so a short card's icon sat lower than its neighbours'
     (client round 14). Padding is the Figma's 49px on every side. */
  justify-content: flex-start;
  gap: 16px;
  min-height: 391px;
  padding: 49px;
  border-radius: 18px;
  background: #F6F6F6;
  text-align: center;
}

.standards .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--icon-blue, #0099FF);
  color: var(--white, #ffffff);
}

.standards .badge .cnm-icon {
  width: 36px;
  height: 36px;
}

.standards .card h3 {
  max-width: 361px;
  margin: 0;
  font-size: 24px;
  line-height: 1.375; /* 33/24 in Figma */
  color: var(--brand, #008AF7);
}

.standards .card p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--ink, #212529);
}

/* --- CTA band with a trust row (Services 714:894) ------------------------ */
.cta-band--trust {
  min-height: 627px;
  padding-block: 60px;
}

.cta-band--trust .cta-band-inner {
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  max-width: calc(1648px + var(--gutter) * 2);
}

.cta-band--trust .text {
  gap: 48px;
  max-width: 884px;
}

.cta-band--trust .text > p {
  max-width: 884px;
  line-height: 1.333; /* 32/24 in Figma */
}

.cta-band--trust .trust {
  display: flex;
  /* stretch, not flex-start: the first label wraps to four lines and the others
     to two, so with self-sized items each badge centred inside a different box
     and the icons stepped down the row (client round 15). Equal-height items keep
     every icon on one line while each still centres against its own text. */
  align-items: stretch;
  gap: 60px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cta-band--trust .trust li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4444;
}

.cta-band--trust .trust .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: var(--white, #ffffff);
  color: var(--brand, #008AF7);
}

.cta-band--trust .trust .badge .cnm-icon {
  width: 36px;
  height: 36px;
}

@media (max-width: 1399px) {
  .service-rows .card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    padding: 38px 48px;
  }

  .service-rows-inner {
    min-height: 0;
    padding-inline: var(--gutter);
  }

  .standards .cards {
    gap: 48px;
  }

  .cta-band--trust .trust {
    gap: 32px;
  }
}

@media (max-width: 991px) {
  .service-rows .card,
  .service-rows .card-flip {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .service-rows .card-flip img {
    order: 0;
  }

  .service-rows .card-flip .text {
    align-items: flex-start;
    text-align: left;
  }

  .service-rows-inner {
    gap: 40px;
    padding-block: 40px;
  }

  .standards-inner {
    gap: 56px;
    padding-block: 64px;
  }

  .standards .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Slide count comes from sliders.js at this width; only the rhythm changes. */
  .photo-grid .photo-grid-images {
    padding-block: 32px;
  }

  .cta-band--trust .cta-band-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .cta-band--trust .trust {
    flex-wrap: wrap;
    gap: 24px 32px;
  }
}

@media (max-width: 767px) {
  .standards .cards {
    grid-template-columns: 1fr;
  }

  /* Client round 14: 18px on every Services card at phone width — the copy gets
     the width back (the standards cards' 49px inset was running the longest card
     to eight lines). These live here, after the base rules; the earlier 767 block
     would lose the source-order tie to `.service-rows .card` / `.standards .card`. */
  .service-rows .card,
  .standards .card {
    padding: 18px;
  }

  /* Taller crop on phones, in the same spirit as the video band's 4/3 (client
     round 19) — the 747/496 frame reads thin once the card is full width. */
  .service-rows .card img {
    aspect-ratio: 4 / 3;
  }

  .photo-grid-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cta-band--trust .trust {
    flex-direction: column;
  }
}

/* --- Centered intro statement (Services 714:799) ------------------------- */
.intro-statement {
  display: flex;
  align-items: center;
  min-height: 473px;
  background: var(--bg, #ffffff);
}

.intro-statement-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  max-width: calc(1749px + var(--gutter) * 2);
  text-align: center;
}

.intro-statement h2 {
  max-width: 1176px;
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.234;
  color: var(--brand, #008AF7);
}

.intro-statement p {
  max-width: 646px;
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--ink, #212529);
}

@media (max-width: 991px) {
  .intro-statement {
    min-height: 0;
    padding-block: 64px;
  }
}

/* ===========================================================================
 * Patterns lifted from concrete-recycling.css once they appeared on a second
 * page. Colours, column widths and section heights that differ per page stay
 * in the page stylesheet.
 * ======================================================================== */
/* --- Sustainability statement (738:1268) --------------------------------- */
/* Mark + heading + copy band. One component with two skins (client round 16 —
   the colours used to live as page-scoped overrides in each page's CSS):
 *   .statement-band            white on brand   (Concrete Recycling)
 *   .statement-band.is-light   ink on white, brand lead (Trucking & Delivery)
 */
.statement-band {
  display: flex;
  align-items: center;
  min-height: 747px;
  background: var(--brand, #008AF7);
  color: var(--white, #ffffff);
}

.statement-band h2 {
  color: var(--white, #ffffff);
}

.statement-band.is-light {
  background: var(--bg, #ffffff);
  color: var(--ink, #212529);
}

.statement-band.is-light h2 {
  color: var(--ink, #212529);
}

.statement-band.is-light .text .lead {
  color: var(--brand, #008AF7);
}

.statement-band-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 5.9vw, 114px);
  max-width: calc(1459px + var(--gutter) * 2);
}

.statement-band .mark {
  flex: none;
  width: 266px;
  height: auto;
}

.statement-band h2 {
  flex: none;
  max-width: 485px;
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.3125; /* 84/64 in Figma */
}

.statement-band .text {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.statement-band .text .lead {
  max-width: 742px;
  margin: 0;
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 800;
  line-height: 1.222; /* 44/36 */
}

.statement-band .text p:last-child {
  max-width: 454px;
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
}

/* The stats row on this page sits on white with muted headings, unlike the
   brand-blue variant used elsewhere. */

/* --- Numbered process steps (738:1272) ----------------------------------- */
.process-steps {
  background: var(--bg, #ffffff);
}

.process-steps-inner {
  display: flex;
  flex-direction: column;
  gap: 63px;
  min-height: 1000px;
  justify-content: center;
  padding-block: 54px;
  max-width: calc(1767px + var(--gutter) * 2);
}

.process-steps .head {
  display: flex;
  flex-direction: column;
  gap: 31px;
}

.process-steps h2 {
  max-width: 771px;
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.219; /* 78/64 */
  color: var(--muted, #909091);
}

.process-steps .head p {
  max-width: 572px;
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--ink, #212529);
}

.process-steps .steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 38px;
  margin: 0;
  padding: 32px 40px 33px;
  border-radius: 49px;
  background: #F6F6F6;
  list-style: none;
}

.process-steps .steps li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* The step art is client-uploaded on the services CPT, so the files arrive at
   unrelated aspect ratios (695x427 next to 299x95) and each one sized itself to
   its own column — the truck ran 241px tall against the crusher's 88px, and the
   copy under each step started at a different height (client round 20). A fixed
   137px box (the tallest Figma illustration) with the art bottom-aligned inside
   it puts every number, title and paragraph on one line. scale-down, not
   contain: contain would enlarge the smaller theme SVGs up to 16% to fill it. */
.process-steps .steps .art {
  width: 100%;
  height: 137px;
  object-fit: scale-down;
  object-position: left bottom;
  margin-bottom: 44px;
}

.process-steps .num {
  margin: 0;
  font-family: var(--display, system-ui, sans-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: var(--brand, #008AF7);
}

.process-steps .steps h3 {
  margin: 0;
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 800;
  line-height: 1;
  color: var(--ink, #212529);
}

.process-steps .steps li p:last-child {
  margin: 0;
  font-size: 18px;
  line-height: 1.111; /* 20/18 */
  color: var(--ink, #212529);
}

/* --- Accepted materials + callout (1023:1454) ---------------------------- */
.materials {
  display: grid;
  grid-template-columns: minmax(0, 810px) minmax(0, 846px);
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 4.7vw, 91px);
  min-height: 1015px;
  padding-inline: 125px 115px;
  background: var(--bg, #ffffff);
}

.materials .media {
  width: 100%;
  height: auto;
  aspect-ratio: 810 / 833;
  object-fit: cover;
  border-radius: 46px;
}

.materials .content {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.materials .head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.materials h2 {
  max-width: 828px;
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.125; /* 72/64 */
  color: var(--brand, #008AF7);
}

.materials .head p {
  max-width: 491px;
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--muted, #909091);
}

.materials .accepted {
  display: flex;
  flex-direction: column;
  gap: 39px;
}

.materials h3 {
  margin: 0;
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 600;
  line-height: 1.1667; /* 42/36 */
  color: var(--muted, #909091);
}

/* The three groups stay side by side at every desktop width — three levels of
   items each, as the Figma lays them out (client round 17). Letting the COLUMNS
   wrap dropped the third group onto its own line; what gives instead is the
   label text, which stops being nowrap as soon as the row is squeezed (see the
   `white-space: normal` override below). That also clears the 129px of
   horizontal scroll the nowrap labels used to force between 1400 and ~1650px. */
.materials .columns {
  display: flex;
  gap: 41px;
}

.materials .columns ul {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.materials .columns li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--ink, #212529);
  white-space: nowrap;
}

.materials .columns li .cnm-icon {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--white, #ffffff);
}

.materials .columns li::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--brand, #008AF7);
}

.materials .columns li {
  position: relative;
}

.materials .columns li .cnm-icon {
  position: relative;
  margin-inline: 5.5px;
}

.materials .callout {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px;
  border-radius: 16px;
  background: var(--brand, #008AF7);
  color: var(--white, #ffffff);
}

.materials .callout .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: var(--white, #ffffff);
  color: var(--brand, #008AF7);
}

.materials .callout .badge .cnm-icon {
  width: 32px;
  height: 32px;
}

.materials .callout .title {
  margin: 0 0 6px;
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 600;
  line-height: 1.1667;
}

.materials .callout p:last-child {
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
}

/* --- Available products (1028:1539) -------------------------------------- */
.products {
  background: #F6F6F6;
}

/* This wrapper ships without the `container` class, so it had no cap: the Figma
   row over-specifies (82 + 406 + 93 + 1261 + 120 = 1962 in a 1920 frame), which
   forced horizontal scroll between 1920 and 1962 and left the whole block stuck
   at the left edge with dead space beyond it. Cap it at the 1920 content width
   and centre it — the tracks are minmax(0, …) so they absorb the 42px. */
.products-inner {
  display: grid;
  grid-template-columns: minmax(0, 406px) minmax(0, 1261px);
  align-items: center;
  gap: clamp(40px, 4.8vw, 93px);
  min-height: 774px;
  max-width: 1920px;
  margin-inline: auto;
  padding: 120px 120px 120px 82px;
}

.products .text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.products h2 {
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  font-weight: 600;
  line-height: 1.125; /* 72/64 */
  color: var(--brand, #008AF7);
}

.products .text p {
  max-width: 361px;
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--ink, #212529);
}

.products .cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.products .card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
}

.products .card img {
  width: 100%;
  height: auto;
  aspect-ratio: 306 / 475;
  object-fit: cover;
}

/* Same "open card" gesture as the About operation steps (client round 16): the
   card under the pointer widens and its row-mates give up an equal slice, so the
   row still adds up and nothing reflows. Flex rather than grid for the same
   reason as `.process .cards`; gated to the width where all four share one row. */
@media (hover: hover) and (min-width: 992px) {
  /* Freeze the photo at the height the resting card gives it, so widening turns
     into crop instead of scale and the row's labels stay on one line — the same
     correction the About operation cards needed (client round 17). Container
     query units make it exact here: 100cqw is the cards row itself, so no vw
     math has to guess the grid track around it. */
  .products .cards {
    container-type: inline-size;
  }

  .products .card img {
    aspect-ratio: auto;
    height: min(475px, calc((100cqw - var(--product-gap) * 3) / 4 * 475 / 306));
  }

  .products .cards {
    --product-cols: 4;
    --product-gap: 12px;
    --product-basis: calc(
      (100% - var(--product-gap) * (var(--product-cols) - 1)) / var(--product-cols) - 0.01px
    );
    --product-open: calc(var(--product-basis) * 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--product-gap);
  }

  .products .card {
    flex: 0 1 var(--product-basis);
    min-width: 0;
    transition: flex-basis 0.35s ease;
  }

  .products .cards:has(.card:hover) .card {
    flex-basis: calc(var(--product-basis) - var(--product-open) / (var(--product-cols) - 1));
  }

  .products .cards:has(.card:hover) .card:hover {
    flex-basis: calc(var(--product-basis) + var(--product-open));
  }
}

@media (prefers-reduced-motion: reduce) {
  .products .cards {
    --product-open: 0px;
  }

  .products .card {
    transition: none;
  }
}

.products .card .label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  margin: 0;
  padding: 8px 12px;
  background: var(--brand, #008AF7);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--white, #ffffff);
}

/* --- SEO copy (1066:2583) ------------------------------------------------ */
.seo-copy {
  display: flex;
  align-items: center;
  min-height: 864px;
  background: var(--bg, #ffffff);
}

.seo-copy-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 78px;
  max-width: calc(1746px + var(--gutter) * 2);
}

.seo-copy h2 {
  max-width: 1324px;
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.234;
  text-align: center;
}

/* One column per paragraph, so the ACF repeater's row count IS the column count.
   The two static pages set their own repeat(3)/repeat(2) via .site-main--{slug},
   but the block version (blocks/services/seo, services CPT) loads interior.css
   alone and carries no page scope class — with no column count here, its
   paragraphs stacked one per row. Caps are the Figma track widths: 515px for the
   3-up variant, 717px for the 2-up one. */
.seo-copy .columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 515px);
  justify-content: center;
  gap: clamp(40px, 5.2vw, 100px);
}

.seo-copy .columns:has(> p:nth-child(2):last-child) {
  grid-auto-columns: minmax(0, 717px);
}

.seo-copy .columns p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--ink, #212529);
}

/* --- Lifted-pattern responsive ------------------------------------------
 * The .materials base above lays its checklist columns in a flex ROW; every
 * page that uses the pattern needs the mobile collapse, so it lives here —
 * a collapse kept only in one page's CSS ships broken on the next page
 * (Trucking shipped with a non-wrapping materials row at 375px). */
/* Three groups side by side only hold at the 1920 design width. Below it the row
   is too tight, so the groups go to a TWO-column grid with one uniform 41px gap
   in both axes — the client's ask was two lists with no odd spacing between them
   (round 17). Labels also stop being nowrap, which is what used to force 129px
   of horizontal scroll between 1400 and ~1650px. <=991 stacks into one column. */
/* At 1920 the three groups sit side by side and need 844px, but the Figma's own
   numbers over-specify the row — 810 + 846 tracks + 91 gap + 240 padding is 1987
   in a 1920 frame — so the tracks shrank to 795 each and the list ran 49px past
   the text column (client round 19). Trim the gap and the outer padding, and let
   the text column take the larger share; the photo loses ~20px, nothing else. */
/* The section's real side margin is 72px (operator, round 23), not the 115/100
   the Figma frame implied. Releasing that inset gives the text column 920px, so
   the three groups (844px at the current labels) sit side by side with 76px to
   spare instead of running out of the column. 72 + 780 + 72 + 920 + 72 = 1916. */
@media (min-width: 1920px) {
  .materials {
    grid-template-columns: minmax(0, 780px) minmax(0, 920px);
    gap: 72px;
    padding-inline: 72px;
  }

  /* The block version's labels come from an ACF repeater, so they can be longer
     than the static templates'. Let the label wrap rather than push the row past
     the text column — the same trade the <=1919 rule makes. */
  .materials .columns li {
    white-space: normal;
  }
}

@media (max-width: 1919px) {
  .materials .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Row gap matches the 22px rhythm INSIDE each list, so the group that wraps
       to the second row reads as a continuation instead of a detached block
       (client round 17). Column gap keeps the 41px separation. */
    gap: 22px 41px;
  }

  .materials .columns li {
    white-space: normal;
  }
}

@media (max-width: 991px) {
  /* One column on small screens. `flex-direction` alone stopped working once the
     1919 rule turned this into a grid, which left phones with two ~170px columns
     (client round 17). */
  .materials .columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .statement-band {
    min-height: 0;
    padding-block: 64px;
  }

  .statement-band-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .statement-band .mark {
    width: 160px;
  }

  .process-steps-inner {
    min-height: 0;
    gap: 40px;
  }

  .process-steps .steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    border-radius: 24px;
  }

  .process-steps .steps li {
    flex-basis: auto;
    padding-top: 0;
  }

  /* Both sections carry big Figma insets (125/115 and 120/82) that were never
     released on small screens, so their copy sat in a ~170px column while every
     About section starts at the 24px gutter. Match that standard (round 17). */
  .materials {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 64px;
    padding-inline: var(--gutter);
  }

  .products-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 64px var(--gutter);
  }

  .products .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The product shot is portrait (306/475), so below the four-up row it grew to
     543px at 390 and 1119px at 767 — a 5111px section. Cap it (client round 18). */
  .products .card img {
    aspect-ratio: auto;
    height: clamp(180px, 30vw, 260px);
  }

  .seo-copy {
    min-height: 0;
    padding-block: 64px;
  }

  /* Same collapse the static pages already do at this width. */
  .seo-copy .columns {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .process-steps .steps {
    grid-template-columns: 1fr;
  }

  .materials .callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .products .cards {
    grid-template-columns: 1fr;
  }
}

/* --- Mobile gutter parity ------------------------------------------------
 * The `.container` primitive swaps to --gutter-mobile below 576px. Sections that
 * set their own inline padding have to follow or they sit 4px tighter than every
 * other section on the page (caught in review, client round 22). This lives at
 * the END of the file on purpose: the <=991 rules above re-declare
 * padding-inline, and a same-specificity rule placed earlier would lose to them.
 * ------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .materials,
  .products-inner {
    padding-inline: var(--gutter-mobile, 24px);
  }
}