/* ==========================================================================
   Athman Holding — site stylesheet
   One stylesheet serves English (LTR) and Arabic (RTL) via logical properties.
   Fonts are the KIH pair, self-hosted: Raleway (Latin) and Almarai (Arabic).
   Colour is taken from the logo: navy #163144 and rose #DBA591. The cool mist
   ground is sampled from the blue grade of the profile photography.
   ========================================================================== */

@font-face{font-family:"Raleway";src:url("../fonts/raleway-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Almarai";src:url("../fonts/almarai-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Almarai";src:url("../fonts/almarai-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Almarai";src:url("../fonts/almarai-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --navy:#163144;
  --deep:#0E2130;
  --rose:#DBA591;          /* decorative + text on navy only (6.3:1 on navy) */
  --rose-ink:#9A5F48;      /* rose that holds 5.1:1 on white */
  --ice:#AFC1D6;           /* secondary text on navy, 6.4:1 */
  --paper:#FFFFFF;
  --mist:#EEF2F5;
  --steel:#566775;         /* secondary text on white, 5.8:1 */
  --line:rgba(22,49,68,.12);
  --line-d:rgba(255,255,255,.14);

  --sans:"Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic:"Almarai", system-ui, sans-serif;
  --font:var(--sans);

  /* Weights by role. Arabic remaps these (Almarai ships 300/400/700). */
  --w-display:200;
  --w-h:250;
  --w-lead:350;
  --w-ui:500;
  --w-strong:550;
  --ls-display:-.04em;
  --ls-h:-.03em;
  --ls-ui:.01em;
  --lh-body:1.7;
  --lh-display:1;

  --t-hero:  clamp(2.75rem, 1.4rem + 5.4vw, 6.75rem);
  --t-page:  clamp(2.6rem, 1.4rem + 4.4vw, 5.75rem);
  --t-h2:    clamp(2.25rem, 1.5rem + 2.9vw, 4.5rem);
  --t-state: clamp(1.6rem, 1.05rem + 2.1vw, 3.1rem);
  --t-h3:    clamp(1.3rem, 1.12rem + .7vw, 1.75rem);
  --t-lead:  clamp(1.075rem, 1rem + .3vw, 1.25rem);
  --t-body:  1.0625rem;
  --t-sm:    .9rem;
  --t-xs:    .8rem;

  --ease:   cubic-bezier(.16,1,.3,1);     /* long, heavy settle */
  --spring: cubic-bezier(.34,1.5,.64,1);  /* slight overshoot */
  --snap:   cubic-bezier(.32,.72,0,1);

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --wrap: 1400px;
  --sy: clamp(6rem, 4rem + 9vw, 12rem);
  --mast: 5.25rem;
}

/* Arabic: same system, Almarai, one weight step heavier, never tracked. */
[dir="rtl"]{
  --font:var(--arabic);
  --w-display:300;
  --w-h:300;
  --w-lead:300;
  --w-ui:700;
  --w-strong:700;
  --ls-display:0;
  --ls-h:0;
  --ls-ui:0;
  --lh-body:1.95;
  --lh-display:1.3;
}

/* ---------------------------------------------------------------- base --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--mast)}
body{margin:0;background:var(--paper);color:var(--navy);font-family:var(--font);
  font-size:var(--t-body);line-height:var(--lh-body);font-weight:400;
  font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p,h1,h2,h3,dl,dd,figure,blockquote,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
[lang="ar"]{font-family:var(--arabic);letter-spacing:0}
[lang="en"]{font-family:var(--sans)}
:focus-visible{outline:2px solid var(--rose);outline-offset:4px;border-radius:4px}
::selection{background:var(--rose);color:var(--navy)}

.wrap{width:min(100% - var(--gutter)*2, var(--wrap));margin-inline:auto}
.section{padding-block:var(--sy)}
.skip{position:absolute;inset-inline-start:-9999px;top:1rem;z-index:300;background:var(--navy);color:#fff;padding:.75rem 1.25rem;border-radius:99px}
.skip:focus{inset-inline-start:1rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Film grain — one fixed layer, never on scrolling content. */
body::after{content:"";position:fixed;inset:0;z-index:250;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ------------------------------------------------------------ type kit --- */
/* The section marker is the rose dot of the ث in the logo — not a label
   style, a piece of the mark. Sentence case, quiet, one per section. */
.kicker{display:flex;align-items:center;gap:.8rem;font-size:var(--t-sm);font-weight:var(--w-ui);
  color:var(--steel);letter-spacing:var(--ls-ui);margin-bottom:2rem}
.kicker--light{color:var(--ice)}
.dot{width:.72rem;height:.9rem;flex:none}

.h2{font-size:var(--t-h2);font-weight:var(--w-h);line-height:calc(var(--lh-display) + .04);letter-spacing:var(--ls-h);color:var(--navy)}
.lead{font-size:var(--t-lead);font-weight:var(--w-lead);line-height:1.6;color:var(--steel);max-width:36ch}
[dir="rtl"] .lead{line-height:1.9}

/* Section head: title on the start side, lead on the end side. */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gutter);align-items:end;
  margin-bottom:clamp(3.5rem,7vw,6rem)}
.sec-head .lead{justify-self:end}

.link{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--t-sm);font-weight:var(--w-ui);
  text-decoration:none;padding-block:.35rem;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .6s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% 100%}
[dir="rtl"] .link{background-position:100% 100%}
[dir="rtl"] .link:hover{background-position:0 100%}
.link--light{color:#fff}

/* Pill button with the arrow held in its own island. */
.btn{--bg:var(--navy);--fg:#fff;--ib:rgba(255,255,255,.12);
  display:inline-flex;align-items:center;gap:1rem;padding-block:.45rem;padding-inline:1.5rem .45rem;border-radius:99px;
  background:var(--bg);color:var(--fg);text-decoration:none;font-size:var(--t-sm);font-weight:var(--w-strong);letter-spacing:.005em;
  transition:transform .5s var(--snap), background-color .5s var(--snap), color .5s var(--snap)}
.btn:active{transform:scale(.975)}
.btn__icon{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;background:var(--ib);
  transition:transform .6s var(--snap), background-color .5s var(--snap)}
.btn__icon svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .btn__icon svg{transform:scaleX(-1)}
.btn:hover .btn__icon{transform:translate(3px,-2px) scale(1.06)}
[dir="rtl"] .btn:hover .btn__icon{transform:translate(-3px,-2px) scale(1.06)}
.btn--light{--bg:#fff;--fg:var(--navy);--ib:var(--mist)}
.btn--light:hover{--ib:var(--rose)}
.btn--ghost{--bg:rgba(255,255,255,.06);--fg:#fff;--ib:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--line-d)}
.btn--ghost:hover{--bg:rgba(255,255,255,.12);--ib:var(--rose)}
.btn--ghost:hover .btn__icon{color:var(--navy)}

/* ---------------------------------------------------------- masthead --- */
/* A regular header, as on the KIH site: white, sticky, one hairline. */
.masthead{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;gap:2rem;min-height:var(--mast)}
.brand{flex:none;display:block}
.brand img{height:clamp(2.5rem,4.2vw,3.1rem);width:auto}
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.5rem)}
.nav a{font-size:.95rem;font-weight:var(--w-ui);color:var(--navy);text-decoration:none;padding-block:.45rem;
  border-bottom:2px solid transparent;transition:border-color .35s var(--snap), color .35s var(--snap)}
.nav a:hover{border-bottom-color:var(--rose)}
.nav a[aria-current="true"],.nav a[aria-current="page"]{border-bottom-color:var(--navy)}
.nav__lang{font-weight:700 !important;color:var(--rose-ink) !important;
  padding-inline-start:clamp(1.1rem,2.4vw,2.5rem);border-inline-start:1px solid var(--line);border-bottom:0 !important}
.nav__lang:hover{color:var(--navy) !important}
.burger{margin-inline-start:auto;display:none;background:none;border:1px solid var(--line);border-radius:2px;
  padding:.55rem .85rem;font:inherit;font-size:.9rem;font-weight:var(--w-ui);color:var(--navy);cursor:pointer}

/* ------------------------------------------------------------- hero ----- */
.hero{position:relative;min-height:calc(100svh - var(--mast));display:grid;grid-template-rows:1fr auto;color:#fff;overflow:hidden;background:var(--deep)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  transform:scale(1.08);transition:transform 2.8s var(--ease)}
.is-ready .hero__media img{transform:scale(1)}
.hero__veil{position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(14,33,48,.92) 0%, rgba(14,33,48,.72) 38%, rgba(14,33,48,.25) 70%, rgba(14,33,48,.35) 100%),
    linear-gradient(0deg, rgba(14,33,48,.85) 0%, rgba(14,33,48,0) 35%)}
[dir="rtl"] .hero__veil{
  background:
    linear-gradient(270deg, rgba(14,33,48,.92) 0%, rgba(14,33,48,.72) 38%, rgba(14,33,48,.25) 70%, rgba(14,33,48,.35) 100%),
    linear-gradient(0deg, rgba(14,33,48,.85) 0%, rgba(14,33,48,0) 35%)}
.hero__inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;
  gap:var(--gutter);padding-top:clamp(3.5rem,7vw,6rem);padding-bottom:clamp(3rem,6vw,5.5rem)}
.hero__copy{max-width:52rem}
.hero__title{font-size:var(--t-hero);font-weight:var(--w-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);margin-bottom:2.25rem}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero__title .ln>span{display:block;transform:translateY(105%);transition:transform 1.4s var(--ease)}
.hero__title .ln:nth-child(2)>span{transition-delay:.12s}
.is-ready .hero__title .ln>span{transform:none}
.hero__lead{max-width:44ch;font-size:var(--t-lead);font-weight:var(--w-lead);line-height:1.6;color:rgba(255,255,255,.82);margin-bottom:2.75rem;
  opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease) .45s, transform 1.2s var(--ease) .45s}
[dir="rtl"] .hero__lead{line-height:1.9}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;
  opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease) .6s, transform 1.2s var(--ease) .6s}
.is-ready .hero__lead,.is-ready .hero__cta{opacity:1;transform:none}

/* The mark, as a translucent watermark bled off the end edge (the same
   treatment as behind the chairman's quote). On load the letterform settles,
   then the three dots of the ث drop in. */
.hero__mark{position:absolute;inset-inline-end:-3%;top:50%;translate:0 -50%;height:112%;width:auto;max-width:none;
  aspect-ratio:1272/1250;pointer-events:none;overflow:visible;opacity:.13}
.hm--body{fill:#fff;opacity:0;clip-path:inset(100% 0 0 0);
  transition:clip-path 2s var(--ease) .1s, opacity .6s linear .1s}
.hm--hamza,.hm--dot{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center}
.hm--hamza{transform:translate(-10px,10px) rotate(-8deg);transition:opacity .9s var(--ease) 1.25s, transform 1.2s var(--ease) 1.25s}
.hm--dot{transform:translateY(-90px) rotate(-12deg)}
.hm--d0{transition:opacity .5s var(--ease) 1.05s, transform 1.1s var(--spring) 1.05s}
.hm--d1{transition:opacity .5s var(--ease) 1.3s,  transform 1.1s var(--spring) 1.3s}
.hm--d2{transition:opacity .5s var(--ease) 1.42s, transform 1.1s var(--spring) 1.42s}
.hm--d3{transition:opacity .5s var(--ease) 1.54s, transform 1.1s var(--spring) 1.54s}
.is-ready .hm--body{opacity:1;clip-path:inset(0 0 0 0)}
.is-ready .hm--hamza,.is-ready .hm--dot{opacity:1;transform:none}

.hero__foot{position:relative;display:flex;justify-content:space-between;align-items:center;
  padding-block:1.4rem 1.8rem;border-top:1px solid var(--line-d);font-size:var(--t-xs);color:var(--ice);letter-spacing:var(--ls-ui);
  opacity:0;transition:opacity 1.2s var(--ease) 1.2s}
.is-ready .hero__foot{opacity:1}
.hero__scroll{display:flex;align-items:center;gap:.75rem}
.hero__scroll i{position:relative;width:1px;height:2.25rem;background:var(--line-d);overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset-inline-start:0;top:0;width:1px;height:40%;background:var(--rose);
  animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}

/* ------------------------------------------------------- page hero ------ */
/* Inner pages: a shorter photographic header with the title at the foot. */
.page-hero{position:relative;min-height:min(78svh,50rem);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--deep)}
.page-hero__media{position:absolute;inset:0}
.page-hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  transform:scale(1.06);transition:transform 2.6s var(--ease)}
.is-ready .page-hero__media img{transform:none}
.page-hero__veil{position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(14,33,48,.92) 0%, rgba(14,33,48,.55) 45%, rgba(14,33,48,.25) 100%)}
.page-hero__inner{position:relative;padding-block:clamp(6rem,12vw,10rem) clamp(3rem,6vw,5rem)}
.page-hero__title{font-size:var(--t-page);font-weight:var(--w-display);line-height:calc(var(--lh-display) + .02);letter-spacing:var(--ls-display);
  max-width:16ch;margin-bottom:2rem}
.page-hero__lead{max-width:48ch;font-size:var(--t-lead);font-weight:var(--w-lead);line-height:1.6;color:rgba(255,255,255,.84)}
[dir="rtl"] .page-hero__lead{line-height:1.9}

/* ------------------------------------------------------------ about ----- */
.statement{font-size:var(--t-state);font-weight:var(--w-h);line-height:1.28;letter-spacing:-.022em;max-width:26ch}
[dir="rtl"] .statement{line-height:1.6;letter-spacing:0}
.indent{margin-inline-start:clamp(0rem, 16vw, 16rem)}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,30rem));gap:clamp(2rem,5vw,5rem);
  margin-top:clamp(3.5rem,7vw,6.5rem);color:var(--steel)}
.cols--rows{row-gap:2rem}
.about__more{margin-top:clamp(2.5rem,4vw,3.5rem)}
.glance{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(5rem,10vw,9rem);border-top:1px solid var(--line)}
.glance>div{padding-block-start:1.6rem;padding-inline-end:1.5rem;display:flex;flex-direction:column-reverse;gap:.55rem}
.glance>div+div{padding-inline-start:1.5rem;border-inline-start:1px solid var(--line)}
.glance dt{font-size:var(--t-sm);color:var(--steel)}
.glance dd{font-size:clamp(2.25rem,1.6rem + 2vw,3.5rem);font-weight:var(--w-display);letter-spacing:-.04em;line-height:1}
.glance dd.glance__txt{font-size:clamp(1.35rem,1.1rem + .9vw,2rem);letter-spacing:-.02em;padding-top:.6rem}
[dir="rtl"] .glance dd{letter-spacing:0;line-height:1.2}

/* -------------------------------------------------------- companies ----- */
/* A full-width index. The brief runs under the name and the logo, so rows
   stay short even with long descriptions. */
.companies{padding-top:0}
.co-list{border-top:1px solid var(--line)}
.co{border-bottom:1px solid var(--line)}
.co__row{display:grid;grid-template-columns:9rem minmax(0,1fr) 14rem;column-gap:clamp(1.5rem,3vw,3rem);row-gap:.85rem;
  grid-template-areas:"sector name logo" "sector desc desc";align-items:start;padding-block:clamp(1.9rem,3.2vw,2.75rem)}
.co__sector{grid-area:sector;font-size:var(--t-xs);font-weight:var(--w-ui);color:var(--rose-ink);padding-top:.55rem;letter-spacing:var(--ls-ui)}
.co__name{grid-area:name;align-self:center;font-size:var(--t-h3);font-weight:400;letter-spacing:-.018em;line-height:1.25}
[dir="rtl"] .co__name{letter-spacing:0;font-weight:700;line-height:1.5}
.co__sub{display:block;font-weight:300;color:var(--steel)}
[dir="rtl"] .co__sub{font-weight:300}
.co__desc{grid-area:desc;font-size:.97rem;line-height:1.7;color:var(--steel);max-width:88ch}
[dir="rtl"] .co__desc{line-height:1.95}
.co__site{display:inline-flex;align-items:center;gap:.35rem;margin-inline-start:.4rem;color:var(--navy);font-weight:var(--w-ui);
  text-decoration:none;border-bottom:1px solid var(--rose);white-space:nowrap}
.co__site:hover{color:var(--rose-ink)}
.co__site svg{width:.7rem;height:.7rem;fill:none;stroke:currentColor;stroke-width:1.8}
/* Logo slot. Placeholders (initials) sit in a mist chip until a logo arrives. */
.co__logo{grid-area:logo;justify-self:end;align-self:center;width:4.5rem;height:4.5rem;border-radius:1.1rem;background:var(--mist);
  display:grid;place-items:center;font-size:.7rem;font-weight:600;letter-spacing:.08em;color:var(--steel);
  box-shadow:inset 0 0 0 1px rgba(22,49,68,.05)}
.co__logo--img{width:14rem;height:4rem;background:none;box-shadow:none;border-radius:0;place-items:center end}
.co__logo--img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* Heavy, solid wordmarks read larger than line logos at the same size. */
.co__logo--img img.is-dense{max-height:68%}

/* ------------------------------------------------------------ break ----- */
.break{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--deep)}
.break__media{position:absolute;inset:-10% 0}
.break__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.break__veil{position:absolute;inset:0;background:linear-gradient(0deg, rgba(14,33,48,.88) 0%, rgba(14,33,48,.1) 55%)}
.break__text{position:relative;padding-bottom:clamp(3rem,7vw,6rem);font-size:var(--t-state);font-weight:var(--w-h);line-height:1.25;letter-spacing:-.022em}
[dir="rtl"] .break__text{line-height:1.6;letter-spacing:0}
@supports (animation-timeline: view()){
  .break__media{animation:drift linear both;animation-timeline:view()}
  @keyframes drift{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
}

/* --------------------------------------------------------- ventures ----- */
.ventures{background:var(--mist)}
/* Bento — nine cells: the feature spans two, Rayan spans two. */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.4vw,1.25rem)}
.app--feature,.app--wide{grid-column:span 2}
/* Double bezel: a machined tray holding the card. */
.app{padding:.4rem;border-radius:2rem;background:rgba(22,49,68,.045);box-shadow:inset 0 0 0 1px rgba(22,49,68,.06)}
.app__core{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:3.5rem;
  padding:clamp(1.5rem,2.4vw,2.25rem);border-radius:calc(2rem - .4rem);background:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -45px rgba(22,49,68,.35);
  transition:transform .8s var(--snap)}
.app:hover .app__core{transform:translateY(-4px)}
.app__logo{display:inline-flex;align-items:center;align-self:flex-start;height:4.25rem}
.app__logo img{height:100%;width:auto;max-width:15rem;object-fit:contain}
.app__logo--dense{height:3.1rem}
.app--feature .app__logo{height:auto;padding:1rem 1.35rem;border-radius:1.1rem;background:#fff;box-shadow:0 18px 40px -24px rgba(0,0,0,.45)}
.app--feature .app__logo img{height:3.75rem;max-width:none}
/* The logo carries the name; the typed name stays for screen readers. */
.app--logo .app__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app__cat{font-size:var(--t-xs);font-weight:var(--w-ui);color:var(--rose-ink);margin-bottom:.5rem}
.app__name{font-size:clamp(1.6rem,1.25rem + 1vw,2.25rem);font-weight:300;letter-spacing:-.03em;line-height:1.1;margin-bottom:.75rem}
.app__desc{font-size:.97rem;line-height:1.6;color:var(--steel);max-width:40ch}
[dir="rtl"] .app__desc{line-height:1.9}
/* No logo (Promo): the name is set as the wordmark, anchored low like the rest. */
.app--type .app__txt{margin-top:auto}
.app--type .app__name{font-size:clamp(2.25rem,1.6rem + 2vw,3.25rem);font-weight:250;letter-spacing:-.04em;margin-bottom:1rem}
[dir="rtl"] .app--type .app__name{font-family:var(--sans)}
.app--feature .app__core{background:var(--navy);color:#fff;min-height:26rem;
  background-image:radial-gradient(120% 90% at 100% 0%, rgba(219,165,145,.16), transparent 55%)}
.app--feature .app__cat{color:var(--rose)}
.app--feature .app__desc{color:var(--ice);font-size:var(--t-lead);max-width:46ch}
.app--wide .app__txt{max-width:36rem}

/* ----------------------------------------------------- split sections --- */
/* Photo on one half, held while the text on the other half scrolls. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
.split__media{position:relative;overflow:clip;background:var(--deep)}
.split__media img{position:sticky;top:var(--mast);width:100%;height:calc(100vh - var(--mast));object-fit:cover;object-position:50% 20%}
.split__body{padding:var(--sy) var(--gutter);display:flex;flex-direction:column;gap:clamp(3.5rem,7vw,6rem);max-width:46rem}
.split__text{font-size:clamp(1.35rem,1.05rem + 1.1vw,2.1rem);font-weight:var(--w-h);line-height:1.38;letter-spacing:-.018em}
[dir="rtl"] .split__text{line-height:1.75;letter-spacing:0}
.split__prose{display:grid;gap:1.4rem;color:var(--steel);max-width:58ch}
.principles{padding-top:clamp(2.5rem,4vw,3.5rem);border-top:1px solid var(--line)}
.principles__title{font-size:var(--t-sm);font-weight:var(--w-ui);color:var(--steel);margin-bottom:2rem}
.principles__list{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.principles__list dt{font-size:1.15rem;font-weight:var(--w-ui);letter-spacing:-.01em;margin-bottom:.5rem}
.principles__list dd{font-size:.97rem;line-height:1.65;color:var(--steel)}
[dir="rtl"] .principles__list dd{line-height:1.9}

/* --------------------------------------------------------- chairman ----- */
.chair{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding-block:var(--sy)}
.chair__media{position:absolute;inset:0;opacity:.16}
.chair__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.chair__inner{position:relative}
.chair__quote p{font-size:clamp(1.9rem,1.2rem + 2.9vw,4.25rem);font-weight:var(--w-display);line-height:1.14;letter-spacing:-.032em;max-width:22ch}
[dir="rtl"] .chair__quote p{line-height:1.5;letter-spacing:0}
.chair__by{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;
  margin-top:clamp(3rem,6vw,5rem);padding-top:2rem;border-top:1px solid var(--line-d)}
.chair__by p{display:flex;flex-direction:column;gap:.2rem}
.chair__by strong{font-weight:var(--w-ui);font-size:1.1rem}
.chair__by span{color:var(--ice);font-size:var(--t-sm)}

/* The full letter (About page): a title column held beside the text. */
/* Straight after "Who we are": one section gap and a hairline, not two gaps. */
.about + .letter{padding-top:0}
.about + .letter .letter__grid{padding-top:clamp(4rem,7vw,6.5rem);border-top:1px solid var(--line)}
.letter__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2.5rem,7vw,8rem);align-items:start}
.letter__aside{position:sticky;top:calc(var(--mast) + 3rem)}
.letter__aside .h2{margin-bottom:2rem}
.letter__sig{padding-top:1.5rem;border-top:1px solid var(--line)}
.letter__sig strong{display:block;font-weight:var(--w-ui);font-size:1.1rem}
.letter__sig span{color:var(--steel);font-size:var(--t-sm)}
.letter__body{max-width:62ch;display:grid;gap:1.45rem;color:#2c4252}
.letter__body p{line-height:1.8}
[dir="rtl"] .letter__body p{line-height:2.05}
.letter__greet{font-size:var(--t-lead);font-weight:var(--w-lead);color:var(--navy)}
.letter__pull{margin-block:clamp(1.5rem,3vw,2.5rem);padding-block:clamp(1.75rem,3vw,2.5rem);border-block:1px solid var(--line)}
.letter__pull p{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.35rem);font-weight:var(--w-h);line-height:1.3;letter-spacing:-.02em;color:var(--navy)}
[dir="rtl"] .letter__pull p{line-height:1.7;letter-spacing:0}
.letter__close{margin-top:1rem;padding-top:1.75rem;border-top:1px solid var(--line)}
.letter__close strong{display:block;font-size:1.35rem;font-weight:var(--w-h);letter-spacing:-.015em;color:var(--navy)}
[dir="rtl"] .letter__close strong{font-weight:700;letter-spacing:0}
.letter__close span{color:var(--steel);font-size:var(--t-sm)}

/* ------------------------------------------------------------ board ----- */
.board{background:var(--mist)}
.board__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,7vw,8rem);align-items:start}
.board .h2{margin-bottom:1.5rem}
.board__photo{margin-top:clamp(2.5rem,5vw,4rem);aspect-ratio:3/2;overflow:hidden;border-radius:2px;max-width:28rem}
.board__photo img{width:100%;height:100%;object-fit:cover}
.board__list{border-top:1px solid var(--line);margin-top:.5rem}
.board__list li{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding-block:clamp(1.6rem,2.8vw,2.4rem);border-bottom:1px solid var(--line)}
.board__name{font-size:clamp(1.5rem,1.15rem + 1.2vw,2.4rem);font-weight:var(--w-h);letter-spacing:-.028em;line-height:1.15}
[dir="rtl"] .board__name{letter-spacing:0;line-height:1.5}
.board__role{font-size:var(--t-sm);color:var(--steel);white-space:nowrap}
.board__list li:first-child .board__role{color:var(--rose-ink);font-weight:var(--w-ui)}

/* ---------------------------------------------------------- contact ----- */
/* After page 10 of the profile: the cultural centre stands on the navy band
   and rises out of it into the white field above. The footer below is a
   deeper navy, so the building's base reads as a ground line, not a crop. */
.contact{position:relative;padding-top:var(--sy)}
.contact__top{padding-bottom:clamp(3.5rem,7vw,6rem)}
.contact__title{font-size:clamp(3.5rem,2rem + 7vw,9.5rem);font-weight:var(--w-display);letter-spacing:-.05em;line-height:.95;margin-bottom:2rem}
[dir="rtl"] .contact__title{letter-spacing:0;line-height:1.25}
.contact__intro{max-width:30ch}
.contact__band{position:relative;background:var(--navy);color:#fff;padding-block:clamp(3rem,5vw,4.5rem)}
.contact__grid{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:2.5rem}
.contact__dl{display:grid;grid-template-columns:auto auto;gap:1.5rem clamp(2rem,5vw,4.5rem);max-width:42vw}
.contact dt{font-size:var(--t-xs);color:var(--rose);margin-bottom:.4rem}
.contact dd{color:#fff;line-height:1.6;font-size:.97rem}
[dir="rtl"] .contact dd{line-height:1.9}
.contact dd a{text-decoration:none;font-size:1.3rem;font-weight:300;letter-spacing:-.01em;font-family:var(--sans);
  background:linear-gradient(var(--rose),var(--rose)) 0 100%/100% 1px no-repeat;padding-bottom:.15rem}
.contact__building{position:absolute;inset-inline-end:0;bottom:0;width:min(54vw,58rem);height:auto;pointer-events:none}
[dir="rtl"] .contact__building{transform:scaleX(-1)}

/* ----------------------------------------------------------- footer ----- */
.footer{background:var(--deep);color:#fff}
.footer__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--gutter);padding-block:clamp(4rem,7vw,5.5rem) clamp(3rem,5vw,4rem)}
.footer__logo{height:3.4rem;width:auto}
.footer__alt{margin-top:1.1rem;color:var(--ice);font-size:.95rem;width:fit-content}
.footer__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.footer__nav div{display:flex;flex-direction:column;gap:.7rem}
.footer__nav p{font-size:var(--t-xs);color:var(--rose);margin-bottom:.4rem}
.footer__nav a{text-decoration:none;color:var(--ice);font-size:var(--t-sm);transition:color .4s var(--snap)}
.footer__nav a:hover{color:#fff}
.footer__base{display:flex;justify-content:space-between;gap:1rem;padding-block:1.75rem 2.25rem;border-top:1px solid var(--line-d);
  font-size:var(--t-xs);color:var(--ice)}
.footer__base a{color:var(--ice);text-decoration:none;font-size:.95rem}
.footer__base a:hover{color:var(--rose)}

/* --------------------------------------------------------------- 404 ---- */
.missing{min-height:calc(100svh - var(--mast));display:grid;align-content:center;padding-block:var(--sy)}
.missing .h2{margin-bottom:1.5rem}
.missing .lead{margin-bottom:2.5rem}

/* ----------------------------------------------------------- reveal ----- */
.js .rv{opacity:0;transform:translateY(2rem);filter:blur(6px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none;filter:none}

/* ------------------------------------------------------- responsive ----- */
@media (max-width:1100px){
  .co__row{grid-template-columns:7rem minmax(0,1fr) 11rem}
  .co__logo--img{width:11rem;height:3.4rem}
}
@media (max-width:900px){
  :root{--mast:4.5rem}
  .nav{position:fixed;top:var(--mast);inset-inline:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem var(--gutter) 1.5rem;border-bottom:1px solid var(--line);box-shadow:0 30px 40px -30px rgba(22,49,68,.25);display:none}
  .nav[data-open="true"]{display:flex}
  .nav a{padding-block:1rem;border-bottom:1px solid var(--line)}
  .nav a:hover{border-bottom-color:var(--line)}
  .nav a[aria-current="true"],.nav a[aria-current="page"]{border-bottom-color:var(--line);color:var(--rose-ink)}
  .nav__lang{padding-inline-start:0;border-inline-start:0;border-bottom:1px solid var(--line) !important}
  .burger{display:block}

  .hero__inner{padding-top:clamp(8rem,30vw,12rem)}
  .page-hero__media img{object-position:68% 60%}
  .hero__mark{height:78%;top:42%;inset-inline-end:-18%}
  .indent{margin-inline-start:0}
  .cols{grid-template-columns:1fr}
  .glance{grid-template-columns:repeat(2,1fr)}
  .glance>div:nth-child(3){padding-inline-start:0;border-inline-start:0}
  .glance>div:nth-child(n+3){margin-top:1.5rem;border-top:1px solid var(--line)}
  .sec-head{grid-template-columns:1fr}
  .sec-head .lead{justify-self:start}

  /* Company rows stack: logo first, at a readable size. */
  .co__row{grid-template-columns:minmax(0,1fr);grid-template-areas:"logo" "sector" "name" "desc";row-gap:.75rem}
  .co__sector{padding-top:0}
  .co__logo{justify-self:start;width:3.5rem;height:3.5rem;border-radius:.9rem;margin-bottom:.4rem}
  .co__logo--img{width:auto;height:3.25rem;border-radius:0;place-items:center start}
  .co__logo--img img{height:100%;width:auto;max-width:15rem}
  .co__logo--img img.is-dense{height:70%}

  .bento{grid-template-columns:1fr}
  .app--feature,.app--wide{grid-column:auto}
  .app--feature .app__core{min-height:0}
  .split{grid-template-columns:1fr}
  .split__media img{position:static;height:60vh}
  .principles__list{grid-template-columns:1fr}
  .letter__grid,.board__grid{grid-template-columns:1fr}
  .letter__aside{position:static}
  .board__photo{display:none}
  .contact__band{padding-bottom:0}
  .contact__dl{grid-template-columns:1fr;max-width:none}
  .contact__building{position:relative;display:block;width:100%;margin-top:2.5rem}
  .footer__grid{grid-template-columns:1fr}
  .footer__nav{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .glance dd{font-size:2.25rem}
  .board__list li{flex-direction:column;gap:.3rem}
  .footer__base{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none;filter:none}
}