.vitreous-page {
  color: #355b6d;
  background: #fff;
}

.vitreous-page *, .vitreous-page *::before, .vitreous-page *::after { box-sizing: border-box; }

/* Keep this FV on the same photo-led layout as the cataract detail page. */
.vitreous-page .unified-hero .lower-hero-visual img { object-position: 50% 48%; }
.vitreous-page .unified-hero .sub-title { font-size: clamp(2.2rem, 4.3vw, 3.5rem) !important; }

.vitreous-nav { background: #fff; border-bottom: 1px solid #dcecf2; }
.vitreous-nav .sub-container { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 18px; padding-bottom: 18px; }
.vitreous-nav strong { color: #0d4b68; font-size: .83rem; }
.vitreous-nav a { color: #3e6a7d; font-size: .8rem; font-weight: 700; text-decoration: none; }
.vitreous-nav a:hover, .vitreous-nav a:focus-visible { color: #087da9; text-decoration: underline; }

.vitreous-section { padding: clamp(54px, 6vw, 88px) 0; scroll-margin-top: 100px; }
.vitreous-section--tint { background: #f3fafc; }
.vitreous-page .vitreous-section .sub-container { width: min(1120px, calc(100% - 48px)); }
.vitreous-kicker { margin: 0 0 8px; color: #078fca; font-size: .74rem; font-weight: 800; letter-spacing: .16em; }
.vitreous-section h2 { margin: 0 0 22px; color: #0d4b68; font-size: clamp(1.7rem, 2.7vw, 2.35rem); line-height: 1.45; }
.vitreous-section h3 { margin: 0 0 8px; color: #0d4b68; font-size: 1.12rem; line-height: 1.55; }
.vitreous-section p { line-height: 1.95; }
.vitreous-section a { color: #067fad; text-underline-offset: .18em; }
.vitreous-intro { max-width: 850px; margin: 0 0 28px; }

.vitreous-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.vitreous-copy p { margin: 0 0 18px; }
.vitreous-copy p:last-child { margin-bottom: 0; }
.vitreous-diagram { margin: 0; }
.vitreous-diagram img { display: block; width: 100%; height: auto; border: 1px solid #dbeaf0; border-radius: 18px; background: #f7fbfc; }
.vitreous-diagram figcaption { margin-top: 10px; color: #627d89; font-size: .77rem; line-height: 1.65; }

.vitreous-disease-list { border-top: 1px solid #c9e0e9; }
.vitreous-disease-list > div { display: grid; grid-template-columns: minmax(190px, .34fr) 1fr; gap: 24px; padding: 23px 0; border-bottom: 1px solid #c9e0e9; }
.vitreous-disease-list h3, .vitreous-disease-list p { margin: 0; }
.vitreous-related { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 24px 0 0; font-size: .9rem; }

.vitreous-flow { margin: 0; padding: 0; list-style: none; border-top: 1px solid #c9e0e9; }
.vitreous-flow li { display: grid; grid-template-columns: 62px 1fr; gap: 14px; padding: 24px 0; border-bottom: 1px solid #c9e0e9; }
.vitreous-flow__number { color: #0b91c3; font-size: 1.2rem; font-weight: 800; letter-spacing: .06em; }
.vitreous-flow p { margin: 0; }

.vitreous-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 70px); }
.vitreous-columns > div { border-top: 1px solid #a9d2e1; padding-top: 18px; }
.vitreous-columns p { margin: 0; }
.vitreous-caution { max-width: 970px; margin: 30px 0 0; padding: 16px 0; border-top: 1px solid #c9e0e9; border-bottom: 1px solid #c9e0e9; }

.vitreous-consultation { background: #fff; }
.vitreous-consultation > .sub-container > p:not(.vitreous-kicker):not(.medical-reference) { max-width: 850px; }
.vitreous-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.vitreous-links a { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 50px; padding: 10px 19px; border: 1px solid #abd9e8; border-radius: 999px; color: #0d6082; background: #fff; font-weight: 750; text-decoration: none; }
.vitreous-links a:hover, .vitreous-links a:focus-visible { background: #eaf8fc; }
.vitreous-links span { font-size: 1.15rem; }
.vitreous-page .medical-reference { margin-top: 38px; padding-top: 14px; border-top: 1px solid #dcecf2; color: #617f8d; font-size: .72rem; line-height: 1.8; }

@media (max-width: 760px) {
  .vitreous-page .unified-hero .sub-title { font-size: clamp(1.85rem, 8vw, 2.5rem) !important; }
  .vitreous-page .vitreous-section .sub-container { width: min(100% - 36px, 650px); }
  .vitreous-nav .sub-container { gap: 9px 16px; padding-top: 15px; padding-bottom: 15px; }
  .vitreous-nav strong { flex-basis: 100%; }
  .vitreous-split, .vitreous-columns { grid-template-columns: 1fr; }
  .vitreous-split { gap: 28px; }
  .vitreous-disease-list > div { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .vitreous-flow li { grid-template-columns: 46px 1fr; gap: 10px; padding: 20px 0; }
  .vitreous-links { display: grid; }
}