/* Header, full-screen menu, footer. Measured from plesner.com/en (dna/MEASURED-A.md): bar 71 px, gutters 5vw. */
.head { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--head-h); color: #fff; background: transparent; transition: transform 0.3s var(--ease-out-soft), background-color 0.3s, color 0.3s; }
.head__bar { display: flex; align-items: center; justify-content: space-between; height: 100%; padding-inline: var(--gutter); }
.head__logo { display: block; line-height: 0; }
.logo { width: 92px; height: auto; }
.logo--on-light { display: none; }
.head__right { display: flex; align-items: center; gap: 22px; }
.head__call { color: inherit; }
/* Transparent state (over a hero): the call link gets its own navy ground, so white text holds 7:1 on any photo (F1, 11 Nov); the box and gap
   stay the same in every state, so nothing moves when the header turns white. */
.head .head__call { padding: 8px 14px; border: 0; background: rgba(22, 51, 70, 0.8); color: #fff; transition: background-color 0.3s, color 0.3s; }
.head .head__call:hover { background: rgba(22, 51, 70, 0.95); }
.head--solid .head__call, .head.is-solid .head__call { background: transparent; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
html.menu-open .head .head__call { background: transparent; color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.head__menu { position: relative; width: 54px; height: 48px; margin-right: -12px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.burger { position: absolute; left: 12px; top: 15px; width: 30px; height: 18px; }
.burger i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out); }
.burger i:nth-child(1) { top: 4px; }
.burger i:nth-child(2) { top: 12px; }
.head--solid, .head.is-solid { background: #fff; color: var(--navy); }
.head--solid :focus-visible, .head.is-solid :focus-visible { outline-color: var(--gold-ink); }
html.menu-open .head :focus-visible { outline-color: var(--gold); }
/* Transparent header over a hero photo: a two-tone ring (white outside, navy inside) that reads on a dark or a light patch of the photo. */
html:not(.menu-open) .head:not(.head--solid):not(.is-solid) :focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px var(--navy); }
.head--solid .logo--on-dark, .head.is-solid .logo--on-dark { display: none; }
.head--solid .logo--on-light, .head.is-solid .logo--on-light { display: block; }
.head.is-hidden { transform: translateY(calc(var(--head-h) * -1)); }
html.menu-open .head { transform: none; background: transparent; color: #fff; }
html.menu-open .head .logo--on-dark { display: block; }
html.menu-open .head .logo--on-light { display: none; }
html.menu-open .burger i:nth-child(1) { top: 8px; transform: rotate(45deg); }
html.menu-open .burger i:nth-child(2) { top: 8px; transform: rotate(-45deg); }
@media (min-width: 768px) {
  .logo { width: 108px; }
  .burger { width: 41px; height: 24px; left: 6px; top: 12px; }
  .burger i:nth-child(1) { top: 7px; }
  .burger i:nth-child(2) { top: 16px; }
  html.menu-open .burger i:nth-child(1), html.menu-open .burger i:nth-child(2) { top: 11px; }
  .head__menu { width: 53px; margin-right: -6px; }
}

.menu { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--navy); color: #fff; visibility: hidden; opacity: 0; transition: opacity 0.3s var(--ease-out), visibility 0s 0.3s; }
html.menu-open .menu { visibility: visible; opacity: 1; transition-delay: 0s; }
.menu__in { display: flex; flex-direction: column; min-height: 100%; padding: calc(var(--head-h) + 10px) var(--gutter) 60px; }
.menu__label { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; letter-spacing: 0.05em; }
.menu__list { margin: 14px 0 0; padding: 0; }
.menu__link { display: block; padding: 4.5px 0; font-weight: 200; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: 0.011em; color: var(--pale); text-decoration: none; transition: color 0.2s; }
.menu__link:hover, .menu__link:focus-visible, .menu__link[aria-current="page"] { color: #fff; }
.menu__small { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: auto 0 0; padding: 40px 0 0; list-style: none; }

.foot { background: var(--navy); color: #fff; }
.foot a { color: inherit; }
/* the closing band (fix wave 2, C4): their line and its three links set on a daylight photograph (a riverboat on the Mississippi at Hannibal),
   flush between the contact band and the rest of the footer; the words sit on the sky strip, on the left half, under a navy veil that clears
   toward the right so the boat stays bright. Real-pixel contrast: _work/w2b/px_closing.cjs; shell.CLOSING_BG declares the lightest backdrop. */
.closing { position: relative; isolation: isolate; overflow: hidden; min-height: 440px; background: var(--navy); color: #fff; }
.closing__media, .closing__media picture, .closing__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.closing__media img { object-fit: cover; object-position: 50% 22%; }
/* fix wave 3 (planner K6): the veil is hero A's construction, a navy gradient only behind the heading and the three links, so the boat shows at full light
   everywhere else. Phone: the words fill the top of the band (about 175 px), so the veil holds to 200 px and clears downward. From 768 px: the words
   end 470 to 530 px right of the gutter at every width, so the veil holds to gutter + 500 px and clears by gutter + 820 px, measured from the left in px
   (the same reason hero A's stops are px). Real-pixel contrast of every run: _work/w3/ (px_closing.cjs, both engines, 360 to 2560). */
.closing__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 51, 70, 0.8) 0, rgba(22, 51, 70, 0.78) 200px, rgba(22, 51, 70, 0.4) 270px, rgba(22, 51, 70, 0) 340px); }
.closing__in { position: relative; z-index: 1; padding-top: 52px; padding-bottom: 52px; }
.closing__h { color: #fff; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; }
.closing a { color: #fff; }
.closing :focus-visible { outline-color: #fff; }
.foot__plain { color: var(--pale); }
.foot__low { display: grid; gap: 44px; padding-top: 72px; }
.foot__logo { width: 108px; height: auto; }
.foot__legal, .foot__p, .foot__copy, .foot__col li { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: 0.05em; color: var(--pale); }
.foot__legal { margin-top: 28px; max-width: 360px; }
.foot__p { margin: 0 0 14px; }
.foot__col-h { margin: 0 0 14px; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; letter-spacing: 0.05em; color: #fff; }
.foot__cols { display: grid; gap: 30px; }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot__col a, .foot__p a.link-small--plain { color: var(--pale); }
.foot__col a:hover, .foot__p a:hover { color: #fff; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 56px; padding-bottom: 28px; }
.foot__credit a { color: var(--pale); }
@media (min-width: 768px) {
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__low { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .closing { min-height: clamp(400px, 31vw, 560px); }
  .closing__veil { background: linear-gradient(90deg, rgba(22, 51, 70, 0.8) 0, rgba(22, 51, 70, 0.76) calc(var(--gutter) + 500px), rgba(22, 51, 70, 0.66) calc(var(--gutter) + 570px), rgba(22, 51, 70, 0.3) calc(var(--gutter) + 680px), rgba(22, 51, 70, 0) calc(var(--gutter) + 820px)); }
  .closing__in { padding-top: 64px; }
  .closing__actions { margin-top: 28px; }
}
@media (min-width: 1024px) {
  .foot__low { grid-template-columns: 551fr 330fr 415fr; gap: 0 24px; padding-top: 96px; }
  .foot__brand { grid-column: auto; }
}