.web-development { color: var(--cw-ink); }
.web-hero { padding: 64px 0 48px; background: #f5f3ee; }
.web-hero__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.web-hero h1 { font-size: 42px; line-height: 1.15; margin: 18px 0 24px; text-wrap: balance; }
.web-hero h1 span { color: #0c6262; }
.web-hero p { max-width: 560px; color: var(--cw-ink-soft); line-height: 1.65; margin-bottom: 16px; }
.web-hero .web-hero__lead { font-size: 20px; line-height: 1.45; font-weight: 600; color: var(--cw-ink); }
.web-hero .btn-row { margin-top: 28px; align-items: center; gap: 22px; }
.web-hero__note { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; margin-top: 28px; color: var(--cw-ink-soft); }
.web-hero__visual { margin: 0; min-width: 0; }
.web-hero__visual img { display: block; width: 100%; height: 440px; object-fit: cover; border-radius: 8px; }
.web-hero__visual figcaption { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; padding-top: 14px; font-size: 14px; color: var(--cw-ink-soft); }
.web-hero__visual figcaption span { font-weight: 600; }
.web-hero__visual small { font-size: 12px; }
.web-value-strip { background: #e7eeea; border-block: 1px solid #d3dfd7; }
.web-value-strip .section-shell { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-block: 24px; }
.web-value-strip p { margin: 0; font-size: 14px; color: #344b45; }
.web-value-strip strong { display: block; color: #16382f; font-size: 18px; margin-bottom: 4px; }
.web-split { display: grid; grid-template-columns: 0.9fr 1.2fr; gap: 88px; }
.web-section-intro h2, .web-partner h2 { margin: 14px 0 22px; font-size: 29px; line-height: 1.25; text-wrap: balance; }
.web-section-intro p, .web-development article p, .web-process p, .web-partner p { color: var(--cw-ink-soft); line-height: 1.65; }
.web-section-intro .text-link, .web-partner .text-link { display: inline-block; margin-top: 20px; }
.web-service-list article { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--cw-line); }
.web-service-list article:first-child { padding-top: 0; }
.web-service-icon { display: block; width: 104px; height: 104px; object-fit: contain; }
.web-development h3 { font-size: 20px; margin: 0 0 12px; }
.web-development article p { margin: 0; }
.web-details { background: #f2f4f1; }
.web-details .section-heading { margin-bottom: 36px; }
.web-details .section-heading p { max-width: 660px; }
.web-foundations { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.web-foundations article { padding: 28px 0 32px; border-top: 1px solid #b9ccc4; }
.web-detail-number { display: block; font-size: 13px; font-weight: 600; color: #0b6767; margin-bottom: 18px; }
.web-foundations ul { list-style: none; padding: 0; margin: 20px 0 0; }
.web-foundations li { position: relative; padding: 5px 0 5px 24px; color: #344255; }
.web-foundations li::before { content: '✓'; position: absolute; left: 0; color: #0b6767; font-weight: 600; }
.web-partner__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.web-partner img { display: block; width: 100%; height: 360px; object-fit: cover; border-radius: 8px; }
.web-process { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.web-process li { border-top: 2px solid #b8c9d7; padding-top: 20px; }
.web-process li > span { display: block; font-size: 14px; color: #0b6767; font-weight: 600; margin-bottom: 18px; }
.web-development .web-project-invitation { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 32px 44px; gap: 0; }
.web-development .web-project-invitation h2 { width: 100%; max-width: 760px; margin: 16px auto; text-align: center; text-wrap: balance; }
.web-development .web-project-invitation p { width: 100%; max-width: 660px; margin: 0 auto; text-align: center; color: var(--cw-ink-soft); }
.web-related { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding-top: 18px; padding-bottom: 40px; }
.web-development #intake-form { scroll-margin-top: 120px; }
@media (max-width: 900px) {
  .web-hero__grid, .web-split, .web-partner__grid { gap: 32px; }
  .web-process { grid-template-columns: 1fr 1fr; }
  .web-hero__visual img { height: 400px; }
}
@media (max-width: 640px) {
  .web-hero { padding: 32px 0; }
  .web-hero__grid, .web-split, .web-foundations, .web-process, .web-partner__grid { grid-template-columns: 1fr; }
  .web-hero h1 { font-size: 32px; }
  .web-hero .web-hero__lead { font-size: 18px; }
  .web-hero__visual img { height: auto; aspect-ratio: 3 / 2; }
  .web-hero__note { font-size: 13px; margin-top: 22px; }
  .web-value-strip .section-shell { grid-template-columns: 1fr; gap: 16px; }
  .web-value-strip strong { display: inline; margin-right: 5px; font-size: 16px; }
  .web-partner img { height: auto; }
  .web-related { gap: 16px; }
}

.web-development .form-panel__intro .check-list { list-style: none; margin: 18px 0 0; padding: 0; }
.web-development .form-panel__intro .check-list li { position: relative; padding: 4px 0 4px 25px; }
.web-development .form-panel__intro .check-list li::before { content: '✓'; position: absolute; left: 0; color: #0b6767; font-weight: 600; }
@media (max-width: 640px) {
  .web-service-list article { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; }
  .web-service-icon { width: 76px; height: 76px; }
}
.web-development .section-heading:not(.section-heading--centered) { max-width: none; }
.web-development .section-heading:not(.section-heading--centered) h2 { max-width: 760px; width: 100%; }