/*
 * BCFY readability system — 2026-07
 * A role-based scale for desktop and mobile. Body copy is never used as
 * decorative micro-type; small sizes are reserved for labels and metadata.
 */
:root {
  --type-body: 16px;
  --type-body-large: 18px;
  --type-nav: 15px;
  --type-label: 12px;
  --type-meta: 13px;
  --type-action: 15px;
}

body {
  font-size: var(--type-body);
  line-height: 1.75;
}

.topbar {
  font-size: 12px;
}

nav,
.cart,
.lang,
.site-nav {
  font-size: var(--type-nav);
}

nav a {
  padding-block: 14px;
}

.lang,
.language-switch {
  appearance: none;
  color: inherit;
  background: transparent;
  border: 1px solid rgba(11, 40, 34, 0.24);
  border-radius: 999px;
  min-height: 36px;
  padding: 7px 12px;
  font: 600 var(--type-meta)/1 var(--sans, inherit);
  cursor: pointer;
  white-space: nowrap;
}

.lang:hover,
.lang:focus-visible,
.language-switch:hover,
.language-switch:focus-visible {
  border-color: var(--gold, #b9904b);
  outline: 2px solid transparent;
}

.hero-content small,
.page-hero small,
.gateway-panel small,
.vertical-title small,
.heritage-copy > small,
.oem-feature small,
.hk-contact small,
.about-intro small,
.quality-story small,
.film-section small,
.oem-intro small,
.oem-capability small,
.enquiry-section small,
.contact-form small,
.catalog-top small,
.dual-route small {
  font-size: var(--type-label);
  line-height: 1.5;
}

.hero-content p,
.page-hero p {
  font-size: var(--type-body-large);
  line-height: 1.8;
}

.gateway-panel p,
.heritage-copy > p,
.oem-feature > div > p,
.hk-contact > div > p,
.about-intro p,
.oem-intro > p,
.film-section p,
.contact-form > div > p,
.enquiry-section > div > p,
.dual-route p {
  font-size: var(--type-body);
  line-height: 1.85;
}

.btn {
  min-height: 52px;
  padding-inline: 24px;
  font-size: var(--type-action);
}

.gateway-panel span,
.tile small,
.text-link,
.dual-route a,
.category-note a,
.plans article > a {
  font-size: 14px;
}

.heritage-image span,
.contact-options small,
.capability-list b {
  font-size: 12px;
}

.vertical-title p,
.timeline p,
.mini-steps span,
.quality-list p,
.plans p,
.category-note p,
.enquiry-form label,
.contact-form label {
  font-size: 15px;
}

.timeline p {
  line-height: 1.75;
}

.timeline p strong {
  font-size: 17px;
}

.proof-ledger span {
  font-size: 12px;
}

.category-tabs button {
  min-height: 50px;
  font-size: 14px;
}

.catalog-top input,
.product-card select,
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
  font-size: 16px;
}

.product-meta small,
.product-meta b,
.product-card label,
.price span {
  font-size: 13px;
  line-height: 1.45;
}

.scene {
  font-size: 14px;
}

.product-card p {
  min-height: 68px;
  font-size: 15px;
  line-height: 1.75;
}

.product-actions button,
.product-actions a,
.product-detail-trigger {
  min-height: 46px;
  padding: 11px;
  font-size: 13px;
}

.quality-list b,
.capability-list span,
.contact-options span,
.cart-layout aside p,
.plans li {
  font-size: 14px;
}

.cart-line small {
  font-size: 13px;
}

.stepper span {
  font-size: 14px;
}

.cart-layout aside > div {
  font-size: 15px;
}

.enquiry-form label {
  gap: 9px;
  font-weight: 650;
}

.footer-grid p,
.footer-grid a {
  font-size: 14px;
  line-height: 1.75;
}

.footer-grid b {
  font-size: 14px;
}

.footer-bottom {
  font-size: 12px;
  line-height: 1.6;
}

.product-detail-header small,
.product-detail-facts span {
  font-size: 12px;
}

.product-detail-header p,
.product-detail-facts p {
  font-size: 15px;
}

.product-detail-note {
  font-size: 13px;
  line-height: 1.65;
}

/* Independent SEO landing pages */
.site-nav {
  font-size: 16px;
}

.site-nav .language-switch {
  border-color: rgba(16, 42, 36, 0.24);
}

.breadcrumbs {
  font-size: 14px;
}

.intro-copy,
.trust-card p,
.content-card p,
.spec-card p,
.check-list,
.section-heading p,
.faq p,
.cta p,
.footer-inner {
  font-size: 16px;
}

.faq summary {
  font-size: 17px;
}

.disclaimer {
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .lang {
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 820px) {
  :root {
    --type-nav: 16px;
    --type-action: 16px;
  }

  nav a {
    min-height: 48px;
    padding-block: 13px;
  }

  .header-tools {
    gap: 10px;
  }

  .lang {
    min-width: 52px;
    padding-inline: 9px;
  }

  .site-nav {
    gap: 10px;
  }

  .site-nav .language-switch {
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 560px) {
  :root {
    --type-body: 16px;
    --type-body-large: 17px;
    --type-label: 12px;
    --type-meta: 12px;
  }

  .hero-content h1 {
    font-size: clamp(48px, 15vw, 58px);
  }

  .hero-content h2 {
    font-size: 22px;
    line-height: 1.55;
  }

  .hero-content p,
  .page-hero p {
    font-size: 17px;
    line-height: 1.75;
  }

  .gateway-panel p,
  .heritage-copy > p,
  .oem-feature > div > p,
  .hk-contact > div > p,
  .about-intro p,
  .oem-intro > p,
  .film-section p,
  .contact-form > div > p,
  .enquiry-section > div > p,
  .dual-route p {
    font-size: 16px;
  }

  .timeline p,
  .mini-steps span,
  .quality-list p,
  .plans p,
  .category-note p {
    font-size: 15px;
  }

  .product-card p {
    min-height: 0;
    font-size: 15px;
  }

  .product-actions button,
  .product-actions a,
  .product-detail-trigger {
    font-size: 14px;
  }

  .footer-grid p,
  .footer-grid a,
  .footer-grid b {
    font-size: 14px;
  }

  .site-header {
    gap: 10px;
  }

  .brand span {
    display: none;
  }
}