/* Shared type scale. Loaded last on every page, after component layout styles. */
:root {
  --type-caption: 14px;
  --type-body: 16px;
  --type-card: clamp(24px, 2.3vw, 28px);
  --type-section: clamp(32px, 4.4vw, 52px);
  --type-hero: clamp(38px, 5.5vw, 72px);
  --type-price: clamp(48px, 4.5vw, 56px);
}
body { font-size: var(--type-body); line-height: 1.7; }
:is(.cinematic-intro,.service-page-intro,.coating-intro) h1 {
  font-size: var(--type-hero); line-height: 1.05; letter-spacing: -.045em;
}
h2,#dialog-title, :is(.belief,.visit,.faq,.closing,.coatings-body .closing,.coating-options,.process-copy,.coat-faq,.gallery-category-heading,.booking-panel) h2 {
  font-size: var(--type-section); line-height: 1.1; letter-spacing: -.035em;
}
h3, :is(.service,.package-card,.ongoing-care,.visit,.comparison-card,.coating-card,.coat-addons,.process-line,.detail-extras summary) h3,
.gallery-scroll .comparison-card h3,.correction-grid .package-card h3 {
  font-size: var(--type-card); line-height: 1.15; letter-spacing: -.025em;
}
.extras-grid h4,.included-heading,.belief-grid strong,.benefits h2 {
  font-size: 20px; line-height: 1.3; letter-spacing: -.015em;
}
.area-card h3 { font-size: var(--type-body); line-height: 1.4; letter-spacing: 0; }
/* Copy, lists, FAQs and actions use the same readable size on all devices. */
:is(.hero,.cinematic-intro,.service-page-intro,.photo-intro,.coating-intro,.section-heading,.service,.featured,.package-card,.belief-grid,.visit,.ongoing-care,.extras-grid,.gallery-category-heading,.coating-card,.benefits,.process-line,.inspection) p,
.belief-grid>p,.belief-grid div p,details p,dialog p,address,
.package-card ul,.extras-grid li,.service-inclusions,.correction-description,.correction-option .correction-description,
.coat-addons>div:not(:first-child),.inspection strong,.trust,.trust .review-proof .review-label {
  font-size: var(--type-body); line-height: 1.7; letter-spacing: 0;
}
.cinematic-intro p { max-width: 440px; }
.coating-intro>p { max-width: 610px; }
.button,.button.small,.package-card .button,.cinematic-intro .button,.coating-intro .button,.coating-card .button,
.text-link,.cinematic-intro .text-link,.service-link,.featured .service-link,.mobile-dock a,.gallery-categories a,header nav,header nav.open,footer .footer-pages,
.faq summary,.detail-extras summary { font-size: var(--type-body); line-height: 1.5; }
.button { gap: 16px; }
/* Labels and secondary information form one consistent 14px tier. */
.eyebrow,.cinematic-intro .eyebrow,.stage-caption .eyebrow,.coating-intro>.eyebrow,.package-card .eyebrow,.ongoing-care .eyebrow,.detail-extras summary .eyebrow,.coat-addons .eyebrow,.closing .eyebrow,
.tag,.number,.hero-note,.photo-note,.price small,.coat-price small,.option-meta,.certified,.hero-bottom,.benefits span,.process-line b,.process-image span,.porsche-count,
.gallery-item span,.gallery-hint,.comparison-label,.comparison-enlarge,.area-card p,.package-footnote,.pricing-note,.mobile-booking-note,.ongoing-care .care-note,.visit address small,.correction-note,
footer p,footer div>a,.video-toggle,.correction-video-toggle {
  font-size: var(--type-caption); line-height: 1.6;
}
.eyebrow,.tag,.number,.price small,.coat-price small,.option-meta,.hero-bottom,.process-image span { letter-spacing: 1px; }
.gallery-item span,.comparison-label { letter-spacing: .5px; }
.closing .eyebrow { color: #153c40; }
.price,.correction-grid .price,.coat-price { font-size: var(--type-price); line-height: 1.15; letter-spacing: -.04em; }
.coat-price span { font-size: 24px; }
.certified { flex-wrap: wrap; gap: 8px 18px; }
.certified span { font-size: 22px; }
.pro-series { font-size: var(--type-body); line-height: 1.5; }
header .brand,footer .brand { font-size: 24px; letter-spacing: -.04em; min-width: 0; }
header .brand small,footer .brand small { font-size: 12px; line-height: 1.5; letter-spacing: .5px; }
.brand-icon { flex-shrink: 0; }
.area-card,.section-heading>div,.gallery-category-heading>div:first-child { min-width: 0; }
/* Keep the scroll story in document flow: its labels cannot wrap onto the title. */
.cinematic { height: calc(var(--story-stage-height,100svh) * 2.3); }
.cinematic-stage {
  display: flex; flex-direction: column; align-items: stretch;
  height: auto; min-height: 100svh; padding: 150px 5% 36px;
}
.cinematic-intro { position: relative; inset: auto; width: 100%; max-width: 770px; }
.stage-story { position: relative; z-index: 2; margin-top: auto; padding-top: 48px; }
.stage-caption { position: static; }
.stage-caption .eyebrow { max-width: 100%; margin: 0 0 24px; font-size: 12px; line-height: 1.5; letter-spacing: .8px; font-weight: 400; }
#stage-word { font-size: clamp(56px,12vw,150px); line-height: .95; letter-spacing: -.055em; }
.stage-navigation { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 22px; }
.stage-index { position: static; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 24px; color: #fff; font-size: var(--type-caption); line-height: 1.6; letter-spacing: 0; }
.stage-index span { white-space: nowrap; }
.scroll-cue { position: static; font-size: var(--type-caption); line-height: 1.6; letter-spacing: 1px; }
/* Coating hero grows with its copy and retains space for the video controls. */
.coating-hero { height: auto; min-height: 760px; padding: 155px 5% 120px; }
.coating-intro { position: relative; inset: auto; max-width: 870px; }
.hero-bottom { gap: 20px; right: 170px; }
.video-toggle { bottom: 24px; }
/* Keep the booking form's supporting copy on the same scale, too. */
.story-top p,.story-bottom>p,.intro,.booking-panel label,.booking-panel .choice,.service-option b,legend,.check-grid label,.extra-details .check-grid label,.extra-details summary,.booking-body dialog .button,.request-button {
  font-size: var(--type-body); line-height: 1.6;
}
.story-bottom .eyebrow,.booking-panel .eyebrow,.preview-note,.progress,.choice small,.field-note,.location-note,.confirmation-note,.info-note,.preview-explanation,.summary-row,.booking-help a,.optional,.upload small,.upload-copy,.service-option strong,.service-option i,.extra-details summary small,.booking-story small,.story-bottom .text-link {
  font-size: var(--type-caption); line-height: 1.6;
}
@media (max-width: 1000px) {
  .stage-navigation { align-items: flex-start; flex-direction: column; gap: 16px; }
}
@media (max-width: 650px) {
  :root { --type-hero: clamp(36px,10vw,48px); }
  header .brand { font-size: 22px; }
  header { gap: 8px; }
  .brand { gap: 10px; }
  header .brand small { font-size: 12px; letter-spacing: 0; }
  header img.brand-icon { width: 40px; height: 40px; }
  .cinematic { height: calc(var(--story-stage-height,100svh) * 1.9); }
  .cinematic-stage { min-height: var(--mobile-hero-height,100svh); padding: 112px 5% 28px; }
  .cinematic-intro { max-width: none; }
  .cinematic-intro p { max-width: 100%; margin: 20px 0; }
  .cinematic-intro .actions { gap: 16px; }
  .cinematic-intro .button { padding: 14px 18px; }
  .stage-story { padding-top: 36px; }
  .stage-caption .eyebrow { margin-bottom: 22px; font-size: clamp(10px,2.8vw,12px); letter-spacing: .6px; }
  #stage-word { font-size: 12.8vw; }
  .stage-navigation { margin-top: 20px; gap: 16px; }
  .stage-index { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; gap: 8px 12px; }
  .scroll-cue { align-self: flex-end; }
  .coating-hero { min-height: 0; padding: 140px 5% 115px; }
  .coating-intro .actions { gap: 20px; }
  .hero-bottom { bottom: 24px; right: 165px; letter-spacing: 0; }
  .certified { margin-top: 28px; }
  .gallery-category-heading h2 { font-size: var(--type-section); }
  .closing h2 { overflow-wrap: anywhere; }
  .closing .eyebrow { letter-spacing: .5px; }
  .mobile-dock { gap: 8px; }
  .mobile-dock a { padding: 10px 6px; }
}
@media (min-width: 1001px) and (max-width: 1400px) { header>.button.small { display: none; } }
@media (min-width: 651px) and (max-width: 1150px) {
  header>.button { display: none; }
  header .menu { display: block; }
  header nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--panel); padding: 22px 5%; border-bottom: 1px solid var(--line); }
  header nav.open { display: flex; flex-direction: column; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic { height: auto; }
  .cinematic-stage { position: relative; }
}
.story-top .eyebrow { font-size: var(--type-caption); line-height: 1.6; }
.story-top h1 { font-size: var(--type-hero); line-height: 1.05; }
@media (max-width: 650px) { .booking-story { height: 230px; } }
.booking-panel p,.booking-help p,.booking-body dialog p { font-size: var(--type-body); line-height: 1.7; }
.booking-panel :is(.info-note,.field-note,.location-note,.confirmation-note),.booking-body dialog .preview-explanation { font-size: var(--type-caption); }
#photo-error,.upload input { font-size: var(--type-caption); }