/* Reusable SFPS interior-page system. Keep page-specific gallery rules separate. */
.subpage {
  background: #020711;
  color: #f2f6fa;
}

.subpage .site-header { position: absolute; }
.subpage .nav-list a[aria-current="page"] { color: #7dd1ff; }
.subpage .nav-list a[aria-current="page"]::after { width: 100%; background: #15a3ff; }

.subpage-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(34rem, 39vw, 39.5rem);
  overflow: hidden;
  padding: clamp(7.25rem, 7.5vw, 8rem) 0 clamp(2.2rem, 2.6vw, 2.8rem);
  border-bottom: 1px solid #294969;
  background-color: #020711;
  background-image:
    linear-gradient(90deg, rgb(2 7 17 / .96) 0 37%, rgb(2 8 19 / .76) 57%, rgb(1 7 17 / .9) 100%),
    radial-gradient(circle at 77% 44%, rgb(0 132 240 / .22), transparent 27rem),
    url("../sfps-hero-background-1672.webp");
  background-position: center, center, center 38%;
  background-size: cover;
}
.subpage-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .32;
  background-image:
    linear-gradient(rgb(72 129 180 / .18) 1px, transparent 1px),
    linear-gradient(90deg, rgb(72 129 180 / .18) 1px, transparent 1px),
    linear-gradient(137deg, transparent 0 52%, rgb(23 143 230 / .2) 52.1% 52.25%, transparent 52.35%);
  background-size: 3.5rem 3.5rem, 3.5rem 3.5rem, 100% 100%;
  mask-image: linear-gradient(90deg, #000, rgb(0 0 0 / .35) 47%, #000);
}
.subpage-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: -5.5rem;
  left: 0;
  height: 12rem;
  border-top: 1px solid rgb(54 137 204 / .32);
  background:
    repeating-linear-gradient(90deg, transparent 0 7rem, rgb(66 127 181 / .15) 7rem calc(7rem + 1px)),
    linear-gradient(180deg, transparent, rgb(3 35 68 / .48));
  transform: perspective(23rem) rotateX(56deg) scaleX(1.2);
  transform-origin: bottom;
}
.subpage-hero-grid { position: absolute; inset: 0; pointer-events: none; }
.subpage-hero-grid::before {
  content: "";
  position: absolute;
  top: 5.35rem;
  bottom: 0;
  left: max(1.5rem, calc((100% - 88rem) / 2));
  width: .2rem;
  background: linear-gradient(transparent, #159fff 24% 72%, transparent);
  box-shadow: 0 0 .7rem rgb(0 151 255 / .55);
}
.subpage-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 25rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
  align-items: center;
  gap: clamp(2rem, 3vw, 4rem);
}
.subpage-hero-copy { min-width: 0; padding-left: clamp(1.1rem, 2.2vw, 2rem); }
.subpage-eyebrow {
  margin: 0 0 1rem;
  color: #63c5ff;
  font: 900 .76rem/1.3 Arial, sans-serif;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-shadow: 0 0 .7rem rgb(0 151 255 / .5);
}
.subpage-eyebrow::before { content: ""; display: inline-block; width: 1.5rem; height: .13rem; margin-right: .65rem; background: #15a3ff; box-shadow: 0 0 .55rem #008ff0; vertical-align: .22em; }
.dimensional-title { margin: 0; font-family: var(--heading); font-style: italic; font-weight: 950; line-height: .82; letter-spacing: -.04em; text-transform: uppercase; transform: skewX(-2deg); transform-origin: left; }
.dimensional-title > span { display: block; }
.dimensional-title-silver {
  color: #eef3f7;
  background: linear-gradient(180deg, #fff 0 15%, #9ba8b4 35%, #fbfdff 54%, #7d8a98 78%, #eef3f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #e8f1f8;
  text-shadow: .06em .08em 0 #02050a, 0 0 .65rem rgb(51 145 221 / .2);
}
.dimensional-title-blue {
  color: #159fff;
  background: linear-gradient(180deg, #82d8ff 0 10%, #159fff 35%, #0056ac 64%, #009af7 82%, #00396f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #39b7ff;
  text-shadow: .06em .09em 0 #001c38, 0 0 .75rem rgb(0 147 255 / .48);
}
.subpage-hero .dimensional-title { width: calc(100% + .5rem); max-width: none; font-size: clamp(3.25rem, 3.65vw, 4.35rem); }
.subpage-lede { max-width: 36rem; margin: 1.5rem 0 0; color: #d0dbe6; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.62; }
.subpage-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .85rem; margin-top: 1.65rem; }
.subpage-actions .button { min-height: 3.75rem; padding-inline: 1.55rem; }
.subpage-call {
  display: flex;
  min-width: 12rem;
  min-height: 3.75rem;
  flex-direction: column;
  justify-content: center;
  padding: .6rem 1.15rem .55rem 1.35rem;
  border: 1px solid #627b94;
  border-left: .22rem solid #159fff;
  clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% .7rem, 100% 100%, 0 100%);
  color: #f4f7fa;
  background: linear-gradient(110deg, #0a1c30, #030b17);
  text-decoration: none;
  text-transform: uppercase;
}
.subpage-call span { color: #8ed6ff; font-size: .6rem; font-weight: 900; letter-spacing: .16em; }
.subpage-call strong { font-size: .82rem; letter-spacing: .08em; }
.subpage-call:hover { border-color: #72caff; background: #0b2742; }
.subpage-call:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.armored-frame {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 2.15rem .55rem .55rem;
  border: 1px solid #71869a;
  outline: 1px solid #0d8ee6;
  outline-offset: -.32rem;
  clip-path: polygon(1rem 0, calc(100% - .85rem) 0, 100% .85rem, 100% calc(100% - .7rem), calc(100% - .7rem) 100%, .7rem 100%, 0 calc(100% - .7rem), 0 1rem);
  background:
    linear-gradient(90deg, #159fff 0 .16rem, transparent .17rem calc(100% - .17rem), #147fd0 calc(100% - .16rem)),
    repeating-linear-gradient(90deg, rgb(129 164 194 / .03) 0 1px, transparent 1px 3rem),
    #06101b;
  box-shadow: 0 1.4rem 2.4rem rgb(0 0 0 / .58), 0 0 1rem rgb(0 132 235 / .2);
}
.subpage-visual { width: min(100%, 40rem); justify-self: end; }
.armored-frame::before { content: "Project field / 01"; position: absolute; top: .55rem; left: 1.4rem; color: #82d6ff; font: 900 .62rem/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.armored-frame::after { content: ""; position: absolute; top: 0; right: 12%; width: 28%; height: .18rem; background: #2bb1ff; box-shadow: 0 0 .75rem #008ff4; }
.armored-frame-number { position: absolute; z-index: 3; top: 2.55rem; left: .95rem; padding: .18rem .55rem; color: #55bdff; background: #06111f; font: 900 1rem/1 var(--heading); text-shadow: 0 0 .5rem #008cff; }
.armored-frame-media {
  position: relative;
  overflow: hidden;
  border: .17rem solid #8496a7;
  outline: 1px solid #172a3d;
  clip-path: polygon(0 .8rem, .8rem 0, calc(100% - .8rem) 0, 100% .8rem, 100% calc(100% - .55rem), calc(100% - .55rem) 100%, .55rem 100%, 0 calc(100% - .55rem));
  background: #020711;
  box-shadow: 0 0 0 .2rem #071321, 0 .75rem 1.2rem #000;
}
.armored-frame-media::after { content: ""; position: absolute; inset: 0; border-top: 2px solid rgb(106 201 255 / .74); box-shadow: inset 0 -2.4rem 3rem rgb(0 5 12 / .2); pointer-events: none; }
.armored-frame-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
.armored-frame figcaption { display: flex; min-height: 2.55rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .85rem .15rem 1.35rem; color: #d8e1e9; font: 850 .62rem/1.35 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.armored-frame figcaption span:last-child { color: #73cdff; }

@media (max-width: 68rem) {
  .subpage-hero-layout { grid-template-columns: minmax(23rem, .9fr) minmax(27rem, 1.1fr); gap: 1.8rem; }
  .subpage-hero .dimensional-title { font-size: clamp(3rem, 4.7vw, 4rem); }
}

@media (max-width: 60rem) {
  .subpage-hero { padding-top: 8rem; padding-bottom: 3.5rem; }
  .subpage-hero-layout { display: flex; min-height: 0; flex-direction: column; align-items: stretch; gap: 2.4rem; }
  .subpage-hero-copy { padding-left: 0; }
  .subpage-hero .dimensional-title { width: 100%; max-width: none; font-size: clamp(3.4rem, 7.5vw, 4.6rem); }
  .subpage-visual { width: min(100%, 44rem); align-self: center; }
}

@media (max-width: 47.5rem) {
  .subpage-hero { min-height: 0; padding: 7rem 0 3.6rem; background-position: center, center, 58% center; }
  .subpage-hero::after { height: 8rem; }
  .subpage-hero-layout { display: flex; min-height: 0; flex-direction: column; align-items: stretch; gap: 2.3rem; }
  .subpage-hero-copy { padding-left: 0; }
  .subpage-hero .dimensional-title { max-width: none; font-size: clamp(1.85rem, 9.2vw, 3rem); }
  .subpage-lede { margin-top: 1.25rem; font-size: 1rem; }
  .subpage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1.4rem; }
  .subpage-actions .button { width: auto; min-width: 0; padding-inline: .8rem; font-size: .7rem; }
  .subpage-call { min-width: 0; padding-inline: 1rem; }
  .subpage-visual { order: 2; }
  .armored-frame { padding: 1.95rem .45rem .45rem; }
  .armored-frame::before { top: .52rem; left: 1.15rem; }
  .armored-frame-media img { aspect-ratio: 16 / 10; }
  .armored-frame figcaption { display: block; padding: .6rem .75rem .25rem 1.2rem; }
  .armored-frame figcaption span { display: block; }
  .armored-frame figcaption span:last-child { margin-top: .1rem; }
}

@media (max-width: 23rem) {
  .subpage-actions { grid-template-columns: 1fr; }
}

@media (forced-colors: active) {
  .dimensional-title-silver,
  .dimensional-title-blue { -webkit-text-fill-color: CanvasText; -webkit-text-stroke: 0; }
  .armored-frame,
  .armored-frame-media,
  .subpage-call { border: 2px solid CanvasText; }
}