/* v7.23.1r corrective visual layer: photo headers + true diagrams/timelines */
.visual-photo-hero,
.code-photo-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 28px;
  border-radius: 24px;
  min-height: 320px;
  background: #dfeaf2;
  box-shadow: 0 18px 44px rgba(16,47,78,.12);
}
.visual-photo-hero img,
.code-photo-hero img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
}
.visual-photo-hero::after,
.code-photo-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,26,48,.03) 35%, rgba(4,26,48,.78) 100%);
  pointer-events: none;
}
.visual-photo-hero figcaption,
.code-photo-hero figcaption {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  color: #fff;
}
.visual-photo-hero figcaption span,
.code-photo-hero figcaption span {
  display: inline-flex;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(11,49,81,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.visual-photo-hero figcaption strong,
.code-photo-hero figcaption strong {
  max-width: 520px;
  font-family: Manrope, sans-serif;
  font-size: clamp(1.25rem,2.2vw,1.9rem);
  line-height: 1.08;
  text-align: right;
}

.drain-system-diagram {
  display: grid;
  grid-template-columns: minmax(230px,.72fr) minmax(0,1.28fr);
  gap: 28px;
  align-items: center;
  margin: 32px 0 38px;
  padding: 30px;
  border: 1px solid #cfe1ef;
  border-radius: 26px;
  background: linear-gradient(135deg,#f7fbff 0%,#eef7ff 58%,#fff 100%);
}
.drain-map-copy h2,
.drain-decision-tree h2,
.maintenance-care-map h2 {
  margin: 8px 0 12px;
  font-size: clamp(1.7rem,3vw,2.55rem);
  line-height: 1.06;
  letter-spacing: -.035em;
}
.drain-map-copy > p:last-of-type { color:#456279; }
.drain-map-legend {
  display: grid;
  gap: 9px;
  margin-top: 20px;
  font-size: 14px;
  color: #36566f;
}
.drain-map-legend span { display:flex;align-items:center;gap:9px; }
.dot { width:11px;height:11px;border-radius:999px;display:inline-block;flex:none; }
.dot--blue { background:#1675ff; }
.dot--green { background:#38a169; }
.dot--orange { background:#f59b23; }
.drain-map-canvas {
  padding: 12px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #d6e5f0;
}
.drain-map-canvas svg,
.maintenance-care-map__art svg { width:100%;height:auto;display:block; }
.svg-title { font: 800 17px Manrope, sans-serif; fill:#0f3a5f; }
.svg-sub { font: 500 13px 'DM Sans', sans-serif; fill:#516c81; }
.svg-num { font: 800 17px 'DM Sans', sans-serif; fill:#fff; }
.svg-alert { font: 700 14px 'DM Sans', sans-serif; fill:#9a4d0d; }

.drain-decision-tree {
  margin: 36px 0;
  padding: 30px 0 4px;
  border-top: 1px solid #dbe8f1;
}
.tree-root {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.tree-root span {
  display: inline-flex;
  padding: 15px 24px;
  border-radius: 999px;
  background: #0f3a5f;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(15,58,95,.15);
}
.tree-connector--main {
  width: 2px;
  height: 28px;
  margin: 0 auto;
  background: #a9c6dd;
}
.tree-primary {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}
.tree-primary::before {
  content:'';
  position:absolute;
  top:-1px;
  left:16.5%;
  right:16.5%;
  height:2px;
  background:#a9c6dd;
}
.tree-node {
  position:relative;
  display:grid;
  gap:7px;
  padding: 23px 22px;
  border-top: 4px solid #1675ff;
  border-radius: 0 0 18px 18px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  box-shadow: 0 10px 24px rgba(15,58,95,.07);
}
.tree-node::before {
  content:'';
  position:absolute;
  top:-18px;
  left:50%;
  width:2px;
  height:18px;
  background:#a9c6dd;
}
.tree-node b { color:#1675ff;font-size:12px;text-transform:uppercase;letter-spacing:1px; }
.tree-node strong { font-size:1.12rem;line-height:1.15; }
.tree-node small { color:#526d82;line-height:1.45;font-size:14px; }
.tree-node--yes { border-color:#38a169; }
.tree-node--yes b { color:#2e8653; }
.tree-node--partial { border-color:#6a8fb0; }
.tree-node--partial b { color:#567794; }
.tree-secondary {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top: 22px;
}
.tree-secondary a {
  padding:9px 13px;
  border-radius:999px;
  background:#eef6ff;
  border:1px solid #d4e5f2;
  color:#175fae;
  font-weight:700;
  text-decoration:none;
  font-size:13px;
}
.tree-secondary a.tree-secondary--alert { background:#fff5ec;border-color:#efcfb2;color:#a95813; }
.drain-quick-order {
  display:grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap:10px;
  margin: 28px 0 36px;
  padding: 13px;
  border-radius: 20px;
  background:#0f3a5f;
}
.drain-quick-order > div {
  min-height:78px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  color:#fff;
}
.drain-quick-order span {
  display:flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;border-radius:999px;background:#1675ff;color:#fff;font-weight:800;font-size:12px;
}
.drain-quick-order strong { font-size:14px;line-height:1.3; }
.drain-quick-order--stop { background:rgba(224,115,27,.18)!important; }
.drain-quick-order--stop span { background:#e0791b;min-width:48px; }

.maintenance-visual-reset {
  display:grid;
  gap:26px;
  margin-top:36px;
}
.maintenance-care-map {
  display:grid;
  grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr);
  gap:28px;
  align-items:center;
  padding:30px;
  border-radius:28px;
  background:linear-gradient(135deg,#f4faff 0%,#fff 100%);
  border:1px solid #cfe2f0;
}
.maintenance-care-map__copy p:last-child { color:#466176; }
.maintenance-care-map__art { padding:12px;border-radius:22px;background:#fff;border:1px solid #d8e7f2; }
.maintenance-timeline {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  padding:36px 6px 4px;
}
.maintenance-timeline__line {
  position:absolute;
  top:21px;
  left:8%;
  right:8%;
  height:3px;
  background:linear-gradient(90deg,#1675ff 0%,#1675ff 66%,#e07d23 100%);
}
.maintenance-timeline__step { position:relative;padding-top:12px; }
.maintenance-timeline__step::before {
  content:'';
  position:absolute;
  top:-23px;
  left:0;
  width:18px;height:18px;border-radius:999px;
  background:#1675ff;
  border:4px solid #fff;
  box-shadow:0 0 0 2px #1675ff;
}
.maintenance-timeline__step span { display:block;color:#356786;font-size:10px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase; }
.maintenance-timeline__step b { display:block;margin:8px 0 7px;font-size:1.15rem;color:#0f3a5f; }
.maintenance-timeline__step p { margin:0;color:#526d82;font-size:14px;line-height:1.5; }
.maintenance-timeline__step--stop::before { background:#e07d23;box-shadow:0 0 0 2px #e07d23; }
.maintenance-route-bar {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  padding-top:4px;
}
.maintenance-route-bar a {
  display:inline-flex;padding:9px 13px;border-radius:999px;background:#eef6ff;border:1px solid #d6e6f3;text-decoration:none;color:#155fba;font-weight:700;font-size:13px;
}

.code-photo-hero { min-height:360px; }
.code-photo-hero img { height:360px; }
.code-display-band {
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
  gap:16px;
  margin-top:24px;
}
.code-display-band__screen,
.code-display-band__meaning {
  min-height:170px;
  padding:24px;
  border-radius:20px;
}
.code-display-band__screen {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:#0d3153;
  color:#fff;
  text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.code-display-band__screen span,
.code-display-band__meaning span {
  font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
}
.code-display-band__screen span { color:#b8d9fb; }
.code-display-band__screen strong { margin:8px 0 6px;font:800 clamp(2.8rem,5vw,4.4rem)/1 Manrope,sans-serif;letter-spacing:-.08em; }
.code-display-band__screen small { color:rgba(255,255,255,.75); }
.code-display-band__meaning {
  display:flex;flex-direction:column;justify-content:center;
  background:#fff;border:1px solid #d7e5ef;
}
.code-display-band__meaning span { color:#3b739a; }
.code-display-band__meaning strong { margin:10px 0 9px;font:800 clamp(1.35rem,2.4vw,2rem)/1.12 Manrope,sans-serif;color:#0f3a5f; }
.code-display-band__meaning p { margin:0;color:#526d82; }
.code-action-flow {
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);
  align-items:stretch;
  gap:8px;
  margin-top:20px;
}
.code-action-flow__step {
  min-height:170px;
  padding:20px;
  border-radius:18px;
  background:#eef6ff;
  border:1px solid #d7e7f4;
}
.code-action-flow__step span {
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:#1675ff;color:#fff;font-weight:800;
}
.code-action-flow__step b { display:block;margin:13px 0 8px;font-size:1.05rem;line-height:1.2;color:#0f3a5f; }
.code-action-flow__step p { margin:0;color:#526d82;font-size:14px;line-height:1.5; }
.code-action-flow__step--stop { background:#fff6ee;border-color:#edcfb3; }
.code-action-flow__step--stop span { background:#df7920; }
.code-action-flow__arrow { display:flex;align-items:center;justify-content:center;color:#77a3c8;font-size:1.7rem;font-weight:800; }

@media (max-width: 980px) {
  .drain-system-diagram,
  .maintenance-care-map,
  .code-display-band { grid-template-columns:1fr; }
  .tree-primary { grid-template-columns:1fr;gap:12px; }
  .tree-primary::before,.tree-node::before,.tree-connector--main { display:none; }
  .drain-quick-order { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .maintenance-timeline { grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px; }
  .maintenance-timeline__line { display:none; }
  .maintenance-timeline__step::before { top:-7px; }
  .code-action-flow { grid-template-columns:1fr; }
  .code-action-flow__arrow { min-height:22px;transform:rotate(90deg); }
}
@media (max-width: 760px) {
  .visual-photo-hero,
  .code-photo-hero { min-height:235px;border-radius:18px; }
  .visual-photo-hero img,
  .code-photo-hero img { height:235px; }
  .visual-photo-hero figcaption,
  .code-photo-hero figcaption { left:16px;right:16px;bottom:15px;align-items:flex-start;flex-direction:column;gap:8px; }
  .visual-photo-hero figcaption strong,
  .code-photo-hero figcaption strong { text-align:left;font-size:1.18rem; }
  .drain-system-diagram,
  .maintenance-care-map { padding:20px;border-radius:20px; }
  .drain-map-canvas,
  .maintenance-care-map__art { margin-left:-8px;margin-right:-8px;padding:5px; }
  .drain-quick-order { grid-template-columns:1fr; }
  .maintenance-timeline { grid-template-columns:1fr;padding-left:24px; }
  .maintenance-timeline__step { padding-left:8px; }
  .maintenance-timeline__step::before { left:-22px;top:4px; }
  .maintenance-route-bar { flex-direction:column; }
  .maintenance-route-bar a { justify-content:center; }
  .code-display-band__screen,.code-display-band__meaning,.code-action-flow__step { min-height:0; }
  .svg-title { font-size:15px; }
  .svg-sub { font-size:12px; }
}