/* Construction — the Execution Programme (the hero and the closing are the
   shared .svc-hero and .svc-closing in services.shared.css) */
.service-page--construction {
  --construction-paper: #fbf7ef;
  --construction-cream: #f4eee3;
  --construction-sand: #e8dccb;
  --construction-walnut: #35231f;
  --construction-dark: #2f1f1c;
  --construction-copper: #93502d;
  --construction-terracotta: #c27650;
  --construction-highlight: #dea07d;
  --construction-line: rgba(79, 49, 38, .22);
  --construction-line-dark: rgba(251, 247, 239, .24);
}
.execution-programme {
  --svc-copper: var(--construction-copper);
  --svc-line: var(--construction-line);
  --svc-walnut: var(--construction-walnut);
  scroll-margin-top: calc(var(--hdr-safe) + 1.25rem);
  padding: clamp(4.5rem, 7vw, 6.5rem) 0;
  border-top: 1px solid var(--svc-line);
  background: var(--construction-cream);
}
.execution-programme-heading {
  display: grid;
  gap: .8rem;
  max-width: 62rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}
.execution-programme-heading h2 {
  font-size: calc(clamp(3rem, 5.4vw, 5.4rem) * var(--k-display));
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.025em;
}
.programme-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--svc-line);
  border-left: 1px solid var(--svc-line);
}
.programme-control {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  min-height: 3.65rem;
  padding: .8rem;
  overflow: hidden;
  border-right: 1px solid var(--svc-line);
  border-bottom: 1px solid var(--svc-line);
  color: color-mix(in srgb, var(--construction-walnut) 72%, transparent);
  text-align: left;
  transition: color 260ms ease, background-color 260ms ease;
}
.programme-control::after {
  content: "";
  position: absolute;
  right: .8rem;
  bottom: -1px;
  left: .8rem;
  height: 2px;
  background: var(--svc-copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms ease;
}
.programme-control span {
  color: var(--svc-copper);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.05rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.programme-control b {
  min-width: 0;
  font-size: clamp(.8rem, .9vw, .9rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}
.programme-control:hover { color: var(--svc-walnut); background: color-mix(in srgb, var(--construction-copper) 4%, transparent); }
.programme-control[aria-selected="true"] {
  color: var(--svc-walnut);
  background: color-mix(in srgb, var(--construction-copper) 8%, transparent);
}
.programme-control[aria-selected="true"]::after { transform: scaleX(1); }
.programme-control:focus-visible { outline: 2px solid var(--construction-copper); outline-offset: -5px; }
.programme-board {
  display: grid;
  min-width: 0;
  border-right: 1px solid var(--svc-line);
  border-bottom: 1px solid var(--svc-line);
  border-left: 1px solid var(--svc-line);
}
.programme-media {
  position: relative;
  min-width: 0;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  background: var(--svc-walnut);
}
.programme-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  transform: scale(1.012);
  transition: opacity 420ms ease, transform 700ms ease;
}
.programme-media > img.is-active { opacity: 1; transform: scale(1); }
.programme-media figcaption {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .58rem .7rem;
  color: var(--svc-paper);
  background: rgba(47, 31, 28, .9);
  font-size: 0.76rem;
  letter-spacing: 0;
}
.programme-media figcaption span { color: var(--construction-highlight); }
.programme-media figcaption b { font-weight: 500; }
.programme-detail {
  min-width: 0;
  display: grid;
  align-content: center;
  padding: clamp(1.6rem, 2.8vw, 3rem);
  background: var(--svc-paper);
}
/* The stage readout ("01 / Pre-construction") opens the detail panel on its
   own, at the left edge directly above the stage title (client feedback
   2026-10-01: the "Selected stage" label it used to sit opposite is gone). */
.programme-readout {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--svc-line);
  color: color-mix(in srgb, var(--construction-walnut) 68%, transparent);
  font-size: 0.76rem;
  letter-spacing: 0;
}
.programme-readout b { color: var(--svc-copper); font-weight: 600; text-align: left; }
.programme-detail h3 {
  margin: clamp(1.25rem, 2vw, 1.8rem) 0 .8rem;
  font-size: calc(clamp(2.4rem, 3.5vw, 3.8rem) * var(--k-display));
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.programme-description {
  color: color-mix(in srgb, var(--construction-walnut) 88%, transparent);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.7;
}
.programme-control-note {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  padding-top: .85rem;
  border-top: 1px solid var(--svc-line);
}
.programme-control-note span {
  color: var(--svc-copper);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
}
.programme-control-note p {
  color: color-mix(in srgb, var(--construction-walnut) 76%, transparent);
  font-size: .83rem;
  line-height: 1.65;
}
.programme-risk-note {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: .9rem;
  padding-top: .85rem;
  border-top: 1px solid var(--svc-line);
}
.programme-risk-note span {
  color: var(--svc-copper);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
}
.programme-risk-note p {
  color: color-mix(in srgb, var(--construction-walnut) 78%, transparent);
  font-size: .83rem;
  line-height: 1.55;
}
.programme-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .75rem;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  color: color-mix(in srgb, var(--construction-walnut) 64%, transparent);
  font-size: .78rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.programme-progress::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 1px;
  background: var(--svc-line);
}
.programme-progress i {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 1px;
  background: var(--svc-copper);
  transform: scaleX(var(--programme-progress, .125));
  transform-origin: left;
  transition: transform 420ms ease;
}
.programme-progress span { color: var(--svc-copper); }
.programme-detail > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 360ms ease, transform 360ms ease;
}
.programme-detail.is-refreshing > * {
  opacity: 0;
  transform: translate3d(0, .45rem, 0);
  transition: none;
}
@media (min-width: 768px) {
  .programme-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .programme-control { min-height: 3.8rem; padding-inline: 1rem; }
}
@media (min-width: 900px) {
  .execution-programme { padding-block: clamp(3.25rem, 4vw, 4rem); }
  .execution-programme-heading { margin-bottom: 1.25rem; }
  .programme-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.35rem; }
  .programme-readout,
  .programme-detail h3,
  .programme-description,
  .programme-progress { grid-column: 1 / -1; }
  .programme-control-note,
  .programme-risk-note { grid-template-columns: 1fr; align-self: stretch; gap: .45rem; margin-top: 1.1rem; }
  .programme-board { grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .72fr); }
  .programme-media { aspect-ratio: auto; min-height: clamp(26rem, 31vw, 29rem); }
  .programme-detail { border-left: 1px solid var(--svc-line); }
}

@media (max-width: 560px) {
  .programme-control { grid-template-columns: 1.6rem minmax(0, 1fr); gap: .4rem; }
  .programme-detail { padding: 2rem 1.25rem; }
  .programme-control-note { grid-template-columns: 1fr; gap: .65rem; }
  .programme-risk-note { grid-template-columns: 1fr; gap: .65rem; }
}

/* Viewport-first control system: the programme progress rail. */
.programme-controls {
  position: relative;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 6.5rem;
  margin-bottom: .75rem;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--construction-line) transparent;
}
.programme-controls::before,
.programme-controls::after {
  content: "";
  position: absolute;
  top: .82rem;
  right: .85rem;
  left: .85rem;
  height: 1px;
  pointer-events: none;
}
.programme-controls::before { background: var(--svc-line); }
.programme-controls::after {
  background: var(--svc-copper);
  transform: scaleX(var(--programme-index-progress, 0));
  transform-origin: left;
  transition: transform 380ms ease;
}
.programme-control {
  min-height: 3.5rem;
  grid-template-columns: 1fr;
  align-content: start;
  justify-items: center;
  gap: .25rem;
  padding: 0 .3rem .35rem;
  overflow: visible;
  border: 0;
  background: transparent;
  text-align: center;
}
.programme-control::before {
  content: "";
  position: relative;
  z-index: 2;
  width: .48rem;
  height: .48rem;
  margin-top: .58rem;
  border: 1px solid var(--svc-copper);
  border-radius: 50%;
  background: var(--construction-cream);
  transform: scale(.72);
  transition: transform 340ms ease, background-color 340ms ease;
}
.programme-control::after {
  right: 24%;
  bottom: 0;
  left: 24%;
  height: 1px;
}
.programme-control span {
  position: absolute;
  top: 1.2rem;
  font-size: 1rem;
}
.programme-control b {
  margin-top: 1.75rem;
  opacity: .48;
  font-size: .76rem;
  letter-spacing: 0;
  transition: opacity 300ms ease, transform 300ms ease;
}
.programme-control:hover,
.programme-control[aria-selected="true"] { background: transparent; }
/* Tablets: all eight stages fit across the frame (labels may take two
   lines) instead of a sideways strip that cut the last stages off. */
@media (min-width: 640px) and (max-width: 1099px) {
  .programme-controls { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
  .programme-control { padding-inline: .1rem; }
  .programme-control b { font-size: clamp(.64rem, 1.3vw, .76rem); letter-spacing: 0; line-height: 1.3; overflow-wrap: anywhere; }
}
/* Phones keep the strip, with a fade at the right edge as the cue to scroll. */
@media (max-width: 639px) {
  /* Mobile pass 2026-10-01: the fade sits on whichever edge has more
     stages beyond it (construction-execution.js keeps the selected stage
     scrolled into the rail), the rail line runs the whole strip from the
     first dot to the last, so the copper progress meets the selected dot,
     and the labels are legible (11px, not 9px). */
  .programme-controls {
    --fade-l: 0px;
    --fade-r: 3rem;
    grid-auto-columns: 7rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .programme-controls::-webkit-scrollbar { display: none; }
  .programme-controls.is-scrolled { --fade-l: 3rem; }
  .programme-controls.is-end { --fade-r: 0px; }
  .programme-controls::before,
  .programme-controls::after {
    left: calc(var(--rail-pad, 0px) + 3.5rem);
    right: auto;
    width: calc((var(--programme-count, 8) - 1) * 7rem);
  }
  .programme-control span { font-size: 1rem; }
  .programme-control b { font-size: .78rem; letter-spacing: 0; }
  .programme-readout,
  .programme-control-note span,
  .programme-risk-note span { font-size: .78rem; }
  .programme-control-note p,
  .programme-risk-note p { font-size: .88rem; }
  .programme-media figcaption { font-size: .78rem; }
  .programme-progress { font-size: .78rem; }
}
.programme-control:hover b,
.programme-control[aria-selected="true"] b { opacity: 1; transform: translate3d(0, -.08rem, 0); }
.programme-control[aria-selected="true"]::before { background: var(--svc-copper); transform: scale(1); }
.programme-control:focus-visible { outline-offset: -2px; }

@media (min-width: 900px) {
  .execution-programme { padding-block: 2rem; }
  .execution-programme-heading {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, .7fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: .25rem;
    align-items: end;
    margin-bottom: .85rem;
  }
  .execution-programme-heading h2 {
    grid-column: 1;
    max-width: none;
    font-size: calc(clamp(2.9rem, 4vw, 3.6rem) * var(--k-display));
    line-height: 1.04;
  }
  .programme-controls {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
  }
  .programme-board { height: clamp(21.5rem, 27vw, 24rem); }
  .programme-media { min-height: 0; }
  .programme-detail {
    height: 100%;
    padding: 1.25rem 1.5rem;
    overflow: hidden;
  }
  .programme-detail h3 { margin: .8rem 0 .55rem; font-size: calc(clamp(2.15rem, 2.7vw, 3rem) * var(--k-display)); }
  .programme-description { font-size: .91rem; line-height: 1.55; }
  .programme-control-note,
  .programme-risk-note { margin-top: .75rem; padding-top: .65rem; }
  .programme-control-note p,
  .programme-risk-note p { font-size: .73rem; line-height: 1.45; }
  .programme-progress { margin-top: .75rem; }
}

@media (max-width: 899px) {
  .programme-board { border-top: 1px solid var(--svc-line); }
}

@media (max-width: 560px) {
  .programme-controls { margin-inline: calc((100vw - var(--svc-frame)) / -2); padding-inline: calc((100vw - var(--svc-frame)) / 2); }
  /* The bleed above is 100vw wide, which includes a classic scrollbar's
     width, so the rail overran the document by that much (8px at 390).
     The section spans the full client width, so clipping at its edge only
     trims that scrollbar sliver and keeps the edge-to-edge rail. */
  .execution-programme { overflow-x: clip; }
  .programme-controls { --rail-pad: calc((100vw - var(--svc-frame)) / 2); }
  .programme-control { min-height: 3.65rem; }
  .programme-detail { padding: 1.4rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .programme-control,
  .programme-control::after,
  .programme-media > img,
  .programme-progress i { transition: none; }
  .programme-detail > * { transition: none; }
  .programme-controls::after,
  .programme-control::before,
  .programme-control b { transition: none; }
}