/* Smart-water immersive walkthrough based on the selected dark editorial scheme. */
html[data-project="smart-water"] .case-story-chapter--design {
  position: relative;
  width: 100%;
  margin-bottom: 0;
  padding: clamp(88px, 9vw, 132px) max(4vw, calc((100vw - 1380px) / 2)) clamp(110px, 12vw, 170px);
  overflow: clip;
  color: #eef6ff;
  background-color: #06192e;
}

html[data-project="smart-water"] .case-story-chapter--design::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: url("assets/hero/cici-water-surface-illustration-v1.png");
  background-position: center bottom;
  background-size: cover;
  opacity: .08;
  filter: saturate(.45) brightness(.45) contrast(1.15);
}

html[data-project="smart-water"] .case-story-chapter--design > header,
html[data-project="smart-water"] .case-story-chapter--design > .case-story-chapter__content {
  position: relative;
  z-index: 1;
  width: min(1380px, 92vw);
  margin-right: auto;
  margin-left: auto;
}

html[data-project="smart-water"] .case-story-chapter--design > header {
  border-color: rgba(118, 174, 231, .28);
}

html[data-project="smart-water"] .case-story-chapter--design > header > span,
html[data-project="smart-water"] .case-story-chapter--design > header > p {
  color: #65a9f4;
}

html[data-project="smart-water"] .case-story-chapter--design .case-story-chapter__intro p {
  color: rgba(218, 233, 249, .76) !important;
}

html[data-project="smart-water"] .case-story-chapter--design .case-story-chapter__content {
  margin-left: auto;
}

html[data-project="smart-water"] .case-story-chapter--design > .case-story-chapter__content > .case-flow {
  margin: 0 0 68px;
  border-color: rgba(118, 174, 231, .2);
}

html[data-project="smart-water"] .case-story-chapter--design > .case-story-chapter__content > .case-flow li {
  border-color: rgba(118, 174, 231, .2);
}

html[data-project="smart-water"] .case-story-chapter--design > .case-story-chapter__content > .case-flow p {
  color: rgba(211, 228, 246, .7) !important;
}

html[data-project="smart-water"] .case-system-designs {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  column-gap: clamp(52px, 6vw, 96px);
  row-gap: 92px;
  margin-top: 0;
  overflow-anchor: none;
}

html[data-project="smart-water"] .case-system-guide {
  position: sticky;
  top: 180px;
  align-self: start;
  padding: 0 32px 0 0;
  border: 0;
  border-right: 1px solid rgba(111, 169, 229, .18);
  background: transparent;
  min-width: 0;
}

html[data-project="smart-water"] .case-system-guide header {
  max-width: none;
  margin-bottom: 42px;
}

html[data-project="smart-water"] .case-system-guide header small {
  color: #69aaf0;
  font-size: 11px;
}

html[data-project="smart-water"] .case-system-guide h3 {
  margin: 14px 0 0;
  color: #eaf3fc;
  font: 400 20px/1.55 var(--serif);
}

html[data-project="smart-water"] .case-system-guide header p {
  display: none;
}

html[data-project="smart-water"] .case-system-guide__tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
}

html[data-project="smart-water"] .case-system-guide__tabs::before {
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 8px;
  width: 1px;
  content: "";
  background: rgba(103, 164, 227, .34);
}

html[data-project="smart-water"] .case-system-guide__tabs button {
  position: relative;
  min-height: 116px;
  padding: 20px 8px 20px 40px;
  gap: 5px;
  color: rgba(191, 211, 233, .42);
  border: 0;
  background: transparent;
  transition: color .25s ease, transform .25s ease;
}

html[data-project="smart-water"] .case-system-guide__tabs button::before {
  position: absolute;
  top: 27px;
  left: 1px;
  width: 14px;
  height: 14px;
  content: "";
  border: 1px solid rgba(108, 167, 228, .38);
  border-radius: 50%;
  background: #0d2948;
  box-shadow: 0 0 0 6px rgba(42, 110, 188, .08);
}

html[data-project="smart-water"] .case-system-guide__tabs button:hover,
html[data-project="smart-water"] .case-system-guide__tabs button:focus-visible {
  color: #eaf4ff;
  border-color: transparent;
  transform: translateX(3px);
}

html[data-project="smart-water"] .case-system-guide__tabs button:focus-visible {
  outline: 0 !important;
  box-shadow: inset 3px 0 #64aaf5;
}

html[data-project="smart-water"] .case-system-guide__tabs button[aria-selected="true"] {
  color: #f4f8fd;
  border: 0;
  background: transparent;
}

html[data-project="smart-water"] .case-system-guide__tabs button[aria-selected="true"]::before {
  border-color: #94c7ff;
  background: #f3f8ff;
  box-shadow: 0 0 0 6px rgba(44, 130, 230, .35), 0 0 22px rgba(77, 157, 248, .7);
}

html[data-project="smart-water"] .case-system-guide__tabs button > span,
html[data-project="smart-water"] .case-system-guide__tabs button small {
  color: inherit;
  font: 500 11px/1.4 var(--mono);
}

html[data-project="smart-water"] .case-system-guide__tabs strong {
  align-self: start;
  font: 500 17px/1.45 var(--sans);
}

html[data-project="smart-water"] .case-system-designs__panels {
  min-width: 0;
  width: 100%;
}

html[data-project="smart-water"] .case-system-design {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-top: 0;
}

html[data-project="smart-water"] .case-system-design > header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px 26px;
  align-items: start;
  padding: 0 0 34px;
}

html[data-project="smart-water"] .case-system-design > header > span {
  padding-top: 8px;
  color: #62a8f4;
  font-size: 15px;
}

html[data-project="smart-water"] .case-system-design__heading small {
  display: block;
  color: #61a8f5;
}

html[data-project="smart-water"] .case-system-design__heading {
  min-width: 0;
}

html[data-project="smart-water"] .case-system-design h3 {
  margin: 10px 0 8px;
  color: #f2f7fd;
  font-size: clamp(42px, 5vw, 68px);
}

html[data-project="smart-water"] .case-system-design > header p {
  max-width: 700px;
  color: rgba(211, 229, 248, .72) !important;
  font-size: 14px;
}

html[data-project="smart-water"] .case-system-design__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

html[data-project="smart-water"] .case-system-design__actions button,
html[data-project="smart-water"] .case-system-design__actions a,
html[data-project="smart-water"] .case-system-design__actions > span {
  min-height: 42px;
  padding: 11px 14px;
  color: #e7f2ff;
  border: 1px solid rgba(137, 187, 239, .24);
  border-radius: 8px;
  background: rgba(155, 198, 241, .08);
  font: 500 12px/1.4 var(--sans);
  white-space: nowrap;
}

html[data-project="smart-water"] .case-system-design__actions button {
  cursor: zoom-in;
}

html[data-project="smart-water"] .case-system-design__actions > span {
  color: rgba(198, 218, 238, .5);
}

html[data-project="smart-water"] .case-system-media {
  order: 2;
  margin: 0 0 34px;
  padding: 0;
  border: 0;
}

html[data-project="smart-water"] .case-system-media > header,
html[data-project="smart-water"] .case-system-media figcaption,
html[data-project="smart-water"] .case-system-media__video {
  display: none;
}

html[data-project="smart-water"] .case-system-media__grid {
  display: block;
  margin-top: 0;
}

html[data-project="smart-water"] .case-system-media figure {
  border-color: rgba(102, 168, 235, .34);
  background: #071b31;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .3), 0 0 42px rgba(24, 105, 199, .16);
}

html[data-project="smart-water"] .case-system-media__image button {
  height: clamp(440px, 49vw, 650px);
  background: #071b31;
}

html[data-project="smart-water"] .case-system-media__image img {
  object-fit: cover;
  object-position: top center;
}

html[data-project="smart-water"] .case-system-media__image button > span {
  right: 18px;
  bottom: 18px;
  color: #ecf6ff;
  border: 1px solid rgba(145, 194, 244, .26);
  border-radius: 6px;
  background: rgba(7, 28, 52, .9);
}

html[data-project="smart-water"] .case-system-design__body {
  order: 3;
  grid-template-columns: .78fr 1.5fr;
  background: rgba(91, 150, 209, .2);
  border-color: rgba(105, 166, 228, .2);
}

html[data-project="smart-water"] .case-system-design__body section {
  min-height: 156px;
  background: rgba(8, 31, 55, .78);
}

html[data-project="smart-water"] .case-system-design__body p {
  color: rgba(218, 233, 249, .78) !important;
}

html[data-project="smart-water"] .case-system-design__modules {
  order: 4;
  border-color: rgba(105, 166, 228, .2);
}

html[data-project="smart-water"] .case-system-design__modules li {
  color: #cfe4fa;
  border-color: rgba(113, 177, 240, .24);
  background: rgba(69, 139, 211, .1);
}

html[data-project="smart-water"] .case-system-design__journey {
  order: 5;
}

html[data-project="smart-water"] .case-system-design__journey li {
  border-color: rgba(105, 166, 228, .22);
}

html[data-project="smart-water"] .case-system-design__journey p {
  color: rgba(207, 226, 246, .72) !important;
}

html[data-project="smart-water"] .case-system-design > footer {
  order: 6;
  border: 1px solid rgba(112, 174, 237, .22);
  background: rgba(35, 92, 151, .28);
}

html[data-project="smart-water"] .case-system-loop {
  grid-column: 1 / -1;
  border: 1px solid rgba(112, 174, 237, .2);
  background: rgba(7, 28, 51, .72);
}

@media (max-width: 980px) {
  html[data-project="smart-water"] .case-system-designs {
    grid-template-columns: 1fr;
  }

  html[data-project="smart-water"] .case-system-guide {
    position: relative;
    top: auto;
    padding: 0 0 22px;
    border-right: 0;
    border-bottom: 1px solid rgba(111, 169, 229, .2);
  }

  html[data-project="smart-water"] .case-system-guide header { margin-bottom: 22px; }
  html[data-project="smart-water"] .case-system-guide__tabs { grid-template-columns: repeat(4, minmax(150px, 1fr)); overflow-x: auto; }
  html[data-project="smart-water"] .case-system-guide__tabs::before,
  html[data-project="smart-water"] .case-system-guide__tabs button::before { display: none; }
  html[data-project="smart-water"] .case-system-guide__tabs button { min-height: 90px; padding: 14px; border-bottom: 2px solid rgba(104, 166, 229, .14); }
  html[data-project="smart-water"] .case-system-guide__tabs button[aria-selected="true"] { border-bottom-color: #64aaf5; }
  html[data-project="smart-water"] .case-system-design > header { grid-template-columns: 38px minmax(0, 1fr); }
  html[data-project="smart-water"] .case-system-design__actions { grid-column: 2; flex-wrap: wrap; }
}

@media (max-width: 620px) {
  html[data-project="smart-water"] .case-story-chapter--design { padding-inline: 20px; }
  html[data-project="smart-water"] .case-story-chapter--design > header,
  html[data-project="smart-water"] .case-story-chapter--design > .case-story-chapter__content { width: 100%; }
  html[data-project="smart-water"] .case-system-guide__tabs { grid-template-columns: repeat(4, 142px); }
  html[data-project="smart-water"] .case-system-guide { overflow: hidden; }
  html[data-project="smart-water"] .case-system-guide header { max-width: 100%; }
  html[data-project="smart-water"] .case-system-guide__tabs { width: 100%; }
  html[data-project="smart-water"] .case-system-designs__panels { overflow: hidden; }
  html[data-project="smart-water"] .case-system-design > header { width: 100%; }
  html[data-project="smart-water"] .case-system-design h3 { font-size: 38px; }
  html[data-project="smart-water"] .case-system-media__image button { height: 370px; }
  html[data-project="smart-water"] .case-system-design__body { grid-template-columns: 1fr; }
  html[data-project="smart-water"] .case-system-design__actions { grid-column: 1 / -1; }
}

/* Light presentation requested for the project-design chapter. */
html[data-project="smart-water"] .case-story-chapter--design {
  color: #173f69;
  background-color: transparent;
}

html[data-project="smart-water"] .case-story-chapter--design::before {
  opacity: .07;
  filter: saturate(.45) brightness(1.08) contrast(.92);
}

html[data-project="smart-water"] .case-story-chapter--design > header {
  border-color: rgba(56, 111, 165, .2);
}

html[data-project="smart-water"] .case-story-chapter--design > header > span,
html[data-project="smart-water"] .case-story-chapter--design > header > p,
html[data-project="smart-water"] .case-system-guide header small,
html[data-project="smart-water"] .case-system-design > header > span,
html[data-project="smart-water"] .case-system-design__heading small {
  color: #397cb9;
}

html[data-project="smart-water"] .case-story-chapter--design .case-story-chapter__intro p,
html[data-project="smart-water"] .case-story-chapter--design > .case-story-chapter__content > .case-flow p,
html[data-project="smart-water"] .case-system-design > header p,
html[data-project="smart-water"] .case-system-design__body p,
html[data-project="smart-water"] .case-system-design__journey p {
  color: #4e6883 !important;
}

html[data-project="smart-water"] .case-story-chapter--design > .case-story-chapter__content > .case-flow,
html[data-project="smart-water"] .case-story-chapter--design > .case-story-chapter__content > .case-flow li,
html[data-project="smart-water"] .case-system-guide,
html[data-project="smart-water"] .case-system-guide__tabs::before,
html[data-project="smart-water"] .case-system-design__journey li {
  border-color: rgba(56, 111, 165, .18);
}

html[data-project="smart-water"] .case-system-guide h3,
html[data-project="smart-water"] .case-system-design h3 {
  color: #173f69;
}

html[data-project="smart-water"] .case-system-guide__tabs button {
  color: rgba(56, 82, 109, .52);
}

html[data-project="smart-water"] .case-system-guide__tabs button::before {
  border-color: rgba(64, 117, 169, .4);
  background: #eef5fa;
  box-shadow: 0 0 0 6px rgba(58, 119, 181, .07);
}

html[data-project="smart-water"] .case-system-guide__tabs button:hover,
html[data-project="smart-water"] .case-system-guide__tabs button:focus-visible,
html[data-project="smart-water"] .case-system-guide__tabs button[aria-selected="true"] {
  color: #173f69;
}

html[data-project="smart-water"] .case-system-guide__tabs button[aria-selected="true"]::before {
  border-color: #3e82c4;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(62, 130, 196, .18), 0 0 18px rgba(62, 130, 196, .28);
}

html[data-project="smart-water"] .case-system-design__actions button,
html[data-project="smart-water"] .case-system-design__actions a,
html[data-project="smart-water"] .case-system-design__actions > span {
  color: #244f79;
  border-color: rgba(62, 119, 176, .22);
  background: rgba(255, 255, 255, .7);
}

html[data-project="smart-water"] .case-system-design__actions > span {
  color: #71869a;
}

html[data-project="smart-water"] .case-system-media figure,
html[data-project="smart-water"] .case-system-media__image button {
  border-color: rgba(59, 111, 163, .22);
  background: #fff;
  box-shadow: 0 24px 64px rgba(45, 79, 112, .12);
}

html[data-project="smart-water"] .case-system-design__body {
  background: rgba(78, 128, 176, .18);
  border-color: rgba(62, 115, 167, .18);
}

html[data-project="smart-water"] .case-system-design__body section {
  background: rgba(255, 255, 255, .78);
}

html[data-project="smart-water"] .case-system-design__modules {
  border-color: rgba(62, 115, 167, .18);
  background: rgba(255, 255, 255, .48);
}

html[data-project="smart-water"] .case-system-design__modules li {
  color: #355f87;
  border-color: rgba(62, 122, 181, .22);
  background: rgba(224, 238, 249, .68);
}

html[data-project="smart-water"] .case-system-design > footer {
  color: #244f79;
  border-color: rgba(62, 122, 181, .2);
  background: rgba(222, 236, 248, .72);
}

html[data-project="smart-water"] .case-system-design > footer small,
html[data-project="smart-water"] .case-system-design > footer p {
  color: #496783 !important;
}

html[data-project="smart-water"] .case-system-loop {
  color: #173f69;
  border-color: rgba(62, 120, 176, .2);
  background: rgba(229, 239, 248, .76);
}

html[data-project="smart-water"] .case-system-loop--standalone {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: clamp(120px, 12vw, 180px);
  padding: clamp(48px, 6vw, 76px);
  border: 1px solid rgba(62, 120, 176, .2);
  background: rgba(229, 239, 248, .94);
}

html[data-project="smart-water"] .case-system-loop small,
html[data-project="smart-water"] .case-system-loop p {
  color: #526d87;
}

html[data-project="smart-water"] .case-system-loop li {
  border-color: rgba(62, 120, 176, .2);
}

@media (max-width: 980px) {
  html[data-project="smart-water"] .case-system-guide {
    border-bottom-color: rgba(56, 111, 165, .18);
  }
}

/* Compact editorial opening: one thought per line, no task-card rhythm. */
html[data-project="smart-water"] .case-hero {
  min-height: 470px;
}

html[data-project="smart-water"] .case-summary {
  max-width: 650px;
}

html[data-project="smart-water"] .case-detail-nav + .case-story-intro {
  padding-top: clamp(72px, 8vw, 104px);
}

html[data-project="smart-water"] .case-story-intro {
  margin-bottom: clamp(84px, 10vw, 122px);
}

html[data-project="smart-water"] .case-story-intro > header {
  margin-bottom: 34px;
}

html[data-project="smart-water"] .case-story-intro__body {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(32px, 5vw, 72px);
}

html[data-project="smart-water"] .case-story-intro__body > p {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.55;
}

html[data-project="smart-water"] .case-story-intro__body aside {
  padding-top: 12px;
}

html[data-project="smart-water"] .case-story-intro__body aside p {
  margin-top: 12px;
  line-height: 1.75;
}

html[data-project="smart-water"] .case-decisions {
  margin-bottom: clamp(88px, 10vw, 126px);
}

html[data-project="smart-water"] .case-decisions article {
  grid-template-columns: 38px minmax(190px, .72fr) minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
}

html[data-project="smart-water"] .case-decisions h3 {
  font-size: 19px;
}

html[data-project="smart-water"] .case-decisions p {
  line-height: 1.65;
}

html[data-project="smart-water"] .case-story-chapter--background,
html[data-project="smart-water"] .case-story-chapter--requirements,
html[data-project="smart-water"] .case-story-chapter--thinking {
  margin-bottom: clamp(88px, 11vw, 138px);
}

html[data-project="smart-water"] .case-story-chapter--background,
html[data-project="smart-water"] .case-story-chapter--thinking {
  padding-top: clamp(64px, 7vw, 86px) !important;
  padding-bottom: clamp(64px, 7vw, 86px) !important;
}

html[data-project="smart-water"] .case-story-chapter--background h2,
html[data-project="smart-water"] .case-story-chapter--requirements h2,
html[data-project="smart-water"] .case-story-chapter--thinking h2 {
  font-size: clamp(36px, 4.2vw, 54px);
}

html[data-project="smart-water"] .case-story-chapter--background > header,
html[data-project="smart-water"] .case-story-chapter--requirements > header,
html[data-project="smart-water"] .case-story-chapter--thinking > header {
  margin-bottom: 34px;
}

html[data-project="smart-water"] .case-story-chapter--background .case-story-chapter__intro,
html[data-project="smart-water"] .case-story-chapter--requirements .case-story-chapter__intro,
html[data-project="smart-water"] .case-story-chapter--thinking .case-story-chapter__intro {
  margin-top: 16px;
}

html[data-project="smart-water"] .case-story-chapter--background .case-story-chapter__intro p,
html[data-project="smart-water"] .case-story-chapter--requirements .case-story-chapter__intro p,
html[data-project="smart-water"] .case-story-chapter--thinking .case-story-chapter__intro p {
  line-height: 1.65;
}

html[data-project="smart-water"] .case-story-chapter--background .case-html-block {
  grid-template-columns: 36px minmax(150px, .6fr) minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
}

html[data-project="smart-water"] .case-story-chapter--background .case-html-block h3 {
  font-size: 20px;
}

html[data-project="smart-water"] .case-story-chapter--background .case-html-block p {
  line-height: 1.65;
}

html[data-project="smart-water"] .case-story-chapter--requirements .case-system-map,
html[data-project="smart-water"] .case-story-chapter--thinking .case-system-map {
  gap: 0;
  margin: 34px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
}

html[data-project="smart-water"] .case-story-chapter--requirements .case-system-map {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-project="smart-water"] .case-story-chapter--requirements .case-system-map article,
html[data-project="smart-water"] .case-story-chapter--thinking .case-system-map article {
  min-height: 0;
  padding: 24px 28px 26px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

html[data-project="smart-water"] .case-story-chapter--requirements .case-system-map article:not(:last-child),
html[data-project="smart-water"] .case-story-chapter--thinking .case-system-map article:nth-child(odd) {
  margin-right: 28px;
}

html[data-project="smart-water"] .case-story-chapter--requirements .case-system-map h3,
html[data-project="smart-water"] .case-story-chapter--thinking .case-system-map h3 {
  margin-top: 14px;
  font-size: 22px;
}

html[data-project="smart-water"] .case-story-chapter--requirements .case-system-map p,
html[data-project="smart-water"] .case-story-chapter--thinking .case-system-map p {
  margin-top: 8px;
  line-height: 1.65;
}

@media (max-width: 820px) {
  html[data-project="smart-water"] .case-hero {
    min-height: auto;
  }

  html[data-project="smart-water"] .case-story-intro__body,
  html[data-project="smart-water"] .case-story-chapter--requirements .case-system-map {
    grid-template-columns: 1fr;
  }

  html[data-project="smart-water"] .case-decisions article,
  html[data-project="smart-water"] .case-story-chapter--background .case-html-block {
    grid-template-columns: 34px 1fr;
  }

  html[data-project="smart-water"] .case-decisions article p,
  html[data-project="smart-water"] .case-story-chapter--background .case-html-block p {
    grid-column: 2;
  }

  html[data-project="smart-water"] .case-story-chapter--requirements .case-system-map article,
  html[data-project="smart-water"] .case-story-chapter--thinking .case-system-map article {
    margin-right: 0 !important;
  }
}

/* Complete design boards: preserve every source image at its native ratio. */
html[data-project="smart-water"] .case-system-media > header {
  display: block;
  margin: 0 0 clamp(32px, 5vw, 56px);
}

html[data-project="smart-water"] .case-system-media > header small {
  display: block;
  margin-bottom: 10px;
  color: #397cb9;
  font: 600 11px/1.4 var(--font-mono, monospace);
  letter-spacing: .18em;
  text-transform: uppercase;
}

html[data-project="smart-water"] .case-system-media > header h4 {
  margin: 0;
  color: #173f69;
  font: 500 clamp(24px, 3.2vw, 42px)/1.18 var(--font-serif, serif);
}

html[data-project="smart-water"] .case-system-media__stack {
  display: grid;
  gap: clamp(72px, 9vw, 132px);
}

html[data-project="smart-water"] .case-system-media figure.case-system-media__asset {
  margin: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-project="smart-water"] .case-system-media__asset > header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 20px;
  color: #244f79;
}

html[data-project="smart-water"] .case-system-media__asset > header span {
  flex: 0 0 auto;
  color: #4c8ac2;
  font: 600 11px/1.4 var(--font-mono, monospace);
  letter-spacing: .14em;
}

html[data-project="smart-water"] .case-system-media__asset > header h5 {
  margin: 0;
  font: 500 clamp(19px, 2.2vw, 28px)/1.35 var(--font-serif, serif);
}

html[data-project="smart-water"] .case-system-media__asset > button {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

html[data-project="smart-water"] .case-system-media__asset img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

html[data-project="smart-water"] .case-system-media__asset > button > span {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 9px 14px;
  color: #244f79;
  border: 1px solid rgba(62, 119, 176, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 30px rgba(45, 79, 112, .12);
  font-size: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}

html[data-project="smart-water"] .case-system-media__asset > button:hover > span,
html[data-project="smart-water"] .case-system-media__asset > button:focus-visible > span {
  opacity: 1;
  transform: translateY(0);
}

html[data-project="smart-water"] .case-system-media__asset > button:focus-visible {
  outline: 2px solid #3e82c4;
  outline-offset: 8px;
}

@media (max-width: 720px) {
  html[data-project="smart-water"] .case-system-media__stack {
    gap: 64px;
  }

  html[data-project="smart-water"] .case-system-media__asset > header {
    align-items: flex-start;
    margin-bottom: 14px;
  }

  html[data-project="smart-water"] .case-system-media__asset > button > span {
    display: none;
  }
}

/* Scroll-linked system walkthrough. */
html[data-project="smart-water"] .case-system-guide__tabs button {
  min-height: 96px;
  overflow: hidden;
}

html[data-project="smart-water"] .case-system-guide__summary {
  display: grid;
  gap: 8px;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  color: #526f8b;
  font: 400 12px/1.65 var(--sans);
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .35s ease, margin .35s ease, opacity .25s ease, transform .35s ease;
}

html[data-project="smart-water"] .case-system-guide__summary span {
  display: block;
}

html[data-project="smart-water"] .case-system-guide__summary b {
  display: inline-block;
  margin-right: 7px;
  color: #2f75b5;
  font-weight: 600;
}

html[data-project="smart-water"] .case-system-guide__tabs button[aria-selected="true"] .case-system-guide__summary {
  max-height: 156px;
  margin-top: 10px;
  opacity: 1;
  transform: translateY(0);
}

html[data-project="smart-water"] .case-system-designs__panels {
  display: grid;
  gap: clamp(150px, 17vw, 260px);
}

html[data-project="smart-water"] .case-system-design {
  scroll-margin-top: 178px;
}

html[data-project="smart-water"] .case-system-design + .case-system-design {
  padding-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid rgba(62, 120, 176, .17);
}

@media (max-width: 980px) {
  html[data-project="smart-water"] .case-system-designs__panels {
    gap: 112px;
  }

  html[data-project="smart-water"] .case-system-design {
    scroll-margin-top: 170px;
  }

  html[data-project="smart-water"] .case-system-guide__summary {
    display: none;
  }
}