/* ==========================================================================
   The Barber Castle — shared components
   Header, navigation, actions, cards, menu rows, footer
   ========================================================================== */

/* --- Buttons and links -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.6rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background: var(--bc-ink);
  color: var(--bc-canvas);
}

.btn--primary:hover {
  background: var(--bc-brass-soft);
}


.btn--brass:hover {
  background: var(--bc-brass-soft);
}

.btn--ghost {
  border-color: var(--bc-line-2);
  color: var(--bc-ink);
}

.btn--ghost:hover {
  border-color: var(--bc-ink);
  background: rgba(244, 242, 236, 0.06);
}

.btn--on-media {
  border-color: rgba(244, 242, 236, 0.45);
  background: rgba(13, 15, 14, 0.35);
  backdrop-filter: blur(6px);
  color: var(--bc-ink);
}

.btn--on-media:hover {
  background: rgba(13, 15, 14, 0.7);
  border-color: var(--bc-ink);
}

.btn--sm {
  min-height: 40px;
  padding: 0.45rem 1rem;
  font-size: var(--fs-micro);
}

.btn--block {
  width: 100%;
}

.btn:active {
  transform: translateY(1px);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--bc-brass);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.link-arrow svg {
  width: 14px;
  height: 10px;
  flex: none;
  /* The glyph is drawn pointing right. The flex row reverses under RTL, which
     moves the arrow to the leading side of the label but does not turn the
     arrowhead round, so it would point back into the text it belongs to. The
     RTL block mirrors it. */
  transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover {
  border-bottom-color: var(--bc-brass);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

.link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bc-line-2);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.link-underline:hover {
  text-decoration-color: var(--bc-brass);
}

/* --- Header -------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 8, 7, 0.78), rgba(6, 8, 7, 0));
  opacity: 1;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}

.masthead.is-stuck {
  background: rgba(13, 15, 14, 0.9);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--bc-line);
}

.masthead.is-stuck::before {
  opacity: 0;
}

.masthead__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
}

.brand img {
  width: auto;
  height: 28px;
  background: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.nav a {
  position: relative;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--bc-ink-2);
  padding: 0.35rem 0;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--bc-brass);
  transform: scaleX(0);
  /* The underline wipes in from the start edge of the item. Written as the two
     physical origins rather than a logical keyword because transform-origin
     has no logical values; the RTL override below picks the other one. */
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--bc-ink);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bc-line-2);
  border-radius: var(--r-1);
  background: rgba(13, 15, 14, 0.4);
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--bc-ink);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.nav-toggle span {
  position: relative;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle span::before {
  top: -6px;
}
.nav-toggle span::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Mobile navigation --------------------------------------------------- */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  background: var(--bc-canvas);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}

.mobile-nav.is-open {
  transform: translateY(0);
  visibility: visible;
}

.mobile-nav ul {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
}

.mobile-nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--bc-line);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  text-transform: uppercase;
  line-height: 1.05;
}

.mobile-nav a span {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--bc-ink-3);
}

.mobile-nav__foot {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (max-width: 1023px) {
  .nav {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .masthead__actions .btn {
    display: none;
  }
  /* The masthead's copy of the language control steps aside once the nav
     collapses: the actions row is down to the hamburger, and the mobile nav
     carries the control instead. Two copies of the same control in one viewport
     would also mean two elements announcing the same state. */
  .masthead__actions .lang {
    display: none;
  }
}

/* --- Cards --------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--r-1);
  overflow: hidden;
}

.card--plain {
  background: transparent;
}

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--bc-surface);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__body {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  text-transform: uppercase;
  line-height: 1.05;
}

.card__text {
  color: var(--bc-ink-2);
  font-size: var(--fs-small);
  margin: 0;
}

.card__foot {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Media-backed link card: full-bleed photo with overlaid copy */
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-1);
  isolation: isolate;
  background: var(--bc-surface);
}

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1100ms var(--ease-out);
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 10, 9, 0.9) 0%, rgba(8, 10, 9, 0.42) 45%, rgba(8, 10, 9, 0.12) 100%);
  transition: opacity var(--dur) var(--ease-out);
}

.tile:hover img {
  transform: scale(1.045);
}


.tile__body h3 {
  font-size: var(--fs-display-m);
}

.tile__body p {
  color: rgba(244, 242, 236, 0.82);
  font-size: var(--fs-small);
  max-width: 42ch;
  margin: 0;
}

.tile__tag {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--bc-brass);
}

/* --- Menu rows (services) ------------------------------------------------ */

.menu {
  border-top: 1px solid var(--bc-line);
}


.menu__name {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--bc-ink);
}


.menu__dur {
  font-size: var(--fs-meta);
  color: var(--bc-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.menu__price {
  font-size: var(--fs-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bc-ink);
  white-space: nowrap;
  min-width: 4.5rem;
  /* `end`, not `right`: the price column sits at the end of the row in both
     directions, and hard-coding right left the Arabic ledger's prices against
     the wrong edge of their own column. */
  text-align: end;
}


.menu__group h3 {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  text-transform: uppercase;
  color: var(--bc-brass);
}

@media (max-width: 640px) {
  .menu__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .menu__desc {
    grid-column: 1 / -1;
  }
}

/* --- Stat / proof strip -------------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1px;
  background: var(--bc-line);
  border: 1px solid var(--bc-line);
  border-radius: var(--r-1);
  overflow: hidden;
}




/* --- Split feature rows -------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.split--wide-right {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-1);
}

@media (max-width: 860px) {
  .split,
  .split--wide-right {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  background: var(--bc-canvas-2);
  border-top: 1px solid var(--bc-line);
  padding-top: clamp(3rem, 6vw, 5.5rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.footer__brand img {
  width: auto;
  height: 32px;
  background: none;
  margin-bottom: 1.5rem;
}

.footer h4 {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--bc-brass);
  margin-bottom: 1.1rem;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer a {
  font-size: var(--fs-small);
  color: var(--bc-ink-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer a:hover {
  color: var(--bc-ink);
}

.footer address {
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--bc-ink-2);
  line-height: 1.6;
}

.footer__branch + .footer__branch {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bc-line);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 1.5rem;
  border-top: 1px solid var(--bc-line);
  font-size: var(--fs-meta);
  color: var(--bc-ink-3);
}

/* The two branch groups sit side by side on a wide viewport and wrap as whole
   groups on a narrow one.

   It has to wrap. It did not before: a plain `display: flex` with no
   `flex-wrap` squeezed both groups into one 550px row at every width, so on a
   phone the two sets of icons were compressed into a single line while
   `.footer__social-group + .footer__social-group { margin-top }` — written for a
   vertical stack — never applied at all, because the siblings were on one row. */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
  margin-top: var(--s-2);
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.footer__social svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1023px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Mobile sticky action ------------------------------------------------- */

.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: var(--s-2);
  padding: 0.65rem var(--gutter) calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 15, 14, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--bc-line);
}

.mobile-bar .btn {
  flex: 1;
}

@media (max-width: 640px) {
  .mobile-bar {
    display: flex;
  }
  body {
    padding-bottom: 76px;
  }
}
/* --- Ledger index on the full menu ------------------------------------------ */

.menu--numbered .menu__row {
  grid-template-columns: 2.5rem minmax(0, 1fr) auto auto;
}

.menu__index {
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--bc-ink-3);
  align-self: baseline;
  padding-top: 0.15em;
}

.menu__row:hover .menu__index,
.menu__row:focus-within .menu__index {
  color: var(--bc-brass);
}

@media (max-width: 640px) {
  .menu--numbered .menu__row {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
  }
  .menu--numbered .menu__dur {
    display: none;
  }
}

/* ==========================================================================
   GOLD PASS
   The brand brass is a flat #C8A068 in the logo, but a flat fill reads as
   beige on a dark canvas. These rules give the gold a lit-metal treatment on
   the surfaces that carry it: the eyebrow rule, the primary action and the
   brass button. Everything stays legible — the plate only sits behind ink that
   is already dark.
   ========================================================================== */

/* The short rule that opens every eyebrow becomes a lit edge. */
.eyebrow::before {
  background: var(--bc-brass-edge);
  opacity: 1;
  width: 34px;
  height: 2px;
}

/* Primary action: struck brass plate with a bright top bevel. */
.btn--primary {
  position: relative;
  background: var(--bc-brass-plate);
  color: var(--bc-ink-on-brass);
  box-shadow:
    inset 0 1px 0 rgba(242, 221, 176, 0.55),
    0 10px 26px -18px rgba(200, 160, 104, 0.8);
}

.btn--primary:hover {
  background: linear-gradient(
    168deg,
    var(--bc-brass-bright) 0%,
    var(--bc-brass-soft) 38%,
    var(--bc-brass) 100%
  );
  color: var(--bc-ink-on-brass);
}

.btn--brass {
  background: var(--bc-brass-plate);
  color: var(--bc-ink-on-brass);
  box-shadow: inset 0 1px 0 rgba(242, 221, 176, 0.45);
}

.btn--brass:hover {
  background: linear-gradient(
    168deg,
    var(--bc-brass-bright) 0%,
    var(--bc-brass-soft) 40%,
    var(--bc-brass) 100%
  );
  color: var(--bc-ink-on-brass);
}

/* Brass-on-brass needs a dark rule under it or the border vanishes into the
   plate. */
.btn--primary,
.btn--brass {
  border-color: rgba(122, 90, 48, 0.65);
}

/* ==========================================================================
   BRANCH PROFILES
   Generated from site/build/social.py, one list per branch. A row is a link,
   so these are the rare case where a bordered container is justified: the whole
   row is the hit target. Divider-led rather than card-led, to stay consistent
   with the rest of the site.
   ========================================================================== */

.profile-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3rem);
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--bc-line);
}

.profile-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--bc-line);
  color: var(--bc-ink);
  transition: color var(--dur-fast) var(--ease-out),
              padding-inline-start var(--dur) var(--ease-out);
}

.profile-row:hover {
  color: var(--bc-brass-soft);
  padding-inline-start: var(--s-2);
}

.profile-row:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: 2px;
}

.profile-row__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(200, 160, 104, 0.1);
  color: var(--bc-brass);
  transition: background var(--dur) var(--ease-out);
}

.profile-row__icon svg,
.footer__social-links svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.profile-row:hover .profile-row__icon {
  background: var(--bc-brass-plate);
  color: var(--bc-ink-on-brass);
}

.profile-row__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.profile-row__name {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
}

.profile-row__url {
  font-size: var(--fs-micro);
  color: var(--bc-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-row__go {
  flex: none;
  /* `auto` on the inline-start margin pushes the arrow to the far edge of the
     row in whichever direction that is; a hard left margin put it on the wrong
     side of the label in Arabic. The resting nudge is mirrored below. */
  margin-inline-start: auto;
  color: var(--bc-brass);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

.profile-row__go svg {
  display: block;
  width: 0.875rem;
  height: 0.625rem;
}

.profile-row:hover .profile-row__go,
.profile-row:focus-visible .profile-row__go {
  opacity: 1;
  transform: translateX(0);
}

.profile-block__note {
  margin-top: var(--s-4);
  max-width: 62ch;
}

/* Icon-only in the footer, where the label is available to assistive tech. */
/* No sibling margin here any more. The groups are laid out by `.footer__social`
   with `gap`, which works whether they wrap or not; a `+` margin-top only ever
   applied to a vertical stack and was dead while the row did not wrap. */
.footer__social-label {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--bc-ink-2);
}

/* The city is its own line, not a span inside the label. Side by side, "Barber
   Castle DXB" and "Dubai" set as one small-caps line read as a single run-on
   string — and the suffix is load-bearing, because it is how the two branches'
   accounts are distinguished on every platform (`thebarbercastle.dxb` vs
   `thebarbercastle.eg`), so neither half can be dropped. A second line makes the
   pair read as label-over-value without editing owner-supplied data. */
.footer__social-city {
  margin: 0.15rem 0 0.5rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--bc-brass);
}

.footer__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.footer__social-links a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--bc-line);
  border-radius: 50%;
  color: var(--bc-ink-2);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.footer__social-links a:hover {
  color: var(--bc-ink-on-brass);
  background: var(--bc-brass-plate);
  border-color: var(--bc-brass);
}

.footer__social-links a:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: 2px;
}

.footer__social-links svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Visually hidden but not display:none, so the icon links keep their names. */
.u-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .profile-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The team plate. Same 4:5 as the old portraits, so the grid keeps its rhythm. */
.team-card__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bc-line-brass);
  background:
    radial-gradient(
      120% 90% at 50% 8%,
      color-mix(in oklab, var(--bc-surface) 82%, var(--bc-brass-soft)) 0%,
      var(--bc-surface) 62%
    );
  color: var(--bc-brass);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  line-height: 1;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.team-card:hover .team-card__plate {
  color: var(--bc-brass-bright);
  border-color: var(--bc-brass);
}

/*
 * Tap targets in the shared chrome.
 *
 * The masthead brand and the whole footer column of links measured 19-28px tall
 * at 390px: twenty footer links, four branch/contact links, the social row and
 * the wordmark. They are the most-used navigation on the page and all of them
 * were under half the 44px target size. Keyed on the same 767px breakpoint and
 * coarse-pointer test the homepage uses.
 */
@media (max-width: 767px), (pointer: coarse) {
  .brand {
    min-height: 44px;
  }

  .footer ul {
    gap: 0.15rem;
  }

  .footer ul a,
  .footer address a,
  .footer__social-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer__social-links {
    gap: 0.15rem;
  }
}

/* ==========================================================================
   Arabic / RTL

   Flex and grid containers reverse themselves under `dir`, so the header, the
   nav row, the mobile bar and the footer grid need nothing here: the logo goes
   to the right, the actions to the left, the footer's four columns flip. What
   does need fixing is everything written as a physical edge, and the
   directional glyphs — a flex row reversing is not the same thing as a mirrored
   icon.

   Every rule below is paired with its own rest state rather than leaning on
   `--nudge`, because `.profile-row:hover .profile-row__go` and a
   `[dir="rtl"] .profile-row__go` are both specificity (0,2,0): whichever is
   written last wins outright, and a single-direction override silently kills
   the hover animation.
   ========================================================================== */

/* The nav underline wipes in from the item's start edge. transform-origin has
   no logical values, so the two physical origins are written out. */
[dir="rtl"] .nav a::after {
  transform-origin: right center;
}

/* The arrow glyphs are drawn pointing right. Under RTL the flex row puts the
   arrow at the leading side of the label but leaves the arrowhead pointing back
   into it, so it is mirrored. */
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .profile-row__go svg {
  transform: scaleX(-1);
}

/* Hover travel, still in the reading direction: `scaleX(-1) translateX(4px)`
   applies the translate first and the mirror second, so the icon ends up 4px to
   the left — the way the mirrored arrowhead points. The profile row's resting
   offset mirrors the same way. */
[dir="rtl"] .link-arrow:hover svg {
  transform: scaleX(-1) translateX(4px);
}

[dir="rtl"] .profile-row__go {
  transform: translateX(4px);
}

[dir="rtl"] .profile-row:hover .profile-row__go {
  transform: translateX(0);
}

/*
 * A held space, for a branch that has no photography yet.
 *
 * Not a blank box and not a photograph of the wrong shop. Helwan trades with
 * unconfirmed details, so an image of Dubai beside it would assert something the
 * owner has not. This states what is missing, in the same brass the rest of the
 * site uses, and it keeps the same 4:3 / 22rem box the old placeholder occupied
 * so nothing around it moves.
 */
.pending-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--s-5);
  text-align: center;
  border: 1px solid var(--bc-line-brass);
  border-radius: var(--r-1);
  background:
    radial-gradient(
      130% 100% at 50% 0%,
      color-mix(in oklab, var(--bc-surface) 80%, var(--bc-brass-soft)) 0%,
      var(--bc-surface) 58%,
      var(--bc-canvas) 100%
    );
}

.pending-photo__mark {
  display: block;
  width: clamp(2.25rem, 5vw, 3.25rem);
  color: var(--bc-brass);
  opacity: 0.85;
}

.pending-photo__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--bc-ink);
}

.pending-photo__note {
  margin: 0;
  max-width: 28ch;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--bc-ink-2);
}

/* Who actually performs a treatment, on the page where you choose it. */
.crew-note {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-inline-start: 2px solid var(--bc-brass);
  background: var(--bc-canvas-2);
}

.crew-note p {
  margin: 0;
}

.crew-note p + p {
  margin-top: 0.35rem;
}

.crew-note strong {
  color: var(--bc-ink);
  font-weight: 600;
}

[data-canvas="light"] .crew-note {
  background: var(--bc-surface);
}

/* ==========================================================================
   The location panel
   ========================================================================== */

/*
 * A map behind a click-to-load facade.
 *
 * The facade is a brass line drawing of the shopfront rather than a grey "map
 * unavailable" box, so the panel is designed even when the map is never opened.
 * Loading is deferred because an iframe to Google is a third-party request that
 * would otherwise run on every visit, log the IP and set cookies, for a map most
 * visitors will not scroll to.
 */
.map-panel {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-4);
}

.map-panel__frame {
  position: relative;
  border: 1px solid var(--bc-line-brass);
  border-radius: var(--r-1);
  overflow: hidden;
  background: var(--bc-canvas-2);
}

/*
 * Two columns: the drawing and the address, side by side.
 *
 * The drawing was absolutely positioned behind the text, so the shopfront's door
 * and mark landed exactly under the address and the two fought — it read as a
 * grid behind a paragraph rather than as a picture of the shop. Giving the
 * drawing its own column removes the overlap entirely and lets each be legible.
 */
.map-panel__facade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-5);
  min-height: clamp(15rem, 26vw, 18rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background:
    linear-gradient(
      100deg,
      color-mix(in oklab, var(--bc-canvas) 88%, var(--bc-brass-deep)) 0%,
      var(--bc-canvas) 46%
    );
}

.map-panel__drawing {
  width: 100%;
  height: 100%;
  max-height: 15rem;
  opacity: 0.95;
  filter: drop-shadow(0 0 16px color-mix(in oklab, var(--bc-brass) 20%, transparent));
}

@media (max-width: 767px) {
  .map-panel__facade {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }

  .map-panel__drawing {
    max-height: 9rem;
  }
}

.map-panel__facade-body {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  text-align: center;
  max-width: 34ch;
}

.map-panel__address {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: 1.05;
  color: var(--bc-ink);
  text-wrap: balance;
}

.map-panel__privacy {
  margin: 0;
  max-width: 40ch;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--bc-ink-3);
}

.map-panel iframe {
  display: block;
  width: 100%;
  height: clamp(16rem, 38vw, 24rem);
  border: 0;
}

.map-panel__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s-4) var(--s-6);
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--bc-line);
}

.map-panel__facts dt {
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--bc-ink-3);
}

.map-panel__facts dd {
  margin: 0.35rem 0 0;
  font-size: var(--fs-body);
  color: var(--bc-ink);
}

.map-panel__facts dd a {
  display: block;
}

.map-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

[data-canvas="light"] .map-panel__frame {
  background: var(--bc-surface);
}

[data-canvas="light"] .map-panel__address {
  color: var(--bc-ink);
}

[data-canvas="light"] .map-panel__privacy {
  color: var(--bc-ink-3);
}

/* ==========================================================================
   The language disclosure

   A status, not a switch. The Arabic site is not published — see the note in
   build/strings_ar.py — so this control has no href and opens an explanation
   instead. It is styled as a compact bordered chip so it reads as part of the
   masthead's control group rather than as a link that does nothing.
   ========================================================================== */

.lang {
  position: relative;
}

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.35rem 0.6rem 0.35rem 0.65rem;
  border: 1px solid var(--bc-line);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--bc-ink-2);
  font: inherit;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.lang__btn:hover,
.lang.is-open .lang__btn {
  border-color: var(--bc-line-brass);
  color: var(--bc-brass);
}

.lang__code {
  color: var(--bc-ink);
  font-weight: 500;
}

/* The Arabic option is shown so the bilingual intention is visible, but marked
   as unavailable: dimmed, and no hover affordance, because pressing it opens the
   note rather than navigating. */
.lang__alt {
  color: var(--bc-ink-3);
  padding-inline-start: 0.4rem;
  border-inline-start: 1px solid var(--bc-line);
  line-height: 1;
}

.lang__caret {
  width: 0.55rem;
  height: 0.4rem;
  color: var(--bc-ink-3);
  transition: transform var(--dur-fast) var(--ease-out);
}

.lang.is-open .lang__caret {
  transform: rotate(180deg);
}

.lang__note {
  position: absolute;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  z-index: 30;
  width: min(20rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-4);
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--r-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  text-align: start;
}

.lang__note-title {
  margin: 0 0 0.4rem;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--bc-brass);
}

.lang__note-body {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--bc-ink-2);
}

.lang__note-meta {
  margin: var(--s-3) 0 0;
}

.lang__pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--bc-line-brass);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--bc-brass);
}

/* In the mobile nav the note is a full-width block rather than a popover: the
   panel already has the visitor's full attention and a floating card inside it
   would trap them. */
.mobile-nav__foot .lang {
  margin-top: var(--s-3);
}

.mobile-nav__foot .lang__btn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
}

.mobile-nav__foot .lang__note {
  position: static;
  width: auto;
  margin-top: var(--s-3);
  box-shadow: none;
  background: var(--bc-surface-2);
}

/* ==========================================================================
   The shop assistant teaser

   Bottom-right, above the mobile bar. The panel is a handover, not a
   conversation: there is no assistant behind it, and inventing one would claim
   a capability the shop does not have.
   ========================================================================== */

.assist {
  position: fixed;
  inset-inline-end: var(--gutter);
  /* Clears .mobile-bar on a phone. Without this the button sits on top of the
     Book / Call bar and neither is reachable. */
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-3);
}

.assist[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .assist {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

.assist__fab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.5rem 0.95rem 0.5rem 0.7rem;
  border: 1px solid var(--bc-line-brass);
  border-radius: var(--r-pill);
  background: var(--bc-surface);
  color: var(--bc-ink);
  font: inherit;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

/* Armed by main.js once the hero has scrolled past, so the button never
   competes with the hero's own call to action. The control stays reachable by
   keyboard before that point: it is opacity 0 and inert to pointer events, not
   display:none, so it is still the last tab stop for anyone using the keyboard. */
.assist:not(.is-visible):not(.is-open) .assist__fab {
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
}

/* Parked at the foot of the page, where the footer carries its own Book and
   Call controls and a fixed button would otherwise be drawn over the copyright
   line and both social rails. Set by an IntersectionObserver in main.js, not by
   scroll position, so it is correct whatever the footer's height turns out to
   be. The panel is exempt: it is never parked while open. */
.assist.is-parked {
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
}

.assist.is-parked .assist__fab {
  opacity: 0;
  pointer-events: none;
}

.assist__fab:hover,
.assist.is-open .assist__fab {
  border-color: var(--bc-brass);
  background: var(--bc-surface-2);
}

.assist__glyph {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-pill);
  background: var(--bc-brass-sheen);
  color: var(--bc-ink-on-brass);
  flex: none;
}

.assist__glyph svg {
  width: 1.15rem;
  height: 1.15rem;
}

.assist__flag {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--bc-line-brass);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  color: var(--bc-brass);
}

.assist__panel {
  width: min(23rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(32rem, calc(100vh - 8rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-5);
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--r-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  text-align: start;
}

.assist__panel[hidden] {
  display: none;
}

.assist__head {
  position: relative;
  padding-inline-end: 2rem;
  margin-bottom: var(--s-3);
}

.assist__eyebrow {
  margin: 0 0 0.35rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--bc-brass);
}

.assist__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--bc-ink);
}

.assist__close {
  position: absolute;
  top: -0.4rem;
  inset-inline-end: -0.4rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--bc-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--bc-ink-2);
  cursor: pointer;
}

.assist__close:hover {
  border-color: var(--bc-line-brass);
  color: var(--bc-brass);
}

.assist__close svg {
  width: 0.7rem;
  height: 0.7rem;
}

.assist__body {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--bc-ink-2);
}

.assist__body--quiet {
  color: var(--bc-ink-3);
}

.assist__actions {
  display: flex;
  flex-direction: column;
  margin-top: var(--s-4);
  border-top: 1px solid var(--bc-line);
}

.assist__action {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--bc-line);
  color: var(--bc-ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.assist__action:hover .assist__action-label {
  color: var(--bc-brass);
}

.assist__action-label {
  font-size: var(--fs-small);
}

.assist__action-meta {
  flex: none;
  font-size: var(--fs-micro);
  color: var(--bc-ink-3);
  text-align: end;
}

/* ==========================================================================
   Reduced motion

   The coming-soon note and the assistant panel still appear; only the movement
   is dropped, because the state change is the message.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .assist:not(.is-visible):not(.is-open) .assist__fab {
    transform: none;
  }

  .assist__caret {
    transition: none;
  }
}