/* ================================================================
   SPARK CUSTOM STORE — CANONICAL TYPOGRAPHY SYSTEM
   typography.css  ·  loaded LAST (after buttons.css)

   Single source of truth for headings, section "eyebrow" tags, hero
   scale and stats — so pages stop overwriting each other's type.

   Selectors are DOUBLED (.x.x = 0,2,0) so they out-rank page-level
   compound rules (e.g. `.portfolio-section .section-tag`) with no HTML
   changes.
   ================================================================ */

:root {
  --ty-head:       'Bricolage Grotesque', sans-serif;
  --ty-body:       'Montserrat', sans-serif;

  /* Hero scale: the vw slope keeps ~1400px sizes unchanged, but the cap is
     raised so headings keep growing on 1600–1920px screens instead of
     flat-lining at 3.6rem (which made big monitors look small/empty). */
  --ty-hero-size:  clamp(2.2rem, 4.1vw, 5rem);    /* one hero scale site-wide */
  /* h2/h3/tag caps raised the same way as the hero: the vw slope keeps ~1400px
     sizes unchanged, but the higher caps let section headings, card headings
     and eyebrow tags keep growing on 1600–1920px screens so sections fill the
     canvas instead of looking small on big monitors. */
  --ty-h2-size:    clamp(1.7rem, 2.7vw, 3.5rem);  /* section headings */
  --ty-h3-size:    clamp(1.05rem, 1.35vw, 1.55rem);/* card / column headings */
  --ty-weight:     700;
  --ty-track:      -0.02em;

  /* Section eyebrow tags — client: "users read the tag first, it's too small".
     Sized as a proportion of the section heading (--ty-h2-size is 2.9vw) so a
     tag always lands a step below its heading:
        1920px → ~36px tag vs ~55px heading
        1400px → ~27px tag vs ~41px heading
     Tracking is tightened from .14em so the longer tags don't run wide. */
  --ty-tag-size:   clamp(0.85rem, 1.6vw, 1.1rem);
  --ty-tag-track:  0.08em;
  --ty-red:        #D71920;
}

@media (min-width: 1600px) {/* DESKTOP-SCALE generated by tools/desktop-scale.mjs */

:root {
  --ty-hero-size:  clamp(2.2rem, 5.4667vw, 5rem);
  --ty-h2-size:    clamp(1.7rem, 3.6vw, 3.5rem);
  --ty-h3-size:    clamp(1.05rem, 1.8vw, 1.55rem);
  --ty-tag-size:   clamp(0.85rem, 2.1333vw, 1.1rem);
}
}

@media (min-width: 1920px) {
  :root {
    --ty-tag-size:   clamp(0.85rem, 1.6vw, 1.5rem);
    --ty-h2-size:    clamp(1.7rem, 2.7vw, 3.6rem);  /* section headings */
    --ty-h3-size:    clamp(1.05rem, 1.35vw, 1.65rem);
  }
  @media (min-width: 1600px) {/* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
  :root {
    --ty-tag-size:   clamp(0.85rem, 2.1333vw, 1.5rem);
    --ty-h2-size:    clamp(1.7rem, 3.6vw, 3.6rem);
    --ty-h3-size:    clamp(1.05rem, 1.8vw, 1.65rem);
  }
  }
}

/* ── 1 · HERO HEADINGS — one scale (home was 3.2rem, others up to 8rem) ── */
.hero-h1.hero-h1,
.hero__heading.hero__heading,
.pf-hero-title.pf-hero-title,
.cq-hero-title.cq-hero-title,
.faq-hero-heading.faq-hero-heading,
.sc-hero-title.sc-hero-title,
.pc-hero-title.pc-hero-title,
.sd-hero-title.sd-hero-title,
.hero-headline.hero-headline {
  font-size: var(--ty-hero-size);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
/* Dominant single words inside those heroes (outlined / accent lines) */
.h1-main.h1-main,
.hl-main.hl-main,
.h1-line--outline.h1-line--outline {
  font-size: clamp(2.6rem, 5vw, 5.5rem);
  line-height: 1.02;
}
@media (min-width: 1600px) {/* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
.h1-main.h1-main,
.hl-main.hl-main,
.h1-line--outline.h1-line--outline {
  font-size: clamp(2.6rem, 6.6667vw, 5.5rem);
}
}
.h1-sub.h1-sub,
.hl-sub.hl-sub,
.h1-line--accent.h1-line--accent,
.h1-line--muted.h1-line--muted {
  font-size: clamp(1.6rem, 2.9vw, 3.2rem);
  line-height: 1.1;
}
@media (min-width: 1600px) {/* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
.h1-sub.h1-sub,
.hl-sub.hl-sub,
.h1-line--accent.h1-line--accent,
.h1-line--muted.h1-line--muted {
  font-size: clamp(1.6rem, 3.8667vw, 3.2rem);
}
}
.h1-eyebrow.h1-eyebrow,
.hl-top.hl-top {
  font-size: clamp(0.9rem, 1.2vw, 1.35rem);
}
@media (min-width: 1600px) {/* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
.h1-eyebrow.h1-eyebrow,
.hl-top.hl-top {
  font-size: clamp(0.9rem, 1.6vw, 1.35rem);
}
}

/* ── 2 · SECTION HEADINGS — one weight, one tracking, one size ──── */
.section-h2.section-h2,
.services-section-h2.services-section-h2,
.why-heading.why-heading,
.about-heading.about-heading,
.faq-heading.faq-heading,
.section-heading.section-heading,
.section-title.section-title,
.mission__heading.mission__heading,
.reviews__heading.reviews__heading,
.cta__heading.cta__heading,
.pf-cta-title.pf-cta-title,
.ts-cta-heading.ts-cta-heading,
.gl-cta-heading.gl-cta-heading,
.faq-cta-heading.faq-cta-heading,
.footer-cta-headline.footer-cta-headline,
.sc-section-title.sc-section-title,
.sd-section-title.sd-section-title,
.pd-related-title.pd-related-title,
.sd-related-title.sd-related-title {
  font-family: var(--ty-head);
  font-size: var(--ty-h2-size);
  font-weight: var(--ty-weight);
  letter-spacing: var(--ty-track);
  line-height: 1.18;
  text-transform: none;    /* some were UPPERCASE with wide tracking */
}

/* ── 3 · CARD / COLUMN HEADINGS — one step down ─────────────────── */
.payment-title.payment-title,
.cform-title.cform-title,
.faq-col-title.faq-col-title,
.why__title.why__title,
.mc-title.mc-title,
.pf-card-title.pf-card-title,
.pd-features-title.pd-features-title,
.pd-specs-title.pd-specs-title,
.sd-value-title.sd-value-title,
.sd-trust-title.sd-trust-title,
.footer-col-heading.footer-col-heading {
  font-family: var(--ty-head);
  font-size: var(--ty-h3-size);
  font-weight: var(--ty-weight);
  letter-spacing: var(--ty-track);
  line-height: 1.3;
  text-transform: none;
}
/* the payment heading sits next to an icon — keep them on one line */
.payment-title.payment-title {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* ── 4 · SECTION TAGS — one compact red pill, everywhere ────────── */
.section-tag.section-tag,
.section-label.section-label,
.marquee-label.marquee-label,
.pf-cta-label.pf-cta-label,
.pf-hero-tag.pf-hero-tag,
.eyebrow.eyebrow,
.reviews__eyebrow.reviews__eyebrow,
.mission__tag.mission__tag,
.sc-hero-eyebrow.sc-hero-eyebrow,
.sc-section-label.sc-section-label,
.pc-hero-eyebrow.pc-hero-eyebrow,
.pc-grid-label.pc-grid-label,
.sd-related-label.sd-related-label,
.cq-label.cq-label {
  /* inline-flex + fit-content = can never stretch into a full-width bar,
     even when the parent is a flex column (that was the old bug) */
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;

  /* em-based so the pill grows with the text instead of looking cramped */
  padding: 0.5em 1.1em;
  border-radius: 100px;

  /* Unified colour: the FAQ hero tag was black (invisible on its dark hero)
     and the About tags were a red label + leading dash, not a pill. */
  background: rgba(215, 25, 32, 0.10);
  color: var(--ty-red);
  border: 1px solid rgba(215, 25, 32, 0.28);

  font-family: var(--ty-body);
  font-size: var(--ty-tag-size);
  font-weight: 700;
  letter-spacing: var(--ty-tag-track);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
/* About's .section-label drew a leading dash via ::before — drop it */
.section-label.section-label::before,
.eyebrow.eyebrow::before { content: none; }

/* ── 4b · Hero / section BADGES that keep their own colours ──────
   These aren't red pills (dark glass badges, coloured hero tags), so we
   only scale them — background, border and colour are left untouched. */
.hero-badge.hero-badge,
.sd-hero-badge.sd-hero-badge,
.pc-hero-badge.pc-hero-badge,
.sc-hero-tag.sc-hero-tag,
.pc-video-eyebrow.pc-video-eyebrow,
.footer-cta-label.footer-cta-label {
  font-size: var(--ty-tag-size);
  letter-spacing: var(--ty-tag-track);
  padding: 0.5em 1.1em;
  line-height: 1;
}
/* plain (non-pill) section labels — scale the text only, no padding change */
.trust-logos-label.trust-logos-label,
.ts-center-label.ts-center-label {
  font-size: var(--ty-tag-size);
  letter-spacing: var(--ty-tag-track);
}
/* the little status dot inside a hero badge should scale with it */
.hero-badge.hero-badge .badge-dot { width: 0.5em; height: 0.5em; }

/* Long tags must never force a horizontal scrollbar on small screens */
@media (max-width: 700px) {
  .section-tag.section-tag,
  .section-label.section-label,
  .pf-hero-tag.pf-hero-tag,
  .eyebrow.eyebrow,
  .cq-label.cq-label,
  .hero-badge.hero-badge,
  .sc-hero-tag.sc-hero-tag {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}

/* Centred section headers: `display:flex` makes it block-level so the auto
   margins actually centre it (inline-flex ignores margin-inline:auto). */
.testi-header .section-tag.section-tag,
.portfolio-section .section-tag.section-tag,
.why-top .section-tag.section-tag,
.pf-cta .pf-cta-label.pf-cta-label,
.reviews .section-label.section-label {
  display: flex;
  margin-inline: auto;
}
/* (the FAQ hero is LEFT-aligned — its tag must not be centred) */

/* ── 5 · HOME STATS BAND ────────────────────────────────────────── */
.stat-block.stat-block,
.stat-pill-top.stat-pill-top { white-space: nowrap; }

.stat-num.stat-num {
  font-family: var(--ty-head);
  font-size: clamp(2.2rem, 4vw, 4.4rem);   /* cap raised so the stats band fills big screens */
  font-weight: 800;
  letter-spacing: -0.03em;
}

@media (min-width: 1600px) {/* DESKTOP-SCALE generated by tools/desktop-scale.mjs */

.stat-num.stat-num {
  font-size: clamp(2.2rem, 5.3333vw, 4.4rem);
}
}
.stat-plus.stat-plus,
.stat-suffix.stat-suffix {
  font-family: var(--ty-head);
  font-size: clamp(1.2rem, 2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: 0;
}
@media (min-width: 1600px) {/* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
.stat-plus.stat-plus,
.stat-suffix.stat-suffix {
  font-size: clamp(1.2rem, 2.6667vw, 2.25rem);
}
}
.stat-label.stat-label {
  font-family: var(--ty-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  /* Explicit override, not just "not set" — .stat-block.stat-block above
     forces white-space:nowrap so the number stays glued to its +/%/hrs
     suffix, but that inherits into the label too. On a narrow mobile
     column a label like "Happy Clients Across the USA" then refuses to
     wrap and spills into the next grid column instead. The label needs
     its own explicit value to break that inheritance. */
  white-space: normal;
}
.stat-pill-num.stat-pill-num,
.stat-pill-suffix.stat-pill-suffix {
  font-family: var(--ty-head);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ── 6 · MARQUEE — white icons (client) ─────────────────────────── */
.mc-icon.mc-icon { color: #ffffff; }

/* ── 7 · Body copy ──────────────────────────────────────────────── */
p, li, .section-desc, .section-sub, .hero-sub { font-family: var(--ty-body); }