/* Clear glass; foreground follows the surface beneath the floating header.
   FLIP keeps the approved shrinking motion and the logo's exact proportions. */
.site-header {
  position:fixed;
  inset-block-start:var(--header-offset);
  inset-inline:var(--header-edge);
  z-index:var(--header-layer);
  max-inline-size:var(--header-expanded-max);
  margin-inline:auto;
  min-block-size:var(--header-height);
  padding-block:var(--zero);
  padding-inline:var(--header-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--header-gap);
  border:var(--stroke) solid var(--header-line);
  border-radius:var(--header-radius);
  background:var(--header-fallback);
  color:var(--header-ink);
  font-family:var(--font-header);
  font-size:var(--header-type);
  font-weight:var(--header-weight);
  line-height:var(--header-leading);
}
.site-header.is-scrolled{max-inline-size:min(var(--header-max),calc(var(--full) - var(--header-collapse-gutter)))}
@supports ((backdrop-filter:blur(0px)) or (-webkit-backdrop-filter:blur(0px))) {
  .site-header {
    background:var(--header-sheen),var(--header-ground);
    -webkit-backdrop-filter:blur(var(--header-blur));
    backdrop-filter:blur(var(--header-blur)) saturate(var(--header-saturation));
  }
}
/* Over photos and dark panels (outside the hero) the pill gains a frosted ivory layer; light sections keep the clear glass. */
.site-header{transition:background-color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s var(--ease),-webkit-backdrop-filter .35s var(--ease)}
.site-header.is-over-media:not(.is-over-dark){background:rgba(246,243,236,.94);border-color:rgba(184,146,74,.18);box-shadow:0 8px 30px rgba(27,45,35,.10)}
@supports ((backdrop-filter:blur(0px)) or (-webkit-backdrop-filter:blur(0px))) {
  .site-header.is-over-media:not(.is-over-dark){background:rgba(246,243,236,.75);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}
}
.site-logo{display:grid;flex-shrink:var(--zero);inline-size:var(--header-logo)}
.site-logo img{inline-size:var(--full);block-size:auto}
.site-logo img{grid-area:1 / 1;transition:opacity var(--motion-ui) var(--ease)}
.site-logo-light{opacity:var(--zero)}
.site-header.is-over-dark{--header-ink:var(--ivory);--header-link:var(--ivory);--header-line:var(--header-dark-line);--header-focus:var(--sage);--header-control-ground:var(--header-dark-control);--header-control-hover:var(--header-dark-control-hover);--button-ink:var(--ivory);--button-line:var(--button-dark-line);--button-ground:var(--button-dark-ground);--button-hover-ground:var(--button-dark-hover)}
.is-over-dark .site-logo-light{opacity:1}.is-over-dark .site-logo-green{opacity:var(--zero)}
.desktop-nav{display:flex;gap:var(--header-nav-gap);align-items:center}
.desktop-nav a{display:flex;align-items:center;min-block-size:var(--touch-target);white-space:nowrap;color:var(--header-link)}
.desktop-nav a:is(:hover,:focus-visible){color:var(--header-ink)}
.nav-link{position:relative;inline-size:fit-content}
.nav-link::after{content:'';position:absolute;inset-inline-start:var(--half);inset-block-end:var(--nav-dot-bottom);inline-size:var(--nav-dot-size);block-size:var(--nav-dot-size);border-radius:var(--circle);background:var(--nav-dot-ink);opacity:var(--zero);transform:translateX(var(--nav-dot-shift)) scale(var(--nav-dot-rest));transition:opacity var(--motion-ui) var(--ease),transform var(--motion-ui) var(--ease);pointer-events:none}
:dir(rtl) .nav-link{--nav-dot-shift:50%}
.nav-link[aria-current="page"]::after{opacity:1;transform:translateX(var(--nav-dot-shift)) scale(1)}
.site-header.is-over-dark{--nav-dot-ink:var(--nav-dot-dark)}
.mobile-menu .nav-link{padding-block:var(--menu-link-pad)}
@media(prefers-reduced-motion:reduce){.nav-link::after{transition:none}}
.header-actions{display:flex;align-items:center;gap:var(--s1)}
.header-quote{font-size:var(--header-quote-type)}
.language-switch{display:inline-flex;align-items:center;justify-content:center;gap:var(--header-language-gap);min-inline-size:var(--header-language-width);min-block-size:var(--touch-target);padding-inline:var(--s1);border:var(--stroke) solid var(--header-line);border-radius:var(--header-control-radius);background:var(--header-control-ground);color:var(--header-ink);font-size:var(--header-language-type);line-height:var(--header-leading);white-space:nowrap}
.language-switch:is(:hover,:focus-visible){background:var(--header-control-hover)}
.language-switch svg{inline-size:var(--header-language-icon);block-size:var(--header-language-icon);flex-shrink:var(--zero);stroke-width:var(--header-icon-stroke)}
.site-header :is(a,button):focus-visible{outline:var(--focus-width) solid var(--header-focus);outline-offset:var(--focus-offset)}
.menu-toggle{display:none;inline-size:var(--touch-target);block-size:var(--touch-target);padding:var(--zero);border:var(--zero);border-radius:var(--circle);background:transparent;color:var(--header-ink);place-content:center;gap:var(--menu-gap)}
.menu-toggle span{display:block;inline-size:var(--menu-line);block-size:var(--menu-stroke);background:currentColor}
.mobile-menu{inline-size:var(--menu-width);max-inline-size:var(--hero-measure);block-size:var(--menu-height);max-block-size:none;padding:var(--s4);border:var(--zero);border-radius:var(--menu-radius);background:var(--ivory);color:var(--brand);font-family:var(--font-header)}
.mobile-menu::backdrop{background:var(--menu-backdrop);backdrop-filter:blur(var(--s1))}
.mobile-menu[open]{display:flex;flex-direction:column;align-items:stretch;gap:var(--s4)}
.menu-top{display:flex;justify-content:space-between;align-items:center}.menu-top img{inline-size:var(--header-logo);block-size:auto}
.menu-close{inline-size:var(--touch-target);block-size:var(--touch-target);border:var(--zero);background:transparent;color:var(--brand);font-size:var(--menu-title)}
.mobile-menu nav{display:flex;flex-direction:column;gap:var(--s3);margin-block:auto;font-size:var(--menu-title)}.menu-phone{text-align:center}
.nojs-nav{display:none;color:var(--brand)}
.home .nojs-nav{color:var(--ivory)}
@media(max-width:64rem){.site-header{gap:var(--s2)}.desktop-nav{gap:var(--s3)}.header-quote{display:none}}
@media(max-width:48rem){
  .site-header{inset-block-start:var(--header-mobile-offset);min-block-size:var(--header-mobile-height);gap:var(--s1)}
  .site-header.is-scrolled{max-inline-size:min(var(--header-mobile-max),calc(var(--full) - var(--header-collapse-gutter)))}
  .site-logo{inline-size:var(--header-logo-mobile)}
  .desktop-nav{display:none}
  .has-js .menu-toggle{display:grid}
  .header-actions{gap:var(--s1)}
  .nojs-nav{position:absolute;inset-block-start:var(--header-nojs-top);inset-inline:var(--s2);z-index:var(--header-layer);display:flex;justify-content:center;gap:var(--s3);font-size:var(--small)}
}
@media(max-height:44rem){
  .mobile-menu[open]{gap:var(--s2);padding:var(--s3)}
  .mobile-menu nav{gap:var(--s1);font-size:var(--lead)}
  .mobile-menu .nav-link{padding-block:var(--s1)}
}

/* "The crossing" mobile menu: a full olive panel where the pages are stations on a gold rail. */
.crossing-menu{position:fixed;inset:0;inline-size:100%;max-inline-size:none;block-size:100dvh;max-block-size:none;margin:0;padding:calc(var(--header-mobile-offset,1rem)) var(--page-pad) calc(1.5rem + env(safe-area-inset-bottom));border:0;background:radial-gradient(80% 50% at 50% 0%,var(--olive-lift),transparent 70%),var(--olive);color:var(--ivory);font-family:var(--font-header);overflow:auto}
.crossing-menu[open]{display:flex;flex-direction:column}
.crossing-menu::backdrop{background:var(--olive)}
.cm-top{display:flex;align-items:center;justify-content:space-between;min-block-size:var(--header-mobile-height,4rem);padding-inline:var(--header-pad);border:1px solid color-mix(in srgb,var(--ivory) 14%,transparent);border-radius:var(--header-radius)}
.cm-top img{inline-size:var(--header-logo-mobile);block-size:auto}
.cm-close{position:relative;inline-size:var(--touch-target);block-size:var(--touch-target);padding:0;border:0;border-radius:50%;background:transparent;color:var(--ivory)}
.cm-close span{position:absolute;inset-inline-start:25%;inset-block-start:50%;inline-size:50%;block-size:1.5px;background:currentColor;border-radius:2px;transition:transform .45s var(--ease)}
.cm-close span:first-child{transform:translateY(-4px)}.cm-close span:last-child{transform:translateY(4px)}
.crossing-menu.is-open .cm-close span:first-child{transform:rotate(45deg)}
.crossing-menu.is-open .cm-close span:last-child{transform:rotate(-45deg)}
.cm-close:focus-visible,.cm-stop:focus-visible,.cm-lang:focus-visible{outline:var(--focus-width) solid var(--olive-gold);outline-offset:var(--focus-offset)}

.cm-route{position:relative;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.25rem,4.5svh,2.25rem);flex:1;padding-block:2rem;padding-inline-start:2.25rem}
.cm-rail{position:absolute;inset-inline-start:.5rem;inset-block:2rem;inline-size:1px;background:linear-gradient(180deg,transparent,var(--olive-gold) 12%,var(--olive-gold) 88%,transparent);transform-origin:50% 0;opacity:.75}
.cm-stop{position:relative;display:flex;align-items:center;gap:1rem;min-block-size:var(--touch-target);color:var(--ivory)}
.cm-dot{position:absolute;inset-inline-start:calc(-2.25rem + .5rem - .4375rem);inline-size:.875rem;block-size:.875rem;border-radius:50%;border:1px solid var(--olive-gold);background:var(--olive);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.cm-stop[aria-current=page] .cm-dot{background:var(--olive-gold);box-shadow:0 0 0 .4375rem color-mix(in srgb,var(--olive-gold) 18%,transparent)}
.cm-names{display:flex;flex-direction:column;gap:.125rem}
.cm-ar{font:300 clamp(1.75rem,8vw,2.25rem)/1.25 var(--font-heading-ar)}
.cm-en{font:400 .75rem/1.4 var(--font-body-en);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--ivory) 55%,transparent)}
:root:lang(en) .cm-names{flex-direction:column-reverse}
:root:lang(en) .cm-en{font:300 clamp(1.75rem,8vw,2.25rem)/1.25 var(--font-heading-en);letter-spacing:0;text-transform:none;color:var(--ivory)}
:root:lang(en) .cm-ar{font:400 .8125rem/1.4 var(--font-heading-ar);color:color-mix(in srgb,var(--ivory) 55%,transparent)}
.cm-stop[aria-current=page] .cm-ar,.cm-stop[aria-current=page] .cm-en{color:var(--olive-gold)}
:root:lang(en) .cm-stop[aria-current=page] .cm-ar{color:color-mix(in srgb,var(--olive-gold) 70%,transparent)}

.cm-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block-start:1.25rem;border-block-start:1px solid color-mix(in srgb,var(--ivory) 12%,transparent)}
.cm-lang{display:inline-flex;align-items:center;gap:.5rem;min-block-size:var(--touch-target);padding-inline:1rem;border:1px solid color-mix(in srgb,var(--ivory) 18%,transparent);border-radius:var(--pill);color:var(--ivory);font-size:.875rem}
.cm-lang svg{inline-size:1rem;block-size:1rem;stroke-width:1.4}
@media (prefers-reduced-motion:reduce){.cm-close span,.cm-dot{transition:none}}

/* Desktop nav: hovering rolls each page name to its translation; a small gold star marks the current page. */
.desktop-nav .nav-link::after{display:none}
.desktop-nav .nav-link{display:inline-flex;align-items:center;gap:.4375rem;font-size:1.0625rem;color:color-mix(in srgb,var(--header-link) 68%,transparent);transition:color .35s var(--ease)}
.desktop-nav .nav-link[aria-current=page],.desktop-nav .nav-link[aria-current=page]:is(:hover,:focus-visible){color:#a8823e;font-weight:600}
.desktop-nav .nav-link:is(:hover,:focus-visible){color:var(--olive)}
.site-header.is-over-dark .desktop-nav .nav-link:is(:hover,:focus-visible){color:var(--ivory)}
.site-header.is-over-dark .desktop-nav .nav-link[aria-current=page]{color:#d8bb83}
.nav-star{display:inline-grid;place-items:center;font-size:.6875rem;color:inherit}
/* Gold for the current page: a deeper tone on the light header so it stays legible. */
.nav-roll{display:inline-flex;flex-direction:column;block-size:1.5em;overflow:hidden;line-height:1.5}
.nav-word{display:block;block-size:1.5em;white-space:nowrap;transition:transform .45s var(--ease)}
.desktop-nav .nav-link:is(:hover,:focus-visible) .nav-word{transform:translateY(-100%)}
.nojs-nav .nav-roll,.mobile-menu .nav-roll{block-size:auto}
.nojs-nav .nav-word:not(:first-child){display:none}
@media (prefers-reduced-motion:reduce){.nav-word{transition:none}}