/* Case studies share the site's paper, display type, navigation and blue accents. */
.case-study-page { background: var(--paper); color: var(--ink); }
.case-study-page * { box-sizing: border-box; }
#wave-home-design .case-shell { width: min(calc(100% - 7rem), 1180px); margin-inline: auto; }
.case-hero { padding-top: 3rem; }
.case-back, .case-link, .case-side-link { display: inline-flex; align-items: center; gap: .6rem; color: var(--blue); min-height: 44px; text-decoration: none; }
.case-back { margin-bottom: 2.4rem; font-size: .875rem; }
.case-kicker { margin: 0 0 1.2rem; color: var(--blue); font: 500 .72rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.case-hero h1 { max-width: 1040px; margin: 0; font: 400 clamp(2.8rem, 5.8vw, 5.4rem)/1.06 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.case-hero h1 span { color: var(--blue); }
.case-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 3rem; border-block: 1px solid var(--line); }
.case-metrics > div { padding: 2rem 2.1rem 2.2rem; border-left: 1px solid var(--line); min-width: 0; }
.case-metrics > div:first-child { border-left: 0; padding-left: 0; }
.case-metrics .case-value { margin: 0 0 .75rem; color: var(--ink); font: 400 clamp(2.6rem, 5.8vw, 5rem)/1 var(--sans); letter-spacing: -.055em; white-space: nowrap; }
.case-value span { font-size: .7em; }
.case-metrics h2 { max-width: 250px; margin: 0; font: 400 1rem/1.5 var(--sans); letter-spacing: -.01em; color: var(--muted); }
.case-ref { color: var(--blue); font: 500 .65rem/1 var(--mono); vertical-align: super; margin-left: .3rem; text-decoration: none; padding: .2rem; }
.case-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: clamp(3rem, 7vw, 6.5rem); padding-top: 4rem; }
.case-facts { align-self: start; position: sticky; top: 7rem; }
.case-facts h2 { margin: 0 0 1.4rem; font: 500 .75rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.case-facts dl { margin: 0; border-top: 1px solid var(--line); }
.case-facts dl > div { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.case-facts dt { color: var(--muted); font: 400 .66rem/1.5 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.case-facts dd { margin: .4rem 0 0; font: 400 .9rem/1.55 var(--sans); }
.case-facts dd a { color: inherit; text-decoration: none; }
.case-facts dd span { color: var(--muted); font-size: .8rem; }
.case-side-link { margin-top: .8rem; font-size: .82rem; }
.case-content { min-width: 0; }
.case-content p { font-size: 1.04rem; line-height: 1.75; color: var(--muted); margin: 0; }
.case-content p + p { margin-top: 1rem; }
.case-content .case-kicker { color: var(--blue); font: 500 .72rem/1.5 var(--mono); margin-bottom: 1.05rem; }
.case-content .case-lead { margin: 0 0 1.5rem; color: var(--ink); font: 400 clamp(1.8rem, 3vw, 2.5rem)/1.23 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.case-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.case-section > h2 { margin: 0 0 1.4rem; font: 400 clamp(1.9rem, 3.4vw, 2.8rem)/1.12 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.case-impact { margin-top: 2.1rem; }
.case-impact + .case-impact { border-top: 1px solid var(--line); padding-top: 1.8rem; }
.case-impact-heading { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .7rem; }
.case-impact-heading > span { color: var(--blue); font: .75rem/1.5 var(--mono); }
.case-impact h3 { margin: 0; font: 500 1.14rem/1.5 var(--sans); letter-spacing: -.02em; }
.case-cost { margin-top: 1.5rem; padding: 1.7rem 2rem 1.3rem; border: 1px solid var(--line); background: var(--blue-surface); border-radius: 5px; }
.case-content .case-cost-label { color: var(--ink); font-size: .85rem; text-align: center; }
.case-fraction { width: fit-content; margin: 1rem auto 1.7rem; text-align: center; font: 400 1.4rem/1.45 var(--display); }
.case-fraction span { display: block; padding: .3rem .6rem; }
.case-fraction span:first-child { border-bottom: 1px solid #a2adc9; }
.case-cost-row { display: grid; grid-template-columns: 85px minmax(0,1fr) 50px; align-items: center; gap: 1rem; margin-top: .85rem; font-size: .82rem; color: var(--muted); }
.case-cost-row strong { font-weight: 500; text-align: right; }
.case-cost-track { height: 14px; border-radius: 2px; background: #e1e5ef; overflow: hidden; }
.case-cost-track i { display: block; height: 100%; background: #a2aabd; }
.case-cost-wave { color: var(--blue); }
.case-cost-wave i { background: var(--blue); min-width: 4px; }
.case-content .case-cost-note { margin-top: 1rem; font-size: .74rem; text-align: center; }
.case-deadline { display: flex; align-items: center; gap: 1.5rem; padding: 1.3rem 0 .2rem; }
.case-deadline > strong { color: var(--blue); font: 400 2.6rem/1.2 var(--sans); letter-spacing: -.05em; white-space: nowrap; }
.case-deadline > strong span { font-size: 1rem; letter-spacing: 0; }
.case-deadline p { font-size: .82rem; line-height: 1.6; color: var(--ink); }
.case-deadline p span { color: var(--muted); }
.case-link { margin-top: 1rem; font-size: .95rem; }
.case-notes { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.case-notes h2 { margin: 0 0 .9rem; font: 500 .78rem/1.5 var(--sans); color: var(--muted); }
.case-notes ol { margin: 0; padding-left: 1.1rem; }
.case-notes li, .case-notes p, .case-notes > a { font: 400 .76rem/1.65 var(--sans); color: var(--muted); }
.case-notes li { padding-left: .3rem; margin-bottom: .8rem; scroll-margin-top: 7rem; }
.case-notes strong { font-weight: 600; }
.case-notes > a { display: inline-block; margin-top: .7rem; color: var(--blue); }
.case-cta { margin: 4rem 0 4.5rem; padding: 2.7rem 3rem; display: flex; justify-content: space-between; align-items: center; gap: 3rem; background: var(--blue-surface); border: 1px solid var(--blue-border); border-radius: 6px; }
.case-cta .case-kicker { margin-bottom: .85rem; }
.case-cta h2 { margin: 0; font: 400 clamp(2rem, 3.4vw, 3rem)/1.1 var(--display); letter-spacing: -.04em; }
.case-cta p:last-child { max-width: 620px; margin: 1rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--muted); }
.case-cta .wf-button { flex-shrink: 0; }
#wave-home-design .case-footer { border-top: 1px solid var(--line); padding: 2rem 38px; display: flex; align-items: center; gap: 2rem; }
#wave-home-design .case-footer p { color: var(--muted); font-size: .8rem; }
.case-footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-left: auto; font-size: .8rem; }
.case-footer nav a { padding-block: .6rem; }
.case-study-page a:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
.case-back:hover, .case-link:hover, .case-side-link:hover, .case-facts a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1000px) {
  #wave-home-design .case-shell { width: calc(100% - 4rem); }
  .case-layout { grid-template-columns: 190px minmax(0,1fr); gap: 2.8rem; }
  .case-metrics > div { padding-inline: 1.5rem; }
  .case-cta { padding: 2rem; gap: 2rem; }
}
@media (max-width: 700px) {
  #wave-home-design .case-shell { width: calc(100% - 2.75rem); }
  .case-hero { padding-top: 1.5rem; }
  .case-back { margin-bottom: 1.6rem; }
  .case-hero h1 { font-size: clamp(2.6rem, 8.6vw, 3.8rem); }
  .case-metrics { grid-template-columns: 1fr; margin-top: 2rem; }
  .case-metrics > div, .case-metrics > div:first-child { border-left: 0; border-top: 1px solid var(--line); padding: 1.3rem 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0,1fr); align-items: center; gap: 1.2rem; }
  .case-metrics > div:first-child { border-top: 0; }
  .case-metrics .case-value { font-size: clamp(2.5rem, 8.4vw, 3.4rem); margin: 0; }
  .case-metrics h2 { font-size: .85rem; }
  .case-layout { display: flex; flex-direction: column; gap: 2.5rem; padding-top: 2.5rem; }
  .case-facts { position: static; width: 100%; }
  .case-facts dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 1.5rem; }
  .case-section { margin-top: 2.3rem; padding-top: 1.6rem; }
  .case-cost { padding: 1.3rem 1rem; }
  .case-cost-row { grid-template-columns: 68px minmax(0,1fr) 42px; gap: .7rem; }
  .case-deadline { gap: 1rem; }
  .case-deadline > strong { font-size: 2.3rem; }
  .case-cta { display: block; margin-block: 2.8rem; padding: 1.7rem; }
  .case-cta .wf-button { margin-top: 1.5rem; }
  #wave-home-design .case-footer { padding: 2rem 1.4rem; flex-wrap: wrap; gap: 1rem; }
  .case-footer nav { margin-left: 0; width: 100%; gap: 1rem; }
}
@media print {
  .case-study-page .wf-header-bar, .case-back, .case-cta, .case-footer { display: none !important; }
  #wave-home-design .case-shell { width: 100%; }
  .case-facts { position: static; }
  .case-layout { gap: 2rem; }
  .case-section, .case-cost, .case-impact { break-inside: avoid; }
}
/* The case-study body sits outside .wf-site, so resolve shared button colors here. */
#wave-home-design .case-cta a.wf-button { background: var(--ink); color: var(--paper); }
#wave-home-design .case-cta a.wf-button:hover { background: #454550; }

.case-metric-note { margin: .45rem 0 0; color: var(--muted); font: 400 .75rem/1.5 var(--sans); }
@media (max-width: 700px) { .case-metric-note { grid-column: 2; margin: -.65rem 0 0; } }

@media (max-width: 700px) {
  .case-metrics > div, .case-metrics > div:first-child { row-gap: .45rem; }
  .case-metrics > div:last-child .case-value { grid-row: 1 / span 2; }
  .case-metrics h2 { font-size: .94rem; }
  .case-metric-note { margin: 0; }
  .case-notes li, .case-notes p, .case-notes > a { font-size: .8125rem; line-height: 1.7; }
}