/* One top bar for every inner page (Moti approved 05.10.2026, desktop review item 9).
   Start side: the Compass mark, a hairline, the page name with a small blue wave.
   End side, always in this order: page-specific button (if any), search, language, "Book a meeting".
   72px on desktop, 60px on phones (phones: mark, search, language; the meeting button lives in the bottom bar).
   Written into the pages by build_header.py. The homepage keeps its own round menu button and opening. */
.shd{position:sticky;top:0;z-index:45;display:flex;align-items:center;gap:14px;height:72px;padding:0 40px;
  background:rgba(9,9,9,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);
  font-family:"Assistant","Noto Sans","Noto Sans Arabic",system-ui,sans-serif;color:#fff}
/* over a full-screen opening (Knowledge Hub, a day in the villa, the school): it floats on the picture */
.shd--over{position:fixed;inset:0 0 auto 0;background:linear-gradient(180deg,rgba(9,9,9,.72),rgba(9,9,9,.38));border-bottom-color:rgba(255,255,255,.06)}
.shd__lg{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1;color:#fff;text-decoration:none;direction:ltr;flex:none}
.shd__lg svg{width:62px;height:auto;overflow:visible}
.shd__lg path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round}
.shd__lg span{font:500 13.5px/1 "Poppins",system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap}
.shd__sep{width:1px;height:28px;background:rgba(255,255,255,.18);flex:none}
.shd__ctx{position:relative;padding-bottom:7px;font-weight:800;font-size:19px;line-height:1.1;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.shd__ctx::after{content:"";position:absolute;inset:auto 0 0 0;height:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3 C20 0 30 6 50 3 C70 0 80 6 100 3' fill='none' stroke='%23468AC7' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.shd__sp{flex:1}
/* the round buttons: search (from search.js) and the page's own button */
.shd .cgs-tog,.shd__ib{width:44px;height:44px;margin:0;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);display:inline-grid;place-items:center;color:#fff;cursor:pointer;transition:background-color .15s,border-color .15s,scale .12s cubic-bezier(.23,1,.32,1)}
.shd .cgs-tog svg{stroke:#fff}
@media (hover:hover){.shd .cgs-tog:hover,.shd__ib:hover,.shd .snd:hover{background:rgba(70,138,199,.16);border-color:rgba(70,138,199,.6)}}
.shd .cgs-tog:active,.shd__ib:active,.shd .snd:active{scale:.95}
.shd__srch:empty{display:none}
/* the day page's sound switch sits in the bar as a pill */
.shd .snd{position:static;inset:auto;min-height:44px;margin:0;flex:none;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);transition:background-color .15s,border-color .15s,scale .12s cubic-bezier(.23,1,.32,1)}
/* language: the shared picker (langpick.js) turns this into a compact pill + list */
.shd__lang{display:flex;gap:4px;flex:none}
.shd__lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:999px;color:#fff;text-decoration:none;font-weight:600}
.shd__cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;flex:none;border-radius:14px;background:linear-gradient(180deg,#5598D2,#3B7AB3);color:#fff;text-decoration:none;font-weight:800;font-size:16.5px;white-space:nowrap;box-shadow:0 10px 26px rgba(70,138,199,.32);transition:scale .12s cubic-bezier(.23,1,.32,1),filter .15s}
@media (hover:hover){.shd__cta:hover{filter:brightness(1.08)}}
.shd__cta:active{scale:.97}
/* the search band opens under the bar */
.shd~.cgs-band--pop{position:fixed;inset:72px 0 auto 0;z-index:44}
@media (max-width:1100px){.shd{padding:0 24px;gap:12px}.shd .snd span{display:none}.shd .snd{width:44px;padding:0;justify-content:center}}
/* 05.10 full scan: tablets in portrait drop the wordmark under the wave, so the meeting button never leaves the screen */
/* short page name: shown instead of the long one up to 900px */
.shd__cs{display:none}
@media (max-width:900px){.shd__lg span{display:none}
  .shd__cl:has(+.shd__cs){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .shd__cs{display:inline}}
@media (max-width:767px){
  .shd{height:60px;padding:0 16px;gap:8px}
  .shd__lg span,.shd__sep,.shd__cta{display:none}
  .shd__lg svg{width:44px}
  .shd__ctx{font-size:17px}
  /* a day in the villa: the opening names the page, the bar keeps its buttons */
  .shd:has(.snd) .shd__ctx{display:none}
  .shd~.cgs-band--pop{top:60px}
}
/* pages that used to carry their own mark on the opening picture: the bar's mark replaces it */
html:has(.shd) .sch-hero .hero__top .mark{visibility:hidden}
/* things that stick to the top of the screen sit under the bar, not behind it */
html:has(.shd) .ty-pass{top:calc(env(safe-area-inset-top,0px) + 88px)}
html:has(.shd) .ty-map.is-pinned{top:82px}
@media (max-width:767px){html:has(.shd) .ty-map.is-pinned{top:68px}}
/* 05.10 full scan: a link reached with Tab never hides under the sticky bar; the day page's clock starts under the bar */
html:has(.shd){scroll-padding-top:88px}
@media (max-width:767px){html:has(.shd){scroll-padding-top:76px}}
html:has(.shd--over) .hud{padding-top:calc(84px + env(safe-area-inset-top,0px))}
@media (max-width:767px){html:has(.shd--over) .hud{padding-top:calc(70px + env(safe-area-inset-top,0px))}}