/* ==========================================================================
   MLS Installatie & Bouwtechniek
   Class names are camelCase throughout (house rule 1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand blue sampled from the vehicle livery. */
  --colorBrand: #023d9d;
  --colorBrandDeep: #01276b;
  --colorBrandBright: #1a5ce0;
  --colorBrandTint: #eef3fc;

  --colorInk: #14171c;
  --colorInkSoft: #3c434e;
  --colorInkMuted: #6b7481;

  --colorSurface: #ffffff;
  --colorSurfaceAlt: #f7f8fa;
  --colorSurfaceWarm: #f4f2ef;
  --colorSurfaceDark: #11151b;

  --colorLine: #e3e6eb;
  --colorLineSoft: #eef0f3;

  --colorSuccess: #0f7a4f;
  --colorSuccessTint: #e8f5ef;
  --colorDanger: #b3261e;
  --colorDangerTint: #fdeceb;

  /* Fluid type scale. */
  --textXs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --textSm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --textBase: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --textMd: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --textLg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --textXl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text2xl: clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);
  --text3xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);

  --fontSans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --leadingTight: 1.12;
  --leadingSnug: 1.28;
  --leadingBase: 1.65;

  --trackTight: -0.022em;
  --trackWide: 0.08em;

  /* Spacing. */
  --space2: 0.5rem;
  --space3: 0.75rem;
  --space4: 1rem;
  --space5: 1.5rem;
  --space6: 2rem;
  --space7: 2.5rem;
  --space8: 3rem;
  --space9: 4rem;
  --sectionPad: clamp(4rem, 8vw, 7.5rem);
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --containerMax: 78rem;
  --containerNarrow: 46rem;

  --radiusSm: 4px;
  --radiusMd: 8px;
  --radiusLg: 14px;

  --shadowSm: 0 1px 2px rgb(20 23 28 / 6%), 0 2px 8px rgb(20 23 28 / 4%);
  --shadowMd: 0 4px 12px rgb(20 23 28 / 7%), 0 12px 32px rgb(20 23 28 / 6%);
  --shadowLg: 0 12px 28px rgb(20 23 28 / 10%), 0 32px 64px rgb(20 23 28 / 8%);

  --headerHeight: 4.5rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

html {
  /* Anchor targets clear the sticky header. */
  scroll-padding-top: calc(var(--headerHeight) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--colorSurface);
  color: var(--colorInk);
  font-family: var(--fontSans);
  font-size: var(--textBase);
  line-height: var(--leadingBase);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  color: var(--colorInk);
  font-weight: 700;
  letter-spacing: var(--trackTight);
  line-height: var(--leadingTight);
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
}

a {
  color: var(--colorBrand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.18s var(--ease);
}

a:hover {
  color: var(--colorBrandDeep);
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--colorBrandBright);
  outline-offset: 2px;
  border-radius: var(--radiusSm);
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

strong, b {
  font-weight: 700;
}

em, i {
  font-style: italic;
}

hr {
  border: 0;
  border-top: 1px solid var(--colorLine);
  margin: var(--space7) 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

.containerNarrow {
  max-width: var(--containerNarrow);
}

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

.sectionAlt {
  background: var(--colorSurfaceAlt);
}

.sectionWarm {
  background: var(--colorSurfaceWarm);
}

.sectionDark {
  background: var(--colorSurfaceDark);
  color: #fff;
}

.sectionDark h2,
.sectionDark h3 {
  color: #fff;
}

.sectionHeading {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

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

.sectionEyebrow {
  color: var(--colorBrand);
  font-size: var(--textXs);
  font-weight: 700;
  letter-spacing: var(--trackWide);
  text-transform: uppercase;
  margin-bottom: var(--space3);
}

.sectionDark .sectionEyebrow {
  color: #7ea6f0;
}

.sectionTitle {
  font-size: var(--text2xl);
}

.sectionLead {
  color: var(--colorInkSoft);
  font-size: var(--textMd);
  margin-top: var(--space4);
}

.sectionDark .sectionLead {
  color: #b9c0cb;
}

/* Rich text coming out of the WYSIWYG meta boxes. */
.richText > * + * {
  margin-top: var(--space4);
}

.richText p {
  color: var(--colorInkSoft);
}

.richText h3 {
  font-size: var(--textLg);
  margin-top: var(--space6);
}

.richText ul,
.richText ol {
  display: grid;
  gap: var(--space2);
  padding-left: 0;
}

.richText ul li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--colorInkSoft);
}

.richText ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--colorBrand);
}

.richText ol {
  counter-reset: richList;
}

.richText ol li {
  counter-increment: richList;
  position: relative;
  padding-left: 2rem;
  color: var(--colorInkSoft);
}

.richText ol li::before {
  content: counter(richList) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--colorBrand);
}

.richText a {
  text-decoration: underline;
}

.richText strong {
  color: var(--colorInk);
}

.sectionDark .richText p,
.sectionDark .richText li {
  color: #b9c0cb;
}

/* On any dark panel the emphasis colour has to invert too — .richText strong
   otherwise paints charcoal text onto a near-black background. */
.sectionDark .richText strong,
.sectionDark .richText a,
.ctaBody strong,
.ctaBody a,
.heroLead strong {
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.buttonBase {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radiusMd);
  font-size: var(--textSm);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.buttonBase:active {
  transform: translateY(1px);
}

.buttonPrimary {
  background: var(--colorBrand);
  border-color: var(--colorBrand);
  color: #fff;
  box-shadow: var(--shadowSm);
}

.buttonPrimary:hover {
  background: var(--colorBrandDeep);
  border-color: var(--colorBrandDeep);
  color: #fff;
  box-shadow: var(--shadowMd);
}

.buttonSecondary {
  background: var(--colorSurface);
  border-color: var(--colorLine);
  color: var(--colorInk);
}

.buttonSecondary:hover {
  border-color: var(--colorBrand);
  color: var(--colorBrand);
}

.buttonGhost {
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 45%);
  color: #fff;
  backdrop-filter: blur(6px);
}

.buttonGhost:hover {
  background: rgb(255 255 255 / 22%);
  border-color: #fff;
  color: #fff;
}

.buttonFull {
  width: 100%;
}

/* --------------------------------------------------------------------------
   5. Header and navigation
   -------------------------------------------------------------------------- */

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.siteHeader[data-scrolled="true"] {
  border-bottom-color: var(--colorLine);
  box-shadow: var(--shadowSm);
}

.headerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space5);
  min-height: var(--headerHeight);
}

.brandLockup {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--colorInk);
  text-decoration: none;
  flex-shrink: 0;
}

.brandMark {
  width: auto;
  height: 2.15rem;
  color: var(--colorBrand);
  transition: transform 0.3s var(--ease);
}

.brandLockup:hover .brandMark {
  transform: rotate(-8deg);
}

.brandWord {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brandWordMain {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--colorInk);
}

.brandWordSub {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--colorInkMuted);
  margin-top: 0.2rem;
}

.headerNav {
  display: flex;
  align-items: center;
  gap: var(--space5);
  margin-left: auto;
}

.primaryMenu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.85rem);
}

.primaryMenu a {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  color: var(--colorInkSoft);
  font-size: var(--textSm);
  font-weight: 600;
  text-decoration: none;
}

.primaryMenu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--colorBrand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease);
}

.primaryMenu a:hover,
.primaryMenu .current-menu-item > a,
.primaryMenu .current_page_item > a,
.primaryMenu a[aria-current] {
  color: var(--colorInk);
}

.primaryMenu a:hover::after,
.primaryMenu .current-menu-item > a::after,
.primaryMenu .current_page_item > a::after,
.primaryMenu a[aria-current]::after {
  transform: scaleX(1);
}

.headerActions {
  display: flex;
  align-items: center;
  gap: var(--space4);
}

.headerPhone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--colorInk);
  font-size: var(--textSm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.headerPhone svg {
  width: 1rem;
  height: 1rem;
  color: var(--colorBrand);
}

.headerPhone:hover {
  color: var(--colorBrand);
}

.navToggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--colorLine);
  border-radius: var(--radiusMd);
  cursor: pointer;
  color: var(--colorInk);
}

.navToggleBars {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color 0.2s var(--ease);
}

.navToggleBars::before,
.navToggleBars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.26s var(--ease);
}

.navToggleBars::before { top: -6px; }
.navToggleBars::after { top: 6px; }

.navToggle[aria-expanded="true"] .navToggleBars {
  background: transparent;
}

.navToggle[aria-expanded="true"] .navToggleBars::before {
  transform: translateY(6px) rotate(45deg);
}

.navToggle[aria-expanded="true"] .navToggleBars::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 60rem) {
  .navToggle {
    display: inline-flex;
  }

  .headerNav {
    position: fixed;
    inset: var(--headerHeight) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space5) var(--gutter) var(--space7);
    background: var(--colorSurface);
    border-bottom: 1px solid var(--colorLine);
    box-shadow: var(--shadowLg);
    max-height: calc(100dvh - var(--headerHeight));
    overflow-y: auto;
    /* Hidden until toggled; the attribute is driven by mlsMain.mjs. */
    display: none;
  }

  .headerNav[data-open="true"] {
    display: flex;
  }

  .primaryMenu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .primaryMenu li {
    border-bottom: 1px solid var(--colorLineSoft);
  }

  .primaryMenu a {
    display: block;
    padding: 0.95rem 0;
    font-size: var(--textMd);
  }

  .primaryMenu a::after {
    display: none;
  }

  .headerActions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space3);
    margin-top: var(--space5);
  }

  .headerPhone {
    justify-content: center;
    padding: 0.75rem;
    border: 1px solid var(--colorLine);
    border-radius: var(--radiusMd);
  }
}

/* --------------------------------------------------------------------------
   6. Media helpers — every image sits in a fixed ratio box (house rule 9)
   -------------------------------------------------------------------------- */

.mediaFrame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radiusLg);
  background: var(--colorSurfaceAlt);
}

.mediaImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ratioWide { aspect-ratio: 3 / 2; }
.ratioHero { aspect-ratio: 16 / 9; }
.ratioCard { aspect-ratio: 4 / 3; }
.ratioSquare { aspect-ratio: 1 / 1; }
.ratioPortrait { aspect-ratio: 3 / 4; }

.mediaZoom .mediaImage {
  transition: transform 0.6s var(--ease);
}

.mediaZoom:hover .mediaImage {
  transform: scale(1.045);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.heroSection {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(30rem, 78vh, 46rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  background: var(--colorSurfaceDark);
}

.heroMedia {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.heroMedia .mediaImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heroScrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgb(9 12 17 / 88%) 0%, rgb(9 12 17 / 55%) 42%, rgb(9 12 17 / 18%) 75%, rgb(9 12 17 / 8%) 100%),
    linear-gradient(to right, rgb(9 12 17 / 55%) 0%, rgb(9 12 17 / 0%) 60%);
}

.heroInner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.heroBody {
  max-width: 44rem;
  color: #fff;
}

.heroEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  margin-bottom: var(--space5);
  background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--textXs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.heroTitle {
  color: #fff;
  font-size: var(--text3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.heroLead {
  margin-top: var(--space5);
  max-width: 38rem;
  color: rgb(255 255 255 / 88%);
  font-size: var(--textMd);
}

.heroLead p + p {
  margin-top: var(--space3);
}

.heroActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space3);
  margin-top: var(--space6);
}

.heroUspRow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space4) var(--space6);
  margin-top: var(--space7);
  padding-top: var(--space5);
  border-top: 1px solid rgb(255 255 255 / 20%);
}

.heroUspItem {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgb(255 255 255 / 92%);
  font-size: var(--textSm);
  font-weight: 600;
}

.heroUspItem svg {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  color: #7ea6f0;
}

/* --------------------------------------------------------------------------
   8. About
   -------------------------------------------------------------------------- */

.aboutGrid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 54rem) {
  .aboutGrid {
    grid-template-columns: 1fr 1fr;
  }

  .aboutGrid[data-flip="true"] .aboutMedia {
    order: 2;
  }
}

.aboutMedia {
  position: relative;
}

.aboutMediaStack {
  position: relative;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  padding-right: clamp(2rem, 5vw, 3.5rem);
}

.aboutMediaMain {
  position: relative;
  z-index: 2;
  box-shadow: var(--shadowMd);
}

.aboutMediaInset {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 46%;
  border: 6px solid var(--colorSurface);
  box-shadow: var(--shadowMd);
}

.aboutBadge {
  position: absolute;
  left: clamp(-0.5rem, -1vw, -1.5rem);
  top: clamp(1rem, 3vw, 2rem);
  z-index: 4;
  display: grid;
  gap: 0.15rem;
  padding: 1rem 1.35rem;
  background: var(--colorBrand);
  border-radius: var(--radiusMd);
  box-shadow: var(--shadowMd);
  color: #fff;
}

.aboutBadgeNumber {
  font-size: var(--textXl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.aboutBadgeLabel {
  font-size: var(--textXs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.86;
}

/* --------------------------------------------------------------------------
   9. Services
   -------------------------------------------------------------------------- */

.serviceGrid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.serviceCard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--colorSurface);
  border: 1px solid var(--colorLine);
  border-radius: var(--radiusLg);
  transition: border-color 0.24s var(--ease), box-shadow 0.24s var(--ease),
    transform 0.24s var(--ease);
}

.serviceCard:hover {
  border-color: transparent;
  box-shadow: var(--shadowMd);
  transform: translateY(-3px);
}

.serviceCardMedia {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--colorSurfaceAlt);
}

.serviceCardMedia .mediaImage {
  transition: transform 0.6s var(--ease);
}

.serviceCard:hover .serviceCardMedia .mediaImage {
  transform: scale(1.05);
}

.serviceCardBody {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
}

.serviceCardTitle {
  font-size: var(--textLg);
  margin-bottom: var(--space3);
}

.serviceList {
  display: grid;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: var(--space4);
}

.serviceList li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--colorInkSoft);
  font-size: var(--textSm);
}

.serviceList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--colorBrand);
}

/* --------------------------------------------------------------------------
   10. Reasons to choose
   -------------------------------------------------------------------------- */

.reasonGrid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.reasonItem {
  display: flex;
  gap: var(--space4);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--colorSurface);
  border: 1px solid var(--colorLine);
  border-radius: var(--radiusLg);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.reasonItem:hover {
  border-color: var(--colorBrandTint);
  box-shadow: var(--shadowSm);
}

.reasonIcon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--colorBrandTint);
  border-radius: var(--radiusMd);
  color: var(--colorBrand);
}

.reasonIcon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.reasonText {
  font-size: var(--textSm);
  font-weight: 600;
  color: var(--colorInk);
  line-height: var(--leadingSnug);
  align-self: center;
}

/* --------------------------------------------------------------------------
   11. Process
   -------------------------------------------------------------------------- */

.processLayout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 60rem) {
  .processLayout {
    grid-template-columns: 0.85fr 1fr;
  }

  .processMedia {
    position: sticky;
    top: calc(var(--headerHeight) + 2rem);
  }
}

.processList {
  display: grid;
  gap: 0;
  counter-reset: processCounter;
}

.processStep {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space5);
  padding-block: clamp(1.25rem, 2.5vw, 1.85rem);
  counter-increment: processCounter;
}

.processStep + .processStep {
  border-top: 1px solid var(--colorLine);
}

.processStepNumber {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--colorBrandTint);
  border-radius: 50%;
  color: var(--colorBrand);
  font-size: var(--textSm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.24s var(--ease), color 0.24s var(--ease);
}

.processStep:hover .processStepNumber {
  background: var(--colorBrand);
  color: #fff;
}

.processStepTitle {
  font-size: var(--textMd);
  margin-bottom: 0.35rem;
}

.processStepBody p {
  color: var(--colorInkSoft);
  font-size: var(--textSm);
}

/* --------------------------------------------------------------------------
   12. Before / after
   -------------------------------------------------------------------------- */

.beforeAfter {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .beforeAfter {
    grid-template-columns: 1fr 1fr;
  }
}

.beforeAfterItem {
  position: relative;
}

.beforeAfterLabel {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 2;
  padding: 0.35rem 0.8rem;
  background: rgb(9 12 17 / 78%);
  border-radius: 100px;
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--textXs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.beforeAfterItem[data-state="after"] .beforeAfterLabel {
  background: var(--colorBrand);
}

/* --------------------------------------------------------------------------
   13. Projects
   -------------------------------------------------------------------------- */

.projectGrid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.projectCard {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radiusLg);
  background: var(--colorSurfaceDark);
  text-decoration: none;
  isolation: isolate;
}

.projectCardMedia {
  aspect-ratio: 4 / 3;
}

.projectCard .mediaImage {
  transition: transform 0.7s var(--ease);
}

.projectCard:hover .mediaImage {
  transform: scale(1.06);
}

.projectCardOverlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgb(9 12 17 / 86%) 0%,
    rgb(9 12 17 / 42%) 45%,
    rgb(9 12 17 / 0%) 78%
  );
}

.projectCardBody {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  color: #fff;
}

.projectCardTag {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.65rem;
  background: rgb(255 255 255 / 18%);
  border-radius: 100px;
  backdrop-filter: blur(6px);
  font-size: var(--textXs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.projectCardTitle {
  color: #fff;
  font-size: var(--textMd);
}

.projectCardMeta {
  margin-top: 0.3rem;
  color: rgb(255 255 255 / 78%);
  font-size: var(--textSm);
}

/* Tall feature tile for the first project in the grid. */
@media (min-width: 60rem) {
  .projectGrid[data-feature="true"] > .projectCard:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .projectGrid[data-feature="true"] > .projectCard:first-child .projectCardMedia {
    aspect-ratio: 1 / 1;
  }

  .projectGrid[data-feature="true"] > .projectCard:first-child .projectCardTitle {
    font-size: var(--textLg);
  }
}

.sectionActions {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

/* --------------------------------------------------------------------------
   13b. Projects overview (/projecten/)
   -------------------------------------------------------------------------- */

.archiveHero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(22rem, 46vh, 30rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  background: var(--colorSurfaceDark);
}

.archiveHeroMedia {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.archiveHeroMedia .mediaImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archiveHeroScrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgb(9 12 17 / 92%) 0%, rgb(9 12 17 / 62%) 45%, rgb(9 12 17 / 25%) 100%),
    linear-gradient(to right, rgb(9 12 17 / 60%) 0%, rgb(9 12 17 / 0%) 65%);
}

.archiveHeroInner {
  position: relative;
  z-index: 2;
  width: 100%;
  color: #fff;
}

.archiveHeroInner .breadcrumbNav,
.archiveHeroInner .breadcrumbNav a {
  color: rgb(255 255 255 / 70%);
}

.archiveHeroInner .breadcrumbNav a:hover {
  color: #fff;
}

.archiveHeroEyebrow {
  color: #7ea6f0;
  font-size: var(--textXs);
  font-weight: 700;
  letter-spacing: var(--trackWide);
  text-transform: uppercase;
  margin-bottom: var(--space3);
}

.archiveHeroTitle {
  color: #fff;
  font-size: var(--text3xl);
  font-weight: 800;
}

.archiveHeroLead {
  margin-top: var(--space4);
  max-width: 40rem;
}

.archiveHeroLead p {
  color: rgb(255 255 255 / 86%);
  font-size: var(--textMd);
}

.archiveHeroCount {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space5);
  padding: 0.45rem 1rem;
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--textSm);
}

.archiveHeroCount strong {
  font-weight: 800;
}

/* Featured project */

.featuredProject {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
  .featuredProject {
    grid-template-columns: 1.25fr 1fr;
  }
}

.featuredProjectMedia {
  display: block;
  aspect-ratio: 3 / 2;
  box-shadow: var(--shadowMd);
}

.featuredProjectLabel {
  display: inline-block;
  margin-bottom: var(--space4);
  padding: 0.3rem 0.75rem;
  background: var(--colorBrandTint);
  border-radius: 100px;
  color: var(--colorBrand);
  font-size: var(--textXs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.featuredProjectTitle {
  font-size: var(--textXl);
}

.featuredProjectTitle a {
  color: var(--colorInk);
  text-decoration: none;
}

.featuredProjectTitle a:hover {
  color: var(--colorBrand);
}

.featuredProjectText {
  margin-top: var(--space4);
  color: var(--colorInkSoft);
}

.featuredProjectFacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space6);
  margin-top: var(--space5);
  padding-top: var(--space5);
  border-top: 1px solid var(--colorLine);
}

.featuredProjectFacts dt {
  font-size: var(--textXs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colorInkMuted);
  margin-bottom: 0.2rem;
}

.featuredProjectFacts dd {
  font-size: var(--textSm);
  font-weight: 600;
  color: var(--colorInk);
}

.featuredProjectAction {
  margin-top: var(--space6);
}

/* Filter bar */

.projectOverviewHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space5);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.projectOverviewHead .sectionTitle {
  font-size: var(--textXl);
}

.filterBar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filterChip {
  padding: 0.5rem 1rem;
  background: var(--colorSurface);
  border: 1px solid var(--colorLine);
  border-radius: 100px;
  color: var(--colorInkSoft);
  font-family: inherit;
  font-size: var(--textSm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.filterChip:hover {
  border-color: var(--colorBrand);
  color: var(--colorBrand);
}

.filterChip[aria-pressed="true"] {
  background: var(--colorBrand);
  border-color: var(--colorBrand);
  color: #fff;
}

/* Card grid */

.projectListGrid {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.projectListItem[hidden] {
  display: none;
}

.projectListCard {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--colorSurface);
  border: 1px solid var(--colorLine);
  border-radius: var(--radiusLg);
  transition: border-color 0.24s var(--ease), box-shadow 0.24s var(--ease),
    transform 0.24s var(--ease);
}

.projectListCard:hover {
  border-color: transparent;
  box-shadow: var(--shadowMd);
  transform: translateY(-4px);
}

.projectListMedia {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.projectListMedia .mediaImage {
  transition: transform 0.6s var(--ease);
}

.projectListCard:hover .projectListMedia .mediaImage {
  transform: scale(1.05);
}

.projectListTag {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  padding: 0.3rem 0.7rem;
  background: rgb(9 12 17 / 78%);
  border-radius: 100px;
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--textXs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.projectListBody {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.2vw, 1.65rem);
}

.projectListTitle {
  font-size: var(--textMd);
  margin-bottom: var(--space3);
}

.projectListTitle a {
  color: var(--colorInk);
  text-decoration: none;
}

/* Make the whole card clickable while keeping one real link per card. */
.projectListTitle a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.projectListCard {
  position: relative;
}

.projectListTitle a:hover {
  color: var(--colorBrand);
}

.projectListExcerpt {
  color: var(--colorInkSoft);
  font-size: var(--textSm);
}

.projectListFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space3);
  margin-top: auto;
  padding-top: var(--space5);
}

.projectListLocation {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--colorInkMuted);
  font-size: var(--textXs);
}

.projectListLocation svg {
  width: 0.9rem;
  height: 0.9rem;
}

.projectListLink {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  color: var(--colorBrand);
  font-size: var(--textSm);
  font-weight: 600;
}

.projectListLink svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.24s var(--ease);
}

.projectListCard:hover .projectListLink svg {
  transform: translateX(3px);
}

.projectEmptyState {
  margin-top: var(--space6);
  padding: var(--space6);
  background: var(--colorSurface);
  border: 1px dashed var(--colorLine);
  border-radius: var(--radiusLg);
  color: var(--colorInkMuted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   14. Reviews
   -------------------------------------------------------------------------- */

/* Two columns at most: the quotes run long, and four reviews then sit as a
   balanced 2x2 instead of leaving an orphan on a third row. */
.reviewGrid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
}

.reviewCard {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--colorSurface);
  border: 1px solid var(--colorLine);
  border-radius: var(--radiusLg);
}

.reviewStars {
  display: flex;
  gap: 0.15rem;
  margin-bottom: var(--space4);
  color: #e8a317;
}

.reviewStars svg {
  width: 1rem;
  height: 1rem;
}

.reviewQuote {
  flex: 1;
  color: var(--colorInkSoft);
  font-size: var(--textSm);
  line-height: 1.7;
}

.reviewQuote p + p {
  margin-top: var(--space3);
}

.reviewAuthor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space5);
  padding-top: var(--space4);
  border-top: 1px solid var(--colorLineSoft);
}

.reviewAvatar {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--colorBrandTint);
  border-radius: 50%;
  color: var(--colorBrand);
  font-size: var(--textSm);
  font-weight: 700;
}

.reviewAuthorName {
  display: block;
  font-size: var(--textSm);
  font-weight: 700;
  color: var(--colorInk);
  line-height: 1.3;
}

.reviewAuthorSource {
  display: block;
  font-size: var(--textXs);
  color: var(--colorInkMuted);
}

/* --------------------------------------------------------------------------
   15. Call to action
   -------------------------------------------------------------------------- */

.ctaSection {
  position: relative;
  overflow: hidden;
  background: var(--colorSurfaceDark);
  color: #fff;
}

.ctaMedia {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ctaMedia .mediaImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}

.ctaScrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, rgb(2 61 157 / 92%) 0%, rgb(9 12 17 / 88%) 62%);
}

.ctaInner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

@media (min-width: 54rem) {
  .ctaInner {
    grid-template-columns: 1.4fr auto;
  }
}

.ctaTitle {
  color: #fff;
  font-size: var(--text2xl);
}

.ctaBody {
  margin-top: var(--space4);
  max-width: 38rem;
}

.ctaBody p {
  color: rgb(255 255 255 / 86%);
}

.ctaActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space3);
}

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */

.contactLayout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 60rem) {
  .contactLayout {
    grid-template-columns: 1fr 0.85fr;
  }
}

.contactPanel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--colorSurfaceAlt);
  border: 1px solid var(--colorLine);
  border-radius: var(--radiusLg);
}

.contactDetailList {
  display: grid;
  gap: var(--space5);
  margin-top: var(--space5);
}

.contactDetail {
  display: flex;
  gap: var(--space4);
}

.contactDetailIcon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--colorSurface);
  border: 1px solid var(--colorLine);
  border-radius: var(--radiusMd);
  color: var(--colorBrand);
}

.contactDetailIcon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.contactDetailLabel {
  font-size: var(--textXs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colorInkMuted);
  margin-bottom: 0.15rem;
}

.contactDetailValue {
  font-size: var(--textSm);
  font-weight: 600;
  color: var(--colorInk);
}

.contactDetailValue a {
  color: inherit;
  text-decoration: none;
}

.contactDetailValue a:hover {
  color: var(--colorBrand);
}

.contactDetailValue address {
  font-style: normal;
}

.contactFormColumn .sectionLead {
  margin-bottom: var(--space6);
}

.contactFormColumn .sectionTitle {
  font-size: var(--textXl);
}

.contactPanel .sectionTitle {
  font-size: var(--textLg);
}

.contactBodyContent {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-inline: auto;
}

.searchForm {
  display: flex;
  gap: var(--space3);
  margin-top: var(--space5);
}

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

.postListItem {
  padding-bottom: var(--space6);
  border-bottom: 1px solid var(--colorLine);
}

.postListItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.postListTitle {
  font-size: var(--textLg);
  margin-bottom: 0.4rem;
}

.postListTitle a {
  color: var(--colorInk);
  text-decoration: none;
}

.postListTitle a:hover {
  color: var(--colorBrand);
}

.postListMeta {
  font-size: var(--textXs);
  color: var(--colorInkMuted);
  margin-bottom: var(--space3);
}

/* Form */

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

.formRow {
  display: grid;
  gap: var(--space5);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .formRow[data-cols="2"] {
    grid-template-columns: 1fr 1fr;
  }
}

.formField {
  display: grid;
  gap: 0.45rem;
}

.formLabel {
  font-size: var(--textSm);
  font-weight: 600;
  color: var(--colorInk);
}

.formRequired {
  color: var(--colorBrand);
}

.formHint {
  font-size: var(--textXs);
  color: var(--colorInkMuted);
}

.formInput,
.formTextarea,
.formSelect {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--colorSurface);
  border: 1px solid var(--colorLine);
  border-radius: var(--radiusMd);
  color: var(--colorInk);
  font-family: inherit;
  font-size: var(--textSm);
  line-height: 1.5;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.formTextarea {
  min-height: 9rem;
  resize: vertical;
}

.formSelect {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7481' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

.formInput:focus,
.formTextarea:focus,
.formSelect:focus {
  border-color: var(--colorBrand);
  box-shadow: 0 0 0 3px rgb(2 61 157 / 12%);
  outline: none;
}

.formInput[aria-invalid="true"],
.formTextarea[aria-invalid="true"] {
  border-color: var(--colorDanger);
}

.formError {
  font-size: var(--textXs);
  font-weight: 600;
  color: var(--colorDanger);
}

/* The honeypot field must stay in the DOM but out of sight and out of the
   tab order. Not display:none — some bots skip hidden fields. */
.formHoneypot {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formConsent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.formConsent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  accent-color: var(--colorBrand);
}

.formConsent label {
  font-size: var(--textXs);
  color: var(--colorInkSoft);
  line-height: 1.55;
}

.formNotice {
  padding: var(--space4) var(--space5);
  border-radius: var(--radiusMd);
  font-size: var(--textSm);
  border: 1px solid transparent;
}

.formNoticeSuccess {
  background: var(--colorSuccessTint);
  border-color: #bfe3d2;
  color: var(--colorSuccess);
}

.formNoticeError {
  background: var(--colorDangerTint);
  border-color: #f3c9c6;
  color: var(--colorDanger);
}

.formNotice strong {
  display: block;
  margin-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.siteFooter {
  background: var(--colorSurfaceDark);
  color: rgb(255 255 255 / 72%);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.footerGrid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 48rem) {
  .footerGrid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footerBrandMark {
  color: #fff;
}

.footerBrandMark .brandWordMain,
.footerBrandMark .brandWordSub {
  color: #fff;
}

.footerBrandMark .brandWordSub {
  color: rgb(255 255 255 / 60%);
}

.footerBrandMark .brandMark {
  color: #4d87ea;
}

.footerTagline {
  margin-top: var(--space4);
  max-width: 24rem;
  font-size: var(--textSm);
  color: rgb(255 255 255 / 65%);
}

.footerColumnTitle,
.footerWidgetTitle {
  color: #fff;
  font-size: var(--textXs);
  font-weight: 700;
  letter-spacing: var(--trackWide);
  text-transform: uppercase;
  margin-bottom: var(--space4);
}

.footerList {
  display: grid;
  gap: 0.6rem;
}

.footerList a,
.footerList span {
  color: rgb(255 255 255 / 72%);
  font-size: var(--textSm);
  text-decoration: none;
}

.footerList a:hover {
  color: #fff;
  text-decoration: underline;
}

.footerList address {
  font-style: normal;
  color: rgb(255 255 255 / 72%);
  font-size: var(--textSm);
  line-height: 1.7;
}

.footerBottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space4);
  padding-block: var(--space5);
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: var(--textXs);
  color: rgb(255 255 255 / 55%);
}

.footerLegal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space4);
}

.footerLegal span + span::before {
  content: "·";
  margin-right: var(--space4);
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   18. Page and article content
   -------------------------------------------------------------------------- */

.pageHeader {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--colorSurfaceAlt);
  border-bottom: 1px solid var(--colorLine);
}

.pageTitle {
  font-size: var(--text2xl);
}

.pageIntro {
  margin-top: var(--space4);
  max-width: 42rem;
  color: var(--colorInkSoft);
  font-size: var(--textMd);
}

.breadcrumbNav {
  margin-bottom: var(--space4);
  font-size: var(--textXs);
  color: var(--colorInkMuted);
}

.breadcrumbNav ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.breadcrumbNav li + li::before {
  content: "›";
  margin-right: 0.45rem;
  opacity: 0.6;
}

.breadcrumbNav a {
  color: var(--colorInkMuted);
  text-decoration: none;
}

.breadcrumbNav a:hover {
  color: var(--colorBrand);
}

.pageFeature {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.entryContent > * + * {
  margin-top: var(--space5);
}

.entryContent h2 {
  font-size: var(--textXl);
  margin-top: var(--space8);
}

.entryContent h3 {
  font-size: var(--textLg);
  margin-top: var(--space6);
}

.entryContent p,
.entryContent li {
  color: var(--colorInkSoft);
}

.entryContent ul li {
  position: relative;
  padding-left: 1.75rem;
}

.entryContent ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--colorBrand);
}

.entryContent img {
  border-radius: var(--radiusLg);
}

.entryContent blockquote {
  padding-left: var(--space5);
  border-left: 3px solid var(--colorBrand);
  font-size: var(--textMd);
  font-style: italic;
  color: var(--colorInk);
}

.projectFacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space6);
  margin-top: var(--space5);
}

.projectFact dt {
  font-size: var(--textXs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colorInkMuted);
  margin-bottom: 0.2rem;
}

.projectFact dd {
  font-size: var(--textSm);
  font-weight: 600;
  color: var(--colorInk);
}

.paginationNav {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.paginationNav .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.paginationNav .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--colorLine);
  border-radius: var(--radiusMd);
  color: var(--colorInkSoft);
  font-size: var(--textSm);
  font-weight: 600;
  text-decoration: none;
}

.paginationNav .page-numbers:hover {
  border-color: var(--colorBrand);
  color: var(--colorBrand);
}

.paginationNav .page-numbers.current {
  background: var(--colorBrand);
  border-color: var(--colorBrand);
  color: #fff;
}

.projectGallery {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  margin-top: var(--space6);
}

.errorPage {
  display: grid;
  place-items: center;
  min-height: 60vh;
  text-align: center;
}

.errorCode {
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--colorBrandTint);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   19. Motion
   -------------------------------------------------------------------------- */

/* Elements Motion will reveal start hidden, but only when JS is available —
   the .hasJs class is set by the module before first paint. */
.hasJs [data-motion="reveal"],
.hasJs [data-motion="stagger"] > * {
  opacity: 0;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hasJs [data-motion="reveal"],
  .hasJs [data-motion="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */

@media print {
  .siteHeader,
  .siteFooter,
  .ctaSection,
  .navToggle,
  .heroActions {
    display: none !important;
  }

  body {
    color: #000;
    font-size: 11pt;
  }

  .mediaFrame {
    break-inside: avoid;
  }
}