.wv-service-hero { padding: clamp(2rem, 5vw, 4.5rem) 0 var(--wv-section); background: var(--wv-paper-light); }
.wv-service-hero__layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.72fr); align-items: center; gap: clamp(3rem, 9vw, 9rem); }
.wv-breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0 0 2.5rem; padding: 0; color: var(--wv-muted); font-size: 0.9rem; list-style: none; }
.wv-breadcrumbs li + li::before { content: "/"; margin-right: 0.55rem; }
.wv-service-hero h1 { max-width: 13ch; margin: 0; font-size: clamp(3rem, 5.3vw, 5rem); font-weight: 400; line-height: 0.98; }
.wv-service-hero__intro { max-width: 42rem; margin: 1.75rem 0 0; color: var(--wv-muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; }
.wv-service-hero .wv-actions { margin-top: 2rem; display: flex; align-items: center; flex-wrap: wrap; gap: .875rem; }
.wv-service-hero__visual { position: relative; min-height: 25rem; display: grid; place-items: center; }
.wv-browser-illustration { position: relative; width: min(100%, 29rem); aspect-ratio: 1.15; overflow: hidden; border: 1.5px solid var(--wv-ink); border-radius: var(--wv-radius-large); background: var(--wv-paper); }
.wv-browser-illustration__bar, .wv-browser-illustration__nav, .wv-browser-illustration__content, .wv-browser-illustration__card { position: absolute; display: block; }
.wv-browser-illustration__bar { top: 2rem; right: 2rem; left: 2rem; height: 0.75rem; border-radius: var(--wv-radius-round); background: var(--wv-ink); }
.wv-browser-illustration__nav { top: 4.25rem; left: 2rem; width: 23%; height: calc(100% - 6.25rem); border-right: 1px solid var(--wv-line); }
.wv-browser-illustration__content { top: 5.5rem; right: 2rem; left: 33%; height: 1.3rem; border-radius: var(--wv-radius-round); background: var(--wv-green); }
.wv-browser-illustration__content--short { top: 7.8rem; width: 42%; left: 33%; background: var(--wv-ink); }
.wv-browser-illustration__card { right: 2rem; bottom: 2rem; left: 33%; height: 36%; border: 1px solid var(--wv-line); border-radius: var(--wv-radius-card); background: var(--wv-paper-light); }
.wv-browser-illustration__card--small { right: auto; bottom: 3.5rem; left: 40%; width: 31%; height: 1rem; border: 0; border-radius: var(--wv-radius-round); background: var(--wv-terracotta); }
.wv-service-hero__visual picture, .wv-service-hero__visual img { position: absolute; right: -0.75rem; bottom: -1.25rem; width: clamp(8.25rem, 17vw, 11.5rem); height: auto; }
.wv-service-content { padding-block: var(--wv-section); }
.wv-service-content__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.4fr); gap: clamp(3rem, 10vw, 11rem); }
.wv-service-content__reading { max-width: 46rem; }
.wv-service-content__reading h2 { margin: 4rem 0 1.35rem; font-size: clamp(2rem, 3.3vw, 3rem); font-weight: 400; line-height: 1.06; }
.wv-service-content__reading h2:first-child { margin-top: 0; }
.wv-service-content__reading h3 { margin: 2.5rem 0 0.65rem; font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 400; line-height: 1.16; }
.wv-service-content__reading p { margin: 0.8rem 0 0; color: var(--wv-muted); }
.wv-service-content__reading p + p { margin-top: 1.15rem; }
.wv-service-content__reading ol { display: grid; gap: 1.25rem; margin: 1.75rem 0 0; padding: 0; list-style-position: inside; }
.wv-service-content__reading li { padding: 1.25rem 0; border-top: 1px solid var(--wv-line); color: var(--wv-muted); }
.wv-service-content__reading li:last-child { border-bottom: 1px solid var(--wv-line); }
.wv-service-content__reading li::marker { color: var(--wv-terracotta); font-weight: 700; }
.wv-service-content__reading strong { color: var(--wv-ink); }
.wv-service-content__reading a, .wv-service-aside a { text-decoration-color: var(--wv-terracotta); }
.wv-service-sidebar { align-self: start; position: sticky; top: 7.5rem; display: grid; gap: 1rem; }
.wv-service-aside { padding: 2rem; border: 1px solid var(--wv-line); border-radius: var(--wv-radius-card); background: var(--wv-paper-light); }
.wv-service-aside .wv-kicker { margin: 0; color: var(--wv-terracotta); }
.wv-service-aside h2 { margin: 1rem 0 1.75rem; font-size: 1.55rem; font-weight: 400; line-height: 1.13; }
.wv-service-aside ul { margin: 0; padding: 0; border-top: 1px solid var(--wv-line); list-style: none; }
.wv-service-aside li { border-bottom: 1px solid var(--wv-line); }
.wv-service-aside a { min-height: 44px; padding: 1rem 0; display: block; }
.wv-project-website { padding: 2rem; border: 1.5px solid var(--wv-ink); border-radius: var(--wv-radius-card); background: var(--wv-green); box-shadow: 5px 6px 0 rgba(31, 39, 35, .12); }
.wv-project-website .wv-kicker { margin: 0; color: var(--wv-ink); }
.wv-project-website h2 { margin: .8rem 0 0; font-size: 1.55rem; font-weight: 400; line-height: 1.13; }
.wv-project-website p:not(.wv-kicker) { margin: 1rem 0 1.35rem; color: var(--wv-ink); line-height: 1.55; }
.wv-project-website__link, .wv-project-website__pending { min-height: 44px; padding: .75rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 1px solid var(--wv-ink); border-radius: var(--wv-radius-round); font: 700 .82rem/1.2 var(--wv-font-ui); }
.wv-project-website__link { background: var(--wv-ink); color: #fff; text-decoration: none; transition: transform var(--wv-motion-control, 220ms) ease, background-color var(--wv-motion-control, 220ms) ease; }
.wv-project-website__link:hover, .wv-project-website__link:focus-visible { background: var(--wv-chalk); transform: translateY(-2px); }
.wv-project-website__pending { border-style: dashed; color: var(--wv-muted); background: rgba(255, 255, 255, .35); }
.wv-detail-page { background: var(--wv-paper); }
.wv-reference-hero__visual, .wv-about-hero__visual { position: relative; min-height: 30rem; display: grid; place-items: center; }
.wv-reference-hero__frame { width: min(100%, 31rem); padding: 1rem; border: 1.5px solid var(--wv-ink); border-radius: var(--wv-radius-large); background: var(--wv-chalk); transform: rotate(1.5deg); box-shadow: 10px 12px 0 rgba(31, 39, 35, .12); }
.wv-reference-hero__frame picture { display: block; overflow: hidden; border-radius: calc(var(--wv-radius-large) - .75rem); }
.wv-reference-hero__frame img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; }
.wv-reference-hero__label { position: absolute; right: 0; bottom: 1.4rem; max-width: 15rem; padding: .75rem 1rem; border: 1px solid var(--wv-ink); border-radius: var(--wv-radius-round); background: var(--wv-green); font: 700 .75rem/1.25 var(--wv-font-ui); text-align: center; }

.wv-about-hero__visual { isolation: isolate; }
.wv-about-hero__shape { position: absolute; z-index: -1; width: min(95%, 29rem); aspect-ratio: 1; border-radius: 46% 54% 42% 58% / 58% 42% 58% 42%; background: var(--wv-chalk); transform: rotate(-5deg); }
.wv-about-hero__visual picture { width: min(78%, 23rem); align-self: end; overflow: hidden; border-radius: var(--wv-radius-large); }
.wv-about-hero__visual img { width: 100%; max-height: 28rem; display: block; border-radius: inherit; object-fit: contain; object-position: bottom center; }
.wv-about-hero__visual > p { position: absolute; right: 0; bottom: 1rem; margin: 0; padding: .8rem 1rem; display: grid; gap: .15rem; border: 1px solid var(--wv-ink); border-radius: var(--wv-radius-card); background: var(--wv-green); font-size: .82rem; }
.wv-about-hero__visual > p strong { font-family: var(--wv-font-ui); }
.wv-about-hero__visual > p span { color: var(--wv-muted); }

.wv-service-cta { padding: 0 0 var(--wv-section); }
.wv-service-cta__panel, .wv-service-cta .wv-final-cta__panel { padding: clamp(2.25rem, 5vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 1.15fr) auto; align-items: end; gap: clamp(2rem, 6vw, 6rem); border: 1.5px solid var(--wv-ink); border-radius: var(--wv-radius-large); background: var(--wv-green); }
.wv-service-cta__panel h2, .wv-service-cta .wv-final-cta__panel h2 { max-width: 18ch; margin: 0; font-size: clamp(2rem, 3.6vw, 3.35rem); font-weight: 400; line-height: 1.04; }
.wv-service-cta__panel .wv-kicker, .wv-service-cta .wv-final-cta__panel .wv-kicker { color: var(--wv-ink); }
.wv-service-cta__panel p:not(.wv-kicker), .wv-service-cta .wv-final-cta__panel p:not(.wv-kicker) { max-width: 42rem; margin: 1.25rem 0 0; color: var(--wv-ink); }
.wv-service-cta .wv-final-cta__actions { display: grid; justify-items: start; gap: .8rem; }

@media (max-width: 820px) {
  .wv-service-hero { padding: 1.625rem 0 4.5rem; }
  .wv-service-hero__layout, .wv-service-content__layout { grid-template-columns: 1fr; }
  .wv-service-hero__layout { gap: 2.5rem; }
  .wv-breadcrumbs { margin-bottom: 1.75rem; }
  .wv-service-hero h1 { max-width: 12ch; font-size: clamp(2.55rem, 11.3vw, 3.2rem); }
  .wv-service-hero__visual { min-height: 17rem; }
  .wv-service-hero__visual picture, .wv-service-hero__visual img { right: 0; }
  .wv-reference-hero__visual, .wv-about-hero__visual { min-height: 24rem; }
  .wv-service-content__layout { gap: 2.5rem; }
  .wv-service-sidebar { position: static; }
  .wv-service-cta__panel, .wv-service-cta .wv-final-cta__panel { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 430px) {
  .wv-service-hero__visual { min-height: 14rem; }
  .wv-service-hero .wv-actions { align-items: stretch; flex-direction: column; }
  .wv-service-hero .wv-actions .wv-button { width: 100%; }
  .wv-reference-hero__visual, .wv-about-hero__visual { min-height: 19rem; }
  .wv-reference-hero__label { right: .25rem; bottom: .25rem; }
  .wv-about-hero__visual > p { right: .25rem; bottom: .25rem; }
  .wv-browser-illustration__bar { top: 1.35rem; right: 1.35rem; left: 1.35rem; }
  .wv-browser-illustration__nav { top: 3.25rem; left: 1.35rem; height: calc(100% - 4.75rem); }
  .wv-browser-illustration__content { top: 4rem; right: 1.35rem; }
  .wv-browser-illustration__content--short { top: 5.8rem; }
  .wv-browser-illustration__card { right: 1.35rem; bottom: 1.35rem; }
  .wv-browser-illustration__card--small { bottom: 2.5rem; }
  .wv-service-aside { padding: 1.5rem; }
  .wv-project-website { padding: 1.5rem; }
  .wv-service-cta__panel, .wv-service-cta .wv-final-cta__panel { padding: 1.75rem; border-radius: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wv-project-website__link { transition: none; }
}