/* Project detail v2 (2026-09-08). Same markup as v1; desktop rebuilt as flow
   layout. The hero image now uses a plain cover crop instead of the Kensington
   offsets that v1 applied to every project. Tablet and mobile blocks are
   carried over below. */
.ptsb-project-detail { background: var(--ptsb-precision-cream); font-size: 16px; line-height: 1.5; }
.ptsb-project-detail__intro { padding: 80px 0 64px; }
.ptsb-project-detail__category { display: inline-flex; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptsb-project-detail h1,
.ptsb-project-detail h2 { font-family: var(--ptsb-precision-display); font-weight: 400; }
.ptsb-project-detail h1 { max-width: 1045px; margin: 32px 0 0 -3px; font-size: 68px; font-weight: 500; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.ptsb-project-detail__overview { display: grid; grid-template-columns: 671px minmax(0, 1fr); gap: 60px; align-items: start; }
.ptsb-project-detail__hero { position: relative; width: 671px; max-width: 100%; height: 446px; overflow: hidden; border-radius: var(--ptsb-precision-radius-lg); background: #9aa8b4; }
.ptsb-project-detail__hero-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.ptsb-project-detail__missing-image { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #c5cbd0, #9aa8b4); }
.ptsb-project-detail__information { padding-top: 4px; }
.ptsb-project-detail__about h2,
.ptsb-project-detail__work h2,
.ptsb-project-detail__gallery h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; line-height: 1.2; }
.ptsb-project-detail__about p { margin: 20px 0 0; font-size: 16px; line-height: 1.5; }
.ptsb-project-detail__meta { margin: 48px 0 0; border-top: 1px solid var(--ptsb-precision-hairline-strong); }
.ptsb-project-detail__meta div { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 56px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ptsb-precision-hairline); }
.ptsb-project-detail__meta dt { font-family: var(--ptsb-precision-display); font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.ptsb-project-detail__meta dd { margin: 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
/* Status carries a dot rather than a coloured pill: the page keeps one accent,
   and the dot is enough to read the state at a glance. */
.ptsb-project-detail__status { display: inline-flex; gap: 9px; align-items: center; }
.ptsb-project-detail__status::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
.ptsb-project-detail__status--completed::before { background: #4c8b5c; }
.ptsb-project-detail__status--in-progress::before { background: var(--ptsb-precision-gold); }
.ptsb-project-detail__status--on-hold::before { background: var(--ptsb-precision-grey); }

/* Scope and outcomes band. */
.ptsb-project-detail__work { margin-top: 88px; padding: 96px 0 88px; background: var(--ptsb-precision-charcoal); color: var(--ptsb-precision-cream); }
.ptsb-project-detail__work-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; }
.ptsb-project-detail__work-inner--single { grid-template-columns: minmax(0, 1fr); max-width: 670px; margin-left: max(calc((100% - var(--ptsb-precision-rail)) / 2), var(--ptsb-precision-gutter)); margin-right: auto; }
.ptsb-project-detail__scope,
.ptsb-project-detail__outcomes { min-width: 0; }
/* The rule belongs in the middle of the 96px gutter. As a border-left it sat
   on the column edge - 96px from the left block, 48px from its own text. */
.ptsb-project-detail__outcomes { position: relative; padding-left: 48px; }
.ptsb-project-detail__outcomes::before { position: absolute; top: 0; bottom: 0; left: -48px; width: 1px; background: var(--ptsb-precision-hairline-light); content: ""; }
.ptsb-project-detail__scope-content { max-width: 520px; margin: 32px 0 0; font-size: 16px; line-height: 1.5; }
.ptsb-project-detail__scope-content > :first-child { margin-top: 0; }
.ptsb-project-detail__scope-content > :last-child { margin-bottom: 0; }
.ptsb-project-detail__scope-content ol,
.ptsb-project-detail__outcomes ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: ptsb-outcome; }
/* The counter only needs its own width; 72 + 32 left a hole between the
   number and the line. The floor is two lines deep, so the left list rules
   off on the same rows as the right one even though its lines are shorter. */
.ptsb-project-detail__scope-content li,
.ptsb-project-detail__outcomes li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 24px; min-height: 83px; align-content: center; padding: 18px 0; border-top: 1px solid var(--ptsb-precision-hairline-light); font-size: 16px; line-height: 1.45; counter-increment: ptsb-outcome; overflow-wrap: anywhere; }
.ptsb-project-detail__scope-content li:last-child,
.ptsb-project-detail__outcomes li:last-child { border-bottom: 1px solid var(--ptsb-precision-hairline-light); }
.ptsb-project-detail__scope-content li::before,
.ptsb-project-detail__outcomes li::before { content: counter(ptsb-outcome, decimal-leading-zero); color: rgba(252, 249, 244, .45); font-family: var(--ptsb-precision-display); font-size: 20px; line-height: 1.2; }
.ptsb-project-detail__outcomes ol { margin-top: 32px; }

/* Galleries. */
.ptsb-project-detail__gallery { padding: 88px 0 96px; }
.ptsb-project-detail__gallery-label { margin: 0; color: var(--ptsb-precision-grey); font-size: 14px; font-weight: 500; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.ptsb-project-detail__completed h2,
.ptsb-project-detail__progress h2 { margin-top: 16px; }
.ptsb-project-detail__completed-grid { display: grid; grid-template-columns: 671px minmax(0, 1fr); grid-template-rows: repeat(2, 284px); gap: 31px 25px; margin-top: 40px; }
.ptsb-project-detail__completed-grid--1 { display: block; width: 671px; max-width: 100%; }
.ptsb-project-detail__completed-grid--2 { grid-template-rows: 599px; }
.ptsb-project-detail__completed-grid--2 .ptsb-project-detail__completed-image--1 { grid-row: auto; }
.ptsb-project-detail__completed-image { min-width: 0; margin: 0; overflow: hidden; border-radius: var(--ptsb-precision-radius-md); }
.ptsb-project-detail__completed-image--1 { grid-row: 1 / span 2; }
.ptsb-project-detail__completed-grid--1 .ptsb-project-detail__completed-image { height: 599px; }
.ptsb-project-detail__completed-grid--2 .ptsb-project-detail__completed-image { height: 599px; }
.ptsb-project-detail__gallery-image { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The two galleries are one section, so they sit closer than a section break
   - but 96 ran them together; 132 reads as two named groups. */
.ptsb-project-detail__progress { margin-top: 132px; }
.ptsb-project-detail__progress-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 31px; margin-top: 40px; }
.ptsb-project-detail__progress figure { height: 254px; min-width: 0; margin: 0; overflow: hidden; border-radius: var(--ptsb-precision-radius-md); }

/* Gallery viewer. The thumbs are links to the full file; the script shows them
   over the page instead of navigating, so the visitor never leaves the tab. */
.ptsb-project-detail__zoom { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.ptsb-project-detail__zoom::after { position: absolute; inset: 0; background: rgba(46, 46, 46, 0); content: ""; transition: background-color .25s ease; }
.ptsb-project-detail__zoom:hover::after,
.ptsb-project-detail__zoom:focus-visible::after { background: rgba(46, 46, 46, .18); }
.ptsb-project-detail__zoom:focus-visible { outline: 2px solid var(--ptsb-precision-action); outline-offset: 3px; }
/* The cue is what tells a visitor the photo opens. It fades in under the
   pointer; on a touch screen there is no hover, so it stays on at half strength. */
.ptsb-project-detail__zoom-cue { position: absolute; z-index: 1; top: 16px; right: 16px; display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(23, 23, 23, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcf9f4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5'/%3E%3Cpath d='M4 4l6.5 6.5'/%3E%3Cpath d='M15 20h5v-5'/%3E%3Cpath d='M20 20l-6.5-6.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat; opacity: 0; transform: scale(.9); transition: opacity .22s ease, transform .22s ease; }
.ptsb-project-detail__zoom:hover .ptsb-project-detail__zoom-cue,
.ptsb-project-detail__zoom:focus-visible .ptsb-project-detail__zoom-cue { opacity: 1; transform: scale(1); }
@media (hover: none) {
  .ptsb-project-detail__zoom-cue { opacity: .55; transform: none; }
}

/* Full album: every photo of the project as one contact sheet, so nothing is
   hidden from a visitor or a crawler and any photo is one click from the viewer. */
.ptsb-project-detail__album { margin-top: 132px; }
.ptsb-project-detail__album > h2 { margin-top: 16px; }
.ptsb-project-detail__album-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.ptsb-project-detail__album-grid figure[hidden] { display: none; }
/* Set as one of the page's quiet text links rather than a box: same size,
   weight and colour as "Learn more" elsewhere, with a chevron that flips. */
.ptsb-project-detail__album-more { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; padding: 0; border: 0; background: transparent; color: var(--ptsb-precision-action); cursor: pointer; font-family: var(--ptsb-precision-body); font-size: 16px; font-weight: 600; letter-spacing: .02em; line-height: 1; text-transform: uppercase; }
.ptsb-project-detail__album-more::after { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: translateY(-2px) rotate(45deg); transition: transform .22s ease; }
.ptsb-project-detail__album-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.ptsb-project-detail__album-more:hover { text-decoration: underline; text-underline-offset: 6px; }
.ptsb-project-detail__album-more:focus-visible { outline: 2px solid var(--ptsb-precision-action); outline-offset: 5px; }
.ptsb-project-detail__album-grid figure { min-width: 0; margin: 0; overflow: hidden; border-radius: var(--ptsb-precision-radius-sm); aspect-ratio: 3 / 2; }
.ptsb-project-detail__album-grid .ptsb-project-detail__zoom-cue { top: 10px; right: 10px; width: 32px; height: 32px; background-size: 15px 15px; }

@media (max-width: 767px) {
  .ptsb-project-detail__zoom-cue { top: 10px; right: 10px; width: 32px; height: 32px; background-size: 15px 15px; }
  .ptsb-project-detail__album { margin-top: 56px; }
  .ptsb-project-detail__album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
  .ptsb-project-detail__album-more { margin-top: 22px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ptsb-project-detail__zoom::after,
  .ptsb-project-detail__zoom-cue,
  .ptsb-project-detail__album-more,
  .ptsb-project-detail__album-more::after { transition: none; }
}

/* ===== v2 responsive (2026-09-08): fluid below the 1600 anchor, stacked below 768.
   Written against the v2 desktop base; the v1 frozen mobile frames are not used. ===== */
@media (max-width: 1199px) {
  .ptsb-project-detail__album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ptsb-project-detail__overview { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; }
  .ptsb-project-detail__hero { width: 100%; height: auto; aspect-ratio: 671 / 446; }
  .ptsb-project-detail__work-inner { gap: 48px; }
  .ptsb-project-detail__outcomes::before { left: -24px; }
  .ptsb-project-detail__completed-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .ptsb-project-detail__completed-grid--1 { width: 100%; }
  .ptsb-project-detail__completed-grid--2 { grid-template-rows: auto; }
  .ptsb-project-detail__completed-image,
  .ptsb-project-detail__completed-grid--1 .ptsb-project-detail__completed-image,
  .ptsb-project-detail__completed-grid--2 .ptsb-project-detail__completed-image { height: auto; aspect-ratio: 474 / 284; }
  .ptsb-project-detail__completed-image--1,
  .ptsb-project-detail__completed-grid--1 .ptsb-project-detail__completed-image,
  .ptsb-project-detail__completed-grid--2 .ptsb-project-detail__completed-image { aspect-ratio: 671 / 599; }
  .ptsb-project-detail__progress figure { height: auto; aspect-ratio: 369 / 254; }
}

@media (max-width: 767px) {
  .ptsb-project-detail { font-size: 16px; }
  .ptsb-project-detail__intro { padding: 56px 0 36px; }
  /* 32, the page-title tier - it was 36 while the Projects index was 30. */
  .ptsb-project-detail h1 { margin-top: 20px; font-size: 32px; }
  .ptsb-project-detail__overview { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ptsb-project-detail__hero { border-radius: var(--ptsb-precision-radius-md); }
  .ptsb-project-detail__about h2,
  .ptsb-project-detail__work h2,
  .ptsb-project-detail__gallery h2 { font-size: 20px; }
  .ptsb-project-detail__about p { margin-top: 14px; font-size: 16px; }
  .ptsb-project-detail__meta { margin-top: 28px; }
  .ptsb-project-detail__meta div { grid-template-columns: 120px minmax(0, 1fr); min-height: 48px; padding: 8px 0; }
  .ptsb-project-detail__meta dt { font-size: 16px; }
  .ptsb-project-detail__meta dd { font-size: 16px; }
  .ptsb-project-detail__work { margin-top: 64px; padding: 64px 0 72px; }
  .ptsb-project-detail__work-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ptsb-project-detail__work-inner--single { max-width: none; margin-left: auto; }
  .ptsb-project-detail__outcomes { padding: 40px 0 0; border-top: 1px solid var(--ptsb-precision-hairline-light); }
  .ptsb-project-detail__outcomes::before { display: none; }
  .ptsb-project-detail__scope-content { max-width: none; margin-top: 20px; font-size: 16px; }
  /* The reset further up this file names `ol`, but Scope of Work is authored in
     the editor and comes through as a `ul`, so it keeps the browser's own
     padding-left: 40px. The li rules are not element-qualified, so the items
     still get the grid and the counter and the list looks right - it is just
     sitting 40px to the right of its own heading, while Key Outcomes, which is
     the theme's own `ol`, sits flush with its heading.

     Above 767px the two lists are side by side in separate columns, 641px apart
     at 1600, so nothing gives it away. Here they stack and share a left edge,
     which is where the step shows. Same 40px at every width; this only corrects
     it where it is visible, because desktop is signed off. */
  .ptsb-project-detail__scope-content ul { padding-left: 0; list-style: none; }
  .ptsb-project-detail__scope-content li,
  .ptsb-project-detail__outcomes li { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; min-height: 0; padding: 14px 0; font-size: 16px; }
  .ptsb-project-detail__scope-content li::before,
  .ptsb-project-detail__outcomes li::before { font-size: 16px; }
  .ptsb-project-detail__outcomes ol { margin-top: 20px; }
  .ptsb-project-detail__gallery { padding: 64px 0 72px; }
  .ptsb-project-detail__gallery-label { font-size: 12px; }
  .ptsb-project-detail__completed-grid,
  .ptsb-project-detail__completed-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 14px; margin-top: 28px; }
  .ptsb-project-detail__completed-grid--1 { display: block; width: 100%; }
  .ptsb-project-detail__completed-image,
  .ptsb-project-detail__completed-grid--2 .ptsb-project-detail__completed-image { aspect-ratio: 164 / 113; border-radius: var(--ptsb-precision-radius-sm); }
  .ptsb-project-detail__completed-image--1,
  .ptsb-project-detail__completed-grid--1 .ptsb-project-detail__completed-image,
  .ptsb-project-detail__completed-grid--2 .ptsb-project-detail__completed-image:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 342 / 240; border-radius: var(--ptsb-precision-radius-md); }
  /* With only two photos the second sat alone in the left half of its row; it
     takes the full width too, so the pair reads as one column. */
  .ptsb-project-detail__completed-grid--2 .ptsb-project-detail__completed-image:last-child { grid-column: 1 / -1; aspect-ratio: 342 / 240; border-radius: var(--ptsb-precision-radius-md); }
  /* An odd photo out at the end of the site grid spans the row for the same reason. */
  .ptsb-project-detail__progress-grid figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ptsb-project-detail__progress { margin-top: 56px; }
  .ptsb-project-detail__progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
  .ptsb-project-detail__progress figure { aspect-ratio: 164 / 113; border-radius: var(--ptsb-precision-radius-sm); }
}