:root {
  --red: #ec1c24;
  --dark: #231f20;
  --muted: #555454;
  --light: #dbdbdb;
  --page: 960px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.go-hybrid { margin: 0; color: var(--muted); font: 400 16px/1.55 Ubuntu, Arial, sans-serif; }
.go-hybrid .site-header { width: 100%; aspect-ratio: 1920 / 180; overflow: hidden; background: #fff; }
.go-hybrid .site-header img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.go-hybrid .hero { width: 100%; aspect-ratio: 1920 / 700; overflow: hidden; background: #eee; }
.go-hybrid .hero__video { display: block; width: 100%; height: 100%; object-fit: contain; }

.go-hybrid .section { max-width: var(--page); margin: auto; padding: 3.5rem 1.5rem; text-align: justify; text-justify: inter-word; }
.go-hybrid .section > h2, .go-hybrid .section > h3, .go-hybrid .section > .small, .go-hybrid .section > .heatmap, .go-hybrid .section > .section-label,
.section > .go-hybrid, .go-hybrid .section > .contact { text-align: center; }
.go-hybrid .section--grey { max-width: none; background: #f0f0f0; padding-left: max(1.5rem, calc((100vw - var(--page)) / 2)); padding-right: max(1.5rem, calc((100vw - var(--page)) / 2)); }
.go-hybrid h2, .go-hybrid h3, .go-hybrid h4 { margin: 0 0 1rem; color: var(--red) !important; line-height: 1.2; }
.go-hybrid h2 { font-size: 2rem; } .go-hybrid h3 { font-size: 1.80rem; font-weight: 700; } .go-hybrid h4 { font-size: 1rem; }

/* Shared heading scale defined by the supplied design. */
.go-hybrid .intro > h2, .go-hybrid .intro > h3, .go-hybrid .question h2, .go-hybrid .leadership > h2, .go-hybrid .construction > h2, .go-hybrid .solution > h3, .go-hybrid .categories > h2 {
  font-size: 2rem;
  font-weight: 700;
}

/* Supporting headings share a lighter, uniform scale. */
.go-hybrid .card h4, .go-hybrid .card h3, .go-hybrid .leadership > h3, .go-hybrid .icon-row h4, .go-hybrid .category-grid h3 {
  font-size: 1.45rem;
  font-weight: 400;
}
.go-hybrid p { margin: .7rem 0; } .go-hybrid .small { font-size: 1.2rem; }

.go-hybrid .cards { display: grid; gap: 1.25rem; margin: 2rem 0; }
.go-hybrid .cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.go-hybrid .cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 730px; margin-inline: auto; }
.go-hybrid .card { padding: 1.25rem 1rem; text-align: center; background: #fff; border: 1px solid #ddd; border-top: 5px solid var(--red); border-radius: 10px; box-shadow: 0 3px 9px rgb(0 0 0 / .12); }
.go-hybrid .card img, .go-hybrid .icon-row img, .go-hybrid .benefits img { width: 48px; height: 48px; object-fit: contain; transform-origin: center; }
/* The supplied SVGs have different amounts of internal whitespace. These
   scale adjustments align their visible artwork to the Debt icon standard. */
.go-hybrid .cards--four .card:nth-child(1) img { transform: scale(1.45); }
.go-hybrid .cards--four .card:nth-child(3) img { transform: scale(1.7); }
.go-hybrid .cards--four .card:nth-child(4) img { transform: scale(1.65); }
.go-hybrid .cards--two .card:nth-child(1) img, .go-hybrid .cards--two .card:nth-child(2) img { transform: scale(1.45); }
.go-hybrid .icon-row article:nth-child(1) img { transform: scale(1.4); }
.go-hybrid .icon-row article:nth-child(2) img, .go-hybrid .icon-row article:nth-child(3) img, .go-hybrid .icon-row article:nth-child(4) img { transform: scale(1.65); }
.go-hybrid .benefits span:nth-child(1) img { transform: scale(1.45); }
.go-hybrid .benefits span:nth-child(2) img, .go-hybrid .benefits span:nth-child(3) img, .go-hybrid .benefits span:nth-child(4) img { transform: scale(1.3); }
.go-hybrid .card p, .go-hybrid .icon-row p { font-size: 1.35rem; line-height: 1.50; text-align: center; }
.go-hybrid .section-label { width: 100%; max-width: none; margin: 0 auto 1.80rem; padding: .32rem; color: #fff; background: #aaa; font-size: 1.90rem; line-height: 1.2; }
.go-hybrid .two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.25rem; align-items: center; }
.go-hybrid .two-col img { display: block; width: 100%; }.go-hybrid .question h2 { text-align: left; }
.go-hybrid .heatmap { display: block; width: min(100%, 600px); margin: 1.5rem auto; }
.go-hybrid .questions { position: relative; max-width: 600px; margin: 1.25rem auto; padding: 0 0 0 6.5rem; color: var(--red); font-weight: 700; list-style: none; text-align: left; }
.go-hybrid .questions::before { content: '?'; position: absolute; top: 50%; left: .25rem; transform: translateY(-50%); color: #ff9999; font-size: 13.2rem; line-height: 1; font-weight: 400; }.go-hybrid .questions li { padding: .45rem 0; }
.go-hybrid .icon-row, .go-hybrid .benefits, .go-hybrid .category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.go-hybrid .icon-row article { padding: .5rem; text-align: center; }.go-hybrid .icon-row p { margin: 0; }
.go-hybrid .solution > h3 { margin-top: 2.5rem; }.benefits span { display: grid; justify-items: center; gap: .5rem; color: var(--dark); font-size: 1.25rem; text-align: center; }.go-hybrid .benefits img { display: block; }
.go-hybrid .video-frame { max-width: 700px; margin: 1.5rem auto; padding: 1rem; background: #fff; }.go-hybrid .video-frame video { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.go-hybrid .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: justify; }.go-hybrid .category-grid h3 { font-size: 1.45rem; }.go-hybrid .category-grid p { font-size: 1.30rem; }
.go-hybrid .closing { padding-bottom: 1rem; }.go-hybrid .gohybrid { margin-top: 2rem; color: var(--red); font-size: 2rem; font-weight: 700; text-align: center; }.go-hybrid .contact { font-size: 1.25rem; }.go-hybrid .contact a, .go-hybrid footer a { color: inherit; }
footer { padding: 1rem max(1.5rem, calc((100vw - var(--page)) / 2)); color: #fff; background: #8e8e8e; font-size: .67rem; line-height: 1.4; text-align: center; }footer strong { display: block; margin: 1rem calc(-1 * max(1.5rem, calc((100vw - var(--page)) / 2))) -1rem; padding: .6rem max(1.5rem, calc((100vw - var(--page)) / 2)); color: #fff; background: #000; font-size: .7rem; }

@media (max-width: 700px) {
  .go-hybrid .section { padding: 2.7rem 1.25rem; }
  .go-hybrid .cards--four, .go-hybrid .icon-row, .go-hybrid .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .go-hybrid .two-col { grid-template-columns: 1fr; gap: 1.5rem; }.go-hybrid .two-col img { max-width: 430px; margin: auto; }.go-hybrid .category-grid { gap: 1.25rem; }.go-hybrid .cards--two { gap: .9rem; }.go-hybrid .card { padding: 1rem .75rem; }h2 { font-size: 1.25rem; }
}
@media (max-width: 430px) {
  .go-hybrid { font-size: 15px; }.go-hybrid .cards--four, .go-hybrid .cards--two, .go-hybrid .icon-row, .go-hybrid .benefits, .go-hybrid .category-grid { grid-template-columns: 1fr; }.go-hybrid .section-label { font-size: 1.90rem; }
}
