/* ═══════════════════════════════════════════════════════════════════════
   Homepage components. Loads last.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── white header with logo lockup ──────────────────────────────────── */
.nav{background:#fff;border-bottom:0}
/* padding-block, not `padding: .9rem 0`, because the shorthand zeroed the horizontal
   padding .shell supplies, so the Join button's fill ran to the very edge while
   the logo only looked inset because of whitespace inside the PNG. */
.nav__in{padding-block:.9rem;align-items:center}
.nav__brand{display:block;line-height:0}
/* Logo height is intentional at 70px and has drifted downward across layout
   passes. It is the largest size that still leaves the five nav items and the
   Join button on one line at 1180px. Do not reduce it to make something else
   fit. Move the something else instead. */
.nav__brand img{height:70px;width:auto;display:block}
/* align-items:center, or the links stretch to the container height and their
   text sits at the top while the padded Join button centers its own. That
   reads as the links floating high. */
.nav nav{gap:1.15rem;align-items:center}
.nav nav a{color:var(--navy);opacity:1;font-weight:600;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase}
.nav nav a:hover{color:var(--coastal)}

/* ── image pair ─────────────────────────────────────────────────────── */
.image-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--navy)}
.image-pair figure{margin:0;height:clamp(190px,24vw,330px);
  background-image:var(--pair-image,none);background-size:cover;background-position:center}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding:clamp(3rem,8vw,6rem) 0 clamp(3rem,8vw,6rem);text-align:center}
.hero--tall{padding-bottom:clamp(14rem,34vw,26rem)}
.hero::before{content:"";position:absolute;inset:0;
  background-image:var(--hero-image,none);background-size:cover;
  background-position:center bottom;opacity:1}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,41,59,.86) 0%,rgba(16,41,59,.6) 42%,rgba(16,41,59,.12) 72%,rgba(16,41,59,0) 100%)}
.hero .shell{position:relative;z-index:1}
.hero__h{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.7rem,4.6vw,3.1rem);line-height:1.06;letter-spacing:.005em;
  margin:0 auto 1.4rem;max-width:20ch;
  padding-bottom:1.2rem;border-bottom:1px solid rgba(255,255,255,.3)}
.hero__body{max-width:74ch;margin:0 auto}
.hero__body p{font-size:clamp(.92rem,1.6vw,1.02rem);line-height:1.65;
  color:rgba(255,255,255,.9);margin:0 0 1rem}
.hero__actions{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;
  margin:2rem 0 0}
.hero .btn{background:var(--sea);color:#fff;font-weight:600;letter-spacing:.09em;
  padding:.85rem 1.5rem}
.hero .btn:hover{background:var(--gold);color:var(--navy)}
.hero .btn--ghost{background:var(--sea);border:0}

/* ── statement band ─────────────────────────────────────────────────── */
.statement{background:#000;color:#fff;padding:clamp(3.5rem,9vw,6.5rem) 0;text-align:center}
.statement p{margin:0 auto;max-width:26ch;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,4.2vw,2.9rem);line-height:1.18;letter-spacing:-.012em}
.statement--light{background:var(--sand);color:var(--navy)}

/* ── mission ────────────────────────────────────────────────────────── */
.mission{position:relative;background:var(--navy-mid);color:#fff;overflow:hidden;
  text-align:center;padding:clamp(2.8rem,7vw,4.5rem) 0 clamp(12rem,30vw,22rem)}
.mission::before{content:"";position:absolute;inset:0;
  background-image:var(--mission-image,none);background-size:cover;
  background-position:center bottom}
.mission::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(29,67,86,.82) 0%,rgba(29,67,86,.5) 45%,rgba(29,67,86,0) 78%)}
.mission .shell{position:relative;z-index:1}
.mission__h{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,3.6vw,2.3rem);letter-spacing:.04em;margin:0 0 1.3rem}
.mission__creed{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;
  font:600 .74rem/1.5 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  margin:0 auto 1.4rem;max-width:60ch;
  padding:1rem 0;border-top:1px solid rgba(255,255,255,.28);
  border-bottom:1px solid rgba(255,255,255,.28)}
.mission__creed i{font-style:normal;color:var(--gold)}
.mission__body{max-width:66ch;margin:0 auto}
.mission__body p{font-size:clamp(.92rem,1.6vw,1.02rem);line-height:1.65;
  color:rgba(255,255,255,.9);margin:0}

/* ── pillars ────────────────────────────────────────────────────────── */
.pillars{background:var(--navy);color:#fff;padding:clamp(3rem,7vw,5rem) 0}
.pillars__h{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.4rem,3.4vw,2.2rem);letter-spacing:.04em;text-align:center;
  margin:0 0 clamp(2rem,4vw,3rem);padding-bottom:1.2rem;
  border-bottom:1px solid rgba(255,255,255,.22)}
/* Three across by default. Four items in a three-column grid leaves a lone card
   on the second row, so exactly four becomes 2x2. The client can add or remove
   an item without creating an orphan. Five reads fine as 3+2. */
.pillars__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,3rem)}
.pillars__grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
.pillar img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  margin-bottom:1.1rem}
.pillar h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.9rem;letter-spacing:.09em;margin:0 0 .7rem;padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,.22)}
.pillar p{margin:0;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.78)}

/* ── signup band ────────────────────────────────────────────────────── */
.signup-band{background:var(--navy);color:#fff;text-align:center;
  padding:clamp(2.5rem,6vw,4rem) 0 clamp(3rem,7vw,5rem)}
.signup-band__strap{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.85rem,2vw,1.15rem);letter-spacing:.06em;margin:0 0 2rem}
.signup-band__badge{width:clamp(120px,16vw,175px);height:auto;margin:0 auto 1.6rem;display:block}
.signup-band__body{max-width:56ch;margin:0 auto .9rem;font-size:.88rem;line-height:1.6;
  color:rgba(255,255,255,.75)}
.signup-band__prompt{margin:0 auto 1.4rem;font-size:.92rem;color:rgba(255,255,255,.9)}
.signup-band__form{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.signup-band__form input{width:min(320px,70vw);padding:.72rem .85rem;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;
  font:400 .92rem/1.3 var(--ui);border-radius:2px}
.signup-band__form input::placeholder{color:rgba(255,255,255,.5)}
.signup-band__form input:focus{outline:2px solid var(--gold);outline-offset:-1px}
.signup-band__form .btn{background:var(--sea);color:#fff;border:0;cursor:pointer;
  font-family:var(--ui);padding:.72rem 1.5rem}
.signup-band__form .btn:hover{background:var(--gold);color:var(--navy)}

/* the closing band already carries the sign-off, so keep the footer quiet */
.foot{padding:1.6rem 0 2.4rem;background:var(--navy-deep)}
.foot__strap{display:none}

@media(max-width:860px){
  .nav__brand img{height:44px}
  .pillars__grid{grid-template-columns:1fr;gap:2.2rem}
  .image-pair{grid-template-columns:1fr}
  .hero--tall{padding-bottom:clamp(8rem,40vw,14rem)}
  .mission{padding-bottom:clamp(7rem,38vw,13rem)}
}

/* ── latest news (ported from Design) ───────────────────────────────── */
.news-block{background:var(--paper);padding:clamp(3.5rem,9vw,8.75rem) 0}
.news-block__h{margin:0 0 clamp(2rem,5vw,5rem);color:var(--navy);font-weight:700;
  font-size:clamp(2.1rem,5.2vw,4rem);line-height:1.2;letter-spacing:-.02em}
.news-block__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.8rem,4vw,3.75rem);align-items:start}
.news-block__item{display:flex;flex-direction:column;border-top:4px solid var(--gold);
  padding-top:1.4rem}
.news-block__date{margin:0 0 1rem;font:700 .8rem/1 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--coastal)}
.news-block__title{margin:0 0 1rem;font-size:1.5rem;line-height:1.3;
  letter-spacing:-.01em}
.news-block__title a{color:var(--navy);text-decoration:none}
.news-block__title a:hover{color:var(--coastal)}
.news-block__sum{margin:0 0 1rem;font-size:1rem;line-height:1.7;color:var(--ink-soft)}
.news-block__via{margin:0;font:700 .75rem/1.4 var(--ui);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);opacity:.75}
.news-block__more{margin:clamp(2.5rem,6vw,7.5rem) 0 0;text-align:center}
.news-block .btn--sea{background:var(--sea);color:#fff}
.news-block .btn--sea:hover{background:var(--navy);color:#fff}

@media(max-width:860px){
  .news-block__grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════
   Design port. These override the rules above because later rules in the same
   file win.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero: photo, copy bottom-left, sentence case. */
.hero{min-height:min(680px,78vh);display:flex;align-items:flex-end;text-align:left;
  padding:clamp(4rem,12vw,7.5rem) 0 clamp(3rem,8vw,7.5rem)}
.hero::after{background:linear-gradient(180deg,rgba(10,29,43,.45),rgba(10,29,43,.65))}
.hero .shell{width:100%}
.hero__h{text-transform:none;letter-spacing:-.02em;border-bottom:0;padding-bottom:0;
  margin:0 0 clamp(1.4rem,3vw,2.5rem);max-width:16ch;
  font-size:clamp(2.2rem,6vw,4.5rem);line-height:1.15}
.hero__body{margin:0;max-width:44ch}
.hero__body p{font-size:clamp(1rem,1.9vw,1.25rem);line-height:1.7;color:var(--sand)}
.hero__actions{justify-content:flex-start;margin-top:clamp(1.8rem,4vw,3rem)}
.hero .btn{font-family:var(--ui);font-weight:700;text-transform:uppercase;
  font-size:.75rem;letter-spacing:.07em;padding:1rem 2.25rem}
.hero .btn--ghost{background:transparent;border:2px solid #fff;padding:.875rem 2.25rem}
.hero .btn--ghost:hover{background:#fff;color:var(--navy)}

/* Creed band, direction B, "masthead".
   Solid coastal orange, no gradient and no photography: the homepage is
   photo-heavy and this band earns more by giving that imagery room. The
   statement is set at display scale in Newsreader rather than shrunk into a UI
   label. The middots are the client's own device and are given room to punctuate
   rather than crowded between phrases. */
.creed{background:var(--coastal);border-bottom:0;
  padding:clamp(2rem,5vw,3.4rem) 0}
/* No max-width: the statement is ~67 characters and the whole point is that it
   holds one line. Constraining the measure forced it to stack at every width.
   The type scale is sized so the line fits the 1100px shell instead. It holds
   one line from roughly 640px up and wraps to two below that, which is correct
   on a phone. If the phrases get longer, lower the 1.85rem cap before touching vw. */
.creed p{display:block;margin:0 auto;padding:0;
  text-align:center;text-wrap:balance;
  font-family:var(--display);font-weight:400;text-transform:none;
  font-size:clamp(1.05rem,2.4vw,1.85rem);line-height:1.28;letter-spacing:-.018em;
  color:#fff}
.creed span{display:inline}
.creed i{font-style:normal;opacity:1;line-height:1;
  color:rgba(241,237,228,.58);padding:0 .38em;font-size:1.1em}

/* Mission: flat navy, centred, no photographic tail. */
.mission{background:var(--navy);padding:clamp(3.5rem,9vw,8.75rem) 0}
.mission::before,.mission::after{display:none}
.mission__h{text-transform:none;letter-spacing:-.02em;
  font-size:clamp(2.1rem,5.2vw,4rem);line-height:1.2;margin:0 0 clamp(1.5rem,3vw,3rem)}
.mission__body{max-width:53ch}
.mission__body p{font-size:clamp(1rem,1.9vw,1.25rem);line-height:1.75;color:var(--sand)}

/* Who we represent: text only on navy-mid, gold headings. */
.pillars{background:var(--navy-mid);padding:clamp(3.5rem,9vw,8.75rem) 0}
.pillars__h{text-align:left;text-transform:none;letter-spacing:-.02em;border-bottom:0;
  padding-bottom:0;font-size:clamp(2.1rem,5.2vw,4rem);line-height:1.2;
  margin:0 0 clamp(2rem,5vw,5rem)}
.pillar h3{color:var(--gold);border-bottom:0;padding-bottom:0;font-size:1.125rem;
  letter-spacing:.045em;margin:0 0 1.5rem}
.pillar p{font-size:1.125rem;line-height:1.7;color:var(--sand)}

/* Stay connected. */
.signup-band{padding:clamp(3rem,7vw,6.25rem) 0}
.signup-band__h{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.8rem,4.2vw,3rem);line-height:1.2;margin:0 0 1.5rem}
.signup-band__body{font-size:1.125rem;color:var(--sand);max-width:60ch;
  margin:0 auto clamp(1.8rem,4vw,3rem)}

/* ── interior page header ───────────────────────────────────────────── */
.page-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;
  min-height:min(360px,50vh);display:flex;align-items:flex-end;
  padding:clamp(2.5rem,7vw,3.75rem) 0}
.page-hero::before{content:"";position:absolute;inset:0;
  background-image:var(--page-hero-image,none);background-size:cover;
  background-position:center}
.page-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,29,43,.6),rgba(10,29,43,.8))}
.page-hero .shell{position:relative;z-index:1;width:100%}
.page-hero__h{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.2;margin:0 0 1rem}
.page-hero__sub{margin:0;max-width:38ch;font-size:clamp(.98rem,1.7vw,1.125rem);
  line-height:1.6;color:var(--sand)}

/* ── detail list ────────────────────────────────────────────────────── */
.detail-list{background:var(--paper);padding:clamp(2.8rem,7vw,5rem) 0}
.detail-list--panel{background:var(--sand)}
.detail-list__h{font-family:var(--display);font-weight:700;color:var(--navy);
  letter-spacing:-.015em;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.25;
  margin:0 0 1.5rem}
.detail-list__intro{margin:0 0 2rem;max-width:70ch;font-size:1rem;line-height:1.8;
  color:var(--ink-soft)}
.detail-list__items{display:flex;flex-direction:column;gap:2rem;max-width:70ch}
.detail-list__item h3{margin:0 0 .75rem;font-family:var(--display);font-weight:700;
  font-size:1.125rem;line-height:1.3;color:var(--sea)}
.detail-list__item p{margin:0;font-size:.95rem;line-height:1.8;color:var(--ink-soft)}

/* One left-aligned column: heading, copy, button, on the same edge. The body was
   centred while the heading was left-aligned, which put the three parts on
   different axes and read as a two-column split with a floating button. */
.cta-band{padding:clamp(1.8rem,4vw,2.6rem) 0}
.cta-band .shell{display:flex;flex-direction:column;align-items:flex-start;
  gap:1.1rem}
.cta-band__h{margin:0;max-width:24ch}
.cta-band__body{margin:0;font-size:1rem;line-height:1.7;max-width:60ch}
.cta-band .btn{margin:0}

/* ── contact ────────────────────────────────────────────────────────── */
.contact{background:var(--sand);padding:clamp(2.8rem,7vw,5rem) 0}
.contact__in{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,5vw,4rem);
  align-items:start}
.contact__h{font-family:var(--display);font-weight:700;color:var(--navy);
  font-size:1.5rem;line-height:1.3;margin:0 0 2rem}
.contact__form p{margin:0 0 1.25rem}
.contact__form label{display:block;margin-bottom:.5rem;font:600 .78rem/1 var(--ui);
  letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.contact__form input,.contact__form select,.contact__form textarea{width:100%;
  padding:.75rem 1rem;border:1px solid var(--line);background:var(--paper);
  color:var(--navy);font:400 .9rem/1.5 var(--body)}
.contact__form textarea{resize:vertical}
.contact__form input:focus,.contact__form select:focus,.contact__form textarea:focus{
  outline:2px solid var(--sea);outline-offset:-1px}
.contact__form .btn--sea{background:var(--sea);color:#fff;border:0;cursor:pointer;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;font-size:.78rem;
  letter-spacing:.05em;padding:.875rem 1.75rem}
.contact__form .btn--sea:hover{background:var(--navy)}
.contact__details{display:flex;flex-direction:column;gap:1.75rem}
.contact__detail h3{margin:0 0 .5rem;font:700 .8rem/1 var(--ui);letter-spacing:.05em;
  text-transform:uppercase;color:var(--sea)}
.contact__detail p{margin:0;font-size:.9rem;line-height:1.8;color:var(--ink-soft)}
.contact__detail a{color:var(--ink-soft)}

@media(max-width:860px){
  .contact__in{grid-template-columns:1fr}
}

/* ── footer (Design port) ───────────────────────────────────────────── */
.foot{padding:clamp(2.6rem,6vw,4rem) 0 clamp(1.8rem,4vw,2.6rem);
  background:var(--navy-deep);color:var(--sand);text-align:left}

/* Identity is wider than the link columns: it carries a sentence and a button,
   they carry four words each. */
.foot__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(1.8rem,4vw,3.5rem)}

.foot__name{margin:0 0 .8rem;font:700 .78rem/1.3 var(--ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--sand)}
.foot__blurb{margin:0 0 1.5rem;max-width:34ch;
  font-family:var(--display);font-size:.94rem;line-height:1.6;
  color:rgba(241,237,228,.82)}
.foot__join{display:inline-block;background:var(--coastal);color:#fff;
  padding:.62rem 1.15rem;font:700 .72rem/1 var(--ui);letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none}
.foot__join:hover{background:var(--gold);color:var(--navy)}

.foot__h{margin:0 0 1rem;font:600 .68rem/1 var(--ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.foot__links{margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:.7rem}
.foot__links a{font-family:var(--display);font-size:.95rem;line-height:1.4;
  color:rgba(255,255,255,.82);text-decoration:none}
.foot__links a:hover{color:#fff;text-decoration:underline;text-underline-offset:.18em}

/* Both blocks left-aligned and stacked, under a hairline. */
.foot__base{margin-top:clamp(2rem,5vw,3rem);padding-top:1.5rem;
  border-top:1px solid rgba(241,237,228,.18)}
.foot__note{margin:0 0 .9rem;max-width:62ch;font-size:.82rem;line-height:1.7;
  color:rgba(241,237,228,.6)}
.foot__copy{margin:0;font-size:.82rem;line-height:1.7;color:rgba(241,237,228,.6)}
.foot__copy a{color:inherit;text-decoration:underline;text-underline-offset:.16em}
.foot__copy a:hover{color:var(--gold)}

@media(max-width:860px){
  /* Identity spans, the three link columns go two-up. At 380px a single column
     would push the copyright a long way down for four short lists. */
  .foot__cols{grid-template-columns:1fr 1fr;gap:2rem clamp(1.2rem,5vw,2rem)}
  .foot__identity{grid-column:1 / -1}
}
@media(max-width:380px){
  .foot__cols{grid-template-columns:1fr}
}

/* ── mobile navigation ──────────────────────────────────────────────── */
.nav__toggle{display:none}

@media(max-width:860px){
  .nav__in{flex-direction:row;flex-wrap:nowrap;align-items:center;
    justify-content:space-between;gap:1rem;position:relative}

  .nav__toggle{display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-right:-.6rem;padding:0;
    background:none;border:0;cursor:pointer;color:var(--navy)}
  .nav__toggle:focus-visible{outline:2px solid var(--sea);outline-offset:2px}

  .nav__bars{display:block;width:24px;height:16px;position:relative}
  .nav__bars span{position:absolute;left:0;width:100%;height:2px;
    background:currentColor;transition:transform 180ms ease,opacity 120ms ease}
  .nav__bars span:nth-child(1){top:0}
  .nav__bars span:nth-child(2){top:7px}
  .nav__bars span:nth-child(3){top:14px}

  .nav--open .nav__bars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav--open .nav__bars span:nth-child(2){opacity:0}
  .nav--open .nav__bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Panel expands below the header bar. */
  .nav__menu{position:absolute;top:100%;left:0;right:0;z-index:90;
    display:block;flex-direction:column;gap:0;
    background:var(--paper);border-top:1px solid var(--line);
    box-shadow:0 12px 24px rgba(16,41,59,.12);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height 220ms ease,visibility 0s linear 220ms}
  .nav--open .nav__menu{max-height:60vh;overflow-y:auto;visibility:visible;
    transition:max-height 220ms ease,visibility 0s}

  /* Type comes from .nav nav a so the panel matches the desktop bar; only the
     tap-target layout differs here. */
  .nav__menu a{display:flex;align-items:center;min-height:44px;
    padding:.7rem clamp(1.1rem,4vw,2.5rem);
    border-bottom:1px solid var(--line)}
  .nav__menu a:last-child{border-bottom:0}
  .nav__menu a:hover,.nav__menu a:focus-visible{background:var(--sand);color:var(--navy)}
}

@media(max-width:860px) and (prefers-reduced-motion:reduce){
  .nav__bars span,.nav__menu{transition:none}
}

/* No thumbnail in the homepage block. An image on one card of a three-column row
   pushes that headline down and the columns stop aligning; the emphasis is not
   worth the broken row. Images still render on article pages, and as a floated
   thumbnail in the /news/ list where a vertical list absorbs them. */

/* ── nav Join button ────────────────────────────────────────────────── */
/* An action, not a sixth page: filled so it reads as a button among the
   small-caps links, and it keeps that reading in the mobile panel. */
/* Coastal orange, not gold: orange is the action color on this site (the creed
   band, the CTA bands) and gold reads as decoration. */
.nav__cta{background:var(--coastal);color:#fff!important;
  padding:.6rem 1.1rem;margin-left:.6rem;opacity:1;
  display:inline-flex;align-items:center;line-height:1}
.nav__cta:hover{background:var(--navy);color:#fff!important}

@media(max-width:860px){
  .nav__menu .nav__cta{margin:.6rem clamp(1.1rem,4vw,2.5rem) .9rem;
    justify-content:center;min-height:44px;border-bottom:0}
}