/* ==========================================================================
   Express Group: inner-page kit
   Loaded after main.css on every inner page (front matter "css: pages").
   Tokens, base styles, buttons, chips, the header, menu, footer, project cards,
   facts and the tender form all stay in main.css; this file adds the inner-page
   components documented in README.md, "Inner-page kit".
   Same shape rule as the homepage: buttons and chips are pills, photos and
   panels 24 to 28px, cards 20 to 24px, inputs 12px.
   ========================================================================== */

/* 1. Inner-page tokens: calmer and denser than the homepage
   ----------------------------------------------------------------------- */
.page-inner {
  --fs-h2: clamp(1.75rem, 1.25rem + 1.9vw, 2.875rem);         /* 28 to 46px */
  --fs-page-title: clamp(2.375rem, 1.45rem + 3.4vw, 4.5rem);  /* 38 to 72px */
  --section-y: clamp(2.75rem, 2rem + 2.6vw, 4.5rem);          /* 44 to 72px */
  --stack: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  --sticky-top: 76px;
}
@media (min-width: 768px) {
  .page-inner { --sticky-top: 86px; }
}

.page-inner .section-intro { max-width: 38em; }
.section--tint { background: var(--c-surface-2); }
.section--flush-top { padding-top: 0; }
.section-head--split { max-width: none; }

/* Sticky header and section nav: main.css sets body { overflow-x: hidden } and html
   { overflow-x: clip }. Together they make <body> the scroll container, so nothing inside
   it can stick. "clip" hides sideways overflow without creating a scroll container. */
@supports (overflow: clip) {
  body.page-inner { overflow-x: clip; }
}

/* Active page in the header and the full menu */
.primary-nav__link[aria-current]::after { transform: scaleX(1); }
.menu__lead a[aria-current],
.menu__list a[aria-current],
.menu__small a[aria-current] { color: var(--c-accent-ink); }

/* Anchors clear the sticky header and the section nav (the html scroll padding is subtracted, R2-01) */
.page-inner main [id] { scroll-margin-top: calc(var(--sticky-top) + 72px - var(--scroll-pad-top)); }
/* R2-01: below a section nav, a focused control also clears the stuck nav (its 56px bar + 12px): with
   the html scroll padding it lands at least 144px (154px from 768px) from the top. A margin on the
   controls, not more padding, so tabbing through the stuck nav itself never scrolls the page. */
.section-nav ~ * :where(a[href], button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: 62px; }

/* Small shared parts */
.tbc {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--c-muted);
  white-space: nowrap;
}
.tbc abbr { text-decoration: none; cursor: help; }
/* R1-06: on dark cards and panels the chip turns light (about 15:1 on #1C1C1A; the muted grey was 2.6:1). */
.cert--feature .tbc,
.feature--dark .tbc,
.flagship .tbc,
.facts--dark .tbc,
.badge--feature .tbc,
.news-card--feature .tbc,
.site-footer .tbc {
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--c-on-dark);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.status--on-site { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.status--on-site::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent-ink);
  box-shadow: 0 0 0 3px rgba(75, 106, 20, 0.16);
}
.status--complete { background: var(--c-surface-2); color: var(--c-ink-2); }
.status--tbc { border: 1px dashed var(--c-line-2); color: var(--c-muted); }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }

.media-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 5px 13px 5px 5px;
  border-radius: var(--r-pill);
  background: rgba(20, 20, 20, 0.8);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
}
.media-label__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-ink);
}
.media-label__icon .icon { width: 15px; height: 15px; }

/* Placeholder where a project has no photography yet (never stock) */
.media-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 220px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    var(--c-surface-2);
  text-align: center;
  color: var(--c-muted);
}
.media-placeholder__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-ink-2);
}
.media-placeholder__icon .icon { width: 21px; height: 21px; }
.media-placeholder__name {
  max-width: 18ch;
  font-family: var(--f-serif);
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  font-style: italic;
  line-height: 1.15;
  color: var(--c-ink-2);
  text-wrap: balance;
}
.media-placeholder__text {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}

/* 2. Breadcrumb
   ----------------------------------------------------------------------- */
.breadcrumb { margin-bottom: 6px; }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-muted);
}
.breadcrumb__list li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumb__list li + li::before {
  content: "/";
  margin: 0 10px;
  color: var(--c-line-2);
}
.breadcrumb__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-ink-2);
  text-decoration: underline;
  text-decoration-color: rgba(20, 20, 20, 0.2);
  text-underline-offset: 4px;
}
.breadcrumb__list a:hover { color: var(--c-accent-ink); text-decoration-color: currentColor; }
.breadcrumb__list [aria-current] {
  overflow: hidden;
  max-width: 34ch;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-muted);
}

/* 3. Page hero
   ----------------------------------------------------------------------- */
.page-hero {
  padding-top: clamp(14px, 2vw, 30px);
  padding-bottom: clamp(32px, 3.6vw, 56px);
}
.page-hero .eyebrow { margin: 10px 0 0; }
.page-hero__title {
  max-width: 17ch;
  margin-top: clamp(12px, 1.6vw, 22px);
  font-size: var(--fs-page-title);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.page-hero__title .accent {
  font-size: 1.07em;
  line-height: 1.04;
  letter-spacing: -0.02em;
  padding-bottom: 0.04em;
}
.page-hero__title--wide { max-width: 22ch; }
.page-hero__subtitle {
  margin-top: 10px;
  font-family: var(--f-serif);
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  font-style: italic;
  line-height: 1.2;
  color: var(--c-muted);
}
.page-hero__body {
  display: grid;
  gap: 28px;
  margin-top: clamp(22px, 2.8vw, 40px);
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--c-line);
}
.page-hero__lead {
  max-width: 36em;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.page-hero__actions .btn { flex: 1 1 100%; }
.page-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.page-hero__facts .figure__value { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); }
/* A figure in words (a news post's "Main contractor", "Client") wraps instead of running out of its column
   (T-036: "University of East Anglia" at 390px), as the stats band's text figures do. */
.page-hero__facts .figure__value--text { white-space: normal; }
.page-hero__media { display: grid; gap: 12px; }
.page-hero__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  background: var(--c-surface-2);
}
.page-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 640px) {
  .page-hero__actions .btn { flex: 0 0 auto; }
  .page-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-hero__frame { aspect-ratio: 16 / 10; }
}

@media (min-width: 1024px) {
  .page-hero__body {
    grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: stretch;
  }
  .page-hero__content { display: flex; flex-direction: column; }
  .page-hero__facts { margin-top: auto; padding-top: 34px; }
  .page-hero__frame { aspect-ratio: auto; height: 100%; min-height: 380px; max-height: 520px; }
  .page-hero__media { align-content: start; }
  .page-hero--plain .page-hero__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .page-hero--plain .page-hero__facts { margin-top: 0; padding-top: 0; }
}

.js .page-hero__title { animation: rise 1s var(--ease) both; }

/* 4. Section nav (sticky, highlights the section in view)
   ----------------------------------------------------------------------- */
.section-nav {
  position: sticky;
  top: var(--sticky-top);
  z-index: 30;
  margin-top: -6px;
  pointer-events: none;
}
.section-nav__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: rgba(246, 245, 241, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.section-nav__label {
  display: none;
  flex: none;
  padding-left: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-muted);
}
.section-nav__list {
  display: flex;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.section-nav__list::-webkit-scrollbar { display: none; }
/* No fade once the list is scrolled to its end or fits (main.js 11b, T-036): the last link is never left under it.
   While a link has keyboard focus there is no fade at all, so neither the link nor its focus ring is ever faded
   (express-core 1.3.4's rule, Group 1.4.5), and the list does not snap, so the focused link stays where main.js
   scrolls it. */
.section-nav__list.is-end,
.section-nav__list:has(:focus-visible) { -webkit-mask-image: none; mask-image: none; }
.section-nav__list:focus-within { scroll-snap-type: none; }
/* The list clips what overflows it, and the focus ring sits 3px outside a link (3px wide): 6px of padding all
   round, taken back by a negative margin, give the ring room without moving a link or changing the bar's size
   (express-core 1.3.4, Group 1.4.5). */
.section-nav__list { margin: -6px; padding: 6px; scroll-padding-inline: 6px; }
.section-nav__list li { flex: none; scroll-snap-align: start; }
.section-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--c-text-2);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.section-nav__link:hover { color: var(--c-ink); background: rgba(20, 20, 20, 0.05); }
.section-nav__link.is-active,
.section-nav__link[aria-current] { background: var(--c-ink); color: #fff; }

@media (min-width: 1024px) {
  .section-nav__label { display: block; }
  .section-nav__list { -webkit-mask-image: none; mask-image: none; }
}

/* 5. Prose and legal layout
   ----------------------------------------------------------------------- */
.prose {
  max-width: 44rem;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-text-2);
}
.prose > * + * { margin-top: 1.05em; }
.prose h2 {
  margin-top: 1.9em;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--c-ink);
}
.prose h3 {
  margin-top: 1.6em;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink);
}
.prose h2 + *,
.prose h3 + * { margin-top: 0.6em; }
.prose strong { font-weight: 600; color: var(--c-ink); }
.prose a {
  font-weight: 600;
  color: var(--c-ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(20, 20, 20, 0.3);
}
.prose a:hover { color: var(--c-accent-ink); text-decoration-color: currentColor; }
.prose ul { display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.78em;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent-ink);
}
.prose--lead > p:first-child { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-ink-2); }

.legal__inner { display: grid; gap: 32px; }
.legal__toc {
  align-self: start;
  padding: 20px 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.legal__toc-title { margin-bottom: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.legal__toc ol { display: grid; counter-reset: toc; }
.legal__toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--c-ink-2);
  counter-increment: toc;
}
.legal__toc a::before { content: counter(toc); min-width: 1.4em; font-variant-numeric: tabular-nums; color: var(--c-muted); }
.legal__toc a:hover { color: var(--c-accent-ink); }
.legal__body h2 { scroll-margin-top: calc(var(--sticky-top) + 24px - var(--scroll-pad-top)); }

@media (min-width: 1024px) {
  .legal__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); }
  .legal__toc { position: sticky; top: calc(var(--sticky-top) + 12px); }
}

/* 6. Split: text and image
   ----------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(26px, 3.6vw, 56px);
}
.split__media { display: grid; gap: 10px; }
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
}
.split__media--portrait img { aspect-ratio: 4 / 5; }
.split__media img.focus-frame { object-position: 50% 62%; }
.split__content .section-title { margin-bottom: 4px; }
.split__content > .text-link,
.split__content > .btn { margin-top: 20px; }

@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .split--media-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--reverse .split__media { order: -1; }
  .split--reverse.split--media-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--top { align-items: start; }
}

/* 7. Feature grid (capabilities, values, systems)
   ----------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  gap: 12px;
}
.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.feature__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}
.feature__icon .icon { width: 22px; height: 22px; }
.feature__title {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.feature__text {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-text-2);
}
.feature__text a { font-weight: 600; color: var(--c-ink); text-underline-offset: 3px; }
.feature__text a:hover { color: var(--c-accent-ink); }
.feature-grid--3 > .feature:not(.feature--image) .feature__icon { margin-bottom: auto; }
.feature-grid--3 > .feature:not(.feature--image) { min-height: 220px; }
.feature--tint { background: var(--c-accent-soft); border-color: var(--c-accent-line); }
.feature--tint .feature__icon { background: var(--c-surface); }
.feature--dark { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-on-dark); }
.feature--dark .feature__icon { background: var(--c-accent); color: var(--c-ink); }
.feature--dark .feature__text { color: var(--c-on-dark-muted); }
.feature--dark .feature__text a { color: var(--c-on-dark); }
.feature--image { padding: 0; gap: 0; }
.feature--image .feature__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-surface-2);
}
.feature--image .feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.feature--image:hover .feature__media img { transform: scale(1.04); }
.feature__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2vw, 24px);
}
.feature__caption { font-size: 0.8125rem; line-height: 1.45; color: var(--c-muted); }
.feature__caption a { color: var(--c-ink-2); font-weight: 600; text-underline-offset: 3px; }
.feature__caption a:hover { color: var(--c-accent-ink); }
.feature__label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-accent-ink); }
.feature__body .scope-list { margin: 6px 0 4px; gap: 10px; }
.feature__body > .text-link { align-self: flex-start; margin-top: auto; }
.split__content .scope-list { margin-top: 28px; }

@media (min-width: 640px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feature-grid--4 .feature { min-height: 250px; }
}

/* 8. Build-up (layers of a wall, frame to finish)
   ----------------------------------------------------------------------- */
.buildup {
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
}
.buildup__title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-muted);
}
.buildup__list { display: grid; gap: 6px; counter-reset: layer; }
.buildup__layer {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 16px 10px 12px;
  border-radius: 14px;
  background: var(--layer-bg, var(--c-surface-2));
  color: var(--layer-ink, var(--c-ink));
  counter-increment: layer;
}
.buildup__layer::before {
  content: counter(layer);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-ink);
}
.buildup__name { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.buildup__note { display: block; font-size: 0.8125rem; font-weight: 500; line-height: 1.4; opacity: 0.78; }
.buildup__layer:nth-child(1) { --layer-bg: var(--c-dark); --layer-ink: var(--c-on-dark); margin-right: 0; }
.buildup__layer:nth-child(2) { --layer-bg: #3A3936; --layer-ink: var(--c-on-dark); margin-right: 4%; }
.buildup__layer:nth-child(3) { --layer-bg: #D9D7CF; margin-right: 8%; }
.buildup__layer:nth-child(4) { --layer-bg: var(--c-surface-2); margin-right: 12%; }
.buildup__layer:nth-child(5) { --layer-bg: var(--c-accent-soft); margin-right: 16%; }
.buildup__layer:nth-child(6) { --layer-bg: var(--c-accent); margin-right: 20%; }
@media (max-width: 479.98px) {
  .buildup__layer { margin-right: 0 !important; }
}

/* 9. Checklist: scope or specification list
   ----------------------------------------------------------------------- */
.scope-list {
  display: grid;
  gap: 12px 28px;
}
.scope-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-ink);
}
.scope-list__tick {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}
.scope-list__tick .icon { width: 14px; height: 14px; }
.scope-list small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--c-text-2); }
@media (min-width: 640px) {
  .scope-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Specification table: grouped key facts (label, value) */
.spec {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-line);
}
.spec__group { display: grid; gap: 14px 24px; padding: 18px 0; }
.spec__group + .spec__group { border-top: 1px solid var(--c-line); }
.spec dt { font-size: 0.8125rem; font-weight: 500; color: var(--c-muted); }
.spec dd { margin-top: 2px; font-size: var(--fs-small); font-weight: 600; line-height: 1.4; }
@media (min-width: 640px) {
  .spec__group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 10. Process steps
   ----------------------------------------------------------------------- */
.process {
  position: relative;
  display: grid;
  gap: 0;
  counter-reset: process;
}
.process__step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 16px;
  padding-bottom: 26px;
  counter-increment: process;
}
.process__step::before {
  content: counter(process);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  background: var(--c-surface);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21.5px;
  top: 48px;
  bottom: 4px;
  width: 1px;
  background: var(--c-line-2);
}
.process__step:last-child::before { background: var(--c-accent); border-color: var(--c-accent); }
.process__title {
  align-self: center;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.process__text {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-text-2);
}

@media (min-width: 1024px) {
  .process {
    grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr));
    gap: 24px;
  }
  .process::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 22px;
    height: 1px;
    background: var(--c-line-2);
  }
  .process__step {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    padding-bottom: 0;
  }
  .process__step::before { grid-row: auto; position: relative; margin-bottom: 8px; }
  .process__step:not(:last-child)::after { display: none; }
  .process__title { align-self: start; }
}

/* 11. FAQ accordion (details / summary, no script needed)
   ----------------------------------------------------------------------- */
.faq-layout { display: grid; gap: 24px; }
@media (min-width: 1024px) {
  .faq-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .faq-layout .section-head { position: sticky; top: calc(var(--sticky-top) + 72px); margin-bottom: 0; }
}
.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding: 14px 0;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-accent-ink); }
.faq__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-ink);
  transition: transform 0.4s var(--ease), background-color 0.3s var(--ease);
}
.faq__icon .icon { width: 16px; height: 16px; }
.faq__item[open] .faq__icon { transform: rotate(180deg); background: var(--c-accent); border-color: var(--c-accent); }
.faq__a {
  max-width: 44em;
  padding: 0 52px 22px 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text-2);
}
.faq__a a { font-weight: 600; color: var(--c-ink); text-underline-offset: 3px; }

/* 12. Related projects, catalogue grid and project-card additions
   ----------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .project-grid--3 > .project-card { grid-column: span 4; }
  .project-grid--3 > .project-card--wide,
  .project-grid--lead2 > .project-card:nth-child(-n + 2) { grid-column: span 6; }
  .project-grid--3 > .flagship { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .project-grid > .flagship { grid-column: 1 / -1; }
  .project-grid--lead2 > .project-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.project-grid > .flagship { margin-bottom: 0; }

.project-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
}
.project-card__top .project-card__meta { min-width: 0; }
.project-card__top + .project-card__title { margin-top: -6px; }
.project-card__media { position: relative; }
.project-card__media .media-placeholder { min-height: 0; }
/* A card without a photo names its project in the frame, as the project page does (T-015 R4-02): the frame
   still reads as that job when "Photography to follow" is hidden on the live site. A card-sized name. */
.project-card__media .media-placeholder__name { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.project-card__media .media-label { left: 10px; bottom: 10px; }
.project-card .tag--more { cursor: help; }

.section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: clamp(22px, 2.6vw, 36px);
}

/* Flagship card on inner pages: action row */
.flagship__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn--light { background: #fff; color: var(--c-ink); }
.btn--light .btn__icon { background: var(--c-accent); color: var(--c-ink); }
.btn--light:hover { background: var(--c-bg); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.btn--ghost-light .btn__icon { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; }

/* 13. Filter bar (projects catalogue)
   ----------------------------------------------------------------------- */
.filter-bar {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(18px, 2vw, 28px);
  padding: clamp(14px, 1.8vw, 22px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-soft);
}
.filter-bar__sectors { min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-bar__legend,
.filter-bar__label {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-muted);
}
.filter-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin: -4px;
  padding: 4px;
}
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { position: relative; flex: none; scroll-snap-align: start; }
.filter-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filter-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.filter-chip span:hover { border-color: var(--c-ink); }
.filter-chip input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.filter-chip input:focus-visible + span { outline: 3px solid var(--c-accent-ink); outline-offset: 2px; }
.filter-bar__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.filter-bar__field { min-width: 0; }
.filter-bar__field .field__input { min-height: 48px; padding-top: 10px; padding-bottom: 10px; background-color: var(--c-bg); }
.filter-bar__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
}
.filter-bar__count { font-size: var(--fs-small); font-weight: 600; }
.filter-bar__clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(20, 20, 20, 0.28);
}
.filter-bar__clear .icon { width: 16px; height: 16px; }
.filter-bar__clear:hover { color: var(--c-accent-ink); }
.filter-bar__clear[hidden] { display: none; }
.no-js .filter-bar { display: none; }

@media (min-width: 1024px) {
  .filter-bar { grid-template-columns: minmax(0, 1fr); }
  .filter-bar__controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filter-chips { flex-wrap: wrap; overflow: visible; }
}
/* T-087: without the value sort (no project shows its value) three controls are left: on phones the third takes
   the full row, from 1024px the three share the row. */
.filter-bar__controls--3 > .filter-bar__field:last-child { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .filter-bar__controls--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-bar__controls--3 > .filter-bar__field:last-child { grid-column: auto; }
}

.results-empty {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-xl);
  background: var(--c-surface);
}
.results-empty h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.results-empty p { max-width: 40em; color: var(--c-text-2); }

/* 14. Project page: media and facts panel
   ----------------------------------------------------------------------- */
.project-hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.project-hero__chips .chip { min-height: 30px; padding: 4px 12px; font-weight: 600; }
.project-overview {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(22px, 2.8vw, 40px);
}
.project-overview__media { display: grid; gap: 10px; align-content: start; }
.project-overview__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  background: var(--c-surface-2);
}
.project-overview__frame img { width: 100%; height: 100%; object-fit: cover; }
.project-overview__zoom { display: block; height: 100%; }
.project-overview__zoom:focus-visible { outline: 3px solid var(--c-accent-ink); outline-offset: -3px; }
.project-overview__zoom:hover .gallery__zoom { transform: scale(1.08); }
.project-overview__frame .gallery__zoom { right: 14px; bottom: 14px; }
.project-overview__frame .media-placeholder { min-height: 100%; }

.facts-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
}
.facts-panel__title { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.facts-panel__value dt { font-size: 0.8125rem; font-weight: 500; color: var(--c-muted); }
.facts-panel__value dd {
  margin-top: 2px;
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.facts-panel__value .tbc { font-size: 0.9375rem; letter-spacing: 0.02em; }
.facts-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
}
.facts-panel__grid dt { margin-bottom: 3px; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--c-muted); }
.facts-panel__grid dd { font-size: var(--fs-small); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
/* T-057: an odd last fact takes the full row (four facts on staging; the live view drops the unconfirmed ones),
   so the grid never ends in an empty cell; the Express Facades rule. Screen only: print.css lays the grid out in threes. */
@media screen {
  .facts-panel__grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.facts-panel__services { padding-top: 18px; border-top: 1px solid var(--c-line); }
.facts-panel__services h3 { margin-bottom: 10px; font-size: 0.8125rem; font-weight: 500; color: var(--c-muted); }
.facts-panel__services .chip { min-height: 36px; }
.facts-panel__services a.chip { text-decoration: none; color: var(--c-ink); transition: border-color 0.3s var(--ease); }
.facts-panel__services a.chip:hover { border-color: var(--c-ink); }
.facts-panel__note { margin-top: auto; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-muted); }

@media (min-width: 1024px) {
  .project-overview { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
  .project-overview__frame { aspect-ratio: auto; height: 100%; min-height: 460px; }
}

.project-body { display: grid; gap: clamp(28px, 4vw, 64px); }
.project-body__title {
  margin-bottom: 18px;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
@media (min-width: 1024px) {
  .project-body { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}

/* Film loop in the project hero (added by main.js: the 16:9 film from 1024 px, the 4:3 phone film below, T-060) */
.loop-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.is-playing > .loop-video { opacity: 1; }
.loop-toggle {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(20, 20, 20, 0.78);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
  visibility: hidden;
}
.is-playing > .loop-toggle { visibility: visible; }
.loop-toggle:hover { background: var(--c-ink); }
.project-overview__frame .gallery__zoom { z-index: 1; }

/* 15. Gallery and lightbox
   ----------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}
.gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.gallery__item:hover img { transform: scale(1.04); }
.gallery__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-ink);
  transition: transform 0.4s var(--ease);
}
.gallery__zoom .icon { width: 18px; height: 18px; }
.gallery__item:hover .gallery__zoom { transform: scale(1.08); }
.gallery__item:focus-visible { outline: 3px solid var(--c-accent-ink); outline-offset: 3px; }

@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  .gallery__item { grid-column: span 4; }
  .gallery__item:first-child { grid-column: span 8; grid-row: span 2; aspect-ratio: auto; }
  .gallery--1 .gallery__item:first-child { grid-column: span 8; grid-row: auto; aspect-ratio: 16 / 10; }
  .gallery--2 .gallery__item:first-child,
  .gallery--2 .gallery__item:nth-child(2) { grid-column: span 6; grid-row: auto; aspect-ratio: 4 / 3; }
  .gallery--3 .gallery__item:nth-child(n + 2) { aspect-ratio: auto; }
}

/* The photo viewer (T-042): it fills the screen and nothing in it scrolls. The photo is fitted whole into the
   space between the Close row and the caption bar (never larger than its file, never cropped, never under the
   caption), centred, so a landscape photo on a landscape screen no longer runs off the bottom. The viewer is
   opaque: the page, its sticky header and the section bar do not show through. */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  border: 0;
  background: #0E0E0D;
  color: #fff;
}
.lightbox::backdrop { background: #0E0E0D; }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px;
}
.lightbox__figure {
  position: relative;
  min-height: 0;
  margin: 0;
}
.lightbox__img {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: calc(100% - 24px);
  max-height: 100%;
  margin: auto;
  border-radius: 14px;
  object-fit: contain;
}
.lightbox__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
}
.lightbox__caption {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}
.lightbox__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }
.lightbox__btn .icon { width: 20px; height: 20px; }
.lightbox__btn--prev .icon { transform: scaleX(-1); }
.lightbox__btn[hidden] { display: none; }
.lightbox__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600;
  color: #fff;
}
.lightbox__close .icon { width: 17px; height: 17px; }
@media (min-width: 768px) {
  .lightbox__top { padding: 18px 24px; }
  .lightbox__img { max-width: calc(100% - 48px); }
  .lightbox__bar { padding: 18px 24px 24px; }
}
/* Short landscape screens (a phone on its side): tighter rows, so the photo keeps most of the height. */
@media (max-height: 500px) {
  .lightbox__top { padding-top: 6px; padding-bottom: 6px; }
  .lightbox__bar { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
}
html.lightbox-open { overflow: hidden; }

/* 16. Tender and estimate CTA band
   ----------------------------------------------------------------------- */
.cta-band {
  display: grid;
  gap: 22px;
  padding: clamp(22px, 3.4vw, 52px);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-xl);
  background: var(--c-accent-soft);
}
.cta-band__title {
  max-width: 18ch;
  font-size: clamp(1.875rem, 1.3rem + 2vw, 3.25rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.cta-band__text {
  margin-top: 14px;
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.cta-band__actions { display: grid; gap: 10px; align-content: center; }
.cta-band__actions .btn { justify-content: space-between; }
.cta-band__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-ink);
}
.cta-band__phone .icon { width: 18px; height: 18px; color: var(--c-accent-ink); }
.cta-band__phone:hover { color: var(--c-accent-ink); }

@media (min-width: 1024px) {
  .cta-band { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; gap: 48px; }
  .cta-band__actions { justify-items: stretch; }
}

/* 17. Documents and downloads
   ----------------------------------------------------------------------- */
.doc-list { display: grid; gap: 10px; }
.doc {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.doc:hover { border-color: var(--c-line-2); box-shadow: var(--shadow-soft); }
.doc__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}
.doc__icon .icon { width: 22px; height: 22px; }
.doc__title { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.doc__link { text-decoration: none; color: var(--c-ink); }
.doc__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin-top: 3px;
  font-size: 0.8125rem;
  color: var(--c-muted);
}
.doc__meta span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin: 0 10px;
  background: var(--c-line-2);
  vertical-align: -1px;
}
.doc__end { display: flex; align-items: center; gap: 10px; }
.doc__state {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.doc__state--current { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.doc__state--renewal { background: #FBEDEA; color: var(--c-error); }
.doc__state--tbc { border: 1px dashed var(--c-line-2); color: var(--c-muted); }
.doc__action {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
  transition: transform 0.4s var(--ease);
}
.doc__action .icon { width: 17px; height: 17px; }
.doc:hover .doc__action { transform: translateY(2px); }
@media (max-width: 479.98px) {
  .doc { grid-template-columns: 44px minmax(0, 1fr); }
  .doc__end { grid-column: 2; }
}

/* 18. Accreditation cards
   ----------------------------------------------------------------------- */
.cert-grid { display: grid; gap: 12px; }
.cert {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.cert__head { display: flex; align-items: center; gap: 14px; }
.cert__head .badge__seal { flex: none; }
.cert__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.cert__standard { margin-top: 2px; font-size: var(--fs-xs); color: var(--c-muted); }
.cert__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
}
.cert__facts dt { font-size: 0.8125rem; color: var(--c-muted); }
.cert__facts dd { margin-top: 1px; font-size: var(--fs-small); font-weight: 600; }
.cert .text-link { align-self: flex-start; margin-top: auto; }
.cert--feature { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-on-dark); }
.cert--feature .cert__standard,
.cert--feature .cert__facts dt { color: var(--c-on-dark-muted); }
.cert--feature .cert__facts { border-top-color: rgba(255, 255, 255, 0.14); }
.cert--feature .text-link { color: var(--c-on-dark); }
@media (min-width: 640px) {
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cert-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 19. Stats band
   ----------------------------------------------------------------------- */
.stats-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 20px;
  padding: clamp(20px, 2.6vw, 34px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
}
.stats-band .figure { border-top-color: var(--c-line); }
.stats-band .figure__value .tbc { font-size: 0.9375rem; letter-spacing: 0.02em; vertical-align: middle; }
.stats-band .figure__value--text { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.125rem); letter-spacing: -0.03em; white-space: normal; }
@media (min-width: 768px) {
  .stats-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .stats-band--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats-band--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 20. People cards
   ----------------------------------------------------------------------- */
.people { display: grid; gap: 12px; }
.person {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.person__photo {
  overflow: hidden;
  aspect-ratio: 5 / 4;
  margin-bottom: 10px;
  border-radius: 16px;
  background: var(--c-surface-2);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__photo--empty {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  background:
    radial-gradient(circle at 30% 20%, rgba(164, 189, 57, 0.18), transparent 55%),
    var(--c-surface-2);
}
.person__initials {
  font-family: var(--f-serif);
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
  font-style: italic;
  line-height: 1;
  color: var(--c-ink-2);
}
.person__photo-note { font-size: 0.8125rem; font-weight: 600; color: var(--c-muted); }
.person__name,
.person__role,
.person__bio { margin-inline: 10px; }
.person__name { margin-block: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.person__role { font-size: var(--fs-small); font-weight: 600; color: var(--c-accent-ink); }
.person__bio { font-size: var(--fs-small); line-height: 1.6; color: var(--c-text-2); }
@media (min-width: 768px) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .people--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* (Theme 1.5.5, T-055: the `.people--names` rules of T-036 and T-051 are gone with About's names-only lists;
   the team portraits below replace them. The concept's copy still has them, unused.) */

/* Team portraits (Group About; user, 15 Oct): one 4:5 portrait per person in the house style
   (tools/ai-images/team-portraits.md), or the person's initials until their portrait is approved.
   Phones: two to a row under the heading. 768px up: three columns; Leadership's heading takes the first cell
   beside the two leaders. 1200px up: four columns, the heading over the first two. */
.team-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 14px;
  margin-top: clamp(40px, 5vw, 72px);
}
.team-group + .team-group {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(36px, 4.5vw, 56px);
  border-top: 1px solid var(--c-line-2);
}
.team-group__head {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 26rem;
}
.team-group__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.team-group__text { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--c-text-2); text-wrap: pretty; }
.team-group__list { display: contents; }
.member { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.member__photo {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  background: var(--c-bg);
}
.member__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* No portrait yet: initials between two pale panel joints, an echo of the facade behind the portraits. */
.member__photo--empty {
  display: grid;
  place-items: center;
  background:
    linear-gradient(var(--c-line), var(--c-line)) 22% 0 / 1px 100% no-repeat,
    linear-gradient(var(--c-line), var(--c-line)) 78% 0 / 1px 100% no-repeat,
    linear-gradient(180deg, var(--c-surface), var(--c-bg));
}
.member__initials {
  font-family: var(--f-serif);
  font-size: clamp(2.75rem, 2rem + 2.4vw, 4.5rem);
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink-2);
}
.member__name {
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.member__role { margin: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--c-muted); }
@media (min-width: 768px) {
  .team-group { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
  .team-group--lead > .team-group__head { grid-column: auto; }
}
@media (min-width: 1200px) {
  .team-group { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; }
  .team-group > .team-group__head { grid-column: span 2; padding-right: 24px; }
}
/* No one alone in the last row (lead, 16 Oct, when the team reached seven): the heading takes the number of cells
   that fills the grid. The member count is read with :has() (first member's place from the end); browsers without
   :has() keep the layout above. */
@media (max-width: 767.98px) {
  .team-group:has(.member:first-child:nth-last-child(2n+1)) > .team-group__head { grid-column: auto; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .team-group:has(.member:first-child:nth-last-child(3n+1)) > .team-group__head { grid-column: span 2; }
  .team-group:has(.member:first-child:nth-last-child(3n+2)) > .team-group__head { grid-column: auto; }
}
@media (min-width: 1200px) {
  .team-group:has(.member:first-child:nth-last-child(4n+1)) > .team-group__head { grid-column: span 3; }
  .team-group:has(.member:first-child:nth-last-child(4n+3)) > .team-group__head { grid-column: auto; padding-right: 0; }
  .team-group:has(.member:first-child:nth-last-child(4n)) > .team-group__head { grid-column: 1 / -1; }
}

/* 21. Map placeholder and contact page parts
   ----------------------------------------------------------------------- */
.map-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
}
.map-card__canvas {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  min-height: 300px;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 46%, rgba(164, 189, 57, 0.22) 0, rgba(164, 189, 57, 0) 34%),
    linear-gradient(180deg, #EFEEE8, #E7E5DE);
  text-align: center;
}
.map-card__pin {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-accent);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.6), var(--shadow-lift);
}
.map-card__pin .icon { width: 28px; height: 28px; }
.map-card__place { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.map-card__note {
  padding: 4px 12px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-muted);
}
.map-card__body { display: grid; gap: 14px; align-content: start; padding: clamp(20px, 2.6vw, 34px); }
.map-card__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; }
.map-card__address { font-style: normal; font-size: var(--fs-lead); line-height: 1.45; }
.map-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (min-width: 1024px) {
  .map-card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .map-card__canvas { min-height: 440px; }
}

.company-details { display: grid; gap: 10px 24px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.company-details dt { font-size: 0.8125rem; color: var(--c-muted); }
.company-details dd { font-size: var(--fs-small); font-weight: 600; line-height: 1.45; }
@media (min-width: 640px) {
  .company-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contact-page { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 1024px) {
  .contact-page { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .contact-page .tender-form { position: sticky; top: calc(var(--sticky-top) + 10px); }
}

/* Form additions used on the contact page */
.choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-group .field__label { padding: 0; }
.choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-field);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.choice > span::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--c-field);
  border-radius: 5px;
  background: #fff;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.choice input:checked + span { border-color: var(--c-ink); background: var(--c-accent-soft); }
.choice input:checked + span::before {
  border-color: var(--c-ink);
  background: var(--c-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23A4BD39' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.choice input:focus-visible + span { outline: 3px solid var(--c-accent-ink); outline-offset: 3px; }
.field.is-invalid .choice > span { border-color: var(--c-error); }

.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); cursor: pointer; }
.consent input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--c-ink);
}
.consent a { color: var(--c-ink); font-weight: 600; text-underline-offset: 3px; }
.field.is-invalid .consent { color: var(--c-error); }
.form-note { font-size: var(--fs-xs); color: var(--c-muted); }

.contact-list { display: grid; gap: 18px; }

/* Contact page extras */
.contact-page__lead { margin-top: 20px; }
.contact-page .tender__subtitle { margin-top: 30px; }
.tender-form__intro { margin: -8px 0 22px; font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); }
.field__help { margin-top: 6px; font-size: var(--fs-xs); color: var(--c-muted); }
.contact-group {
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.contact-group .project-body__title { margin-bottom: 4px; }
.contact-group__note { font-size: var(--fs-small); color: var(--c-text-2); }
.contact-group__list { margin-top: 14px; border-top: 1px solid var(--c-line); }
.contact-group__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
  color: var(--c-ink);
}
.contact-group__list strong { display: block; font-size: 1.0625rem; font-weight: 600; }
.contact-group__list span span { display: block; }
.contact-group__list a > span { font-size: var(--fs-small); line-height: 1.45; color: var(--c-text-2); }
.contact-group__list .icon { width: 18px; height: 18px; flex: none; }
.contact-group__list a:hover strong { color: var(--c-accent-ink); }

/* About page extras */
.split__content .prose { margin-top: 20px; }
.section-head .chip-list { margin-top: 22px; }
.person--note { background: transparent; border-style: dashed; }
.person--note .person__photo--empty { background: var(--c-surface-2); }
.group-card__brand .brand__name { font-size: 1.25rem; }
.recognition-list { margin-top: 24px; gap: 16px; font-size: var(--fs-body); }
.recognition-list li { padding-top: 16px; border-top: 1px solid var(--c-line); }
.recognition-list strong { font-size: 1.125rem; }
.split__media .recognition-img { width: 100%; max-width: 380px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); }
@media (min-width: 1024px) {
  .split__media:has(.recognition-img) { justify-items: end; }
}

/* 22. 404 layout
   ----------------------------------------------------------------------- */
.error-page { padding-block: clamp(32px, 6vw, 96px) var(--section-y); }
.error-page__inner { display: grid; gap: clamp(28px, 4vw, 56px); }
.error-page__code {
  font-family: var(--f-serif);
  font-size: clamp(6rem, 3rem + 12vw, 13rem);
  font-style: italic;
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--c-accent-ink);
}
.error-page__title {
  margin-top: 10px;
  font-size: var(--fs-page-title);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.error-page__text { margin-top: 18px; max-width: 34em; font-size: var(--fs-lead); color: var(--c-ink-2); }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.error-page__links { border-top: 1px solid var(--c-line); }
.error-page__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  border-bottom: 1px solid var(--c-line);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-ink);
}
.error-page__links a .icon { width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
.error-page__links a:hover { color: var(--c-accent-ink); }
.error-page__links a:hover .icon { transform: translateX(4px); }
@media (min-width: 1024px) {
  .error-page__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}

/* 23. Component kit page (concept only)
   ----------------------------------------------------------------------- */
.kit-gap { margin-top: var(--stack); }
.kit-gap-sm { margin-top: 22px; }
.kit-narrow { max-width: 440px; }
.kit-label {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  color: #fff;
}

/* Very narrow phones (320 to 379px): long button labels wrap inside the pill instead of
   pushing the layout wider than the screen; figures and the CTA band tighten up. */
/* R1-04: a long button label in the CTA band no longer pushes the band 8px past the screen at 380 to 397px:
   grid items may shrink and the label wraps inside the pill. */
.cta-band__intro,
.cta-band__actions { min-width: 0; }
@media (max-width: 479.98px) {
  .cta-band__actions .btn { white-space: normal; text-align: left; }
}

@media (max-width: 379.98px) {
  .page-inner .btn { white-space: normal; text-align: left; }
  .page-inner .btn--lg { padding-left: 18px; font-size: 1rem; }
  .cta-band { padding: 18px; }
  .page-hero__facts { gap: 16px 14px; }
  .page-hero__facts .figure__value { font-size: 1.5rem; white-space: normal; }
  .stats-band { padding: 16px; gap: 18px 14px; }
  .stats-band .figure__value { font-size: 1.5rem; white-space: normal; }
}

/* 24. Motion additions (all off under reduced motion via main.css)
   ----------------------------------------------------------------------- */
.js .feature-grid > [data-reveal]:nth-child(3n + 2),
.js .project-grid--3 > [data-reveal]:nth-child(3n + 2),
.js .people > [data-reveal]:nth-child(2),
.js .team-group__list > [data-reveal]:nth-child(2n),
.js .cert-grid > [data-reveal]:nth-child(2) { transition-delay: 0.06s; }
.js .feature-grid > [data-reveal]:nth-child(3n),
.js .project-grid--3 > [data-reveal]:nth-child(3n),
.js .people > [data-reveal]:nth-child(3),
.js .team-group__list > [data-reveal]:nth-child(3n),
.js .cert-grid > [data-reveal]:nth-child(3) { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  .js .page-hero__title { animation: none; }
}

@media print {
  .site-header, .menu, .mobile-bar, .section-nav, .toast, .cta-band__actions, .filter-bar { display: none !important; }
  .page-inner { --section-y: 24px; }
}

/* 25. Grid pass (T-026 follow-up, 13 Oct, lead): in every card or tile grid the last row is complete at
   390, 768, 1024 and 1440. Leftover items stretch across the row (a stretched card with a photo sets the
   photo beside the text), or the column count changes so the items divide evenly. Wherever a grid already
   ended on a full row, nothing changes. Text label/value lists (facts, spec, figures) are left as they are.
   ----------------------------------------------------------------------- */

/* Related projects and project news (two columns, 768 to 1023px): an odd last card fills the row.
   The catalogue (data-results) gets data-fill2 / data-fill3 from main.js block 12, because filters hide cards. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .project-grid--3:not(.project-grid--lead2):not([data-results]) > .project-card:last-child:nth-child(odd),
  .project-grid--3[data-results] > .project-card[data-fill2] {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .project-grid--3:not(.project-grid--lead2):not([data-results]) > .project-card:last-child:nth-child(odd) > .project-card__media,
  .project-grid--3[data-results] > .project-card[data-fill2] > .project-card__media {
    flex: 0 0 50%;
    aspect-ratio: auto;
    min-height: 280px;
  }
}
/* Three columns (1024px and up): two leftover cards share the row; one leftover card makes the last
   four cards two rows of two. Counted on the cards themselves, so it holds for any number of cards. */
@media (min-width: 1024px) {
  .project-grid--3:not(.project-grid--lead2):not([data-results]) > .project-card:nth-child(3n + 1):nth-last-child(2),
  .project-grid--3:not(.project-grid--lead2):not([data-results]) > .project-card:nth-child(3n + 2):last-child,
  .project-grid--3:not(.project-grid--lead2):not([data-results]) > .project-card:nth-child(3n + 1):nth-last-child(4),
  .project-grid--3:not(.project-grid--lead2):not([data-results]) > .project-card:nth-child(3n + 2):nth-last-child(3),
  .project-grid--3:not(.project-grid--lead2):not([data-results]) > .project-card:nth-child(3n):nth-last-child(2),
  .project-grid--3:not(.project-grid--lead2):not([data-results]) > .project-card:nth-child(3n + 4):last-child,
  .project-grid--3[data-results] > .project-card[data-fill3] { grid-column: span 6; }
}

/* Project gallery (four or more photos). Phones: the big first photo, then pairs; an even count leaves the
   last photo alone, so it takes the full width. 768px and up: the big photo with two beside it, then rows
   of three; two leftovers share the row, one leftover makes the last four photos two rows of two. */
@media (max-width: 767.98px) {
  .gallery--4 .gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}
@media (min-width: 768px) {
  .gallery--4 .gallery__item:first-child:nth-last-child(3n + 2) ~ .gallery__item:nth-last-child(-n + 2),
  .gallery--4 .gallery__item:first-child:nth-last-child(3n + 7) ~ .gallery__item:nth-last-child(-n + 4) { grid-column: span 6; }
  .gallery--4 .gallery__item:first-child:nth-last-child(4) ~ .gallery__item:last-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}

/* Stats band: four figures sit in one row from 768px; five make a row of three and a row of two
   (768 to 1199px); on phones an odd last figure takes the full width. */
@media (max-width: 767.98px) {
  .stats-band > .figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .stats-band--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .stats-band--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats-band--5 > .figure { grid-column: span 2; }
  .stats-band--5 > .figure:nth-last-child(-n + 2) { grid-column: span 3; }
}

/* Feature tiles, people and certificates in two columns: an odd last tile fills the row; a photo tile or a
   person card sets its picture beside the text. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .feature-grid > .feature:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .feature-grid > .feature--image:last-child:nth-child(odd) { flex-direction: row; }
  .feature-grid > .feature--image:last-child:nth-child(odd) > .feature__media { flex: 0 0 50%; aspect-ratio: auto; min-height: 240px; }
  .feature-grid > .feature--image:last-child:nth-child(odd) > .feature__body { flex: 1; justify-content: center; }
  .cert-grid--3 > .cert:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .people--3 > .person:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr;
    column-gap: 22px;
    row-gap: 8px;
    padding-bottom: 12px;
  }
  .people--3 > .person:last-child:nth-child(odd) > .person__photo { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
  .people--3 > .person:last-child:nth-child(odd) > :not(.person__photo) { grid-column: 2; }
  .people--3 > .person:last-child:nth-child(odd) > .person__name { margin-top: 10px; }
}

/* Certificates (three columns, 1024px and up): two leftover cards share the row, one leftover fills it. */
@media (min-width: 1024px) {
  .cert-grid--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cert-grid--3 > .cert { grid-column: span 2; }
  .cert-grid--3 > .cert:nth-child(3n + 1):nth-last-child(2),
  .cert-grid--3 > .cert:nth-child(3n + 2):last-child { grid-column: span 3; }
  .cert-grid--3 > .cert:nth-child(3n + 1):last-child { grid-column: 1 / -1; }
}

/* R1-02: photo credit under a project gallery (Worthing: Craig Auckland / Fotohaus). */
.gallery__credit { margin-top: 12px; }