.detail-hero {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  gap: 18px;
  padding-bottom: 22px;
}

/* Flow order is communicated by numbered steps; decorative arrows are omitted. */
.detail-page .flow-step::after,
.detail-page .process-list li::after {
  display: none !important;
  content: none !important;
}

.detail-hero .hero-media {
  display: block;
  width: 100%;
  margin: 0;
}

.detail-hero .hero-media img {
  height: 260px;
  object-fit: cover;
}

.detail-hero .engineering-hero {
  aspect-ratio: 16 / 9;
  background: #f8fafb;
}

.detail-hero .engineering-hero picture {
  display: block;
  width: 100%;
  height: 100%;
}

.detail-hero .engineering-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.compact-section {
  padding-top: 22px;
  padding-bottom: 22px;
}

.media-list {
  display: grid;
  gap: 12px;
}

.media-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.media-copy {
  padding: 14px 16px;
}

.media-copy h3 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.25;
}

.media-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.media-row img {
  width: 100%;
  height: 100%;
  min-height: 132px;
  object-fit: cover;
  background: #edf2f6;
}

.media-row img.diagram-img {
  height: auto;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  background: #fbfaf4;
}

.flow-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 6px;
  width: min(156px, 100%);
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}

.flow-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -19px;
  color: #ff9a3d;
  font-size: 19px;
  font-weight: 900;
  transform: translateY(-50%);
}

.flow-step img {
  grid-column: 1 / -1;
  width: 100%;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
}

.flow-step b {
  grid-column: 1;
  grid-row: 2;
  color: #ff9a3d;
  font-size: 13px;
  line-height: 1.2;
}

.flow-step strong {
  grid-column: 2;
  grid-row: 2;
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
}

.flow-step span {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
  line-height: 1.35;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.faq-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.faq-card h3 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 18px;
}

.faq-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 1080px) {
  .detail-hero {
    grid-template-columns: 1fr;
  }

  .detail-hero .hero-media {
    max-width: 620px;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .detail-hero .hero-media img {
    height: 210px;
  }

  .detail-hero .engineering-hero img {
    height: 100%;
  }

  .media-row {
    grid-template-columns: 1fr;
  }

  .media-row img {
    height: 160px;
  }

  .media-row img.diagram-img {
    height: auto;
  }

  .flow-wrap {
    gap: 8px 21px;
  }

  .flow-step {
    width: calc(33.333% - 14px);
    padding: 7px;
  }

  .flow-step img {
    height: 48px;
  }
}

@media (max-width: 560px) {
  .flow-step {
    width: calc(50% - 12px);
  }
}

@media (max-width: 380px) {
  .flow-step {
    width: 100%;
  }
}

/* Unified 2026 detail-page composition. */
.detail-jump-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: min(calc(100% - 32px), var(--detail-max));
  margin: 14px auto 4px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.detail-jump-bar > strong {
  color: var(--navy);
  font-size: 14px;
  white-space: nowrap;
}

.detail-jump-bar .detail-sibling-nav {
  flex-wrap: nowrap;
  margin: 0;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.detail-page .focus-section .detail-media-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-page .system-section .detail-media-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-page .focus-section .detail-media-row,
.detail-page .system-section .detail-media-row {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
}

.detail-page .focus-section .detail-media-row figure,
.detail-page .system-section .detail-media-row figure {
  order: -1;
  border-left: 0;
  border-bottom: 1px solid var(--line);
}

.detail-page .focus-section .detail-media-row .media-copy,
.detail-page .system-section .detail-media-row .media-copy {
  min-height: 0;
  padding: 18px;
}

.detail-page .focus-section .detail-media-row img,
.detail-page .system-section .detail-media-row img {
  aspect-ratio: 3 / 2;
}

@media (max-width: 900px) {
  .detail-page .system-section .detail-media-list {
    grid-template-columns: 1fr;
  }

  .detail-page .system-section .detail-media-row {
    grid-template-columns: minmax(190px, .8fr) minmax(0, 1.2fr);
  }

  .detail-page .system-section .detail-media-row figure {
    order: 0;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .detail-jump-bar {
    grid-template-columns: 1fr;
    width: calc(100% - 20px);
    gap: 8px;
    padding: 10px;
  }

  .detail-page .focus-section .detail-media-list,
  .detail-page .system-section .detail-media-list {
    grid-template-columns: 1fr;
  }

  .detail-page .system-section .detail-media-row {
    grid-template-columns: 1fr;
  }

  .detail-page .system-section .detail-media-row figure {
    order: -1;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* Rebuilt detail pages: restrained layout, one honest hero image and one
   page-specific engineering diagram. Legacy selectors above remain for old
   snapshots, while the live pages use the scoped rules below. */
.detail-page {
  --detail-max: 1360px;
  overflow-x: hidden;
}

.detail-page .topbar {
  grid-template-columns: 360px minmax(0, 1fr) auto;
  min-height: 80px;
  padding: 12px max(20px, calc((100vw - var(--detail-max)) / 2));
  z-index: 100;
}

.detail-page .brand {
  gap: 12px;
}

.detail-page .brand-mark {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: none;
}

.detail-page .brand strong {
  white-space: nowrap;
  font-size: 20px;
}

.detail-page .brand-tagline {
  margin-top: 3px;
  font-size: 13px;
}

.detail-page .nav {
  flex-wrap: nowrap;
  gap: clamp(12px, 1.25vw, 19px);
  white-space: nowrap;
}

.detail-page .header-quote {
  width: auto;
  height: 42px;
  min-height: 42px;
  padding: 0 16px;
  white-space: nowrap;
}

.detail-page main > section {
  width: min(calc(100% - 32px), var(--detail-max));
  margin-right: auto;
  margin-left: auto;
}

.detail-page .detail-hero {
  grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr);
  gap: clamp(30px, 4vw, 58px);
  min-height: 450px;
  padding: 44px clamp(18px, 3vw, 42px);
  border-bottom: 1px solid var(--line);
}

.detail-page .detail-hero > .hero-copy {
  display: block;
}

.detail-page .eyebrow {
  margin: 0 0 10px;
  font-size: 14px;
}

.detail-page h1 {
  margin-bottom: 16px;
  white-space: nowrap;
  font-size: clamp(38px, 4.2vw, 58px);
}

.detail-page .lead {
  max-width: 620px;
  font-size: 17px;
}

.detail-sibling-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.detail-sibling-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.detail-sibling-nav a:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.detail-sibling-nav a[aria-current="page"] {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  pointer-events: none;
}

.scenario-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.scenario-list li {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #425464;
  font-size: 13px;
  font-weight: 800;
}

.category-back {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-top: 20px;
  padding: 0 14px;
  border: 1px solid var(--navy);
  border-radius: 6px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 850;
}

.category-back:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.detail-page .hero-media {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: #fff;
  box-shadow: 0 14px 34px rgba(20, 38, 56, .11);
}

.detail-page .hero-media img,
.detail-page .hero-media.engineering-hero img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.detail-page .hero-media.engineering-hero img {
  object-fit: contain;
}

.detail-page .hero-media.complete-hero {
  aspect-ratio: 3 / 2;
}

.detail-page .hero-media.complete-hero img {
  object-fit: contain;
}

.detail-page .hero-media figcaption,
.focus-figure figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .68);
  color: rgba(8, 48, 78, .82);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(3px);
}

.detail-page .detail-section {
  padding: 38px clamp(18px, 3vw, 42px);
}

.detail-page .detail-media-list {
  display: grid;
  gap: 14px;
}

.detail-page .detail-media-row {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(420px, 1.28fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.detail-page .detail-media-row .media-copy {
  display: grid;
  align-content: center;
  min-height: 190px;
  padding: 22px;
}

.detail-page .detail-media-row .media-copy h3 {
  font-size: 21px;
}

.detail-page .detail-media-row figure {
  display: grid;
  margin: 0;
  border-left: 1px solid var(--line);
  background: #fbfaf4;
}

.detail-page .detail-media-row img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.detail-page .detail-media-row.handdrawn-media img {
  aspect-ratio: 3 / 2;
}

.detail-page .system-section .detail-media-row.handdrawn-media img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.detail-page .focus-section .detail-media-row.handdrawn-media img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.detail-page .detail-media-row figcaption {
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.detail-page .photo-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.detail-page .photo-flow .flow-step {
  width: auto;
  min-width: 0;
}

.detail-page .photo-flow .flow-step img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #eef3f6;
}

/* Track and training pages use one visible 3:2 image system at every level. */
.detail-page.section-tracks-training .hero-media,
.detail-page.section-tracks-training .hero-media.complete-hero {
  aspect-ratio: 3 / 2;
}

.detail-page.section-tracks-training .hero-media img,
.detail-page.section-tracks-training .hero-media.engineering-hero img,
.detail-page.section-tracks-training .hero-media.complete-hero img,
.detail-page.section-tracks-training .detail-media-row img,
.detail-page.section-tracks-training .detail-media-row.handdrawn-media img,
.detail-page.section-tracks-training .system-section .detail-media-row.handdrawn-media img,
.detail-page.section-tracks-training .focus-section .detail-media-row.handdrawn-media img,
.detail-page.section-tracks-training .photo-flow .flow-step img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.detail-page .photo-flow .flow-step:not(:last-child)::after {
  right: -10px;
  z-index: 2;
}

.detail-page .photo-flow .flow-step:nth-child(3)::after {
  display: none;
}

.focus-layout {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 22px;
  align-items: stretch;
}

.focus-list,
.process-list,
.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.focus-list {
  display: grid;
  gap: 10px;
}

.focus-list li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  font-weight: 850;
}

.focus-list b {
  color: var(--orange);
  font-size: 13px;
}

.focus-figure {
  position: relative;
  min-height: 320px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf4;
}

.focus-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.system-section {
  background: #eef3f7;
  border-radius: 8px;
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.system-card {
  min-height: 150px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: 8px;
  background: #fff;
}

.system-card h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 20px;
}

.system-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.parameter-section {
  background: #fff;
}

.decision-section {
  background: #eef3f7;
}

.decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.decision-grid article {
  min-height: 132px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: 7px;
  background: #fff;
}

.decision-grid h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.35;
}

.decision-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.parameter-table-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.parameter-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.parameter-table th,
.parameter-table td {
  padding: 13px 15px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.parameter-table th:last-child,
.parameter-table td:last-child {
  border-right: 0;
}

.parameter-table tbody tr:last-child td {
  border-bottom: 0;
}

.parameter-table th {
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
}

.parameter-table th:nth-child(1) { width: 20%; }
.parameter-table th:nth-child(2) { width: 18%; }
.parameter-table th:nth-child(3) { width: 28%; }
.parameter-table th:nth-child(4) { width: 34%; }

.parameter-table td {
  color: #40515f;
  font-size: 13px;
}

.parameter-table tbody tr:nth-child(even) td {
  background: #f7f9fb;
}

.parameter-table td strong {
  color: var(--navy);
  font-size: 14px;
}

.parameter-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.detail-page .process-section {
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.process-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.process-list li {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 92px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px;
  background: rgba(255, 255, 255, .07);
}

.process-list li:not(:last-child)::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: -9px;
  z-index: 2;
  color: #ff9a3d;
  font-size: 26px;
  font-weight: 900;
  transform: translateY(-50%);
}

.process-list b {
  color: #ff9a3d;
  font-size: 13px;
}

.process-list span {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.check-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.check-list li {
  padding: 16px 16px 16px 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #40515f;
  font-size: 14px;
  line-height: 1.65;
}

.check-list li::before {
  content: "✓";
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin: 0 10px 0 -34px;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
}

.reference-links {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.reference-links > strong {
  display: block;
  margin-bottom: 9px;
  color: var(--navy);
  font-size: 14px;
}

.reference-links > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reference-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--navy);
  font-size: 12px;
  line-height: 1.45;
  text-decoration: none;
}

.reference-links a:hover {
  border-color: #f28c28;
}

.reference-links a b {
  flex: 0 0 auto;
  color: #d96f0b;
  font-size: 12px;
}

.reference-links small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.faq-list details {
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.faq-list summary {
  padding: 15px 30px 15px 0;
  color: var(--navy);
  font-size: 17px;
  font-weight: 850;
  cursor: pointer;
}

.faq-list p {
  margin: 0;
  padding: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 1120px) {
  .detail-page .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .detail-page .nav {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 6px;
    overflow-x: visible;
    padding-bottom: 2px;
    white-space: normal;
  }

  .detail-page .nav::-webkit-scrollbar {
    display: none;
  }

  .detail-page .detail-hero {
    grid-template-columns: 1fr;
  }

  .detail-page .hero-media {
    max-width: 880px;
  }

  .process-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .process-list li:nth-child(3)::after {
    display: none;
  }

  .detail-page .detail-media-row {
    grid-template-columns: minmax(220px, .8fr) minmax(360px, 1.2fr);
  }

  .detail-page .photo-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-page .photo-flow .flow-step:nth-child(2n)::after {
    display: none;
  }

  .detail-page .photo-flow .flow-step:nth-child(3)::after {
    display: block;
  }
}

@media (max-width: 760px) {
  .detail-page .topbar {
    position: sticky;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 16px 0;
  }

  .detail-page .brand {
    flex: 0 0 100%;
    padding-right: 76px;
  }

  .detail-page .brand-mark {
    width: 36px;
    height: 36px;
  }

  .detail-page .brand strong {
    font-size: 13px;
  }

  .detail-page .brand-tagline {
    display: none;
  }

  .detail-page .header-quote {
    position: absolute;
    top: 9px;
    right: 16px;
    height: 34px;
    min-height: 34px;
    padding: 0 9px;
    font-size: 12px;
  }

  .detail-page .nav {
    flex: 0 0 calc(100% + 32px);
    gap: 4px 18px;
    margin: 0 -16px;
    padding: 8px 16px 10px;
    border-top: 1px solid rgba(15, 47, 79, .08);
    font-size: 13px;
    white-space: normal;
  }

  .detail-page main > section {
    width: calc(100% - 20px);
  }

  .detail-page .detail-hero,
  .detail-page .detail-section {
    padding: 28px 10px;
  }

  .detail-page h1 {
    margin-bottom: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: clamp(30px, 10vw, 42px);
  }

  .detail-page .lead {
    font-size: 15px;
  }

  .detail-sibling-nav {
    flex-wrap: nowrap;
    width: calc(100% + 10px);
    margin-right: -10px;
    padding: 2px 10px 5px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .detail-sibling-nav::-webkit-scrollbar {
    display: none;
  }

  .detail-sibling-nav a {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  .detail-page .hero-media,
  .detail-page .hero-media img {
    height: auto;
    min-height: 0;
  }

  .focus-layout,
  .system-grid,
  .check-list,
  .faq-list {
    grid-template-columns: 1fr;
  }

  .focus-layout {
    gap: 14px;
  }

  .focus-figure {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .system-card {
    min-height: 0;
  }

  .detail-page .detail-media-row {
    grid-template-columns: 1fr;
  }

  .detail-page .detail-media-row .media-copy {
    min-height: 0;
    padding: 16px;
  }

  .detail-page .detail-media-row figure {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .detail-page .photo-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-page .photo-flow .flow-step:nth-child(2n)::after {
    display: none;
  }

  .reference-links > div,
  .reference-links a {
    width: 100%;
  }

  .reference-links a {
    justify-content: space-between;
  }

  .parameter-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .decision-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parameter-table,
  .parameter-table tbody,
  .parameter-table tr,
  .parameter-table td {
    display: block;
    width: 100%;
  }

  .parameter-table thead {
    display: none;
  }

  .parameter-table tbody {
    display: grid;
    gap: 10px;
  }

  .parameter-table tr {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
  }

  .parameter-table td,
  .parameter-table tbody tr:last-child td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: #fff;
  }

  .parameter-table td:last-child,
  .parameter-table tbody tr:last-child td:last-child {
    border-bottom: 0;
  }

  .parameter-table td::before {
    content: attr(data-label);
    color: #d96f0b;
    font-size: 12px;
    font-weight: 850;
  }

  .process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-list li:nth-child(3)::after {
    display: block;
  }

  .process-list li:nth-child(2n)::after {
    display: none;
  }
}

@media (max-width: 390px) {
  .decision-grid {
    grid-template-columns: 1fr;
  }

  .detail-page .photo-flow {
    grid-template-columns: 1fr;
  }

  .detail-page .photo-flow .flow-step::after {
    display: none !important;
  }

  .process-list {
    grid-template-columns: 1fr;
  }

  .process-list li::after {
    display: none !important;
  }
}

/* Detail navigation belongs before the hero; scenario tags explain audience. */
.detail-jump-bar {
  grid-template-columns: auto auto minmax(0, 1fr);
  margin-top: 0;
  margin-bottom: 0;
}

.detail-jump-bar .category-back {
  min-height: 36px;
  margin: 0;
  padding: 0 12px;
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}

.detail-jump-bar .category-back:hover {
  border-color: #d96308;
  background: #d96308;
  color: #fff;
}

.detail-page .eyebrow a,
.detail-page .eyebrow span {
  color: inherit;
  text-decoration: none;
}

.detail-page .eyebrow a:hover {
  text-decoration: underline;
}

.scenario-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 22px;
}

.scenario-block > strong {
  padding: 4px 0 4px 10px;
  border-left: 3px solid var(--orange);
  color: var(--navy);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
  white-space: nowrap;
}

.scenario-block .scenario-list {
  margin: 0;
}

.court-switcher {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.detail-group-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #edf3f7;
}

.detail-group-tab {
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.detail-group-tab:hover {
  background: #fff;
}

.detail-group-tab[aria-selected="true"] {
  background: var(--navy);
  color: #fff;
}

.detail-link-panels {
  min-width: 0;
}

.detail-link-panels .detail-sibling-nav {
  width: 100%;
}

.detail-link-panels [hidden] {
  display: none !important;
}

.court-switcher .detail-sibling-nav {
  flex-wrap: wrap;
  width: 100%;
  margin-right: 0;
  padding-right: 0;
  overflow-x: visible;
}

.court-switcher .detail-sibling-nav a {
  flex: 0 0 auto;
  min-height: 34px;
  border-color: #c9d7e1;
  background: #edf3f7;
  color: #173b59;
  font-size: 13px;
  white-space: nowrap;
  text-align: center;
}

.court-switcher .detail-sibling-nav a:hover {
  border-color: var(--orange);
  background: #fff7ef;
  color: #c85c08;
}

.court-switcher .detail-sibling-nav a[aria-current="page"] {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.watermarked-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.watermarked-media::after {
  content: "川顺康运动施工服务";
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  color: rgba(8, 48, 78, .18);
  font-size: clamp(12px, 1.35vw, 18px);
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-18deg);
  text-shadow:
    -190px -100px 0 rgba(8, 48, 78, .16),
    190px -100px 0 rgba(8, 48, 78, .16),
    -190px 100px 0 rgba(8, 48, 78, .16),
    190px 100px 0 rgba(8, 48, 78, .16),
    0 1px 1px rgba(255, 255, 255, .65);
}

.detail-page .hero-media figcaption {
  z-index: 4;
}

.flow-image {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  border-radius: 6px;
}

.photo-flow .flow-image::after {
  padding: 4px 8px;
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: 1px;
}

@media (max-width: 760px) {
  .detail-jump-bar {
    grid-template-columns: auto minmax(0, 1fr);
    position: relative;
    gap: 8px 10px;
    margin-top: 0;
  }

  .detail-jump-bar > strong {
    align-self: center;
  }

  .detail-jump-bar .detail-sibling-nav {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding-right: 0;
  }

  .scenario-block {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 18px;
  }

  .scenario-block > strong {
    padding: 2px 0 2px 9px;
    font-size: 18px;
  }

  .court-switcher {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .court-switcher .detail-group-tabs {
    justify-self: start;
  }

  .court-switcher .detail-link-panels {
    grid-column: 1 / -1;
    width: 100%;
  }

  .detail-group-tab {
    min-height: 34px;
    padding: 0 9px;
    font-size: 13px;
  }
}

/* Separate category controls from the links within the selected category. */
.detail-jump-bar.court-switcher {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.detail-switcher-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}

.court-switcher .detail-link-panels {
  width: 100%;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
  background: #f5f8fa;
}

.court-switcher .detail-link-panels .detail-sibling-nav {
  gap: 8px;
}

@media (max-width: 760px) {
  .detail-jump-bar:not(.court-switcher) .detail-sibling-nav {
    flex-wrap: wrap;
    width: 100%;
    margin-right: 0;
    overflow-x: visible;
  }

  .detail-jump-bar.court-switcher {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .detail-switcher-head {
    gap: 8px;
    padding: 10px;
  }

  .court-switcher .detail-link-panels {
    grid-column: auto;
    padding: 9px 10px 10px;
  }
}

.detail-page .detail-jump-bar {
  position: static;
  top: auto;
  z-index: auto;
  box-shadow: 0 8px 20px rgba(8, 48, 78, .08);
}

.detail-page.section-renovation .hero-media img,
.detail-page.section-renovation .detail-media-row img,
.detail-page.section-renovation .photo-flow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .detail-page .detail-jump-bar {
    position: static;
    top: auto;
  }
}

/* Compact sibling navigation on small screens so the page subject stays in the first viewport. */
.detail-current-label,
.detail-menu-toggle {
  display: none;
}

@media (max-width: 760px) {
  .detail-jump-bar:not(.court-switcher) {
    grid-template-columns: auto auto minmax(0, 1fr) 36px;
    align-items: center;
    padding: 9px 10px;
  }

  .detail-current-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #425464;
    font-size: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .detail-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #c9d7e1;
    border-radius: 6px;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
  }

  .detail-menu-toggle-icon {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease;
  }

  .detail-menu-toggle[aria-expanded="true"] .detail-menu-toggle-icon {
    transform: translateY(2px) rotate(225deg);
  }

  .detail-jump-bar:not(.court-switcher) > .detail-mobile-panel {
    display: none;
    grid-column: 1 / -1;
  }

  .detail-jump-bar:not(.court-switcher).is-mobile-open > .detail-mobile-panel {
    display: block;
  }

  .detail-jump-bar:not(.court-switcher) .detail-mobile-panel .detail-sibling-nav {
    width: 100%;
    margin-top: 2px;
  }

  .court-switcher .detail-switcher-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 36px;
    gap: 8px;
    padding: 9px 10px;
  }

  .court-switcher .detail-group-tabs,
  .court-switcher .detail-link-panels {
    display: none;
  }

  .court-switcher.is-mobile-open .detail-group-tabs {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }

  .court-switcher.is-mobile-open .detail-link-panels {
    display: block;
  }
}