.material-outcome { margin: 0 0 34px; padding: 18px 20px 20px; border-left: 3px solid var(--lime); background: rgba(185,215,104,.08); }.material-outcome span { color: var(--lime); font: 9px "DM Mono", monospace; letter-spacing: .5px; }.material-outcome p { max-width: 620px; margin: 11px 0 0; color: var(--paper); font-size: 13px; line-height: 1.6; }
.field-imagery {
  display: grid;
  grid-template-columns: 1.05fr .9fr .9fr .9fr;
  gap: 18px;
  align-items: end;
  padding: 96px clamp(22px, 6vw, 92px);
  background: #dce5de;
}

.field-heading {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 22px 15px 0;
}

.field-heading h2 {
  margin: 70px 0 24px;
  font: 600 clamp(34px, 3.7vw, 54px) / 1.03 "Source Serif 4", serif;
}

.field-heading h2 em { color: var(--red); }
.field-heading > p:last-child { max-width: 340px; margin: 0; font-size: 13px; }

.field-card { margin: 0; overflow: hidden; background: var(--ink); }
.field-card img { display: block; width: 100%; height: 350px; object-fit: cover; filter: saturate(.75) contrast(1.07); transition: transform .6s ease, filter .6s ease; }
.field-card:hover img { transform: scale(1.045); filter: saturate(1) contrast(1.02); }
.dam-card img { object-position: center; }
.foundation-card { transform: translateY(40px); }
.foundation-card img { object-position: center; }
.tunnel-card { transform: translateY(76px); }
.tunnel-section { height: 350px; position: relative; overflow: hidden; background: #203943; }
.section-title { position: absolute; top: 16px; left: 15px; z-index: 2; color: var(--lime); font: 9px "DM Mono", monospace; letter-spacing: .6px; }
.ground-layer { position: absolute; left: -10%; width: 120%; border-top: 1px solid rgba(185,215,104,.65); transform: rotate(-8deg); }
.layer-one { top: 91px; }.layer-two { top: 144px; transform: rotate(4deg); }.layer-three { top: 235px; transform: rotate(-4deg); }
.tunnel-outline, .tunnel-lining { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 170px 170px 0 0; }
.tunnel-outline { width: 190px; height: 190px; bottom: 42px; border: 26px solid var(--paper); border-bottom: 0; }
.tunnel-lining { width: 147px; height: 147px; bottom: 42px; border: 2px solid var(--red); border-bottom: 0; }
.tunnel-floor { position: absolute; height: 2px; width: 236px; left: 50%; bottom: 41px; transform: translateX(-50%); background: var(--paper); }
.anchor { position: absolute; width: 65px; height: 1px; background: var(--lime); transform-origin: right center; }
.anchor::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); position: absolute; right: -2px; top: -2px; }.anchor-one { left: 61px; top: 127px; transform: rotate(28deg); }.anchor-two { left: 75px; top: 174px; transform: rotate(8deg); }.anchor-three { right: 61px; top: 127px; transform: rotate(-28deg); }.anchor-four { right: 75px; top: 174px; transform: rotate(-8deg); }
.monitor { position: absolute; width: 7px; height: 7px; background: var(--red); border-radius: 50%; }.monitor-one { left: 50%; top: 113px; }.monitor-two { left: 50%; top: 237px; }
.diagram-label { position: absolute; color: var(--paper); font: 8px/1.25 "DM Mono", monospace; letter-spacing: .35px; }.label-support { left: 16px; bottom: 69px; }.label-anchor { right: 16px; top: 78px; color: var(--lime); }.label-monitor { right: 18px; bottom: 74px; color: var(--red); }
.field-card figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 14px 15px; color: var(--paper); font: 9px "DM Mono", monospace; letter-spacing: .35px; }
.field-card figcaption span:last-child { color: var(--lime); text-align: right; }

.rock-analysis { display: grid; grid-template-columns: 1.15fr .85fr; background: var(--paper); }
.rock-visual { min-height: 510px; position: relative; overflow: hidden; background: #b9d768; }
.rock-title-label { position: absolute; top: 25px; left: 28px; font: 10px "DM Mono", monospace; letter-spacing: .5px; color: var(--ink); }.rock-face { position: absolute; left: 9%; right: 8%; bottom: 9%; height: 70%; background: #2b4650; clip-path: polygon(0 16%, 25% 2%, 49% 10%, 78% 0, 100% 16%, 93% 100%, 0 100%); }.joint { position: absolute; z-index: 1; height: 1px; background: var(--lime); transform-origin: left center; }.joint-a { left: 16%; top: 42%; width: 72%; transform: rotate(18deg); }.joint-b { left: 25%; top: 31%; width: 58%; transform: rotate(54deg); }.joint-c { left: 25%; top: 60%; width: 55%; transform: rotate(-30deg); }.wedge { position: absolute; z-index: 2; left: 41%; top: 43%; width: 118px; height: 130px; background: rgba(228,80,56,.85); clip-path: polygon(50% 0, 100% 90%, 5% 100%); }.bolt { position: absolute; z-index: 3; height: 3px; width: 145px; background: var(--paper); transform-origin: right center; }.bolt::after { content:""; position:absolute; right:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--paper); }.bolt-a { left: 17%; top: 52%; transform: rotate(12deg); }.bolt-b { right: 18%; top: 57%; transform: rotate(166deg); }.sensor { position: absolute; z-index: 4; width: 10px; height: 10px; border-radius:50%; background: var(--lime); border: 2px solid var(--ink); }.sensor-a { left: 51%; top: 40%; }.rock-note { position: absolute; z-index: 5; font: 9px/1.3 "DM Mono", monospace; letter-spacing: .2px; }.note-joint { left: 26px; bottom: 32px; }.note-wedge { right: 32px; top: 96px; color: var(--red); }.note-bolt { right: 22px; bottom: 30px; color: var(--paper); }.rock-copy { padding: 76px clamp(25px, 5vw, 78px); background: var(--ink); color: var(--paper); }.rock-copy .section-label { color: var(--lime); }.rock-copy .section-label span { color: var(--paper); }.rock-copy h2 { margin: 55px 0 21px; font: 600 clamp(40px, 4vw, 62px) / 1.03 "Source Serif 4", serif; }.rock-copy h2 em { color: var(--lime); }.rock-copy > p:not(.section-label) { max-width: 390px; font-size: 14px; color: #c4d0c9; }.rock-copy dl { margin: 37px 0 25px; border-top: 1px solid rgba(242,239,232,.24); }.rock-copy dl div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(242,239,232,.24); font-size: 11px; }.rock-copy dt { color: var(--lime); font-weight: 700; }.rock-copy dd { margin: 0; text-align: right; color: #c4d0c9; }.rock-link { display: inline-block; padding-bottom: 4px; border-bottom: 1px solid var(--paper); font-size: 11px; font-weight: 800; }.rock-link span { color: var(--lime); margin-left: 6px; }

@media (max-width: 760px) {
  .field-imagery { display: block; padding: 70px 25px; }
  .field-heading { display: block; padding: 0; }
  .field-heading h2 { margin: 42px 0 22px; }
  .field-heading > p:last-child { margin-bottom: 38px; }
  .field-card { margin-top: 18px; }
  .field-card img { height: 290px; }
  .tunnel-section { height: 290px; }
  .foundation-card { transform: none; }
  .tunnel-card { transform: none; }
  .rock-analysis { display: block; }.rock-visual { min-height: 390px; }.rock-copy { padding: 65px 25px; }.rock-copy h2 { margin-top: 42px; }
  .material-outcome { padding: 16px; }
}