.integration-wrap { max-width: 1450px; margin: auto; padding-inline: 5.5%; }
.integration-hero { display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 7vw, 104px) 76px; }
.integration-kicker { color: var(--green); font-size: 14px; font-weight: 500; margin: 0 0 22px; }
.integration-page .integration-intro h1 { font-size: clamp(40px, 4.6vw, 66px); margin: 0 0 28px; line-height: 1.08; letter-spacing: -0.04em; }
.integration-intro h1 em, .integration-page h2 em { color: var(--green); }
.integration-lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.65; max-width: 650px; color: #c5d1c4; margin: 0 0 30px; }
.integration-page .integration-cta { display: inline-flex; align-items: center; justify-content: center; gap: 32px; min-height: 64px; padding: 16px 30px; background: #b7ed78; color: #0c1411; font-size: 21px; font-weight: 600; border: 1px solid #b7ed78; text-decoration: none; }
.integration-page .integration-cta:hover { background: #c9f198; color: #0c1411; }
.integration-caption { color: var(--muted); font-size: 13px; margin: 16px 0 0; max-width: 400px; }
.integration-photo { margin: 0; min-width: 0; }
.integration-photo img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 4px; }
.integration-hero-photo img { aspect-ratio: 4 / 5; }
.integration-photo figcaption { color: var(--muted); font-size: 12px; margin-top: 12px; line-height: 1.5; }
.integration-service { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 90px); border-top: 1px solid var(--border); padding-block: clamp(44px, 6vw, 82px); }
.integration-page h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.14; margin: 0 0 28px; letter-spacing: -0.035em; }
.integration-service-copy p, .integration-consulting-intro > p:not(.integration-kicker) { color: #c5d1c4; max-width: 650px; margin: 0 0 24px; }
.integration-service-copy p.integration-availability { font-size: 14px; color: var(--muted); border-left: 2px solid var(--border); padding-left: 20px; margin: 32px 0 0; }
.integration-detail-photo { margin-top: 36px; }
.integration-detail-photo img { aspect-ratio: 3 / 2; }
.integration-advice { margin: 0; }
.integration-advice > div { border-top: 1px solid var(--border); padding: 22px 0; }
.integration-advice > div:first-child { padding-top: 0; border-top: 0; }
.integration-advice dt { font-family: var(--display); font-size: 23px; font-weight: 600; line-height: 1.3; margin-bottom: 10px; }
.integration-advice dd { color: #c5d1c4; margin: 0; }
.integration-start { border-top: 1px solid var(--border); padding-block: clamp(44px, 6vw, 82px); }
.integration-start p:not(.integration-kicker) { max-width: 740px; color: #c5d1c4; margin: 0 0 28px; font-size: 19px; }
.integration-photo-credits { font-size: 12px; color: var(--muted); padding-bottom: 36px; margin: 0; }
.integration-photo-credits a, .sales-page .sales-context a:not(.button), .sales-page .sales-form-note a { text-decoration: underline; text-underline-offset: 3px; }
.sales-page .sales-hero { padding-bottom: 40px; }
.sales-page .sales-grid { gap: clamp(30px, 6vw, 90px); }
.sales-context h2 { font-size: clamp(29px, 3vw, 40px); }
.sales-page #contact-form { align-content: start; }
.sales-page #contact-form input, .sales-page #contact-form select, .sales-page #contact-form textarea { background: #f2f5ef; border-color: #75816e; color: #0c1411; }
.sales-page #contact-form :focus-visible { outline-color: #b7ed78; }
.sales-optional { color: var(--muted); font-size: 14px; font-weight: 400; }
.sales-page .sales-form-note { font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.6; }
.sales-page .sales-submit { background: #b7ed78; color: #0c1411; border: 1px solid #b7ed78; min-height: 56px; padding: 14px 24px; }
.sales-page .sales-submit:hover { background: #c9f198; color: #0c1411; }
@media (min-width: 1800px) { .integration-hero-photo img { aspect-ratio: 1 / 1; } }
@media (max-width: 900px) {
  .integration-hero, .integration-service { grid-template-columns: 1fr; }
  .integration-page .integration-intro h1 { font-size: clamp(40px, 7vw, 64px); }
  .integration-hero-photo img { aspect-ratio: 3 / 2; }
  .integration-hero { padding-bottom: 48px; }
  .integration-consulting { gap: 38px; }
  .integration-detail-photo { max-width: 650px; }
}
@media (max-width: 480px) {
  .integration-page .integration-intro h1 { font-size: 38px; }
  .integration-page .integration-cta { width: 100%; font-size: 20px; }
  .integration-page h2 { font-size: 32px; }
}