/* Harrat Ventures website: layout + components. Tokens and fonts come from tokens.css (copied from the Harrat design system). */
*{box-sizing:border-box}
html{scroll-padding-top:100px}
body{color:var(--text-primary);overflow-x:clip}
a{text-decoration:none}
img{max-width:100%}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 40px}
.narrow{max-width:880px}
.ms{font-family:var(--font-icon);font-weight:300;font-style:normal;font-size:20px;line-height:1;letter-spacing:0;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;flex-shrink:0;user-select:none}
[dir=rtl] .flip{transform:scaleX(-1)}
[lang=ar]{--font-display:'Playfair Display','IBM Plex Sans Arabic',serif;--font-sans:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;--font-mono:'Geist Mono','IBM Plex Sans Arabic',ui-monospace,monospace}
.skip{position:fixed;inset-inline-start:16px;top:-80px;z-index:100;padding:12px 16px;background:var(--surface-inverse);color:var(--text-inverse);font:var(--type-ui)}
.skip:focus{top:16px;color:var(--text-inverse)}
:root{--mark-a:#FFFFFF;--mark-b:#C9CACE;--mark-c:#86888D;--pl-0:#17181B;--pl-1:#111214;--pl-2:#1D1E22;--pl-3:#141518;--pl-4:#232428;--pl-5:#191A1D;--pl-6:#1F2024;--pl-7:#15161A}
[data-theme=light]{--mark-a:#55565B;--mark-b:#333337;--mark-c:#1D1E21;--pl-0:#E4E5E8;--pl-1:#D3D5D9;--pl-2:#DCDDE1;--pl-3:#E9EAEC;--pl-4:#CACCD0;--pl-5:#DFE0E3;--pl-6:#D6D8DB;--pl-7:#E6E7EA}

/* Header */
.hdr{--gv:16px;--ih:52px;position:fixed;top:var(--gv);left:0;right:0;z-index:50;pointer-events:none}
/* Header: islands. Separate pieces float at the top (the logo, the links, the language and theme buttons) with
   no bar behind them, so the page shows between them: solid basalt in the dark theme, frosted glass in the light
   theme. A reading-progress line runs along the very top of the screen. */
.hdr .in{max-width:1320px;height:var(--ih);padding:0 40px;display:flex;align-items:center;gap:12px}
.hdr .in>*{pointer-events:auto}
.hdr :is(.hv-chap,.hv-count){display:none!important}
.brand,.nav,.tool{position:relative;isolation:isolate;border-radius:999px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--border-default),0 10px 28px -14px rgb(0 0 0/.65);
  transition:background var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
/* dark: solid basalt pieces; light: frosted glass like iOS (the page blurs through, a bright rim along the top) */
[data-theme=light] :is(.brand,.nav,.tool){background:linear-gradient(180deg,rgb(255 255 255/.75),rgb(255 255 255/.4) 50%,rgb(255 255 255/.55)),rgb(240 241 244/.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.8) brightness(1.06);backdrop-filter:blur(20px) saturate(1.8) brightness(1.06);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.95),inset 0 -1px 0 rgb(255 255 255/.5),inset 0 0 0 1px rgb(20 22 26/.08),inset 0 0 18px rgb(255 255 255/.4),0 10px 26px -14px rgb(20 22 26/.35)}
[data-theme=light] :is(.brand,.nav,.tool)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 90% at 22% 0%,rgb(255 255 255/.2),transparent 55%)}
[data-theme=light] .hdr.solid :is(.brand,.nav,.tool),[data-theme=light] .menu-open .hdr :is(.brand,.nav,.tool){background:linear-gradient(180deg,rgb(255 255 255/.85),rgb(255 255 255/.55) 50%,rgb(255 255 255/.65)),rgb(240 241 244/.45)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){[data-theme=light] :is(.brand,.nav,.tool){background:color-mix(in oklch,var(--surface-2) 94%,transparent)}}
.brand{display:flex;align-items:center;flex-shrink:0;height:var(--ih);padding:0 22px}
.brand img{height:30px;width:auto;display:block}
.on-light{display:none!important}
[data-theme=light] .on-dark{display:none!important}
[data-theme=light] .on-light{display:block!important}
.nav{display:flex;align-items:center;gap:28px;height:var(--ih);padding:0 30px;margin-inline-start:auto}
.nav a{position:relative;padding:10px 0;font:var(--type-ui);color:var(--text-secondary)}
.nav a:hover,.nav a[aria-current=page]{color:var(--text-primary)}
.nav a[aria-current=page]::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:2px;background:var(--accent)}
.tools{display:flex;gap:12px}
.tool{height:var(--ih);width:var(--ih);padding:0;border:0;color:var(--text-secondary);font:500 14px/1 var(--font-arabic);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-base) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.tool[lang=en]{font:500 12px/1 var(--font-mono);letter-spacing:.08em}
.tool:hover,.brand:hover{color:var(--text-primary);background:var(--surface-3)}
[data-theme=light] :is(.tool,.brand):hover{background:linear-gradient(180deg,rgb(255 255 255/.95),rgb(255 255 255/.65)),rgb(240 241 244/.4)}
.tool .ms{font-size:19px}
.menu-btn{display:none!important}
.menu{position:fixed;inset:0;z-index:40;background:var(--bg-page);padding:120px 20px 40px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base)}
.menu a{font:700 38px/1.2 var(--font-display);color:var(--text-primary);padding:16px 0;border-bottom:1px solid var(--border-subtle)}
.menu a[aria-current=page]{color:var(--accent-text)}
.menu-open{overflow:hidden}
.menu-open .menu{opacity:1;visibility:visible}

/* Actions + labels */
.btn{--c:12px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;font:600 16px/1 var(--font-sans);letter-spacing:var(--tracking-ui);white-space:nowrap;cursor:pointer;border:0;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
[dir=rtl] .btn{clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c))}
.btn-primary{background:var(--surface-inverse);color:var(--text-inverse)}
.btn-primary:hover{background:var(--surface-inverse-hover);color:var(--text-inverse)}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-accent:hover{background:var(--accent-hover);color:var(--accent-ink)}
.btn-ghost{clip-path:none;background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border-default)}
.btn-ghost:hover{color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--text-primary)}
.btn .ms{font-size:20px}
.eyebrow{margin:0;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:12px}
.eyebrow.accent{color:var(--accent-text)}
.eyebrow .sq{width:8px;height:8px;background:var(--accent);display:block;flex-shrink:0}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;font:600 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-border);white-space:nowrap}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font:500 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}

/* Type */
.display{margin:0;font:800 clamp(46px,7vw,108px)/1 var(--font-display);letter-spacing:var(--tracking-display);color:var(--text-primary);max-width:13ch;text-wrap:balance}
.display.md{font-size:clamp(40px,5.4vw,76px);max-width:20ch}
.h2{margin:20px 0 0;font:var(--type-heading-1);letter-spacing:var(--tracking-heading);color:var(--text-primary);text-wrap:balance}
.lede{margin:28px 0 0;max-width:600px;font:var(--type-body-lg);color:var(--text-body);text-wrap:pretty}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}

/* Photo hero: diagonal cut into the next section */
.hero{position:relative;z-index:2;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#050506;clip-path:polygon(0 0,100% 0,100% calc(100% - 9vw),0 100%)}
[dir=rtl] .hero{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 9vw))}
.hero.short{min-height:86svh}
.hero .photo{position:absolute;inset:-8% 0;background-size:cover;background-position:center;will-change:transform;animation:hv-settle 2.4s var(--ease-enter) both}
@keyframes hv-settle{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in oklch,var(--bg-page) 80%,transparent) 0%,transparent 24%),linear-gradient(90deg,color-mix(in oklch,var(--bg-page) 94%,transparent) 0%,color-mix(in oklch,var(--bg-page) 80%,transparent) 46%,color-mix(in oklch,var(--bg-page) 14%,transparent) 84%),linear-gradient(0deg,color-mix(in oklch,var(--bg-page) 70%,transparent) 0%,transparent 40%)}
[dir=rtl] .hero .shade{background:linear-gradient(180deg,color-mix(in oklch,var(--bg-page) 80%,transparent) 0%,transparent 24%),linear-gradient(270deg,color-mix(in oklch,var(--bg-page) 94%,transparent) 0%,color-mix(in oklch,var(--bg-page) 80%,transparent) 46%,color-mix(in oklch,var(--bg-page) 14%,transparent) 84%),linear-gradient(0deg,color-mix(in oklch,var(--bg-page) 70%,transparent) 0%,transparent 40%)}
.hero .copy{position:relative;z-index:2;padding-top:180px;padding-bottom:calc(9vw + 96px)}
.hero .display{margin-top:28px}
.hmark{width:96px;margin-bottom:40px}
.mark{display:block;width:100%;height:auto;overflow:visible}
.mark .fct{transform-box:fill-box;transform-origin:center;transition:transform 1.25s var(--ease-fracture) calc(var(--i) * 85ms + 250ms),opacity .6s var(--ease-enter) calc(var(--i) * 85ms + 250ms)}
.mark.assemble .fct{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}
.mark.assemble.done .fct{transform:none;opacity:1}

/* Page hero without photo */
.phero{position:relative;padding:200px 0 112px;background:var(--texture-facets),var(--bg-page);background-size:420px 420px,auto;border-bottom:1px solid var(--border-subtle)}
.phero .display{margin-top:28px}

/* Sections */
.sec{position:relative;padding:120px 0}
.sunk + .sec:not(.sunk){border-top:1px solid var(--border-subtle)}
.sunk{background:var(--matte-basalt)}
[data-theme=light] .sunk{background:var(--bg-sunken)}
.after-hero{z-index:1;margin-top:-9vw;padding-top:calc(9vw + 80px)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:64px}
.head .lede{margin:0}
.head .end{justify-self:end}

/* Interlocking role panels */
.lock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.pn{position:relative;min-height:400px;padding:48px;padding-inline-end:64px;background:var(--surface-1);display:flex;flex-direction:column;gap:16px;color:var(--text-primary);transition:background var(--dur-base) var(--ease-standard)}
.pn:nth-child(1){clip-path:polygon(0 0,100% 0,calc(100% - 44px) 100%,0 100%)}
.pn:nth-child(2){clip-path:polygon(44px 0,100% 0,calc(100% - 44px) 100%,0 100%);margin-inline-start:-40px;background:var(--surface-2);padding-inline-start:88px}
.pn:nth-child(3){clip-path:polygon(44px 0,100% 0,100% 100%,0 100%);margin-inline-start:-40px;padding-inline-start:88px}
[dir=rtl] .pn:nth-child(1){clip-path:polygon(0 0,100% 0,100% 100%,44px 100%)}
[dir=rtl] .pn:nth-child(2){clip-path:polygon(0 0,calc(100% - 44px) 0,100% 100%,44px 100%)}
[dir=rtl] .pn:nth-child(3){clip-path:polygon(0 0,calc(100% - 44px) 0,100% 100%,0 100%)}
a.pn:hover{background:var(--surface-3);color:var(--text-primary)}
.pn .n{font:500 13px/1 var(--font-mono);letter-spacing:.08em;color:var(--accent-text)}
.pn .go{position:absolute;top:44px;right:76px;color:var(--text-muted);transition:color var(--dur-fast) var(--ease-standard)}
.pn:nth-child(3) .go{right:40px}
[dir=rtl] .pn .go{right:auto;left:76px}
[dir=rtl] .pn:nth-child(3) .go{left:40px}
a.pn:hover .go{color:var(--accent-text)}
.pn h3{margin:auto 0 0;font:700 42px/1.05 var(--font-display)}
.pn .k{font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.pn p{margin:0;font:var(--type-body);color:var(--text-body)}

/* Focus cards */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fcard{--c:28px;padding:48px;min-height:360px;display:flex;flex-direction:column;gap:18px;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border-subtle);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
[dir=rtl] .fcard{clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c))}
.fcard h3{margin:auto 0 0;font:700 40px/1.08 var(--font-display);max-width:16ch}
.fcard p{margin:0;font:var(--type-body);color:var(--text-body);max-width:48ch}

/* Mountain planes (supergraphic from the mark's facets) */
.f{transition:fill .7s var(--ease-standard)}
.f0{fill:var(--pl-0)}.f1{fill:var(--pl-1)}.f2{fill:var(--pl-2)}.f3{fill:var(--pl-3)}.f4{fill:var(--pl-4)}.f5{fill:var(--pl-5)}.f6{fill:var(--pl-6)}.f7{fill:var(--pl-7)}
.band{position:relative;overflow:hidden;min-height:76svh;display:flex;align-items:center;background:var(--bg-page);border-block:1px solid var(--border-subtle)}
.band .planes{position:absolute;top:0;bottom:0;inset-inline-start:0;will-change:transform}
.band .planes svg{display:block}
[dir=rtl] .band .planes svg{transform:scaleX(-1)}
.band .copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:40px;padding-block:120px}
.statement{margin:0;font:800 clamp(40px,6vw,92px)/1.02 var(--font-display);letter-spacing:var(--tracking-display);max-width:14ch;color:var(--text-primary);text-wrap:balance}
.band .btn-ghost{background:color-mix(in oklch,var(--bg-page) 70%,transparent)}

/* Approach panorama: sticky stage, pans with scroll, the active role's facet lights */
.pano{position:relative;height:320svh;background:var(--bg-page)}
.pano .stage{position:sticky;top:0;height:100svh;overflow:hidden}
.pano .inner{position:absolute;top:0;left:0;width:3240px;height:1350px;transform-origin:0 0;will-change:transform}
.pano .inner>svg{position:absolute;inset:0;width:100%;height:100%}
[dir=rtl] .pano .inner>svg{transform:scaleX(-1)}
.pano[data-active="1"] .f3,.pano[data-active="2"] .f5,.pano[data-active="3"] .f7{fill:var(--accent)}
.role{position:absolute;width:904px;display:flex;flex-direction:column;gap:26px;opacity:.2;transition:opacity .6s var(--ease-standard)}
.pano[data-active="1"] .role[data-r="1"],.pano[data-active="2"] .role[data-r="2"],.pano[data-active="3"] .role[data-r="3"]{opacity:1}
.role .chip{align-self:flex-start;display:flex;align-items:center;gap:16px;padding:14px 18px;margin-bottom:14px;background:color-mix(in oklch,var(--bg-page) 88%,transparent);font:500 24px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.role .chip i{width:14px;height:14px;background:var(--accent);display:block}
.role h2{margin:0;font:700 76px/1.06 var(--font-display);letter-spacing:-.012em;color:var(--text-primary);text-wrap:balance}
.role p{margin:0;font:400 34px/1.42 var(--font-sans);color:var(--text-body);text-wrap:pretty}
.prog{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.prog i{width:48px;height:2px;background:var(--border-default);transition:background .4s var(--ease-standard)}
.pano[data-active="1"] .prog i:nth-child(1),.pano[data-active="2"] .prog i:nth-child(2),.pano[data-active="3"] .prog i:nth-child(3){background:var(--accent)}
.stack{display:none}

/* Insights */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.acard{display:flex;flex-direction:column;min-width:0;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border-subtle);color:var(--text-primary);transition:box-shadow var(--dur-base) var(--ease-standard)}
.acard:hover{box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--text-primary)}
.acard .imgw{position:relative;overflow:hidden;--wipe:var(--surface-1)}
.acard .img{aspect-ratio:16/10;background-size:cover;background-position:center;transition:transform 1.2s var(--ease-standard)}
.acard:hover .img{transform:scale(1.04)}
.acard .body{padding:32px;display:flex;flex-direction:column;gap:16px;flex:1}
.acard h3{margin:0;font:700 34px/1.12 var(--font-display);text-wrap:balance}
.acard p{margin:0;font:var(--type-body);color:var(--text-body);max-width:52ch}
.acard .more{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:8px;font:var(--type-ui);color:var(--text-primary)}
.acard.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.acard.wide .imgw{min-height:400px}
.acard.wide .img{position:absolute;inset:0;aspect-ratio:auto}
.acard.wide .body{padding:48px}

/* Article + story prose */
.back{display:inline-flex;align-items:center;gap:8px;margin-bottom:40px;font:var(--type-ui);color:var(--text-secondary)}
.back:hover{color:var(--text-primary)}
.phero .meta{margin-top:0}
.art-img{aspect-ratio:16/9;background-size:cover;background-position:center;margin:72px 0 64px;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%)}
[dir=rtl] .art-img{clip-path:polygon(40px 0,100% 0,100% 100%,0 100%,0 40px)}
.prose{max-width:720px}
.prose>p{margin:0 0 24px;font:var(--type-body-lg);color:var(--text-body)}
.prose h2{margin:56px 0 20px;font:var(--type-heading-2);color:var(--text-primary)}
.prose blockquote{margin:48px 0;font:700 clamp(28px,3vw,40px)/1.2 var(--font-display);color:var(--text-primary);text-wrap:balance}
.prose blockquote::before{content:"";display:block;width:48px;height:2px;background:var(--accent);margin-bottom:24px}
.prose ul{margin:0 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.prose li{position:relative;padding-inline-start:28px;font:var(--type-body-lg);color:var(--text-body)}
.prose li::before{content:"";position:absolute;inset-inline-start:0;top:.72em;width:8px;height:8px;background:var(--accent)}
.prose a:not(.btn){text-decoration:underline;text-underline-offset:.22em}
.chapter{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:72px;padding:88px 0;border-top:1px solid var(--border-subtle)}
.chapter:first-child{border-top:0;padding-top:0}
.chapter .lbl{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:16px}
.chapter .lbl .n{font:500 13px/1 var(--font-mono);letter-spacing:.08em;color:var(--accent-text)}
.chapter .lbl h2{margin:0;font:var(--type-heading-2);color:var(--text-primary)}
.chapter .prose>p:last-child{margin-bottom:0}

/* Contact */
.clist{border-top:1px solid var(--border-subtle)}
.crow{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) auto;gap:24px;align-items:center;padding:32px 0;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);transition:padding var(--dur-base) var(--ease-standard)}
a.crow:hover{padding-inline-start:16px;color:var(--text-primary)}
a.crow:hover .ms{color:var(--accent-text)}
.crow .k{font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.crow .v{display:flex;flex-wrap:wrap;align-items:center;gap:16px;min-width:0;font:700 clamp(26px,3.2vw,44px)/1.1 var(--font-display);overflow-wrap:anywhere}
.crow .ms{font-size:28px;color:var(--text-muted)}

/* Closing call to action */
.cta{padding:120px 0;background:var(--bg-sunken);border-top:1px solid var(--border-subtle)}
.cta .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta h2{margin:0;font:800 clamp(38px,5vw,72px)/1.04 var(--font-display);letter-spacing:var(--tracking-display);max-width:15ch;color:var(--text-primary)}

/* Footer */
.ftr{border-top:1px solid var(--border-subtle);background:var(--bg-sunken);padding-top:88px}
.ftr .top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:48px;padding-bottom:72px}
.ftr .col{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ftr .col img{height:44px;width:auto;display:block;margin-bottom:12px}
.ftr .col h4{margin:0 0 6px;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.ftr .col a,.ftr .col span,.ftr .col p{margin:0;font:var(--type-body-sm);color:var(--text-secondary)}
.ftr .col p{max-width:340px}
.ftr .col a:hover{color:var(--text-primary)}
.ftr .bkl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:20px 0;border-top:1px solid var(--border-subtle);font:var(--type-mono-sm);color:var(--text-muted)}
.ftr .bkl a{color:var(--text-secondary);text-decoration:none}
.ftr .bkl a:hover{color:var(--accent-text)}
.ftr .bkl .dot{color:var(--accent)}
/* Backers: who stands behind Harrat, closing the home page */
.backers{border-top:1px solid var(--border-subtle);background:var(--bg-sunken)}
.backers .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.bk{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 24px;padding:40px 0;color:var(--text-primary);text-decoration:none}
.bk+.bk{padding-inline-start:40px;border-inline-start:1px solid var(--border-subtle)}
.bk:first-child{padding-inline-end:40px}
.bk .k{grid-column:1/-1;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.bk b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* the logo carries the name on screen; the text stays for screen readers and the Arabic switch */
.bk .lg{display:flex;align-items:flex-end;min-height:84px}
.bk .lg img{display:block;width:auto;height:46px;opacity:.9;transition:opacity var(--dur-base) var(--ease-standard)}
.bk .lg.maia img{height:84px}
.bk:hover .lg img{opacity:1}
.bk .ms{font-size:24px;color:var(--text-muted);transition:color var(--dur-fast) var(--ease-standard),translate var(--dur-base) var(--ease-standard)}
.bk::after{content:"";position:absolute;inset-inline-start:0;bottom:-1px;width:56px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-fracture)}
.bk+.bk::after{inset-inline-start:40px}
[dir=rtl] .bk::after{transform-origin:right}
.bk:hover{color:var(--text-primary)}
.bk:hover .ms{color:var(--accent-text);translate:3px -3px}
.bk:hover::after{transform:none}
[lang=ar] .bk .k{font-family:var(--font-arabic);letter-spacing:0}
@media (max-width:900px){.backers .wrap{grid-template-columns:minmax(0,1fr)}.bk .lg{min-height:60px}.bk .lg img{height:38px}.bk .lg.maia img{height:60px}.bk{padding:32px 0}.bk+.bk{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--border-subtle)}.bk:first-child{padding-inline-end:0}.bk+.bk::after{inset-inline-start:0}}
.ftr .bot{display:flex;justify-content:space-between;gap:24px;padding:24px 0 32px;border-top:1px solid var(--border-subtle);font:var(--type-mono-sm);color:var(--text-muted)}

/* Arabic mode: English shown where the Arabic isn't written yet */
.tt-banner{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 32px));padding:12px 16px;background:var(--surface-inverse);color:var(--text-inverse);font:500 13px/1.4 'IBM Plex Sans',sans-serif;direction:ltr;text-align:left}
.tt-banner[hidden]{display:none}
.tt-banner b{font-weight:700}
.tt-banner button{margin-inline-start:auto;flex-shrink:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:inherit;cursor:pointer;opacity:.7}
.tt-banner button:hover{opacity:1}
[lang=ar] .tt{text-decoration:underline dashed color-mix(in oklch,var(--accent) 70%,transparent);text-decoration-thickness:1px;text-underline-offset:.3em;unicode-bidi:plaintext}
[dir=rtl] :is(p,h1,h2,h3,h4,blockquote,li).tt{text-align:right}

/* Scroll reveal */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity var(--dur-deliberate) var(--ease-enter),transform var(--dur-deliberate) var(--ease-enter);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}

/* ── Added: Arabic typography ── */
[lang=ar] body{font-family:var(--font-arabic)}
[lang=ar] :is(.display,.statement,.cta h2){font-weight:700;letter-spacing:0;line-height:1.3}
[lang=ar] :is(.h2,.pn h3,.fcard h3,.acard h3,.chapter .lbl h2,.prose h2,.crow .v,.role h2,.prose blockquote,.menu a,.pr h3,.mini h3,.step h3,.eco-i h3,.bring h3,.next b){letter-spacing:0;line-height:1.4}
[lang=ar] :is(.meta,.tag,.pn .k,.crow .k,.role .chip,.ftr .bot,.eyebrow,.step .k,.bring .k,.back,.next div>span){font-family:var(--font-arabic);letter-spacing:0;text-transform:none}
[lang=ar] :is(.lede,.prose>p,.prose li,.pn p,.fcard p,.acard p,.mini p,.pr p,.eco-i p,.step p,.bring li){line-height:1.85}
[lang=ar] .role p{line-height:1.7}
[lang=ar] .tick span{font-family:var(--font-arabic);font-weight:600}
.ar-wait body{opacity:0;animation:hv-show 0s 1.5s forwards}
@keyframes hv-show{to{opacity:1}}

/* ── Added: page transitions ── */
@view-transition{navigation:auto}
/* each glass island keeps its place across page changes (naming the whole header would stop the glass from blurring the page) */
.brand{view-transition-name:hv-brand}.nav{view-transition-name:hv-nav}.tools .tool:nth-child(1){view-transition-name:hv-t1}.tools .tool:nth-child(2){view-transition-name:hv-t2}.tools .tool:nth-child(3){view-transition-name:hv-t3}
::view-transition-old(root){animation:hv-vt-out .3s var(--ease-exit) both}
::view-transition-new(root){animation:hv-vt-in .75s var(--ease-fracture) both}
@keyframes hv-vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes hv-vt-in{from{clip-path:polygon(0 118%,100% 100%,100% 100%,0 100%)}to{clip-path:polygon(0 -18%,100% -36%,100% 100%,0 100%)}}
.hdr .progress{position:absolute;inset-inline:0;top:calc(-1 * var(--gv));height:2px;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}
[dir=rtl] .hdr .progress{transform-origin:right}

/* ── Added: load + reveal motion ── */
@keyframes hv-up{from{opacity:0;transform:translateY(22px)}}
.js .hero .copy>:not(.hmark):not(.display){animation:hv-up .9s var(--ease-enter) both;animation-delay:calc(var(--k,0) * 110ms + 950ms)}
.js .phero .wrap>:not(.display){animation:hv-up .9s var(--ease-enter) both;animation-delay:calc(var(--k,0) * 110ms + 250ms)}
.js .words .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .03em .12em;margin:-.16em -.03em -.12em}
.js .words .w>span{display:inline-block;transform:translateY(112%);transition:transform .95s var(--ease-fracture);transition-delay:calc(var(--wi) * 55ms + var(--d0,0ms))}
.js .words.in .w>span{transform:none}
.js[lang=ar] .words .w{overflow:visible;padding:0;margin:0}
.js[lang=ar] .words .w>span{opacity:0;transform:translateY(.4em);transition:transform .95s var(--ease-fracture),opacity .7s var(--ease-enter);transition-delay:calc(var(--wi) * 55ms + var(--d0,0ms))}
.js[lang=ar] .words.in .w>span{opacity:1;transform:none}
[lang=ar] .btn{line-height:1.4}
.hero .words{--d0:700ms}
.phero .words{--d0:120ms}
.js .wipe{position:relative}
.js .wipe::after{content:"";position:absolute;inset:0;z-index:1;background:var(--wipe,var(--bg-page));transform-origin:right;transition:transform 1.15s var(--ease-fracture) var(--d,0ms);pointer-events:none}
.js[dir=rtl] .wipe::after{transform-origin:left}
.js .wipe.in::after{transform:scaleX(0)}
.btn .ms,.acard .more .ms,.next .ms{transition:transform var(--dur-base) var(--ease-standard)}
.btn:hover .ms.flip,.acard:hover .more .ms.flip,.next:hover .ms.flip{transform:translateX(5px)}
[dir=rtl] .btn:hover .ms.flip,[dir=rtl] .acard:hover .more .ms.flip,[dir=rtl] .next:hover .ms.flip{transform:scaleX(-1) translateX(5px)}
a.pn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgb(255 255 255 / .07) 50%,transparent 60%);background-size:300% 100%;background-position:100% 0;transition:background-position 1s var(--ease-standard);pointer-events:none}
a.pn:hover::after{background-position:0 0}
[data-theme=light] a.pn::after{background-image:linear-gradient(105deg,transparent 40%,rgb(5 5 6 / .05) 50%,transparent 60%)}

/* ── Added: capability ticker ── */
.tick{overflow:hidden;border-block:1px solid var(--border-subtle);background:var(--bg-page);padding:30px 0}
.tick .track{display:flex;align-items:center;width:max-content;animation:hv-tick 70s linear infinite}
.tick:hover .track{animation-play-state:paused}
.tick span{margin-inline-end:36px;font:700 clamp(24px,2.6vw,36px)/1.2 var(--font-display);color:var(--text-primary);white-space:nowrap}
.tick i{margin-inline-end:36px;width:9px;height:9px;background:var(--accent);transform:rotate(45deg);flex-shrink:0}
@keyframes hv-tick{to{transform:translateX(-50%)}}
[dir=rtl] .tick .track{animation-name:hv-tick-rtl}
@keyframes hv-tick-rtl{to{transform:translateX(50%)}}

/* ── Added: principles ── */
.prin{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.pr{position:relative;padding-top:32px;display:flex;flex-direction:column;gap:14px}
.pr::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:var(--border-default)}
.pr::after{content:"";position:absolute;top:-1px;inset-inline-start:0;width:56px;height:3px;background:var(--accent);transform-origin:left;transition:transform .9s var(--ease-fracture) calc(var(--d,0ms) + 250ms)}
[dir=rtl] .pr::after{transform-origin:right}
.js .pr:not(.in)::after{transform:scaleX(0)}
.pr .n,.eco-i .n,.mini .n{font:500 13px/1.6 var(--font-mono);letter-spacing:.08em;color:var(--accent-text)}
.pr h3{margin:0;font:700 28px/1.15 var(--font-display);color:var(--text-primary)}
.pr p,.eco-i p,.mini p,.step p{margin:0;font:var(--type-body);color:var(--text-body)}

/* ── Added: ecosystem + mark sections ── */
.eco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:80px;align-items:start}
.eco .lede{margin-top:24px}
.eco .mk,.markband .mk{width:min(340px,70%);margin-top:56px}
.eco .items{border-top:1px solid var(--border-subtle)}
.eco-i{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding:32px 0;border-bottom:1px solid var(--border-subtle)}
.eco-i h3{margin:0 0 10px;font:700 30px/1.15 var(--font-display);color:var(--text-primary)}
.markband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.markband .mk{width:min(500px,100%);margin:0;justify-self:center}
.markband .lede{margin-top:24px}

/* ── Added: approach details ── */
.brings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle)}
.bring{background:var(--surface-1);padding:40px 36px 44px;display:flex;flex-direction:column;gap:20px}
.bring .k{font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.bring h3{margin:0;font:700 34px/1.1 var(--font-display);color:var(--text-primary)}
.bring ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.bring li{position:relative;padding-inline-start:24px;font:var(--type-body);color:var(--text-body)}
.bring li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:7px;height:7px;background:var(--accent);transform:rotate(45deg)}
.path{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-top:60px}
.path .line{position:absolute;top:10px;inset-inline:0;height:2px;background:var(--border-default)}
.path .line i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transition:transform 1.8s var(--ease-fracture) .25s}
[dir=rtl] .path .line i{transform-origin:right}
.js .path:not(.in) .line i{transform:scaleX(0)}
.step{position:relative;display:flex;flex-direction:column;gap:12px}
.step::before{content:"";position:absolute;top:-56px;inset-inline-start:0;width:14px;height:14px;background:var(--bg-page);box-shadow:inset 0 0 0 2px var(--accent);transform:rotate(45deg)}
.step .k{font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.step h3{margin:0;font:700 32px/1.12 var(--font-display);color:var(--text-primary)}
.minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mini{--c:22px;padding:36px;min-height:250px;display:flex;flex-direction:column;gap:14px;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border-subtle);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
[dir=rtl] .mini{clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c))}
.mini h3{margin:20px 0 0;font:700 30px/1.15 var(--font-display);color:var(--text-primary)}

/* ── Added: insights + articles + contact ── */
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.next{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:88px;padding:36px 0;border-block:1px solid var(--border-subtle);color:var(--text-primary)}
.next:hover{color:var(--text-primary)}
.next div>span{display:block;margin-bottom:12px;font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.next b{display:block;font:700 clamp(26px,3vw,40px)/1.15 var(--font-display)}
.next .ms{font-size:32px}
.art-img{--wipe:var(--bg-page)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
.split .prose ul{margin-bottom:40px}

@media (max-width:1100px){.prin{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}}
@media (max-width:900px){.eco,.markband,.path,.brings,.minis,.split,.cards.two{grid-template-columns:minmax(0,1fr)}.eco,.markband,.split{gap:48px}.path{padding-top:0;gap:44px}.path .line{display:none}.step::before{position:static;margin-bottom:6px}.mini{min-height:0}.mini h3{margin-top:20px}.next b{font-size:26px}}
@media (max-width:640px){.prin{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.tick .track{animation:none}.js .words .w>span,.js[lang=ar] .words .w>span{transform:none;opacity:1;transition:none}.js .wipe::after{display:none}.js .hero .copy>*,.js .phero .wrap>*{animation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

@media (max-width:900px),(max-aspect-ratio:1/1){.pano{display:none}.stack{display:block}}
@media (max-width:900px){
.hdr{--gv:10px;--ih:44px}
.hdr .in{padding:0 12px;gap:8px}
.brand{padding:0 16px}
.brand img{height:26px}
.tools{gap:8px}
.wrap{padding:0 20px}
.nav{display:none}
.menu-btn{display:inline-flex!important}
.tools{margin-inline-start:auto}
.head,.duo,.cards,.acard.wide,.chapter,.ftr .top{grid-template-columns:minmax(0,1fr)}
.head{gap:24px;margin-bottom:40px}
.head .end{justify-self:start}
.lock{grid-template-columns:minmax(0,1fr);gap:12px}
.pn{clip-path:none!important;margin:0!important;padding:36px 24px!important;min-height:0}
.pn h3{margin-top:28px}
.pn .go{right:24px!important;top:36px}
[dir=rtl] .pn .go{right:auto!important;left:24px!important}
.sec{padding:96px 0}
.phero{padding:150px 0 80px}
.hero .copy{padding-top:140px}
.fcard{padding:32px 24px;min-height:0}
.fcard h3{margin-top:24px}
.acard.wide .imgw{min-height:240px}
.acard.wide .body{padding:32px 24px}
.chapter{gap:20px;padding:56px 0}
.chapter .lbl{position:static}
.crow{grid-template-columns:minmax(0,1fr) auto;gap:12px 24px}
.crow .k{grid-column:1/-1}
.cta{padding:88px 0}
.ftr .top{gap:40px}
.ftr .bot{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
.js .rv{opacity:1;transform:none;transition:none}
.mark.assemble .fct{transform:none;opacity:1;transition:none}
.hero .photo{animation:none}
.f,.role{transition:none}
}

/* ── Content update (Oct 2026): the longer hero line, who it is for, founders, ventures, the stage table ── */
.display.long{font-size:clamp(40px,5.6vw,88px);max-width:16ch}
.head .rv>.h2:first-child{margin-top:0}
.who{border-top:1px solid var(--border-subtle)}
.who-i{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--border-subtle)}
.who-i .n{font:500 13px/1.6 var(--font-mono);letter-spacing:.08em;color:var(--accent-text)}
.who-i p{margin:0;max-width:36ch;font:700 clamp(24px,2.4vw,34px)/1.25 var(--font-display);color:var(--text-primary);text-wrap:balance}
.prin.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fnd,.vnt{--c:24px;position:relative;display:flex;flex-direction:column;gap:14px;padding:40px;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border-subtle);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
[dir=rtl] :is(.fnd,.vnt){clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c))}
.fnd{min-height:240px}
.fnd .k{font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.fnd h3{margin:auto 0 0;font:700 clamp(28px,2.8vw,38px)/1.12 var(--font-display);color:var(--text-primary)}
.fnd p,.vnt p{margin:0;max-width:52ch;font:var(--type-body-lg);color:var(--text-body)}
.vnt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:end;gap:24px 48px;min-height:200px}
.vnt h3{margin:0;font:700 clamp(32px,3.4vw,48px)/1.08 var(--font-display);color:var(--text-primary)}
.stages{width:100%;border-collapse:collapse}
.stages thead th{padding:0 24px 18px 0;padding-inline:0 24px;border-bottom:1px solid var(--border-default);text-align:start;font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.stages tbody th,.stages td{padding:34px 0;padding-inline:0 24px;border-bottom:1px solid var(--border-subtle);text-align:start;vertical-align:top}
.stages tbody th{width:22%;font:700 clamp(28px,3vw,40px)/1.1 var(--font-display);color:var(--text-primary)}
.stages tbody th .n{display:block;margin-bottom:14px;font:500 13px/1 var(--font-mono);letter-spacing:.08em;color:var(--accent-text)}
.stages td{width:26%;font:var(--type-body-lg);color:var(--text-body)}
.stages td:last-child{color:var(--text-primary)}
.stages .lbl{display:none}
.stages-note{max-width:62ch;margin:40px 0 0;font:var(--type-body-lg);color:var(--text-secondary)}
.say{max-width:30ch;margin:0;font:700 clamp(30px,3.6vw,52px)/1.18 var(--font-display);letter-spacing:var(--tracking-display);color:var(--text-primary);text-wrap:balance}
.send{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:start}
.send .prose>p:first-child{margin-bottom:16px;color:var(--text-primary)}
.send .crow{grid-template-columns:minmax(0,120px) minmax(0,1fr) auto;padding:26px 0}
.send .crow .v{font-size:clamp(20px,2.1vw,30px);overflow-wrap:normal;word-break:normal}
.send .crow .v[dir=ltr]{white-space:nowrap}
.cta .cta-copy{display:flex;flex-direction:column;gap:18px;max-width:640px}
.cta .cta-copy .lede{margin:0}
.ftr .col .mh{display:inline-block;margin-top:4px}
.ftr .col .mh img{height:30px;width:auto;margin:0;opacity:.85;transition:opacity var(--dur-base) var(--ease-standard)}
.ftr .col .mh:hover img{opacity:1}
[lang=ar] :is(.fnd .k,.stages thead th,.stages .lbl){font-family:var(--font-arabic);letter-spacing:0;text-transform:none}
[lang=ar] :is(.who-i p,.fnd h3,.vnt h3,.stages tbody th,.say){letter-spacing:0;line-height:1.45}
@media (max-width:1100px){.prin.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
.founders,.vnt,.send{grid-template-columns:minmax(0,1fr)}
.send{gap:48px}
.fnd,.vnt{padding:32px 24px;min-height:0}
.prin.three{grid-template-columns:minmax(0,1fr)}
.stages thead{display:none}
.stages,.stages tbody,.stages tr,.stages tbody th,.stages td{display:block;width:auto}
.stages tr{padding:28px 0;border-bottom:1px solid var(--border-subtle)}
.stages tbody th,.stages td{padding:0;border:0}
.stages td{margin-top:18px}
.stages .lbl{display:block;margin-bottom:6px;font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
}
/* Team page: the founders with large portraits, then Madinah Hubs */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.person{display:flex;flex-direction:column;gap:14px}
.person .ph{--c:32px;position:relative;aspect-ratio:4/5;margin-bottom:14px;overflow:hidden;background:var(--surface-2) url(../img/mark-silver.png) center/34% no-repeat;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
[data-theme=light] .person .ph{background-image:url(../img/mark-charcoal.png)}
[dir=rtl] .person .ph{clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c))}
.person .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.person .k{font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.person h2{margin:0;font:700 clamp(32px,3.4vw,48px)/1.08 var(--font-display);color:var(--text-primary)}
.person p{margin:0;max-width:46ch;font:var(--type-body-lg);color:var(--text-body)}
.mhub{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:center}
.mh-logo{display:grid;place-items:center;aspect-ratio:16/9;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.mh-logo img{width:62%;height:auto}
.mhub .lede{margin:24px 0 32px}
[lang=ar] .person .k{font-family:var(--font-arabic);letter-spacing:0;text-transform:none}
[lang=ar] .person h2{letter-spacing:0;line-height:1.4}
@media (max-width:900px){.team,.mhub{grid-template-columns:minmax(0,1fr)}.mhub{gap:40px}}