/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet + landscape mobile (≤991px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 2rem;
  }

  .container-wide > * {
    margin-left:  -1rem;
    width:        calc(100% + 2rem) !important;
  }
}


/* ============================================================
   LeadFormSection — "Ready to talk?" 2-step lead capture form
   ============================================================ */

/* ---- Calendly inline widget container ---- */
.lead-calendly {
  position:  relative;
  min-width: 320px;
  height:    700px;
  width:     100%;
}

/* Custom preloader — centered, sits behind the widget */
.lead-calendly__preloader {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         0;
}

.lead-calendly__spinner {
  width:         36px;
  height:        36px;
  border:        2.5px solid var(--border);
  border-top-color: var(--foreground);
  border-radius: var(--radius-full);
  animation:     lead-spin 0.7s linear infinite;
}

@keyframes lead-spin {
  to { transform: rotate(360deg); }
}

/* Calendly widget fills the container on top of the preloader */
.lead-calendly__widget {
  position: absolute;
  inset:    0;
  z-index:  1;
}

/* Suppress Calendly's own spinner — we show ours instead */
.lead-calendly__widget .calendly-spinner {
  display: none !important;
}

/* ---- Outer section ---- */
.lead-form-section {
  position:    relative;
  padding:     8rem 0;
  background:  linear-gradient(
                 180deg,
                 rgba(229, 223, 213, 0.5) 0%,
                 rgba(222, 215, 204, 0.5) 100%
               ),
               var(--background);
  font-family: var(--font-family-default);
  width:       100%;
  box-sizing:  border-box;
  overflow:    hidden;
}

.lead-form-section[data-variant="booking-hero"] {
  padding: 8rem 0;
  background: linear-gradient(
                180deg,
                var(--background) 0%,
                var(--secondary) 100%
              );
}

.lead-form-section[data-variant="with-social-proof"] {
  --lead-proof-overlay-color: var(--secondary);
  padding: 8rem 0;
  background: linear-gradient(
                180deg,
                var(--background) 0%,
                var(--secondary) 100%
              );
}

.lead-form-section__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  align-items:           center;
  gap:                   2rem;
}


/* ============================================================
   Left: copy
   ============================================================ */

.lead-form-section__copy {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;
  padding-right:  4rem;
}

.lead-form-section[data-variant="booking-hero"] .lead-form-section__copy {
  gap: 3rem;
}

.lead-form-section__heading {
  margin:      0;
  font-size:   2.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 2.5rem;
  color:       var(--foreground);
}

.lead-form-section[data-variant="booking-hero"] .lead-form-section__heading {
  font-size:   3rem;
  line-height: 3rem;
}

.lead-form-section[data-variant="with-social-proof"] .lead-form-section__heading {
  font-size:   3rem;
  line-height: 3rem;
}

.lead-form-section__body {
  margin:      0;
  font-size:   1.25rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.75rem;
  color:       var(--foreground);
}


/* ============================================================
   With Social Proof variant
   ============================================================ */

.lead-form-section__social-inner {
  display:        flex;
  flex-direction: column;
  gap:            4rem;
}

.lead-form-section__social-copy {
  display:        flex;
  flex-direction: column;
  gap:            4rem;
  max-width:      64rem;
  width:          100%;
}

.lead-form-section__social-body {
  color:       var(--foreground);
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xl);
  margin:      0;
  max-width:   40rem;
}

.lead-form-section__social-body strong {
  font-weight: var(--font-weight-bold);
}

.lead-form-section__social-content {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:                   1rem;
  align-items:           stretch;
  isolation:             isolate;
}

.lead-form-section[data-variant="with-social-proof"] .lead-form {
  align-self:    stretch;
  border-radius: var(--radius-lg);
  height:        100%;
  position:      relative;
  z-index:       2;
}

.lead-social-proof {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  height:         100%;
  min-width:      0;
  position:       relative;
  z-index:        1;
}

.lead-proof-slider {
  --lead-proof-gap: 16px;
  --lead-proof-mobile-card-inset: 32px;
  --lead-proof-overlay-width: max(5rem, calc((100vw - 1024px) / 2));
  --lead-proof-transition-duration: 320ms;
  flex:       1 1 auto;
  min-height: 16.75rem;
  min-width:  0;
  overflow:   visible;
  position:   relative;
  z-index:    0;
}

.lead-proof-slider__stage {
  height:   100%;
  overflow: visible;
  position: relative;
  width:    100%;
}

.lead-proof-slider__track {
  cursor:     default;
  display:    flex;
  gap:        var(--lead-proof-gap);
  height:     100%;
  touch-action: pan-y;
  transition: margin-left var(--lead-proof-transition-duration) ease;
  user-select: none;
  width:      100%;
}

.lead-proof-slider--mobile .lead-proof-slider__track {
  cursor: grab;
}

.lead-proof-slider--mobile .lead-proof-slider__track:active {
  cursor: grabbing;
}

.lead-proof-slider__track--resetting {
  transition: none;
}

.lead-proof-slider .lead-proof-slide {
  flex:   0 0 var(--lead-proof-slide-width, 100%);
  height: 100%;
  opacity: 1;
  transition: opacity var(--lead-proof-transition-duration) ease;
  width:  var(--lead-proof-slide-width, 100%);
}

.lead-proof-slider .lead-proof-slide--exiting {
  opacity: 0;
}

.lead-proof-slider__overlay {
  align-items:     center;
  display:         flex;
  justify-content: flex-end;
  padding-right:   2rem;
  box-sizing:      border-box;
  position:       absolute;
  top:            0;
  bottom:         0;
  left:           100%;
  width:          var(--lead-proof-overlay-width);
  background:     linear-gradient(to right, transparent 0%, var(--lead-proof-overlay-color, var(--background)) 60%);
  pointer-events: none;
  z-index:        2;
}

.lead-proof-slider__overlay--left {
  display: none;
}

.lead-proof-slider__nav {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           2.5rem;
  height:          2.5rem;
  padding:         0;
  color:           var(--primary);
  background:      var(--background);
  border:          1px solid var(--primary);
  border-radius:   var(--radius-full);
  cursor:          pointer;
  pointer-events:  auto;
  transform:       translateX(0);
  transition:      border-color 120ms ease,
                   color 120ms ease,
                   opacity 200ms ease,
                   transform 200ms ease;
}

.lead-proof-slider__nav:hover {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
}

.lead-proof-slider__nav svg {
  width:  1rem;
  height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .lead-proof-slider__track {
    transition: none;
  }
}

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


/* ============================================================
   Right: form card
   ============================================================ */

.lead-form {
  display:        flex;
  flex-direction: column;
  gap:            0;
  background:     var(--secondary);
  border:         0.5px solid var(--border);
  border-radius:  12px;
  overflow:       hidden;
  padding:        1.5rem 0;
}

/* Step label */
.lead-form__step-label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       rgba(40, 40, 37, 0.4);
  padding:     0 1.75rem;
}

/* Fields container — grid so both steps occupy the same cell */
.lead-form__fields {
  display: grid;
  padding: 1.5rem 1.5rem 0;
}

/* Both steps stack in cell 1/1; inactive step is invisible but still occupies space */
.lead-form__step {
  grid-column:    1;
  grid-row:       1;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
  visibility:     hidden;
  pointer-events: none;
}

.lead-form__step--active {
  visibility:     visible;
  pointer-events: auto;
}

/* Side-by-side row (first/last name) */
.lead-form__row {
  display: flex;
  gap:     0.75rem;
}

.lead-form__row .lead-field {
  flex: 1;
}

/* Footer */
.lead-form__footer {
  display:         flex;
  justify-content: flex-end;
  margin-top:      auto;
  padding:         1.5rem 1.5rem 0;
}

.lead-form__footer--split {
  justify-content: space-between;
}


/* ============================================================
   Form field
   ============================================================ */

.lead-field {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

.lead-field-group {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.lead-field--conditional {
  max-height:     0;
  opacity:        0;
  overflow:       hidden;
  transform:      translateY(-2px);
  pointer-events: none;
  transition:
    max-height 180ms ease-out,
    opacity 120ms ease-out,
    transform 160ms ease-out;
}

.lead-field--conditional-visible {
  max-height:     88px;
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}

.lead-field--conditional__inner {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  padding-top:    1.5rem;
}

.lead-field__label {
  margin:      0;
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  color:       var(--foreground);
}

.lead-field__required {
  color: var(--primary);
}

/* Shared input base */
.lead-field__input,
.lead-field__select {
  width:         100%;
  height:        36px;
  padding:       4px 12px;
  background:    var(--background);
  border:        0.5px solid var(--input, var(--border));
  border-radius: 8px;
  font-family:   var(--font-family-default);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-regular);
  line-height:   var(--line-height-sm);
  color:         var(--foreground);
  box-shadow:    0 1px 3px 0 rgba(0, 0, 0, 0.05);
  box-sizing:    border-box;
  outline:       none;
  transition:    border-color 150ms ease;
}

.lead-field__input::placeholder {
  color: var(--muted-foreground);
}

.lead-field__input:focus,
.lead-field__select:focus {
  border-color: var(--foreground);
}

.lead-field__input--error {
  border-color: var(--destructive);
}

.lead-field__error {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color:       var(--destructive);
}

/* Select */
.lead-field__select-wrap {
  position: relative;
}

.lead-field__select {
  appearance:    none;
  cursor:        pointer;
  padding-right: 2.25rem;
}

.lead-field__select:invalid,
.lead-field__select option[value=""] {
  color: var(--muted-foreground);
}

.lead-field__select-icon {
  position:       absolute;
  right:          10px;
  top:            50%;
  transform:      translateY(-50%);
  pointer-events: none;
  color:          var(--muted-foreground);
  display:        flex;
  align-items:    center;
}



/* ============================================================
   Radio group
   ============================================================ */

.lead-radio-group {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  padding-top:    4px;
}

.lead-radio {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  cursor:      pointer;
}

/* Hide native radio */
.lead-radio__input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

/* Custom dot */
.lead-radio__dot {
  flex-shrink:   0;
  width:         16px;
  height:        16px;
  margin-top:    2px;   /* optical alignment with label text */
  border-radius: var(--radius-full);
  border:        1.5px solid var(--border);
  background:    var(--background);
  box-shadow:    0 1px 3px rgba(26, 26, 24, 0.05);
  box-sizing:    border-box;
  transition:    border-color 150ms ease, background 150ms ease;
}

.lead-radio__dot--checked {
  background: var(--primary);
  box-shadow: inset 0 0 0 3px var(--background);
}

.lead-radio__input:focus-visible + .lead-radio__dot {
  outline:        2px solid var(--foreground);
  outline-offset: 2px;
}

.lead-radio__text {
  display:        flex;
  flex-direction: column;
  gap:            0;
  flex:           1;
  min-width:      0;
}

.lead-radio__label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  color:       var(--foreground);
}

.lead-radio__desc {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       var(--muted-foreground);
}


/* ============================================================
   Legal text
   ============================================================ */

.lead-form__legal {
  margin:      0;
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       var(--muted-foreground);
  text-align:  center;
}

.lead-form__legal-link {
  color:                 inherit;
  text-decoration:       underline;
  text-underline-offset: 2px;
  transition:            color 150ms ease;
}

.lead-form__legal-link:hover {
  color: var(--foreground);
}


/* ============================================================
   Footer buttons
   ============================================================ */

/* Back — secondary pill */
.lead-form__back {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.625rem 1.5rem 0.625rem 1rem;
  background:      transparent;
  border:          1px solid var(--primary);
  border-radius:   var(--radius-full);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  color:           var(--primary);
  cursor:          pointer;
  transition:      border-color 120ms ease, color 120ms ease;
}

.lead-form__back:hover {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
}

/* Next — secondary pill */
.lead-form__next {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.625rem 1rem 0.625rem 1.5rem;
  background:      transparent;
  border:          1px solid var(--primary);
  border-radius:   var(--radius-full);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  color:           var(--primary);
  cursor:          pointer;
  transition:      border-color 120ms ease, color 120ms ease;
}

.lead-form__next:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
}

.lead-form__next:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* Submit wrapper + error */
.lead-form__submit-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            0.5rem;
}

.lead-form__submit-error {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color:       var(--destructive);
}

/* Submit — primary pill */
.lead-form__submit {
  display:       inline-flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.625rem 1rem 0.625rem 1.5rem;
  background:    var(--primary);
  border:        none;
  border-radius: var(--radius-full);
  font-family:   var(--font-family-default);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  line-height:   var(--line-height-sm);
  color:         var(--primary-foreground);
  cursor:        pointer;
}

.lead-form__submit:not(:disabled) {
  transition: opacity 150ms ease;
}

.lead-form__submit:hover:not(:disabled) {
  opacity: 0.88;
}

.lead-form__submit:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}


/* ============================================================
   Tablet (≤991px)
   ============================================================ */

@media (max-width: 991px) {
  .lead-form-section {
    padding: 6rem 0;
  }

  .lead-form-section[data-variant="booking-hero"] {
    padding: 6rem 0;
  }

  .lead-form-section[data-variant="with-social-proof"] {
    padding: 6rem 0;
  }

  .lead-form-section__inner {
    grid-template-columns: 1fr;
  }

  .lead-form-section__social-inner {
    gap: 3rem;
  }

  .lead-form-section__social-copy {
    gap: 3rem;
  }

  .lead-form-section__social-content {
    grid-template-columns: 1fr;
  }

  .lead-form-section__copy {
    padding-right: 0;
    gap:           2rem;
  }

  .lead-form {
    margin-left: -1rem;
    width:       calc(100% + 2rem);
  }

  .lead-form-section[data-variant="with-social-proof"] .lead-form {
    margin-left: 0;
    width:       100%;
  }

  .lead-proof-slider__overlay--left {
    background:      linear-gradient(to left, transparent 0%, var(--lead-proof-overlay-color, var(--background)) 60%);
    display:         flex;
    justify-content: flex-start;
    left:            auto;
    padding-left:    2rem;
    padding-right:   0;
    right:           100%;
  }
}


/* ============================================================
   Mobile (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .lead-form-section {
    padding: 4rem 0;
  }

  .lead-form-section[data-variant="booking-hero"] {
    padding: 5rem 0;
  }

  .lead-form-section[data-variant="with-social-proof"] {
    padding: 5rem 0;
  }

  .lead-form-section__heading {
    font-size:   1.875rem;
    line-height: 2.25rem;
  }

  .lead-form-section[data-variant="booking-hero"] .lead-form-section__heading,
  .lead-form-section[data-variant="with-social-proof"] .lead-form-section__heading {
    font-size:   2.25rem;
    line-height: 2.5rem;
  }

  .lead-form-section[data-variant="booking-hero"] .lead-form-section__copy {
    gap: 2.25rem;
  }

  .lead-form-section__body {
    font-size:   1.125rem;
    line-height: 1.75rem;
  }

  .lead-form-section__social-body {
    font-size:   var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .lead-proof-slider {
    --lead-proof-mobile-card-width: calc(100% - var(--lead-proof-mobile-card-inset));
    --lead-proof-overlay-width: calc((100vw - var(--lead-proof-mobile-card-width)) / 2);
    min-height: 18rem;
  }

  .lead-proof-slider__stage {
    margin: 0 auto;
    width:  var(--lead-proof-mobile-card-width);
  }

  .lead-proof-slider__overlay {
    background:    linear-gradient(to right, transparent 0%, var(--lead-proof-overlay-color, var(--background)) 50%);
    justify-content: center;
    left:          auto;
    padding-right: 0;
    right:         calc((100vw - 100%) / -2);
  }

  .lead-proof-slider__overlay--left {
    background:   linear-gradient(to left, transparent 0%, var(--lead-proof-overlay-color, var(--background)) 50%);
    justify-content: center;
    left:         calc((100vw - 100%) / -2);
    padding-left: 0;
    right:        auto;
  }

  .lead-proof-slider__nav {
    width:  2rem;
    height: 2rem;
  }
}


/* ============================================================
   Portrait mobile (≤479px)
   ============================================================ */

@media (max-width: 479px) {
  .lead-form-section[data-variant="booking-hero"] {
    padding: 4rem 0;
  }

  .lead-form-section[data-variant="with-social-proof"] {
    padding: 4rem 0;
  }

  .lead-form-section[data-variant="booking-hero"] .lead-form-section__heading,
  .lead-form-section[data-variant="with-social-proof"] .lead-form-section__heading {
    font-size:   2rem;
    line-height: 2.25rem;
  }

  .lead-form__row {
    flex-direction: column;
  }

  .lead-form-section__social-inner {
    gap: 2.25rem;
  }

  .lead-form-section__social-copy {
    gap: 2.25rem;
  }

  .lead-proof-slider {
    min-height: 21rem;
  }

  .lead-proof-slide .case-study-card__author-group {
    align-items: flex-start;
  }

  .lead-proof-slide .case-study-card__author-name,
  .lead-proof-slide .case-study-card__author-role {
    white-space: normal;
  }

  .lead-social-proof .ratings-bar--grid-2-col {
    grid-template-columns: 1fr;
  }

  .lead-social-proof .ratings-bar__item {
    flex-direction: row;
    align-items: center;
  }
}

/* ============================================================
   RatingsBar — internal shared rating pills strip
   ============================================================ */

.ratings-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
}

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

.ratings-bar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  min-width: 0;
  padding: 1.5rem;
  background: var(--secondary);
  border: 0.5px solid var(--border);
  border-radius: 1.5rem;
  box-sizing: border-box;
}

.ratings-bar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 64px;
}

.ratings-bar__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-2);
  flex: 1 1 0;
  min-width: 0;
}

.ratings-bar__stars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 4.16%;
  color: var(--primary);
  flex: 1 1 0;
  max-width: 96px;
}

.ratings-bar__star {
  display: block;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.ratings-bar__score {
  width: 1.25rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
  color: var(--muted-foreground);
  text-align: center;
}

.ratings-bar__brand-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 991px) {
  .ratings-bar--strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .ratings-bar__item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4);
    height: auto;
    padding-bottom: 2rem;
  }

  .ratings-bar__logo {
    flex-grow: 1;
  }

  .ratings-bar__meta {
    justify-content: flex-start;
    flex: unset;
  }
}

/* ============================================================
   CaseStudySlide — Individual testimonial card styles.
   Used inside the CaseStudies carousel.
   ============================================================ */

.case-study-card {
  background-color: var(--card);
  border-radius:    var(--radius-lg);   /* 24px */
  box-sizing:       border-box;
  display:          flex;
  flex:             0 0 36.375rem;      /* 582px */
  flex-direction:   column;
  justify-content:  space-between;
  overflow:         hidden;
  padding:          2.25rem;
  scroll-snap-align: start;
}


/* ---- Top row: quote mark + CTA ---- */
.case-study-card__top {
  align-items:     flex-start;
  display:         flex;
  justify-content: space-between;
  padding-bottom:  1.5rem;    /* 24px */
  width:           100%;
}

.case-study-card__quote-mark {
  color:       var(--border);           /* #D6CFC2 — extra-muted-foreground */
  font-size:   3rem;                    /* 48px */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  height:      38px;
}


/* ---- Body: quote + author ---- */
.case-study-card__body {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;    /* 36px */
  flex: 1 0 0;
}

.case-study-card__quote {
  color:       var(--foreground);
  font-size:   1.5rem;        /* 24px */
  font-weight: 300;           /* Light — no token exists yet */
  line-height: 2rem;          /* 32px */
  margin:      0;
  flex: 1 0 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}

.case-study-card__author-group {
  align-items: center;
  display:     flex;
  gap:         0.75rem;       /* 12px */
}

.case-study-card__avatar {
  background-color: var(--opacity-primary-20);
  border-radius:    var(--radius-full);
  flex-shrink:      0;
  height:           3rem;     /* 48px */
  overflow:         hidden;
  width:            3rem;
}

.case-study-card__avatar img {
  display:    block;
  height:     100%;
  object-fit: cover;
  width:      100%;
}

.case-study-card__author-meta {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.case-study-card__author-name {
  color:       var(--foreground);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  white-space: nowrap;
}

.case-study-card__author-role {
  color:       var(--muted-foreground);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}


/* ============================================================
   Mobile landscape (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .case-study-card {
    flex:    0 0 calc(100vw - var(--carousel-gutter) * 2);
    padding: 1.5rem 2.25rem 2.25rem 2.25rem;
  }

  .case-study-card__quote {
    font-size:   1.25rem;   /* 20px */
    line-height: 1.75rem;   /* 28px */
  }

  .case-study-card__author-name,
  .case-study-card__author-role {
    font-size:   0.75rem;   /* 12px */
    line-height: 1rem;      /* 16px */
  }
}

/* ============================================================
   Button — Component Styles
   Scheme-aware: inherits data-scheme from a parent element.
   All color tokens flip automatically in dark context.
   ============================================================ */

.btn {
  /* Layout */
  align-items:     center;
  border:          1px solid transparent;
  box-sizing:      border-box;
  cursor:          pointer;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
  overflow:        hidden;
  text-decoration: none;
  user-select:     none;
  white-space:     nowrap;

  /* Typography */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);

  /* Transition */
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}


/* ============================================================
   Sizes
   Heights: xs=26px  sm=32px  md=36px  lg=40px
   All use font-size-sm (14px) except xs which uses font-size-xs (12px).
   ============================================================ */

.btn[data-size="xs"] {
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: var(--line-height-xs);    /* 16px */
  gap:         0.25rem;                  /* 4px  */
  padding:     0.3125rem 0.75rem;        /* 5px 12px → height 26px */
  --btn-gap:   0.25rem;
}

.btn[data-size="sm"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.375rem 1rem;            /* 6px 16px → height 32px */
  --btn-gap:   0.375rem;
}

.btn[data-size="md"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.5rem 1rem;              /* 8px 16px → height 36px */
  --btn-gap:   0.375rem;
}

.btn[data-size="lg"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.5rem;                   /* 8px  */
  padding:     0.625rem 1.5rem;          /* 10px 24px → height 40px */
  --btn-gap:   0.5rem;
}

.btn[data-icon-only="true"] {
  padding: 0;
}

.btn[data-size="xs"][data-icon-only="true"] {
  width:  1.625rem; /* 26px */
  height: 1.625rem;
}

.btn[data-size="sm"][data-icon-only="true"] {
  width:  2rem; /* 32px */
  height: 2rem;
}

.btn[data-size="md"][data-icon-only="true"] {
  width:  2.25rem; /* 36px */
  height: 2.25rem;
}

.btn[data-size="lg"][data-icon-only="true"] {
  width:  2.5rem; /* 40px */
  height: 2.5rem;
}


/* ============================================================
   Shapes
   ============================================================ */

.btn[data-shape="rounded"] { border-radius: var(--radius-sm);   } /* 8px  */
.btn[data-shape="round"]   { border-radius: var(--radius-full); } /* pill */


/* ============================================================
   Variants
   ============================================================ */

.btn[data-variant="primary"][data-tone="default"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

.btn[data-variant="secondary"][data-tone="default"] {
  background-color: transparent;
  border-color:     var(--primary);
  color:            var(--primary);
}

.btn[data-variant="primary"][data-tone="accent"] {
  background-color: var(--accent);
  border-color:     var(--accent);
  color:            var(--foreground);
}

.btn[data-variant="secondary"][data-tone="accent"] {
  background-color: transparent;
  border-color:     var(--accent);
  color:            var(--accent);
}


.btn[data-variant="info"] {
  background-color: var(--info);
  border-color:     var(--info);
  color:            var(--info-foreground);
}

.btn[data-variant="success"] {
  background-color: var(--success);
  border-color:     var(--success);
  color:            var(--success-foreground);
}

.btn[data-variant="warning"] {
  background-color: var(--warning);
  border-color:     var(--warning);
  color:            var(--warning-foreground);
}

.btn[data-variant="destructive"] {
  background-color: var(--destructive);
  border-color:     var(--destructive);
  color:            var(--destructive-foreground);
}


/* ============================================================
   States
   ============================================================ */

/* Primary hover — 20% dark overlay on background, full opacity */
.btn[data-variant="primary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:            var(--card);
  opacity:          1;
}

.btn[data-variant="primary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--accent) 50%, var(--muted) 50%);
  border-color:     color-mix(in srgb, var(--accent) 50%, var(--muted) 50%);
  color:            var(--foreground);
  opacity:          1;
}

/* Secondary hover — darker primary border + text, no fill */
.btn[data-variant="secondary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:      1;
}

.btn[data-variant="secondary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--muted) 50%);
  color:        color-mix(in srgb, var(--accent) 50%, var(--muted) 50%);
  opacity:      1;
}

.btn[data-variant="info"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--info) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--info) 80%, #282825 20%);
  color:            var(--info-foreground);
  opacity:          1;
}

.btn[data-variant="success"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--success) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--success) 80%, #282825 20%);
  color:            var(--success-foreground);
  opacity:          1;
}

.btn[data-variant="warning"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--warning) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--warning) 80%, #282825 20%);
  color:            var(--warning-foreground);
  opacity:          1;
}

.btn[data-variant="destructive"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  color:            var(--destructive-foreground);
  opacity:          1;
}

/* Active / pressed */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.76;
}

/* Focus */
.btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:         not-allowed;
  opacity:        0.4;
  pointer-events: none;
}


/* ============================================================
   Icon slot
   ============================================================ */

.btn__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.btn[data-size="xs"] .btn__icon:not(.btn__icon--hover-only) { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="md"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="lg"] .btn__icon:not(.btn__icon--hover-only) { height: 1rem;    width: 1rem;    } /* 16px */

.btn__icon svg {
  display: block;
  height:  100%;
  width:   100%;
}


/* ============================================================
   Hover-only icon — hidden by default, slides/fades in on :hover.
   Negative margin-right cancels the flex gap when collapsed so
   the label stays flush with the padding edge.
   ============================================================ */

/* Must come after the .btn[data-size] .btn__icon rules to win specificity tie */
.btn .btn__icon--hover-only {
  min-width:    0;        /* override flex min-width: auto so item can truly collapse */
  width:        0;
  overflow:     hidden;
  opacity:      0;
  margin-right: calc(-1 * var(--btn-gap, 0.5rem));
  transition:   width 0.2s ease, opacity 0.15s ease, margin-right 0.2s ease;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:        1rem; /* sm / md / lg */
  height:       1rem;
  opacity:      1;
  margin-right: 0;
}

.btn[data-size="xs"]:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:  0.75rem;
  height: 0.75rem;
}


/* ============================================================
   Badge slot — optional count pill inside the button
   ============================================================ */

.btn__badge {
  align-items:      center;
  background-color: var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary-foreground);
  display:          inline-flex;
  font-size:        var(--font-size-xs);   /* 12px */
  font-weight:      var(--font-weight-medium);
  justify-content:  center;
  line-height:      var(--line-height-xs); /* 16px */
  min-width:        1.25rem;               /* 20px */
  padding:          0.125rem 0.375rem;     /* 2px 6px */
}