/* Best Vanna site-wide Cyrillic typography system, 2026-08-27.
   This file is loaded after page-specific styles by apply-shared-shell.py.
   Roles, rather than page names, control the scale. */

/* The export already contains the original Montserrat subsets. Use the local
   Cyrillic and Latin files so headings do not depend on production or on an
   installed desktop font. The source is a variable weight face. */
@font-face {
  font-family: "Best Vanna Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/imported/montserrat-jtusjig1_i6t8kchkm459w1hyzbi.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Best Vanna Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/imported/montserrat-jtusjig1_i6t8kchkm459wlhyw.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Two-family system: expressive but restrained UI headings, neutral copy. */
  --bv-font-ui: "Best Vanna Montserrat", Arial, sans-serif;
  --bv-font-reading: Arial, "Helvetica Neue", sans-serif;

  /* Responsive role scale. At 1440 px: 64 / 56 / 42 / 22 / 20 / 18 / 15 / 13 / 14.
     At 390 and 320 px: 34 / 34 / 26 / 18 / 17 / 16 / 15 / 13 / 14. */
  --bv-type-display: clamp(2.125rem, 1.25rem + 3.5vw, 4rem);
  --bv-type-page-title: clamp(2.125rem, 1.75rem + 2.25vw, 3.5rem);
  --bv-type-editorial-title: clamp(1.875rem, 1.5rem + 1.5vw, 3rem);
  --bv-type-section: clamp(1.625rem, 1.2rem + 1.8vw, 2.625rem);
  --bv-type-card: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  --bv-type-dialog: clamp(1.5rem, 1.35rem + .6vw, 1.75rem);
  --bv-type-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --bv-type-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --bv-type-compact: .9375rem;
  --bv-type-meta: .8125rem;
  --bv-type-action: .875rem;
  --bv-type-legal: .8125rem;

  --bv-weight-reading: 400;
  --bv-weight-meta: 600;
  --bv-weight-heading: 700;
  --bv-leading-display: 1.06;
  --bv-leading-section: 1.16;
  --bv-leading-card: 1.3;
  --bv-leading-reading: 1.65;
  --bv-leading-compact: 1.55;
  --bv-leading-meta: 1.35;
  --bv-leading-action: 1.25;
  --bv-measure-display: 22ch;
  --bv-measure-section: 32ch;
  --bv-measure-reading: 68ch;
  --bv-measure-lead: 60ch;
  --bv-text-primary: #17324a;
  --bv-text-secondary: #526b7c;
  --bv-space-text-1: .5rem;
  --bv-space-text-2: 1rem;
  --bv-space-text-3: 1.25rem;
}

body {
  color: var(--bv-text-primary);
  font-family: var(--bv-font-reading);
  font-size: var(--bv-type-body);
  line-height: var(--bv-leading-reading);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

/* Replace exported page-level font inheritance with the local two-family
   system. Descendant role rules below decide between reading and UI faces. */
body.bv-geo-page,
:is(
  .bv-price-page,
  .bv-blog2,
  .bv-article2,
  .bv-geo,
  .bv-service-ui,
  .bv-reviews-v2,
  .bv-contact-page
) {
  font-family: var(--bv-font-reading);
}

/* The shared navigation and footer are interface chrome, so they use the same
   UI family and action role on every route. Brand text is deliberately the
   only non-content label that keeps the larger 18/24 px sizes. */
.bv-header,
.bv-unified-footer {
  font-family: var(--bv-font-ui);
}

.bv-brand__name,
.bv-unified-footer__brand {
  font-family: var(--bv-font-ui);
  font-weight: var(--bv-weight-heading);
  letter-spacing: .01em;
}

:is(.bv-nav a, .bv-phone, .bv-header .bv-btn, .bv-unified-footer nav a, .bv-unified-footer button) {
  font-family: var(--bv-font-ui);
  font-size: var(--bv-type-action);
  font-weight: var(--bv-weight-heading);
  line-height: var(--bv-leading-action);
  letter-spacing: 0;
}

.bv-unified-footer :where(p, nav a) {
  font-size: var(--bv-type-action);
  line-height: 1.5;
}

/* Page display role: one family, one weight and one responsive scale. */
:is(
  .bv-hero,
  .bv-price-page,
  .bv-blog2,
  .bv-article2,
  .bv-geo,
  .bv-service-ui,
  .bv-reviews-v2,
  .bv-contact-page
) h1 {
  max-inline-size: var(--bv-measure-display);
  margin-block-end: var(--bv-space-text-3);
  font-family: var(--bv-font-ui);
  font-size: var(--bv-type-display);
  font-weight: var(--bv-weight-heading);
  line-height: var(--bv-leading-display);
  letter-spacing: -.025em;
  overflow-wrap: normal;
  text-wrap: balance;
}

/* A landing display and a page title are different roles. Long article,
   service and city titles use the 56 px desktop role, preventing four-line
   headings without shrinking the homepage statement. */
:is(
  .bv-price-page,
  .bv-blog2,
  .bv-article2,
  .bv-geo,
  .bv-service-ui,
  .bv-reviews-v2,
  .bv-contact-page
) h1 {
  font-size: var(--bv-type-page-title);
  text-wrap: pretty;
}

.bv-article2 h1 {
  font-size: var(--bv-type-editorial-title);
}

/* Contact used a double-class legacy rule, so match that specificity to keep
   its H1 on the same display role as the other routes. */
.bv-contact-page .bv-contact-hero h1 {
  max-inline-size: var(--bv-measure-display);
  font-family: var(--bv-font-ui);
  font-size: var(--bv-type-page-title);
  font-weight: var(--bv-weight-heading);
  line-height: var(--bv-leading-display);
  letter-spacing: -.025em;
}

/* The earlier homepage pass had its own 38 px token. Point it at the shared
   section role so the same heading no longer changes size between routes. */
body.bv-static-home {
  --bv-home-section-title: var(--bv-type-section);
}

/* Section title role. Compact navigation headings are intentionally excluded. */
:is(
  .bv-price-section,
  .bv-price-final,
  .bv-blog2__section,
  .bv-article2__body,
  .bv-geo-section,
  .bv-geo-status-card,
  .bv-geo-region,
  .bv-geo-final,
  .bv-service-ui,
  .bv-reviews-v2,
  .bv-contact-page,
  .bv-city-bath-types,
  .bv-decision-guide
) h2 {
  max-inline-size: var(--bv-measure-section);
  margin-block-end: var(--bv-space-text-2);
  font-family: var(--bv-font-ui);
  font-size: var(--bv-type-section);
  font-weight: var(--bv-weight-heading);
  line-height: var(--bv-leading-section);
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* Card/subsection role. */
:is(
  .bv-price-page,
  .bv-blog2__card,
  .bv-article2__body,
  .bv-geo,
  .bv-service-ui,
  .bv-reviews-v2,
  .bv-contact-page,
  .bv-material-card,
  .bv-bath-card,
  .bv-decision-guide
) h3 {
  margin-block-end: var(--bv-space-text-1);
  font-family: var(--bv-font-ui);
  font-size: var(--bv-type-card);
  font-weight: var(--bv-weight-heading);
  line-height: var(--bv-leading-card);
  letter-spacing: -.008em;
  text-wrap: pretty;
}

/* Compact table-of-contents headings are card titles, not full sections. */
:is(.bv-article2__toc, .bv-article2__side-box) h2 {
  max-inline-size: none;
  font-family: var(--bv-font-ui);
  font-size: 1.125rem;
  font-weight: var(--bv-weight-heading);
  line-height: var(--bv-leading-card);
  letter-spacing: 0;
}

/* Lead copy is larger than reading copy but never another heading. */
:is(
  .bv-hero p,
  .bv-price-hero__lead,
  .bv-blog2__lead,
  .bv-article2__lead,
  .bv-geo-hero__lead,
  .bv-geo-lead,
  .bv-service-lead-v2,
  .bv-reviews-v2__lead,
  .bv-contact-hero__lead
) {
  max-inline-size: var(--bv-measure-lead);
  font-family: var(--bv-font-reading);
  font-size: var(--bv-type-lead);
  font-weight: var(--bv-weight-reading);
  line-height: 1.58;
  letter-spacing: normal;
}

/* Reading copy: comfortable Cyrillic measure and leading. */
:is(
  .bv-article2__body,
  .bv-geo-section__intro,
  .bv-service-ui,
  .bv-reviews-v2,
  .bv-contact-page,
  .bv-decision-guide
) :where(p, li, dd) {
  font-family: var(--bv-font-reading);
  font-weight: var(--bv-weight-reading);
  line-height: var(--bv-leading-reading);
}

.bv-article2__body > :where(p, ul, ol, dl),
.bv-geo-section__intro,
.bv-contact-page :where(.bv-contact-section > p, .bv-contact-final > p) {
  max-inline-size: var(--bv-measure-reading);
}

/* Compact copy inside cards keeps the page scannable without dropping below
   15 px at phone widths. */
:is(
  .bv-material-card,
  .bv-bath-card,
  .bv-blog2__card,
  .bv-geo-card,
  .bv-geo-price-card,
  .bv-geo-process-flow,
  .bv-service-ui [class*="card"],
  .bv-reviews-v2 [class*="card"],
  .bv-contact-card,
  .bv-route-steps-v2,
  .bv-contact-steps
) :where(p, li, dd) {
  font-family: var(--bv-font-reading);
  font-size: var(--bv-type-compact);
  font-weight: var(--bv-weight-reading);
  line-height: var(--bv-leading-compact);
}

/* Eyebrows, status labels and card metadata share one restrained role. */
:is(
  .bv-price-eyebrow,
  .bv-price-kicker,
  .bv-blog2__eyebrow,
  .bv-article2__eyebrow,
  .bv-blog2__card-kicker,
  .bv-geo-kicker,
  .bv-geo-eyebrow,
  .bv-geo-status,
  .bv-geo-price-card > span,
  .bv-city-calc__result > span,
  .bv-status-label,
  .bv-service-eyebrow-v2,
  .bv-contact-eyebrow,
  .bv-contact-kicker,
  .bv-contact-card__label,
  .bv-reviews-v2__zero-label,
  .bv-reviews-v2__eyebrow,
  .bv-reviews-v2__frame-label,
  .bv-reviews-v2__empty-kicker,
  .bv-section-label,
  .bv-material-card__badge,
  .bv-material-card__meta span
) {
  font-family: var(--bv-font-ui);
  font-size: var(--bv-type-meta);
  font-weight: var(--bv-weight-meta);
  line-height: var(--bv-leading-meta);
  letter-spacing: .055em;
}

/* Repeated numbered stages use the same role on every page. */
.bv-route-steps-v2 li::before,
.bv-contact-steps li::before,
.bv-article2__steps li::before,
.bv-geo-prepare li::before,
.bv-geo-process-flow article > span,
.bv-geo-card__index {
  font-family: var(--bv-font-ui);
  font-size: var(--bv-type-meta);
  font-weight: var(--bv-weight-heading);
  line-height: var(--bv-leading-meta);
  letter-spacing: .04em;
}

:is(
  .bv-route-steps-v2,
  .bv-contact-steps,
  .bv-article2__steps,
  .bv-geo-prepare,
  .bv-geo-process-flow
) strong {
  font-family: var(--bv-font-ui);
  font-size: 1rem;
  font-weight: var(--bv-weight-heading);
  line-height: var(--bv-leading-card);
  letter-spacing: 0;
}

.bv-material-card__price,
.bv-service-ui .bv-card-price,
.bv-service-ui .bv-card-price strong,
.bv-service-ui :is(.bv-price-status-v2, .bv-price-tariff-v2) strong {
  font-family: var(--bv-font-ui);
  font-weight: var(--bv-weight-heading);
}

.bv-geo-breadcrumbs {
  font-family: var(--bv-font-ui);
  font-size: var(--bv-type-meta);
  font-weight: var(--bv-weight-meta);
  line-height: var(--bv-leading-meta);
  letter-spacing: 0;
}

:is(.bv-form, .bv-price-calculator, .bv-city-calc) :where(label, input, select, textarea) {
  font-family: var(--bv-font-reading);
  font-size: 1rem;
  line-height: 1.5;
}

.bv-form-modal {
  font-family: var(--bv-font-reading);
}

.bv-form-modal h2 {
  font-family: var(--bv-font-ui);
  font-size: var(--bv-type-dialog);
  font-weight: var(--bv-weight-heading);
  line-height: 1.2;
  letter-spacing: -.01em;
}

:is(.bv-form__consent, .bv-tool-privacy, .bv-price-note, .bv-photo-caption, figcaption) {
  font-family: var(--bv-font-reading);
  font-size: var(--bv-type-legal);
  font-weight: var(--bv-weight-reading);
  line-height: 1.5;
  letter-spacing: normal;
}

@media (max-width: 560px) {
  :root {
    --bv-type-display: clamp(2.125rem, 8.7vw, 2.25rem);
    --bv-type-page-title: clamp(2rem, 8.2vw, 2.125rem);
    --bv-type-editorial-title: clamp(1.875rem, 7.8vw, 2rem);
    --bv-type-section: clamp(1.625rem, 6.8vw, 1.875rem);
    --bv-leading-display: 1.08;
    --bv-leading-section: 1.18;
    --bv-measure-display: 18ch;
    --bv-measure-section: 24ch;
  }

  :is(
    .bv-hero,
    .bv-price-page,
    .bv-blog2,
    .bv-article2,
    .bv-geo,
    .bv-service-ui,
    .bv-reviews-v2,
    .bv-contact-page
  ) h1 {
    letter-spacing: -.018em;
  }

  :is(
    .bv-price-section,
    .bv-price-final,
    .bv-blog2__section,
    .bv-article2__body,
    .bv-geo-section,
    .bv-service-ui,
    .bv-reviews-v2,
    .bv-contact-page
  ) h2 {
    letter-spacing: -.01em;
  }
}


body.bv-static-home {
  --bv-font-reading: var(--bv-font-ui);
  --bv-home-heading: #154b72;
  --bv-home-text: #17324a;
  --bv-home-muted: #526a7b;
  color: var(--bv-home-text);
  font-family: var(--bv-font-ui);
}

body.bv-static-home .bv-home-door-title h1 {
  max-inline-size: 18ch;
  font-family: var(--bv-font-ui) !important;
  font-size: clamp(2.375rem, 4.7vw, 4.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}

body.bv-static-home .bv-home-door-hint {
  font-family: var(--bv-font-ui) !important;
  font-size: var(--bv-type-meta);
  font-weight: var(--bv-weight-meta);
  line-height: var(--bv-leading-action);
  letter-spacing: 0;
}

@media (max-width: 560px) {
  body.bv-static-home .bv-home-door-title h1 {
    max-inline-size: 16ch;
    font-size: clamp(2.125rem, 9.4vw, 2.75rem);
    line-height: 1.06;
    letter-spacing: -.022em;
  }
}