* { box-sizing: border-box; }
body { margin: 0; color: #123c50; background: #fbfcfd; font-family: Arial, Helvetica, sans-serif; font-size: 1rem; line-height: 1.5; }
.page { min-height: 100svh; max-width: 1440px; margin: auto; padding: 38px 7vw 24px; display: flex; flex-direction: column; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
header img { width: 230px; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
header a { font-size: 1rem; color: #526976; }
a:focus-visible { outline: 3px solid #bd6500; outline-offset: 6px; }
main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); align-items: center; gap: 36px; padding: 38px 0; }
.eyebrow { text-transform: uppercase; font-size: .875rem; font-weight: 700; letter-spacing: .125em; color: #0073a4; margin: 0 0 24px; }
h1 { overflow-wrap: anywhere; font-size: clamp(3rem, 5.4vw, 4.875rem); letter-spacing: -.045em; line-height: 1.08; font-weight: 600; margin: 0 0 24px; }
h1 span { color: #0073a4; }
.intro { max-width: 425px; font-size: 1.125rem; line-height: 1.7; color: #526976; margin: 0 0 30px; }
.cta { display: inline-flex; align-items: center; gap: 20px; max-width: 100%; padding: 17px 23px; background: #004f71; color: white; border-radius: 6px; font-size: 1rem; font-weight: 600; }
.cta:hover { background: #00678e; }
.services { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; list-style: none; font-size: 1rem; color: #617583; line-height: 1.8; margin: 0 0 24px; }
.services li { max-width: 100%; }
.art { width: 100%; max-height: 470px; object-fit: contain; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; font-size: .9375rem; color: #617583; border-top: 1px solid #e0e9ed; padding-top: 20px; }
footer a { font-size: 1rem; overflow-wrap: anywhere; }
@media (min-width: 760px) and (max-height: 660px) {
  .page { padding-top: 22px; }
  main { padding: 20px 0; }
  h1 { font-size: 3.375rem; }
  .art { max-height: 340px; }
  .eyebrow { margin-bottom: 16px; }
}
@media (max-width: 759px) {
  .page { padding: 26px 7vw 22px; }
  header img { width: 180px; }
  main { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 44px 0 26px; }
  h1 { font-size: 3.25rem; }
  .eyebrow { margin-bottom: 20px; }
  .art { max-height: 300px; }
}