/* Next Step Advisory, redesign mock-up.
   Brand: navy and blue from the logo lettering, green from the logo's step arrow,
   League Spartan and Open Sans from the current site, an italic serif accent that
   echoes "advisory" in the logo. */

:root {
  --ink: #003d99;
  --blue-hover: #002f78;
  --blue: #003d99;
  --blue-soft: #d9e5f7;
  --green: #52b457;
  --orange: #ff6948;
  --orange-deep: #b73a1f;
  --orange-soft: #ffe7e1;
  --mist: #eef3fb;
  --paper: #ffffff;
  --text: #3b4658;
  --muted: #5d6879;
  --rule: #d6deea;

  --display: 'League Spartan', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --accent: 'EB Garamond', Georgia, serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html {
  font-size: 18px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.06rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--blue);
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- Type ---------- */

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 {
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
}

h3 {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}

.serif {
  font-family: var(--accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--blue);
}

.kicker {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 14px;
}

.lede {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 40ch;
}

p {
  margin: 0 0 1em;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 15px 24px 13px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
}

.btn--primary:hover {
  background: var(--blue-hover);
  transform: translateY(-1px);
}

.btn--ghost {
  border-color: var(--blue);
  color: var(--blue);
}

.btn--ghost:hover {
  background: var(--blue);
  color: #fff;
}

.btn--green {
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 1.06rem;
}

.btn--green:hover {
  color: #fff;
  box-shadow: 0 6px 18px rgba(3, 18, 48, 0.28);
  transform: translateY(-1px);
}

.btn .arrow {
  transition: transform 0.2s ease;
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* ---------- Banner and header ---------- */

.banner {
  background: var(--ink);
  color: #dce6f6;
  font-size: 0.92rem;
  text-align: center;
  padding: 9px var(--gutter);
}

.banner a {
  color: #fff;
  font-weight: 600;
  text-decoration-color: var(--green);
  text-underline-offset: 4px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Solid: the logo file has a white background, so a see-through header would show it as a box. */
  background: #fff;
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
}

.logo img {
  height: 84px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav a {
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.16rem;
}

.nav a:not(.btn):hover,
.nav a[aria-current='page'] {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.nav .btn {
  padding: 12px 20px 10px;
}

.nav a.btn--primary,
.nav a.btn--primary:hover {
  color: #fff;
  text-decoration: none;
}

.menu-toggle {
  display: none;
  background: none;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  padding: 8px 12px 6px;
}

/* ---------- Hero: the staircase ----------
   Three ways to work, rising left to right, with the logo's green arrow climbing them.
   Heights are fixed so the arrow can follow the treads; each is tall enough for its text. */

.hero {
  background: linear-gradient(180deg, var(--paper) 0%, var(--mist) 100%);
  padding: clamp(56px, 7vw, 88px) 0 0;
  overflow: hidden;
}

.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 24px 64px;
  align-items: end;
}

.hero-copy h1 {
  margin-bottom: 0;
}

.hero-copy .lede {
  max-width: 44ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.stairs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  height: 440px;
  margin-top: clamp(64px, 7vw, 96px);
}

.step {
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.step:hover {
  transform: translateY(-6px);
}

.step h3 {
  font-size: 1.35rem;
  color: var(--ink);
}

.step p {
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}

.step .step-more {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  background: var(--orange);
  border-radius: 999px;
  padding: 7px 14px 5px;
}

.step:nth-child(1) {
  height: 240px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-bottom: 0;
}

.step:nth-child(2) {
  height: 330px;
  background: var(--blue-soft);
}

.step:nth-child(3) {
  height: 420px;
  background: var(--ink);
}

.step:nth-child(3) h3 {
  color: #fff;
}

.step:nth-child(3) p {
  color: #e3ebf8;
}

.step-climb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.step-climb path {
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke: var(--green);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: climb 2.4s 0.4s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}

.step-climb .head {
  fill: var(--green);
  opacity: 0;
  animation: appear 0.4s 2.6s ease forwards;
}

@keyframes climb {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes appear {
  to {
    opacity: 1;
  }
}

/* ---------- Sections ---------- */

.section {
  padding: clamp(72px, 9vw, 120px) 0;
}

.section--mist {
  background: var(--mist);
}

.section--ink {
  background: var(--ink);
  color: #cfdbef;
}

.section--ink h2,
.section--ink h3 {
  color: #fff;
}

.section--ink .kicker {
  color: var(--green);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 64px;
  align-items: end;
  margin-bottom: 56px;
}

.section-head p:not(.kicker) {
  margin: 0;
  font-size: 1.1rem;
}

.section-head .kicker {
  margin: 0 0 14px;
}

/* ---------- Client logos ---------- */

.clients {
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--rule);
}

.clients p {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 24px;
}

.logo-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 36px 48px;
  max-width: 1000px;
  margin: 0 auto;
}

.logo-row img {
  height: 68px;
  width: 100%;
  max-width: 210px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
  /* drops the off-white boxes some logo files come with */
  mix-blend-mode: multiply;
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}

/* Square logos carry their text inside a small block, so they get more height to
   stay as readable as the wide wordmarks */
.logo-row img.logo--square {
  height: 104px;
}

/* True Health: its yellow mark turns pale in grey, so it rests as a one-colour logo
   and swaps to full colour on hover */
.logo-swap {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 210px;
}

.logo-swap img {
  grid-area: 1 / 1;
}

.logo-row .logo-swap-colour {
  filter: none;
  mix-blend-mode: normal;
  opacity: 0;
}

.logo-swap:hover img:first-child {
  opacity: 0;
}

.logo-row .logo-swap:hover .logo-swap-colour {
  opacity: 1;
}

.logo-row img:hover {
  filter: none;
  opacity: 1;
}

/* ---------- The department ---------- */

.dept {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.team {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.team-member {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.team-member .badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  background: var(--blue-soft);
  color: var(--blue);
}

.team-member.lead .badge {
  background: var(--blue);
  color: #fff;
}

.team-member h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.team-member p {
  margin: 0;
  font-size: 0.95rem;
}

.promise {
  position: sticky;
  top: 120px;
  background: var(--ink);
  color: #d4def0;
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
}

.promise h3 {
  color: #fff;
  font-size: 1.35rem;
  margin-bottom: 20px;
}

.checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.checks li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
}

.checks li::before {
  content: '';
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

.section--mist .checks li::before,
.checks--light li::before {
  background-color: var(--green);
}

/* ---------- Services ---------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.service-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 36px);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 6px;
  background: var(--green);
  border-radius: 0 0 6px 0;
}


.service-card h3 {
  margin-bottom: 10px;
}

.service-card > p {
  font-size: 0.98rem;
  color: var(--muted);
}

.service-card ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  columns: 1;
}

.service-card li {
  padding: 9px 0;
  border-top: 1px solid var(--rule);
  font-size: 0.96rem;
}

.service-card li:first-child {
  border-top: 0;
}

/* ---------- Ways to work (services page) ---------- */

.ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.way {
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.way:nth-child(1) {
  background: var(--paper);
  border: 1px solid var(--rule);
  margin-top: 112px;
}

.way:nth-child(2) {
  background: var(--blue-soft);
  margin-top: 56px;
}

.way:nth-child(3) {
  background: var(--ink);
  color: #cfdbef;
}

.way:nth-child(3) h3 {
  color: #fff;
}

.way .for {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}

.way p,
.way .checks li {
  margin: 0;
  font-size: 1rem;
}

/* ---------- Process (a real sequence) ---------- */

.process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  counter-reset: step;
  border-top: 2px solid var(--blue);
}

.process li {
  list-style: none;
  padding: 28px 28px 0 0;
  position: relative;
}

.process li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -19px;
  left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  display: grid;
  place-items: center;
  padding-top: 2px;
}

.process h3 {
  margin: 14px 0 8px;
}

.process p {
  font-size: 0.98rem;
  margin: 0;
}

/* ---------- Testimonials ---------- */

.feature-quote {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.feature-quote img {
  width: 220px;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius);
}

blockquote {
  margin: 0;
}

.feature-quote blockquote p {
  font-family: var(--accent);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.3;
  color: #fff;
  margin-bottom: 22px;
}

.cite {
  font-family: var(--display);
  font-size: 1rem;
  color: #fff;
  font-weight: 600;
}

.cite span {
  display: block;
  font-weight: 400;
  color: #a9bbdb;
  font-size: 0.92rem;
}

.quotes {
  columns: 2 360px;
  column-gap: 20px;
}

.quotes > .quote {
  break-inside: avoid;
  margin: 0 0 20px !important;
}

.quote {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.quote blockquote {
  font-size: 0.98rem;
}

.quote blockquote p:first-child::before {
  content: '\201C';
  font-family: var(--accent);
  font-size: 3.4rem;
  line-height: 0;
  color: var(--green);
  display: block;
  height: 26px;
  margin-top: 18px;
}

.quote footer {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.quote footer img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.quote .who {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.quote .who span {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ---------- Testimonial carousel (home) ---------- */

.t-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}

.t-controls {
  display: flex;
  gap: 10px;
}

.t-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    opacity 0.25s ease;
}

.t-btn:hover:not(:disabled) {
  background: var(--green);
  border-color: var(--green);
}

.t-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.t-viewport {
  /* Cards start at the content edge and run off the right side of the screen. */
  padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2));
}

.t-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: 0;
  padding: 8px var(--gutter) 28px 0;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.t-track::-webkit-scrollbar {
  display: none;
}

.t-card {
  flex: 0 0 min(400px, 82vw);
  scroll-snap-align: start;
  margin: 0;
  background: var(--paper);
  border-radius: calc(var(--radius) * 1.3);
  padding: 34px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 18px 40px rgba(3, 18, 48, 0.28);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s ease;
}

.t-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px rgba(3, 18, 48, 0.36);
}

.t-card blockquote p {
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.42rem;
  line-height: 1.38;
  color: var(--ink);
  margin: 0;
}

.t-card blockquote p::before {
  content: '\201C';
  display: block;
  font-size: 3.6rem;
  line-height: 0.6;
  color: var(--green);
  margin-bottom: 10px;
}

.t-card figcaption {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.t-card figcaption img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.t-card .who {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.t-card .who span {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
}

.t-more {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--blue);
  text-decoration: none;
}

.t-more:hover {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 5px;
}

.t-dots {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.t-dots span {
  height: 6px;
  width: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  transition:
    width 0.4s ease,
    background 0.4s ease;
}

.t-dots span.is-active {
  width: 42px;
  background: var(--green);
}

/* ---------- Founder ---------- */

.founder {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.founder-photo {
  position: relative;
}

.founder-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

.founder-photo::after {
  content: '';
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 46%;
  height: 34%;
  border-right: 6px solid var(--green);
  border-bottom: 6px solid var(--green);
  border-radius: 0 0 var(--radius) 0;
  z-index: -1;
}

.credentials {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}

.credentials li {
  font-size: 0.95rem;
  padding-left: 18px;
  position: relative;
}

.credentials li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 2px;
}

.credentials--wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 32px;
}

.credentials a {
  color: var(--text);
  text-decoration-color: var(--green);
  text-underline-offset: 3px;
}

/* ---------- Appearances ---------- */

.appearances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.appearance {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 36px);
  background: var(--paper);
}

.appearance .show {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}

.appearance h3 {
  margin-bottom: 12px;
}

.appearance p {
  font-size: 0.96rem;
}

.text-link {
  font-family: var(--display);
  font-weight: 600;
  text-decoration: none;
  color: var(--blue);
}

.text-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 5px;
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 820px;
}

.faq details {
  border-top: 1px solid var(--rule);
  padding: 20px 0;
}

.faq details:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-size: 1.5rem;
  line-height: 1;
  color: var(--green);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  margin: 14px 0 0;
  max-width: 68ch;
}

/* ---------- Page header (inner pages) ---------- */

.page-head {
  background: linear-gradient(180deg, var(--paper) 0%, var(--mist) 100%);
  padding: clamp(64px, 8vw, 104px) 0 clamp(56px, 7vw, 88px);
  border-bottom: 1px solid var(--rule);
}

.page-head h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  max-width: 18ch;
  margin-bottom: 22px;
}

/* ---------- Call to action ---------- */

.cta {
  background: var(--blue);
  color: #dce6f6;
  border-radius: calc(var(--radius) * 1.5);
  padding: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cta h2 {
  color: #fff;
}

.cta p {
  margin: 16px 0 0;
  font-size: 1.1rem;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.cta .btn--ghost {
  border-color: #fff;
  color: #fff;
}

.cta .btn--ghost:hover {
  background: #fff;
  color: var(--blue);
}

/* ---------- Contact form ---------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 80px);
}

.form {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form label {
  display: grid;
  gap: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}

.form .full {
  grid-column: 1 / -1;
}

.form input,
.form textarea,
.form select {
  font: inherit;
  font-family: var(--body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--text);
  padding: 12px 14px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.form .hint {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
}

/* The honeypot: kept out of sight and out of the tab order. */
.form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form {
  position: relative;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.form-status {
  margin: 0;
  font-size: 0.95rem;
}

.form-status.is-ok {
  color: var(--green);
  font-weight: 600;
}

.form-status.is-error {
  color: #b42318;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: #dbe5f6;
  padding: 64px 0 40px;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.footer-logo {
  display: inline-block;
}

.footer-logo img {
  height: 96px;
  width: auto;
  margin: -16px 0 0 -24px;
}

.site-footer h3 {
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.site-footer a {
  color: #dce6f6;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--green);
}

.footer-base {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */

/* ---------- Three ways to work (services page) ---------- */

.ways--three {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* room above the cards for the arrow; padding, because a margin here would collapse
     into the heading's */
  padding-top: 48px;
}

.ways--three .ways-climb {
  inset: auto;
  top: -32px;
  left: 0;
  height: 192px;
}

.ways--three .way:nth-child(1) {
  background: var(--paper);
  border: 1px solid var(--rule);
  margin-top: 112px;
  color: var(--text);
}

.ways--three .way:nth-child(2) {
  background: var(--blue-soft);
  border: 0;
  margin-top: 56px;
  color: var(--text);
}

.ways--three .way:nth-child(2) h3 {
  color: var(--ink);
}

.ways--three .way:nth-child(3) {
  background: var(--ink);
  color: #e3ebf8;
}

.ways--three .way:nth-child(3) h3 {
  color: #fff;
}

.ways--three .way .positioning {
  font-weight: 600;
  color: inherit;
}

.difference {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.difference div {
  border-left: 4px solid var(--orange);
  background: var(--mist);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
}

.difference h3 {
  font-size: 1.12rem;
  margin-bottom: 6px;
}

.difference p {
  margin: 0;
  font-size: 0.98rem;
}

/* ---------- Service cards: description visible, services on expand ---------- */


.service-card details {
  margin-top: 16px;
  border-top: 1px solid var(--rule);
}

.service-card summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0 0;
  font-family: var(--display);
  font-weight: 600;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-card summary::-webkit-details-marker {
  display: none;
}

.service-card summary::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.25s ease;
}

.service-card details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.service-card details[open] summary .open-label,
.service-card details:not([open]) summary .close-label {
  display: none;
}

.service-card details ul {
  margin-top: 10px;
}

.closing-note {
  margin: 40px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 1.08rem;
  color: var(--text);
}

/* Home page service cards: a title and one line, linking to the full list */
.service-card--short {
  display: block;
  text-decoration: none;
  color: var(--text);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.service-card--short:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
}

.service-card--short p,
.service-card > p:last-child {
  margin-bottom: 0;
}

/* "Who we serve" has a label for its heading, so it sits a little further from the cards */
h2.kicker {
  margin-bottom: 28px;
}

/* ---------- Off your plate ---------- */

.plate {
  margin-top: clamp(48px, 6vw, 72px);
  border-radius: calc(var(--radius) * 1.3);
  background: var(--mist);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: 24px 48px;
  align-items: start;
}

.plate h3 {
  font-size: 1.35rem;
  margin-top: 6px;
}

.plate ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 36px;
}

.plate li {
  padding: 8px 0 8px 24px;
  position: relative;
}

.plate li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
}

.team-heading {
  font-size: 1.35rem;
  margin: 36px 0 0;
}

.dept .team-heading:first-child {
  margin-top: 0;
}

/* ---------- Podcasts ---------- */

.appearances--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.appearance {
  display: flex;
  flex-direction: column;
}

.appearance .cover {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
}

.appearance .text-link {
  margin-top: auto;
}

/* ---------- Blog ---------- */

.feed-link {
  margin-top: 18px;
}

.post-featured {
  margin-bottom: 28px;
}

.post-card[hidden] {
  display: none;
}

/* Blogs page category filter */
.post-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 28px;
  scroll-margin-top: 24px;
}

.post-filter-empty {
  color: var(--muted);
}

.post-filter button {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--blue);
  background: var(--paper);
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  padding: 9px 18px 7px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.post-filter button:hover,
.post-filter button[aria-pressed='true'] {
  background: var(--blue);
  color: #fff;
}

/* The standard closing paragraph on every post */
.post-about {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.post-about h2 {
  margin-top: 0;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.post-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(10, 42, 94, 0.12);
}

.post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.post-card img {
  width: 100%;
  aspect-ratio: 1200 / 628;
  object-fit: cover;
  background: var(--mist);
}

.post-card-text {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.post-card h3,
.post-card h2 {
  font-size: 1.18rem;
  line-height: 1.25;
}

.post-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.post-card .text-link {
  margin-top: auto;
  padding-top: 8px;
}

.post-date {
  font-family: var(--display);
  font-size: 0.9rem !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green) !important;
}

.post-card--featured .post-card-link {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.post-card--featured .post-card-link {
  align-items: center;
}

/* The blog headers are designed graphics at 1200 × 628: show them whole, never cropped. */
.post-card--featured img {
  height: auto;
  aspect-ratio: 1200 / 628;
}

.post-card--featured .post-card-text {
  padding: clamp(26px, 4vw, 48px);
  justify-content: center;
}

.post-card--featured h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.post-card--featured p {
  font-size: 1.05rem;
}

.wrap--narrow {
  width: min(760px, 100% - 2 * var(--gutter));
}

.post-head {
  background: linear-gradient(180deg, var(--paper) 0%, var(--mist) 100%);
  padding: clamp(56px, 7vw, 88px) 0 40px;
}

.post-head h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
}

.post-head .kicker a {
  color: inherit;
  text-decoration: none;
}

.post-meta {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.post-hero {
  width: 100%;
  border-radius: var(--radius);
  margin: 0 0 40px;
  margin-top: -8px;
}

.prose {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--text);
  padding-bottom: 24px;
}

.prose h2 {
  font-size: 1.7rem;
  margin: 44px 0 14px;
}

.prose h3 {
  font-size: 1.3rem;
  margin: 34px 0 10px;
}

.prose h4 {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--ink);
  margin: 28px 0 8px;
}

.prose p {
  margin: 0 0 1.1em;
}

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px 0;
  border-radius: var(--radius);
}

.prose blockquote {
  margin: 28px 0;
  padding-left: 22px;
  border-left: 4px solid var(--green);
  font-style: italic;
}

.prose ul,
.prose ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}

.prose li {
  margin-bottom: 0.4em;
}

.prose li::marker {
  color: var(--green);
}

.prose a {
  color: var(--blue);
  text-decoration-color: var(--green);
  text-underline-offset: 3px;
}

.prose figure {
  margin: 32px 0;
}

.prose figure img {
  width: 100%;
  border-radius: var(--radius);
}

.post-back {
  margin: 8px 0 64px;
}

.section--tight {
  padding-top: clamp(48px, 6vw, 72px);
}

.footer-tag {
  margin-top: 18px;
  max-width: 34ch;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .menu-toggle {
    display: inline-block;
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 20px;
  }

  .nav.is-open {
    display: flex;
  }

  .nav a:not(.btn) {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
  }

  .nav .btn {
    margin-top: 16px;
    justify-content: center;
  }

  .ways--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ways--three .way:nth-child(n) {
    margin-top: 0;
  }

  .ways--three {
    padding-top: 0;
  }

  .ways--three .ways-climb {
    display: none;
  }

  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .hero-copy,
  .dept,
  .founder,
  .contact,
  .cta,
  .section-head,
  .plate,
  .difference {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The staircase becomes a stepped list: each option indented one step further. */
  .stairs {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    gap: 10px;
    padding-bottom: 40px;
  }

  .step,
  .step:nth-child(n) {
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
  }

  .step:nth-child(4) {
    border: 0;
  }

  .step:nth-child(2) {
    margin-left: 6%;
  }

  .step:nth-child(3) {
    margin-left: 12%;
  }

  .step:nth-child(4) {
    margin-left: 18%;
  }

  .step-climb {
    display: none;
  }

  .ways {
    grid-template-columns: minmax(0, 1fr);
  }

  .promise {
    position: static;
  }

  .way:nth-child(1),
  .way:nth-child(2) {
    margin-top: 0;
  }

  .appearances--three {
    grid-template-columns: minmax(0, 1fr);
  }

  .appearance .cover {
    max-width: 240px;
  }

  .post-card--featured .post-card-link {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .logo-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }

  .logo-row img {
    height: 56px;
  }

  .logo-row img.logo--square {
    height: 84px;
  }

  body {
    font-size: 1rem;
  }

  .logo img {
    height: 66px;
  }

  .step:nth-child(2) {
    margin-left: 5%;
  }

  .step:nth-child(3) {
    margin-left: 10%;
  }

  .step:nth-child(4) {
    margin-left: 15%;
  }

  .ways--three,
  .service-grid,
  .appearances,
  .post-grid,
  .process,
  .form,
  .credentials,
  .plate ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .process {
    gap: 36px;
    border-top: 0;
    border-left: 2px solid var(--blue);
    padding-left: 30px;
  }

  .process li {
    padding: 0;
  }

  .process li::before {
    top: 0;
    left: -49px;
  }

  .process h3 {
    margin-top: 4px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .step-climb path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .step-climb .head {
    animation: none;
    opacity: 1;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .step,
  .btn .arrow,
  .t-card,
  .t-dots span,
  .post-card,
  .service-card summary::after {
    transition: none;
  }

  .t-track {
    scroll-behavior: auto;
  }
}