.header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header); display: grid; grid-template-columns: 310px 1fr; align-items: stretch; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.16); transition: background .25s, height .25s; }
.header.is-scrolled { background: rgba(11,52,59,.94); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; padding-left: max(32px, calc((100vw - var(--shell))/2)); border-right: 1px solid rgba(255,255,255,.16); }
.brand img { width: 188px; height: auto; }
.nav { display: flex; justify-content: flex-end; align-items: stretch; }
.nav > a { display: flex; align-items: center; padding: 0 26px; border-left: 1px solid rgba(255,255,255,.12); font-size: .78rem; font-weight: 700; letter-spacing: .04em; transition: color .2s, background .2s; }
.nav > a:hover { background: rgba(255,255,255,.08); }
.nav .nav__contact { min-width: 208px; justify-content: center; gap: 24px; background: var(--red); }
.nav .nav__contact:hover { background: var(--red-dark); }
.menu-toggle { display: none; }

.button { display: inline-flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 36px; padding: 0 22px; border: 0; font-size: .78rem; font-weight: 700; letter-spacing: .03em; transition: background .2s, color .2s, transform .2s; }
.button:hover { transform: translateY(-2px); }
.button--red { color: var(--white); background: var(--red); }
.button--red:hover { background: var(--red-dark); }
.button--white { color: var(--ink); background: var(--white); }
.button--white:hover { background: var(--paper); }
.text-link, .arrow-link { display: inline-flex; align-items: center; gap: 28px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.text-link { color: var(--white); padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.45); }
.arrow-link { margin-top: 22px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }

.rail-controls { display: flex; gap: 8px; }
.rail-controls button { width: 58px; height: 58px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 1.2rem; transition: background .2s, color .2s; }
.rail-controls button:hover { color: var(--white); background: var(--ink); }

@media (max-width: 1080px) {
  .header { grid-template-columns: 240px 1fr; }
  .nav > a { padding-inline: 15px; }
  .nav .nav__contact { min-width: 180px; }
}

@media (max-width: 860px) {
  .header { display: flex; justify-content: space-between; height: var(--header); }
  .brand { padding-left: 18px; border-right: 0; }
  .brand img { width: 160px; }
  .menu-toggle { position: relative; z-index: 2; display: flex; width: 104px; align-items: center; justify-content: center; gap: 12px; padding: 0; color: var(--white); border: 0; border-left: 1px solid rgba(255,255,255,.16); background: transparent; cursor: pointer; }
  .menu-toggle__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; }
  .menu-toggle__lines { width: 20px; }
  .menu-toggle__lines i { display: block; height: 2px; margin: 5px 0; background: currentColor; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; padding: 90px 24px 24px; background: var(--petrol); transform: translateY(-102%); visibility: hidden; transition: transform .35s ease, visibility .35s; }
  .nav.is-open { transform: none; visibility: visible; }
  .nav > a { min-height: 64px; padding: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.16); font-family: var(--display); font-size: 2rem; font-weight: 600; text-transform: uppercase; }
  .nav .nav__contact { min-width: 0; margin-top: 28px; padding-inline: 20px; justify-content: space-between; font-family: var(--body); font-size: .8rem; text-transform: none; }
}