/*
 * Hospitality UI - front office brand spirit (owner review 2026-09-30: "the site still does not look like the identity
 * we made, not even the logo"). The identity is the owner's logo and login mockup (docs/hospitality/ui/brand/):
 * espresso ground with the eight-point lattice, gold from the logo, Nile blue, sand text, the teal action colour and
 * the clay octagram. Loaded after 30-pages-* and authoritative for the look of the header bar, the home hero, the home
 * sections and the footer; layout, behaviour and every component stay in the earlier files.
 *
 *   header bar   espresso on every page (transparent over the home hero until scrolled), sand text, gold current
 *                page bar and hover, the light logo, a gold hairline under it
 *   home hero    the owner's photo with an espresso scrim, or (demo photo) the brand hero: lattice, gold and Nile
 *                glow, the large logo mark over a Nile horizon in gold line art (hook/fo_hero_art.tpl)
 *   sections     octagram + hairline ornament and a clay eyebrow above each heading, a sand band behind the gallery,
 *                calm lifting cards, bronze prices
 *   footer       espresso with the lattice, gold hairline, gold headings, sand links
 *
 * Colours: the logo palette of the tokens (section 13, --hsp-logo-*, ratios there): sand text 13.52:1, muted 7.42:1,
 * gold 7.98:1 on espresso; bronze prices 6.63:1 and clay eyebrows 5.98:1 on white.
 *
 * @license https://opensource.org/license/osl-3-0-php Open Software License version 3.0
 */

/* =================================================================== 0. palette from the logo */

html.hsp-ui-fo {
  --hsp-ui-espresso: var(--hsp-logo-espresso);
  --hsp-ui-espresso-raised: var(--hsp-logo-espresso-raised);
  --hsp-ui-espresso-line: color-mix(in srgb, var(--hsp-logo-gold) 22%, transparent);
  --hsp-ui-sand: var(--hsp-logo-sand);
  --hsp-ui-sand-strong: var(--hsp-logo-sand-strong);
  --hsp-ui-sand-muted: var(--hsp-logo-sand-muted);
  --hsp-ui-gold: var(--hsp-logo-gold);
  --hsp-ui-gold-light: var(--hsp-logo-gold-light);
  --hsp-ui-gold-deep: var(--hsp-logo-gold-deep);
  --hsp-ui-bronze: var(--hsp-logo-bronze);
  --hsp-ui-nile-blue: var(--hsp-logo-nile);
  --hsp-ui-nile-light: var(--hsp-logo-nile-light);
  --hsp-ui-band: var(--hsp-logo-band);             /* sand band behind a home section (mockup page colour, lighter) */
  --hsp-ui-lattice: url("../../img/lattice.svg");
  --hsp-ui-octagram: url("../../img/octagram.svg");
  --hsp-ui-hover-on-dark: rgb(255 255 255 / 0.07);
}

/* =================================================================== 1. header bar */

html.hsp-ui.hsp-ui-fo #header .header-top,
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero.hsp-ui-header--scrolled .header-top,
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero.hsp-ui-header--menu-open .header-top {
  color: var(--hsp-ui-sand);
  background-color: var(--hsp-ui-espresso);
  border-block-end: var(--hsp-border-w) solid var(--hsp-ui-espresso-line);
}

/* the lattice, very quiet, across the bar */
html.hsp-ui.hsp-ui-fo #header .header-top::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--hsp-ui-gold);
  opacity: 0.05;
  -webkit-mask-image: var(--hsp-ui-lattice);
  mask-image: var(--hsp-ui-lattice);
  -webkit-mask-size: 4.8rem 4.8rem;
  mask-size: 4.8rem 4.8rem;
  transition: opacity var(--hsp-dur-base) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #header .header-top {
  isolation: isolate;
}

/* over the hero: transparent until scrolled (the photo / brand hero shows through) */
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero:not(.hsp-ui-header--scrolled):not(.hsp-ui-header--menu-open) .header-top {
  background-color: transparent;
  border-block-end-color: transparent;
}

html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero:not(.hsp-ui-header--scrolled):not(.hsp-ui-header--menu-open) .header-top::after {
  opacity: 0;
}

html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero.hsp-ui-header--scrolled .header-top,
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--solid .header-top {
  box-shadow: 0 6px 20px rgb(12 10 8 / 0.28);
}

/* the light logo on the espresso bar in every state */
html.hsp-ui.hsp-ui-fo #header .hsp-ui-brand--on-dark:has(.hsp-ui-brand__logo--inverse) .hsp-ui-brand__logo--default {
  display: none;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-brand--on-dark .hsp-ui-brand__logo--inverse {
  display: block;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-brand__logo--mark {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.4));
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-brand__name {
  color: var(--hsp-ui-sand-strong);
  font-weight: var(--hsp-fw-semibold);
  letter-spacing: var(--hsp-ls-lockup);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-brand__mark {
  color: var(--hsp-ui-gold);
}

/* links, account, language, call, cart on the dark bar */
html.hsp-ui.hsp-ui-fo #header .header-top :is(.hsp-ui-nav__link, .hsp-ui-nav__more-btn, .header-top-link, .hsp-ui-account__btn, .hsp-ui-lang__btn, .hsp-ui-header__call, .shopping_cart > a) {
  color: var(--hsp-ui-sand);
}

html.hsp-ui.hsp-ui-fo #header .header-top :is(.hsp-ui-nav__link, .hsp-ui-nav__more-btn, .header-top-link, .hsp-ui-account__btn, .hsp-ui-lang__btn, .hsp-ui-header__call, .shopping_cart > a):hover,
html.hsp-ui.hsp-ui-fo #header .header-top .open > :is(.hsp-ui-account__btn, .hsp-ui-lang__btn, .hsp-ui-nav__more-btn) {
  color: var(--hsp-ui-gold-light);
  background: var(--hsp-ui-hover-on-dark);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__link[aria-current="page"] {
  color: var(--hsp-ui-sand-strong);
}

html.hsp-ui.hsp-ui-fo #header .header-top .hsp-ui-nav__list > .hsp-ui-nav__item > .hsp-ui-nav__link[aria-current="page"]::after {
  background: var(--hsp-ui-gold);
}

/* the "More" menu and other dropdowns stay light popovers */
html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__menu .hsp-ui-nav__link {
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__menu .hsp-ui-nav__link:hover {
  color: var(--hsp-color-text-strong);
  background: var(--hsp-color-surface-hover);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__menu .hsp-ui-nav__link[aria-current="page"]::after {
  background: var(--hsp-ui-gold-deep);
}

/* menu button bars */
html.hsp-ui.hsp-ui-fo #header .hsp-ui-header__toggle .icon-bar {
  background-color: var(--hsp-ui-sand);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-header__toggle:hover {
  background: var(--hsp-ui-hover-on-dark);
}

/* cart count: a gold token */
html.hsp-ui.hsp-ui-fo #header .shopping_cart .ajax_cart_quantity:not(:empty),
html.hsp-ui.hsp-ui-fo #header .shopping_cart .hsp-ui-cart__count {
  color: var(--hsp-ui-espresso);
  background: var(--hsp-ui-gold);
  box-shadow: 0 0 0 2px var(--hsp-ui-espresso);
}

/* keyboard focus on the dark bar: the light ring */
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--solid .header-top :is(a, button):focus-visible,
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--scrolled .header-top :is(a, button):focus-visible,
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--menu-open .header-top :is(a, button):focus-visible {
  box-shadow: var(--hsp-focus-ring-inverse);
}

html.hsp-ui.hsp-ui-fo #header .header-top :is(.dropdown-menu, .hsp-ui-nav__menu, .cart_block) :is(a, button):focus-visible {
  box-shadow: var(--hsp-focus-ring);
}

/* =================================================================== 2. home hero */

/* overline: gold, with a short hairline before it (Latin: small caps tracking like the login mockup) */
html.hsp-ui.hsp-ui-fo #index .header-desc-container .hsp-ui-hero__overline {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-3);
  text-transform: uppercase; /* hsp-lint: allow-uppercase (Latin overline of the login mockup; none in Arabic below) */
  letter-spacing: var(--hsp-ls-brand);
}

html.hsp-ui.hsp-ui-fo[lang^="ar"] #index .header-desc-container .hsp-ui-hero__overline {
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo #index .header-desc-container .hsp-ui-hero__overline::before {
  content: "";
  flex: none;
  inline-size: 3.2rem;
  block-size: 1px;
  background: currentColor;
  opacity: 0.8;
}

@media (min-width: 768px) {
  html.hsp-ui.hsp-ui-fo #index .header-desc-container .hsp-ui-hero__overline {
    color: var(--hsp-ui-gold);
  }

  html.hsp-ui.hsp-ui-fo #index .header-desc-container .hsp-ui-hero__title {
    color: var(--hsp-ui-sand-strong);
    text-shadow: 0 2px 24px rgb(0 0 0 / 0.35);
  }

  html.hsp-ui.hsp-ui-fo #index .header-desc-container .hsp-ui-hero__subtitle {
    color: var(--hsp-ui-sand);
  }

  /* photo hero: the scrim is espresso from the logo */
  html.hsp-ui-fo .hsp-ui-hero__media:not(.hsp-ui-hero__media--brand)::after {
    background:
      linear-gradient(to top, rgb(26 23 18 / 0.82) 0%, rgb(26 23 18 / 0.55) 38%, transparent 78%), /* hsp-lint: allow-physical (gradient direction) */
      linear-gradient(to bottom, rgb(26 23 18 / 0.5) 0, transparent 14rem); /* hsp-lint: allow-physical (gradient direction) */
  }
}

/* ------------------------------------------------------------------ brand hero (no photo of the owner yet) */

html.hsp-ui-fo .hsp-ui-hero__media--brand {
  color: var(--hsp-ui-gold);
  background-color: var(--hsp-ui-espresso);
  isolation: isolate;
}

html.hsp-ui-fo .hsp-ui-hero__media--brand .hsp-ui-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(38rem 30rem at 72% 42%, rgb(208 167 98 / 0.2), transparent 70%),
    radial-gradient(60rem 26rem at 18% 108%, rgb(43 97 124 / 0.34), transparent 72%),
    radial-gradient(80rem 40rem at 50% -20%, rgb(236 206 138 / 0.07), transparent 70%);
}

html.hsp-ui-fo[dir="rtl"] .hsp-ui-hero__media--brand .hsp-ui-hero__glow {
  background:
    radial-gradient(38rem 30rem at 28% 42%, rgb(208 167 98 / 0.2), transparent 70%),
    radial-gradient(60rem 26rem at 82% 108%, rgb(43 97 124 / 0.34), transparent 72%),
    radial-gradient(80rem 40rem at 50% -20%, rgb(236 206 138 / 0.07), transparent 70%);
}

html.hsp-ui-fo .hsp-ui-hero__media--brand .hsp-ui-hero__lattice {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--hsp-ui-gold);
  opacity: 0.07;
  -webkit-mask-image: var(--hsp-ui-lattice), linear-gradient(to bottom, black 0%, black 45%, transparent 100%); /* hsp-lint: allow-physical (gradient direction) */
  mask-image: var(--hsp-ui-lattice), linear-gradient(to bottom, black 0%, black 45%, transparent 100%); /* hsp-lint: allow-physical (gradient direction) */
  -webkit-mask-size: 6.4rem 6.4rem, 100% 100%;
  mask-size: 6.4rem 6.4rem, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* the scene: logo mark over the Nile horizon, on the end side (desktop) or centred (phone) */
html.hsp-ui-fo .hsp-ui-hero__scene {
  position: absolute;
  inset-block: var(--hsp-ui-header-h) 0;
  inset-inline: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

html.hsp-ui-fo .hsp-ui-hero__art {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 70%;
  opacity: 0.6;
}

html.hsp-ui-fo .hsp-ui-hero__art-shore {
  stroke-width: 1.8;
  opacity: 0.95;
}

html.hsp-ui-fo .hsp-ui-hero__art-water {
  color: var(--hsp-ui-nile-light);
  opacity: 0.75;
}

html.hsp-ui-fo .hsp-ui-hero__art-hills {
  opacity: 0.7;
}

html.hsp-ui-fo .hsp-ui-hero__mark-pic {
  display: contents;
}

html.hsp-ui-fo .hsp-ui-hero__mark {
  position: relative;
  z-index: 1;
  display: block;
  inline-size: auto;
  max-inline-size: none;
  block-size: min(62%, 15rem);
  margin-block-end: 3.2rem;
  object-fit: contain;
  filter: drop-shadow(0 10px 28px rgb(0 0 0 / 0.55)) drop-shadow(0 0 36px rgb(208 167 98 / 0.18));
}

@media (min-width: 768px) {
  /* the scene moves to the end half; the art fades out toward the hero text */
  html.hsp-ui-fo .hsp-ui-hero__scene {
    inset-block-end: calc(var(--hsp-ui-hero-overlap) + var(--hsp-space-8));
    inset-inline: 38% 0;
  }

  html.hsp-ui-fo .hsp-ui-hero__art {
    inset-inline: -40% 0;
    inline-size: auto;
    max-block-size: none;
    block-size: 72%;
    inset-block-end: -8%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 42%); /* hsp-lint: allow-physical (fade toward the text side, mirrored in RTL) */
    mask-image: linear-gradient(to right, transparent 0%, black 42%); /* hsp-lint: allow-physical (fade toward the text side, mirrored in RTL) */
  }

  html.hsp-ui-fo[dir="rtl"] .hsp-ui-hero__art {
    transform: scaleX(-1);
  }

  html.hsp-ui-fo .hsp-ui-hero__mark {
    block-size: clamp(18rem, 30vh, 30rem);
    margin-block-end: 9%;
  }

  /* the brand hero is dark already: a lighter scrim just for the text corner */
  html.hsp-ui-fo .hsp-ui-hero__media--brand::after {
    background: linear-gradient(to top, rgb(26 23 18 / 0.72) 0%, rgb(26 23 18 / 0.2) 40%, transparent 70%); /* hsp-lint: allow-physical (gradient direction) */
  }
}

@media (min-width: 1200px) {
  html.hsp-ui-fo .hsp-ui-hero__scene {
    inset-inline: 44% 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.hsp-ui-fo .hsp-ui-hero__mark {
    animation: hsp-ui-hero-rise 900ms var(--hsp-ease-enter) both;
  }

  @keyframes hsp-ui-hero-rise {
    from {
      opacity: 0;
      transform: translateY(1.6rem);
    }
  }
}

/* =================================================================== 3. home sections */

/* eyebrow ornament above every section heading: the clay octagram and a hairline */
html.hsp-ui.hsp-ui-fo #index .home_block_desc_wrapper .home_block_heading::before {
  content: "";
  display: block;
  inline-size: 8.8rem;
  block-size: 1.6rem;
  margin-block-end: var(--hsp-space-3);
  background-color: var(--hsp-color-brand-accent);
  -webkit-mask: var(--hsp-ui-octagram) no-repeat 0 50% / 1.6rem 1.6rem, linear-gradient(black, black) no-repeat 2.6rem 50% / 6.2rem 1px;
  mask: var(--hsp-ui-octagram) no-repeat 0 50% / 1.6rem 1.6rem, linear-gradient(black, black) no-repeat 2.6rem 50% / 6.2rem 1px;
}

html.hsp-ui.hsp-ui-fo[dir="rtl"] #index .home_block_desc_wrapper .home_block_heading::before {
  -webkit-mask-position: 100% 50%, calc(100% - 2.6rem) 50%;
  mask-position: 100% 50%, calc(100% - 2.6rem) 50%;
}

html.hsp-ui.hsp-ui-fo #index .home_block_desc_wrapper .home_block_heading {
  color: var(--hsp-ui-espresso);
}

html.hsp-ui.hsp-ui-fo #index .home_block_desc_wrapper {
  margin-block-end: var(--hsp-space-6);
}

/* section separators of the theme: gone (the ornament and the space do the job) */
html.hsp-ui.hsp-ui-fo #index .home_block_seperator {
  display: none;
}

/* the gallery on a sand band, edge to edge (100vw includes the scrollbar: the page clips sideways, never vertically) */
html.hsp-ui.hsp-ui-fo #index .columns-container {
  overflow-x: clip;
}

html.hsp-ui.hsp-ui-fo #index #hotelInteriorBlock {
  position: relative;
  padding-block: var(--hsp-space-12);
  isolation: isolate;
}

html.hsp-ui.hsp-ui-fo #index #hotelInteriorBlock::before {
  content: "";
  display: block; /* .row clearfix makes it a table, which ignores the insets */
  position: absolute;
  inset-block: 0;
  inset-inline: calc(50% - 50vw);
  z-index: -1;
  background:
    linear-gradient(var(--hsp-ui-band), var(--hsp-ui-band));
  border-block: var(--hsp-border-w) solid color-mix(in srgb, var(--hsp-ui-gold-deep) 22%, transparent);
}

html.hsp-ui.hsp-ui-fo #index #hotelInteriorBlock::after {
  content: "";
  display: block; /* .row clearfix makes it a table, which ignores the insets */
  position: absolute;
  inset-block: 0;
  inset-inline: calc(50% - 50vw);
  z-index: -1;
  background-color: var(--hsp-ui-gold-deep);
  opacity: 0.06;
  -webkit-mask-image: var(--hsp-ui-lattice);
  mask-image: var(--hsp-ui-lattice);
  -webkit-mask-size: 6.4rem 6.4rem;
  mask-size: 6.4rem 6.4rem;
  pointer-events: none;
}

/* the module pads the last group of three with grey "no image" tiles: an incomplete last row reads better */
html.hsp-ui.hsp-ui-fo #index .htlInterior-owlCarousel .interiorbox[aria-hidden="true"] {
  display: none;
}

html.hsp-ui.hsp-ui-fo #index .interiorbox .interiorboxInner {
  border-radius: var(--hsp-radius-lg);
  overflow: hidden;
}

html.hsp-ui.hsp-ui-fo #index .interiorbox .interiorImg {
  transition: transform var(--hsp-dur-slow) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #index .interiorbox:hover .interiorImg {
  transform: scale(1.04);
}

/* amenity and room cards: a quiet lift, gold hairline on hover */
html.hsp-ui.hsp-ui-fo #index :is(.hsp-ui-amenities__item, .hsp-ui-roomcard) /* hsp-lint: allow-shared-block (brand finish over 30-pages-10) */ {
  transition: transform var(--hsp-dur-base) var(--hsp-ease-standard), box-shadow var(--hsp-dur-base) var(--hsp-ease-standard), border-color var(--hsp-dur-base) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #index :is(.hsp-ui-amenities__item, .hsp-ui-roomcard):hover /* hsp-lint: allow-shared-block */ {
  border-color: color-mix(in srgb, var(--hsp-ui-gold) 55%, transparent);
  box-shadow: 0 14px 34px rgb(26 23 18 / 0.12), 0 2px 6px rgb(26 23 18 / 0.06);
  transform: translateY(-2px);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-amenities__media,
html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__media {
  overflow: hidden;
}

html.hsp-ui.hsp-ui-fo #index :is(.hsp-ui-amenities__media, .hsp-ui-roomcard__media) img {
  transition: transform var(--hsp-dur-slow) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #index :is(.hsp-ui-amenities__item, .hsp-ui-roomcard):hover :is(.hsp-ui-amenities__media, .hsp-ui-roomcard__media) img {
  transform: scale(1.04);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-amenities__body .amenity_heading {
  color: var(--hsp-ui-espresso);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-amenities__body .amenity_heading::after {
  content: "";
  display: block;
  inline-size: 3.2rem;
  block-size: 2px;
  margin-block-start: var(--hsp-space-2);
  background: var(--hsp-ui-gold);
  border-radius: var(--hsp-radius-pill);
}

/* room card: title link in espresso, price in bronze from the logo */
html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__title a {
  color: var(--hsp-ui-espresso);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__title a:hover {
  color: var(--hsp-color-text-link-hover);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard :is(.hsp-ui-roomcard__price, .htlRoomTypePriceText, .price) {
  color: var(--hsp-ui-bronze);
}

/* =================================================================== 4. footer */

html.hsp-ui.hsp-ui-fo .footer-container {
  color: var(--hsp-ui-sand-muted);
  background-color: var(--hsp-ui-espresso);
  border-block-start: 1px solid var(--hsp-ui-espresso-line);
  isolation: isolate;
}

html.hsp-ui.hsp-ui-fo .footer-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--hsp-ui-gold);
  opacity: 0.045;
  -webkit-mask-image: var(--hsp-ui-lattice);
  mask-image: var(--hsp-ui-lattice);
  -webkit-mask-size: 6.4rem 6.4rem;
  mask-size: 6.4rem 6.4rem;
}

html.hsp-ui.hsp-ui-fo .footer-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70rem 30rem at 85% 0%, rgb(43 97 124 / 0.18), transparent 70%);
}

/* the band on top: a gold line with the octagram in the middle */
html.hsp-ui-fo .hsp-ui-footer__band {
  position: relative;
  block-size: 3.2rem;
  background: none;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

html.hsp-ui-fo .hsp-ui-footer__band::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(to right, transparent, rgb(208 167 98 / 0.45) 20%, rgb(208 167 98 / 0.45) 80%, transparent); /* hsp-lint: allow-physical (symmetric gradient) */
}

html.hsp-ui-fo .hsp-ui-footer__band::after {
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 1.1rem);
  inset-inline-start: calc(50% - 1.1rem);
  inline-size: 2.2rem;
  block-size: 2.2rem;
  background-color: var(--hsp-ui-gold);
  -webkit-mask: var(--hsp-ui-octagram) center / contain no-repeat;
  mask: var(--hsp-ui-octagram) center / contain no-repeat;
  box-shadow: 0 0 0 0.8rem var(--hsp-ui-espresso);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .footer-section-heading :is(p, .footer-section-heading__title) {
  color: var(--hsp-ui-gold);
  font-size: var(--hsp-fs-xs);
  letter-spacing: var(--hsp-ls-brand-sm);
  text-transform: uppercase; /* hsp-lint: allow-uppercase (Latin footer headings of the identity; none in Arabic below) */
}

html.hsp-ui.hsp-ui-fo[lang^="ar"] .footer-container #footer .footer-section-heading :is(p, .footer-section-heading__title) {
  font-size: var(--hsp-fs-sm);
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer a:not(.btn) {
  color: var(--hsp-ui-sand);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer a:not(.btn):hover {
  color: var(--hsp-ui-gold-light);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__brand .hsp-ui-brand__name {
  color: var(--hsp-ui-sand-strong);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__tagline {
  color: var(--hsp-ui-sand-muted);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__contact i {
  color: var(--hsp-ui-gold);
}

html.hsp-ui.hsp-ui-fo .footer-container :is(.hsp-ui-footer__bottom, .footer-copyright-wrapper, .copyright) {
  color: var(--hsp-ui-sand-muted);
  border-color: var(--hsp-ui-espresso-line);
}

/* =================================================================== 5. phone menu drawer: an espresso head */

html.hsp-ui.hsp-ui-fo #menu_cont .hsp-ui-drawer__head {
  color: var(--hsp-ui-sand);
  background-color: var(--hsp-ui-espresso);
  border-block-end-color: var(--hsp-ui-espresso-line);
}

html.hsp-ui.hsp-ui-fo #menu_cont .hsp-ui-drawer__title {
  color: var(--hsp-ui-sand-strong);
}

html.hsp-ui.hsp-ui-fo #menu_cont .close_navbar {
  color: var(--hsp-ui-sand);
}

html.hsp-ui.hsp-ui-fo #menu_cont .close_navbar:hover {
  color: var(--hsp-ui-gold-light);
  background: var(--hsp-ui-hover-on-dark);
}

html.hsp-ui.hsp-ui-fo #menu_cont .close_navbar:focus-visible {
  box-shadow: var(--hsp-focus-ring-inverse);
}

html.hsp-ui.hsp-ui-fo #menu_cont .wk-nav-style > li > a[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--hsp-ui-gold);
}

html.hsp-ui.hsp-ui-fo[dir="rtl"] #menu_cont .wk-nav-style > li > a[aria-current="page"] {
  box-shadow: inset -3px 0 0 var(--hsp-ui-gold);
}