.detail-page { background: #fff; }
.detail-heading { padding: 42px 0 64px; border-bottom: 1px solid #dce5ea; background: linear-gradient(115deg,#fff 60%,#edf4f7); }
.detail-back { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid #014468; color: #014468; font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.detail-back:hover { color: #001d2c; }
.detail-heading-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(250px,.65fr); align-items: end; gap: 50px; margin-top: 70px; }
.detail-heading h1,.detail-missing h1 { margin: 20px 0 0; font-family: var(--display); font-size: clamp(4.2rem,7vw,7.8rem); font-weight: 900; line-height: .96; letter-spacing: -.035em; text-transform: uppercase; overflow-wrap: anywhere; }
.detail-heading-grid p { max-width: 400px; margin: 0 0 6px; color: #375568; font-size: 1.08rem; }
.detail-content { padding: 70px 0 120px; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(340px,.82fr); gap: clamp(35px,5vw,86px); align-items: start; }
.detail-gallery,.detail-information { min-width: 0; }
.detail-main-photo { position: relative; display: grid; place-items: center; height: clamp(400px,46vw,660px); overflow: hidden; background: #edf2f5; }
.detail-main-photo img { width: 100%; height: 100%; object-fit: contain; }
.detail-photo-count { position: absolute; right: 20px; bottom: 20px; padding: 10px 14px; background: rgba(0,29,44,.9); color: #fff; font-size: .76rem; font-weight: 800; letter-spacing: .13em; }
.detail-thumbs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-top: 12px; }
.detail-thumb { display: block; width: 100%; aspect-ratio: 1.32; padding: 0; border: 2px solid transparent; background: #e7eef2; overflow: hidden; }
.detail-thumb.active,.detail-thumb:focus-visible { border-color: #014468; outline: 2px solid #fff; outline-offset: -5px; }
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.detail-thumb:hover img { transform: scale(1.05); }
.detail-photo-note,.detail-technical-note { margin: 14px 0 0; color: #587180; font-size: .83rem; }
.detail-information h2 { margin: 14px 0 32px; font-family: var(--display); font-size: clamp(3.2rem,4vw,5rem); line-height: 1; letter-spacing: -.02em; }
.detail-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid #dce5ea; }
.detail-facts>div { display: flex; flex-direction: column; gap: 5px; min-height: 94px; padding: 19px 12px 16px 0; border-bottom: 1px solid #dce5ea; }
.detail-facts>div:nth-child(even) { padding-left: 22px; border-left: 1px solid #dce5ea; }
.detail-facts span { color: #627c8a; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.detail-facts strong { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.detail-quote { margin-top: 38px; padding: 32px; background: #014468; color: #fff; }
.detail-quote .eyebrow { color: #bbdeef; }
.detail-quote h3 { margin: 13px 0 10px; font-family: var(--display); font-size: clamp(2.7rem,3.5vw,4rem); line-height: 1; }
.detail-quote p { max-width: 380px; color: #d5e6ee; }
.detail-quote .button-primary { margin-top: 8px; background: #fff; color: #001d2c; }
.detail-quote .button-primary:hover { background: #e5f2f8; color: #001d2c; }
.detail-missing { min-height: 56vh; padding-top: 90px; padding-bottom: 110px; }
.detail-missing p { margin: 26px 0; color: #4b6979; }
@media (max-width: 980px) {
  .detail-heading-grid { gap: 28px; margin-top: 45px; }
  .detail-layout { grid-template-columns: 1fr; gap: 55px; }
  .detail-main-photo { height: min(68vw,620px); }
}
@media (max-width: 600px) {
  .detail-heading { padding: 28px 0 48px; }
  .detail-heading-grid { display: block; margin-top: 45px; }
  .detail-heading h1 { font-size: clamp(3.8rem,15vw,6rem); }
  .detail-heading-grid p { margin-top: 28px; font-size: 1rem; }
  .detail-content { padding: 35px 0 80px; }
  .detail-layout { gap: 44px; }
  .detail-main-photo { height: 75vw; min-height: 290px; }
  .detail-thumbs { gap: 6px; margin-top: 7px; }
  .detail-information h2 { font-size: 3.7rem; }
  .detail-facts>div { min-height: 86px; }
  .detail-facts>div:nth-child(even) { padding-left: 12px; }
  .detail-facts strong { font-size: .93rem; }
  .detail-quote { padding: 26px 22px; }
  .detail-quote .button { width: 100%; padding-inline: 10px; }
}