/* Keep navigation visible and anchor destinations clear of the masthead. */
html { scroll-padding-top: calc(var(--doshin-header-height, 84px) + 16px); }
body > header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper, #F1F5FA);
}
body > header .header-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--line, #CBD8E4);
  border-radius: 8px;
  color: var(--ink, #293949);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
}
body > header .header-signin:hover {
  border-color: var(--accent, #2D4FC5);
  color: var(--accent, #2D4FC5);
}

/* The desktop masthead spans the viewport; navigation stays truly centred. */
@media (min-width: 960px) {
  body > header > .wrap.nav,
  body > .ds-header > .ds-nav,
  body > .ds-header > .nav {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding: 22px clamp(28px, 2.5vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
  }
  body > header > .nav > .logo,
  body > .ds-header > .ds-nav > .logo {
    grid-column: 1;
    justify-self: start;
  }
  body > header > .nav > .nav-links,
  body > .ds-header > .ds-nav > .nav-links {
    grid-column: 2;
    justify-self: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 32px;
    white-space: nowrap;
  }
  body > header .header-signin {
    grid-column: 3;
    justify-self: end;
  }
}

/* A compact, centred masthead and introduction on phones. */
@media (max-width: 760px) {
  body > header > .wrap.nav,
  body > .ds-header > .ds-nav,
  body > .ds-header > .nav {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding: 12px 16px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  body > header .header-signin {
    position: absolute;
    top: 14px;
    right: 16px;
    padding-inline: 10px;
  }
  body > header .nav-links {
    justify-content: center;
    align-items: center;
    gap: 4px 12px;
    max-width: 100%;
    font-size: .875rem;
    flex-wrap: wrap;
  }
  body > header .nav-links > * { display: inline-flex; align-items: center; min-height: 36px; }
  body .hero.wrap { padding: 38px 24px 32px; }
  body .hero-head, body .hero-say,
  body .membership-pitch, body .how-hero > h1, body .how-hero-copy,
  body .ds-hero > div, body .page-hero, body .business-hero-copy {
    text-align: center;
  }
  body .hero h1, body #why h1, body .how-hero h1,
  body .ds-hero h1, body .page-hero h1,
  body .hero .standfirst, body #why .lede,
  body .page-hero .intro, body .business-hero-copy {
    margin-inline: auto;
  }
  body .hero h1 { max-width: 18ch; }
  body .hero .cta-row, body .how-hero .cta-row,
  body .page-actions, body .business-actions { justify-content: center; }
  body .hero .cta-row { flex-direction: column; gap: 12px; margin-top: 24px; }
  body .hero .cta-row .btn { box-sizing: border-box; width: min(100%, 280px); text-align: center; }
  body #membership-benefits .benefit { text-align: center; }
  body main .wrap > .kicker, body main .wrap > h2, body main .wrap > .lede,
  body .membership-proof h2, body .how-section-intro, body .how-start-intro,
  body .how-finish, body .close .inner { text-align: center; }
  body main .wrap > h2, body main .wrap > .lede,
  body .how-section-intro > h2, body .how-section-intro > .lede,
  body .membership-proof h2 { margin-inline: auto; }
  body .comm-chips, body .community-links { justify-content: center; }
  body .comm-panel > h3, body .comm-panel > .tag { text-align: center; }
  body .comm-panel .community-specialisms, body .community-framework,
  body .ds-registration form { text-align: left; }
  body footer .foot-grid { align-items: center; flex-direction: column; text-align: center; gap: 20px; }
  body footer .foot-links { justify-content: center; gap: 12px 20px; }
  body footer .foot-note { text-align: center; }
}