:root {
  --case-ink: #10213b;
  --case-deep: #0b3d34;
  --case-green: #0d7f70;
  --case-mint: #e7f3ef;
  --case-warm: #fbf6ea;
  --case-line: #d9e2de;
  --case-muted: #586660;
}

.cleaning-case-page { margin: 0; color: var(--case-ink); background: #fff; }
.cleaning-case-main { overflow: clip; }
.case-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 22px; font-size: 12px; }
.case-breadcrumbs a { color: #d7eee7; text-decoration: none; }
.case-breadcrumbs span { color: #85afa2; }

.case-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); min-height: 720px; background: var(--case-deep); }
.case-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 112px clamp(24px, 6vw, 96px); color: #fff; }
.case-kicker, .case-section-kicker { margin: 0 0 18px; color: #d6aa31; font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.case-hero h1 { max-width: 850px; margin: 0; color: #fff; font-size: clamp(41px, 5.4vw, 70px); line-height: 1.06; letter-spacing: -.05em; word-break: keep-all; }
.case-hero-lead { max-width: 740px; margin: 26px 0 0; color: #dcebe6; font-size: 18px; line-height: 1.8; }
.case-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.case-hero-actions a { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 22px; color: var(--case-deep); background: #fff; border-radius: 999px; font-weight: 850; text-decoration: none; }
.case-hero-actions a:last-child { color: #fff; background: var(--case-green); }
.case-hero-media { position: relative; min-height: 620px; margin: 0; overflow: hidden; background: #1a312d; }
.case-hero-media picture, .case-hero-media img { display: block; width: 100%; height: 100%; }
.case-hero-media img { object-fit: cover; }
.case-hero-photo-tag { position: absolute; top: 22px; left: 22px; padding: 10px 14px; color: #182622; background: #f9db79; border-radius: 999px; font-size: 13px; font-weight: 900; box-shadow: 0 4px 16px rgb(0 0 0 / 18%); }
.case-hero-media figcaption { position: absolute; right: 18px; bottom: 18px; left: 18px; padding: 12px 15px; color: #fff; background: rgb(5 29 24 / 86%); border: 1px solid rgb(255 255 255 / 22%); border-radius: 12px; font-size: 12px; line-height: 1.5; }

.case-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1180px; margin: -42px auto 0; background: #fff; border: 1px solid var(--case-line); box-shadow: 0 18px 50px rgb(19 55 47 / 13%); }
.case-facts div { padding: 28px 18px; text-align: center; border-right: 1px solid var(--case-line); }
.case-facts div:last-child { border-right: 0; }
.case-facts dt { color: var(--case-muted); font-size: 11px; font-weight: 850; }
.case-facts dd { margin: 8px 0 0; color: var(--case-green); font-size: 17px; font-weight: 900; line-height: 1.4; word-break: keep-all; }

.case-disclosure { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: 46px; max-width: 1180px; margin: 0 auto; padding: 108px 24px 84px; }
.case-disclosure h2, .case-section-heading h2, .case-safety h2, .case-related h2 { margin: 0; color: var(--case-ink); font-size: clamp(34px, 4.2vw, 54px); line-height: 1.12; letter-spacing: -.04em; word-break: keep-all; }
.case-disclosure > div:last-child { padding: 28px 30px; color: #34453f; background: var(--case-warm); border-left: 4px solid #d6aa31; }
.case-disclosure p { margin: 0; font-size: 16px; line-height: 1.85; }
.case-disclosure p + p { margin-top: 14px; }
.case-disclosure strong { color: #203b32; }

.case-story { padding: 92px clamp(20px, 5vw, 72px); background: #f3f7f5; }
.case-story-inner { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 54px; max-width: 1180px; margin: 0 auto; }
.case-story-copy p { margin: 0; color: #3f514b; font-size: 17px; line-height: 1.9; }
.case-story-copy p + p { margin-top: 20px; }
.case-scope-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.case-scope-list li { padding: 18px 20px; color: #294139; background: #fff; border: 1px solid var(--case-line); font-size: 14px; font-weight: 800; line-height: 1.55; }

.case-gallery-section { padding: 100px clamp(16px, 4vw, 56px) 112px; background: #fff; }
.case-gallery-section.after { background: #f7faf8; }
.case-section-heading { max-width: 1180px; margin: 0 auto 42px; }
.case-section-heading > p:last-child { max-width: 780px; margin: 18px 0 0; color: var(--case-muted); font-size: 16px; line-height: 1.75; }
.case-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1280px; margin: 0 auto; }
.case-gallery.after-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-photo { overflow: hidden; margin: 0; background: #fff; border: 1px solid var(--case-line); box-shadow: 0 14px 32px rgb(13 52 43 / 8%); }
.case-photo picture { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #d7e1de; }
.case-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-photo figcaption { padding: 18px; color: #34453f; font-size: 13px; line-height: 1.65; }
.case-photo figcaption strong { display: block; margin-bottom: 6px; color: var(--case-green); font-size: 12px; }

.case-stage-note { max-width: 1180px; margin: 34px auto 0; padding: 24px 26px; color: #3d4c47; background: #fff7dd; border: 1px solid #e4c96e; font-size: 15px; line-height: 1.8; }
.case-stage-note strong { color: #624d0a; }

.case-safety { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 48px; max-width: 1180px; margin: 0 auto; padding: 105px 24px; }
.case-safety-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.case-safety-list li { padding: 21px 22px; color: #394c45; background: var(--case-mint); border-left: 4px solid var(--case-green); font-size: 15px; line-height: 1.7; }
.case-safety-list strong { display: block; margin-bottom: 5px; color: #163f35; }

.case-author { max-width: 920px; margin: 0 auto 110px; padding: 28px 30px; background: #f5f8f7; border: 1px solid var(--case-line); }
.case-author span { color: var(--case-green); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.case-author strong { display: block; margin-top: 9px; color: var(--case-ink); font-size: 22px; }
.case-author p { margin: 10px 0 0; color: var(--case-muted); line-height: 1.75; }

.case-related { padding: 92px clamp(20px, 6vw, 86px); color: #fff; background: var(--case-deep); }
.case-related h2 { color: #fff; }
.case-related-inner { max-width: 1180px; margin: 0 auto; }
.case-related-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.case-related-links a { display: flex; min-height: 96px; align-items: center; padding: 22px; color: #fff; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 18%); text-decoration: none; font-weight: 800; line-height: 1.5; }
.case-related-links a:hover { background: rgb(255 255 255 / 14%); }
.cleaning-case-page .site-footer > p { color: #b8c0d8; }

@media (max-width: 1000px) {
  .case-facts { grid-template-columns: repeat(3, 1fr); margin-right: 18px; margin-left: 18px; }
  .case-facts div:nth-child(3) { border-right: 0; }
  .case-facts div:nth-child(-n + 3) { border-bottom: 1px solid var(--case-line); }
  .case-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .case-hero { grid-template-columns: 1fr; }
  .case-hero-copy { padding: 84px 22px 54px; }
  .case-hero-media { min-height: 520px; }
  .case-facts { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
  .case-facts div, .case-facts div:nth-child(3) { border-right: 1px solid var(--case-line); border-bottom: 1px solid var(--case-line); }
  .case-facts div:nth-child(even) { border-right: 0; }
  .case-facts div:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .case-disclosure, .case-story-inner, .case-safety { grid-template-columns: 1fr; gap: 28px; }
  .case-disclosure { padding: 78px 18px 66px; }
  .case-story { padding: 72px 18px; }
  .case-scope-list { grid-template-columns: 1fr; }
  .case-gallery-section { padding: 76px 14px 84px; }
  .case-gallery, .case-gallery.after-grid { grid-template-columns: 1fr; }
  .case-photo picture { aspect-ratio: 4 / 5; }
  .case-safety { padding: 80px 18px; }
  .case-author { margin: 0 16px 84px; }
  .case-related { padding: 74px 18px; }
  .case-related-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cleaning-case-page * { scroll-behavior: auto !important; }
}