.expertise-grid {
  padding-block: var(--sp-5xl);
  position: relative;
  overflow: hidden;
  z-index: 2;
  background-color: var(--color-alabaster);
}

.expertise-grid--home .expertise-grid__layout {
  row-gap: var(--grid-gap);
}

.expertise-grid--home .expertise-grid__head::before {
  display: none;
}
/* Motif is full-bleed-absolute; align its right edge to the .container content
   edge (where the cards end), not the viewport edge, so it tracks --container. */
.expertise-grid__motif {
  position: absolute;
  top: var(--sp-2xs);
  right: max(var(--gutter), calc((100vw - var(--container-max)) / 2));
  color: var(--color-white);
}
.expertise-grid__motif .dot-motif {
  --motif-size: clamp(3.5rem, 6.5vw, 5.75rem);
}
/* Motif position (ACF "Motif position") — default top; opt into bottom-right. */
.expertise-grid--motif-bottom .expertise-grid__motif {
  top: auto;
  bottom: var(--sp-sm);
}
/* Top divider — when the section's "Top divider line" toggle is on, its wrapper
   (.has-section-divider) is the direct parent of <section.expertise-grid>. Pin the
   hairline flush to the section's top edge (it otherwise sits at --section-y). */
.has-section-divider:has(> .expertise-grid) .section-divider {
  top: 0;
  z-index: 3; /* above .expertise-grid (z-index 2), whose alabaster bg would else cover it */
}
/* Heading + cards share ONE 12-col grid. The head spans two card-widths (cols 1–6) on row 1;
   the cards (span 3 → 4-up) auto-flow into cols 7–12 beside it, then fill full rows below. */
.expertise-grid__layout {
  row-gap: var(--grid-gap);
  align-items: start;
}
.expertise-grid__head {
  grid-column: 1 / span 6;
  align-self: start;
  position: relative; /* anchor the top-rule divider */
  padding-top: var(--sp-lg);
  margin-bottom: 3rem;
}
/* Top hairline divider above the header (matches the theme's .life-at-ttw__divider tone). */
.expertise-grid__head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #1e17111a;
}
.expertise-grid__head .section-header__eyebrow {
  margin: 0 0 1rem;
}
.expertise-grid__head .section-header__heading {
  margin: 0;
}
/* Header-row variant (ACF Layout = "Header row") — eyebrow + heading span the full
   width on their own row with the optional link pushed right; the cards then drop to a
   3-up grid on the rows below (vs. the default 4-up cards flowing beside the heading). */
.expertise-grid--header-row .expertise-grid__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.expertise-grid__head-link {
  flex: none;
}
@media (min-width: 1025px) {
  .expertise-grid--header-row .card-expertise {
    grid-column: span 4;
  }
}
/* ── Statement variant (ACF Layout = "Statement + supporting copy") ────────────
   Per the Figma "Our Expertise": big lead statement (cols 1–7) + supporting copy
   (cols 9–12) on row 1, discipline cards 4-up below. Pairs with a chosen background
   colour; on dark tokens (--on-dark) the copy flips light and highlighted words
   (marked <strong> in the editor) glow in Skyline. Faint 12-col guide lines echo
   the design's column rhythm. */
.expertise-grid--statement {
  padding-block: var(--section-y);
  --exp-line: rgba(20, 30, 40, 0.06);
}
.expertise-grid--statement .expertise-grid__layout {
  row-gap: var(--sp-2xl);
}
.expertise-grid--statement .expertise-grid__statement-col {
  grid-column: 1 / 8;
}
.expertise-grid--statement .expertise-grid__body {
  grid-column: 10 / -1;
  align-self: end;
  font-size: var(--text-body-main);
  line-height: var(--lh-body);
}
/* Cards block — its own 12-col grid so the discipline cards read 3-up on the first
   row then 4-up below (per the Figma), independent of the statement/copy header. The
   cards keep the base .card-expertise span (3 → 4-up; 2-up ≤1024; 1-up ≤560). */
.expertise-grid--statement .expertise-grid__cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}
/* 4-up: cards flow normally, four per row (base .card-expertise span 3 on 12 cols). */
.expertise-grid--statement .expertise-grid__cards::before {
  display: none;
}
.expertise-grid--statement .section-header__eyebrow {
  margin: 0 0 var(--sp-lg);
}
.expertise-grid__statement {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: 300;
  line-height: var(--lh-snug);
}
.expertise-grid__statement p {
  margin: 0;
}
.expertise-grid__statement p + p {
  margin-top: 0.5em;
}
.expertise-grid__body p {
  margin: 0 0 1em;
}
.expertise-grid__body p:last-child {
  margin-bottom: 0;
}
/* Emphasised words — underlined in the editor (Ctrl+U → <u> or a text-decoration span)
   or legacy bold. Rendered in the chosen emphasis colour (--exp-emphasis, ACF "Emphasis
   colour"); the underline itself is stripped so it reads as a colour accent, not a rule. */
.expertise-grid__statement :is(u, strong, [style*="underline"]) {
  color: var(--exp-emphasis, var(--color-skyline));
  font-weight: inherit;
  text-decoration: none !important;
}
/* The statement design carries its rhythm via column guides, not the dot-motif. */
.expertise-grid--statement .expertise-grid__motif {
  display: none;
}

/* Dark background → light copy + Skyline highlights (matches the Figma navy). */
.expertise-grid--on-dark {
  color: var(--color-white);
}
.expertise-grid--on-dark .section-header__eyebrow {
  color: var(--color-white);
}
.expertise-grid--on-dark .expertise-grid__statement {
  color: var(--color-white);
}
.expertise-grid--on-dark .expertise-grid__body {
  color: rgba(255, 255, 255, 0.72);
  padding-top: var(--sp-4xl);
}
.expertise-grid--on-dark.expertise-grid--statement {
  --exp-line: rgba(255, 255, 255, 0.07);
}
/* Cards — image + title at rest; on hover/focus the overlay swaps to the card's brand
   colour (per-card via data-hover, default Water) @95% and a short description +
   "Learn more" link reveal as the title rises. Mirrors DS "Capabilities cards". */
.card-expertise {
  grid-column: span 3;
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  overflow: clip;
  text-decoration: none;
  color: var(--color-white);
}
.card-expertise__media,
.card-expertise__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.card-expertise__img {
  object-fit: cover;
  transition: transform 0.6s ease;
}
.card-expertise:hover .card-expertise__img,
.card-expertise:focus-visible .card-expertise__img {
  transform: scale(1.04);
}
/* Overlay: dark gradient at rest → the card's brand colour on hover/focus */
.card-expertise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: transparent;
  transition: background 0.45s ease;
}

.card-expertise::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 41%,
    rgba(0, 0, 0, 0.6) 82%
  );
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-expertise:hover::after,
.card-expertise:focus-visible::after {
  background: color-mix(
    in srgb,
    var(--card-hover, var(--color-water)) 95%,
    transparent
  );
}
/* Per-card hover colour — set from data-hover (ACF "Hover background"), defaults to Water */
.card-expertise[data-hover="water"] {
  --card-hover: var(--color-water);
}
.card-expertise[data-hover="clay"] {
  --card-hover: var(--color-clay);
}
.card-expertise[data-hover="land"] {
  --card-hover: var(--color-land);
}
.card-expertise[data-hover="steel"] {
  --card-hover: var(--color-steel);
}
.card-expertise[data-hover="skyline"] {
  --card-hover: var(--color-skyline-2);
}
/* Content stack (bottom-left) */
.card-expertise__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--sp-md);
}
/* Reveal wrapper: collapses to 0 height at rest (title sits at the bottom),
   expands on hover via grid-template-rows 0fr→1fr so the title rises smoothly. */
.card-expertise__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}
.card-expertise__reveal-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  /* No top gap while collapsed (height 0); it grows in with the reveal on hover. */
  padding-top: 0;
  transition: padding-top 0.45s ease;
}
.card-expertise:hover .card-expertise__reveal,
.card-expertise:focus-visible .card-expertise__reveal {
  grid-template-rows: 1fr;
}
.card-expertise:hover .card-expertise__reveal-inner,
.card-expertise:focus-visible .card-expertise__reveal-inner {
  padding-top: var(--sp-20);
}
.card-expertise__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-h6);
  font-weight: 400;
  line-height: 1.2;
  /* Trim the below-baseline leading so the title's optical distance from the
     card's bottom edge matches the body's left/right inset (bottom == left). */
  text-box-trim: trim-end;
  text-box-edge: cap alphabetic;
}
/* Description + link — hidden at rest, revealed on hover/focus */
.card-expertise__desc,
.card-expertise__more {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.card-expertise__desc {
  margin: 0;
  max-width: 18rem;
  color: var(--color-alabaster);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body-sm, 16px);
  line-height: 1.3;
}
.card-expertise__more {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body-sm, 16px);
  line-height: 1.1;
}
.card-expertise__more .ph {
  font-size: 1em;
  transition: transform 0.3s ease;
}
/* Link-arrow hover effect (see _links.css): underline wipes in from the left,
   arrow nudges right — on pointer over the link, or keyboard focus of the card. */
.card-expertise__more-label {
  position: relative;
}
.card-expertise__more-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.22em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.card-expertise__more:hover .card-expertise__more-label::after,
.card-expertise:focus-visible .card-expertise__more-label::after {
  transform: scaleX(1);
}
.card-expertise__more:hover .ph,
.card-expertise:focus-visible .card-expertise__more .ph {
  transform: translateX(2px);
}
.card-expertise:hover .card-expertise__desc,
.card-expertise:hover .card-expertise__more,
.card-expertise:focus-visible .card-expertise__desc,
.card-expertise:focus-visible .card-expertise__more {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .card-expertise__img,
  .card-expertise::after,
  .card-expertise__reveal,
  .card-expertise__desc,
  .card-expertise__more,
  .card-expertise__more-label::after,
  .card-expertise__more .ph {
    transition: none;
  }
  .card-expertise:hover .card-expertise__img,
  .card-expertise:focus-visible .card-expertise__img {
    transform: none;
  }
  .card-expertise__more:hover .ph,
  .card-expertise:focus-visible .card-expertise__more .ph {
    transform: none;
  }
}
@media (max-width: 1024px) {
  .expertise-grid__head,
  .expertise-grid--statement .expertise-grid__statement-col,
  .expertise-grid--statement .expertise-grid__body {
    grid-column: 1 / -1;
  }
  .card-expertise {
    grid-column: span 6;
  }
  /* 2-up: drop the reserved top-right cell so cards flow normally. */
  .expertise-grid--statement .expertise-grid__cards::before {
    display: none;
  }
}
@media (max-width: 560px) {
  .card-expertise {
    grid-column: span 12;
  }
}