/* Web development content follows the supplied split hero and service grids. */
.web-dev-page { padding: 0 0 64px; background: #fff; }
.web-dev-page .web-dev-container { width: min(1080px, calc(100% - 40px)); }
.web-dev-page figure { min-width: 0; margin: 0; }
.web-dev-page .web-dev-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 36px;
  padding-top: 48px;
  padding-bottom: 36px;
}
.web-dev-page .web-dev-eyebrow { display: block; color: #0071e3; font-size: 12px; font-weight: 800; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.web-dev-page .web-dev-hero h1 { margin: 10px 0 16px; font-size: clamp(34px, 4.2vw, 46px); letter-spacing: -.04em; line-height: 1.08; }
.web-dev-page .web-dev-hero p { max-width: 540px; margin: 0 0 12px; }
.web-dev-page .web-dev-hero p:last-of-type { margin-bottom: 0; }
.web-dev-page .web-dev-hero__media { padding: 10px; border: 1px solid #e8edf2; border-radius: 24px; background: #f6f8fb; }
.web-dev-page .web-dev-hero__media img { display: block; width: 100%; height: 320px; border-radius: 16px; background: #fff; object-fit: contain; }
.web-dev-page .web-dev-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.web-dev-page .web-dev-pills span { padding: 6px 11px; border: 1px solid #e8edf2; border-radius: 999px; background: #fff; color: #334155; font-size: 12px; font-weight: 700; line-height: 1.35; }

.web-dev-page .web-dev-band { padding: 30px 0; border-top: 1px solid #e8edf2; border-bottom: 1px solid #e8edf2; background: #f6f8fb; }
.web-dev-page .web-dev-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 32px; }
.web-dev-page .web-dev-split__media { overflow: hidden; border: 1px solid #e8edf2; border-radius: 20px; background: #fff; }
.web-dev-page .web-dev-split__media img { display: block; width: 100%; height: 320px; object-fit: contain; }
.web-dev-page h2 { margin: 0 0 10px; color: #0f2744; font-size: 26px; letter-spacing: -.03em; line-height: 1.25; }
.web-dev-page .web-dev-split p { margin: 0 0 12px; }
.web-dev-page .web-dev-split p:last-child { margin-bottom: 0; }
.web-dev-page .web-dev-section { padding-top: 32px; padding-bottom: 32px; }
.web-dev-page .web-dev-section:last-child { padding-bottom: 0; }
.web-dev-page .web-dev-section__head { width: 100%; margin-bottom: 20px; }
.web-dev-page .web-dev-section__head p { margin: 0; }

.web-dev-page .web-dev-cycle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.web-dev-page .web-dev-cycle__card,
.web-dev-page .web-dev-offerings article { min-width: 0; border: 1px solid #e8edf2; border-radius: 18px; background: #fff; }
.web-dev-page .web-dev-cycle__card { padding: 18px; }
.web-dev-page .web-dev-cycle__card > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; margin-bottom: 14px; border-radius: 12px; object-fit: contain; }
.web-dev-page .web-dev-cycle__card h3 { margin: 0 0 10px; font-size: 17px; }
.web-dev-page .web-dev-checks,
.web-dev-page .web-dev-solutions { margin: 0; padding: 0; list-style: none; }
.web-dev-page .web-dev-checks li,
.web-dev-page .web-dev-solutions li { position: relative; padding-left: 22px; color: #5b6574; font-size: 15px; line-height: 1.6; }
.web-dev-page .web-dev-checks li + li { margin-top: 9px; }
.web-dev-page .web-dev-checks li::before,
.web-dev-page .web-dev-solutions li::before { position: absolute; top: 9px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; content: ""; }
.web-dev-page .web-dev-checks strong,
.web-dev-page .web-dev-solutions strong { color: #1b2c43; }

.web-dev-page .web-dev-mosaic { display: grid; grid-template-columns: 1.3fr .85fr .85fr; gap: 12px; margin: 16px 0 20px; }
.web-dev-page .web-dev-mosaic__item { height: 210px; overflow: hidden; border: 1px solid #e8edf2; border-radius: 16px; background: #fff; }
.web-dev-page .web-dev-mosaic__item img { display: block; width: 100%; height: 100%; object-fit: contain; }
.web-dev-page .web-dev-solutions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }

.web-dev-page .web-dev-offerings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.web-dev-page .web-dev-offerings article { padding: 17px; }
.web-dev-page .web-dev-offerings h3 { margin: 0 0 6px; font-size: 16px; }
.web-dev-page .web-dev-offerings p { margin: 0; font-size: 15px; }

@media (max-width: 860px) {
  .web-dev-page .web-dev-hero,
  .web-dev-page .web-dev-split,
  .web-dev-page .web-dev-cycle,
  .web-dev-page .web-dev-mosaic,
  .web-dev-page .web-dev-offerings { grid-template-columns: 1fr; }
  .web-dev-page .web-dev-hero { gap: 24px; }
  .web-dev-page .web-dev-hero__media { max-width: 680px; }
  .web-dev-page .web-dev-hero__media img { height: 280px; }
  .web-dev-page .web-dev-split__media { max-width: 680px; }
  .web-dev-page .web-dev-mosaic__item { height: auto; aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .web-dev-page { padding-bottom: 56px; }
  .web-dev-page .web-dev-hero { padding-top: 48px; padding-bottom: 28px; }
  .web-dev-page .web-dev-hero h1 { font-size: clamp(34px, 9vw, 42px); }
  .web-dev-page .web-dev-hero__media img { height: 220px; }
  .web-dev-page .web-dev-band { padding: 28px 0; }
  .web-dev-page .web-dev-split__media img { height: auto; aspect-ratio: 4 / 3; }
  .web-dev-page h2 { font-size: 24px; }
  .web-dev-page .web-dev-section { padding-top: 28px; padding-bottom: 28px; }
  .web-dev-page .web-dev-solutions { grid-template-columns: 1fr; }
}