/* ODORT type scale: one size per role across the homepage and inner pages. */
:root {
  --type-label: 12px;
  --type-body: 17px;
  --type-lead: 20px;
  --type-card: 29px;
  --type-section: clamp(40px, 4.4vw, 64px);
  --type-display: clamp(56px, 6vw, 88px);
}

body { font-family: 'Host Grotesk', Arial, sans-serif; font-size: var(--type-body); }
nav, .cinema nav, .pill, .menu { font-size: 14px; }
.label, .number, .hero-services span, .phone-list span, .contact-address span,
.back, .contact-details .small-note { font-size: var(--type-label) !important; }

h1, .intro-copy h1, .contact-hero h1, .subhero h1 {
  font-size: var(--type-display);
  line-height: 1.02;
}
h2, .overview-head h2, .contact-lead h2, .contact-details h2, .address-band h2 {
  font-size: var(--type-section);
  line-height: 1.08;
}
.hero-services strong, .service-card h3, .service h3, .steps h3, summary,
.phone-list strong { font-size: var(--type-card); line-height: 1.18; }

.intro-copy>p:not(.label), .contact-hero>p:not(.label) {
  font-size: var(--type-lead);
  line-height: 1.5;
}
.hero-contact p, .overview-head>p, .service-card p,
.contact-lead>p:not(.label), .contact-details p:not(.label),
.contact-address, .copy, .hero p, .steps p, details p {
  font-size: var(--type-body);
  line-height: 1.55;
}
.contact-details .small-note { line-height: 1.5; }
.hero-services small, .phone-list b, footer { font-size: 13px; }

@media (max-width: 800px) {
  :root {
    --type-body: 16px;
    --type-lead: 18px;
    --type-card: 25px;
    --type-section: clamp(36px, 8vw, 46px);
    --type-display: clamp(45px, 10vw, 62px);
  }
  .phone-list strong { overflow-wrap: anywhere; }
}