/* MediGlow project story: scoped to preserve the global header and footer. */
.case-study-page { background: #fff; color: #163746; }
.case-study-page .container { max-width: 1240px; width: calc(100% - 64px); }
.case-study-page :where(main) h1, .case-study-page :where(main) h2, .case-study-page :where(main) h3 { color: #163746; }
.case-study-page :where(main) p { color: #526974; }
.case-study-page :is(a, button, summary):focus-visible { outline: 3px solid #43a1a1; outline-offset: 5px; }
.cs-section { padding: 90px 0; }
.cs-soft { background: #f4f7f5; }
.cs-eyebrow { font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 1.9px; text-transform: uppercase; margin: 0 0 18px; color: #3b7779 !important; }
.cs-heading { max-width: 770px; margin-bottom: 34px; }
.cs-heading h2 { font-size: clamp(29px, 3vw, 41px); line-height: 1.18; letter-spacing: -1.2px; margin: 0 0 18px; text-wrap: balance; }
.cs-heading > p:last-child:not(.cs-eyebrow) { font-size: 18px; line-height: 1.8; max-width: 730px; margin: 0; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cs-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 13px 20px; border: 1px solid #17566c; border-radius: 7px; background: #17566c; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.4; text-align: center; transition: background 180ms ease, transform 180ms ease; }
.cs-button:hover { background: #103e50; transform: translateY(-2px); }
.cs-button-outline { color: #215464; background: transparent; border-color: #b8cdd0; }
.cs-button-outline:hover { background: #e5eff0; }
.cs-hero { padding: 30px 0 80px; background: radial-gradient(ellipse at 100% 60%, #d8e9e4, transparent 65%), #f6f9f6; overflow: hidden; }
.cs-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; color: #5a737c; margin-bottom: 48px; }
.cs-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.cs-hero-grid { display: grid; grid-template-columns: .95fr 1.15fr; gap: 48px; align-items: center; }
.cs-hero h1 { font-size: clamp(34px, 3.25vw, 47px); line-height: 1.11; letter-spacing: -1.65px; max-width: 650px; text-wrap: balance; }
.cs-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #499a83; margin-right: 6px; }
.cs-hero-intro { font-size: 18px; line-height: 1.8; margin: 24px 0 18px; max-width: 530px; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; }
.cs-tags span { font-size: 14px; font-weight: 700; color: #4a7378; padding: 5px 9px; border: 1px solid #cfdeda; background: #ffffff6b; border-radius: 4px; }
.cs-hero-visual { position: relative; padding: 25px 32px 35px 0; }
.cs-browser { position: relative; border-radius: 13px; overflow: hidden; border: 1px solid #c5d9d1; background: #fff; box-shadow: 0 25px 65px #153e4721; }
.cs-browser-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 34px; padding: 0 13px; background: #fff; border-bottom: 1px solid #dfe7e2; font-size: 14px; color: #6e8581; }
.cs-browser-dots { color: #b1c5bd; font-size: 14px; letter-spacing: 2px; }
.cs-screen-button { display: block; position: relative; width: 100%; border: 0; margin: 0; padding: 0; background: #eaf0ed; cursor: zoom-in; overflow: hidden; }
.cs-screen-button img { display: block; width: 100%; height: auto; transition: transform 350ms ease; }
.cs-enlarge { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 38px; height: 38px; color: #174e5b; border-radius: 50%; background: #fffffff2; box-shadow: 0 5px 15px #183c4620; font-size: 22px; }
.cs-phone { width: 23%; position: absolute; right: -5px; bottom: 48px; max-height: 355px; overflow: hidden; border: 5px solid #244947; border-radius: 22px; background: #fff; box-shadow: 0 12px 28px #133b462f; pointer-events: none; }
.cs-phone::before { content: ''; position: absolute; z-index: 1; top: 0; left: 35%; width: 30%; height: 8px; border-radius: 0 0 8px 8px; background: #244947; }
.cs-phone img { width: 100%; }
.cs-screen-caption { font-size: 14px; margin: 18px 0 0; color: #66817f !important; }
.cs-snapshot { padding: 35px 0; border-top: 1px solid #d9e4e1; border-bottom: 1px solid #d9e4e1; }
.cs-snapshot-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; gap: 24px; }
.cs-snapshot-grid > div { border-left: 1px solid #dce5e3; padding-left: 18px; }
.cs-snapshot-grid dt { font-size: 14px; color: #6d8485; margin-bottom: 7px; }
.cs-snapshot-grid dd { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.6; }
.cs-about-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 85px; }
.cs-prose p { font-size: 18px; line-height: 1.85; }
.cs-prose .cs-pull-line { border-left: 2px solid #79b29d; padding-left: 20px; color: #285a59; font-size: 18px; font-weight: 700; margin: 28px 0 0; }
.cs-challenge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cs-challenge-grid article { padding: 29px; border: 1px solid #dce6df; border-radius: 13px; background: #fff; transition: transform 200ms ease, box-shadow 200ms ease; }
.cs-challenge-grid h3 { font-size: 20px; margin: 23px 0 13px; line-height: 1.25; }
.cs-challenge-grid p { font-size: 16px; line-height: 1.8; margin: 0; }
.cs-icon { display: grid; place-items: center; width: 52px; height: 52px; color: #387f74; background: linear-gradient(135deg, #f1f8f4, #dfeee6); border-radius: 15px; border: 1px solid #d5e7dd; }
.cs-icon svg { width: 27px; height: 27px; }
.cs-approach-list { border-top: 1px solid #d7e3df; }
.cs-approach { display: grid; grid-template-columns: 64px 1fr 230px; gap: 28px; padding: 34px 0; border-bottom: 1px solid #d7e3df; align-items: start; }

.cs-approach .cs-eyebrow { font-size: 14px; margin-bottom: 10px; }
.cs-approach h3 { font-size: 23px; line-height: 1.25; margin-bottom: 13px; }
.cs-approach p { font-size: 16px; max-width: 640px; line-height: 1.8; margin-bottom: 10px; }
.cs-approach .cs-approach-tag { font-size: 14px; padding: 13px 15px; border-radius: 6px; background: #f1f6f3; color: #547972; margin: 3px 0 0; }
.cs-approach details { max-width: 660px; font-size: 16px; }
.cs-approach summary { padding: 12px 0; min-height: 44px; cursor: pointer; color: #285c68; font-weight: 700; }
.cs-approach ul { margin: 0 0 0 18px; padding: 0; color: #526974; line-height: 1.9; }
.cs-dark { background: radial-gradient(ellipse at 100% 15%, #295f65, transparent 65%), #163e50; }
.cs-dark .cs-heading h2, .cs-dark .cs-heading p { color: #fff; }
.cs-dark .cs-eyebrow { color: #a8d3c9 !important; }
.cs-funnel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.cs-search-example { padding: 24px; margin-top: 30px; max-width: 440px; border: 1px solid #688e93; border-radius: 10px; background: #ffffff08; }
.cs-search-example > span { font-size: 14px; color: #b6d3d3; }
.cs-search-example p { font-size: 22px; color: #fff !important; font-weight: 700; line-height: 1.4; margin: 12px 0; }
.cs-search-example small { font-size: 14px; color: #bdd7d4; }
.cs-funnel { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; }
.cs-funnel li { position: relative; width: calc(100% - var(--step) * 5%); margin-inline: auto; padding: 17px 20px; background: #eff8f4; border: 1px solid #dbebe5; border-radius: 9px; text-align: center; }
.cs-funnel li:not(:last-child)::after { content: '↓'; position: absolute; color: #b9d9d0; left: 50%; bottom: -22px; font-size: 17px; }
.cs-funnel strong { display: block; color: #255a58; font-size: 17px; }
.cs-funnel span { display: block; color: #52716e; font-size: 14px; line-height: 1.6; margin-top: 3px; }
.cs-loop-note { margin-top: 40px; padding-top: 25px; border-top: 1px solid #52747e; color: #c8dedc; font-size: 14px; }
.cs-loop-note > span { display: inline-block; font-size: 24px; margin-right: 12px; vertical-align: middle; }
.cs-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cs-metrics article { padding: 28px; border: 1px solid #dce6e2; background: #f8faf8; border-radius: 12px; }
.cs-metric-value { font-size: 50px; color: #609b8d; line-height: 1; display: block; margin-bottom: 20px; }
.cs-metrics h3 { font-size: 17px; line-height: 1.3; margin-bottom: 14px; }
.cs-pending { display: inline-block; background: #edf1e8; color: #637146; border-radius: 4px; font-size: 14px; padding: 5px 7px; }
.cs-metrics small { display: block; font-size: 14px; color: #708780; margin-top: 12px; }
.cs-outcome { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; padding: 28px; margin-top: 22px; background: #eaf3ef; border-radius: 10px; align-items: center; }
.cs-outcome h3 { font-size: 24px; line-height: 1.3; }
.cs-outcome p { font-size: 16px; line-height: 1.8; margin: 0; }
.cs-comparison { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; background: #fff; border: 1px solid #d6e3dd; border-radius: 12px; overflow: hidden; }
.cs-comparison th, .cs-comparison td { padding: 19px 24px; text-align: left; border-bottom: 1px solid #e1e9e5; vertical-align: top; }
.cs-comparison thead th { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #52736b; background: #e9f0eb; }
.cs-comparison thead th:last-child { background: #d5e8df; color: #295d50; }
.cs-comparison td { color: #5a706e; }
.cs-comparison td:last-child { background: #f0f7f2; color: #2e5c4b; }
.cs-comparison tr:last-child > * { border-bottom: 0; }
.cs-comparison tbody th { font-size: 16px; font-weight: 700; }
.cs-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.cs-gallery figure { margin: 0; min-width: 0; }
.cs-gallery-image { border: 1px solid #d5e2da; border-radius: 12px; background: #e8f0eb; padding: 14px; overflow: hidden; }
.cs-gallery-image .cs-screen-button { border-radius: 7px; height: 260px; box-shadow: 0 5px 15px #27483316; }
.cs-gallery-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cs-gallery-mobile .cs-gallery-image .cs-screen-button { width: 124px; margin-inline: auto; background: #fff; }
.cs-gallery-mobile .cs-gallery-image img { object-fit: cover; }
.cs-gallery figcaption { padding: 19px 3px 0; }
.cs-gallery h3 { font-size: 19px; margin-bottom: 9px; }
.cs-gallery p { font-size: 16px; line-height: 1.8; margin: 0; }
.cs-tech-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; }
.cs-stack { margin: 0 0 25px; }
.cs-stack > div { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; border-bottom: 1px solid #d5e3dc; padding: 16px 0; font-size: 16px; }
.cs-stack dt { color: #637f76; }
.cs-stack dd { margin: 0; font-weight: 700; color: #315b52; }
.cs-service-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-service-links a { display: inline-flex; gap: 12px; align-items: center; padding: 10px 13px; min-height: 44px; border: 1px solid #cfded5; border-radius: 6px; font-size: 14px; background: #fff; color: #385f56; }
.cs-service-links a:hover { background: #e9f3ec; }
.cs-testimonial { text-align: center; }
.cs-testimonial h2 { max-width: 770px; margin: 0 auto 32px; font-size: 36px; line-height: 1.2; letter-spacing: -1px; }
.cs-review-draft { max-width: 850px; margin: auto; padding: 40px; border: 1px dashed #c8d4c8; border-radius: 15px; background: #fbfcf9; }
.cs-draft-label { display: inline-block; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: #7b683e; background: #f5eede; padding: 7px 10px; border-radius: 4px; }
.cs-review-draft blockquote { margin: 22px 0; }
.cs-review-draft blockquote p { font-family: Georgia, serif; font-size: 26px; line-height: 1.55; color: #315a54 !important; margin: 0; }
.cs-review-draft .cs-review-caption { font-size: 14px; color: #718173; max-width: 650px; margin: 0 auto; }
.cs-final { background: radial-gradient(ellipse at 15% 100%, #2b6a68, transparent 70%), #143d51; text-align: center; }
.cs-final .cs-eyebrow { color: #b3d6c8 !important; }
.cs-final h2 { color: #fff !important; font-size: clamp(34px, 4vw, 50px); letter-spacing: -1.5px; max-width: 800px; margin: 0 auto 22px; line-height: 1.15; }
.cs-final p:not(.cs-eyebrow) { color: #cfdfdc; max-width: 680px; margin: 0 auto 25px; }
.cs-final-journey { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; color: #a3d3c5; font-size: 14px; font-weight: 700; margin: 30px 0; }
.cs-final .cs-actions { justify-content: center; }
.cs-final .cs-button { background: #e3f2e9; border-color: #e3f2e9; color: #1d544d; }
.cs-final .cs-button:hover { background: #fff; }
.cs-final .cs-button-outline { background: transparent; border-color: #6a9395; color: #fff; }
.cs-final .cs-button-outline:hover { background: #ffffff14; }
.cs-final-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 20px; font-size: 14px; color: #d0e1db; text-decoration: underline; text-underline-offset: 4px; }
.cs-lightbox { width: min(1200px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #9bb4b8; border-radius: 12px; background: #f6f9f7; color: #153e4b; box-shadow: 0 20px 90px #0005; }
.cs-lightbox::backdrop { background: #08242dde; backdrop-filter: blur(5px); }
.cs-lightbox-toolbar, .cs-lightbox-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 18px; }
.cs-lightbox-toolbar { border-bottom: 1px solid #d4e0da; }
.cs-lightbox h2 { font-size: 18px; line-height: 1.4; }
.cs-lightbox button { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #bdd0c7; border-radius: 6px; color: #244d4d; background: #fff; cursor: pointer; font-size: 20px; }
.cs-lightbox-image-wrap { display: flex; justify-content: center; overflow: auto; max-height: calc(100dvh - 210px); padding: 18px; background: #e3ece7; }
.cs-lightbox-image-wrap img { object-fit: contain; width: auto; max-width: 100%; max-height: calc(100dvh - 250px); height: auto; }
.cs-lightbox-bottom p { font-size: 14px; line-height: 1.6; text-align: center; margin: 0; max-width: 700px; }
html.cs-gallery-open { overflow: hidden; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cs-challenge-grid article:hover { transform: translateY(-5px); box-shadow: 0 12px 28px #254c3e0d; }
  .cs-gallery .cs-screen-button:hover img { transform: scale(1.025); }
}
@media (max-width: 1120px) {
  .cs-hero-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .cs-hero h1 { font-size: 38px; }
  .cs-snapshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-approach { grid-template-columns: 50px 1fr 180px; gap: 20px; }
  .cs-about-grid, .cs-funnel-grid, .cs-tech-grid { gap: 40px; }
  .cs-gallery-image .cs-screen-button { height: 210px; }
}
@media (max-width: 800px) {
  .case-study-page .container { width: calc(100% - 40px); }
  .cs-section { padding: 60px 0; }
  .cs-hero { padding: 18px 0 40px; }
  .cs-breadcrumb { margin-bottom: 22px; gap: 8px; }
  .cs-hero-grid, .cs-about-grid, .cs-funnel-grid, .cs-tech-grid { grid-template-columns: 1fr; gap: 32px; }
  .cs-hero h1 { font-size: clamp(34px, 6vw, 44px); max-width: 680px; letter-spacing: -1.1px; }
  .cs-hero-visual { max-width: 650px; padding-top: 0; width: 100%; justify-self: center; }
  .cs-hero .cs-eyebrow { font-size: 14px; }
  .cs-challenge-grid, .cs-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-approach { grid-template-columns: 40px 1fr; gap: 16px; }
  .cs-approach-tag { grid-column: 2; justify-self: start; }
  
  .cs-approach h3 { font-size: 22px; }
  .cs-approach .cs-approach-tag { margin-top: 0; }
  .cs-funnel { max-width: 600px; width: 100%; margin: auto; }
  .cs-outcome { grid-template-columns: 1fr; gap: 15px; }
  .cs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .cs-heading { margin-bottom: 26px; }
  .cs-about-grid .cs-heading, .cs-tech-grid .cs-heading { margin-bottom: 0; }
  .cs-review-draft { padding: 28px; }
  .cs-review-draft blockquote p { font-size: 23px; }
  .cs-testimonial h2 { font-size: 30px; }
}
@media (max-width: 560px) {
  .cs-hero h1 { font-size: 34px; }
  .cs-actions { flex-direction: column; }
  .cs-actions .cs-button { width: 100%; }
  .cs-hero-visual { padding-right: 16px; }
  .cs-phone { right: -3px; bottom: 44px; width: 25%; border-width: 3px; border-radius: 13px; }
  .cs-screen-caption { font-size: 14px; max-width: 260px; }
  .cs-snapshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cs-snapshot-grid > div { padding-left: 12px; }
  .cs-snapshot-grid dd { font-size: 14px; }
  .cs-challenge-grid, .cs-metrics, .cs-gallery { grid-template-columns: 1fr; }
  .cs-challenge-grid article { padding: 25px; }
  .cs-comparison, .cs-comparison tbody, .cs-comparison tr { display: block; width: 100%; }
  .cs-comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cs-comparison { border: 0; border-radius: 0; background: transparent; }
  .cs-comparison tbody tr { border: 1px solid #d3e2d8; border-radius: 10px; overflow: hidden; margin-bottom: 14px; background: #fff; }
  .cs-comparison tbody th, .cs-comparison tbody td { display: block; padding: 15px 18px; }
  .cs-comparison td::before { content: attr(data-label); display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; color: #56776a; }
  .cs-gallery-image .cs-screen-button { height: 245px; }
  .cs-stack > div { grid-template-columns: 1fr; gap: 5px; }
  .cs-funnel li { width: calc(100% - var(--step) * 3%); padding: 15px 12px; }
  .cs-search-example { padding: 20px; }
  .cs-search-example p { font-size: 20px; }
  .cs-review-draft { padding: 25px 20px; }
  .cs-final-journey { gap: 7px; font-size: 14px; }
  .cs-lightbox { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .cs-lightbox-toolbar, .cs-lightbox-bottom { gap: 8px; padding: 8px; }
  .cs-lightbox h2 { font-size: 16px; }
  .cs-lightbox-bottom p { font-size: 14px; }
  .cs-lightbox-image-wrap { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .case-study-page *, .case-study-page *::before, .case-study-page *::after { animation: none !important; transition: none !important; }
}

.cs-lightbox-actions { display: flex; align-items: center; gap: 16px; }
.cs-lightbox-actions a { display: inline-flex; align-items: center; min-height: 44px; color: #285e61; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* Readable text and illustrated project cards. */
.cs-approach-list { display: grid; gap: 20px; border: 0; }
.cs-approach { --card-accent: #287b72; --card-tint: #e5f3ed; position: relative; grid-template-columns: 76px minmax(0, 1fr) 220px; gap: 26px; padding: 30px; border: 1px solid #d6e5df; border-radius: 18px; background: linear-gradient(115deg, #f2f8f5, #fff 55%); box-shadow: 0 8px 24px #16374606; }
.cs-approach:nth-child(3n+2), .cs-metrics article:nth-child(3n+2) { --card-accent: #3c66a0; --card-tint: #e9f0fc; }
.cs-approach:nth-child(3n), .cs-metrics article:nth-child(3n) { --card-accent: #856237; --card-tint: #f7efdf; }
.cs-approach-icon, .cs-metric-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 21px; color: var(--card-accent); background: var(--card-tint); border: 1px solid #ffffff; box-shadow: 0 6px 14px #1637460a; }
.cs-approach-icon svg, .cs-metric-icon svg { width: 34px; height: 34px; }
.cs-approach .cs-eyebrow { color: var(--card-accent) !important; letter-spacing: 1.2px; }
.cs-approach .cs-approach-tag { background: var(--card-tint); color: var(--card-accent); padding: 16px; line-height: 1.7; }
.cs-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.cs-metrics article { --card-accent: #287b72; --card-tint: #e5f3ed; position: relative; grid-column: span 2; display: flex; flex-direction: column; padding: 28px; overflow: hidden; border: 1px solid #d5e3e2; border-radius: 20px; background: linear-gradient(145deg, #fff 35%, var(--card-tint)); box-shadow: 0 12px 30px #16374609; transition: transform 200ms ease, box-shadow 200ms ease; }
.cs-metrics article:nth-last-child(-n+2) { grid-column: span 3; }
.cs-metrics article::before { content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 4px; border-radius: 0 0 5px 5px; background: var(--card-accent); }
.cs-metric-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; }
.cs-metric-icon { width: 60px; height: 60px; border-radius: 18px; }
.cs-metric-value { font-size: 38px; color: var(--card-accent); margin: 0; }
.cs-metrics h3 { font-size: 21px; margin-bottom: 12px; }
.cs-metric-description { font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
.cs-pending { align-self: flex-start; margin-top: auto; background: #fff; border: 1px solid #cbdad4; color: #476458; border-radius: 20px; padding: 7px 12px; line-height: 1.5; }
.cs-metrics small { padding-top: 16px; border-top: 1px solid #cdded8; margin-top: 18px; color: #506b64; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
 .cs-metrics article:hover { transform: translateY(-4px); box-shadow: 0 18px 36px #16374613; }
}
@media (max-width: 1120px) {
 .cs-approach { grid-template-columns: 72px minmax(0, 1fr); }
 .cs-approach-tag { grid-column: 2; justify-self: start; }
}
@media (max-width: 800px) {
 .cs-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .cs-metrics article, .cs-metrics article:nth-last-child(-n+2) { grid-column: auto; }
 .cs-metrics article:last-child { grid-column: 1 / -1; }
 .cs-lightbox-toolbar { flex-wrap: wrap; }
}
@media (max-width: 560px) {
 .cs-approach { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 20px; }
 .cs-approach-tag { grid-column: 1; }
 .cs-approach-icon { width: 64px; height: 64px; }
 .cs-metrics { grid-template-columns: minmax(0, 1fr); }
 .cs-metrics article { padding: 25px; }
 .cs-browser-bar { height: auto; min-height: 38px; flex-wrap: wrap; padding-block: 6px; }
}

/* Client profile: a visual introduction to the clinic and the partnership. */
.cs-client { background: radial-gradient(ellipse at 0 60%, #edf5ef, transparent 60%), #fff; }
.cs-client > .container > .cs-heading { max-width: 790px; }
.cs-client-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.cs-client-visual { margin: 0; padding: 20px; background: linear-gradient(140deg, #e4f0e9, #f6f9f5); border: 1px solid #d2e2d9; border-radius: 24px; box-shadow: 0 18px 45px #254e3f0b; }
.cs-client-location { display: flex; align-items: center; gap: 8px; color: #3c6b5e; font-size: 14px; font-weight: 700; padding: 0 0 16px; }
.cs-client-location svg { width: 20px; height: 20px; }
.cs-client-screen { border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #d4e1d8; box-shadow: 0 8px 22px #244e4212; }
.cs-client-screen img { width: 100%; height: auto; }
.cs-client-visual figcaption { display: flex; gap: 14px; align-items: center; padding: 22px 0 2px; }
.cs-client-seal { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; background: #fff; color: #327a6c; border: 1px solid #cfe1d7; border-radius: 14px; }
.cs-client-seal svg { width: 26px; height: 26px; }
.cs-client-visual figcaption strong { display: block; font-size: 18px; color: #254e47; line-height: 1.4; }
.cs-client-visual figcaption div > span { display: block; font-size: 14px; color: #56736a; margin-top: 5px; }
.cs-client-story > p { font-size: 18px; line-height: 1.8; }
.cs-client-story .cs-client-lead { color: #234f4b; font-size: 25px; font-weight: 700; line-height: 1.4; letter-spacing: -.4px; }
.cs-client-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.cs-client-highlights > div { padding: 18px 14px; background: #f2f7f4; border: 1px solid #dce8e1; border-radius: 12px; }
.cs-client-highlights > div:nth-child(2) { background: #f0f5fc; border-color: #dce5f0; }
.cs-client-highlights > div:nth-child(3) { background: #faf6ec; border-color: #eae2d3; }
.cs-client-highlights svg { display: block; width: 26px; height: 26px; color: #32786b; margin-bottom: 14px; }
.cs-client-highlights strong { display: block; font-size: 16px; line-height: 1.45; margin-bottom: 8px; }
.cs-client-highlights span { display: block; font-size: 14px; line-height: 1.6; color: #526974; }
.cs-client-brief { display: flex; align-items: center; gap: 24px; padding: 30px; border-radius: 18px; margin-top: 34px; background: linear-gradient(110deg, #173e50, #29635f); }
.cs-client-brief-icon { display: grid; place-items: center; flex-shrink: 0; width: 60px; height: 60px; border: 1px solid #ffffff30; border-radius: 17px; background: #ffffff0d; color: #bfe5d7; }
.cs-client-brief-icon svg { width: 30px; height: 30px; }
.cs-client-brief .cs-eyebrow { display: block; color: #bce0d4 !important; margin-bottom: 8px; }
.cs-client-brief p { color: #fff !important; font-size: 20px; line-height: 1.55; margin: 0; max-width: 880px; }
.cs-client-brief-arrow { margin-left: auto; color: #bfe5d7; font-size: 36px; }
@media (max-width: 1120px) { .cs-client-grid { gap: 28px; } .cs-client-highlights { grid-template-columns: 1fr; } .cs-client-highlights > div { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; padding: 14px; } .cs-client-highlights svg { grid-row: span 2; margin: 0; } .cs-client-highlights strong { margin-bottom: 3px; } }
@media (max-width: 800px) { .cs-client-grid { grid-template-columns: 1fr; } .cs-client-visual { max-width: 620px; width: 100%; justify-self: center; } .cs-client-story .cs-client-lead { font-size: 23px; } }
@media (max-width: 560px) { .cs-client-visual { padding: 14px; border-radius: 18px; } .cs-client-brief { align-items: flex-start; gap: 16px; padding: 24px; flex-wrap: wrap; } .cs-client-brief p { font-size: 18px; } .cs-client-brief-arrow { display: none; } }

/* Search journey: connected stages with a distinct enquiry destination. */
.cs-funnel-grid { grid-template-columns: .9fr 1.1fr; gap: 70px; }
.cs-funnel { position: relative; gap: 16px; padding: 8px 0; }
.cs-funnel::before { content: ''; position: absolute; left: 45px; top: 35px; bottom: 35px; width: 2px; background: linear-gradient(#8bbbc0, #9ce2bf); }
.cs-funnel li { --journey-tone: #c6e5ec; position: relative; width: 100%; display: grid; grid-template-columns: 54px minmax(0, 1fr) 24px; align-items: center; gap: 18px; padding: 20px 18px; margin: 0; text-align: left; border: 1px solid #ffffff30; border-radius: 17px; background: linear-gradient(120deg, #315b6c, #214b5d); box-shadow: 0 10px 26px #09263520; transition: transform 200ms ease, border-color 200ms ease; }
.cs-funnel li:nth-child(2), .cs-funnel li:nth-child(3) { --journey-tone: #d2dffb; }
.cs-funnel li:nth-child(4), .cs-funnel li:nth-child(5) { --journey-tone: #f0dfb8; }
.cs-funnel li:not(:last-child)::after { content: ''; left: 41px; bottom: -12px; width: 8px; height: 8px; border: 2px solid #a5c8c5; border-radius: 50%; background: #1b4756; z-index: 1; }
.cs-funnel .cs-journey-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0; border: 1px solid #ffffff30; border-radius: 16px; color: var(--journey-tone); background: #ffffff0b; }
.cs-journey-icon svg { width: 27px; height: 27px; }
.cs-funnel .cs-journey-phase { margin: 0 0 4px; color: var(--journey-tone); font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.cs-funnel strong { color: #fff; font-size: 21px; line-height: 1.3; }
.cs-funnel .cs-journey-description { color: #d7e6e9; font-size: 16px; line-height: 1.6; margin-top: 6px; }
.cs-funnel .cs-journey-direction { color: #bcd7d7; font-size: 24px; margin: 0; text-align: center; }
.cs-funnel li:last-child { --journey-tone: #255f50; background: linear-gradient(120deg, #e2f4e9, #c8e8d8); border-color: #b4ddc9; box-shadow: 0 12px 30px #071e302e; }
.cs-funnel li:last-child strong { color: #163f3c; }
.cs-funnel li:last-child .cs-journey-description { color: #365e54; }
.cs-funnel li:last-child .cs-journey-icon { background: #ffffff8c; border-color: #aacfbf; }
.cs-funnel li:last-child .cs-journey-direction { color: #286753; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .cs-funnel li:hover { transform: translateX(5px); border-color: #b4dcd2; } }
@media (max-width: 1120px) { .cs-funnel-grid { gap: 36px; } }
@media (max-width: 800px) { .cs-funnel-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cs-funnel li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 14px; } .cs-funnel .cs-journey-icon { width: 44px; height: 44px; border-radius: 13px; } .cs-funnel .cs-journey-direction { display: none; } .cs-funnel::before { left: 36px; } .cs-funnel li:not(:last-child)::after { left: 32px; } }

/* Snapshot and technology cards share an animated colour accent. */
.cs-snapshot { padding: 48px 0; background: linear-gradient(125deg, #f0f6f3, #f5f8fd); }
.cs-snapshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cs-snapshot-grid > div, .cs-stack > div { --accent: #287b72; --tint: #ecf7f1; position: relative; padding: 24px; border: 1px solid transparent; border-radius: 17px; background: linear-gradient(130deg, #fff, var(--tint)) padding-box, linear-gradient(110deg, #a4d5c5, #bed0ef, #decce9, #a4d5c5) border-box; background-size: 100% 100%, 300% 100%; box-shadow: 0 8px 24px #16374608; transition: box-shadow 250ms ease, transform 250ms ease; }
.cs-colour-card:nth-child(3n+2) { --accent: #41699f; --tint: #eef3fc; }
.cs-colour-card:nth-child(3n) { --accent: #825c8f; --tint: #f6eff9; }
.cs-snapshot-grid dt, .cs-stack dt { display: flex; align-items: center; gap: 12px; color: var(--accent); font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.cs-detail-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--tint, #eaf4ed); color: var(--accent, #387b6e); border: 1px solid #d6e4e2; }
.cs-detail-icon svg { width: 24px; height: 24px; }
.cs-snapshot-grid dd { font-size: 18px; line-height: 1.5; padding-left: 54px; }
.cs-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cs-stack > div { display: block; }
.cs-stack dd { font-size: 18px; line-height: 1.5; color: #214858; }
.cs-tech-grid { grid-template-columns: .8fr 1.2fr; gap: 60px; }
.cs-services-title { font-size: 20px; margin: 30px 0 16px; }
.cs-service-links { gap: 10px; }
.cs-service-links a { justify-content: space-between; font-size: 16px; border-radius: 10px; padding: 12px 16px; background: #fff; transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease; }
.cs-service-links a:is(:hover, :focus-visible) { background: #215d67; border-color: #215d67; color: #fff; box-shadow: 0 7px 18px #17465218; }
/* Preserve table semantics while giving the comparison a clear visual hierarchy. */
.cs-comparison { border-spacing: 0 10px; border: 0; background: transparent; overflow: visible; }
.cs-comparison th, .cs-comparison td { padding: 22px; border-top: 1px solid #dce7e0; border-bottom: 1px solid #dce7e0; }
.cs-comparison thead th { background: #e8eeeb; font-size: 20px; text-transform: none; letter-spacing: 0; color: #456058; }
.cs-comparison thead th:first-child { border-radius: 14px 0 0 14px; }
.cs-comparison thead th:last-child { background: linear-gradient(110deg, #194c55, #337667); color: #fff; border-radius: 0 14px 14px 0; }
.cs-table-label { display: block; font-size: 14px; font-weight: 400; margin-bottom: 5px; }
.cs-comparison tbody th { background: #fff; width: 28%; font-size: 16px; border-left: 1px solid #dce7e0; border-radius: 14px 0 0 14px; }
.cs-comparison-focus { display: flex; align-items: center; gap: 14px; }
.cs-comparison td { background: #f5f6f4; width: 36%; font-size: 16px; line-height: 1.65; }
.cs-comparison td:last-child { background: linear-gradient(110deg, #e9f5ee, #f2f8f2); border-right: 1px solid #c9e0d1; border-left: 3px solid #7cb79f; color: #285c4c; border-radius: 0 14px 14px 0; font-weight: 600; }
.cs-comparison tr:last-child > * { border-bottom: 1px solid #dce7e0; }
@keyframes cs-colour-flow { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }
@media (prefers-reduced-motion: no-preference) {
 .cs-colour-card.cs-colour-revealed { animation: cs-colour-flow 1800ms ease var(--reveal-delay, 0ms) 2 alternate; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
 .cs-colour-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px #235b4920; animation: cs-colour-flow 1400ms ease 2 alternate; }
 .cs-comparison tbody tr:hover td:last-child { background: linear-gradient(110deg, #d6eee1, #e3f0f8, #e9e5f7); background-size: 300% 100%; animation: cs-after-colour 1800ms ease 2 alternate; }
}
@keyframes cs-after-colour { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (max-width: 1120px) { .cs-tech-grid { gap: 32px; grid-template-columns: 1fr 1.2fr; } .cs-stack > div { padding: 18px; } }
@media (max-width: 800px) { .cs-snapshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-tech-grid { grid-template-columns: 1fr; } .cs-comparison th, .cs-comparison td { padding: 16px; } .cs-comparison-focus { flex-direction: column; align-items: flex-start; gap: 10px; } }
@media (max-width: 560px) {
 .cs-snapshot-grid { gap: 12px; }
 .cs-snapshot-grid > div { padding: 18px 14px; }
 .cs-snapshot-grid dt { flex-direction: column; align-items: flex-start; gap: 10px; }
 .cs-snapshot-grid dd { padding: 0; font-size: 16px; }
 .cs-stack { grid-template-columns: 1fr; }
 .cs-comparison tbody tr { box-shadow: 0 6px 18px #234a3a08; }
 .cs-comparison tbody th, .cs-comparison tbody td { width: 100%; border-radius: 0; border: 0; border-bottom: 1px solid #dce7e0; padding: 18px; }
 .cs-comparison-focus { flex-direction: row; align-items: center; }
 .cs-comparison td:last-child { border-radius: 0; border-left: 3px solid #7cb79f; }
 .cs-comparison td::before { font-size: 14px; }
}

/* Editorial review panel and coordinated image/card motion. */
.cs-testimonial { position: relative; text-align: left; background: radial-gradient(ellipse at 90% 15%, #dfeee8, transparent 65%), #f5f8f5; }
.cs-review-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 64px; }
.cs-review-intro h2 { font-size: clamp(30px, 3vw, 42px); text-align: left; margin: 0 0 22px; line-height: 1.2; }
.cs-review-intro > p:not(.cs-eyebrow) { font-size: 18px; line-height: 1.8; }
.cs-review-brand { display: flex; gap: 16px; align-items: center; margin-top: 32px; }
.cs-review-monogram { display: grid; place-items: center; width: 58px; height: 58px; flex-shrink: 0; border-radius: 17px; background: #dfece4; color: #376a5b; border: 1px solid #c6dbce; font: 34px Georgia, serif; }
.cs-review-brand strong { display: block; font-size: 18px; }
.cs-review-brand div > span { display: block; font-size: 14px; color: #537469; margin-top: 5px; }
.cs-review-draft { position: relative; width: 100%; max-width: none; padding: 42px; background: linear-gradient(140deg, #173e50, #28685f); border: 1px solid #568a7e; border-radius: 26px; box-shadow: 0 24px 60px #244d4125; overflow: hidden; }
.cs-review-draft::after { content: ''; position: absolute; width: 240px; height: 240px; right: -150px; bottom: -150px; border: 35px solid #c0ead51a; border-radius: 50%; pointer-events: none; }
.cs-review-quote { display: block; font: 96px/.75 Georgia, serif; color: #a6d6c2; height: 65px; }
.cs-review-draft .cs-draft-label { color: #d7e9e2; background: #ffffff12; border: 1px solid #8cb4a65c; font-size: 14px; text-transform: none; letter-spacing: .2px; }
.cs-review-draft blockquote { margin: 26px 0 30px; }
.cs-review-draft blockquote p { color: #fff !important; font-size: clamp(24px, 2.2vw, 31px); line-height: 1.5; }
.cs-review-person { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid #9dc7b75c; }
.cs-review-person-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; background: #c8e7d7; color: #225c4c; border-radius: 50%; font-size: 24px; }
.cs-review-person strong { display: block; font-size: 17px; color: #fff; }
.cs-review-person div > span { display: block; font-size: 14px; color: #c4ddd4; margin-top: 5px; }
.cs-review-draft .cs-review-caption { font-size: 14px; line-height: 1.7; color: #c7ddd5; margin: 22px 0 0; }
.case-study-page main [data-cs-motion-card] { transition: border-color 250ms ease, box-shadow 250ms ease, transform 350ms ease; }
.case-study-page main [data-cs-motion-card]:is(:hover,:focus-within) { border-color: #72aaa2; box-shadow: 0 16px 36px #214e4a18; }
.cs-gallery-image, .cs-client-screen, .cs-browser { overflow: hidden; }
.cs-gallery-image img, .cs-client-screen img, .cs-browser img { transition: transform 850ms cubic-bezier(.2,.7,.25,1); }
.cs-icon svg, .cs-approach-icon svg, .cs-metric-icon svg, .cs-detail-icon svg { transition: transform 450ms cubic-bezier(.2,.7,.25,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
 .case-study-page main [data-cs-motion-card]:hover { transform: translateY(-5px); }
 .cs-gallery figure:hover .cs-screen-button img, .cs-gallery .cs-screen-button:focus-visible img { transform: scale(1.06) translateY(-2%); }
 .cs-client-visual:hover .cs-client-screen img, .cs-browser:hover .cs-screen-button img { transform: scale(1.035); }
 [data-cs-motion-card]:hover > :is(.cs-icon,.cs-approach-icon) svg, .cs-metrics article:hover .cs-metric-icon svg, .cs-colour-card:hover .cs-detail-icon svg { transform: rotate(-8deg) scale(1.12); }
 .cs-review-draft:hover { box-shadow: 0 28px 65px #1b504136; }
}
@media (max-width: 800px) { .cs-review-layout { grid-template-columns: 1fr; gap: 32px; } .cs-review-draft { padding: 32px; } }
@media (max-width: 560px) { .cs-review-draft { padding: 28px 24px; border-radius: 20px; } .cs-review-person { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .case-study-page main [data-cs-motion-card], .case-study-page main [data-cs-motion-card] * { animation: none !important; transition: none !important; transform: none !important; } }