/* Mavex page frame (BRAND.md §4a), shared with travel.mavex.ae and mavex.ae.
   Loaded last on every page. One set of numbers: header height, where the intro starts,
   the heading scale, one container and the text width rule. Change them here, nowhere else. */
:root{
  --mx-header:72px;            /* header height: 72 from 1024px, 64 below */
  --page-top:144px;            /* viewport top -> first intro element (eyebrow or h1) */
  --mx-max:1200px;             /* the one container */
  --mx-gutter:max(16px,5vw);   /* side gutters */
  /* Text width (BRAND.md §4a): text spans the column it sits in. A heading or paragraph with
     nothing beside it runs the full container; one beside a visual fills its grid column. These two
     tokens stay so older rules that read them resolve to "no cap" instead of a ch measure. */
  --mx-lead:none;
  --mx-measure:none;
  /* Heading scale: the same compact scale as mavex.ae and travel.mavex.ae (BRAND.md §4a). */
  --fs-hero:clamp(2rem,1.55rem + 1.6vw,2.75rem);   /* home-page headline only: 32 -> 44px */
  --fs-h1:clamp(1.75rem,1.45rem + .9vw,2.125rem);  /* interior page titles: 28 -> 34px */
  --fs-h2:clamp(1.25rem,1.05rem + .5vw,1.5rem);    /* section headings, CTA bands: 20 -> 24px */
  --fs-h3:clamp(1rem,.93rem + .3vw,1.25rem);       /* card titles, h3, statements: 16 -> 20px */
  --fs-num:clamp(1.5rem,1.3rem + .6vw,1.875rem);   /* stat figures and step numbers: 24 -> 30px, under the h1 */
  --fs-lead:1rem;                                  /* lead paragraphs: 16px */
}
@media (max-width:1023px){:root{--mx-header:64px;--page-top:128px}}
@media (max-width:640px){:root{--mx-header:64px;--page-top:104px}}

/* 1. Header: a fixed height, same gutters as the container. */
.bar{height:var(--mx-header);min-height:var(--mx-header);padding-block:0!important;padding-inline:var(--mx-gutter)!important;box-sizing:border-box}
.bar .brand svg{height:40px;width:40px}
@media (max-width:640px){.bar .brand svg{height:36px;width:36px}}
.mnav{padding-top:calc(var(--mx-header) + 12px)!important}
html{scroll-padding-top:calc(var(--mx-header) + 16px)}

/* 2. Container: max 1200, gutters max(16px,5vw), on every section of every page. */
main>section{padding-inline:var(--mx-gutter)!important}
.wrap{max-width:var(--mx-max)!important;margin-inline:auto;padding-inline:0!important}

/* 3. Page intro: the first section of an interior page. */
main>section.page-intro{padding-top:var(--page-top)!important}
.page-intro .eyebrow{font-size:12px;line-height:1.2;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#926C1F;margin:0 0 22px!important}
html[dir=rtl] .page-intro .eyebrow{letter-spacing:0}
.page-intro h1{font-size:var(--fs-h1)!important;line-height:1.15!important;margin:0!important}
html[dir=rtl] .page-intro h1{line-height:1.35!important}
.page-intro .lead{margin-top:20px!important;max-width:none!important;font-size:var(--fs-lead)!important}

/* Section labels follow the same eyebrow spec (BRAND.md §5): gold on every site, including the home
   page's "STATION 0n" labels (they used to take each station's dot colour). */
.eyebrow,.sec-eyebrow{letter-spacing:.14em;color:#926C1F}
html[dir=rtl] .eyebrow,html[dir=rtl] .sec-eyebrow{letter-spacing:0}
/* Scroll-progress bar: pinned to the top edge of the viewport and grows from the reading start
   (left in English, right in Arabic). */
#progress{left:auto;inset-inline-start:0}

/* 4. Text width (BRAND.md §4a, owner rule Oct 2026). Headings and paragraphs span their column:
   the full 1200px container when nothing sits beside them, the whole grid cell when a visual does.
   No ch or px caps on text, no centred narrow columns. Every per-page cap (h2.sec 820px, .lead 64ch,
   .bigline 900px, .story p 780px, .dxb p 56ch ...) is lifted here, in the file every page loads last.
   Exceptions are boxes, not text: chips (.uc, .hc-chip), cards, buttons, form hints and captions keep
   the width of their box, and figcaptions are left alone. */
main :is(h1,h2,h3,h4,p,blockquote,ul,ol,li,dl,dd){max-width:none!important}
/* Text containers that used to hold a narrow column with nothing beside it. */
.mx-measure{max-width:none!important}
.dxb-in{max-width:var(--mx-max)!important}
/* .mx-cols used to pour two paragraphs into two newspaper columns, which left each one at half the
   container. They now stack, each at full width. */
.mx-cols{columns:auto}
.mx-cols>p{max-width:none!important}
.mx-cols>p:first-child{margin-top:0!important}

/* 5. Mobile menu: carries its own language switch (the header one sits under the overlay). */
.mnav-lang{display:block;margin-top:22px;width:100%;cursor:pointer;background:#fff;border:1px solid var(--line,#E5E0D4);border-radius:12px;
  padding:13px 16px;font:600 15px/1.2 'IBM Plex Sans Arabic','Inter',sans-serif;color:var(--ink,#1A1D24);text-align:center}
html[dir=rtl] .mnav-lang{font-family:'Inter',sans-serif}
.mnav-lang:focus-visible,.mnavBtn:focus-visible,.langbtn:focus-visible{outline:2px solid #3B82F6;outline-offset:2px}

/* 6. Legal pages (terms, privacy): sticky header in flow, same intro start and type scale. */
main.mx-legal{max-width:calc(var(--mx-max) + 2 * var(--mx-gutter))!important;margin-inline:auto;padding:calc(var(--page-top) - var(--mx-header)) var(--mx-gutter) 40px!important}
main.mx-legal>*{max-width:none}
.mx-legal .kicker{font-size:12px;line-height:1.2;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#926C1F;margin:0 0 22px!important}
html[dir=rtl] .mx-legal .kicker{letter-spacing:0}
.mx-legal h1{font-size:var(--fs-h1)!important;line-height:1.15!important;margin:0 0 20px!important}
html[dir=rtl] .mx-legal h1{line-height:1.35!important}
/* From 1100px the contents list moves beside the text and stays in view; the text column takes all
   the width the list leaves (no measure cap, no gap in between). Mirrored in RTL. */
@media (min-width:1100px){
  main.mx-legal{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);column-gap:clamp(40px,5vw,80px);align-items:start}
  main.mx-legal>*{grid-column:1}
  main.mx-legal>.toc{grid-column:2;grid-row:1 / span 4;position:sticky;top:calc(var(--mx-header) + 24px);margin:0!important;max-height:calc(100vh - var(--mx-header) - 48px);overflow:auto}
}

/* 7. Heading scale (BRAND.md §4a). One page title per page at --fs-h1; only the home headline is
   larger (--fs-hero). Every section heading, CTA band and statement sits on --fs-h2 / --fs-h3, so
   nothing on a page is larger than its title. Word-reveal spans (.w) are inline-blocks inside the
   heading and inherit its size. Decorative outline numerals (.ghost) are background art, not text. */
main h1{font-size:var(--fs-h1)!important;line-height:1.15!important}
main .hero h1{font-size:var(--fs-hero)!important;line-height:1.08!important}
html[dir=rtl] main h1{line-height:1.35!important}
main h2{font-size:var(--fs-h2)!important;line-height:1.25!important}
html[dir=rtl] main h2{line-height:1.45!important}
main h3:not(.toc h3){font-size:var(--fs-h3)!important;line-height:1.3!important}
html[dir=rtl] main h3:not(.toc h3){line-height:1.5!important}
.rule h3 span{font-size:1em!important}
/* Leads 16px, the home hero's sub-line included. */
.lead,.hero .sub{font-size:var(--fs-lead)!important}
/* Display statements and taglines step down to card-title size. */
.bigline{font-size:var(--fs-h3)!important;line-height:1.55!important;font-weight:600!important}
.pv-tag{font-size:var(--fs-h3)!important}
/* Figures: emphatic, never larger than the page title. */
.stat b,.stats b,.cr b,.step .n,.lnum{font-size:var(--fs-num)!important}
.marq span{font-size:var(--fs-h1)!important}
/* Interior intros: the visual beside the title is sized to the compact type, so the copy block and
   the picture read as one unit instead of a short title beside a tall empty column. */
@media (min-width:901px){
  .page-intro .lens,.page-intro .porb{max-width:400px!important}
  .page-intro .bloom{max-width:480px!important}
}

/* Mobile header order: lockup · language · menu button at the far end (mirrored in RTL). */
@media (max-width:1050px){
  .bar .grow{order:1}.bar .langbtn{order:2}.bar .mnavBtn{order:3;margin-inline-start:4px!important}
}
html[dir=rtl] .mnav a.on::after{content:''}