/* HAZEM AL-ZUBI · HHS WORLD-CLASS RELIABILITY PASS · September 2026
   Loaded after the approved V37/V36 styles. This is a cumulative correction layer:
   mobile language continuity, first-paint integrity, whole-word display type,
   accessible mobile navigation, document links, and responsive pressure safety. */

/* Meaning is visible until JavaScript has proved it can enhance the page. */
html:not(.js) .reveal,
html:not(.js) .r,
html:not(.js) figure,
html:not(.js) figcaption,
html:not(.js) .rule,
html:not(.js) .foot-div,
html:not(.js) .stamp,
html:not(.js) .seal-open,
html:not(.js) .seal-div,
html:not(.js) .mv{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
html:not(.js) figure img{transform:none!important;filter:none}

/* Display-title law: line breaks may move; meaningful words may not fracture. */
h1,h2,h3,.display,.display-md,.display-sm,.pagehead h1,.pagehead h2,
.weight-copy h1,.room-en,.room-ar,.names-monument span,.life-beautiful{
  min-width:0;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  text-wrap:balance;
}
.pagehead .lede,.body-copy,.body-large,.n p,.ctline,.row .t{min-width:0;overflow-wrap:break-word}
a[href^="mailto:"],a[href^="tel:"],a[href^="https://wa.me/"]{overflow-wrap:anywhere}

/* Portable artist documents belong to the conversion architecture, not a hidden corner. */
.footer-resources{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  margin-top:28px;padding-top:18px;border-top:1px solid rgba(198,161,91,.20);
}
.footer-resources a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mono,'IBM Plex Mono',monospace);font-size:14px!important;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--gilt,#C6A15B);border-bottom:1px solid rgba(198,161,91,.35);
}
html[dir="rtl"] .footer-resources a{font-family:var(--hz-ar-ui,'Noto Sans Arabic',sans-serif);letter-spacing:0;text-transform:none;font-size:16px!important}

/* Deep-page language utility: visible before the menu at every breakpoint. */
.wc-language-nav{display:flex;align-items:center;gap:8px;margin-inline-start:10px;flex:0 0 auto}
.wc-language-nav a{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;
  padding:0 5px;text-decoration:none;font-family:var(--mono,'IBM Plex Mono',monospace)!important;
  font-size:12px!important;line-height:1!important;letter-spacing:.08em!important;text-transform:uppercase!important;
  color:var(--lime-3,#A29B8F)!important;position:relative
}
.wc-language-nav a[aria-current="page"]{color:var(--lime-1,#ECE4D7)!important}
.wc-language-nav a[aria-current="page"]::after{content:"";position:absolute;inset-inline:5px;bottom:6px;height:1px;background:var(--gilt,#C6A15B)}

/* A single mobile/deep-page menu system for EN / AR / FR / ES. */
.tb-menu-toggle{display:none}
@media (max-width:1040px){
  /* Home + Ain Ghazal header: language utility never disappears into hamburger. */
  .header-inner{display:flex!important;align-items:center!important;gap:8px!important;min-height:74px!important;padding:10px max(18px,var(--safe,22px))!important;position:relative}
  .site-header .brand{margin-inline-end:auto!important;width:auto!important;max-width:none!important;flex:0 0 auto}
  .site-header .brand picture{display:block;line-height:0}
  .site-header .brand img{width:190px!important;max-width:190px!important;height:auto!important}
  .site-header .language-nav{display:flex!important;align-items:center!important;gap:2px!important;flex:0 0 auto!important}
  .site-header .language-nav a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:0 5px!important;font-size:12px!important;line-height:1!important;letter-spacing:.06em!important}
  .site-header .menu-toggle{display:block!important;flex:0 0 44px!important;width:44px!important;height:44px!important;padding:9px!important;grid-column:auto!important;grid-row:auto!important}
  .site-header .main-nav{display:none!important}
  .site-header.menu-open .main-nav{
    display:flex!important;position:absolute!important;top:100%;inset-inline:0;z-index:101;
    flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
    gap:0!important;padding:14px max(18px,var(--safe,22px)) 22px!important;margin:0!important;
    background:rgba(11,10,8,.98)!important;border-top:1px solid var(--rule-dark,rgba(238,231,220,.18))!important;
    border-bottom:1px solid var(--rule-dark,rgba(238,231,220,.18))!important;backdrop-filter:blur(14px)
  }
  .site-header.menu-open .main-nav a{display:flex!important;align-items:center!important;min-height:50px!important;padding:5px 0!important;font-size:18px!important;letter-spacing:.02em!important;text-transform:none!important}
  .site-header.menu-open .language-nav{display:flex!important;padding:0!important;border:0!important}

  /* Inner-page topbar: logo + visible languages + menu, then a clean full-width nav. */
  nav.topbar .w{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;padding-top:10px!important;padding-bottom:10px!important}
  nav.topbar .tb-seal{display:block!important;margin-inline-end:auto!important;max-width:none!important;flex:0 0 auto!important}
  nav.topbar .tb-seal picture{display:block;line-height:0}
  nav.topbar .tb-logo,html body nav.topbar .tb-logo,html body .tb-seal .tb-logo{width:190px!important;max-width:190px!important;height:auto!important}
  nav.topbar .wc-language-nav{order:2;margin-inline-start:0;gap:1px}
  nav.topbar .wc-language-nav a{min-height:44px;padding-inline:5px;font-size:12px!important}
  nav.topbar .tb-menu-toggle{
    order:3;display:flex!important;align-items:center;justify-content:center;gap:8px;flex:0 0 44px;
    width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid var(--rule,rgba(198,161,91,.24));
    background:transparent;color:var(--lime-1,#ECE4D7);cursor:pointer
  }
  nav.topbar .tb-menu-label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  nav.topbar .tb-menu-icon{display:block;width:18px}
  nav.topbar .tb-menu-icon i{display:block;height:1px;background:currentColor;margin:4px 0;transition:transform .22s ease,opacity .22s ease}
  nav.topbar.is-open .tb-menu-icon i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  nav.topbar.is-open .tb-menu-icon i:nth-child(2){opacity:0}
  nav.topbar.is-open .tb-menu-icon i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  nav.topbar .tb-links{order:10;display:none!important;width:100%!important;margin:4px 0 0!important;padding:12px 0 2px!important;border-top:1px solid var(--rule-faint,rgba(198,161,91,.13));grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2px!important}
  nav.topbar.is-open .tb-links{display:grid!important}
  nav.topbar .tb-links > a{display:flex!important;align-items:center!important;justify-content:center!important;min-height:50px!important;padding:8px!important;border:1px solid var(--rule-faint,rgba(198,161,91,.13));text-align:center!important;font-size:14px!important;line-height:1.3!important;letter-spacing:.04em!important;text-transform:none!important}
  html[dir="rtl"] nav.topbar .tb-links > a{font-family:var(--hz-ar-ui,'Noto Sans Arabic',sans-serif)!important;font-size:16px!important;letter-spacing:0!important}
}

@media (max-width:760px){
  body{font-size:18px!important}
  .site-header .brand img{width:126px!important;max-width:126px!important;height:auto!important}
  nav.topbar .tb-logo,html body nav.topbar .tb-logo,html body .tb-seal .tb-logo{width:126px!important;max-width:126px!important;height:auto!important}
  .site-header .language-nav a,.wc-language-nav a{font-size:11.5px!important;padding-inline:4px!important;letter-spacing:.04em!important}
  nav.topbar .w{padding-inline:20px!important}
  .pagehead{padding-top:58px}
  .footer-resources{gap:8px 18px;margin-top:24px}
  .footer-resources a{font-size:13px!important}
}

@media (max-width:390px){
  .site-header .brand img,nav.topbar .tb-logo,html body nav.topbar .tb-logo,html body .tb-seal .tb-logo{width:116px!important;max-width:116px!important}
  .site-header .language-nav a,.wc-language-nav a{font-size:11px!important;padding-inline:3px!important}
  nav.topbar .w{padding-inline:16px!important}
}

/* RTL remains true RTL, but international contact data stays LTR. */
html[dir="rtl"] a[href^="mailto:"],html[dir="rtl"] a[href^="tel:"],html[dir="rtl"] a[href^="https://wa.me/"]{direction:ltr;unicode-bidi:isolate}

/* Reduced motion never hides meaning and keeps native scrolling. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .reveal,.r,figure,figcaption,.rule,.foot-div,.stamp,.seal-open,.seal-div,.mv{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important}
  figure img{transform:none!important;filter:none!important;transition:none!important;animation:none!important}
}

/* Keep the existing mobile lockup sizes authoritative over older global rules. */
@media (max-width:1040px){
  html body .site-header .brand{width:auto!important;min-width:0!important;max-width:none!important}
  html body .site-header .brand img{width:190px!important;max-width:190px!important}
}
@media (max-width:760px){
  html body .site-header .brand img{width:126px!important;max-width:126px!important}
}
@media (max-width:390px){
  html body .site-header .brand img{width:min(116px,calc(100vw - 228px))!important;max-width:min(116px,calc(100vw - 228px))!important}
}

/* Navigation remains usable until its controller has bound working events. */
@media(max-width:1040px){
  html body .site-header:not([data-hz-menu-ready]){position:relative!important}
  html body .site-header:not([data-hz-menu-ready]) .header-inner{flex-wrap:wrap!important}
  html body .site-header:not([data-hz-menu-ready]) .main-nav{
    position:static!important;display:flex!important;flex:0 0 100%;order:4;
    flex-wrap:wrap;gap:8px 20px!important;padding:12px 0!important;margin:0!important;
    height:auto!important;opacity:1!important;visibility:visible!important;transform:none!important
  }
  html body .site-header:not([data-hz-menu-ready]) .main-nav a{min-height:44px;display:flex;align-items:center}
  html body .site-header:not([data-hz-menu-ready]) .menu-toggle,
  html body nav.topbar:not([data-hz-menu-ready]) .tb-menu-toggle{display:none!important}
  html body nav.topbar:not([data-hz-menu-ready]) .tb-links{display:grid!important}
}
/* Without the message-preparation controller, expose direct contact choices. */
html:not([data-hz-enquiry-ready]) .intent-grid,
html:not([data-hz-enquiry-ready]) .enquiry-form{display:none!important}
html:not([data-hz-enquiry-ready]) .contact-actions{display:grid!important}

.video-motion-poster{display:none}
@media(prefers-reduced-motion:reduce){
  .vidfig{background:none!important;aspect-ratio:auto!important}
  .vidfig .video-motion-poster{display:block;width:100%;height:auto;transform:none!important;filter:none!important}
}

.colophon .hhs-credit > .role{margin:0 0 6px}
.hz-motion-control{font-size:12px!important;line-height:1.4;opacity:.9}
html[dir="rtl"] .hz-motion-control{font-family:var(--hz-ar-ui,'Noto Sans Arabic',sans-serif);letter-spacing:0}

/* Contextual references keep the existing editorial typography. */
a.context-link{color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:.2em}
a.context-link:hover{text-decoration-thickness:2px}
a.context-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* Restore the monumental numeral; the global strong reset must not size it. */
html body .ain-age > strong{font-size:clamp(96px,11.2vw,200px)!important}
@media(max-width:980px){
  html body .ain-age > strong{font-size:clamp(96px,20vw,190px)!important}
}
@media(max-width:760px){
  html body .ain-age > strong{font-size:clamp(88px,24vw,140px)!important}
}

/* The companion artwork year has the same protected display role. */
html body .abh-num > strong{font-size:clamp(120px,16vw,250px)!important}
@media(max-width:980px){
  html body .abh-num > strong{font-size:clamp(110px,28vw,200px)!important}
}