:root {
  --green: #21863c;
  --green-dark: #0b4d22;
  --blue: #176bc1;
  --blue-dark: #073c78;
  --white: #fff;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--white);
}

.service-selector { display: flex; height: 100vh; min-height: 580px; overflow: hidden; }

.service-panel {
  align-items: center;
  color: inherit;
  display: flex;
  flex: 1 1 50%;
  isolation: isolate;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 7rem);
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: flex-basis 300ms ease;
}

.service-panel__image, .service-panel__overlay { inset: 0; position: absolute; }
.service-panel__image { background-position: center; background-size: cover; transition: transform 300ms ease; z-index: -2; }
.service-panel__overlay { transition: filter 300ms ease; z-index: -1; }
.service-panel--bhp .service-panel__image { background-image: url("bhp/Work%20safety,%20working%20man.png"); }
.service-panel--bhp .service-panel__overlay { background: linear-gradient(135deg, rgba(11, 77, 34, .9), rgba(33, 134, 60, .72)); }
.service-panel--insurance .service-panel__image { background-image: url("bhp/Mikolaj_Image.png"); }
.service-panel--insurance .service-panel__overlay { background: linear-gradient(135deg, rgba(7, 60, 120, .91), rgba(23, 107, 193, .72)); }

.service-panel__content { max-width: 35rem; position: relative; }
.service-panel__eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .15em; margin: 0 0 1rem; text-transform: uppercase; }
.service-panel h1 { font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1.05; margin: 0; }
.service-panel p:not(.service-panel__eyebrow) { font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.55; margin: 1.25rem auto 2rem; }
.service-panel__button { border: 2px solid currentColor; display: inline-flex; font-size: .82rem; font-weight: 800; gap: .8rem; letter-spacing: .13em; padding: 1rem 1.4rem; transition: transform 300ms ease, background-color 300ms ease; }
.service-panel__button span { font-size: 1.1rem; line-height: .7; }

@media (hover: hover) and (min-width: 769px) {
  .service-selector:hover .service-panel { flex-basis: 35%; }
  .service-selector .service-panel:hover { flex-basis: 65%; }
  .service-panel:hover .service-panel__image { transform: scale(1.06); }
  .service-panel:hover .service-panel__overlay { filter: brightness(.72); }
  .service-panel:hover .service-panel__button { background: rgba(255, 255, 255, .16); transform: translateX(.6rem); }
}

@media (max-width: 768px) {
  .service-selector { flex-direction: column; height: 100dvh; min-height: 0; }
  .service-panel { flex-basis: 50%; min-height: 0; padding: 1.5rem; }
  .service-panel__content { max-width: 29rem; }
  .service-panel h1 { font-size: clamp(2rem, 9vw, 3.4rem); }
  .service-panel p:not(.service-panel__eyebrow) { margin: .7rem auto 1.15rem; }
  .service-panel__button { padding: .8rem 1.1rem; }
}