.ht-section {
  --ht-heading-font: 'akzidenz-grotesk', 'Akzidenz-Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ht-body-font:    'brandon-grotesque', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif;

  --ht-bg:           #f7f7f7;
  --ht-max-w:        1440px;
  --ht-pt:           80px;
  --ht-pr:           48px;
  --ht-pb:           64px;
  --ht-pl:           48px;
  --ht-mt:           0;
  --ht-mb:           0;
  --ht-t-color:      #111827;
  --ht-t-accent:     #5f3dc4;
  --ht-t-grad:       linear-gradient(to bottom right, #211f2e 0%, #5a3aaa 50%, #7b46c4 100%);
  --ht-t-gap:        40px;
  --ht-t-size:       42px;
  --ht-tab-color:    #ffffff;
  --ht-tab-bg:       #3a2e7b;
  --ht-tab-i-color:  #374151;
  --ht-tab-i-bg:     #ebebf0;
  --ht-tab-i-border: #ebebf0;
  --ht-tab-gap:      32px;
  --ht-tab-size:     15px;
  --ht-card-bg:      #ffffff;
  --ht-card-radius:  20px;
  --ht-card-w:       460px;
  --ht-r-color:      #374151;
  --ht-r-size:       18px;
  --ht-p-color:      #111827;
  --ht-p-size:       16px;
  --ht-q-color:      #5b6270;
  --ht-q-size:       14px;
  --ht-dot-active:   #3a2e7b;
  --ht-dot-inactive: #6b7280;
  --ht-ctl-color:    #3a2e7b;
  --ht-ctl-bg:       #ffffff;
  --ht-ctl-border:   #6b7280;
}

.ht-section {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-top: var(--ht-mt);
  margin-bottom: var(--ht-mb);
  padding: var(--ht-pt) 0 var(--ht-pb);
  overflow: hidden;
  background-color: var(--ht-bg);
  font-family: var(--ht-body-font);
}

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

.ht-inner {
  max-width: min(var(--ht-max-w), 100%);
  margin: 0 auto;
  padding-left: var(--ht-pl);
  padding-right: var(--ht-pr);
  text-align: center;
}

.ht-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ht-rt > * {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.ht-rt > * + *::before {
  content: ' ';
}


.ht-rt-block > * {
  margin: 0 0 0.7em;
  font: inherit;
  color: inherit;
}

.ht-rt-block > *:last-child {
  margin-bottom: 0;
}

.ht-title {
  font-family: var(--ht-heading-font);

  font-weight: 700;
  font-size: var(--ht-t-size);
  color: var(--ht-t-color);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 var(--ht-t-gap);
  padding: 0;
  text-wrap: balance;
}

.ht-title__plain,
.ht-title__accent {
  display: inline;
}


.ht-title__accent {
  color: var(--ht-t-accent);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ht-title__accent {
    background-image: var(--ht-t-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@media (forced-colors: active) {
  .ht-title__accent {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}


.ht-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--ht-tab-gap);
}

.ht-tab {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;


  min-height: 32px;
  padding: 5px 14px;
  border-radius: 9999px;


  border: 1px solid var(--ht-tab-i-border, #ebebf0);
  background-color: var(--ht-tab-i-bg, #ebebf0);
  color: var(--ht-tab-i-color, #374151);
  font-family: var(--ht-body-font);
  font-size: var(--ht-tab-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  cursor: pointer;

  white-space: normal;
  transition: background-color 0.22s ease, color 0.22s ease,
              border-color 0.22s ease, box-shadow 0.22s ease,
              transform 0.22s ease;
}

.ht-tab--active,
.ht-tab[aria-selected="true"] {
  background-color: var(--ht-tab-bg, #3a2e7b);
  color: var(--ht-tab-color, #ffffff);
  border-color: var(--ht-tab-bg, #3a2e7b);
}


.ht-tab:hover,
.ht-tab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}


.ht-tab:hover,
.ht-tab:focus,
.ht-tab:focus-visible,
.ht-tab:active {
  background-color: var(--ht-tab-i-bg, #ebebf0);
  color: var(--ht-tab-i-color, #374151);
  border-color: var(--ht-tab-i-border, #ebebf0);
  border-radius: 9999px;
}


.ht-tab--active:hover,
.ht-tab--active:focus,
.ht-tab--active:focus-visible,
.ht-tab--active:active,
.ht-tab[aria-selected="true"]:hover,
.ht-tab[aria-selected="true"]:focus,
.ht-tab[aria-selected="true"]:focus-visible,
.ht-tab[aria-selected="true"]:active {
  background-color: var(--ht-tab-bg, #3a2e7b);
  color: var(--ht-tab-color, #ffffff);
  border-color: var(--ht-tab-bg, #3a2e7b);
  border-radius: 9999px;
}


/* The slider stays inside the section gutters so no card is ever cut off by
   the viewport edge; slide widths below are sized to fit it exactly. */
.ht-slider {
  --ht-slide-gap: 24px;
  overflow: hidden;
  padding: 28px 0 32px;
  margin: 0 auto;
}

@media (hover: hover) and (pointer: fine) {
  .ht-js .ht-slider { cursor: grab; }
  .ht-js .ht-slider:active { cursor: grabbing; }
}


.ht-slider__track {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
  transition: opacity 0.3s ease,
              transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ht-js .ht-slider__track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  opacity: 0;
}

.ht-js .ht-slider--ready .ht-slider__track {
  opacity: 1;
}

/* Desktop: three cards fit side by side within the slider. */
.ht-slide {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(var(--ht-card-w), calc((100% - 3 * var(--ht-slide-gap)) / 3));
  margin: 0 calc(var(--ht-slide-gap) / 2) 24px;
  padding: 40px 36px 32px;
  border-radius: var(--ht-card-radius);
  background-color: var(--ht-card-bg);
  text-align: center;


  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.03),
    0 10px 32px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


.ht-js .ht-slide {
  margin-bottom: 0;
  transform: scale(0.92);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.ht-js .ht-slide--active {
  transform: scale(1);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.03),
    0 10px 32px rgba(0, 0, 0, 0.08);
}

.ht-slide__figure {
  margin: 0;
  padding: 0;
}

.ht-slide__review {
  font-family: var(--ht-body-font);
  font-size: var(--ht-r-size);
  font-weight: 400;
  font-style: italic;
  color: var(--ht-r-color);
  line-height: 1.7;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.ht-slide__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.ht-slide__person {
  font-family: var(--ht-body-font);
  font-size: var(--ht-p-size);
  font-weight: 700;
  color: var(--ht-p-color);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.ht-slide__position {
  font-family: var(--ht-body-font);
  font-size: var(--ht-q-size);
  font-weight: 400;
  color: var(--ht-q-color);
  line-height: 1.5;
}


.ht-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}


.ht-dot {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ht-r-color, #374151);
  cursor: pointer;
}

.ht-dot::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--ht-dot-inactive, #6b7280);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.ht-dot--active::before {
  width: 28px;
  background-color: var(--ht-dot-active, #3a2e7b);
}


.ht-dot:hover,
.ht-dot:focus,
.ht-dot:focus-visible,
.ht-dot:active {
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 9999px;
  color: var(--ht-r-color, #374151);
}

.ht-section :where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--ht-t-accent);
  outline-offset: 3px;
  border-radius: 9999px;
}

.ht-dot:focus-visible {
  outline: 3px solid var(--ht-t-accent);
  outline-offset: 0;
  border-radius: 9999px;
}

.ht-slide:focus-visible {
  outline: 3px solid var(--ht-t-accent);
  outline-offset: 3px;
  border-radius: var(--ht-card-radius);
}

.ht-section :where(a, button, [tabindex]) {
  scroll-margin-top: 96px;
}


@media (min-width: 1025px) and (max-width: 1280px) {
  .ht-section {
    --ht-pl: 36px;
    --ht-pr: 36px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ht-section {
    --ht-pl: 32px;
    --ht-pr: 32px;
  }

  /* Tablet and below: one card at a time, filling the slider exactly. */
  .ht-slider {
    max-width: 680px;
  }

  .ht-slide {
    width: calc(100% - var(--ht-slide-gap));
    padding: 34px 30px 28px;
  }
}

@media (min-width: 641px) and (max-width: 767px) {
  .ht-section {
    --ht-pl: 24px;
    --ht-pr: 24px;
  }

  .ht-slider {
    --ht-slide-gap: 16px;
    padding: 20px 0 26px;
  }

  .ht-slide {
    width: calc(100% - var(--ht-slide-gap));
    padding: 30px 24px 26px;
  }
}

@media (max-width: 640px) {
  .ht-section {
    --ht-pl: 20px;
    --ht-pr: 20px;
  }

  .ht-slider {
    --ht-slide-gap: 16px;
    padding: 12px 0 20px;
  }

  .ht-slide {
    width: calc(100% - var(--ht-slide-gap));
    padding: 26px 20px 22px;
  }
}


/* Phones (17 Oct 2026): the active card's soft shadow reaches ~32px around it,
   but the slider's clipping edge sat only 8px from the card, so the shadow was cut
   into a pale box around it. The slider now reaches 28px further out on each side
   with a 72px gap between cards (card width unchanged, the next card still out of
   view), and the shadow may spill above and below it. module.js centres the active
   card from the slider and card widths, so no script change is needed. */
@media (max-width: 767px) {
  .ht-slider {
    --ht-slide-gap: 72px;
    margin-left: -28px;
    margin-right: -28px;
    overflow: visible;
    clip-path: inset(-24px 0 -48px 0);
  }
}


@media (prefers-reduced-motion: reduce) {
  .ht-slider__track {
    transition: opacity 0.2s ease;
  }

  .ht-slide,
  .ht-tab,
  .ht-dot::before {
    transition: none;
  }

  .ht-tab:hover,
  .ht-tab:focus-visible {
    transform: none;
  }
}

/* Phones only (under 768px): 48 x 48 px tap areas, Google's guideline (HubSpot SEO "Make sure mobile users can
   easily click", Matt 28 Oct 2026: "update this anyways - make sure the way the pages look only changes on mobile"). */
@media (max-width: 767px) {
  /* Name tabs keep their 32px pill; an invisible box makes the tap area 48px tall (rows 16px apart so the boxes don't overlap). */
  .ht-tabs {
    row-gap: 16px;
  }
  .ht-tab {
    position: relative;
  }
  .ht-tab::after {
    content: '';
    position: absolute;
    inset: -8px -6px;
  }
  /* Dots: same 8px dot, 48px button each (dots sit a little further apart). */
  .ht-dots {
    gap: 0;
    margin-top: -8px;
  }
  .ht-dot {
    width: 48px;
    height: 48px;
  }
}