/* English pages only (/en/…), loaded after style.css and interactive.css.
   Same design, colours and motion as the Arabic site; only what LTR and Latin type need is adjusted.
   Images, logos and 3D/animated scenes are never mirrored. */

/* Type: Inter for Latin text (Cairo stays as the fallback for any Arabic glyph) */
:root{--f-brand:"Inter","Cairo","Segoe UI",Arial,sans-serif}
html[lang="en"] body{line-height:1.7;letter-spacing:-.003em}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{letter-spacing:-.018em;line-height:1.18}
html[lang="en"] .lang-btn span,html[lang="en"] [lang="ar"]{font-family:"Cairo","Segoe UI",Arial,sans-serif}

/* Arrows point forward (right) in LTR */
html[lang="en"] svg.arr{transform:scaleX(-1)}
html[lang="en"] a:hover > .arr,html[lang="en"] a:focus-visible > .arr,html[lang="en"] a:hover .arr,
html[lang="en"] .explore-card:hover .arr{transform:translateX(4px) scaleX(-1)}

/* Text alignment that was set to "right" for Arabic */
html[lang="en"] .hero-copy,html[lang="en"] .category-choice,html[lang="en"] .facility-main,
html[lang="en"] .facility-choice,html[lang="en"] .cat-tile{text-align:left}

/* Mobile drawer slides in from the left (its start side in LTR) */
html[lang="en"] .drawer-panel{transform:translateX(-100%);box-shadow:20px 0 40px -20px rgba(0,0,0,.4)}
html[lang="en"] .drawer.open .drawer-panel{transform:none}

/* Title underline grows from the start side */
html[lang="en"] .hero h1::after{background:linear-gradient(90deg,var(--cyan),rgba(27,163,214,0));transform-origin:left}

/* Quote list output reads left to right */
html[lang="en"] .builder-out pre{direction:ltr}

/* Small physical offsets mirrored to the start/end that LTR expects */
html[lang="en"] .quote-total b{margin-left:0;margin-right:5px}
html[lang="en"] .dialog-close{left:auto;right:12px}
html[lang="en"] .info-dialog ul{padding-right:0;padding-left:20px}
html[lang="en"] .story-intro p span{margin-right:0;margin-left:20px}

/* Headlines: Latin words run wider than the Arabic ones the sizes were set for, so the big
   display lines are scaled down proportionally at every breakpoint (the em keeps each breakpoint's ratio) */
html[lang="en"] .hero h1 .l1,html[lang="en"] .hero h1 .l2{font-size:.8em}
html[lang="en"] .hero h1 .l2{max-width:none}
html[lang="en"] .hero-lead{line-height:1.75}
html[lang="en"] .hero-lead br{display:none}
html[lang="en"] .story-intro h2{font-size:clamp(38px,5.4vw,80px);letter-spacing:-.03em;line-height:1.08}
html[lang="en"] .story-copy h2{letter-spacing:-.03em;line-height:1.08}
html[lang="en"] .card-reach .story-copy h2{max-width:13ch}
html[lang="en"] .card-reach .story-copy h2 em{white-space:normal}