/* RSA responsive layer v27 (2026-10-11).
   Loaded last on every page. Root-cause fixes only: fluid type with clamp(),
   flex/grid flow, logical properties, viewport-aware hero. No global zoom. */

/* ---------- Header: Staff is now a real link to the internal system ---------- */
.rsa-nav.site-header a.staff-entry{text-decoration:none}
.rsa-nav.site-header .header-cta span,
.rsa-nav.site-header .staff-entry span{font-size:.8125rem}

/* Header type scales gently on wide screens instead of staying at 13-14px. */
@media (min-width:1500px){
 .rsa-nav.site-header .desktopnav>a{font-size:clamp(.875rem,.45rem + .4vw,1.0625rem)}
 .rsa-nav.site-header .brand strong{font-size:clamp(.875rem,.5rem + .35vw,1.0625rem)}
 .rsa-nav.site-header .header-tools>.langnav a{font-size:clamp(.75rem,.45rem + .3vw,.9375rem)}
 .rsa-nav.site-header .header-cta,.rsa-nav.site-header .header-cta span{font-size:clamp(.8125rem,.5rem + .3vw,1rem)}
}

/* Phones: the inline link strip could only show 2-3 truncated words
   ("Ter…", "Ou…"). Keep one row, move the links into the existing menu dialog. */
@media (max-width:760px){
 .rsa-nav.site-header .desktopnav{display:none!important}
 .rsa-nav.site-header .header-tools{margin-inline-start:auto;gap:6px}
 .rsa-nav.site-header .brand{min-width:0;flex:0 1 auto;gap:8px}
 .rsa-nav.site-header .brand img{width:36px;height:36px}
 .rsa-nav.site-header .brand>span{display:block;min-width:0}
 .rsa-nav.site-header .brand strong{display:block;font-size:.8125rem;line-height:1.2;white-space:nowrap}
 .rsa-nav.site-header .brand small{display:none}
 /* Language menu anchors to the tool group's outer edge, so it always opens
    inside the screen (left edge in RTL, right edge in LTR). */
 .rsa-nav.site-header .header-tools{position:relative}
 .rsa-nav.site-header .language-picker{position:static}
 .rsa-nav.site-header .language-picker .langnav-full{position:absolute;top:calc(100% + 10px);left:auto;right:0;width:min(240px,calc(100vw - 24px));max-width:calc(100vw - 24px)}
 /* The tool group is direction:ltr, so logical insets would not flip: use physical sides. */
 [dir=rtl] .rsa-nav.site-header .language-picker .langnav-full{left:0;right:auto}
}
@media (max-width:374px){
 .rsa-nav.site-header .brand>span{display:none}
 .rsa-nav.site-header .header-tools{gap:4px}
}
/* Language names were white on the white menu (only the current one was legible). */
.rsa-nav .language-picker .langnav-full a{color:#073448}
.rsa-nav .language-picker .langnav-full a span{font-size:.875rem}
.rsa-nav .language-picker .langnav-full .lang-code{font-size:.75rem;color:#4f6f78}

/* ---------- Readable minimum: no visible text below 12px ---------- */
.eyebrow,.hx-kicker,.cinema-kicker,
.hero-identity span,.hero-identity p,.hero-availability,.hero-rotation span,
.treatment-card-catalogue,.treatment-card-path,
.cardbody .person-role,.cardbody .person-extra,.cardbody .more,
.dami-product-category,.dami-product-link,.dami-item small,
.footer-connect p,.footnotes span,.footnotes .footer-location,
.hx-confirm,.knowledge-editorial,.knowledge-org bdi,.hx-reading-path a,
.hx-film figcaption,.treatment-cover figcaption,figure>figcaption,
li>bdi,.site-header .brand small{font-size:.75rem}
.breadcrumbs,.breadcrumbs a,.breadcrumbs span{font-size:.8125rem}

/* ---------- Touch targets: at least 24px tall without moving layout ---------- */
.breadcrumbs a{display:inline-block;padding-block:3px;line-height:1.4}
main :is(h2,h3,h4)>a,main td>a,.sectionhead>a,main li>a,footer li>a,aside>a,.treatment-card-title{padding-block:4px}
.cinema-foot a,.knowledge-reference-intro>a,.asidebox>a{min-height:24px;display:inline-flex;align-items:center}

/* ---------- Home hero (cinema) ---------- */
/* Tablet and up: fill the first viewport and scale type with the screen. */
@media (min-width:761px){
 .phase1-home .cinema{min-height:clamp(560px,calc(100svh - 24px),1240px)}
 .phase1-home .cinema-copy{width:min(1040px,100%)}
 .phase1-home .cinema-copy h1{font-size:clamp(2.5rem,1.2rem + 2.9vw,5.25rem)}
 [dir=rtl] .phase1-home .cinema-copy h1{font-size:clamp(2.35rem,1.1rem + 2.7vw,4.9rem)}
 .phase1-home .cinema-description{font-size:clamp(1rem,.85rem + .3vw,1.375rem);max-width:36em}
 .phase1-home .cinema-kicker{font-size:clamp(.8125rem,.7rem + .2vw,1rem)}
 .phase1-home .cinema-actions .btn{font-size:clamp(.9375rem,.8rem + .25vw,1.125rem);min-height:clamp(48px,40px + .8vw,60px);padding-inline:clamp(20px,1.6vw,32px)}
}

/* Phones (portrait): balanced headline, buttons share a row when they fit,
   and the hero footer keeps clear of the floating WhatsApp button. */
@media (max-width:760px){
 .phase1-home .cinema-copy h1{font-size:clamp(1.75rem,1rem + 4.6vw,2.6rem);line-height:1.16}
 [dir=rtl] .phase1-home .cinema-copy h1{font-size:clamp(1.65rem,.95rem + 4.3vw,2.4rem);line-height:1.45}
 .phase1-home .cinema-description{font-size:clamp(.9375rem,.85rem + .4vw,1rem);line-height:1.7}
 .phase1-home .cinema-actions{flex-direction:row;flex-wrap:wrap}
 .phase1-home .cinema-actions .btn{width:auto;flex:1 1 auto;justify-content:center;min-height:48px}
}

/* Phones in landscape: the primary CTA must be visible without scrolling. */
@media (orientation:landscape) and (max-height:520px){
 .phase1-home .cinema{min-height:calc(100svh - 16px)}
 .phase1-home .cinema-copy{padding-top:calc(var(--rsa-nav-height,84px) + 4px)!important;padding-bottom:14px}
 .phase1-home .cinema-kicker{font-size:.75rem;margin-bottom:6px}
 .phase1-home .cinema-copy h1{font-size:clamp(1.5rem,.9rem + 4.4vh,2.25rem);line-height:1.15}
 [dir=rtl] .phase1-home .cinema-copy h1{font-size:clamp(1.45rem,.85rem + 4.2vh,2.1rem);line-height:1.35}
 .phase1-home .cinema-description{font-size:.875rem;line-height:1.55;margin-top:8px;max-width:60ch}
 .phase1-home .cinema-actions{margin-top:12px;flex-direction:row}
 .phase1-home .cinema-actions .btn{width:auto;flex:0 1 auto;min-height:44px;padding:10px 20px;font-size:.875rem}
 .phase1-home .cinema-foot{padding-block:12px 14px}
}

/* Hero video: always cover its frame; keep subjects (centre) in view. */
.cinema-media video{object-fit:cover;object-position:50% 45%}

/* Floating WhatsApp step-aside rule moved to controls.css (v28). */

/* Tablet/desktop: a reading scrim on the text side keeps the headline legible
   over any video frame; the opposite side stays clear so the film is visible. */
@media (min-width:761px){
 .phase1-home .cinema-shade{background:
  linear-gradient(90deg,rgba(2,22,30,.74) 0%,rgba(2,22,30,.52) 34%,rgba(2,22,30,.14) 64%,rgba(2,22,30,0) 82%),
  linear-gradient(180deg,rgba(2,22,30,.62),transparent 28%,transparent 58%,rgba(2,24,34,.9) 100%)}
 [dir=rtl] .phase1-home .cinema-shade{background:
  linear-gradient(270deg,rgba(2,22,30,.74) 0%,rgba(2,22,30,.52) 34%,rgba(2,22,30,.14) 64%,rgba(2,22,30,0) 82%),
  linear-gradient(180deg,rgba(2,22,30,.62),transparent 28%,transparent 58%,rgba(2,24,34,.9) 100%)}
}