/* shared by every page: the services menu and the three-dot page transition */
.has-menu{position:relative;display:flex;align-items:center}
.menu-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:inherit;cursor:pointer;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;opacity:.8;transition:opacity .3s}
html[lang=ar] .menu-btn{letter-spacing:0;font-size:16px;font-family:var(--f-body-ar)}
.menu-btn:hover,.menu-btn[aria-expanded=true],.menu-btn.on{opacity:1}
.menu-btn.on>span{text-decoration:underline;text-underline-offset:8px;text-decoration-color:var(--gold)}
.menu-btn svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;transition:rotate .3s cubic-bezier(.23,1,.32,1)}
.menu-btn[aria-expanded=true] svg{rotate:180deg}
.mega{position:fixed;top:calc(env(safe-area-inset-top,0px) + 72px);left:50%;translate:-50% 0;width:min(1000px,calc(100vw - 32px));background:var(--white);color:var(--green);border-radius:8px;box-shadow:0 30px 70px -24px rgba(0,0,0,.35),0 0 0 1px rgba(15,51,40,.08);padding:clamp(22px,2.6vw,36px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s,transform .3s cubic-bezier(.23,1,.32,1),visibility 0s .3s;z-index:60}
.mega.open{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .3s cubic-bezier(.23,1,.32,1)}
.mega h4{margin:0 0 12px;font-family:var(--f-display);font-weight:400;font-size:20px;display:flex;align-items:center;gap:10px}
html[lang=ar] .mega h4{font-family:var(--f-display-ar);font-size:22px}
.mega h4 .dots{width:14px}
.mega ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mega li{border-bottom:1px solid var(--line)}
#mega li a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;text-decoration:none;font-size:15px;opacity:1;letter-spacing:0;text-transform:none;font-weight:400}
html[lang=ar] #mega li a{font-size:16px}
.mega li a .soon{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
html[lang=ar] .mega li a .soon{letter-spacing:0;font-size:12px}
.mega li a .arr{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .3s cubic-bezier(.23,1,.32,1)}
html[dir=rtl] .mega li a .arr{transform:scaleX(-1) translateX(-6px)}
@media (hover:hover){.mega li a:hover .arr{opacity:1;transform:none} html[dir=rtl] .mega li a:hover .arr{transform:scaleX(-1)}}
.mega li a[aria-current=page]{font-weight:500}
.mega li a[aria-current=page] .arr{opacity:1;transform:none;color:var(--gold)}
html[dir=rtl] .mega li a[aria-current=page] .arr{transform:scaleX(-1)}
.mega .col{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s cubic-bezier(.23,1,.32,1)}
.mega.open .col{opacity:1;transform:none}
.mega.open .col:nth-child(2){transition-delay:.05s}.mega.open .col:nth-child(3){transition-delay:.1s}
@media (max-width:860px){
  nav.main{display:flex!important;margin-inline-start:auto}
  nav.main>a{display:none}
  nav.main>a.home{display:block}
  nav.main{gap:18px}
  .mega{grid-template-columns:minmax(0,1fr);top:calc(env(safe-area-inset-top,0px) + 70px);max-height:calc(100svh - 90px);overflow:auto;gap:18px}
  .top .btn{margin-inline-start:16px}
}

/* page transition: the three dots arrive one step at a time, then the next page */
.pt{position:fixed;inset:0;z-index:200;background:var(--green);display:grid;place-items:center;visibility:hidden;clip-path:inset(100% 0 0 0);transition:clip-path .6s cubic-bezier(.76,0,.24,1),visibility 0s .6s}
.pt.on,html.nav-in .pt{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .6s cubic-bezier(.76,0,.24,1)}
.pt.out{visibility:visible;clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.76,0,.24,1)}
.pt .tri{position:relative;width:64px;aspect-ratio:1.1217;color:var(--milk)}
.pt .tri i{transform:scale(0);opacity:0;transition:transform .45s cubic-bezier(.34,1.4,.64,1),opacity .2s}
.pt.on .tri i,html.nav-in .pt .tri i{transform:none;opacity:1}
.pt.on .tri i:nth-child(2){transition-delay:.35s}.pt.on .tri i:nth-child(3){transition-delay:.55s}.pt.on .tri i:nth-child(1){transition-delay:.75s}
.pt .tri::after{content:"";position:absolute;inset:-26px;border:1px solid rgba(244,239,230,.25);border-radius:50%;transform:scale(.6);opacity:0;transition:transform .8s cubic-bezier(.23,1,.32,1) 1s,opacity .3s 1s}
.pt.on .tri::after{transform:none;opacity:1}
.pt.out .tri{transform:scale(.85);opacity:0;transition:transform .5s,opacity .3s}
@media (prefers-reduced-motion:reduce){.pt,.pt.on,.pt.out{transition:none}.pt .tri i{transition:none}}
#mega li a[aria-disabled=true]{color:rgba(15,51,40,.55);cursor:default}

/* keyboard: a visible focus ring everywhere, and a skip link to the content */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:fixed;top:12px;inset-inline-start:12px;z-index:100;background:var(--milk);color:var(--green);padding:10px 16px;border-radius:999px;font-size:14px;text-decoration:none;transform:translateY(-160%);transition:transform .2s}
.skip:focus{transform:none}

/* Django: the language switch is a link to the other-language URL */
a.lang{display:inline-grid;place-items:center;text-decoration:none;flex:none}

/* uploaded logo: one version for dark header, one for light */
.top .logo-slot.has-logo{border:0;padding:0;height:auto;opacity:1}
.top .logo-slot.has-logo img{width:auto;max-width:180px;object-fit:contain}
.top .logo-slot .lg-on-light{display:none}.top .logo-slot .lg-on-dark{display:block}
.top.light .logo-slot .lg-on-light{display:block}.top.light .logo-slot .lg-on-dark{display:none}

/* phones: a menu button opens a full-screen menu with every link (built by site.js from the header) */
.burger{display:none;position:relative;width:40px;height:40px;flex:none;border:1px solid currentColor;border-radius:50%;background:none;color:inherit;cursor:pointer;padding:0;opacity:.85}
.burger i{position:absolute;left:12px;right:12px;height:1.4px;background:currentColor;border-radius:1px;transition:transform .4s cubic-bezier(.23,1,.32,1),opacity .2s}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:19px}.burger i:nth-child(3){top:24px}
html.mnav-open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
html.mnav-open .burger i:nth-child(2){opacity:0}
html.mnav-open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:45;background:var(--green);color:var(--milk);overflow-y:auto;overscroll-behavior:contain;padding:calc(env(safe-area-inset-top,0px) + 100px) 24px calc(env(safe-area-inset-bottom,0px) + 32px);display:flex;flex-direction:column;gap:28px;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
html.mnav-open .mnav{opacity:1;visibility:visible;transition:opacity .3s}
html.mnav-open,html.mnav-open body{overflow:hidden}
html.mnav-open .top{color:var(--milk)}
html.mnav-open .top .logo-slot .lg-on-dark{display:block}html.mnav-open .top .logo-slot .lg-on-light{display:none}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav>ul>li{border-bottom:1px solid rgba(244,239,230,.16);opacity:0;transform:translateY(12px);transition:opacity .4s,transform .5s cubic-bezier(.23,1,.32,1)}
html.mnav-open .mnav>ul>li{opacity:1;transform:none}
.mnav>ul>li>a,.mnav .acc{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:16px 0;background:none;border:0;color:inherit;text-decoration:none;font-family:var(--f-display);font-size:28px;line-height:1.2;text-align:start;cursor:pointer}
html[lang=ar] .mnav>ul>li>a,html[lang=ar] .mnav .acc{font-family:var(--f-display-ar);font-size:31px}
.mnav a[aria-current=page],.mnav a.on{color:var(--milk)}
.mnav a[aria-current=page]::after,.mnav a.on::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.mnav .acc svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none;transition:rotate .35s cubic-bezier(.23,1,.32,1)}
.mnav .acc[aria-expanded=true] svg{rotate:180deg}
.mnav .sub{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s cubic-bezier(.23,1,.32,1),visibility 0s .45s}
.mnav .acc[aria-expanded=true]+.sub{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s cubic-bezier(.23,1,.32,1)}
.mnav .sub>div{overflow:hidden}
.mnav .grp{padding:0 0 14px}
.mnav .grp h4{margin:6px 0 4px;font-family:var(--f-body);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,239,230,.55)}
html[lang=ar] .mnav .grp h4{font-family:var(--f-body-ar);letter-spacing:0;font-size:14px}
.mnav .grp a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;color:rgba(244,239,230,.9);text-decoration:none;font-size:17px}
html[lang=ar] .mnav .grp a{font-family:var(--f-body-ar);font-size:18px}
.mnav .cta{align-self:stretch;justify-content:center;opacity:0;transition:opacity .4s .25s}
html.mnav-open .mnav .cta{opacity:1}
@media (max-width:860px){
  .burger{display:block}
  nav.main{display:none!important}
  .top .btn{display:none}
  .top .lang{margin-inline-start:auto}
}
@media (min-width:861px){.mnav{display:none}}
@media (prefers-reduced-motion:reduce){.mnav,.mnav>ul>li,.mnav .cta,.mnav .sub,.burger i{transition:none}}