/* Plum Catering, one type scale for the whole site (Chadi 21 Oct 2026: "a proper typography scale").
   Loaded last on every page. Eight steps, desktop max / phone min, fluid in between. Every heading and text style maps to one step.
   Selectors carry "html[lang] body" so they win over the older per-section and per-language sizes without !important. */
:root{
  --fs-display: clamp(30px, 3.4vw, 48px);  /* opening headline, closing line, category page title */
  --fs-title:   clamp(28px, 2.8vw, 40px);  /* section titles */
  --fs-heading: clamp(21px, 2vw, 28px);    /* sector list, cuisine name, service names, panel titles */
  --fs-sub:     clamp(17px, 1.4vw, 20px);  /* step titles, card titles, big facts */
  --fs-lead:    clamp(16px, 1.25vw, 18px); /* intro lines */
  --fs-body:    clamp(15px, 1.1vw, 16px);  /* descriptions */
  --fs-small:   clamp(13px, 1vw, 14px);    /* badges, chips, small print */
  --fs-label:   clamp(11px, .85vw, 12px);  /* eyebrows, numbers, counters */
}

/* Display */
html[lang] body .pcard-hero .ttl, html[lang] body .h3-close-t, html[lang] body .svp-h1, html[lang] body .svp-close-t{font-size:var(--fs-display);line-height:1.12}
html[lang="ar"] body .pcard-hero .ttl, html[lang="ar"] body .h3-close-t, html[lang="ar"] body .svp-h1, html[lang="ar"] body .svp-close-t{line-height:1.35}

/* Title */
html[lang] body .h3-title, html[lang] body .h3-pb-t, html[lang] body .h3-h1, html[lang] body .qd-panel .ttl-s{font-size:var(--fs-title);line-height:1.1}
html[lang="ar"] body .h3-title, html[lang="ar"] body .h3-pb-t, html[lang="ar"] body .h3-h1{line-height:1.3}

/* Heading */
html[lang] body .h3-form li, html[lang] body .h3-ring-cap b, html[lang] body .svp-t, html[lang] body .h3-pn-t, html[lang] body .svp-more-t, html[lang] body .success .ttl{font-size:var(--fs-heading);line-height:1.2}
html[lang="ar"] body .h3-form li, html[lang="ar"] body .h3-ring-cap b, html[lang="ar"] body .svp-t, html[lang="ar"] body .h3-pn-t, html[lang="ar"] body .svp-more-t{line-height:1.4}
html[lang] body .h3-form{gap:clamp(2px,.5vw,8px)}
/* sector list: original stacked style, light (Chadi 22 Oct); bigger again on 25 Oct ("too small"), longest line still fits a 390 px phone */
html[lang] body .h3-form li{font-size:clamp(20px,1.8vw,25px);font-weight:300;line-height:1.35}
html[lang="ar"] body .h3-form li{font-weight:400;line-height:1.5}

/* Subheading */
html[lang] body .h3-k-t, html[lang] body .mc-t, html[lang] body .svp-mc-t, html[lang] body .h3-facts b, html[lang] body .ft-close{font-size:var(--fs-sub);line-height:1.3}

/* Lead */
html[lang] body .h3-intro, html[lang] body .svp-intro, html[lang] body .h3-ring-cap p, html[lang] body .qd-panel .intro{font-size:var(--fs-lead);line-height:1.65}

/* Body */
html[lang] body .svp-b, html[lang] body .h3-facts span, html[lang] body .h3-pn-x, html[lang] body .ft-brand p{font-size:var(--fs-body);line-height:1.7}
html[lang="ar"] body .svp-b, html[lang="ar"] body .h3-facts span, html[lang="ar"] body .h3-pn-x{line-height:1.85}

/* Small */
html[lang] body .h3-fm-it span, html[lang] body .h3-tag, html[lang] body .svp-jump a, html[lang] body .circular-carousel__label, html[lang] body .mc-d{font-size:var(--fs-small)}

/* Label */
html[lang] body .eyebrow, html[lang] body .h3-k-l, html[lang] body .h3-k-n, html[lang] body .h3-ring-no, html[lang] body .h3-pn-n, html[lang] body .h3-soon, html[lang] body .svp-soon{font-size:var(--fs-label)}
html[lang="ar"] body .eyebrow, html[lang="ar"] body .h3-k-l, html[lang="ar"] body .h3-soon, html[lang="ar"] body .svp-soon{font-size:calc(var(--fs-label) + 2px)}
html[lang] body .pcard-hero .eyebrow{font-size:var(--fs-small)} /* the opening small line stays readable on the dark card (Chadi 19 Oct) */
