/* ---------- Shared ---------- */
.eyebrow {
  margin-bottom: 1.25rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--colour-ink-soft);
}

.idea h2,
.build h2 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 6.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.idea h2 span,
.build h2 span {
  display: block;
}

.idea h2 span + span,
.build h2 span + span {
  color: var(--colour-ink-soft);
}

/* Scroll reveal: only applied when main.js enables it (never under reduced motion). */
.rv-on .rv {
  opacity: 0;
  transform: translateY(12px);
}

.rv-on .rv.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ---------- 03 Bigeen's Idea ---------- */
.idea {
  padding-block: var(--space-section);
}

.idea__inner {
  position: relative;
}

.idea__grid {
  position: relative;
  row-gap: var(--space-content);
}

.idea__lead,
.idea__map,
.idea__principles {
  grid-column: 1 / -1;
}

.idea__intro {
  margin-top: var(--space-content);
  max-width: 34rem;
}

.idea__intro p {
  font-size: 1.25rem;
  line-height: 1.5;
}

/* Principles: a vertical sequence, not cards */
.principles {
  list-style: none;
  counter-reset: principle;
  border-bottom: 1px solid var(--colour-line);
  max-width: 38rem;
}

.principle {
  counter-increment: principle;
  display: grid;
  grid-template-columns: 3rem 1fr;
  padding-block: 1.75rem;
  border-top: 1px solid var(--colour-line);
}

.principle:first-child {
  border-top-color: var(--colour-ink);
}

.principle::before {
  content: counter(principle, decimal-leading-zero);
  padding-top: 0.35rem;
  font-family: var(--font-data);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--colour-brand);
  font-variant-numeric: tabular-nums;
}

.principle h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  transition: color 0.25s var(--ease);
}

.principle p {
  margin-top: 0.5rem;
  color: var(--colour-ink-soft);
}

/* Hand-off line into "What We Build": same motif as hero to Problems. It hangs
   off the content-width grid so its x matches the Build guide. */
.idea__grid::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  height: var(--space-section);
  width: 1.5px;
  background: var(--colour-brand);
}

/* ---------- Systems map ---------- */
.map {
  margin: 0;
}

.map__caption {
  margin-bottom: 1.25rem;
}

.map__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 0.5rem;
}

.node {
  text-align: center;
  padding-inline: 0.5rem;
  transition: opacity 0.25s var(--ease);
}

.node--strategy,
.node--tech,
.node--data {
  align-self: center;
  max-width: 100%;
}

.node__marker {
  position: relative;
  z-index: 1;
  display: block;
  width: 0.5625rem;
  height: 0.5625rem;
  margin: 0 auto 0.9rem;
  border: 1px solid var(--colour-ink);
  background: var(--colour-canvas);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.node--ops .node__marker {
  background: var(--colour-brand);
  border-color: var(--colour-brand);
}

.node__label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.25s var(--ease);
}

.node__desc {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--colour-ink-soft);
}

.map__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
}

.node--ops {
  display: flex;
  flex-direction: column;
}

/* Connectors */
.conn {
  display: block;
  overflow: visible;
  transition: opacity 0.25s var(--ease);
}

.conn line {
  stroke: var(--colour-ink-soft);
  stroke-width: 1;
  shape-rendering: crispEdges;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.25s var(--ease);
}

.conn--v {
  width: 1px;
  margin-inline: auto;
}

.conn--fixed {
  height: 3rem;
}

.conn--fill {
  flex: 1 1 3rem;
  min-height: 3rem;
  height: auto;
}

/* Horizontal bar through the People / Operations / Quality anchors */
.conn--h {
  position: absolute;
  top: 4px;
  height: 1px;
}

/* Explicit widths: an SVG (replaced element) would otherwise use its intrinsic
   width instead of stretching between left and right. Anchors sit at the
   centre of each 1 : 1.25 : 1 column (15.385% / 50% / 84.615%). */
.conn--left {
  left: 15.385%;
  width: 34.615%;
}

.conn--right {
  left: 50%;
  width: 34.615%;
}

/* Highlight states (set by main.js from the principles) */
.is-dim {
  opacity: 0.35;
}

.conn.is-lit line {
  stroke: var(--colour-brand);
}

.node.is-lit .node__label {
  color: var(--colour-brand);
}

.node.is-lit .node__marker {
  background: var(--colour-brand);
  border-color: var(--colour-brand);
}

/* Map entrance: lines draw, then labels appear (~650ms total) */
@keyframes draw-down {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0); }
}

@keyframes draw-right {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0); }
}

@keyframes draw-left {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0); }
}

@keyframes node-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rv-on .map:not(.is-in) .conn {
  clip-path: inset(100%);
}

.rv-on .map:not(.is-in) .node {
  opacity: 0;
}

.rv-on .map.is-in .conn--v {
  animation: draw-down 0.32s var(--ease) backwards;
  animation-delay: calc(var(--k, 0) * 70ms);
}

.rv-on .map.is-in .conn--left {
  animation: draw-left 0.32s var(--ease) backwards;
  animation-delay: calc(var(--k, 0) * 70ms);
}

.rv-on .map.is-in .conn--right {
  animation: draw-right 0.32s var(--ease) backwards;
  animation-delay: calc(var(--k, 0) * 70ms);
}

.rv-on .map.is-in .node {
  animation: node-in 0.18s ease backwards;
  animation-delay: calc(300ms + var(--n, 0) * 30ms);
}

/* Simplified labels where the map is narrow (phones, and 2-column tablets) */
@media (max-width: 599px), (min-width: 900px) and (max-width: 1099px) {
  .node__desc {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .node__label {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 599px) {
  .node {
    padding-inline: 0.25rem;
  }

  .conn--fixed {
    height: 1.75rem;
  }

  .conn--fill {
    flex-basis: 1.75rem;
    min-height: 1.75rem;
  }
}

@media (min-width: 900px) {
  .idea__lead {
    grid-column: 1 / span 6;
    grid-row: 1;
  }

  .idea__principles {
    grid-column: 1 / span 6;
    grid-row: 2;
  }

  .idea__map {
    grid-column: 8 / -1;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: var(--space-content);
  }

  /* Scroll steps (main.js adds .map-steps): the map is pinned mid-screen while
     each principle takes a step's worth of scroll. The big map now does the
     mini-maps' job, so they step aside. */
  .map-steps .idea__map {
    top: max(var(--space-content), calc(50svh - var(--map-h, 0px) / 2));
  }

  .map-steps .principle {
    min-height: 55svh;
    align-content: center;
    transition: opacity 0.35s var(--ease);
  }

  .map-steps .principles:has(.is-active) .principle:not(.is-active) {
    opacity: 0.4;
  }

  .map-steps .principle.is-active h3 {
    color: var(--colour-brand);
  }

  /* After the entrance animation, lines draw in again as each step lights them. */
  .rv-on .map.is-in.is-settled .conn,
  .rv-on .map.is-in.is-settled .node {
    animation: none;
  }

  .rv-on .map.is-in.is-settled.is-stepping .conn--v.is-lit {
    animation: draw-down 0.4s var(--ease);
  }

  .rv-on .map.is-in.is-settled.is-stepping .conn--left.is-lit {
    animation: draw-left 0.4s var(--ease);
  }

  .rv-on .map.is-in.is-settled.is-stepping .conn--right.is-lit {
    animation: draw-right 0.4s var(--ease);
  }
}

@media (min-width: 768px) {
  .idea__grid::after {
    left: calc((100% + var(--grid-gap)) * 7 / 12);
  }
}

/* ---------- 04 What We Build ---------- */
.build {
  background: var(--colour-stone);
  padding-block: var(--space-section);
}

.build__inner {
  position: relative;
}

.build__head {
  position: relative;
  row-gap: var(--space-content);
}

/* Line arrives from the section above and ends in a square anchor. */
.build__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--space-section));
  bottom: 0;
  width: 1.5px;
  background: var(--colour-brand);
}

.build__head::after {
  content: "";
  position: absolute;
  left: -3.75px;
  bottom: -0.5625rem;
  width: 0.5625rem;
  height: 0.5625rem;
  background: var(--colour-brand);
}

.build__title-block,
.build__aside {
  grid-column: 1 / -1;
  padding-left: 1.25rem;
}

.build__aside p {
  max-width: 34rem;
  color: var(--colour-ink-soft);
}

.build__aside p + p {
  margin-top: 1rem;
}

/* ---------- Pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: calc(var(--space-section) * 0.6);
}

.pillar {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--colour-canvas);
  border: 1px solid var(--colour-line);
  border-top: 2px solid var(--colour-ink);
}

.pillar__eyebrow {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--colour-ink-soft);
}

.pillar h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.3vw, 1.875rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.pillar__desc {
  margin-top: 1rem;
  color: var(--colour-ink-soft);
}

/* Business Systems and Digital Systems share a wall: one connected structure. */
.pillar--digital {
  position: relative;
  border-top-color: var(--colour-ink);
}

.pillar--digital::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 0.5625rem;
  height: 0.5625rem;
  background: var(--colour-brand);
}

/* Capability groups */
.cap {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--colour-line);
}

.cap:first-of-type {
  margin-top: 1.75rem;
}

.cap h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-ink);
}

.cap__list {
  list-style: none;
  margin-top: 0.75rem;
}

.cap__list li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--colour-ink-soft);
}

.cap__list li + li {
  margin-top: 0.3rem;
}

.cap__list li::first-letter {
  text-transform: uppercase;
}

.cap__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.3125rem;
  height: 0.3125rem;
  background: var(--colour-brand);
}

/* Links */
.pillar__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.6rem;
  min-height: 2.75rem;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-brand);
  text-decoration: none;
}

/* Underline the label only, so the arrow is not underlined separately. */
.pillar__link-text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}

.pillar__link:hover .pillar__link-text {
  text-decoration-thickness: 2px;
}

.pillar__link .btn__arrow {
  transition: transform 0.2s var(--ease);
}

.pillar__link:hover .btn__arrow {
  transform: translateX(4px);
}

/* Bigeen Products: deep ink, clearly a different kind of offering */
.pillar--products {
  margin-top: var(--space-content);
  background: var(--colour-ink);
  border-color: var(--colour-ink);
  border-top-color: var(--colour-brass);
  color: var(--colour-on-ink);
}

.pillar--products .pillar__eyebrow,
.pillar--products .pillar__desc {
  color: var(--colour-on-ink-soft);
}


/* Status: always text, with a shape marker so colour is never the only cue */

.status__mark {
  flex: none;
  width: 0.5625rem;
  height: 0.5625rem;
  background: var(--colour-brass);
}

.status__mark--future {
  background: transparent;
  border: 1px dashed var(--colour-brass);
}

.pillar--products .pillar__link {
  color: var(--colour-on-ink);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

.pillar--products :focus-visible,
.pillar--products .pillar__link:focus-visible {
  outline-color: var(--colour-on-ink);
}

.pillar__link:focus-visible {
  outline: 2px solid var(--colour-brand);
  outline-offset: 4px;
}

/* ---------- Bridge into the Bigeen Approach ---------- */
.build__bridge {
  position: relative;
  margin-top: calc(var(--space-section) * 0.7);
  padding-top: var(--space-content);
  border-top: 1px solid var(--colour-ink);
  row-gap: var(--space-content);
}

.build__bridge-lead,
.build__bridge-next {
  grid-column: 1 / -1;
}

.build__bridge-lead p {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--colour-ink-soft);
  font-size: 1.125rem;
}

/* Hand-off line into the next section, at the same x as the guide above. */
.build__bridge::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  height: var(--space-section);
  width: 1.5px;
  background: var(--colour-brand);
}

@media (min-width: 768px) {
  .build__title-block {
    grid-column: 1 / span 7;
    padding-left: 0;
  }

  .build__aside {
    grid-column: 8 / -1;
    align-self: end;
    padding-left: var(--space-content);
  }

  .build__head::before {
    left: calc((100% + var(--grid-gap)) * 7 / 12);
  }

  .build__head::after {
    left: calc((100% + var(--grid-gap)) * 7 / 12 - 3.75px);
  }

  .build__bridge-lead {
    grid-column: 1 / span 7;
  }

  .build__bridge-next {
    grid-column: 8 / -1;
    align-self: end;
    padding-left: var(--space-content);
  }

  .build__bridge::after {
    left: calc((100% + var(--grid-gap)) * 7 / 12);
  }
}

/* Two columns: Business + Digital share a wall; Products takes the full row. */
@media (min-width: 700px) {
  .pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pillar--digital {
    border-left: 0;
  }

  .pillar--digital::before {
    left: -5px;
  }

  .pillar--products {
    grid-column: 1 / -1;
  }


}


/* Three columns: the two connected pillars, then Products set apart. */
@media (min-width: 1100px) {
  .pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pillar--products {
    grid-column: auto;
    margin-top: 0;
    margin-left: var(--space-content);
  }

}

@media (max-width: 699px) {
  /* Stacked: Digital sits on Business Systems' bottom border (shared wall). */
  .pillar--digital {
    border-top: 0;
  }

  .pillar--digital::before {
    top: -5px;
    left: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map .conn,
  .map .node {
    animation: none !important;
  }
}

/* ---------- Destination pages (Business Systems, Digital Systems, StitchFYN) ---------- */
.page .eyebrow {
  margin-bottom: 1.25rem;
}

.page__caps {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-content);
  margin-top: var(--space-content);
}

.page__caps .cap,
.page__caps .cap:first-of-type {
  margin-top: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--colour-ink);
}

.page__more {
  grid-column: 1 / -1;
}

.page__status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page__status .status__mark {
  background: #8a6a2a;
}

@media (min-width: 900px) {
  .page__caps:not(.page__caps--status) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
}

/* Product names keep their own casing rather than the all-caps page title style. */
.page h1.page__title--brand {
  text-transform: none;
}

/* The wordmark is white on transparent, built for the dark product panel on
   the homepage — it disappears on this page's ivory background without one. */
.page__brand-mark {
  display: inline-block;
  padding: 1rem 1.5rem;
  background: var(--colour-ink);
}

.page__brand-logo {
  width: clamp(12rem, 30vw, 17rem);
  height: auto;
}

/* ---------- 05 The Bigeen Approach ---------- */
/* A dark band over a photo. The photo fills the first screen and fades into
   ink, so the stage list further down sits on solid colour. Inside the band the
   guide line and the progress fill switch to brass, as on the Products panel.
   Stock placeholder (Unsplash licence) until real Bigeen photography exists:
   https://unsplash.com/photos/hand-drawing-a-diagram-on-a-whiteboard-ajTN690FnUg */
.how {
  position: relative;
  isolation: isolate;
  background: var(--colour-ink);
  color: var(--colour-on-ink);
  padding-block: var(--space-section);
  /* Spine geometry shared by the stage list and the incoming guide */
  --stage-pad: 1.25rem;
  --node-y: calc(var(--stage-pad) + 0.7rem);
}

.how::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: min(100%, 110svh);
  background:
    linear-gradient(
      rgba(22, 24, 29, 0.8),
      rgba(22, 24, 29, 0.86) 55%,
      var(--colour-ink)
    ),
    image-set(
      url("../images/photos/process-diagram-640.webp") type("image/webp"),
      url("../images/photos/process-diagram-640.jpg") type("image/jpeg")
    ) center / cover no-repeat;
}

.how .eyebrow {
  color: var(--colour-brass);
}

.how__inner {
  position: relative;
}

.how__grid {
  row-gap: var(--space-content);
}

.how h2 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.how__intro {
  position: relative;
  grid-column: 1 / -1;
}

/* Mobile and tablet: the guide from "What We Build" runs down beside the intro
   and joins the first stage node. */
.how__intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--space-section));
  bottom: calc(-1 * (var(--space-content) + var(--node-y)));
  width: 1.5px;
  background: var(--colour-brass);
}

.how__title-block,
.how__copy {
  padding-left: 1.25rem;
}

.how__copy {
  margin-top: var(--space-content);
}

.how__copy p {
  max-width: 34rem;
  color: var(--colour-on-ink-soft);
}

/* ---------- The stage sequence ---------- */
/* Numbers only: the stages themselves are walked through in the diagnostic,
   not published. The list is aria-hidden; the intro copy carries the meaning. */
.flow {
  --spine-x: 0px;
  position: relative;
  grid-column: 1 / -1;
  list-style: none;
}

.stage {
  position: relative;
  padding: var(--stage-pad) 0 var(--stage-pad) 1.25rem;
}

/* Node on the spine */
.stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--spine-x) - 3.75px);
  top: var(--node-y);
  width: 0.5625rem;
  height: 0.5625rem;
  margin-top: -0.28rem;
  background: var(--colour-ink);
  border: 1px solid var(--colour-on-ink-soft);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

/* Base line to the next node: each stage informs the next */
.stage::after {
  content: "";
  position: absolute;
  left: var(--spine-x);
  top: var(--node-y);
  height: 100%;
  width: 1.5px;
  background: var(--colour-on-ink-soft);
  opacity: 0.4;
}

.stage:last-child::after {
  display: none;
}

/* Progress fill (added by JS only) */
.stage__line {
  position: absolute;
  z-index: 1;
  left: var(--spine-x);
  top: var(--node-y);
  height: 100%;
  width: 1.5px;
  background: var(--colour-brass);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease);
}

.stage:last-child .stage__line {
  display: none;
}

.stage.is-passed .stage__line {
  transform: scaleY(1);
}

.stage.is-active::before,
.stage.is-passed::before {
  background: var(--colour-brass);
  border-color: var(--colour-brass);
}

.stage__num {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-data);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--colour-on-ink-soft);
  transition: color 0.3s var(--ease);
}

.stage.is-active .stage__num,
.stage.is-passed .stage__num {
  color: var(--colour-brass);
}

.stage__loop {
  flex: none;
  fill: none;
  stroke: var(--colour-on-ink-soft);
  stroke-width: 1.5;
  stroke-linecap: square;
}

/* ---------- Closing principle ---------- */
.how__close {
  position: relative;
  margin-top: calc(var(--space-section) * 0.7);
  padding-top: var(--space-content);
  border-top: 1px solid var(--colour-on-ink-soft);
}

.how__close p {
  max-width: 48rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Hand-off line into the next section, same motif as the sections above. */
.how__close::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  height: var(--space-section);
  width: 1.5px;
  background: var(--colour-brass);
}

/* Tablet: the spine continues from the intro at the 7/12 mark */
@media (min-width: 768px) {
  .how__intro {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .how__intro::before {
    left: calc((100% + var(--grid-gap)) * 7 / 12);
  }

  .how__title-block {
    grid-column: 1 / span 7;
    padding-left: 0;
  }

  .how__copy {
    grid-column: 8 / -1;
    margin-top: 0;
    align-self: end;
    padding-left: var(--space-content);
  }

  .flow {
    --spine-x: calc((100% + var(--grid-gap)) * 7 / 12);
  }

  /* Numbers sit just right of the spine, as on desktop */
  .stage {
    padding-left: calc((100% + var(--grid-gap)) * 7 / 12 + var(--space-content));
  }

  .how__close::after {
    left: calc((100% + var(--grid-gap)) * 7 / 12);
  }
}

/* Tablet up: a larger photo for the band */
@media (min-width: 768px) {
  .how::before {
    background:
      linear-gradient(
        rgba(22, 24, 29, 0.8),
        rgba(22, 24, 29, 0.86) 55%,
        var(--colour-ink)
      ),
      image-set(
        url("../images/photos/process-diagram-1260.webp") type("image/webp"),
        url("../images/photos/process-diagram-1260.jpg") type("image/jpeg")
      ) center / cover no-repeat;
  }
}

/* Desktop: sticky intro on the left, the stage sequence on the right */
@media (min-width: 1024px) {
  .how__intro {
    display: block;
    grid-column: 1 / span 6;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: var(--space-content);
  }

  .how__intro::before {
    display: none;
  }

  .how__title-block {
    padding-left: 0;
  }

  .how__copy {
    margin-top: var(--space-content);
    padding-left: 0;
  }

  .flow {
    --spine-x: 0px;
    grid-column: 8 / -1;
    grid-row: 1;
  }

  /* Incoming guide from the section above, down to the first node */
  .flow::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(-1 * var(--space-section));
    height: calc(var(--space-section) + var(--node-y));
    width: 1.5px;
    background: var(--colour-brass);
  }

  .stage {
    display: block;
    padding-left: var(--space-content);
    border-top: 0;
  }
}

@media (max-width: 767px) {
  .how__intro::before {
    left: 0;
  }

  .how__close::after {
    left: 0;
  }

  .stage {
    padding-left: 1.25rem;
  }
}

/* ---------- 06 Selected Experience ---------- */
.exp {
  background: var(--colour-stone);
  padding-block: var(--space-section);
}

.exp__inner {
  position: relative;
}

.exp__head {
  position: relative;
  row-gap: var(--space-content);
}

.exp h2 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Line arrives from the Bigeen Approach and ends in a square anchor, as in Build. */
.exp__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--space-section));
  bottom: 0;
  width: 1.5px;
  background: var(--colour-brand);
}

.exp__head::after {
  content: "";
  position: absolute;
  left: -3.75px;
  bottom: -0.5625rem;
  width: 0.5625rem;
  height: 0.5625rem;
  background: var(--colour-brand);
}

.exp__title-block,
.exp__aside {
  grid-column: 1 / -1;
  padding-left: 1.25rem;
}

.exp__aside p {
  max-width: 34rem;
  color: var(--colour-ink-soft);
}

.exp__aside p + p {
  margin-top: 1rem;
}

.exp__note {
  max-width: 36rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--colour-ink-soft);
}

@media (min-width: 768px) {
  .exp__title-block {
    grid-column: 1 / span 7;
    padding-left: 0;
  }

  .exp__aside {
    grid-column: 8 / -1;
    align-self: end;
    padding-left: var(--space-content);
  }

  .exp__head::before {
    left: calc((100% + var(--grid-gap)) * 7 / 12);
  }

  .exp__head::after {
    left: calc((100% + var(--grid-gap)) * 7 / 12 - 3.75px);
  }
}

/* ---------- 07 Bigeen Products ---------- */
.prod {
  padding-block: var(--space-section);
}

.prod__inner {
  position: relative;
}

.prod__head {
  position: relative;
  row-gap: var(--space-content);
}

.prod h2 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Line arrives from Selected Experience and ends in a square anchor. */
.prod__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--space-section));
  bottom: 0;
  width: 1.5px;
  background: var(--colour-brand);
}

.prod__head::after {
  content: "";
  position: absolute;
  left: -3.75px;
  bottom: -0.5625rem;
  width: 0.5625rem;
  height: 0.5625rem;
  background: var(--colour-brand);
}

.prod__title-block,
.prod__aside {
  grid-column: 1 / -1;
  padding-left: 1.25rem;
}

.prod__aside p {
  max-width: 34rem;
  color: var(--colour-ink-soft);
}

.prod__aside p + p {
  margin-top: 1rem;
}

/* Status: always text, with a shape marker (solid = in development, dashed = future) */
.pstatus {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-ink);
}

.pstatus__mark {
  flex: none;
  width: 0.5625rem;
  height: 0.5625rem;
  background: #8a6a2a;
}

.pstatus__mark--future {
  background: transparent;
  border: 1px dashed #8a6a2a;
}

.pstatus--on-ink {
  color: var(--colour-on-ink);
}

.pstatus--on-ink .pstatus__mark {
  background: var(--colour-brass);
}

/* Featured product: StitchFYN */
.feature {
  display: grid;
  margin-top: calc(var(--space-section) * 0.6);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: var(--colour-ink);
  color: var(--colour-on-ink);
  border-top: 2px solid var(--colour-brass);
}

.feature__label {
  margin-bottom: 1rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--colour-brass);
}


.feature__desc {
  max-width: 34rem;
  margin-top: 1.75rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.feature__context {
  max-width: 34rem;
  margin-top: 1.75rem;
  color: var(--colour-on-ink-soft);
}

.feature__context + .feature__desc {
  margin-top: 0.75rem;
}

.feature__support {
  max-width: 34rem;
  margin-top: 1rem;
  color: var(--colour-on-ink-soft);
}

.feature__claim {
  max-width: 34rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--colour-line-on-ink);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
}

.feature .btn {
  margin-top: 2rem;
}

.btn--light {
  background: var(--colour-on-ink);
  border-color: var(--colour-on-ink);
  color: var(--colour-ink);
}

.btn--light:hover {
  background: transparent;
  color: var(--colour-on-ink);
}

.feature :focus-visible {
  outline-color: var(--colour-on-ink);
}

.feature__credit {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--colour-on-ink-soft);
}

/* Photo of the product's world. Below the copy on narrow screens, then its
   own column from 900px, running the full height of the panel. */
.feature__photo {
  margin: var(--space-content) 0 0;
}

.feature__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Secondary products: subordinate, static */
.others {
  display: grid;
  margin-top: var(--space-content);
  gap: 0 var(--grid-gap);
}


@media (min-width: 768px) {
  .prod__title-block {
    grid-column: 1 / span 7;
    padding-left: 0;
  }

  .prod__aside {
    grid-column: 8 / -1;
    align-self: end;
    padding-left: var(--space-content);
  }

  .prod__head::before {
    left: calc((100% + var(--grid-gap)) * 7 / 12);
  }

  .prod__head::after {
    left: calc((100% + var(--grid-gap)) * 7 / 12 - 3.75px);
  }

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


}

@media (min-width: 900px) {
  .feature {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-content);
  }

  .feature__photo {
    margin: 0;
    align-self: stretch;
  }

  .feature__photo picture {
    display: block;
    height: 100%;
  }

  .feature__photo img {
    height: 100%;
    min-height: 22rem;
    aspect-ratio: auto;
  }
}


/* ---------- StitchFYN countdown (inside the feature panel) ---------- */
.countdown {
  max-width: 34rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--colour-line-on-ink);
}

.countdown__date {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--colour-on-ink-soft);
}

.countdown__date time {
  color: var(--colour-on-ink);
}

/* The clock only appears once JS has computed it; the date above is the
   complete no-JS fallback. */
.countdown__clock {
  display: none;
  margin-top: 1rem;
  gap: clamp(1rem, 3vw, 1.75rem);
}

.countdown.is-on .countdown__clock {
  display: flex;
}

.cd-unit {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 3.25rem;
}

.cd-num {
  font-family: var(--font-data);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--colour-on-ink);
}

.cd-label {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-on-ink-soft);
}

/* After the launch time */
.countdown.is-live .countdown__clock {
  display: none;
}

.countdown.is-live .countdown__date {
  font-size: 0.875rem;
  color: var(--colour-on-ink);
}

.cd-unit[hidden] {
  display: none;
}

/* ---------- 08 Start a Conversation ---------- */
/* Line from Bigeen Products ends in a square anchor just above the closing band. */
.others {
  position: relative;
}

.others::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% + 1rem);
  height: calc(var(--space-section) - 1rem);
  width: 1.5px;
  background: var(--colour-brand);
}

.others::before {
  content: "";
  position: absolute;
  left: -3.75px;
  top: calc(100% + var(--space-section) - 0.5625rem);
  width: 0.5625rem;
  height: 0.5625rem;
  background: var(--colour-brand);
}

.start {
  background: var(--colour-ink);
  color: var(--colour-on-ink);
  padding-block: var(--space-section);
}

.start__grid {
  row-gap: var(--space-content);
  align-items: end;
}

.start__lead,
/* Pricing anchor: a quiet filter, not a sales block */
.start__pricing {
  max-width: 32rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--colour-line-on-ink);
  color: var(--colour-on-ink-soft);
  font-size: 0.9375rem;
}

.start__actions {
  grid-column: 1 / -1;
}

.start .eyebrow {
  color: var(--colour-brass);
}

.start h2 {
  max-width: 16em;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.2vw, 3.75rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.start__copy {
  max-width: 32rem;
  margin-top: 1.5rem;
  color: var(--colour-on-ink-soft);
  font-size: 1.125rem;
}

.start__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: var(--space-content);
  border-top: 1px solid var(--colour-line-on-ink);
}

.start__actions .btn {
  width: 100%;
}

.btn--outline-light {
  background: transparent;
  border-color: var(--colour-on-ink);
  color: var(--colour-on-ink);
}

.btn--outline-light:hover {
  background: var(--colour-on-ink);
  color: var(--colour-ink);
}

.start :focus-visible {
  outline-color: var(--colour-on-ink);
}

@media (min-width: 768px) {
  .others::after {
    left: calc((100% + var(--grid-gap)) * 7 / 12);
  }

  .others::before {
    left: calc((100% + var(--grid-gap)) * 7 / 12 - 3.75px);
  }

  .start__lead {
    grid-column: 1 / span 7;
  }

  .start__actions {
    grid-column: 8 / -1;
    padding: 0 0 0 var(--space-content);
    border-top: 0;
    border-left: 1px solid var(--colour-line-on-ink);
  }
}

/* =========================================================================
   Refinement: less density, more character
   What We Build (compact groups, distinct pillars), Selected Experience
   (case cards) and the StitchFYN logo in Bigeen Products.
   ========================================================================= */

/* ---------- What We Build: tighter opening ---------- */

/* ---------- Pillars: distinct visual languages ---------- */
.pillar {
  position: relative;
}

.pillar__art {
  display: block;
  width: 6rem;
  height: auto;
  margin-bottom: 1.25rem;
  overflow: visible;
}

.art-line {
  fill: none;
  stroke: var(--colour-ink-soft);
  stroke-width: 1;
}

.art-line--dash {
  stroke-dasharray: 3 3;
  stroke: var(--colour-brand);
}

.art-chevron {
  fill: none;
  stroke: var(--colour-brand);
  stroke-width: 1.25;
}

.art-plane {
  fill: var(--colour-surface);
  stroke: var(--colour-ink);
  stroke-width: 1;
}

.art-plane--accent {
  stroke: var(--colour-brand);
  stroke-width: 1.5;
}

.art-node {
  fill: var(--colour-brand);
}

/* Product frame on the dark panel */
.art-frame {
  fill: none;
  stroke: var(--colour-on-ink);
  stroke-width: 1;
  opacity: 0.4;
}

.art-frame--inner {
  opacity: 0.6;
}

.art-seam {
  fill: none;
  stroke: var(--colour-brass);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}

.art-brass {
  fill: var(--colour-brass);
}

/* ---------- Capability groups: compact, scannable ---------- */
.groups {
  margin-top: 1.5rem;
}

.group h4 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-ink);
}

.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-top: 0.4rem;
  list-style: none;
}

/* Each item carries its own small marker, so wrapped lines never strand a separator. */
.inline li {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--colour-ink-soft);
}

.inline li::before {
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  margin-right: 0.45rem;
  vertical-align: middle;
  background: var(--colour-brand);
}

/* Business Systems: structural, ruled rows */
.groups--ruled .group {
  padding-block: 0.9rem;
  border-top: 1px solid var(--colour-line);
}

.groups--ruled .group:first-child {
  border-top-color: var(--colour-ink);
}

/* Digital Systems: the groups are joined along a connecting line */
.groups--flow {
  padding-left: 1.5rem;
}

.groups--flow .group {
  position: relative;
  padding-block: 0.15rem 0.9rem;
}

.groups--flow .group::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.4rem;
  width: 0.5625rem;
  height: 0.5625rem;
  background: var(--colour-surface);
  border: 1px solid var(--colour-brand);
}

.groups--flow .group:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(-1.5rem + 0.28rem);
  top: 0.9625rem;
  bottom: -0.4rem;
  width: 1px;
  background: var(--colour-brand);
}

/* ---------- Products pillar: portfolio list ---------- */
.plist {
  margin-top: 1.5rem;
  list-style: none;
}

.plist__item {
  padding-block: 1rem;
  border-top: 1px solid var(--colour-line-on-ink);
}

.plist__item--lead {
  padding-block: 1.25rem;
  border-top-color: var(--colour-brass);
}

.plist__name {
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

.plist__item--lead .plist__name {
  font-size: 1.75rem;
}

.plist__item--future .plist__name {
  color: var(--colour-on-ink-soft);
}

.plist .pillar__link {
  margin-top: 0.25rem;
  padding-top: 0.75rem;
}

.pstatus--on-ink .pstatus__mark--future {
  background: transparent;
  border-color: var(--colour-brass);
}

/* ---------- Bigeen Products: StitchFYN logo ---------- */
.feature__name {
  margin: 0 0 1.25rem;
}

.feature__logo {
  display: block;
  width: clamp(14rem, 30vw, 20rem);
  height: auto;
}

/* Developing versus future: visually distinct, both subordinate to StitchFYN */
.other {
  padding: 1.5rem;
}

.other h3 {
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}

.other__desc {
  max-width: 30rem;
  margin-top: 0.85rem;
  color: var(--colour-ink-soft);
}

.other--developing {
  border: 1px solid var(--colour-ink);
  background: var(--colour-surface);
}

.other--future {
  border: 1px dashed var(--colour-ink-soft);
}

.other--future h3 {
  color: var(--colour-ink-soft);
}

.others {
  gap: 1rem var(--grid-gap);
}

/* ---------- Selected Experience: carousel ---------- */
/* One example at a time. The track is a native scroll-snap row, so it swipes
   without JS; main.js adds the arrows, dots and a 6s auto-advance (paused on
   hover, focus, interaction or the pause button, and never under reduced motion). */
.exp__aside p {
  max-width: 30rem;
}

.carousel {
  margin-top: calc(var(--space-section) * 0.4);
}

.carousel__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  list-style: none;
}

.js .carousel__track {
  scrollbar-width: none;
}

.js .carousel__track::-webkit-scrollbar {
  display: none;
}

.slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 1.5rem 0 1.75rem 1.75rem;
  border-top: 1px solid var(--colour-ink);
}

/* The anchor square used for the connecting line throughout the page. */
.slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5625rem;
  height: 0.5625rem;
  background: var(--colour-brand);
}

.slide h3 {
  max-width: 22em;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.slide__context {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.9rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-ink-soft);
}

/* The pipe stays in the source text; the two parts are shown on separate lines. */
.slide__sep {
  display: none;
}

.carousel__controls:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 0.5rem;
  padding-left: 1.75rem;
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--colour-ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--colour-ink);
  font: inherit;
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.carousel__btn:hover {
  background: var(--colour-ink);
  color: var(--colour-canvas);
}

.carousel__dots {
  display: flex;
}

/* 24px hit area around a small square marker */
.carousel__dot {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.carousel__dot::before {
  content: "";
  width: 0.5625rem;
  height: 0.5625rem;
  border: 1px solid var(--colour-ink-soft);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.carousel__dot[aria-current="true"]::before {
  background: var(--colour-brand);
  border-color: var(--colour-brand);
}

.carousel__pause {
  margin-left: auto;
  padding: 0.35rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--colour-ink-soft);
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.carousel__pause:hover {
  color: var(--colour-ink);
}

.carousel__btn:focus-visible,
.carousel__dot:focus-visible,
.carousel__pause:focus-visible {
  outline: 2px solid var(--colour-brand);
  outline-offset: 3px;
}

.exp__note {
  margin-top: 1.5rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--colour-ink-soft);
  font-size: 0.875rem;
}

/* Areas of experience: a compact strip, not another content block */
.areas {
  margin-top: calc(var(--space-section) * 0.5);
}

.areas h3 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--colour-ink-soft);
}

.areas ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0.75rem;
  list-style: none;
}

.areas li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.25rem;
  border-top: 1px solid var(--colour-line);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.areas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--colour-brand);
}

.areas li:first-child {
  border-top-color: var(--colour-ink);
}

@media (min-width: 768px) {
  .areas ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .areas li:nth-child(2) {
    border-top-color: var(--colour-ink);
  }

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

@media (min-width: 1100px) {
  .areas ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .areas li:nth-child(3),
  .areas li:nth-child(4) {
    border-top-color: var(--colour-ink);
  }
}


/* ---------- Full-screen sections (medium and large screens) ---------- */
/* Every homepage section fills at least one viewport, with its content centred
   vertically; taller sections simply grow. The hero already fills the first
   screen together with the header. Centring adds free space above and below the
   content, so the guide lines that cross between sections are extended by up to
   half a viewport and clipped at the section edge — they still meet exactly. */
@media (min-width: 768px) {
  main > section:not(.hero) {
    --slack: 50svh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* clip, not hidden: it does not create a scroll container, so the sticky
     Bigeen Approach intro keeps working. */
  main > section:not(.hero):not(.start) {
    overflow-y: clip;
  }

  /* Incoming lines reach up to the top of their section */
  .problems__head::before,
  .build__head::before,
  .how__intro::before,
  .exp__head::before,
  .prod__head::before {
    top: calc(-1 * (var(--space-section) + var(--slack)));
  }

  /* Outgoing lines reach down to the bottom of their section */
  .idea__grid::after,
  .build__bridge::after,
  .how__close::after,
  .others::after {
    height: calc(var(--space-section) + var(--slack));
  }

  /* The anchor square that ended the Products line now sits on the top edge of
     the closing band, at the same x as the line (container content-box maths). */
  .others::before {
    display: none;
  }

  .start {
    position: relative;
  }

  .start::before {
    content: "";
    position: absolute;
    top: -0.5625rem;
    left: calc(
      (100% - min(100%, var(--container-max))) / 2 + var(--gutter) +
        (min(100%, var(--container-max)) - 2 * var(--gutter) + var(--grid-gap)) * 7 / 12 -
        3.75px
    );
    width: 0.5625rem;
    height: 0.5625rem;
    background: var(--colour-brand);
  }
}

@media (min-width: 1024px) {
  .flow::before {
    top: calc(-1 * (var(--space-section) + var(--slack)));
    height: calc(var(--space-section) + var(--slack) + var(--node-y));
  }
}

/* ---------- Photography ---------- */
/* Documentary images, quiet frame: no rounding, no shadow, a hairline edge. */
.photo {
  grid-column: 1 / -1;
  margin: 0;
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--colour-stone);
  outline: 1px solid var(--colour-line);
  outline-offset: -1px;
}

.photo--banner img {
  aspect-ratio: 12 / 5;
  object-fit: cover;
}

.photo--wide img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 768px) {
  .photo--wide img {
    aspect-ratio: 21 / 9;
  }
}

/* Launched: a round marker, so "live" differs by shape as well as by wording
   (solid square = in development, dashed square = future). */
.is-live > .pstatus__mark,
.is-live > .status__mark {
  border-radius: 50%;
}

/* Start band with a photo behind it (homepage). The ink overlay is dense enough
   that the cream text keeps the band's normal contrast; the photo is texture.
   Stock placeholder (Unsplash licence) until real Bigeen photography exists:
   https://unsplash.com/photos/team-collaborating-with-sticky-notes-w00FkE6e8zE */
.start--photo {
  background:
    linear-gradient(rgba(22, 24, 29, 0.86), rgba(22, 24, 29, 0.86)),
    image-set(
      url("../images/photos/workshop-hands-800.webp") type("image/webp"),
      url("../images/photos/workshop-hands-800.jpg") type("image/jpeg")
    ) center 30% / cover no-repeat,
    var(--colour-ink);
}

@media (min-width: 900px) {
  .start--photo {
    background:
      linear-gradient(rgba(22, 24, 29, 0.86), rgba(22, 24, 29, 0.86)),
      image-set(
        url("../images/photos/workshop-hands-1600.webp") type("image/webp"),
        url("../images/photos/workshop-hands-1600.jpg") type("image/jpeg")
      ) center 30% / cover no-repeat,
      var(--colour-ink);
  }
}

/* Areas of experience as image tiles: the words stay as captions. Two across
   on phones, then the list's own 2 and 4 column layout. */
.areas ul.areas__tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem var(--grid-gap);
}

.areas__tiles li {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 0;
  border-top: 0;
}

.areas__tiles li::before {
  content: none;
}

.areas__tiles img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--colour-line);
}

.areas__label {
  position: relative;
  padding-left: 1.25rem;
}

.areas__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--colour-brand);
}

@media (min-width: 1100px) {
  .areas ul.areas__tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- What We Build: capability lists fold away ---------- */
/* Closed, the summary still names the three groups, so a glance gives the
   shape of the offer; opening shows every capability. Native <details>:
   keyboard, screen readers and no-JS all work. */
.caps {
  margin-top: 1.5rem;
  border-top: 1px solid var(--colour-ink);
}

.caps__summary {
  display: grid;
  gap: 0.5rem;
  padding-block: 0.9rem;
  cursor: pointer;
  list-style: none;
}

.caps__summary::-webkit-details-marker {
  display: none;
}

.caps__groups {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--colour-ink);
}

.caps__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  min-height: 2.75rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--colour-brand);
}

.caps__summary:hover .caps__toggle {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.caps__summary:focus-visible {
  outline: 2px solid var(--colour-brand);
  outline-offset: 2px;
}

.caps__chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 0.2s var(--ease);
}

.caps[open] .caps__chevron {
  transform: translateY(0.12rem) rotate(-135deg);
}

.caps__less,
.caps[open] .caps__more {
  display: none;
}

.caps[open] .caps__less {
  display: inline;
}

/* Inside the fold the groups sit directly under the summary. */
.caps .groups {
  margin-top: 0;
  padding-bottom: 0.5rem;
}

.caps .groups--ruled .group:first-child {
  border-top-color: var(--colour-line);
}