/* Client follow-up: make the BACP accreditation mark three times larger. */
:root { --header-height: 228px; }

.brand::before {
  width: clamp(174px, 18vw, 246px);
  height: clamp(138px, 15vw, 204px);
}
.header__inner {
  width: 100%;
  max-width: none;
  min-height: 228px;
  margin-inline: 0;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.brand {
  flex-direction: row-reverse;
  gap: clamp(.25rem, .6vw, .55rem);
  padding-inline: 0;
}
.brand img {
  width: auto;
  height: clamp(200px, 17vw, 218px);
  max-width: none;
  max-height: none;
}

/* The larger NSR mark now lives in the header, beside the BACP mark. */
.hero__brand-layout { grid-template-columns: minmax(0, 1fr); }
.hero__brand-visual { display: none; }

.overview-prompt {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  color: var(--ink-soft);
}
.overview-prompt p { margin: 0; }
.overview-prompt__icon {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--eucalyptus);
}

/* Allow longer CMS-managed image quotes to fit without clipping. */
.contact-quote { padding: .75rem; }
.contact-quote p { max-width: 24ch; }

/* Qualifications published in Sanity are rendered as a clear credentials list. */
.qualification-list {
  display: grid;
  gap: .72rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
}
.qualification-list li {
  position: relative;
  padding-left: 1.35rem;
}
.qualification-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: .48rem;
  height: .48rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--eucalyptus), var(--sky-strong));
  box-shadow: 0 0 0 .22rem rgba(127, 174, 138, .12);
}

@media (max-width: 1240px) {
  :root { --header-height: 214px; }
  .header__inner { min-height: 214px; }
}

@media (max-width: 760px) {
  :root { --header-height: 160px; }
  .header__inner { min-height: 160px; gap: .15rem; padding-inline: .6rem; }
  .brand { gap: .2rem; padding-inline: 0; }
  .brand::before { width: 144px; height: 132px; }
  .brand img { width: auto; height: 150px; max-width: none; max-height: none; }
  .menu-toggle { width: 44px; height: 44px; }
  .main-nav { top: calc(38px + 160px); }
}