/* Header: the white pill bar hanging over the hero, plus the offcanvas menu it opens. */
.header { position: absolute; left: 0; right: 0; top: 0; z-index: 20; }
.header__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-m); border-radius: 0 0 50rem 50rem; background: var(--white); box-shadow: var(--shadow-header); border-bottom: 1px solid var(--red); padding: 0 7rem; }
.header__logo { display: inline-flex; align-items: center; gap: 1rem; flex: 0 0 auto; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; line-height: 1; color: var(--ink); white-space: nowrap; }
.header__logo:hover { color: var(--red); }
.header__logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border-radius: 1.2rem 0.4rem 1.2rem 0.4rem; background: var(--grad-red); color: var(--white); font-size: var(--text-xl); font-weight: 700; }
.header__logo-strong { color: var(--red); }
.header__nav { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
.header__menu { display: flex; }
.header__menu-link { display: block; padding: 3.5rem 0; margin: 0 2.4rem; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 400; line-height: 1; white-space: nowrap; color: var(--ink); }
.header__menu-link:hover, .header__menu-link--active { color: var(--red); }
.header__actions { display: none; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: 2.4rem; }
.header__burger { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 5.8rem; width: 5.8rem; height: 5.8rem; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 2.2rem; transition: background var(--speed) var(--ease); }
.header__burger:hover { background: var(--red); }

.offcanvas { position: fixed; inset: 0; z-index: 30; visibility: hidden; pointer-events: none; }
.offcanvas--open { visibility: visible; pointer-events: auto; }
.offcanvas__backdrop { position: absolute; inset: 0; background: rgba(0, 7, 26, .6); opacity: 0; transition: opacity var(--speed) var(--ease); }
.offcanvas--open .offcanvas__backdrop { opacity: 1; }
.offcanvas__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(36rem, 100%); display: flex; flex-direction: column; background: var(--white); padding: var(--space-xl) var(--space-l); overflow-y: auto; transform: translateX(100%); transition: transform var(--speed) var(--ease); }
.offcanvas--open .offcanvas__panel { transform: translateX(0); }
.offcanvas__close { position: absolute; top: 2rem; right: 2rem; display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 1.8rem; }
.offcanvas__close:hover { background: var(--red); }
.offcanvas__title { font-size: var(--text-xl); font-weight: 600; color: var(--ink); margin-bottom: var(--space-m); }
.offcanvas__menu { display: flex; flex-direction: column; }
.offcanvas__menu-link { display: block; padding: 1.2rem 0; font-family: var(--font-heading); font-size: 2.2rem; font-weight: 400; line-height: 1; color: var(--ink); }
.offcanvas__menu-link:hover { color: var(--red); }
.offcanvas__contact { font-size: var(--text-m); color: var(--body); margin-top: var(--space-l); }
.offcanvas__link { display: block; font-family: var(--font-heading); font-size: var(--text-l); font-weight: 500; color: var(--ink); margin-top: var(--space-xs); }
.offcanvas__link:hover { color: var(--red); }

@media (max-width: 1279px) {
  .header__bar { padding: 0 3.5rem; }
}
@media (max-width: 991px) {
  .header__bar { padding: 2rem 4rem; border-radius: 0 0 20rem 20rem; }
  .header__nav { display: none; }
  .header__actions { display: flex; }
  .header__burger { flex-basis: 5rem; width: 5rem; height: 5rem; }
}
@media (max-width: 767px) {
  .header__bar { padding: 1.5rem 2.4rem; flex-wrap: nowrap; }
  .header__logo { font-size: var(--text-l); }
}