/* Bizspaces homepage audit fixes (P0-P2)
   Isolated override layer, injected LAST on the homepage.
   Scoped explicit selectors only. Never hide content as a JS prerequisite.
   Same font tokens as styles.css (--font-sans / --font-serif). */

/* === P0-1: COMPACT HEADER + ACTIVE MARKER ============================ */
.nav { padding-block: clamp(0.75rem, 1.6vh, 1.25rem); }
.nav.is-scrolled { padding-block: clamp(0.55rem, 1.1vh, 0.9rem); }
.nav__logo { height: 44px; }
.nav.is-scrolled .nav__logo { height: 36px; }
@media (max-width: 960px) {
  .nav__logo { height: 36px; }
  .nav.is-scrolled .nav__logo { height: 32px; }
}
.nav__links { gap: clamp(1.5rem, 2.6vw, 2.75rem); }
.nav__brand { gap: var(--space-3); }

/* main.js sets aria-current="location" for the in-page section highlight.
   styles.css only styles aria-current="page", so the active underline never
   appeared. Mirror the page state here. */
.nav__link[aria-current="location"] { color: var(--c-fg); }
.nav__link[aria-current="location"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}
@media (max-width: 960px) {
  .nav__links .nav__link[aria-current="location"] { color: var(--qs-gold-soft, #A78BFA); }
}

/* === P0-2: HERO SINGLE CTA =========================================== */
/* HTML no longer carries .tldr or the ghost CTA. The hero now has one
   primary action; keep the meta row as the secondary signal. */
#hero .hero__cta .btn { min-width: clamp(16rem, 40vw, 20rem); }

/* === P0-3: SECTORS - FEATURED EDITORIAL FIRST CARD =================== */
@media (min-width: 1100px) {
  #sectors .sector:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-7);
    padding: var(--space-7) var(--space-8);
    background:
      radial-gradient(circle at 12% 30%, rgba(139, 92, 246, 0.16), transparent 42%),
      linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(255, 255, 255, 0.02) 60%);
  }
  #sectors .sector:first-child .sector__icon {
    width: 56px;
    height: 56px;
    margin: 0;
  }
  #sectors .sector:first-child .sector__index {
    position: absolute;
    top: var(--space-5);
    right: var(--space-6);
    margin: 0;
  }
  #sectors .sector:first-child .sector__title {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    max-width: 24ch;
  }
  #sectors .sector:first-child .sector__pos { max-width: 52ch; }
  #sectors .sector:first-child .sector__example,
  #sectors .sector:first-child .sector__stats { color: var(--qs-gold-soft, #A78BFA); }
}

/* === P0-4: PROCESS - NUMBERS + STEP CONNECTORS ======================= */
/* The visual-upgrade.css rule that hid #process numbers is removed.
   The .process-step__index span is empty (aria-hidden) and gets its
   counter number here via CSS content. */
#process .process-step__index::before {
  content: counter(step, decimal-leading-zero);
}
#process .process-step__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  margin-bottom: var(--space-4);
  border: 1px solid rgba(139, 92, 246, 0.5);
  border-radius: 50%;
  color: var(--qs-gold-soft, #A78BFA);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
#process .process-step {
  position: relative;
  padding-left: var(--space-6);
  border-left: 1px solid rgba(139, 92, 246, 0.32);
  border-top: 0;
}
@media (max-width: 960px) {
  #process .process-step { padding-left: var(--space-5); }
}

/* === P0-5: TITLES - RESTORE LEGIBILITY (was line-height 0.98) ======== */
/* The 0.98 line-height + tight letterspacing made section titles read as
   clipped. Relax the shared section-header title stack only. */
.section-header :is(h1, h2, h3),
.ds-section__header :is(h1, h2, h3) {
  line-height: 1.06;
  letter-spacing: -0.045em;
}
#zones .section-title { max-width: 22ch; }

/* === P1: SERIF LIMITED TO HERO + PORTFOLIO + PROJECT FIT ============= */
#services .section-title,
#sectors .section-title,
#process .section-title,
#zones .section-title,
#pricing .section-title,
#faq .section-title,
#testimonials .section-title,
#contact .section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.035em;
}
#services .service-card__title,
#sectors .sector__title,
#process .process-step__title {
  font-family: var(--font-sans);
  font-weight: 600;
}
#portfolio .section-title,
#project-fit-home .section-title,
#portfolio .portfolio-card__title {
  font-family: var(--font-serif);
}
/* Hero keeps its serif display weight; make the service index contrast
   with the sans titles instead of doubling the serif. */
#services .service-card__index { color: var(--qs-gold-soft, #A78BFA); }

/* === P1: CTA UNIQUE PER PAGE (home = gold) =========================== */
/* quality-system already unifies primary CTAs on gold. Make the small
   ghost affordances in the home sections inherit the gold accent too. */
#services .btn--ghost,
#sectors .btn--ghost,
#process .btn--ghost,
#zones .btn--ghost,
#faq .btn--ghost,
#testimonials .btn--ghost,
#contact .btn--ghost {
  color: var(--qs-gold-soft, #A78BFA);
  border-color: rgba(139, 92, 246, 0.45);
}
#services .btn--ghost:hover,
#sectors .btn--ghost:hover,
#process .btn--ghost:hover,
#zones .btn--ghost:hover,
#faq .btn--ghost:hover,
#testimonials .btn--ghost:hover,
#contact .btn--ghost:hover {
  background: rgba(139, 92, 246, 0.10);
  border-color: var(--qs-gold-soft);
}

/* === FAQ DIVIDERS - STRONGER HAIRLINES =============================== */
#faq .faq { border-top-color: rgba(139, 92, 246, 0.4); }
#faq .faq-item { border-bottom-color: rgba(139, 92, 246, 0.4); }
#faq .faq-item__icon { border-color: rgba(139, 92, 246, 0.55); }
#faq .faq-item.is-open .faq-item__icon {
  background: var(--qs-gold, #8B5CF6);
  color: var(--qs-ink, #101112);
  border-color: var(--qs-gold, #8B5CF6);
}

/* === P2: PORTFOLIO - BADGE CLEAR OF SCREENSHOT LOGO ================== */
/* The live badge sat on top of the Cap Carbon logo in the screenshot.
   Anchor it top-right so the brand mark stays readable. */
#portfolio .portfolio-card__badge {
  top: var(--space-4);
  left: auto;
  right: var(--space-4);
}

/* === P2: TITLE MASK / HOVER LIGHT (portfolio + sectors) ============== */
@media (hover: hover) and (pointer: fine) {
  #portfolio .portfolio-card__title,
  #sectors .sector__title,
  #process .process-step__title {
    transition: color var(--dur-base, 0.3s) ease;
  }
  #portfolio .portfolio-card:hover .portfolio-card__title,
  #sectors .sector:hover .sector__title,
  #process .process-step:hover .process-step__title {
    color: var(--qs-gold-soft, #A78BFA);
  }
}

/* === P2: MOBILE TOUCH TARGETS ======================================== */
@media (max-width: 960px) {
  .nav__lang { min-height: 44px; }
  .faq-item__btn { min-height: 48px; }
}