/* ==========================================================================
   Greensnake — shared chrome
   The header, the full-screen menu and the footer. Loaded by EVERY page,
   which is exactly why it does not live in a page stylesheet.
   ========================================================================== */

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 300;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--green-900);
  font-weight: 600;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 16px; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  padding: 3px 80px;
  background: var(--green-900);
  transition: transform 400ms var(--ease-out), background 300ms linear;
}

.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container);
  height: 70px;
  margin-inline: auto;
}

.nav__logo img { width: 186px; height: 70px; object-fit: contain; }

/* ==========================================================================
   Mobile-only chrome, hidden on desktop
   --------------------------------------------------------------------------
   The header "Join" pill and the menu row thumbnails exist in the markup on
   every page but belong ONLY to the phone layout. Hiding them here — in the
   desktop stylesheet, by default — rather than showing them from the mobile
   file is the safe direction: new markup is invisible until something
   deliberately reveals it, instead of leaking into desktop the moment it is
   added. (It leaked exactly once, which is why this block exists.)
   ========================================================================== */
.nav__join { display: none; }
.menu__thumb { display: none; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--yellow);
  transition: transform var(--t-base) var(--ease-expressive);
}
.nav__toggle:hover { transform: scale(1.08); }
.nav__toggle:active { transform: scale(0.94); }
.nav__toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

/* The disc reads as 40px but the target is 44 — the smallest area that is
   reliably hittable with a thumb. Invisible, so nothing shifts. */
.nav__toggle::after,
.menu__close::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
}

.nav__toggle-bars { display: grid; gap: 5px; }
.nav__toggle-bars i {
  display: block;
  width: 16px; height: 2px;
  border-radius: 2px;
  background: var(--green-900);
  transition: width var(--t-base) var(--ease-out);
}
/* the lower bar reaches full width on hover — a small, legible "opens" cue */
.nav__toggle-bars i:last-child { width: 11px; margin-left: auto; }
.nav__toggle:hover .nav__toggle-bars i:last-child { width: 16px; }

/* ---------- full-screen menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--green-900);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }

.menu__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 20px var(--gutter) 60px;
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.menu__logo img { width: 150px; height: 57px; object-fit: contain; }

.menu__close {
  position: relative;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--green-900);
  transition: transform var(--t-base) var(--ease-expressive);
}
.menu__close:hover { transform: rotate(90deg); }
.menu__close:active { transform: rotate(90deg) scale(0.94); }
.menu__close:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.menu__close svg { width: 20px; height: 20px; }

.menu__nav { margin-top: 32px; }
.menu__nav li + li { margin-top: 6px; }

.menu__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: rgb(201, 230, 203);
  opacity: 0;
  transform: translateY(24px);
  transition: color var(--t-base), opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu__nav a:hover { color: var(--lime); }
.menu__nav a.is-current { color: var(--lime); }
.menu__nav a.is-current .menu__dot { background: var(--lime); }

.menu__dot {
  display: grid; place-items: center;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--white);
  color: var(--green-900);
  transition: transform var(--t-base) var(--ease-expressive);
}
.menu__nav a:hover .menu__dot { transform: translateX(4px); }
.menu__dot svg { width: 15px; height: 10px; }

.menu__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
}
.menu__social { display: flex; gap: 12px; }
.menu__social a {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(201, 230, 203, 0.35);
  color: rgb(201, 230, 203);
  transition: background var(--t-base), color var(--t-base);
}
.menu__social a:hover { background: var(--lime); color: var(--green-900); }
.menu__social svg { width: 17px; height: 17px; }

.menu__terms {
  font-size: 14px;
  font-weight: 500;
  color: rgb(201, 230, 203);
}
.menu__terms:hover { color: var(--lime); }

body.menu-open { overflow: hidden; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--black-ui); padding: 140px 0 var(--space-10); }

.footer__plate {
  position: relative;
  width: 100%;
  max-width: 1179px;
  height: 479px;
  margin: 0 auto 62px;
  border-radius: 65px;
  background: var(--cyan-panel);
  overflow: hidden;
}
.footer__plate-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.footer__plate-copy {
  position: absolute;
  z-index: 2;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 40px 32px;
}

/* keeps the type legible over the swimmer without flattening the photograph */
.footer__plate-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 62% at 50% 52%, rgba(1, 18, 26, 0.62) 0%, rgba(1, 18, 26, 0.28) 58%, transparent 100%);
  pointer-events: none;
}

/* 1179 / phi = 729 for the text column, 729 / phi = 450 for the sub;
   vertical rhythm steps through 21 / 21 / 34 */
.footer__stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 729px;
  text-align: center;
}

.footer__eyebrow {
  margin-bottom: 21px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.footer__h2 {
  margin-bottom: 21px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--white);
}

.footer__sub {
  max-width: 450px;
  margin-bottom: 34px;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.footer__join { position: relative; z-index: 3; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 48px;
  width: 100%;
  max-width: 1147px;
  min-height: 181px;
  margin-inline: auto;
  /* The rule below this block had ZERO space above it — the address text
     ended exactly on the line. A divider needs air on both sides or it reads
     as an underline on the last paragraph rather than as a separator. */
  padding-bottom: var(--space-9);
}
.footer__col h3 {
  margin-bottom: 22px;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  color: rgb(179, 179, 179);
}
.footer__col li + li { margin-top: 14px; }
.footer__col a, .footer__col li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 16px;
  line-height: 22.4px;
  color: var(--white);
  transition: color var(--t-base);
}
.footer__col a:hover { color: var(--lime); }
.footer__col svg { width: 14px; height: 10px; }
.footer__col--contact li { display: block; color: var(--white); line-height: 1.5; }

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 31px;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  /* 64px above the rule (from .footer__cols), 48px below it. The old
     min-height:160px + padding:37px produced a tall, empty box instead of a
     measured gap. */
  padding: var(--space-8) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  color: rgb(237, 237, 237);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1239.98px) {
  :root { --nav-h: 68px; }

  .nav { padding: 3px 20px; height: 68px; }
  .nav__inner { height: 62px; }
  .nav__logo img { width: 150px; height: 57px; }

  .menu__nav a { font-size: 26px; }

  /* footer */
  .footer { padding-top: 56px; }
  /* height must go back to auto, or aspect-ratio derives the width from it */
  .footer__plate {
    border-radius: 32px;
    margin: 0 16px 32px;
    width: auto;
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .footer__plate-copy { padding: 28px 20px; }
  .footer__stack { max-width: 100%; }
  .footer__eyebrow { margin-bottom: 13px; }
  .footer__h2 { margin-bottom: 13px; }
  .footer__sub { margin-bottom: 21px; font-size: 15px; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 32px; padding-inline: 20px; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 10px; padding-inline: 20px; }
}

@media (max-width: 560px) {
  .footer__cols { grid-template-columns: 1fr; }
}