/* ----------------------------------------------------------------- */
/* Capabilities - consulting layout system                            */
/*                                                                     */
/* Scoped to .cap-page so it never touches the rest of the site.       */
/* main.css still supplies the header, footer, buttons and the two     */
/* Funnel typefaces; everything below is layout and rhythm.            */
/*                                                                     */
/* Surfaces are pinned rather than following the site's light/dark     */
/* toggle: a section carries color-scheme="dark" or "light" and gets   */
/* its own token set from the blocks below. Two reasons it is done     */
/* here instead of reusing main.css's tokens - the alternating         */
/* dark/cream rhythm has to survive either setting of the toggle, and  */
/* main.css's --accent resolves to PURPLE under color-scheme=light,    */
/* which these pages must never show.                                  */
/* ----------------------------------------------------------------- */

.cap-page {
  /* spacing scale, 8px base (1rem = 10px site-wide) */
  --cap-1: 0.8rem;
  --cap-2: 1.6rem;
  --cap-3: 2.4rem;
  --cap-4: 3.2rem;
  --cap-6: 4.8rem;
  --cap-8: 6.4rem;
  --cap-12: 9.6rem;
  --cap-16: 12.8rem;

  --cap-max: 128rem;          /* 1280px content width */
  --cap-measure: 68rem;       /* 680px reading width  */
  --cap-radius: 1.6rem;       /* 16px, every card     */

  --cap-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cap-speed: 280ms;
}

/* Dark surface ---------------------------------------------------- */
.cap-page [color-scheme="dark"] {
  --cap-surface: #161616;
  --cap-raised: #1C1C1C;
  --cap-line: rgba(255, 255, 255, 0.08);
  --cap-line-strong: rgba(255, 255, 255, 0.16);
  --cap-ink: #FFFFFF;
  --cap-ink-soft: rgba(255, 255, 255, 0.65);
  --cap-ink-faint: rgba(255, 255, 255, 0.38);
  /* 7.3:1 on #161616 - passes AA and AAA for body text */
  --cap-accent: #00B7B5;
  --cap-accent-soft: rgba(0, 183, 181, 0.12);
}

/* Cream surface --------------------------------------------------- */
.cap-page [color-scheme="light"] {
  --cap-surface: #FAF7F6;
  --cap-raised: #FFFFFF;
  --cap-line: rgba(22, 22, 22, 0.10);
  --cap-line-strong: rgba(22, 22, 22, 0.20);
  --cap-ink: #161616;
  --cap-ink-soft: #4A4A4A;
  --cap-ink-faint: #8A8A8A;
  /* #00B7B5 is only 2.4:1 on cream and fails for text, so the ink-safe
     teal is darkened to 4.5:1 while reading as the same brand colour. */
  --cap-accent: #00807F;
  --cap-accent-soft: rgba(0, 128, 127, 0.10);
}

/* ----------------------------------------------------------------- */
/* Section shell                                                      */
/* ----------------------------------------------------------------- */
.cap-section {
  position: relative;
  width: 100%;
  background-color: var(--cap-surface);
  color: var(--cap-ink-soft);
  padding: var(--cap-12) var(--cap-3);
}
.cap-section--tight { padding-top: var(--cap-8); padding-bottom: var(--cap-8); }
.cap-section--flush-top { padding-top: 0; }

/* The site header is absolutely positioned, so the hero carries its own
   clearance instead of the page using .inner-page-content. That keeps the
   dark band running behind the header with no seam at the top. */
.cap-section--hero { padding-top: calc(7.6rem + var(--cap-8)); }

.cap-section__inner {
  width: 100%;
  max-width: var(--cap-max);
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .cap-section { padding: var(--cap-16) var(--cap-6); }
  .cap-section--tight { padding-top: var(--cap-12); padding-bottom: var(--cap-12); }
  .cap-section--flush-top { padding-top: 0; }
  .cap-section--hero { padding-top: calc(9.6rem + var(--cap-12)); }
}

/* ----------------------------------------------------------------- */
/* Type                                                               */
/* ----------------------------------------------------------------- */
.cap-eyebrow {
  display: block;
  margin: 0 0 var(--cap-3);
  font: normal 600 1.4rem/1.3 var(--_font-default);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cap-accent);
}

.cap-h1 {
  margin: 0 0 var(--cap-3);
  font: normal 600 4.4rem/1.05 var(--_font-accent);
  letter-spacing: -0.02em;
  color: var(--cap-ink);
}
.cap-h2 {
  margin: 0 0 var(--cap-3);
  font: normal 600 3.2rem/1.1 var(--_font-accent);
  letter-spacing: -0.015em;
  color: var(--cap-ink);
}
.cap-h3 {
  margin: 0 0 var(--cap-2);
  font: normal 600 2.2rem/1.25 var(--_font-accent);
  letter-spacing: -0.01em;
  color: var(--cap-ink);
}
.cap-body {
  margin: 0 0 var(--cap-2);
  max-width: var(--cap-measure);
  font: normal 400 1.6rem/1.65 var(--_font-default);
  color: var(--cap-ink-soft);
}
.cap-body:last-child { margin-bottom: 0; }
.cap-body--lead { font-size: 1.8rem; line-height: 1.6; }

.cap-label {
  font: normal 600 1.4rem/1.3 var(--_font-default);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cap-ink-faint);
}

@media only screen and (min-width: 768px) {
  .cap-h1 { font-size: 7.2rem; }
  .cap-h2 { font-size: 4.8rem; }
  .cap-h3 { font-size: 2.8rem; }
  .cap-body { font-size: 1.8rem; }
  .cap-body--lead { font-size: 2rem; }
}

.cap-page a { color: inherit; }

/* ----------------------------------------------------------------- */
/* Breadcrumb                                                         */
/* ----------------------------------------------------------------- */
.cap-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cap-1);
  margin-bottom: var(--cap-6);
  font: normal 400 1.4rem/1.4 var(--_font-default);
  color: var(--cap-ink-faint);
}
.cap-crumb a {
  color: var(--cap-ink-faint);
  text-decoration: none;
  transition: color var(--cap-speed) var(--cap-ease);
}
.cap-crumb a:hover { color: var(--cap-accent); }
.cap-crumb__sep { opacity: 0.5; }
.cap-crumb__current { color: var(--cap-ink-soft); }

/* ----------------------------------------------------------------- */
/* Hero                                                               */
/* ----------------------------------------------------------------- */
.cap-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cap-8);
  align-items: center;
}
.cap-hero__subline {
  max-width: var(--cap-measure);
  margin: 0 0 var(--cap-6);
  font: normal 400 1.8rem/1.6 var(--_font-default);
  color: var(--cap-ink-soft);
}
.cap-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cap-3);
}
.cap-hero__render {
  order: 2;
  justify-self: center;
  width: 60%;
  max-width: 28rem;
}
.cap-hero__render img { display: block; width: 100%; height: auto; }

@media only screen and (min-width: 1024px) {
  .cap-hero__grid { grid-template-columns: 7fr 5fr; gap: var(--cap-12); }
  .cap-hero__render { width: 100%; max-width: 42rem; justify-self: end; }
}

/* Slow rotation on hover only, never ambient. */
.cap-hero__render--spin img {
  transition: transform 1200ms var(--cap-ease);
}
.cap-hero__render--spin:hover img { transform: rotate(180deg); }

/* ----------------------------------------------------------------- */
/* Text link with a sliding arrow                                     */
/* ----------------------------------------------------------------- */
.cap-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cap-1);
  font: normal 600 1.6rem/1.4 var(--_font-default);
  color: var(--cap-accent);
  text-decoration: none;
}
.cap-link i, .cap-link .cap-arrow {
  transition: transform var(--cap-speed) var(--cap-ease);
}
.cap-link:hover i, .cap-link:hover .cap-arrow { transform: translateX(4px); }

/* ----------------------------------------------------------------- */
/* Practice index - numbered full-width rows                          */
/* ----------------------------------------------------------------- */
.cap-index { border-top: 1px solid var(--cap-line); }

.cap-index__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "num name arrow"
    ".   out  out"
    ".   tags tags";
  gap: var(--cap-2) var(--cap-3);
  align-items: start;
  padding: var(--cap-4) var(--cap-2);
  border-bottom: 1px solid var(--cap-line);
  text-decoration: none;
  transition: background-color var(--cap-speed) var(--cap-ease);
}
.cap-index__row:hover { background-color: rgba(255, 255, 255, 0.03); }

.cap-index__num {
  grid-area: num;
  font: normal 600 1.4rem/1.6 var(--_font-default);
  letter-spacing: 0.08em;
  color: var(--cap-ink-faint);
}
.cap-index__name { grid-area: name; margin: 0; }
.cap-index__out  { grid-area: out; margin: 0; max-width: var(--cap-measure); }
.cap-index__tags { grid-area: tags; }
.cap-index__arrow {
  grid-area: arrow;
  align-self: center;
  font-size: 2.2rem;
  color: var(--cap-ink-faint);
  transition: color var(--cap-speed) var(--cap-ease),
              transform var(--cap-speed) var(--cap-ease);
}
.cap-index__row:hover .cap-index__arrow {
  color: var(--cap-accent);
  transform: translateX(4px);
}

@media only screen and (min-width: 1024px) {
  .cap-index__row {
    grid-template-columns: 8rem 32rem 1fr auto;
    grid-template-areas: "num name out arrow";
    align-items: center;
    gap: var(--cap-6);
    padding: var(--cap-6) var(--cap-3);
  }
  .cap-index__tags {
    grid-area: out;
    align-self: end;
    margin-top: var(--cap-2);
  }
  .cap-index__out { align-self: start; }
  .cap-index__inner { display: contents; }
}

/* ----------------------------------------------------------------- */
/* Chips                                                              */
/* ----------------------------------------------------------------- */
.cap-chips { display: flex; flex-wrap: wrap; gap: var(--cap-1); }
.cap-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1.2rem;
  border: 1px solid var(--cap-line-strong);
  border-radius: 100px;
  font: normal 400 1.3rem/1.5 var(--_font-default);
  color: var(--cap-ink-soft);
  white-space: nowrap;
}
.cap-chip--accent { border-color: var(--cap-accent); color: var(--cap-accent); }

/* ----------------------------------------------------------------- */
/* Two-column editorial block                                         */
/* ----------------------------------------------------------------- */
.cap-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cap-4);
}
@media only screen and (min-width: 1024px) {
  .cap-split { grid-template-columns: 5fr 7fr; gap: var(--cap-12); }
  .cap-split__aside { position: sticky; top: 12rem; align-self: start; }
}

/* ----------------------------------------------------------------- */
/* Pillar diagram - PLAN / BUILD / GROW                               */
/* ----------------------------------------------------------------- */
.cap-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cap-3);
  margin-top: var(--cap-8);
}
.cap-pillar {
  position: relative;
  padding: var(--cap-4);
  background-color: var(--cap-raised);
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius);
}
.cap-pillar__label {
  display: block;
  margin-bottom: var(--cap-2);
  font: normal 600 1.4rem/1.3 var(--_font-default);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cap-accent);
}
.cap-pillar__descr {
  margin: 0 0 var(--cap-3);
  font: normal 400 1.6rem/1.6 var(--_font-default);
  color: var(--cap-ink-soft);
}
.cap-pillar__list { list-style: none; margin: 0; padding: 0; }
.cap-pillar__list li { margin-bottom: var(--cap-1); }
.cap-pillar__list li:last-child { margin-bottom: 0; }
.cap-pillar__list a {
  font: normal 500 1.6rem/1.5 var(--_font-default);
  color: var(--cap-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cap-line-strong);
  transition: color var(--cap-speed) var(--cap-ease),
              border-color var(--cap-speed) var(--cap-ease);
}
.cap-pillar__list a:hover { color: var(--cap-accent); border-color: var(--cap-accent); }

@media only screen and (min-width: 1024px) {
  .cap-pillars { grid-template-columns: repeat(3, 1fr); gap: var(--cap-4); }
  /* connector arrows between the three pillars */
  .cap-pillar + .cap-pillar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--cap-4) * -1);
    width: var(--cap-4);
    height: 1px;
    background-color: var(--cap-line-strong);
  }
}

/* ----------------------------------------------------------------- */
/* Numbered steps - horizontal on desktop with a connecting line      */
/* ----------------------------------------------------------------- */
.cap-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cap-6);
  margin-top: var(--cap-8);
}
.cap-step { position: relative; padding-top: var(--cap-4); }
.cap-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--cap-line-strong);
}
.cap-step::after {
  content: "";
  position: absolute;
  top: -0.35rem;
  left: 0;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--cap-accent);
}
.cap-step__num {
  display: block;
  margin-bottom: var(--cap-1);
  font: normal 600 1.4rem/1.3 var(--_font-default);
  letter-spacing: 0.08em;
  color: var(--cap-ink-faint);
}
.cap-step__name {
  margin: 0 0 var(--cap-1);
  font: normal 600 2rem/1.25 var(--_font-accent);
  color: var(--cap-ink);
}
.cap-step__descr {
  margin: 0;
  font: normal 400 1.5rem/1.6 var(--_font-default);
  color: var(--cap-ink-soft);
}
@media only screen and (min-width: 768px) {
  .cap-steps { grid-template-columns: repeat(4, 1fr); gap: var(--cap-4); }
}

/* ----------------------------------------------------------------- */
/* Offering cards                                                     */
/* ----------------------------------------------------------------- */
.cap-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cap-3);
  margin-top: var(--cap-8);
}
@media only screen and (min-width: 768px) {
  .cap-cards { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (min-width: 1024px) {
  .cap-cards--3 { grid-template-columns: repeat(3, 1fr); }
}

.cap-card {
  display: flex;
  flex-direction: column;
  padding: var(--cap-4);
  background-color: var(--cap-raised);
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius);
  transition: border-color var(--cap-speed) var(--cap-ease);
}
.cap-card:hover { border-color: var(--cap-accent); }
.cap-card__num {
  display: block;
  margin-bottom: var(--cap-3);
  font: normal 600 1.4rem/1.3 var(--_font-default);
  letter-spacing: 0.08em;
  color: var(--cap-ink-faint);
}
.cap-card__title {
  margin: 0 0 var(--cap-2);
  font: normal 600 2.2rem/1.25 var(--_font-accent);
  color: var(--cap-ink);
}
.cap-card__descr {
  margin: 0 0 var(--cap-3);
  font: normal 400 1.6rem/1.6 var(--_font-default);
  color: var(--cap-ink-soft);
}
.cap-card__deliverables {
  margin-top: auto;
  padding-top: var(--cap-3);
  border-top: 1px solid var(--cap-line);
}
.cap-card__deliverables .cap-label { display: block; margin-bottom: var(--cap-1); }
.cap-card__deliverables ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font: normal 400 1.4rem/1.7 var(--_font-default);
  color: var(--cap-ink-soft);
}

/* ----------------------------------------------------------------- */
/* Accelerator feature card                                           */
/* ----------------------------------------------------------------- */
.cap-accel {
  padding: var(--cap-6);
  background-color: var(--cap-raised);
  border: 1px solid var(--cap-line);
  border-left: 2px solid var(--cap-accent);
  border-radius: var(--cap-radius);
  margin-top: var(--cap-4);
}
.cap-accel__name {
  margin: 0 0 var(--cap-2);
  font: normal 600 2.8rem/1.2 var(--_font-accent);
  color: var(--cap-ink);
}
.cap-accel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cap-3);
  margin-top: var(--cap-3);
}
@media only screen and (min-width: 768px) {
  .cap-accel__grid { grid-template-columns: repeat(2, 1fr); gap: var(--cap-6); }
}

/* ----------------------------------------------------------------- */
/* Labs proof strip                                                   */
/* ----------------------------------------------------------------- */
.cap-labs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cap-3);
  margin-top: var(--cap-6);
}
@media only screen and (min-width: 768px) {
  .cap-labs { grid-template-columns: repeat(2, 1fr); }
}
.cap-lab {
  display: flex;
  align-items: baseline;
  gap: var(--cap-2);
  padding: var(--cap-3) 0;
  border-top: 1px solid var(--cap-line);
  text-decoration: none;
}
.cap-lab__name {
  font: normal 600 1.8rem/1.3 var(--_font-accent);
  color: var(--cap-ink);
  transition: color var(--cap-speed) var(--cap-ease);
}
.cap-lab:hover .cap-lab__name { color: var(--cap-accent); }
.cap-lab__descr {
  font: normal 400 1.5rem/1.5 var(--_font-default);
  color: var(--cap-ink-soft);
}

/* ----------------------------------------------------------------- */
/* Case study cards                                                   */
/* ----------------------------------------------------------------- */
.cap-work {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cap-3);
  margin-top: var(--cap-8);
}
@media only screen and (min-width: 768px) { .cap-work { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (min-width: 1024px) { .cap-work { grid-template-columns: repeat(3, 1fr); } }

.cap-case {
  display: flex;
  flex-direction: column;
  gap: var(--cap-2);
  padding: var(--cap-4);
  background-color: var(--cap-raised);
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius);
  transition: border-color var(--cap-speed) var(--cap-ease);
}
.cap-case:hover { border-color: var(--cap-accent); }
.cap-case__client {
  font: normal 600 1.4rem/1.3 var(--_font-default);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cap-ink-faint);
}
.cap-case__outcome {
  margin: 0;
  font: normal 600 2rem/1.3 var(--_font-accent);
  color: var(--cap-ink);
}
.cap-case__metric {
  padding: var(--cap-2) 0;
  border-top: 1px solid var(--cap-line);
  border-bottom: 1px solid var(--cap-line);
  font: normal 600 2.4rem/1.2 var(--_font-accent);
  color: var(--cap-accent);
}
.cap-case__cta { margin-top: auto; }

/* ----------------------------------------------------------------- */
/* Technologies row                                                   */
/* ----------------------------------------------------------------- */
.cap-tech {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cap-3) var(--cap-8);
  margin-top: var(--cap-6);
  padding-top: var(--cap-6);
  border-top: 1px solid var(--cap-line);
}
.cap-tech__item {
  font: normal 500 1.8rem/1.4 var(--_font-accent);
  letter-spacing: -0.01em;
  color: var(--cap-ink-soft);
  filter: grayscale(1);
}

/* ----------------------------------------------------------------- */
/* Insight cards                                                      */
/* ----------------------------------------------------------------- */
.cap-insights {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cap-3);
  margin-top: var(--cap-8);
}
@media only screen and (min-width: 768px) { .cap-insights { grid-template-columns: repeat(3, 1fr); } }
.cap-insight {
  display: flex;
  flex-direction: column;
  gap: var(--cap-2);
  padding: var(--cap-4);
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius);
  text-decoration: none;
  transition: border-color var(--cap-speed) var(--cap-ease);
}
.cap-insight:hover { border-color: var(--cap-accent); }
.cap-insight__title {
  margin: 0;
  font: normal 600 1.8rem/1.35 var(--_font-accent);
  color: var(--cap-ink);
}

/* ----------------------------------------------------------------- */
/* FAQ accordion                                                      */
/* ----------------------------------------------------------------- */
.cap-faq { margin-top: var(--cap-8); border-top: 1px solid var(--cap-line); }
.cap-faq__item { border-bottom: 1px solid var(--cap-line); }
.cap-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cap-3);
  width: 100%;
  padding: var(--cap-4) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: normal 600 1.8rem/1.4 var(--_font-accent);
  color: var(--cap-ink);
  transition: color var(--cap-speed) var(--cap-ease);
}
.cap-faq__q:hover { color: var(--cap-accent); }
.cap-faq__icon {
  flex: 0 0 auto;
  font-size: 2rem;
  color: var(--cap-accent);
  transition: transform var(--cap-speed) var(--cap-ease);
}
.cap-faq__q[aria-expanded="true"] .cap-faq__icon { transform: rotate(45deg); }
.cap-faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--cap-speed) var(--cap-ease);
}
.cap-faq__a > div { padding: 0 0 var(--cap-4); }
.cap-faq__a p {
  margin: 0;
  max-width: var(--cap-measure);
  font: normal 400 1.6rem/1.7 var(--_font-default);
  color: var(--cap-ink-soft);
}

/* ----------------------------------------------------------------- */
/* Explore other capabilities                                         */
/* ----------------------------------------------------------------- */
.cap-explore {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cap-2);
  margin-top: var(--cap-6);
}
@media only screen and (min-width: 768px) { .cap-explore { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (min-width: 1024px) { .cap-explore { grid-template-columns: repeat(4, 1fr); } }
.cap-explore__item {
  display: flex;
  flex-direction: column;
  gap: var(--cap-1);
  padding: var(--cap-3);
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius);
  text-decoration: none;
  transition: border-color var(--cap-speed) var(--cap-ease);
}
.cap-explore__item:hover { border-color: var(--cap-accent); }
.cap-explore__name {
  font: normal 600 1.7rem/1.3 var(--_font-accent);
  color: var(--cap-ink);
}
.cap-explore__summary {
  font: normal 400 1.4rem/1.55 var(--_font-default);
  color: var(--cap-ink-soft);
}

/* ----------------------------------------------------------------- */
/* CTA band                                                           */
/* ----------------------------------------------------------------- */
.cap-cta {
  display: flex;
  flex-direction: column;
  gap: var(--cap-4);
  align-items: flex-start;
}
.cap-cta__title { margin: 0; max-width: 24ch; }
@media only screen and (min-width: 1024px) {
  .cap-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--cap-8);
  }
}
/* cream card sitting on a dark section */
.cap-cta-card {
  padding: var(--cap-8) var(--cap-6);
  background-color: var(--cap-surface);
  border-radius: var(--cap-radius);
}

/* ----------------------------------------------------------------- */
/* Sticky in-page nav                                                 */
/* ----------------------------------------------------------------- */
.cap-subnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--cap-surface);
  border-bottom: 1px solid var(--cap-line);
}
.cap-subnav__inner {
  display: flex;
  gap: var(--cap-4);
  max-width: var(--cap-max);
  margin: 0 auto;
  padding: 0 var(--cap-3);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cap-subnav__inner::-webkit-scrollbar { display: none; }
.cap-subnav__link {
  flex: 0 0 auto;
  padding: var(--cap-3) 0;
  border-bottom: 2px solid transparent;
  font: normal 500 1.5rem/1.4 var(--_font-default);
  color: var(--cap-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--cap-speed) var(--cap-ease),
              border-color var(--cap-speed) var(--cap-ease);
}
.cap-subnav__link:hover { color: var(--cap-ink); }
.cap-subnav__link.is-active {
  color: var(--cap-accent);
  border-bottom-color: var(--cap-accent);
}
@media only screen and (min-width: 768px) {
  .cap-subnav__inner { padding: 0 var(--cap-6); gap: var(--cap-6); }
}

/* Anchor targets clear the sticky bar. */
.cap-anchor {
  scroll-margin-top: 8rem;
}

/* ----------------------------------------------------------------- */
/* Buttons - pill, matching the site's own control language           */
/* ----------------------------------------------------------------- */
.cap-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cap-1);
  padding: 1.4rem 2.8rem;
  border: 1px solid transparent;
  border-radius: 100px;
  font: normal 600 1.6rem/1.2 var(--_font-default);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cap-speed) var(--cap-ease),
              border-color var(--cap-speed) var(--cap-ease),
              color var(--cap-speed) var(--cap-ease);
}
.cap-btn i { transition: transform var(--cap-speed) var(--cap-ease); }
.cap-btn:hover i { transform: translate(4px, -4px); }

.cap-btn--primary {
  background-color: var(--cap-accent);
  color: #FFFFFF;
}
.cap-btn--primary:hover { background-color: transparent; border-color: var(--cap-accent); color: var(--cap-accent); }

.cap-btn--ghost {
  border-color: var(--cap-line-strong);
  color: var(--cap-ink);
}
.cap-btn--ghost:hover { border-color: var(--cap-accent); color: var(--cap-accent); }

/* ----------------------------------------------------------------- */
/* Focus states - visible on both surfaces                            */
/* ----------------------------------------------------------------- */
.cap-page a:focus-visible,
.cap-page button:focus-visible {
  outline: 2px solid var(--cap-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----------------------------------------------------------------- */
/* Reveal on scroll - subtle, and off entirely for reduced motion     */
/* ----------------------------------------------------------------- */
.cap-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--cap-ease), transform 400ms var(--cap-ease);
}
.cap-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cap-page *,
  .cap-page *::before,
  .cap-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .cap-reveal { opacity: 1; transform: none; }
  .cap-hero__render--spin:hover img { transform: none; }
  .cap-faq__a { transition: none; }
}