/* Page-specific art direction; the application offer keeps its own layout. */
.web-design-page .service-intro { padding-top: 54px; text-align: center; }
.web-design-page .service-intro h1 { margin-inline: auto; font-size: 66px; max-width: 1080px; }
.web-design-page .service-lead { margin-inline: auto; max-width: 760px; font-size: 18px; }
.editorial-art { --fx: 0px; --fy: 0px; position: relative; width: min(100%,1080px); aspect-ratio: 2.8; margin: 56px auto 34px; isolation: isolate; }
.editorial-outline { position: absolute; inset: 13% 7% 10% 11%; border-block: 1px solid #62417e; rotate: -6deg; }
.editorial-sheet { position: absolute; left: 8%; top: 6%; width: 38%; height: 84%; border-radius: 8px; background: linear-gradient(135deg,#fff,#e6dfee); color: #2b183e; rotate: -8deg; box-shadow: -10px 12px 0 #8f57cd,0 24px 42px #0009; overflow: hidden; translate: var(--fx) var(--fy); transition: translate .65s ease; }
.editorial-grid { position: absolute; inset: 0; background: repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#60348115 calc(25% - 1px),#60348115 25%); border-block: 1px solid #60348130; margin-block: 16%; }
.editorial-letter { position: absolute; left: 12%; top: 18%; font: 132px/.9 Georgia,serif; }
.editorial-letter > span { color: #8650c9; font-size: 80px; }
.editorial-sheet img { position: absolute; bottom: 10%; left: 12%; width: 115px; height: auto; }
.editorial-type { position: absolute; left: 43%; right: 6%; top: 14%; text-align: left; padding: 27px 36px; background: #24152f; border: 1px solid #855eab; border-radius: 8px; rotate: 3deg; box-shadow: 0 24px 42px #0008; translate: calc(var(--fx) * -.7) calc(var(--fy) * -.7); transition: translate .65s ease; }
.editorial-type > * { display: block; font: 600 53px/1.08 system-ui,sans-serif; color: #f1eafa; }
.editorial-type em { font-family: Georgia,serif; font-weight: 400; color: #c497fb; }
.editorial-colors { position: absolute; left: 32%; bottom: 0; width: 34%; height: 17%; display: flex; padding: 9px; gap: 5px; border: 1px solid #886aa2; background: #18121f; rotate: -3deg; border-radius: 6px; box-shadow: 0 12px 26px #0008; }
.editorial-colors i { flex: 1; background: #f1eafa; border-radius: 2px; }
.editorial-colors i:nth-child(2) { background: #d2b8ef; }
.editorial-colors i:nth-child(3) { background: #ab76ef; }
.editorial-colors i:nth-child(4) { background: #7635cb; }
.editorial-colors i:nth-child(5) { background: #392149; }
.editorial-sign { position: absolute; right: 3%; bottom: 2%; width: 17%; height: 27%; background: linear-gradient(140deg,#b981ff,#6c27c1); border: 1px solid #c8a1fa; border-radius: 7px; display: flex; justify-content: center; align-items: center; gap: 2px; rotate: 9deg; box-shadow: 0 14px 32px #0008; }
.editorial-sign span { font: 70px/1 Georgia,serif; color: #f1e3ff; }
.web-design-page .offer-facts { text-align: left; margin-top: 44px; }
.web-design-page .offer-facts > div:first-child strong { color: #d0b0fc; }
.web-design-page .offer-facts strong { font-size: 28px; }
.web-design-page .service-section { padding-block: 104px; }
.web-design-page .service-heading h2 { font-size: 50px; max-width: 730px; }
.design-scope .service-heading { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
.design-scope .section-label { grid-column: 1 / -1; }
.design-scope .service-heading > p:not(.section-label) { align-self: center; }
.design-scope .offer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
.design-scope .offer-list article { display: block; padding: 32px 0 40px; }
.design-scope .offer-list article > span { display: block; font: italic 52px/1 Georgia,serif; color: #a877df; padding: 0; margin-bottom: 28px; }
.design-scope .offer-list h3 { font-size: 26px; }
.design-scope .offer-list article:hover > span { color: #d3b2ff; }
.web-design-page .service-light { background: #eae5f1; box-shadow: 0 0 0 100vmax #eae5f1; }
.web-design-page .service-light .service-heading h2 { font-size: 60px; }
.web-design-page .metric-definitions { gap: 0; border-block: 1px solid #b9aacb; }
.web-design-page .metric-definitions article { border-top: 0; padding: 32px; border-right: 1px solid #b9aacb; }
.web-design-page .metric-definitions article:first-child { padding-left: 0; }
.web-design-page .metric-definitions article:last-child { border-right: 0; }
.web-design-page .metric-definitions article > span { font: 650 60px/1 system-ui,sans-serif; margin-bottom: 36px; color: #6430a3; }
.web-design-page .metric-definitions article > span::after { content: "/"; font: italic 55px Georgia,serif; margin-left: 8px; color: #9270b7; }
.design-process .service-steps { gap: 0; }
.design-process .service-steps li { padding: 32px; border-right: 1px solid #403249; border-bottom: 1px solid #403249; }
.design-process .service-steps li:first-child { padding-left: 0; }
.design-process .service-steps li:last-child { border-right: 0; }
.design-process .service-steps li::before { font-size: 68px; color: #b48be4; margin-bottom: 36px; }
.web-design-page .service-end { background: #21122e; box-shadow: 0 0 0 100vmax #21122e; clip-path: inset(0 -100vmax); padding-block: 86px; }
.web-design-page .service-end h2 { font-size: 62px; max-width: 760px; }
.web-design-page .service-end .button { margin-top: 18px; }
.web-design-page .faq-list details[open] { border-left: 2px solid #aa78e6; padding-left: 18px; }
@media (max-width: 1000px) {
  .web-design-page .service-intro h1 { font-size: 54px; }
  .editorial-type { padding: 22px; }
  .editorial-type > * { font-size: 40px; }
  .editorial-letter { font-size: 100px; }
  .editorial-letter > span { font-size: 60px; }
  .editorial-sign span { font-size: 70px; }
  .web-design-page .metric-definitions article { padding: 24px 18px; }
  .web-design-page .metric-definitions article > span { font-size: 44px; }
  .design-scope .service-heading, .design-scope .offer-list { column-gap: 32px; }
}
@media (max-width: 680px) {
  .web-design-page .service-intro { padding-top: 40px; text-align: left; }
  .web-design-page .service-intro h1 { font-size: 38px; }
  .web-design-page .service-lead { font-size: 17px; }
  .editorial-art { aspect-ratio: 1.3; margin-block: 38px 30px; }
  .editorial-sheet { left: 5%; top: 6%; width: 51%; height: 73%; rotate: -6deg; }
  .editorial-letter { font-size: 84px; top: 16%; left: 10%; }
  .editorial-letter > span { font-size: 46px; }
  .editorial-sheet img { width: 84px; bottom: 12%; }
  .editorial-type { left: 37%; right: 2%; top: 25%; padding: 17px; }
  .editorial-type > * { font-size: 27px; }
  .editorial-colors { left: 9%; bottom: 4%; width: 44%; height: 16%; padding: 6px; gap: 3px; }
  .editorial-sign { right: 7%; bottom: 0; width: 20%; height: 23%; }
  .editorial-sign span { font-size: 40px; }
  .web-design-page .offer-facts { margin-top: 32px; }
  .web-design-page .service-section { padding-block: 64px; }
  .design-scope .service-heading, .design-scope .offer-list { grid-template-columns: minmax(0,1fr); }
  .web-design-page .service-heading h2, .web-design-page .service-light .service-heading h2 { font-size: 36px; }
  .design-scope .offer-list article { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 18px; padding-block: 26px; }
  .design-scope .offer-list article > span { font-size: 36px; margin: 0; }
  .design-scope .offer-list h3 { font-size: 23px; }
  .web-design-page .metric-definitions article, .web-design-page .metric-definitions article:first-child { padding: 28px 0; border-right: 0; border-bottom: 1px solid #b9aacb; }
  .web-design-page .metric-definitions article:last-child { border-bottom: 0; }
  .web-design-page .metric-definitions article > span { margin-bottom: 20px; }
  .design-process .service-steps li, .design-process .service-steps li:first-child { padding: 28px 0; border-right: 0; border-bottom: 0; }
  .design-process .service-steps li::before { font-size: 48px; margin-bottom: 22px; }
  .web-design-page .service-end { padding-block: 60px; }
  .web-design-page .service-end h2 { font-size: 40px; }
}
@media (max-width: 380px) {
  .web-design-page .service-intro h1 { font-size: 34px; }
  .editorial-type > * { font-size: 24px; }
  .editorial-letter { font-size: 68px; }
  .editorial-sign span { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-sheet, .editorial-type { transition: none; translate: none; }
}