/* Home page. Brand tokens are in components.css (:root). Works at 390 px and up. */
.es-hero, .es-final { position: relative; font-family: var(--es-font); color: var(--es-white); background: var(--es-bg); overflow: hidden; }
.es-hero { min-height: min(86vh, 760px); display: flex; align-items: center; }
.es-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.es-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,14,18,.92) 0%, rgba(11,14,18,.74) 55%, rgba(11,14,18,.3) 100%); }
.es-hero .es-eyebrow { color: var(--es-lime); }
.es-hero .es-eyebrow::before { background: var(--es-lime); }
.es-hero-inner, .es-final-inner { position: relative; width: 100%; max-width: calc(1120px + 2 * clamp(20px, 6vw, 80px)); margin: 0 auto; padding: clamp(64px, 9vw, 120px) clamp(20px, 6vw, 80px); box-sizing: border-box; }
.es-hero .es-title { font-size: clamp(30px, 4.4vw, 54px); max-width: none; }
.es-hero .es-sub { max-width: 58ch; font-size: clamp(17px, 1.6vw, 20px); }
.es-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }
.es-body { margin: 18px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.55; }
.es-h3 { margin: 32px 0 0; font-size: clamp(20px, 2vw, 24px); font-weight: 800; line-height: 1.25; color: var(--es-lime); }
.es-h3 + .es-body { margin-top: 10px; }
.es-list { margin: 14px 0 0; padding: 0; list-style: none; max-width: 62ch; }
.es-list li { position: relative; margin: 0 0 12px; padding-left: 26px; font-size: 17px; line-height: 1.5; }
.es-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--es-green); }

/* Section backgrounds alternate between #0B0E12 and #12181F, so sections are separated without boxes */
.es-band--a { background: var(--es-bg); }
.es-band--b { background: var(--es-bg-alt); }
.es-band .es-section { background: transparent; }

/* Logo strip: white logos, no boxes, same height */
.es-strip-section { padding-top: 0; padding-bottom: 0; }
.es-strip { display: flex; align-items: center; justify-content: space-between; gap: 28px; max-width: 1120px; margin: 0 auto; padding: 28px 0; color: var(--es-white); text-decoration: none; }
.es-strip:hover .es-strip-text { color: var(--es-lime); }
.es-strip-text { margin: 0; max-width: 46ch; font-size: 16px; font-weight: 600; line-height: 1.4; }
.es-strip-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 36px; flex: none; }
.es-strip-logos img { display: block; height: 40px; width: auto; }
@media (max-width: 760px) { .es-strip { flex-direction: column; align-items: flex-start; } }

/* Two column blocks: text and photo */
.es-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.es-split--reverse { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.es-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.es-split--reverse .es-photo { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .es-split, .es-split--reverse { grid-template-columns: 1fr; } .es-photo, .es-split--reverse .es-photo { aspect-ratio: 4 / 3; } .es-split--reverse .es-photo { order: 2; } }

/* Buttons that sit under a component */
.es-section--after { padding-top: 0; margin-top: calc(-1 * clamp(12px, 2vw, 28px)); }
.es-section--after .es-inner > .es-btn { margin-top: 8px; }
.es-ways-cta { display: grid; grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr) 128px minmax(0, 1fr); }
.es-ways-cta .es-btn:first-child { grid-column: 1; justify-self: start; }
.es-ways-cta .es-btn:last-child { grid-column: 5; justify-self: start; }
@media (max-width: 760px) { .es-ways-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } }

/* Case cards */
.es-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 360px)); gap: 28px; margin-top: 40px; }
.es-case { display: flex; flex-direction: column; background: var(--es-card); border: 1px solid var(--es-card-line); border-radius: 4px; overflow: hidden; }
.es-case img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.es-case h3 { margin: 22px 22px 0; font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--es-lime); }
.es-case p { margin: 12px 22px 0; font-size: 16px; line-height: 1.5; }
.es-case .es-btn { margin: 22px; align-self: flex-start; }
.es-case p + .es-btn { margin-top: auto; }
.es-case p { margin-bottom: 22px; }
.es-section .es-actions { margin-top: 36px; }

/* Final call to action */
.es-final { background: var(--es-bg) url("/assets/images/muddy-road-forest-hills.webp") center / cover no-repeat; }
.es-final::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,14,18,.9) 0%, rgba(11,14,18,.65) 60%, rgba(11,14,18,.35) 100%); }
.es-final .es-title { max-width: none; }

/* Short lines in the two ways in cards */
.es-card-list { margin: 16px 0 0; padding: 0; list-style: none; }
.es-card-list li { position: relative; margin: 0 0 9px; padding-left: 20px; font-size: 16px; line-height: 1.4; }
.es-card-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--es-green); }
@media (max-width: 760px) { .es-card-list li { font-size: 15px; } }