.case-study { font-family: 'Open Sans', sans-serif; color: #243e51; padding-top: 84px; }
.case-study *, .case-study *::before { box-sizing: border-box; }
.case-wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.case-study h1, .case-study h2, .case-study h3 { font-family: 'Poppins', sans-serif; color: inherit; padding: 0; letter-spacing: -.035em; }
.case-study h1 { font-weight: 600; font-size: clamp(34px, 4.1vw, 58px); line-height: 1.12; margin: 18px 0 24px; }
.case-study h2 { font-weight: 600; font-size: clamp(28px, 3vw, 40px); line-height: 1.22; margin: 0; }
.case-study h3 { font-weight: 600; font-size: 22px; line-height: 1.35; margin: 0 0 12px; }
.case-study p { font-size: 16px; line-height: 1.8; }
.case-study a { text-decoration: none; }
.case-draft-note { background: #edf1f3; color: #425a6b; padding: 12px 32px; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.case-draft-note span { font-weight: 400; letter-spacing: 0; font-size: 12px; margin-left: 20px; }
.case-hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 48px; padding-block: 48px 56px; }
.case-back { display: inline-block; color: #426887; font-size: 13px; margin-bottom: 40px; }
.case-study .case-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1.6; margin: 0 0 20px; color: #55738d; }
.case-lead { max-width: 470px; margin: 0 0 28px; }
.case-text-link { display: inline-flex; gap: 32px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #8fa8ba; color: inherit; font-size: 14px; font-weight: 600; }
.case-hero-image { position: relative; margin: 0; height: 100%; min-height: 450px; background: #dce5e9; }
.case-hero-image img { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: 44% center; }
.case-hero-image figcaption { position: absolute; bottom: 0; left: 0; right: 0; background: #173a56ed; color: white; padding: 22px; font-size: 14px; }
.case-hero-image small { display: block; font-size: 10px; color: #bfd1df; margin-top: 8px; }
.case-status-dot { display: inline-block; background: #b1d1b2; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; }
.case-facts { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 30px; border-top: 1px solid #cfd9df; border-bottom: 1px solid #cfd9df; }
.case-facts > div { padding: 0 20px; border-right: 1px solid #dbe3e8; }
.case-facts > div:first-child { padding-left: 0; }
.case-facts > div:last-child { border-right: 0; }
.case-facts span, .case-label { display: block; font-size: 10px; letter-spacing: .1em; color: #5c7485; margin-bottom: 12px; }
.case-facts strong { font-size: 15px; font-weight: 600; }
.case-facts p { font-size: 12px; margin: 8px 0 0; }
.case-unconfirmed { color: #776349; }
.case-overview { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; padding-block: 80px; }
.case-body-copy p { margin: 0 0 18px; }
.case-scope { background: #203f60; color: #fff; padding-block: 70px; scroll-margin-top: 100px; }
.case-scope-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; }
.case-scope .case-eyebrow { color: #b3c8d9; }
.case-scope-heading > p:not(.case-eyebrow) { color: #d0dce6; max-width: 320px; margin: 22px 0 32px; }
.case-scope-list article { display: flex; gap: 24px; padding: 24px 0; border-top: 1px solid #ffffff35; }
.case-scope-list article:first-child { padding-top: 0; border: 0; }
.case-scope-list article > span { color: #a9c3d9; font-size: 12px; padding-top: 4px; }
.case-scope-list h3 { font-size: 20px; }
.case-scope-list p { color: #d0dce6; font-size: 14px; margin: 0; }
.case-scope-list p + p { margin-top: 12px; }
 .case-plant { padding-bottom: 70px; }
.case-plant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #d5dee3; }
.case-plant-grid article { display: flex; flex-direction: column; padding: 30px; border-right: 1px solid #d5dee3; }
.case-plant-grid article:last-child { border-right: 0; }
.case-plant-grid h3 { font-size: 23px; }
.case-plant-grid p { font-size: 14px; margin: 0 0 28px; }
.case-plant-status { margin-top: auto; font-size: 11px; font-weight: 600; color: #365d51; padding-top: 18px; border-top: 1px solid #d5dee3; }
.case-plant-active { color: #466f92; }
.case-study .case-coordination-note { font-size: 13px; color: #587082; line-height: 1.8; margin: 22px 0 0; max-width: 950px; }
.case-delivery { padding-block: 80px; }
.case-section-top { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 36px; }
.case-section-top > p { max-width: 370px; font-size: 14px; margin: 0; }
.case-delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.case-milestone { padding: 40px; background: #e5edf2; }
.case-pill { display: inline-block; font-size: 9px; letter-spacing: .09em; font-weight: 700; padding: 8px 10px; border: 1px solid #bccdd8; margin-bottom: 40px; }
.case-milestone h3 { font-size: 30px; }
.case-milestone p { font-size: 15px; }
.case-rule { height: 1px; background: #bfced9; margin: 32px 0; }
.case-detail-prompts { border: 1px solid #d5dee3; padding: 36px; }
.case-detail-prompts p { font-size: 14px; }
.case-detail-prompts dl { margin: 24px 0 0; }
.case-detail-prompts dl > div { padding: 16px 0; border-top: 1px solid #d5dee3; }
.case-detail-prompts dt { font-size: 14px; font-weight: 600; }
.case-detail-prompts dd { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: #587082; }
.case-gallery-section { padding-bottom: 70px; }
.case-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-photo-slot { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; text-align: left; border: 0; min-height: 300px; background: #294d6a; color: #fff; cursor: pointer; font: inherit; }
.case-photo-wide { grid-column: span 2; }
.case-photo-light { background: #d8e2e8; color: #294d6a; }
.case-photo-mid { background: #78919f; color: #fff; }
.case-photo-pale { background: #e7e9e6; color: #344f60; }
.case-photo-label { font-size: 9px; letter-spacing: .14em; }
.case-photo-number { align-self: center; font: 300 76px 'Poppins', sans-serif; opacity: .22; }
.case-photo-caption { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; font-weight: 600; }
.case-photo-slot:hover { box-shadow: inset 0 0 0 3px #426c92; }
.case-gallery-note { color: #5b7180; font-size: 12px !important; margin-top: 18px; }
.case-enquiry { background: #e8eff5; padding-block: 60px; }
.case-enquiry > div { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.case-enquiry p:not(.case-eyebrow) { max-width: 570px; margin-bottom: 0; }
.case-cta { display: inline-flex; justify-content: space-between; gap: 40px; flex-shrink: 0; padding: 18px 24px; color: white; background: #2d5992; font-size: 14px; font-weight: 600; }
.case-cta:hover { background: #203f60; }
@media (max-width: 800px) {
  .case-plant-grid { grid-template-columns: 1fr; }
  .case-plant-grid article { border-right: 0; border-bottom: 1px solid #d5dee3; padding: 26px; }
  .case-plant-grid article:last-child { border-bottom: 0; }
  .case-wrap { width: calc(100% - 32px); }
  .case-study { padding-top: 70px; }
  .case-draft-note { padding: 12px 16px; }
  .case-draft-note span { display: block; margin: 6px 0 0; line-height: 1.6; }
  .case-hero, .case-overview, .case-scope-grid, .case-delivery-grid { grid-template-columns: 1fr; gap: 30px; }
  .case-hero { padding-block: 30px 32px; }
  .case-back { margin-bottom: 24px; }
  .case-hero-image { min-height: 350px; }
  .case-facts { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .case-facts > div { padding: 0 16px; }
  .case-facts > div:nth-child(odd) { padding-left: 0; }
  .case-facts > div:nth-child(even) { border-right: 0; }
  .case-overview, .case-delivery { padding-block: 48px; }
  .case-scope { padding-block: 48px; }
  .case-section-top, .case-enquiry > div { flex-direction: column; align-items: stretch; gap: 20px; }
  .case-milestone, .case-detail-prompts { padding: 26px; }
  .case-photo-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .case-photo-wide { grid-column: span 2; }
  .case-photo-slot { min-height: 240px; padding: 18px; }
  .case-photo-number { font-size: 56px; }
  .case-photo-caption { font-size: 12px; }
  .case-photo-label { font-size: 8px; letter-spacing: .08em; }

}

/* Site-record gallery: crop only in the page; retain full originals in the viewer. */
.case-photo-grid-real { grid-auto-rows: 440px; }
.case-photo-real { overflow: hidden; isolation: isolate; min-height: 0; }
.case-photo-real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: brightness(1.08); z-index: -2; }
.case-photo-real::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0a1e3440, transparent 32%, transparent 60%, #0a1e34d9); z-index: -1; }
.case-photo-real .case-photo-label { align-self: flex-start; padding: 7px 9px; background: #173a56d9; }
.case-photo-real:hover { outline: 3px solid #789bb7; outline-offset: 3px; }
/* Gentle exposure lift for the two LTHW photographs, including the viewer. */
.case-photo-real img[src="southend-plant-room-retouched-timestamp-free.webp"],
.case-photo-real img[src="southend-valve-detail-edited.jpg"],
.case-lightbox-photo img[src$="southend-plant-room-retouched-timestamp-free.webp"],
.case-lightbox-photo img[src$="southend-valve-detail-edited.jpg"] { filter: brightness(1.18) contrast(.96); }
.case-photo-real[data-photo="0"]::after,
.case-photo-real[data-photo="1"]::after { background: linear-gradient(180deg, #0a1e3418, transparent 22%, transparent 72%, #0a1e34b8); }
@media(max-width:800px) {
  .case-photo-grid-real { grid-template-columns: 1fr; grid-auto-rows: 380px; }
  .case-photo-grid-real .case-photo-wide { grid-column: auto; }
  .case-photo-real img { object-position: center 35%; }
}

/* Compact photographic viewer. */
.case-lightbox { padding: 0; border: 1px solid #ffffff18; border-radius: 8px; width: min(1120px, calc(100vw - 64px)); max-width: none; max-height: calc(100dvh - 40px); background: #101b24; color: #f3f6f8; box-shadow: 0 24px 100px #0007; overflow: auto; }
.case-lightbox::backdrop { background: #07111bea; backdrop-filter: blur(7px); }
.case-viewer-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 10px 24px; }
.case-viewer-top > span { color: #a4b5c2; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.case-viewer-top > span > span { margin: 0 12px; color: #506270; }
.case-lightbox-close, .case-viewer-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: #f3f6f8; cursor: pointer; border: 1px solid #ffffff26; border-radius: 50%; background: #101b24a8; transition: background .18s, border-color .18s; }
.case-lightbox-close { border-color: transparent; background: transparent; }
.case-lightbox-close:hover, .case-viewer-arrow:hover { background: #345269; border-color: #ffffff65; }
.case-lightbox button:focus-visible { outline: 2px solid #d4eaff; outline-offset: 3px; }
.case-lightbox-photo { margin: 0; }
.case-viewer-stage { position: relative; background: #0b141c; -webkit-user-select: none; user-select: none; }
.case-viewer-stage img { -webkit-user-drag: none; }
.case-viewer-arrow { -webkit-tap-highlight-color: transparent; }
.case-lightbox-photo img { display: block; width: 100%; height: min(72dvh, 800px); object-fit: contain; background: #0b141c; }
.case-viewer-arrow { position: absolute; top: 50%; transform: translateY(-50%); }
.case-viewer-prev { left: 18px; }
.case-viewer-next { right: 18px; }
.case-lightbox-photo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 24px 20px; }
.case-lightbox-photo figcaption strong { font-size: 14px; font-weight: 500; }
.case-lightbox-photo figcaption div > span { display: block; color: #9fb0bd; font-size: 11px; margin-top: 5px; }
.case-viewer-count { color: #a4b5c2; font-size: 12px; letter-spacing: .12em; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.case-gallery-open { overflow: hidden; }
@media(max-width:600px) {
 .case-lightbox { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 6px; }
 .case-viewer-top { padding: 6px 10px 6px 16px; }
 .case-viewer-top > span { font-size: 8px; letter-spacing: .1em; }
 .case-viewer-top > span > span { margin: 0 6px; }
 .case-lightbox-photo img { width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 170px); margin-inline: auto; }
 .case-lightbox-photo figcaption { padding: 16px; gap: 12px; }
 .case-viewer-prev { left: 8px; }
 .case-viewer-next { right: 8px; }
}

.case-drawing-feature { display: grid; grid-template-columns: 280px 1fr; align-items: center; gap: 36px; margin-top: 32px; padding: 28px; background: #f0f4f6; }
.case-drawing-preview { padding: 0; background: white; border: 1px solid #d5dee3; color: #243e51; cursor: pointer; text-align: left; }
.case-drawing-preview img { display: block; width: 100%; height: auto; }
.case-drawing-preview > span { display: flex; justify-content: space-between; padding: 12px 16px; border-top: 1px solid #e4eaee; font: 600 12px 'Open Sans', sans-serif; }
.case-drawing-feature .case-eyebrow { margin-bottom: 10px; }
.case-drawing-feature h3 { font-size: 23px; }
.case-drawing-feature p { font-size: 14px; max-width: 630px; margin-bottom: 0; }
.case-drawing-feature .case-drawing-note { font-size: 12px; color: #587082; }
.case-viewer-arrow[hidden] { display: none; }
.case-study + footer { background: #203f60; color: #e3ecf3; }
.case-study + footer a, .case-study + footer p, .case-study + footer button { color: #e3ecf3; }
@media(max-width:600px) { .case-drawing-feature { grid-template-columns: 1fr; gap: 24px; padding: 22px; } }
/* Keep the two phased-delivery cards on the same typographic grid. */
.case-delivery-grid > div { box-sizing:border-box; padding:36px; border:1px solid #d5dee3; }
.case-delivery-grid > .case-milestone { border-color:transparent; }
.case-delivery-grid > div > :first-child { display:block; padding:0; border:0; margin:0 0 20px; color:#58738b; font:600 11px/1.6 "Open Sans",sans-serif; letter-spacing:.14em; }
.case-delivery-grid > div > h3 { font-size:24px; line-height:1.3; font-weight:600; margin:0 0 20px; min-height:2.6em; }
.case-delivery-grid > div > p:not(.case-eyebrow) { font-size:15px; line-height:1.8; margin:0 0 16px; }
.case-delivery-grid > div > p:last-child { margin-bottom:0; }
@media(max-width:900px) { .case-delivery-grid > div > h3 { min-height:0; } }
@media(max-width:700px) { .case-delivery-grid > div { padding:24px; } }

/* Selected project drawings: full sheets with direct access to the originals. */
.case-drawing-collection { margin-top:40px; padding-top:40px; border-top:1px solid #d5dee3; scroll-margin-top:110px; }
.case-drawing-intro { display:block; max-width:820px; margin-bottom:32px; }
.case-drawing-intro h3 { font-size:28px; margin-bottom:16px; }
.case-drawing-intro > p { margin:0; font-size:14px; }
.case-sheet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.case-sheet { display:block; min-width:0; border:1px solid #d5dee3; color:#243e51; background:white; transition:border-color .2s; }
.case-sheet:hover { border-color:#547a9b; }
.case-sheet:focus-visible { outline:3px solid #547a9b; outline-offset:4px; }
.case-sheet > img { display:block; width:100%; height:auto; aspect-ratio:1.414; object-fit:contain; padding:12px; }
.case-sheet-copy { border-top:1px solid #e4eaee; padding:18px 22px; }
.case-sheet h4 { font:600 18px/1.4 'Poppins',sans-serif; letter-spacing:-.025em; margin:0 0 8px; }
.case-sheet-copy p { font-size:13px; margin:0 0 14px; }
.case-sheet-copy > span { display:flex; justify-content:space-between; font-size:12px; font-weight:600; color:#203f60; }
@media(max-width:700px) { .case-drawing-intro,.case-sheet-grid { grid-template-columns:1fr; gap:24px; } .case-drawing-collection { margin-top:28px; padding-top:28px; } }
@media(prefers-reduced-motion:reduce) { .case-sheet { transition:none; } }

/* Image-led drawing collection: two arrangements, then four supporting details. */
.case-sheet-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 24px; }
.case-sheet { padding:0; border:0; text-align:left; cursor:pointer; font:inherit; }
.case-sheet:nth-child(-n+2) { grid-column:span 2; }
.case-sheet > img { padding:8px; border:1px solid #d5dee3; transition:border-color .2s; }
.case-sheet:hover > img { border-color:#547a9b; }
.case-sheet-caption { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 0 0; color:#203f60; font-size:14px; }
.case-sheet-caption strong { font-weight:600; }
@media(max-width:900px) { .case-sheet-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.case-sheet:nth-child(-n+2) { grid-column:span 1; } }
@media(max-width:600px) {
 .case-sheet-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }
 .case-sheet:nth-child(-n+2) { grid-column:1 / -1; }
 .case-sheet-caption { gap:8px; font-size:13px; }
 .case-sheet-caption .ui-chevron { flex-shrink:0; }
}

/* Gallery frame with a pale drawing-sheet surface. */
.drawing-viewer { border-top:2px solid #91adbf; }
.drawing-viewer .case-viewer-stage { background:#e8eef2; padding:18px 64px; }
.drawing-viewer .drawing-viewer-image { background:#fff; height:min(68dvh,760px); box-shadow:0 2px 12px #182f4214; }
.drawing-full-link { margin-left:auto; color:#c2d5e2; font-size:12px; text-decoration:none; border-bottom:1px solid #6b8292; padding-bottom:4px; }
.drawing-full-link:hover { color:white; border-color:white; }
.drawing-full-link:focus-visible { outline:2px solid #d4eaff; outline-offset:4px; }
@media(max-width:600px) {
 .drawing-viewer .case-viewer-stage { padding:12px 8px; }
 .drawing-viewer .drawing-viewer-image { width:100%; height:52dvh; max-height:none; }
 .drawing-viewer .case-lightbox-photo figcaption { flex-wrap:wrap; }
 .drawing-viewer figcaption > div { width:100%; }
 .drawing-full-link { margin-left:0; margin-right:auto; }
}