/* Wejhat Sedana v4.2: the v1 world (ink, gold, ivory, real photographs), ordered, on five pages. System: DESIGN.md.
   Logical properties only, so one sheet serves rtl and ltr. Nine colours, three Tajawal weights, one card, one ornament. */
:root{
  --ink:#0F0F0F; --ink-2:#1C1C1C;
  --page:#FAF8F4; --surface:#F4F0E8; --hair:#E5DFD3;
  --gold:#B78F46; --gold-hi:#D7AF68; --grey:#8A8A8A; --wa:#25D366;
  --hair-dark:rgba(229,223,211,.14);
  --veil:rgba(15,15,15,.42);
  --veil-deep:rgba(15,15,15,.78);
  --veil-clear:rgba(15,15,15,0);
  --veil-dir:90deg;
  --veil-hold:0%;
  --veil-end:60%;

  --max:1200px;
  --pad:clamp(1.25rem,4vw,3.5rem);
  --sec:clamp(4rem,2.5rem + 4.2vw,6.5rem);
  --head:clamp(2.5rem,2rem + 1.4vw,3.5rem);
  --gap:24px;
  --row-gap:clamp(3.5rem,2.75rem + 2.2vw,5rem);
  --nav:72px;
  --card-pad:28px;
  --peek:64px;

  --fs-display:clamp(2.375rem,1.5rem + 3.75vw,4.25rem);
  --fs-h1:clamp(2rem,1.4rem + 2.2vw,3.25rem);
  --fs-h2:clamp(1.75rem,1.25rem + 1.6vw,2.75rem);
  --fs-h2-row:clamp(1.5rem,1.1rem + 1.2vw,2.125rem);
  --fs-h3:clamp(1.25rem,1.1rem + .55vw,1.625rem);
  --fs-lead:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --fs-body:clamp(1rem,.95rem + .2vw,1.0625rem);
  --fs-label:.875rem;
  --fs-caption:.8125rem;

  --radius:6px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --card-bg:var(--surface);
  --card-line:var(--hair);
}
/* the directional veil starts at the side the text starts on */
[dir=rtl]{--veil-dir:270deg}
@media (max-width:1023px){:root{--gap:16px;--nav:64px}}
/* on phones the next slide shows only its padding, so the peek never cuts a word (fix cycle 1) */
@media (max-width:760px){:root{--card-pad:24px}}
/* single-column slides (below 900px): the next slide shows exactly its own padding, so the peek never cuts a word.
   visible sliver = track padding + peek - gap, so peek = card padding + gap - track padding (fix cycle 2) */
@media (max-width:899px){:root{--peek:calc(var(--card-pad) + var(--gap) - var(--pad))}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 16px)}
body{margin:0;background:var(--page);color:var(--ink);font-family:"Tajawal","Segoe UI",Tahoma,sans-serif;font-weight:400;font-size:var(--fs-body);line-height:1.8;letter-spacing:0;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
h1,h2,h3,h4{font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
ul,ol{list-style:none;padding:0}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit;text-decoration:none;transition:color .2s}
em{font-style:normal}
button{font:inherit;color:inherit}
.ltr{display:inline-block}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* the nav is solid, so the page starts under it instead of behind it: no photograph is hidden by the bar */
main{padding-block-start:var(--nav)}

/* focus: ink on light grounds, light gold on dark ones (both at least 3:1 against what surrounds them) */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dark :focus-visible,.nav :focus-visible{outline-color:var(--gold-hi)}
.wrap{max-width:calc(var(--max) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}

/* surfaces: at most three dark bands per page */
.sec{padding-block:var(--sec);background:var(--page)}
.tint{background:var(--surface);--card-bg:var(--page)}
.dark{background:var(--ink);color:var(--page);--card-bg:var(--ink-2);--card-line:var(--hair-dark)}

/* type */
.h1{font-size:var(--fs-h1);line-height:1.25}
.h2{font-size:var(--fs-h2);line-height:1.3}
.h2-row{font-size:var(--fs-h2-row);line-height:1.3;font-weight:700}
.h3{font-size:var(--fs-h3);line-height:1.4}
.lead{font-size:var(--fs-lead);line-height:1.7;max-width:52ch}
.label,.num,.role{font-size:var(--fs-label);line-height:1.4;font-weight:500}
.label{color:var(--ink)}
.dark .label{color:var(--gold-hi)}

/* section head: the 48x2 gold rule is the only ornament; under the label, or above the h2 when there is no label */
.head{max-width:680px;margin-bottom:var(--head)}
.label::after,.head-bare::before{content:"";display:block;width:48px;height:2px;background:var(--gold)}
.label::after{margin-top:12px}
.head-bare::before{margin-bottom:20px}
.head .label + .h2{margin-top:20px}
.head .note{margin-top:16px}
.sec-end{margin-top:40px}

/* buttons: gold fill, gold line; 6px, 48px tall */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:var(--radius);border:1px solid var(--gold);font:500 1rem/1 "Tajawal","Segoe UI",Tahoma,sans-serif;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-line{background:transparent;color:var(--ink)}
.dark .btn-line,.nav .btn-line{color:var(--page)}
.btn-sm{min-height:44px;padding:0 20px}
.btn:disabled{cursor:progress}
.nav .btn-line[aria-current]{border-color:var(--gold-hi);color:var(--gold-hi)}

/* nav: solid ink at all times (v4-system section 3). Measured: a transparent nav over the photographs fell to 1.6-3.8:1 */
.nav{position:fixed;inset:0 0 auto;z-index:30;height:var(--nav);color:var(--page);background:var(--ink);border-block-end:1px solid var(--hair-dark)}
.nav-in{height:100%;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:500;font-size:1.125rem;line-height:1;white-space:nowrap}
.brand img{width:36px;height:36px;flex:none}
.nav-links{margin-inline:auto}
.nav-links ul{display:flex;align-items:center;gap:28px}
.nav-links a,.lang{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-weight:500;font-size:.9375rem}
.nav-links a[aria-current]{color:var(--gold-hi);text-decoration:underline 2px;text-underline-offset:10px}
.nav-end{display:flex;align-items:center;gap:20px}
.menu{display:none}
.menu summary{display:flex;align-items:center;min-height:44px;min-width:44px;padding-inline:4px;font-weight:500;list-style:none;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:fixed;inset:var(--nav) 0 0;background:var(--ink);padding:24px var(--pad) 40px;overflow-y:auto;overscroll-behavior:contain;border-block-start:1px solid var(--hair-dark)}
.menu-panel ul{display:grid}
.menu-panel li a{display:flex;align-items:center;min-height:56px;font-size:1.25rem;font-weight:500;border-block-end:1px solid var(--hair-dark)}
.menu-panel li a[aria-current]{color:var(--gold-hi)}
.menu-open,.menu-open body{overflow:hidden}

/* photographs under text: one flat veil plus one directional veil from the text side (Atlas, O-005: the only gradient) */
.veil{position:relative;isolation:isolate;overflow:hidden}
.veil .bg,.veil .bg img{position:absolute;inset:0;width:100%;height:100%}
.veil .bg{z-index:-2}
.veil .bg img{object-fit:cover}
.veil::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--veil-dir),var(--veil-deep) var(--veil-hold),var(--veil-clear) var(--veil-end)),var(--veil)}

/* home hero */
.hero{display:grid;min-height:calc(min(88svh,800px) - var(--nav))}
.hero .bg img{object-position:center 40%}
.hero-in{width:100%;display:grid;align-content:center;justify-items:start;padding-block:48px 64px}
.hero-in > *{max-width:640px}
.hero .label{color:var(--hair)}
.hero .label::after{display:none}
.hero h1{margin-top:16px;font-size:var(--fs-display);line-height:1.25;max-width:14ch}
.hero h1:lang(en){max-width:19ch}
.hero h1 em{color:var(--gold-hi)}
.hero .lead{margin-top:20px;max-width:46ch;color:var(--page)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* inner page banner */
.banner{display:grid;min-height:clamp(22rem,46vh,29rem)}
.banner .bg img{object-position:center 45%}
/* the team photo is anchored at the top so the standing row's heads stay whole */
.banner-about .bg img{object-position:center top}
.banner-in{width:100%;display:grid;align-content:end;justify-items:start;padding-block:40px 56px}
.banner-in > *{max-width:720px}
.banner .h1{margin-top:16px}
.banner .lead{margin-top:12px;color:var(--page)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;font-size:var(--fs-label);font-weight:500;color:var(--hair)}
.crumbs li + li::before{content:"/";padding-inline:10px;color:var(--grey)}
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.crumbs [aria-current]{color:var(--gold-hi)}

/* image / text rows: the home about excerpt and the six pillars */
.row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.rows > .row{align-items:start}
.rows > .row + .row{margin-top:var(--row-gap)}
.rows > .row:nth-child(even):not(.row-wide) .row-media{order:2}
.rows .row-text{padding-block-start:clamp(0px,1.6vw,24px)}
.row-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:var(--surface)}
/* v4.22: the introduction film in the home excerpt. The cover is a button over the poster; site.js unhides it */
.film{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--ink)}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ink)}
/* the play mark sits with its label at the bottom left in both languages: there it lies on the staff member's dark vest,
   and the water handed over and the pilgrim (the cover's subject) stay clear. The label keeps its own direction */
.film-play{position:absolute;inset:0;display:flex;align-items:flex-end;direction:ltr;padding:22px 24px;border:0;margin:0;font:inherit;text-align:start;color:var(--page);cursor:pointer;
  background:linear-gradient(to top,rgba(15,15,15,.74) 0%,rgba(15,15,15,.2) 38%,rgba(15,15,15,0) 60%)}
.film-play[hidden]{display:none}
.film-icon{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;padding-left:3px;
  background:var(--gold);color:var(--ink);box-shadow:0 0 0 7px rgba(183,143,70,.32),0 10px 28px rgba(15,15,15,.4);
  transition:transform .25s var(--ease),background-color .25s var(--ease)}
.film-icon svg{width:26px;height:26px}
.film-play:hover .film-icon{transform:scale(1.06);background:var(--gold-hi)}
.film-play:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-6px}
.film-bar{display:flex;align-items:center;gap:16px}
.film-cap{display:grid;gap:2px}
.film-label{font-weight:700;font-size:var(--fs-body);line-height:1.4;unicode-bidi:plaintext;text-shadow:0 1px 8px rgba(15,15,15,.5)}
.film-meta{font-size:var(--fs-caption);color:var(--gold-hi);unicode-bidi:plaintext;text-shadow:0 1px 6px rgba(15,15,15,.6)}
.row-text > p{max-width:62ch}
.row-text > * + *{margin-top:16px}
.row-text > .head{margin-bottom:24px}
.row-text > .head + *{margin-top:0}
.row-text > .btn{margin-top:28px}
.ordinal{font-size:var(--fs-h3);line-height:1;font-weight:500;color:var(--gold)}
.row-text > .ordinal + .h2-row{margin-top:14px}
.page-intro{margin-bottom:var(--row-gap)}
/* services row 02 breaks the rhythm: one 21:9 photograph across the container, the text below in two columns */
.rows > .row-wide{grid-template-columns:minmax(0,1fr);gap:32px}
.rows > .row-wide .row-media img{aspect-ratio:21/9}
.rows .row-wide .row-text{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 64px;align-items:start;padding-block-start:0}
.rows .row-wide .row-text > * + *{margin-top:0}
.row-lede > * + *{margin-top:16px}
.row-lede > .ordinal + .h2-row{margin-top:14px}
.row-lede > p{max-width:62ch}
/* the points start level with the pillar name, not with the ordinal above it */
.rows .row-wide .points{padding-block-start:calc(var(--fs-h3) + 14px)}
.points{padding-inline-start:1.25em;list-style:disc}
.points li::marker{color:var(--gold)}
.points li + li{margin-top:8px}

/* the one card: surface, 1px line, 6px, one padding (28, 24 on phones); only links react to hover */
.card{background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--radius);padding:var(--card-pad);transition:border-color .2s}

/* home: the six pillars as photo cards, no numbers (numbering belongs to the journey) */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.pillars > li{display:flex}
.pillar{display:flex;flex-direction:column;width:100%;overflow:hidden}
.pillar-media{margin:calc(-1 * var(--card-pad));margin-block-end:0}
.pillar-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.pillar-text{padding-block-start:24px}
.pillar .h3{font-size:1.25rem}
.pillar-text p{margin-top:8px}

/* home: the journey as one row of six stages on a hairline */
.steps{--steps-gap:24px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--steps-gap)}
.steps li{position:relative;padding-block-start:24px}
.steps li::before{content:"";position:absolute;z-index:1;inset-block-start:-4px;inset-inline-start:0;width:9px;height:9px;border-radius:50%;background:var(--gold)}
/* the line joins one marker to the next, so it ends at 06 instead of running on to the edge */
.steps li:not(:last-child)::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:calc(100% + var(--steps-gap));height:1px;background:var(--hair)}
.step-title{margin-top:6px;font-size:1.125rem;line-height:1.45}

/* leadership carousel: native scroll-snap; site.js adds the buttons, dots and keys.
   Slides are as wide as the track's content box; the inline-end padding is one peek wider than the start padding,
   so the next slide shows at the edge and the last slide can still reach the start (every slide has a real snap position). */
.lead-sec .head{margin-bottom:40px}
.car-track{display:flex;align-items:stretch;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad) calc(var(--pad) + var(--peek));scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline-offset:-2px}
.car-card{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.car-media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
/* a pending slide is as tall as the real one and fills it with its title, the gold rule and one badge: no empty photo frame */
.car-card.is-pending{grid-template-columns:minmax(0,1fr);place-items:center;text-align:center}
.pending-role{font-size:var(--fs-h2);line-height:1.3}
.pending-role::after{content:"";display:block;width:48px;height:2px;margin:20px auto 0;background:var(--gold)}
.pending .badge{margin-top:20px}
.car-body .role{margin-top:4px;color:var(--grey)}
.letter{margin-top:16px;max-width:62ch}
.letter p{color:var(--page)}
.letter p + p{margin-top:14px}
.letter-more > p{margin-top:14px}
.letter-more > summary{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-weight:500;color:var(--gold-hi);text-decoration:underline;text-underline-offset:6px;list-style:none;cursor:pointer}
.letter-more > summary::-webkit-details-marker{display:none}
/* from 900px the about card shows the whole message, so the fold's toggle is not needed */
@media (min-width:900px){.letter-more > summary{display:none}}
.more{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-weight:500;color:var(--gold-hi);text-decoration:underline;text-underline-offset:6px}
.badge{display:inline-flex;align-items:center;min-height:30px;margin-top:14px;padding:0 12px;border:1px solid var(--hair-dark);border-radius:var(--radius);font-size:var(--fs-label);font-weight:500;line-height:1;color:var(--hair)}
.car-ctrl{display:none;align-items:center;justify-content:space-between;gap:16px;margin-top:24px}
.js .car-ctrl{display:flex}
.car-dots{display:flex}
.car-dot{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.car-dot::before{content:"";width:8px;height:8px;border-radius:4px;background:var(--grey)}
.car-dot[aria-current=true]::before{width:24px;background:var(--gold-hi)}
.car-btns{display:flex;gap:12px}
/* one remaining member (leadership.show_pending false): a single message, large photo and quote, no controls */
.leader-solo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.solo-body .letter{margin-top:0}
.solo-body .letter p{font-size:var(--fs-lead);line-height:1.7}
.solo-name{margin-top:24px;font-weight:700}
.solo-body .role{margin-top:12px;color:var(--gold-hi)}
.car-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--gold);border-radius:var(--radius);background:transparent;color:var(--page);cursor:pointer;transition:background-color .2s,color .2s,opacity .2s}
.car-btn[aria-disabled=true]{opacity:.4;cursor:default}
/* the chevron is drawn pointing to inline-end in ltr: mirror it in rtl, and turn it around for "previous" */
[dir=rtl] .car-btn svg,.car-prev svg{transform:scaleX(-1)}
[dir=rtl] .car-prev svg{transform:none}

/* about: statement, then vision / mission / values without boxes */
.intro .head{max-width:900px;margin-bottom:24px}
/* v4.16: room above the line for the Arabic tanween and harakat in the about heading */
.intro .h2{line-height:1.4}
.intro > p{max-width:62ch}
.vm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4.5rem)}
.stmt .lead{margin-top:20px}
.values{margin-top:clamp(3.5rem,6vw,5.5rem)}
/* v4.14: the client's five values in one row; v4.15: a line under each */
.values-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(1rem,3vw,2.5rem);margin-top:28px}
.values-grid li{padding-block:20px 28px;border-block-start:1px solid var(--hair)}
.values-grid h3{font-size:1.125rem;line-height:1.5;font-weight:500}
.values-grid p{margin-top:6px;line-height:1.7}

/* services (v4.14, was about): departments, folded rows, no cards; on phones each group folds too */
.divs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px var(--gap)}
.div-group > summary{display:block;padding-bottom:12px;border-block-end:1px solid var(--hair);list-style:none;cursor:default}
.div-group > summary::-webkit-details-marker{display:none}
.div-group .h3{font-size:1.125rem}
.dept{border-block-end:1px solid var(--hair)}
.dept summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding-block:8px;font-weight:500;line-height:1.5;list-style:none;cursor:pointer}
.dept summary::-webkit-details-marker{display:none}
.dept summary::after,.div-group > summary::after{content:"";flex:none;width:7px;height:7px;margin-block-end:4px;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.div-group > summary::after{display:none}
.dept[open] summary::after,.div-group[open] > summary::after{transform:rotate(-135deg);margin-block:4px 0}
.dept-body{padding-block:4px 20px;font-size:.9375rem;line-height:1.75}
.dept-body .points{margin-top:12px}

/* journey page: a vertical spine, 2px line and 12px dots in ink (light gold if the page ever sits on ink) */
.timeline{max-width:1040px}
.tl-item{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:12px 56px;padding-inline-start:48px;padding-block-end:56px}
.tl-item:last-child{padding-block-end:0}
.tl-item{--spine:var(--ink)}
.dark .tl-item{--spine:var(--gold-hi)}
.tl-item::before{content:"";position:absolute;z-index:1;inset-block-start:7px;inset-inline-start:0;width:12px;height:12px;border-radius:50%;background:var(--spine)}
.tl-item:not(:last-child)::after{content:"";position:absolute;inset-block:7px -7px;inset-inline-start:5px;width:2px;background:var(--spine)}
.tl-head .h2-row{margin-top:6px}
.tl-body .short{font-size:var(--fs-lead);font-weight:500;line-height:1.6}
.tl-body p + p{margin-top:12px;max-width:62ch}

/* contact band before the footer */
.cta{padding-block-end:clamp(3rem,2rem + 3vw,4.5rem)}
.cta-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.cta .head{margin-bottom:0}

/* contact page: light form, channels beside it */
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.form{display:grid;gap:20px}
.form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--gap)}
.field label{display:block;margin-bottom:8px;font-size:var(--fs-label);font-weight:500}
.field input,.field select,.field textarea{display:block;width:100%;min-height:48px;padding:0 16px;font:inherit;color:var(--ink);background:var(--page);border:1px solid var(--grey);border-radius:var(--radius);-webkit-appearance:none;appearance:none;transition:border-color .2s}
.field textarea{min-height:132px;padding-block:12px;resize:vertical}
.field select{cursor:pointer;padding-inline-end:40px}
.select{position:relative;display:block}
.select::after{content:"";position:absolute;inset-inline-end:16px;inset-block-start:50%;margin-block-start:-4px;width:12px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F0F0F' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat;pointer-events:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.trap{display:none}
.form-end{display:grid;justify-items:start;gap:12px;margin-top:4px}
.form-msg:empty{display:none}
.form-wa{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.form-wa[hidden]{display:none}
.channels{display:grid;gap:32px;justify-items:start}
.channels dl{display:grid;gap:20px}
.channels dt{font-size:var(--fs-label);font-weight:500}
.channels dd a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-h3);font-weight:500}

/* footer: brand, tagline and a short contact line; the pages and the language in one column; the legal line */
.foot{padding-block:0 24px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;border-block-start:1px solid var(--hair-dark);padding-block-start:48px}
.foot-brand .brand{font-size:1.25rem}
.foot-brand p{margin-top:16px;max-width:40ch;color:var(--hair)}
.foot-list{display:grid;grid-template-columns:minmax(0,1fr)}
.foot-brand .foot-contact{display:grid;gap:8px;margin-top:24px}
.foot-contact a{display:flex;align-items:center;gap:14px;min-height:48px;color:var(--page)}
.foot-contact .ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--hair-dark);border-radius:50%;color:var(--gold-hi)}
.foot-contact .ico svg{width:18px;height:18px}
.fc{display:grid;justify-items:start;line-height:1.35}
.fc-label{font-size:var(--fs-label);color:var(--grey)}
.foot-contact .ltr{font-weight:500;color:var(--page)}
.foot-list a{display:flex;align-items:center;min-height:44px;color:var(--hair)}
.foot-list a[aria-current]{color:var(--gold-hi)}
.foot-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:40px;padding-block-start:16px;border-block-start:1px solid var(--hair-dark);font-size:var(--fs-caption);color:var(--grey)}

/* WhatsApp: the only green, at inline-end in both languages (bottom-left in Arabic) so it never covers the start of a line; ink glyph (10:1 on the green) */
.wa-fab{position:fixed;inset-block-end:max(20px,env(safe-area-inset-bottom));inset-inline-end:20px;z-index:20;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:2px solid transparent;background:var(--wa);color:var(--ink)}
.wa-fab:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--page)}

@media (hover:hover){
  .nav a:not(.btn):hover,.foot a:hover,.crumbs a:hover{color:var(--gold-hi)}
  .channels a:hover,.form-wa:hover{color:var(--gold)}
  .btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
  .btn-line:hover{background:var(--gold);color:var(--ink)}
  a.card:hover{border-color:var(--gold)}
  .car-btn:not([aria-disabled=true]):hover{background:var(--gold);color:var(--ink)}
}

/* one entrance, once: visible by default; hidden only after site.js has started and motion is welcome */
@media (prefers-reduced-motion:no-preference){
  .car-track{scroll-behavior:smooth}
  .js [data-reveal]{transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js [data-reveal]:not(.is-in){opacity:0;transform:translateY(16px)}
}

@media (max-width:1100px){
  .nav-links ul{gap:20px}
  .nav-in{gap:24px}
  .divs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .nav-links,.nav-end .lang{display:none}
  .nav-end{margin-inline-start:auto}
  .menu{display:block}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the home journey becomes a vertical numbered list on one spine */
  .steps{grid-template-columns:minmax(0,1fr);gap:0}
  .steps li{display:flex;align-items:baseline;gap:16px;padding-block:0 20px;padding-inline-start:28px}
  .steps li:last-child{padding-block-end:0}
  .steps li::before{inset-block-start:9px}
  .steps li:not(:last-child)::after{inset-block:18px -9px;width:1px;height:auto;inset-inline-start:4px}
  .step-title{margin-top:0}
}
@media (max-width:899px){
  .row,.contact-grid,.vm{grid-template-columns:minmax(0,1fr);gap:20px}
  .rows > .row:nth-child(even):not(.row-wide) .row-media{order:0}
  .rows .row-text{padding-block-start:0}
  .row-media img{aspect-ratio:16/10}
  .vm{gap:40px}
  .contact-grid{gap:48px}
  .car-card{grid-template-columns:minmax(0,1fr);gap:20px}
  .leader-solo{grid-template-columns:minmax(0,1fr);gap:24px}
  .rows .row-wide .row-text{grid-template-columns:minmax(0,1fr);gap:12px}
  .rows .row-wide .points{padding-block-start:0}
  .rows > .row-wide{gap:20px}
  .tl-item{grid-template-columns:minmax(0,1fr);gap:8px;padding-inline-start:36px;padding-block-end:40px}
  .page-intro{margin-bottom:40px}
}
@media (max-width:760px){
  body{line-height:1.7}
  .sec{padding-block:56px}
  .head{margin-bottom:32px}
  .lead-sec .head{margin-bottom:28px}
  .nav-end{display:none}
  .menu{margin-inline-start:auto}
  .nav-in{gap:16px}
  /* on phones the text spans the full width, so its side is the bottom: the deep veil holds under the text block
     and fades out above it, leaving the sky and the clock tower clear (measured: see the O-005 report) */
  .veil{--veil-dir:0deg;--veil-hold:75%;--veil-end:100%}
  .hero{min-height:calc(min(100svh,640px) - var(--nav))}
  .hero-in{align-content:end;padding-block:32px 40px}
  .banner{min-height:18rem}
  .banner-in{padding-block:28px 36px}
  .row-text > * + *{margin-top:12px}
  .row-text > .btn{margin-top:20px}
  .film-play{padding:14px 16px}
  .film-bar{gap:10px}
  /* at phone width the label would cover the water handed over: the play mark and the length carry it, the label stays for screen readers */
  .film-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .film-icon{width:48px;height:48px;box-shadow:0 0 0 5px rgba(183,143,70,.32),0 8px 20px rgba(15,15,15,.4)}
  .film-icon svg{width:22px;height:22px}
  .points li + li{margin-top:4px}
  .letter{margin-top:12px}
  .letter p + p{margin-top:12px}
  .sec-end{margin-top:28px}
  .values-grid li{padding-block:16px 20px}
  .channels{gap:24px}
  .channels dl{gap:12px}
  .channels dd a{font-size:var(--fs-lead)}
  .foot{padding-block-end:96px}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:28px;padding-block-start:40px}
  .foot-meta{margin-top:24px}
  .cta-in{align-items:flex-start;flex-direction:column}
}
@media (max-width:599px){
  /* pillars: two columns, the photo on top at 16:10 (the side strip cut the subject) */
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pillar-text{padding-block-start:16px}
  .pillar .h3{font-size:1rem}
  .pillar-text p{margin-top:4px;font-size:.875rem;line-height:1.6}
  .values-grid{grid-template-columns:minmax(0,1fr)}
  .divs{grid-template-columns:minmax(0,1fr);gap:0}
  .js .div-group > summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding-block:8px;cursor:pointer}
  .js .div-group > summary::after{display:block}
  .div-group[open] > ul{padding-block-end:12px}
  .form .two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:479px){
  .actions .btn{padding:0 20px}
}
/* narrow phones: the English headline runs to more lines, lifting the eyebrow above the held veil; hold it higher (fix cycle 2) */
@media (max-width:420px){
  .hero{--veil-hold:90%}
}
@media (max-width:380px){
  .brand{font-size:1rem;gap:8px}
  .brand img{width:32px;height:32px}
}

/* v4.3: home about excerpt without a photo (heading on one side, paragraph and button on the other) */
.excerpt-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.excerpt-in > .head{margin-bottom:0}
.excerpt-body > p{max-width:62ch}
.excerpt-body > .btn{margin-top:28px}
/* v4.21: the season gallery in square tiles (most of the client's photographs are portrait) */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);background:var(--surface)}
@media (hover:hover){.foot-contact a:hover .ltr{color:var(--gold-hi)}}
@media (max-width:899px){
  .excerpt-in{grid-template-columns:minmax(0,1fr);gap:20px}
  .excerpt-body > .btn{margin-top:20px}
}
@media (max-width:1023px){
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:599px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* v4.4: leadership card. The portrait stands on the card's lower edge with the head rising above it (start side),
   the role as a tag at its foot; the message on the other side under a gold quote mark. */
.car-track{padding-block-start:56px}
.lead-sec .head{margin-bottom:8px}
.leader-solo{margin-block-start:56px}
.car-card,.car-card.is-pending,.leader-solo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;align-items:stretch;padding:0;text-align:start;place-items:stretch}
.portrait{position:relative;align-self:end;margin-block-start:-56px;display:flex;justify-content:center;align-items:flex-end}
.portrait picture{display:block;width:100%}
.portrait img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;object-position:bottom center}
.portrait.is-empty{color:var(--hair-dark);padding-inline:12%}
.portrait.is-empty .silhouette{display:block;width:100%;max-width:300px;height:auto;margin-inline:auto}
.portrait-tag{position:absolute;inset-inline:20px;inset-block-end:20px;display:flex;justify-content:center}
.portrait-tag h3{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--ink);border:1px solid var(--gold);border-radius:var(--radius);font-size:1.0625rem;font-weight:700;line-height:1.3;color:var(--gold-hi);text-align:center}
.car-card .car-body{align-self:center;padding:var(--card-pad) calc(var(--card-pad) + 12px);border-inline-start:1px solid var(--hair-dark)}
.qmark{display:block;height:44px;font-size:4.5rem;line-height:1;color:var(--gold);font-weight:700}
.car-card .letter{margin-top:8px}
.car-card .letter p{font-size:var(--fs-body);line-height:1.85}
.car-card.is-pending .car-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.car-card.is-pending .qmark{color:var(--hair-dark)}
.car-card.is-pending .badge{margin-top:16px}
.leader-solo .car-body .letter p{font-size:var(--fs-lead);line-height:1.75}
@media (max-width:899px){
  .car-card,.car-card.is-pending,.leader-solo{grid-template-columns:minmax(0,1fr)}
  .portrait{margin-block-start:-40px;min-height:0}
  .portrait img{max-height:380px;width:auto;margin-inline:auto}
  .portrait.is-empty .silhouette{max-width:200px}
  .car-card .car-body{border-inline-start:0;border-block-start:1px solid var(--hair-dark);padding:var(--card-pad)}
  .car-track{padding-block-start:48px}
}

/* v4.5: the client's 2026 logo, reversed for the dark footer (it carries the tagline itself) */
.foot-logo{display:inline-block}
.foot-logo img{display:block;width:200px;height:auto}
.brand img{height:36px;width:auto}
@media (max-width:760px){.foot-logo img{width:170px}}

/* v4.6: the tag at the leader's feet carries the role (gold) and the name (ivory, larger) */
.portrait-tag h3{flex-direction:column;align-items:center;gap:2px;padding:10px 20px;min-height:0}
.portrait-tag .tag-role{font-size:var(--fs-label);font-weight:500;color:var(--gold-hi)}
.portrait-tag .tag-name{font-size:1.125rem;font-weight:700;color:var(--page)}
@media (max-width:760px){.portrait-tag .tag-name{font-size:1rem}}

/* v4.9.2: on one column every card stretches to the longest message, and the grid handed that spare height to the
   portrait row, so each photo sat at a different depth (440 / 50 / -39px, seen on Ageel's phone). Packing the rows at the
   top lifts every head the same 40px above its card; the spare height falls below the message instead. */
@media (max-width:899px){.car-card,.car-card.is-pending{align-content:start}}

/* v4.9.3: the client asked for the four group headings in the 16-departments section to stand out in their own colour.
   The brand gold reads at 2.8:1 on the light page, so the headings take a deeper shade of it (5.1:1). */
:root{--gold-deep:#86652B}
.div-group .h3{color:var(--gold-deep)}

/* v4.11: between 900 and 1199px the two columns are too narrow for the portrait: at 923px it drew 419px tall beside a
   1043px card, some 620px of empty column above every head. Up to 1199px the card stacks as on phones, portrait on top,
   with the message in a centred column of readable width under it. */
@media (min-width:900px) and (max-width:1199px){
  .car-card,.car-card.is-pending,.leader-solo{grid-template-columns:minmax(0,1fr);align-content:start}
  .portrait{margin-block-start:-40px;min-height:0}
  .portrait img{max-height:420px;width:auto;margin-inline:auto}
  .car-card .car-body{border-inline-start:0;border-block-start:1px solid var(--hair-dark);padding:var(--card-pad) max(var(--card-pad), calc((100% - 720px) / 2))}
  .car-track{padding-block-start:48px}
}

/* v4.10: wherever the portrait heads the card (below 1200px), each card keeps its own height (no empty block under a
   shorter message) and site.js sizes the track to the slide in view; the photo still sits at the same place. */
@media (max-width:1199px){
  .car-track{align-items:flex-start;overflow-y:hidden}
  .car-track.fit{transition:height .3s ease}
}
@media (prefers-reduced-motion:reduce){.car-track.fit,.film-icon{transition:none}.film-play:hover .film-icon{transform:none}}

/* v4.11: 1200px and up. The portrait stands on the card's lower edge, so the cards share one height (the messages run
   131 to 172 words) and every photo stands at the same place. The cutouts are all 960px tall but of different widths,
   so width:100% drew them at three sizes; each is now drawn in the box of the widest (--portrait-ratio, from build.py)
   at that box's full height, so heads and feet line up from slide to slide. */
@media (min-width:1200px){
  .portrait picture{position:relative;aspect-ratio:var(--portrait-ratio, 3 / 4);max-height:620px}
  .portrait img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;object-position:bottom center}
}

/* v4.13: partners strip. Still by default: the four logos in a centred row with their copies hidden. Only where motion
   is welcome does the track show every copy and slide by half its length, so the loop has no seam; it travels toward
   the end of the line in either language and stops under the pointer (a tap on phones). --h gives each logo the same
   area rather than the same height, so the wide flynas lockup doesn't outweigh the stacked ones. */
.partners .head{margin-bottom:40px}
.marquee{--logo-gap:72px}
.marquee-set{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px var(--logo-gap);margin:0;padding:0;list-style:none}
.marquee [aria-hidden=true]{display:none}
.marquee img{display:block;width:auto;max-width:none;height:var(--h)}
@media (max-width:760px){.marquee{--logo-gap:44px}.marquee img{height:calc(var(--h) * .72)}}
@media (prefers-reduced-motion:no-preference){
  .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee-track{display:flex;width:max-content;animation:marquee 60s linear infinite}
  .marquee-set{flex-wrap:nowrap;padding-inline-end:var(--logo-gap)}
  .marquee .marquee-set[aria-hidden=true]{display:flex}
  .marquee li[aria-hidden=true]{display:block}
  .marquee:hover .marquee-track{animation-play-state:paused}
  [dir=rtl] .marquee-track{animation-name:marquee-rtl}
}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes marquee-rtl{to{transform:translateX(50%)}}