/* Shared presentation for Monitor Systems' onshore case-study collection. */
:root {
  --onshore-navy: #041b2c;
  --onshore-deep: #02131f;
  --onshore-paper: #f3f0e8;
  --onshore-ink: #0a2233;
  --onshore-muted: #a9bdc7;
  --case-cyan: #25d8ff;
  --case-cyan-rgb: 37 216 255;
  --case-gold: #f4bd38;
  --case-gold-rgb: 244 189 56;
  --case-violet: #b58cff;
  --case-violet-rgb: 181 140 255;
  --case-warm-red: #ed8e78;
  --case-warm-red-rgb: 237 142 120;
  --case-green: #8fcf64;
  --case-green-rgb: 143 207 100;
  --case-teal: #36d1c4;
  --case-teal-rgb: 54 209 196;
}

.onshore-case,
.onshore-hub {
  --accent: var(--case-green);
  --accent-rgb: var(--case-green-rgb);
  --deep: var(--onshore-deep);
  --navy: var(--onshore-navy);
  --offwhite: var(--onshore-paper);
  --ink: var(--onshore-ink);
}

.lobster-case { --accent: var(--case-teal); --accent-rgb: var(--case-teal-rgb); }
.brewdog-case { --accent: var(--case-gold); --accent-rgb: var(--case-gold-rgb); }
.subdrill-case { --accent: var(--case-violet); --accent-rgb: var(--case-violet-rgb); }
.marine-theme { --accent: var(--case-cyan); --accent-rgb: var(--case-cyan-rgb); }
.semis-theme { --accent: var(--case-gold); --accent-rgb: var(--case-gold-rgb); }
.renewables-theme { --accent: var(--case-green); --accent-rgb: var(--case-green-rgb); }
.land-theme { --accent: var(--case-warm-red); --accent-rgb: var(--case-warm-red-rgb); }
.onshore-case.renewables-theme:not(.baltic-enclosures-case):not(.east-anglia-3-fibre-case):not(.odf-fibre-panels-case) { --accent: var(--case-gold); --accent-rgb: var(--case-gold-rgb); }
.baltic-enclosures-case { --accent: var(--case-cyan); --accent-rgb: var(--case-cyan-rgb); }
.east-anglia-3-fibre-case { --accent: var(--case-green); --accent-rgb: var(--case-green-rgb); }
.odf-fibre-panels-case { --accent: var(--case-violet); --accent-rgb: var(--case-violet-rgb); }

/* Case-study accents mirror their parent project cards. */
.marine-theme:has(.hero-visual img[src*="mining-hero"]) { --accent: var(--case-teal); --accent-rgb: var(--case-teal-rgb); }
.vfd-reeler-case { --accent: var(--case-green); --accent-rgb: var(--case-green-rgb); }
.deep-energy-hpu-case { --accent: var(--case-warm-red); --accent-rgb: var(--case-warm-red-rgb); }
.ocean-patriot-case { --accent: var(--case-violet); --accent-rgb: var(--case-violet-rgb); }
.semis-theme:has(.hero-visual img[src*="bulk-hero"]) { --accent: var(--case-cyan); --accent-rgb: var(--case-cyan-rgb); }
.rms-upgrade-case { --accent: var(--case-violet); --accent-rgb: var(--case-violet-rgb); }
.esd-control-case { --accent: var(--case-warm-red); --accent-rgb: var(--case-warm-red-rgb); }

.onshore-case .contact-link span,
.onshore-case .scroll-cue span,
.onshore-case .system-panel li::before,
.onshore-case .panel-topline span,
.onshore-case .system-stat strong,
.onshore-case .closing h2 em { color: var(--accent); }

.onshore-case .hero-grid {
  background-image:
    linear-gradient(rgb(var(--accent-rgb) / 17%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--accent-rgb) / 17%) 1px, transparent 1px);
}

.onshore-case .hero-visual::after {
  background:
    linear-gradient(90deg, var(--navy) 0%, rgb(4 27 44 / 66%) 10%, transparent 44%),
    linear-gradient(0deg, rgb(2 19 31 / 66%), transparent 52%);
}

.onshore-case .hero-visual :is(img, video) { filter: saturate(.82) contrast(1.07) brightness(.85); }
.baltic-enclosures-case .hero-visual video { object-position: right center; }
.onshore-case .hero-fact { border-left-color: var(--accent); }

.onshore-case .explorer::before {
  background: linear-gradient(90deg, var(--accent) 0 72px, rgb(255 255 255 / 15%) 72px);
}

.onshore-case .explorer .section-label { color: var(--accent); }
.onshore-case .explorer-heading > p { border-left-color: rgb(var(--accent-rgb) / 70%); }

.onshore-case .image-map {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: #061b27;
}

.onshore-case .image-map > img,
.onshore-case .image-map::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.onshore-case .image-map > img {
  z-index: 1;
  display: block;
  object-fit: cover;
  filter: saturate(.76) contrast(1.08) brightness(.75);
  transition: filter .3s ease, transform .7s ease;
}

.onshore-case .image-map:hover > img {
  filter: saturate(.9) contrast(1.06) brightness(.86);
  transform: scale(1.02);
}

.onshore-case .image-map::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgb(1 15 24 / 12%), transparent 46%, rgb(1 15 24 / 62%)),
    linear-gradient(90deg, rgb(2 19 31 / 28%), transparent 34% 72%, rgb(2 19 31 / 26%));
  content: "";
  pointer-events: none;
}

.onshore-case .hotspots-layer { z-index: 3; }
.onshore-case .hotspot.is-active span {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / 14%);
  color: var(--accent);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 88%), 0 0 0 7px rgb(var(--accent-rgb) / 14%);
}
.onshore-case .hotspot.is-active em { border-color: rgb(var(--accent-rgb) / 75%); }
.onshore-case .view-label { z-index: 4; padding: 8px 10px; background: rgb(2 19 31 / 72%); backdrop-filter: blur(5px); }
.onshore-case .view-label span { background: var(--accent); }

.onshore-case .scope-panel { display: none; min-width: 0; }
.onshore-case .scope-panel.is-active { display: flex; }
.onshore-case .scope-panel > * { transition: opacity .15s ease, transform .18s ease; }
.onshore-case .scope-panel.is-changing > * { opacity: .35; transform: translateY(4px); }
.onshore-case .system-stat strong { white-space: nowrap; font-size: clamp(2.45rem, 4.4vw, 4.8rem); }

.onshore-case .onshore-delivery {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(340px, 1.14fr);
  gap: clamp(42px, 8vw, 140px);
  padding: clamp(88px, 10vw, 145px) 8vw;
  background: #e9e6de;
}

.onshore-case .onshore-delivery h2 {
  max-width: 630px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(44px, 5.2vw, 78px);
  letter-spacing: -.05em;
  line-height: .98;
}

.onshore-case .onshore-delivery .section-label { color: #2e5c73; }
.onshore-case .onshore-delivery > div > p:not(.section-label) { max-width: 520px; margin: 38px 0 0; color: #193c4d; font-size: 17px; line-height: 1.65; }

.onshore-case .delivery-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid #bdc4c5;
  border-left: 1px solid #bdc4c5;
  list-style: none;
}

.onshore-case .delivery-list li {
  display: grid;
  align-content: end;
  min-height: 210px;
  padding: 32px;
  border-right: 1px solid #bdc4c5;
  border-bottom: 1px solid #bdc4c5;
}

.onshore-case .delivery-list strong {
  display: block;
  margin-bottom: 14px;
  color: var(--accent);
  font-size: clamp(1.65rem, 2.5vw, 2.6rem);
  letter-spacing: -.05em;
  line-height: 1;
}
.onshore-case .delivery-list span { color: #465c68; font-size: .9rem; line-height: 1.6; }

.onshore-case .case-source {
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  color: #193c4d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.onshore-case .case-source span { margin-left: 8px; color: var(--accent); }

.onshore-case .case-next {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 42px;
}
.onshore-case .case-next a { margin: 0; background: transparent; color: #dce8ed; border: 1px solid rgb(255 255 255 / 28%); }
.onshore-case .case-next a:hover,
.onshore-case .case-next a:focus-visible { border-color: var(--accent); color: var(--accent); }
.onshore-case .case-next a[aria-current="page"] { border-color: var(--accent); background: var(--accent); color: var(--deep); }

.onshore-case footer a { color: #bbc7cc; }

/* Long project names may wrap within the copy column without changing the
   shared case-study type scale. */
.onshore-case .hero h1 {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}
.onshore-case .hero-copy { min-width: 0; }

/* The Onshore index intentionally shares the same industrial-dark language as the homepage. */
.onshore-hub { --landing-content-gutter: clamp(1.25rem, 6vw, 7rem); min-height: 100vh; background: #031522; color: #f5f8fa; font-family: Arial, Helvetica, sans-serif; }
.onshore-hub * { box-sizing: border-box; }
.onshore-hub a { color: inherit; text-decoration: none; }
.onshore-hub .hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 104px;
  padding: 0 5vw;
  border-bottom: 1px solid rgb(255 255 255 / 16%);
  background: rgb(2 19 31 / 88%);
}
.onshore-hub .hub-brand { display: flex; width: min(330px, 58vw); padding: 14px; }
.onshore-hub .hub-brand img { width: 100%; height: auto; }
.onshore-hub .hub-header nav { display: flex; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.onshore-hub .hub-header nav a { padding: 12px; border-bottom: 1px solid transparent; color: #d6e2e7; }
.onshore-hub .hub-header nav a:hover,
.onshore-hub .hub-header nav a:focus-visible { border-color: var(--accent); color: #fff; }
.onshore-hub .sector-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 5vw;
  border-bottom: 1px solid rgb(255 255 255 / 14%);
  background: #061d2d;
  scrollbar-width: thin;
}
.onshore-hub .sector-nav a {
  flex: 0 0 auto;
  padding: 10px 13px;
  border-bottom: 2px solid transparent;
  color: #c6d4dc;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.onshore-hub .sector-nav a:hover,
.onshore-hub .sector-nav a:focus-visible,
.onshore-hub .sector-nav a[aria-current="page"] { border-bottom-color: var(--accent); color: #fff; }
.onshore-hub .hub-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 470px; overflow: hidden; background: radial-gradient(circle at 82% 10%, rgb(var(--accent-rgb) / 17%), transparent 28%), linear-gradient(135deg, #031522, #08293c); }
.onshore-hub .hub-copy { min-width: 0; padding: clamp(64px, 8vw, 120px) clamp(30px, 6vw, 96px); container-type: inline-size; }
.onshore-hub .hub-kicker { margin: 0 0 24px; color: var(--accent); font-size: .71rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.onshore-hub h1 { margin: 0; font-size: clamp(3.5rem, 6.8vw, 8rem); letter-spacing: -.065em; line-height: .82; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
.onshore-hub h1 em { display: block; margin-top: clamp(8px, 1.6vw, 20px); color: var(--accent); font-family: Georgia, serif; font-size: .47em; font-weight: 400; letter-spacing: -.04em; }
.onshore-hub .hub-copy > p:last-child { max-width: 580px; margin: 1.55rem 0 0; color: #c6d4dc; font-size: clamp(1rem, 1.18vw, 1.22rem); line-height: 1.65; }
.onshore-hub .hub-hero-visual { position: relative; min-height: 100%; background: #0c2a38 var(--hub-image, url("biodiesel-panels.jpg")) center / cover no-repeat; }
.onshore-hub .hub-hero-visual::after { position: absolute; inset: 0; background: linear-gradient(90deg, #041b2c 0%, rgb(4 27 44 / 42%) 24%, transparent), linear-gradient(0deg, rgb(2 19 31 / 58%), transparent 50%); content: ""; }
.onshore-hub .case-collection { padding: clamp(72px, 10vw, 138px) 5vw; background: #f3f0e8; color: #0a2233; }
.onshore-hub .collection-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; max-width: 1420px; margin: 0 auto 48px; }
.onshore-hub .collection-heading p { margin: 0; color: #50616d; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.onshore-hub .collection-heading h2 { margin: 15px 0 0; font-size: clamp(2.7rem, 5vw, 5.5rem); letter-spacing: -.06em; line-height: .9; }
.onshore-hub .collection-heading > span { max-width: 340px; color: #465c68; line-height: 1.65; }
.onshore-hub .case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1420px; margin: 0 auto; border-top: 1px solid #bbc5c7; border-left: 1px solid #bbc5c7; }
.onshore-hub .hub-card { position: relative; display: grid; grid-template-columns: minmax(180px, .66fr) 1fr; min-height: 330px; overflow: hidden; border-right: 1px solid #bbc5c7; border-bottom: 1px solid #bbc5c7; background: #e9e6de; }
.onshore-hub .hub-card img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; filter: saturate(.78) contrast(1.06); transition: transform .5s ease, filter .3s ease; }
.onshore-hub .hub-card > div { display: flex; flex-direction: column; align-items: flex-start; padding: 35px; }
.onshore-hub .hub-card small { color: #50616d; font-size: .63rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.onshore-hub .hub-card h3 { margin: 16px 0 14px; font-size: clamp(2rem, 3.4vw, 3.65rem); letter-spacing: -.06em; line-height: .88; }
.onshore-hub .hub-card p { margin: 0; color: #465c68; font-size: .93rem; line-height: 1.55; }
.onshore-hub .hub-card span { margin-top: auto; padding-top: 24px; color: var(--card-accent); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.onshore-hub .hub-card:hover img,
.onshore-hub .hub-card:focus-visible img { filter: saturate(.95) contrast(1.05); transform: scale(1.045); }
.onshore-hub .hub-card:focus-visible { outline: 3px solid var(--card-accent); outline-offset: -3px; }
.onshore-hub .hub-card.biodiesel { --card-accent: #648e41; }.onshore-hub .hub-card.lobster { --card-accent: #158d83; }.onshore-hub .hub-card.brewdog { --card-accent: #a66b16; }.onshore-hub .hub-card.subdrill { --card-accent: #7153ad; }
.onshore-hub footer { display: flex; justify-content: space-between; gap: 24px; padding: 28px 5vw; background: #02131f; color: #8fa2ad; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }

/* Keep collection-style sector pages on the same horizontal rhythm as the
   main and Onshore landing pages. */
.portfolio-hub .hub-copy {
  padding-inline-start: var(--landing-content-gutter);
  padding-inline-end: clamp(1.5rem, 4vw, 2.5rem);
}
.portfolio-hub .case-collection { padding-inline: var(--landing-content-gutter); }
.portfolio-hub > footer { padding-inline: var(--landing-content-gutter); }

/* Onshore uses the homepage composition with its own system palette. */
.onshore-landing { --index-accent: var(--accent); }
.onshore-landing .landing-shell {
  background:
    radial-gradient(circle at 78% 46%, rgb(var(--accent-rgb) / 10%), transparent 31rem),
    linear-gradient(122deg, #031522 0%, #041b2c 54%, #061d2d 100%);
}
.onshore-landing .ambient-grid {
  background-image:
    linear-gradient(rgb(var(--accent-rgb) / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--accent-rgb) / 8%) 1px, transparent 1px);
}
.onshore-landing .hero-copy { container-type: inline-size; }
.onshore-landing .hero h1 {
  font-size: clamp(2.5rem, 4.6vw, 5.25rem);
  overflow-wrap: normal;
  word-break: normal;
}
@supports (width: 1cqi) {
  .portfolio-hub h1 { font-size: clamp(3.5rem, 18cqi, 8rem); }
  .onshore-landing .hero h1 { font-size: clamp(2.5rem, 12.5cqi, 5.25rem); }
}
.onshore-landing .case-study-grid { background: rgb(var(--accent-rgb) / 24%); }
.onshore-landing .biodiesel-action,
.onshore-landing .biodiesel-card,
.onshore-landing .biodiesel-metric {
  --system-accent: var(--case-green);
  --system-accent-soft: rgb(var(--case-green-rgb) / 11%);
  --system-accent-border: rgb(var(--case-green-rgb) / 58%);
}
.onshore-landing .lobster-action,
.onshore-landing .lobster-card,
.onshore-landing .lobster-metric {
  --system-accent: var(--case-teal);
  --system-accent-soft: rgb(var(--case-teal-rgb) / 11%);
  --system-accent-border: rgb(var(--case-teal-rgb) / 58%);
}
.onshore-landing .brewdog-action,
.onshore-landing .brewdog-card,
.onshore-landing .brewdog-metric {
  --system-accent: var(--case-gold);
  --system-accent-soft: rgb(var(--case-gold-rgb) / 11%);
  --system-accent-border: rgb(var(--case-gold-rgb) / 58%);
}
.onshore-landing .subdrill-action,
.onshore-landing .subdrill-card,
.onshore-landing .subdrill-metric {
  --system-accent: var(--case-violet);
  --system-accent-soft: rgb(var(--case-violet-rgb) / 11%);
  --system-accent-border: rgb(var(--case-violet-rgb) / 58%);
}
.onshore-landing .landing-shell > footer {
  padding: 1.8rem clamp(1.25rem, 6vw, 7rem);
  border-top: 1px solid rgb(159 181 194 / 13%);
}

/* Renewables uses the homepage project layout with one shared section accent. */
.renewables-landing { --index-accent: var(--case-green); }
.renewables-landing .landing-shell {
  background:
    radial-gradient(circle at 78% 46%, rgb(var(--case-green-rgb) / 10%), transparent 31rem),
    linear-gradient(122deg, #031522 0%, #041b2c 54%, #061d2d 100%);
}
.renewables-landing .ambient-grid {
  background-image:
    linear-gradient(rgb(var(--case-green-rgb) / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--case-green-rgb) / 8%) 1px, transparent 1px);
}
.renewables-landing .hero-copy { container-type: inline-size; }
.renewables-landing .hero h1 {
  font-size: clamp(2.5rem, 4.6vw, 5.25rem);
  overflow-wrap: normal;
  word-break: normal;
}
@supports (width: 1cqi) {
  .renewables-landing .hero h1 { font-size: clamp(2.5rem, 12.5cqi, 5.25rem); }
}
.renewables-landing .case-study-grid { background: rgb(var(--case-green-rgb) / 24%); }
.renewables-landing .solar-action,
.renewables-landing .solar-card,
.renewables-landing .solar-metric {
  --system-accent: var(--case-gold);
  --system-accent-soft: rgb(var(--case-gold-rgb) / 11%);
  --system-accent-border: rgb(var(--case-gold-rgb) / 58%);
}
.renewables-landing .baltic-action,
.renewables-landing .baltic-card,
.renewables-landing .baltic-metric {
  --system-accent: var(--case-cyan);
  --system-accent-soft: rgb(var(--case-cyan-rgb) / 11%);
  --system-accent-border: rgb(var(--case-cyan-rgb) / 58%);
}
.renewables-landing .east-anglia-action,
.renewables-landing .east-anglia-card,
.renewables-landing .east-anglia-metric {
  --system-accent: var(--case-green);
  --system-accent-soft: rgb(var(--case-green-rgb) / 11%);
  --system-accent-border: rgb(var(--case-green-rgb) / 58%);
}
.renewables-landing .odf-action,
.renewables-landing .odf-card,
.renewables-landing .odf-metric {
  --system-accent: var(--case-violet);
  --system-accent-soft: rgb(var(--case-violet-rgb) / 11%);
  --system-accent-border: rgb(var(--case-violet-rgb) / 58%);
}
.renewables-landing .landing-shell > footer {
  padding: 1.8rem clamp(1.25rem, 6vw, 7rem);
  border-top: 1px solid rgb(159 181 194 / 13%);
}

/* Semis + floaters uses the homepage project layout with four documented systems. */
.semis-landing { --index-accent: var(--case-gold); }
.semis-landing .landing-shell {
  background:
    radial-gradient(circle at 78% 46%, rgb(var(--case-gold-rgb) / 10%), transparent 31rem),
    linear-gradient(122deg, #031522 0%, #041b2c 54%, #061d2d 100%);
}
.semis-landing .ambient-grid {
  background-image:
    linear-gradient(rgb(var(--case-gold-rgb) / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--case-gold-rgb) / 8%) 1px, transparent 1px);
}
.semis-landing .hero-copy { container-type: inline-size; }
.semis-landing .hero h1 {
  font-size: clamp(2.5rem, 4.6vw, 5.25rem);
  overflow-wrap: normal;
  word-break: normal;
}
.semis-landing .hero h1 strong {
  width: max-content;
  max-width: 100%;
  font-size: .74em;
  white-space: nowrap;
}
@supports (width: 1cqi) {
  .semis-landing .hero h1 { font-size: clamp(2.5rem, 12.5cqi, 5.25rem); }
  .semis-landing .hero h1 strong { font-size: clamp(1.85rem, 10.5cqi, 4.1rem); }
}
.semis-landing .case-study-grid { background: rgb(var(--case-gold-rgb) / 24%); }
.semis-landing .delivery-strip dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.semis-landing .tender-action,
.semis-landing .tender-card,
.semis-landing .tender-metric {
  --system-accent: var(--case-gold);
  --system-accent-soft: rgb(var(--case-gold-rgb) / 11%);
  --system-accent-border: rgb(var(--case-gold-rgb) / 58%);
}
.semis-landing .leader-action,
.semis-landing .leader-card,
.semis-landing .leader-metric {
  --system-accent: var(--case-cyan);
  --system-accent-soft: rgb(var(--case-cyan-rgb) / 11%);
  --system-accent-border: rgb(var(--case-cyan-rgb) / 58%);
}
.semis-landing .rms-action,
.semis-landing .rms-card,
.semis-landing .rms-metric {
  --system-accent: var(--case-violet);
  --system-accent-soft: rgb(var(--case-violet-rgb) / 11%);
  --system-accent-border: rgb(var(--case-violet-rgb) / 58%);
}
.semis-landing .esd-action,
.semis-landing .esd-card,
.semis-landing .esd-metric {
  --system-accent: var(--case-warm-red);
  --system-accent-soft: rgb(var(--case-warm-red-rgb) / 11%);
  --system-accent-border: rgb(var(--case-warm-red-rgb) / 58%);
}
.semis-landing .tender-card img { object-position: 54% center; }
.semis-landing .leader-card img { object-position: 54% center; }
.semis-landing .landing-shell > footer {
  padding: 1.8rem clamp(1.25rem, 6vw, 7rem);
  border-top: 1px solid rgb(159 181 194 / 13%);
}

/* Marine + other uses the homepage composition with five documented systems. */
.marine-landing { --index-accent: var(--case-cyan); }
.marine-landing .landing-shell {
  background:
    radial-gradient(circle at 78% 46%, rgb(var(--case-cyan-rgb) / 10%), transparent 31rem),
    linear-gradient(122deg, #031522 0%, #041b2c 54%, #061d2d 100%);
}
.marine-landing .ambient-grid {
  background-image:
    linear-gradient(rgb(var(--case-cyan-rgb) / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--case-cyan-rgb) / 8%) 1px, transparent 1px);
}
.marine-landing .hero-copy { container-type: inline-size; }
.marine-landing .hero h1 { font-size: clamp(2.5rem, 4.6vw, 5.25rem); overflow-wrap: normal; word-break: normal; }
@supports (width: 1cqi) {
  .marine-landing .hero h1 { font-size: clamp(2.5rem, 12.5cqi, 5.25rem); }
}
.marine-landing .case-study-grid {
  min-height: 885px;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  background: rgb(var(--case-cyan-rgb) / 24%);
}
.marine-landing .patriot-card { grid-column: 1 / -1; }
.marine-landing .delivery-strip { grid-template-columns: .5fr 2fr .5fr; }
.marine-landing .delivery-strip dl { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.marine-landing .malin-action,
.marine-landing .malin-card,
.marine-landing .malin-metric { --system-accent: var(--case-cyan); --system-accent-soft: rgb(var(--case-cyan-rgb) / 11%); --system-accent-border: rgb(var(--case-cyan-rgb) / 58%); }
.marine-landing .mining-action,
.marine-landing .mining-card,
.marine-landing .mining-metric { --system-accent: var(--case-teal); --system-accent-soft: rgb(var(--case-teal-rgb) / 11%); --system-accent-border: rgb(var(--case-teal-rgb) / 58%); }
.marine-landing .reeler-action,
.marine-landing .reeler-card,
.marine-landing .reeler-metric { --system-accent: var(--case-green); --system-accent-soft: rgb(var(--case-green-rgb) / 11%); --system-accent-border: rgb(var(--case-green-rgb) / 58%); }
.marine-landing .hpu-action,
.marine-landing .hpu-card,
.marine-landing .hpu-metric { --system-accent: var(--case-warm-red); --system-accent-soft: rgb(var(--case-warm-red-rgb) / 11%); --system-accent-border: rgb(var(--case-warm-red-rgb) / 58%); }
.marine-landing .patriot-action,
.marine-landing .patriot-card,
.marine-landing .patriot-metric { --system-accent: var(--case-violet); --system-accent-soft: rgb(var(--case-violet-rgb) / 11%); --system-accent-border: rgb(var(--case-violet-rgb) / 58%); }
.marine-landing .malin-card img { object-position: 58% center; }
.marine-landing .patriot-card img { object-position: center 52%; }

.portfolio-hub .hub-card { min-height: 315px; }
.portfolio-hub .hub-card.portfolio-note { display: flex; min-height: 315px; padding: 38px; background: linear-gradient(145deg, #e5e1d8, #f3f0e8); }
.portfolio-hub .portfolio-note > div { padding: 0; }
.portfolio-hub .portfolio-note h3 { max-width: 430px; }
.portfolio-hub .portfolio-note::before { width: 64px; height: 3px; margin-bottom: auto; background: var(--card-accent, var(--accent)); content: ""; }
.portfolio-hub .portfolio-note small { margin-top: auto; }
.portfolio-case .project-proof { display: grid; grid-template-columns: minmax(0, .94fr) minmax(320px, .76fr); gap: clamp(40px, 8vw, 135px); padding: clamp(85px, 10vw, 140px) 8vw; background: #e9e6de; color: #193c4d; }
.portfolio-case .project-proof figure { margin: 0; }
.portfolio-case .project-proof img { display: block; width: 100%; max-height: 650px; object-fit: cover; }
.portfolio-case .project-proof video { display: block; width: 100%; max-height: 650px; object-fit: cover; }
.portfolio-case .project-proof figcaption { margin-top: 13px; color: #64747b; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-case .project-proof h2 { margin: 0; color: var(--ink); font-size: clamp(44px, 5.1vw, 77px); letter-spacing: -.055em; line-height: .98; }
.portfolio-case .project-proof p:not(.section-label) { max-width: 510px; margin: 34px 0; font-size: 1.05rem; line-height: 1.7; }
.portfolio-case .project-proof ul { display: grid; gap: 15px; margin: 0; padding: 24px 0 0; border-top: 1px solid #aab7b9; list-style: none; }
.portfolio-case .project-proof li { position: relative; padding-left: 20px; line-height: 1.52; }
.portfolio-case .project-proof li::before { position: absolute; left: 0; color: var(--accent); content: "+"; }

.geothermal-daq-case .geo-daq-gallery {
  display: grid;
  grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr);
  gap: clamp(40px, 8vw, 130px);
  padding: clamp(85px, 10vw, 140px) 8vw;
  background: #082330;
  color: #fff;
}
.geothermal-daq-case .geo-daq-gallery h2 { max-width: 520px; margin: 0; font-size: clamp(44px, 5.1vw, 77px); letter-spacing: -.055em; line-height: .98; }
.geothermal-daq-case .geo-daq-gallery .section-label { color: var(--accent); }
.geothermal-daq-case .geo-daq-gallery-intro > p:last-child { max-width: 440px; margin: 32px 0 0; color: #c6d4dc; font-size: 1.03rem; line-height: 1.65; }
.geothermal-daq-case .geo-daq-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.geothermal-daq-case .geo-daq-gallery figure { display: grid; grid-template-rows: clamp(190px, 17vw, 280px) auto; min-width: 0; margin: 0; }
.geothermal-daq-case .geo-daq-gallery img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; filter: saturate(.84) contrast(1.06); }
.geothermal-daq-case .geo-daq-gallery figcaption { margin-top: 13px; color: #a9bdc7; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.vfd-reeler-case .reeler-gallery {
  display: grid;
  gap: clamp(42px, 6vw, 90px);
  padding: clamp(85px, 10vw, 140px) 8vw;
  background: #082330;
  color: #fff;
}
.vfd-reeler-case .reeler-gallery-intro { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(280px, 1fr); column-gap: clamp(40px, 8vw, 130px); align-items: end; }
.vfd-reeler-case .reeler-gallery h2 { max-width: 650px; margin: 0; font-size: clamp(44px, 5.1vw, 77px); letter-spacing: -.055em; line-height: .98; }
.vfd-reeler-case .reeler-gallery .section-label { color: var(--accent); }
.vfd-reeler-case .reeler-gallery-intro > p:last-child { max-width: 520px; margin: 0; color: #c6d4dc; font-size: 1.03rem; line-height: 1.65; }
.vfd-reeler-case .reeler-gallery-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 20px; align-items: start; }
.vfd-reeler-case .reeler-gallery figure { display: grid; grid-template-rows: clamp(220px, 24vw, 390px) auto; min-width: 0; margin: 0; }
.vfd-reeler-case .reeler-gallery img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; filter: saturate(.84) contrast(1.06); }
.vfd-reeler-case .reeler-gallery figcaption { margin-top: 13px; color: #a9bdc7; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.portfolio-case .project-gallery {
  display: grid;
  gap: clamp(42px, 6vw, 90px);
  padding: clamp(85px, 10vw, 140px) 8vw;
  background: #082330;
  color: #fff;
}
.portfolio-case .project-gallery-intro { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(280px, 1fr); column-gap: clamp(40px, 8vw, 130px); align-items: end; }
.portfolio-case .project-gallery h2 { max-width: 650px; margin: 0; font-size: clamp(44px, 5.1vw, 77px); letter-spacing: -.055em; line-height: .98; }
.portfolio-case .project-gallery .section-label { color: var(--accent); }
.portfolio-case .project-gallery-intro > p:last-child { max-width: 520px; margin: 0; color: #c6d4dc; font-size: 1.03rem; line-height: 1.65; }
.portfolio-case .project-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.portfolio-case .project-gallery-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-case .project-gallery-grid.one-up { grid-template-columns: minmax(0, 1fr); }
.portfolio-case .project-gallery-grid.one-up figure { grid-template-rows: clamp(320px, 48vw, 680px) auto; }
.portfolio-case .project-gallery figure { display: grid; grid-template-rows: clamp(220px, 24vw, 390px) auto; min-width: 0; margin: 0; }
.portfolio-case .project-gallery img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; filter: saturate(.84) contrast(1.06); }
.portfolio-case .project-gallery figcaption { margin-top: 13px; color: #a9bdc7; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 1180px) {
  .marine-landing .delivery-strip { grid-template-columns: .45fr 1.55fr; }
}

@media (max-width: 900px) {
  .portfolio-case .project-proof { grid-template-columns: 1fr; }
  .geothermal-daq-case .geo-daq-gallery { grid-template-columns: 1fr; }
  .vfd-reeler-case .reeler-gallery-intro { grid-template-columns: 1fr; row-gap: 28px; }
  .vfd-reeler-case .reeler-gallery-grid { grid-template-columns: 1fr 1fr; }
  .vfd-reeler-case .reeler-gallery-grid figure:first-child { grid-column: 1 / -1; }
  .portfolio-case .project-gallery-intro { grid-template-columns: 1fr; row-gap: 28px; }
  .portfolio-case .project-gallery-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-case .project-gallery-grid figure:first-child { grid-column: 1 / -1; }
  .portfolio-case .project-gallery-grid.two-up figure:first-child { grid-column: auto; }
}

@media (max-width: 640px) {
  .geothermal-daq-case .geo-daq-gallery-grid { grid-template-columns: 1fr; }
  .geothermal-daq-case .geo-daq-gallery figure { grid-template-rows: clamp(220px, 58vw, 320px) auto; }
  .vfd-reeler-case .reeler-gallery-grid { grid-template-columns: 1fr; }
  .vfd-reeler-case .reeler-gallery-grid figure:first-child { grid-column: auto; }
  .vfd-reeler-case .reeler-gallery figure { grid-template-rows: clamp(220px, 62vw, 340px) auto; }
  .portfolio-case .project-gallery-grid { grid-template-columns: 1fr; }
  .portfolio-case .project-gallery-grid figure:first-child { grid-column: auto; }
  .portfolio-case .project-gallery figure { grid-template-rows: clamp(220px, 62vw, 340px) auto; }
}

@media (max-width: 1050px) {
  .onshore-case .onshore-delivery { grid-template-columns: 1fr; }
  .onshore-case .scope-panel { min-height: 480px; border-top: 1px solid #294351; border-left: 0; }
  .onshore-hub .hub-hero { grid-template-columns: 1fr; }
  .onshore-hub .hub-hero-visual { min-height: 340px; }
}

@media (max-width: 900px) {
  .onshore-case .hero { grid-template-rows: auto 420px; min-height: 0; height: auto; }
  .onshore-case .hero-copy { min-height: 470px; padding-bottom: 65px; }
}

@media (max-width: 700px) {
  .onshore-case .image-map { min-height: 430px; }
  .onshore-case .delivery-list li { min-height: 170px; padding: 23px 18px; }
  .onshore-case .delivery-list strong { font-size: 1.5rem; }
  .onshore-case .case-next { display: grid; width: min(100%, 290px); margin-inline: auto; }
  .onshore-case .case-next a { width: 100%; }
  .onshore-hub .hub-header { flex-wrap: wrap; gap: 0; min-height: 82px; padding: 8px 20px 0; }
  .onshore-hub .hub-header nav { display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; gap: 2px; border-top: 1px solid rgb(255 255 255 / 12%); font-size: .62rem; }
  .onshore-hub .hub-header nav a { padding: 10px 4px; }
  .onshore-hub .hub-brand { width: min(255px, 70vw); }
  .onshore-hub .sector-nav { padding-inline: 20px; }
  .onshore-hub .hub-copy { padding: 76px 24px; }
  .onshore-hub h1 { font-size: clamp(2.7rem, 10vw, 4.5rem); }
  .onshore-hub .collection-heading { display: block; }
  .onshore-hub .collection-heading > span { display: block; margin-top: 22px; }
  .onshore-hub .case-collection { padding: 70px 0 0; }
  .onshore-hub .collection-heading { padding: 0 24px; }
  .onshore-hub .case-grid { grid-template-columns: 1fr; border-left: 0; }
  .onshore-hub .hub-card { grid-template-columns: 1fr; min-height: 0; border-right: 0; }
  .onshore-hub .hub-card img { height: 220px; min-height: 0; }
  .onshore-hub .hub-card > div { min-height: 220px; padding: 25px 24px; }
  .portfolio-hub .hub-card.portfolio-note > div { min-height: 0; padding: 0; }
  .onshore-hub .hub-card h3 { font-size: 2.35rem; overflow-wrap: normal; word-break: normal; }
  .onshore-hub .hub-card p { font-size: .82rem; }
  .onshore-hub footer { flex-direction: column; padding: 26px 24px; }
  .portfolio-hub .hub-copy { padding: 76px 1.25rem; }
  .portfolio-hub .collection-heading { padding-inline: 1.25rem; }
  .portfolio-hub > footer { padding-inline: 1.25rem; }
}

@media (max-width: 560px) {
  .onshore-case .hero { grid-template-rows: auto 370px; }
  .onshore-case .hero-copy { min-height: 440px; }
}

@media (max-width: 1050px) {
  .portfolio-hub h1 { font-size: clamp(3.5rem, 6.8vw, 8rem); }
}

@media (max-width: 820px) {
  .marine-landing .case-study-grid { min-height: 1900px; grid-template-rows: repeat(5, minmax(0, 1fr)); }
  .marine-landing .patriot-card { grid-column: auto; }
  .marine-landing .delivery-strip dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-hub h1 { font-size: clamp(3.85rem, 19vw, 6.1rem); }
  .onshore-hub .hub-kicker { margin-bottom: 1.45rem; font-size: .62rem; }
  .onshore-hub .hub-copy > p:last-child { margin-top: 1.3rem; font-size: 1rem; }
}

@media (max-width: 480px) {
  .marine-landing .case-study-grid { min-height: 1700px; }
}

@media (prefers-reduced-motion: reduce) {
  .onshore-case .image-map > img,
  .onshore-case .scope-panel > *,
  .onshore-hub .hub-card img { transition: none; }
}