/* Bizspaces quality system: explicit contrast, alignment and interaction repair */
:root {
  --qs-gold: #8B5CF6;
  --qs-gold-soft: #A78BFA;
  --qs-ink: #101112;
  --qs-panel: #151617;
  --qs-line: rgba(139, 92, 246, 0.28);
  --qs-copy: rgba(255, 255, 255, 0.78);
}

/* === Shared title and copy alignment =================================== */
.section-header,
.ds-section__header,
.pillar-hero__content,
.pricing-hero__content,
.services-hero__content { max-width: 72rem; margin-inline: auto; }
.section-header :is(h1, h2, h3),
.ds-section__header :is(h1, h2, h3),
.pillar-hero__content :is(h1, h2),
.pricing-hero__content :is(h1, h2),
.services-hero__content :is(h1, h2) {
  margin-inline: 0;
  max-width: 18ch;
  text-wrap: balance;
  letter-spacing: -0.055em;
  line-height: 0.98;
}
.section-header > :is(p, .section-subtitle),
.ds-section__header > :is(p, .ds-section__lead),
.pillar-hero__content > p,
.pricing-hero__content > p,
.services-hero__content > p {
  max-width: 62ch;
  margin-inline: 0;
  text-wrap: pretty;
}
.hero__title,
.ds-hero__title,
.project-fit-hero__title {
  display: block;
  width: max-content;
  max-width: min(92vw, 18ch);
  margin-inline: auto;
  text-wrap: balance;
  letter-spacing: -0.06em;
  line-height: 0.98;
}
.hero__desc,
.ds-hero__desc,
.project-fit-hero__lead { max-width: 58ch; text-wrap: pretty; }

/* === CTA contrast: prevents white text on a light surface ============ */
/* Base button shape (premium: pill, motion-aware) */
.btn,
.pricing-cta,
.ds-hero__btn-primary,
.ds-final-cta__btn-primary,
.city-cta,
.pillar-cta__btn,
.ds-financing__cta,
.portfolio-card__live-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  padding: 0.85rem 1.65rem;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Primary (gold-on-dark, default) */
.btn--primary,
.pricing-cta:not(.pricing-cta--ghost),
.ds-hero__btn-primary,
.ds-final-cta__btn-primary,
.city-cta,
.pillar-cta__btn,
.ds-financing__cta {
  color: var(--qs-ink);
  background: var(--qs-gold);
  border-color: var(--qs-gold-soft);
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.18);
}
.btn--primary :is(span, svg),
.pricing-cta:not(.pricing-cta--ghost) :is(span, svg),
.ds-hero__btn-primary :is(span, svg),
.ds-final-cta__btn-primary :is(span, svg),
.city-cta :is(span, svg),
.pillar-cta__btn :is(span, svg),
.ds-financing__cta :is(span, svg) {
  color: inherit;
  fill: currentColor;
}

/* Ghost (transparent on dark sections: white text) */
.btn--ghost,
.pricing-cta--ghost,
.ds-hero__btn-secondary,
.ds-final-cta__btn-secondary {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.42);
}
.btn--ghost:hover,
.pricing-cta--ghost:hover,
.ds-hero__btn-secondary:hover,
.ds-final-cta__btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}

/* === IMPORTANT: when a ghost button sits on a LIGHT surface, swap === */
.pricing-card--featured .btn--ghost,
.pricing-card--featured .pricing-cta--ghost,
.surface-light .btn--ghost,
[data-surface="light"] .btn--ghost {
  color: var(--qs-ink);
  background: transparent;
  border-color: rgba(10, 10, 10, 0.32);
}
.pricing-card--featured .btn--ghost:hover,
.pricing-card--featured .pricing-cta--ghost:hover,
.surface-light .btn--ghost:hover,
[data-surface="light"] .btn--ghost:hover {
  background: rgba(10, 10, 10, 0.06);
  border-color: var(--qs-ink);
}

.btn:hover,
.pricing-cta:hover,
.ds-hero__btn-primary:hover,
.ds-final-cta__btn-primary:hover,
.city-cta:hover,
.pillar-cta__btn:hover,
.ds-financing__cta:hover,
.portfolio-card__live-btn:hover { transform: translateY(-2px); }

.btn:focus-visible,
.pricing-cta:focus-visible,
.ds-hero__btn-primary:focus-visible,
.ds-final-cta__btn-primary:focus-visible,
.city-cta:focus-visible,
.pillar-cta__btn:focus-visible,
.ds-financing__cta:focus-visible,
.portfolio-card__link:focus-visible,
.faq-item__btn:focus-visible {
  outline: 3px solid var(--qs-gold-soft);
  outline-offset: 4px;
}

/* === Cards and grids ================================================= */
.service-card,
.sector,
.portfolio-card,
.pricing-card,
.zone-card,
.fit-card,
.testimonial,
.pillar-article-card,
.ds-financing,
.ds-portfolio__card {
  border-color: var(--qs-line);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}
.service-card,
.sector,
.portfolio-card,
.pricing-card,
.zone-card,
.fit-card,
.testimonial,
.pillar-article-card { overflow: clip; }
.service-card__title,
.sector__title,
.portfolio-card__title,
.pricing-card h3,
.zone-card__title,
.fit-card h3,
.testimonial__name { text-wrap: balance; }
.service-card__desc,
.sector__body,
.portfolio-card__desc,
.pricing-desc,
.zone-card__desc,
.fit-card p,
.testimonial__quote { color: var(--qs-copy); text-wrap: pretty; }

@media (hover: hover) and (pointer: fine) {
  .service-card:hover,
  .sector:hover,
  .pricing-card:hover,
  .zone-card:hover,
  .fit-card:hover,
  .pillar-article-card:hover {
    border-color: var(--qs-gold-soft);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.27);
  }
}

/* === Portfolio click-through repair ================================== */
.portfolio-card { position: relative; isolation: isolate; }
.portfolio-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  border-radius: inherit;
}
.portfolio-card__live-btn {
  position: relative;
  z-index: 4;
  color: var(--qs-ink);
  background: var(--qs-gold);
  border: 1px solid var(--qs-gold-soft);
}
.portfolio-card__cta,
.portfolio-card__cta-arrow {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.portfolio-card:focus-within {
  border-color: var(--qs-gold-soft);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.24), 0 24px 52px rgba(0, 0, 0, 0.28);
}

/* === Reviews and FAQ ================================================= */
.testimonials { align-items: stretch; }
.testimonial {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(139, 92, 246, 0.055));
}
.testimonial__stars { color: var(--qs-gold-soft); }

.faq-item {
  border-color: var(--qs-line);
  background: rgba(255, 255, 255, 0.018);
}
.faq-item__btn {
  width: 100%;
  color: #fff;
  text-align: left;
}
.faq-item__btn[aria-expanded="true"] { color: var(--qs-gold-soft); }
.faq-item__answer { color: var(--qs-copy); }

/* === Direct form quality ============================================= */
.contact-form,
.fit-form,
.project-fit-form {
  border-color: var(--qs-line);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(139, 92, 246, 0.065));
}
.contact-form :is(input, textarea, select),
.fit-form :is(input, textarea, select),
.project-fit-form :is(input, textarea, select) {
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.28);
}
.contact-form :is(input, textarea, select)::placeholder,
.fit-form :is(input, textarea, select)::placeholder,
.project-fit-form :is(input, textarea, select)::placeholder {
  color: rgba(255, 255, 255, 0.56);
}
.contact-form :is(input, textarea, select):focus,
.fit-form :is(input, textarea, select):focus,
.project-fit-form :is(input, textarea, select):focus {
  outline: none;
  border-color: var(--qs-gold-soft);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

/* === Footer hierarchy ================================================= */
footer.site-footer,
footer.footer,
.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--qs-line);
  background: linear-gradient(125deg, #090a0a 0%, #11100d 52%, #090a0a 100%);
}
footer.site-footer::before,
footer.footer::before,
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--qs-gold), transparent);
}
footer.site-footer :is(a, p, span),
footer.footer :is(a, p, span),
.site-footer :is(a, p, span) { position: relative; }
footer.site-footer a,
footer.footer a,
.site-footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration-color: rgba(139, 92, 246, 0.5);
  text-underline-offset: 0.24em;
}
footer.site-footer a:hover,
footer.footer a:hover,
.site-footer a:hover { color: var(--qs-gold-soft); }

/* === Direct Contact component ========================================= */
.contact-direct {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(3rem, 7vw, 7rem);
  padding-top: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--qs-line);
}
.contact-direct__intro h3 {
  max-width: 12ch;
  margin: 0.75rem 0 1rem;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.contact-direct__intro p {
  max-width: 35ch;
  margin: 0;
  color: var(--qs-copy);
  line-height: 1.65;
}
.contact-form--direct {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.contact-form--direct .contact-form__actions,
.contact-form--direct .contact-form__submit { margin-top: 0.5rem; }
@media (max-width: 760px) {
  .contact-direct { grid-template-columns: 1fr; }
}

/* === Mobile override (kept last) ===================================== */
@media (max-width: 760px) {
  .section-header :is(h1, h2, h3),
  .ds-section__header :is(h1, h2, h3),
  .hero__title,
  .ds-hero__title,
  .project-fit-hero__title { max-width: 100%; }
  .btn,
  .pricing-cta,
  .ds-hero__btn-primary,
  .ds-final-cta__btn-primary,
  .city-cta,
  .pillar-cta__btn,
  .ds-financing__cta { width: 100%; }
}