/* Type scale matched to the original tintandwrapmn.com.
   Every value below was measured from the live original in Chrome (computed style) on the homepage,
   the PPF page and the contact page: desktop UA at 1440x900 and iPhone UA at 390x844. The original's
   tablet layout (768px, iPad UA) uses the desktop sizes, so the phone values switch below 768px.
   Same families as the original: Bebas Neue for headings, Saira for everything else.

   Specificity: every rule is prefixed with html:not(#tw-type), which adds one ID's worth of
   specificity without needing an ID, so these rules win over the existing stylesheets without
   !important (single exception: the kicker, see below). Exclusions use :where() so they add no
   specificity. Exclusions (owned elsewhere): the #entry intro, 
   and decorative/utility micro-labels (see report). */
:root{
  --tw-hero:70px;--tw-hero-lh:70px;--tw-hero-ls:.7px;   /* homepage hero line: Bebas 70/70, 700 */
  --tw-h1:54px;                                         /* h1: Bebas 54, line-height normal */
  --tw-h2:40px;                                         /* h2: Bebas 40 */
  --tw-h3:32px;                                         /* h3: Bebas 32 */
  --tw-h4:24px;                                         /* h4 (FAQ question titles): Bebas 24 */
  --tw-sub:18px;--tw-sub-lh:36px;                       /* bold subheading: Saira 18/36, 700 */
  --tw-body:16px;--tw-body-lh:32px;                     /* paragraphs + list items: Saira 16/32 */
  --tw-faq:16px;                                        /* FAQ answers: Saira 16, line-height normal */
  --tw-btn:18px;                                        /* buttons: Saira 18, 700 */
  --tw-nav:16px;                                        /* nav links: Saira 16, 700, .03em */
  --tw-drop:15px;                                       /* nav dropdown items: Saira 15, 400, .03em */
  --tw-label:16px;                                      /* form labels: Saira 16, 400 */
  --tw-fine:12px;                                       /* legal / fine print: Saira 12 */
}
@media (max-width:767px){
  :root{
    --tw-hero:51px;--tw-hero-lh:51px;--tw-hero-ls:.51px;
    --tw-h1:36px;--tw-h2:28px;--tw-h3:24px;--tw-h4:20px;
    --tw-sub:16px;--tw-sub-lh:32px;
    --tw-body:15px;--tw-body-lh:30px;--tw-faq:15px;
    --tw-btn:15px;--tw-nav:16px;--tw-drop:15px;--tw-label:15px;--tw-fine:12px;
  }
}

/* ---------- Header navigation ---------- */
html:not(#tw-type) .site-header .primary-nav>a,
html:not(#tw-type) .site-header .services-toggle,
html:not(#tw-type) .site-header .services-dropdown .mobile-nav-links a{
  font-family:var(--brand-body);font-size:var(--tw-nav);font-weight:700;letter-spacing:.03em;line-height:normal}
html:not(#tw-type) .site-header .services-toggle span{font-size:inherit;font-weight:400}
html:not(#tw-type) .site-header .services-dropdown>a{
  font-family:var(--brand-body);font-size:var(--tw-drop);font-weight:400;letter-spacing:.03em;line-height:normal}
html:not(#tw-type) .site-header .site-quote{font-size:var(--tw-btn);font-weight:700;line-height:normal;letter-spacing:normal}

/* ---------- Headings ---------- */
html:not(#tw-type) main h1,
html:not(#tw-type) .site-page .section-heading h1{
  font-family:var(--brand-heading);font-size:var(--tw-h1);font-weight:400;line-height:normal;letter-spacing:normal}
html:not(#tw-type) main h2,
html:not(#tw-type) .after-story .section h2,
html:not(#tw-type) .site-page .section-heading h2,
html:not(#tw-type) .faq-group>h2,
html:not(#tw-type) #service-detail h2{
  font-family:var(--brand-heading);font-size:var(--tw-h2);font-weight:400;line-height:normal;letter-spacing:normal}
html:not(#tw-type) main h3,
html:not(#tw-type) .after-story .section h3{
  font-family:var(--brand-heading);font-size:var(--tw-h3);font-weight:400;line-height:normal;letter-spacing:normal}
/* card titles sit at the original's h4 level */
html:not(#tw-type) main .process-card h3{font-size:var(--tw-h4)}
/* homepage hero line = the original's hero line (Bebas 70/70, 700, .01em) */
html:not(#tw-type) .stage .hero-copy h1{
  font-family:var(--brand-heading);font-size:var(--tw-hero);font-weight:700;line-height:var(--tw-hero-lh);letter-spacing:var(--tw-hero-ls)}
html:not(#tw-type) .stage .copy h1 em,html:not(#tw-type) .stage .copy h2 em,
html:not(#tw-type) main h1 em,html:not(#tw-type) main h2 em,html:not(#tw-type) .after-story h2 em{font-size:inherit;letter-spacing:inherit;line-height:inherit;font-weight:inherit}
/* homepage story chapter titles + closing line are section headings (h2) */
html:not(#tw-type) .stage .service-copy h2,
html:not(#tw-type) .stage .final-copy h2,
html:not(#tw-type) .stage #fallback h2{font-size:var(--tw-h2);font-weight:400;line-height:normal;letter-spacing:normal}

/* ---------- Kickers / small uppercase subtitles -> the original's bold subheading ---------- */
html:not(#tw-type) .kicker,
html:not(#tw-type) .stage .copy .eyebrow,
html:not(#tw-type) #service-detail .eyebrow,
html:not(#tw-type) .empty-state>span,
html:not(#tw-type) .process-card .process-number{
  font-family:var(--brand-body);font-size:var(--tw-sub);font-weight:700;line-height:var(--tw-sub-lh);letter-spacing:normal}
/* site.css forces .kicker{font-size:11px!important;line-height:1.5!important}; an !important rule can only be
   overridden by another !important, so these two declarations carry it (the only !important in this file). */
html:not(#tw-type) .kicker{font-size:var(--tw-sub)!important;line-height:var(--tw-sub-lh)!important}
html:not(#tw-type) .region-legend .region-card b{
  font-family:var(--brand-body);font-size:var(--tw-sub);font-weight:700;line-height:var(--tw-sub-lh);letter-spacing:normal}

/* ---------- Body paragraphs and list items ---------- */
html:not(#tw-type) main p:where(:not(.kicker,.fine-print,.eyebrow,.coverage-caption,#loading,#gallery-count,.lead,.empty-state p)),
html:not(#tw-type) main li,
html:not(#tw-type) .after-story .section p:where(:not(.kicker,.fine-print,.project-signature p)),
html:not(#tw-type) .stage .copy .description,
html:not(#tw-type) #service-detail p,html:not(#tw-type) #service-detail li,
html:not(#tw-type) .project-dialog p,
html:not(#tw-type) .region-legend .region-card>span{
  font-family:var(--brand-body);font-size:var(--tw-body);font-weight:400;line-height:var(--tw-body-lh);letter-spacing:normal}
html:not(#tw-type) .review-card b{font-size:var(--tw-body);font-weight:700;line-height:var(--tw-body-lh);letter-spacing:normal}
html:not(#tw-type) .review-card .review-stars{font-size:var(--tw-body);line-height:normal;letter-spacing:normal}
/* FAQ: question at the original's h4 size, answer at its FAQ-answer size */
/* The original's FAQ question is Bebas 24px (20px phone) with line-height normal = 1.2 x size (28.8px / 24px boxes).
   The demo sets these questions in Saira, whose 'normal' is ~1.57, so the original's rendered ratio is used. */
html:not(#tw-type) .faq-list summary{font-size:var(--tw-h4);line-height:1.2;letter-spacing:normal}
html:not(#tw-type) .faq-list summary span{font-size:inherit}
html:not(#tw-type) .faq-list details>div p{font-size:var(--tw-faq);line-height:normal;letter-spacing:normal}

/* ---------- Buttons ---------- */
html:not(#tw-type) .pill,
html:not(#tw-type) .stage .explore-button,
html:not(#tw-type) .stage .service-tests button,
html:not(#tw-type) .stage #fallback button,
html:not(#tw-type) .segmented button,
html:not(#tw-type) .filter-chips button{
  font-family:var(--brand-body);font-size:var(--tw-btn);font-weight:700;line-height:normal;letter-spacing:normal}

/* ---------- Links ---------- */
html:not(#tw-type) .source-link{font-family:var(--brand-body);font-size:var(--tw-body);font-weight:700;line-height:var(--tw-body-lh);letter-spacing:normal}

/* ---------- Labels (form labels, control labels, captions, data labels) ---------- */
html:not(#tw-type) #project-form label,
html:not(#tw-type) .control-row label,
html:not(#tw-type) .filter-row>span,
html:not(#tw-type) #gallery-count,
html:not(#tw-type) .stage .service-tests>span,
html:not(#tw-type) .metrics .metric span,
html:not(#tw-type) .compare-label,
html:not(#tw-type) .gallery-item span,
html:not(#tw-type) .project-card span,
html:not(#tw-type) .swatch-strip span,
html:not(#tw-type) #law-table caption,html:not(#tw-type) #law-table th,html:not(#tw-type) #law-table td{
  font-family:var(--brand-body);font-size:var(--tw-label);line-height:normal;letter-spacing:normal}
html:not(#tw-type) #project-form label,html:not(#tw-type) .control-row label,html:not(#tw-type) .filter-row>span,
html:not(#tw-type) #gallery-count,html:not(#tw-type) .stage .service-tests>span,html:not(#tw-type) .metrics .metric span,
html:not(#tw-type) .compare-label,html:not(#tw-type) .gallery-item span,html:not(#tw-type) .project-card span,html:not(#tw-type) .swatch-strip span{font-weight:400}

/* Form fields stay at 16px on phones too: iOS Safari zooms the page when a focused field is under 16px. */
html:not(#tw-type) #project-form input,html:not(#tw-type) #project-form select,html:not(#tw-type) #project-form textarea{font-family:var(--brand-body);font-size:16px;line-height:normal;letter-spacing:normal}

/* ---------- Fine print = the original's 12px legal line ---------- */
html:not(#tw-type) .fine-print,html:not(#tw-type) .fine-print b,
html:not(#tw-type) .review-card small{font-family:var(--brand-body);font-size:var(--tw-fine);line-height:normal;letter-spacing:normal}
/* Display text keeps the demo's own large sizes (Jason, 2026-10-05): lead statements
   (.lead and its span), the review quotes, the reel sign-off and the empty-journal line are
   excluded from the body scale above; body copy stays matched to the original. */