/* Service pages: photographic introduction and light editorial service content. */
.service-hero { overflow: hidden; }
.service-hero-layout { position: relative; min-height: 540px; display: flex; align-items: center; }
.service-hero .inner-hero-copy { position: relative; z-index: 1; width: 53%; padding-block: 64px; }
.service-hero h1 { max-width: 19ch; }
.service-hero .lead { font-size: 1rem; max-width: 53ch; }
.service-hero-image { position: absolute; inset: 0 -60px 0 34%; }
.service-hero-image picture, .service-hero-image img { display: block; width: 100%; height: 100%; border-radius: 0; }
.service-hero-image img { object-fit: cover; object-position: 60% center; }
.service-hero-image { overflow: hidden; }
.service-hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #001a2c 0%, rgba(0,26,44,.94) 12%, rgba(0,26,44,.68) 34%, rgba(0,26,44,.12) 72%, rgba(0,26,44,.08)); pointer-events: none; }
.service-expertise {
  --home-ink: #071c2b;
  --home-muted: #506778;
  --home-link: #066cb6;
  --home-border: #cfdde7;
  --virgo-icon-light: block;
  --virgo-icon-dark: none;
  background: #edf3f7;
  color: var(--home-ink);
}
.service-expertise .section-heading { max-width: 690px; margin-bottom: 48px; }
.service-editorial { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.service-editorial + .service-editorial { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--home-border); }
.service-editorial-copy { max-width: 48ch; }
.service-editorial-copy > .virgo-icon { --virgo-icon-size: 48px; margin-bottom: 22px; }
.inner-page .service-editorial h3 { font-size: clamp(1.5rem, calc(2.5vw * var(--site-text-scale, 1)), 2rem); line-height: 1.2; }
.service-editorial p { margin-top: 20px; color: var(--home-muted); }
.service-editorial-image { position: relative; overflow: hidden; }
.service-editorial-image picture, .service-editorial-image img { display: block; width: 100%; }
.service-editorial-image img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 0; }
#heating-refurbishment .service-editorial-image { width: 70%; justify-self: center; }
#leisure .service-editorial-image { width: 70%; justify-self: center; }
#heating-refurbishment .service-editorial-image figcaption { padding: 24px 10px 10px; font-size: .6875rem; }
.service-editorial--portrait .service-editorial-image { width: min(100%, 360px); justify-self: center; }
.service-editorial--portrait .service-editorial-image img { aspect-ratio: 3 / 4; }
.service-gallery + .dark-section { border-top: 1px solid #2b4455; }
.service-editorial-image figcaption { position: absolute; inset: auto 0 0; padding: 36px 24px 18px; color: #fff; background: linear-gradient(transparent, rgba(0,26,44,.88)); font-size: .8125rem; }
.service-editorial--reverse { grid-template-columns: 1.1fr .9fr; }
.service-editorial--reverse .service-editorial-copy { grid-column: 2; grid-row: 1; }
.service-editorial--reverse .service-editorial-image, .service-editorial--reverse .service-editorial-placeholder { grid-column: 1; grid-row: 1; }
.service-editorial-placeholder .service-placeholder { aspect-ratio: 1; max-width: 360px; margin-inline: auto; }
/* On production, the unassigned laboratory photograph leaves no empty column. */
.service-editorial--reverse:has(> [hidden]) { grid-template-columns: 1fr; }
.service-editorial--reverse:has(> [hidden]) .service-editorial-copy { grid-column: 1; max-width: 72ch; }
.service-information { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--home-border); }
.service-information-feature { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 20px; align-content: start; }
.service-information-feature > .virgo-icon { --virgo-icon-size: 40px; margin: 0; }
.inner-page .service-information-feature h3 { font-size: 1.125rem; line-height: 1.4; }
.service-information-feature p { margin-top: 14px; color: var(--home-muted); font-size: .9375rem; }
.service-gallery-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 36px; }
.service-preview-note { color: #a5bbcb; font-size: .75rem; max-width: 25ch; }
.service-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 1fr; gap: 16px; }
.service-mosaic > * { aspect-ratio: 1; min-width: 0; }
.service-mosaic-featured { grid-column: span 2; grid-row: span 2; }
.service-mosaic-photo { position: relative; display: block; overflow: hidden; background: #153346; color: #fff; text-decoration: none; }
.service-mosaic-photo picture, .service-mosaic-photo img { display: block; width: 100%; height: 100%; border-radius: 0; }
.service-mosaic-photo img { object-fit: cover; }
.service-photo-caption { position: absolute; inset: auto 0 0; display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 56px 24px 22px; background: linear-gradient(transparent, rgba(0,18,32,.92)); font-size: .875rem; }
.service-photo-caption > span { font-size: 1.375rem; }
.service-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; background: #e2ebf1; color: #536c7f; border: 1px dashed #9fb4c3; }
.service-placeholder strong { font-size: .9375rem; font-weight: 650; }
.service-placeholder > span { max-width: 23ch; font-size: .8125rem; line-height: 1.5; }
.service-image-icon { width: 30px; height: 30px; margin-bottom: 4px; }
.service-gallery .service-placeholder { background: #102c40; color: #b4c8d7; border-color: #4e6c82; }
.service-lightbox { position: fixed; inset: 0; z-index: 1000; margin: auto; width: min(100% - 32px, 1100px); max-width: none; max-height: calc(100dvh - 32px); padding: 20px; border: 1px solid #385167; background: #001a2c; color: #fff; }
.service-lightbox::backdrop { background: rgba(0,10,20,.88); }
.service-lightbox-close { display: flex; align-items: center; gap: 16px; margin: 0 0 16px auto; min-height: 44px; padding: 8px 16px; border: 1px solid #71899b; background: transparent; color: #fff; }
.service-lightbox-close span { font-size: 1.5rem; }
.service-lightbox figure img { width: 100%; height: auto; max-height: calc(100dvh - 180px); object-fit: contain; }
.service-lightbox figcaption { text-align: center; margin-top: 16px; font-size: .875rem; color: #d3dfe9; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .service-editorial-image img, .service-hero-image img, .project-tile-image img { transition: transform .35s ease; }
  .service-editorial-image:hover img, .service-hero-image:hover img, .project-tile-image:hover img { transform: scale(1.025); }
  .service-mosaic-photo img { transition: transform .35s ease; }
  .service-mosaic-photo:hover img { transform: scale(1.025); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .service-hero-layout { min-height: 520px; }
  .service-hero .inner-hero-copy { width: 58%; padding-block: 48px; }
  .service-hero-image { right: -32px; }
  .service-editorial { gap: 36px; }
  .service-information { gap: 32px; }
  .service-information-feature { grid-template-columns: 1fr; gap: 16px; }
  .service-mosaic { gap: 12px; }
  .service-placeholder { padding: 14px; gap: 6px; }
}
@media (max-width: 767px) {
  .service-hero-layout { display: flex; flex-direction: column; min-height: 0; }
  .service-hero .inner-hero-copy { width: 100%; padding-block: 32px 24px; }
  .service-hero h1 { max-width: 22ch; }
  .service-hero .lead { font-size: .9375rem; }
  .service-hero-image { position: relative; inset: auto; width: calc(100% + 48px); height: clamp(230px, 66vw, 420px); }
  .service-hero-image::after { background: linear-gradient(180deg, #001a2c, rgba(0,26,44,.15) 30%, transparent 60%); }
  .service-expertise .section-heading { margin-bottom: 32px; }
  .service-editorial, .service-editorial--reverse { grid-template-columns: 1fr; gap: 24px; }
  .service-editorial--reverse .service-editorial-copy, .service-editorial--reverse .service-editorial-image, .service-editorial--reverse .service-editorial-placeholder { grid-column: auto; grid-row: auto; }
  .service-editorial + .service-editorial { margin-top: 32px; padding-top: 32px; }
  .service-editorial-placeholder .service-placeholder { max-width: 100%; }
  .service-information { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; padding-top: 28px; }
  .service-information-feature { grid-template-columns: 36px minmax(0,1fr); gap: 16px; }
  .service-information-feature > .virgo-icon { --virgo-icon-size: 34px; }
  .service-gallery-heading { display: block; margin-bottom: 28px; }
  .service-preview-note { max-width: none; margin-top: 18px; }
  .service-mosaic { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .service-mosaic .service-placeholder { padding: 12px; gap: 6px; }
  .service-mosaic .service-placeholder strong { font-size: .8125rem; }
  .service-mosaic .service-placeholder > span { font-size: .6875rem; }
  .service-photo-caption { padding: 40px 18px 18px; font-size: .8125rem; }
  .service-mosaic-photo:not(.service-mosaic-featured) .service-photo-caption { padding: 34px 10px 10px; gap: 6px; font-size: .6875rem; line-height: 1.4; }
  .service-mosaic-photo:not(.service-mosaic-featured) .service-photo-caption > span { font-size: 1rem; }
}