/* UAE first cut (14 Nov 2026). Everything the UAE corrections sheet added on
   top of the main site lives here, so the copied pages stay as close to
   rayanarchitects.com as possible and the diff between the two sites reads
   as this one file plus markup. Tokens come from each page's own :root. */

/* ── Abu Dhabi and Dubai project sections (home, sheet 1.5) ───────────── */
.uae-work {
  position: relative;
  padding: clamp(4.5rem, 10vw, 8.5rem) 0 clamp(3.5rem, 8vw, 6.5rem);
}
.uae-work--band { background: var(--cream, #FAF8F3); }
.uae-work__head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.uae-work__head .section-head-row { margin-bottom: clamp(0.9rem, 1.6vw, 1.4rem); }
.uae-work__lede {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.6;
  color: var(--muted);
}
.uae-work__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 2rem);
}
@media (max-width: 900px) {
  .uae-work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.uae-tile {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
}
.uae-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.uae-tile__img {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hairline, rgba(0, 0, 0, 0.08));
}
.uae-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 900ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.uae-tile__scrim {
  position: absolute;
  inset: 0;
  /* Bottom carries the name; the faint top band keeps the white number
     readable over pale interiors and skies. */
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 20%),
    linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.22) 38%, rgba(0, 0, 0, 0) 62%);
  pointer-events: none;
}
.uae-tile__num {
  position: absolute;
  top: clamp(0.75rem, 1.4vw, 1.1rem);
  left: clamp(0.8rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.uae-tile__name {
  position: absolute;
  left: clamp(0.8rem, 1.5vw, 1.2rem);
  right: clamp(0.8rem, 1.5vw, 1.2rem);
  bottom: clamp(0.8rem, 1.6vw, 1.3rem);
  color: #FFFFFF;
  font-size: clamp(1.05rem, 1.65vw, 1.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  transition: transform 900ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
@media (hover: hover) {
  .uae-tile:hover .uae-tile__img img { transform: scale(1.045); }
  .uae-tile:hover .uae-tile__name { transform: translateY(-0.15em); }
}
@media (prefers-reduced-motion: reduce) {
  .uae-tile__img img, .uae-tile__name { transition: none; }
}

/* Enquiry card that closes the Dubai grid */
.uae-tile--cta .uae-tile__img {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1rem, 2vw, 1.6rem);
  background: var(--ink, #1A1A1A);
  color: #FFFFFF;
}
.uae-tile__cta-kicker {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.uae-tile__cta-title {
  font-size: clamp(1.15rem, 1.9vw, 2rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.uae-tile__cta-link {
  display: inline-flex;
  gap: 0.5em;
  font-size: 0.9rem;
  font-weight: 500;
  padding-bottom: 0.2em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  align-self: flex-start;
  transition: border-color 300ms ease;
}
@media (hover: hover) {
  .uae-tile--cta:hover .uae-tile__cta-link { border-color: #FFFFFF; }
}

/* ── Full-view lightbox for the project cards ───────────────────────── */
.uae-lb {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0E0E0E;
  color: #FFFFFF;
  overscroll-behavior: contain;
}
.uae-lb::backdrop { background: rgba(0, 0, 0, 0.55); }
.uae-lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.uae-lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(0.9rem, env(safe-area-inset-top)) clamp(1rem, 3vw, 2rem) 0.6rem;
}
.uae-lb__count {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}
.uae-lb__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  --lb-side: clamp(0.75rem, 6vw, 6rem);
}
/* Absolutely placed so the picture is bounded by the stage's real height;
   as a grid child its percentage height resolved against an auto row and
   tall renders overflowed the screen. */
.uae-lb__img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--lb-side);
  width: calc(100% - 2 * var(--lb-side));
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.uae-lb__cap {
  margin: 0;
  padding: 0.9rem clamp(1rem, 3vw, 2rem) max(1.1rem, env(safe-area-inset-bottom));
  text-align: center;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.uae-lb__btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.uae-lb__btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); }
.uae-lb__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.uae-lb__btn svg { width: 16px; height: 16px; }
.uae-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.uae-lb__nav--prev { left: clamp(0.5rem, 1.5vw, 1.5rem); }
.uae-lb__nav--next { right: clamp(0.5rem, 1.5vw, 1.5rem); }
@media (max-width: 720px) {
  /* Arrows over a phone-width photograph hide the picture; the bar carries
     them instead and a swipe does the same job. */
  .uae-lb__nav { position: static; transform: none; }
  .uae-lb__stage { --lb-side: 0.5rem; }
  .uae-lb__navrow { display: flex; gap: 0.5rem; }
}
@media (min-width: 721px) {
  .uae-lb__navrow { display: contents; }
}
html.uae-lb-open { overflow: hidden; }

/* ── Services: location first (sheet 3.1 to 3.4) ───────────────────── */
.loc {
  padding: 0 0 clamp(2rem, 5vw, 4rem);
}
.loc__prompt {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.loc__picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.loc__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-height: 44px;
  padding: clamp(1.25rem, 2.6vw, 2.2rem) clamp(1.1rem, 2.4vw, 2rem);
  border: 1px solid var(--hairline-strong, rgba(0, 0, 0, 0.18));
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 300ms var(--ease-out-quart, ease), border-color 300ms var(--ease-out-quart, ease), color 300ms var(--ease-out-quart, ease);
}
.loc__name {
  font-size: clamp(1.6rem, 3.6vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}
.loc__meta {
  font-size: clamp(0.8rem, 0.95vw, 0.92rem);
  line-height: 1.5;
  color: var(--muted);
  transition: color 300ms var(--ease-out-quart, ease);
}
.loc__arrow {
  position: absolute;
  top: clamp(1.1rem, 2.4vw, 2rem);
  right: clamp(1rem, 2.2vw, 1.8rem);
  width: 18px;
  height: 18px;
  transition: transform 400ms var(--ease-out-expo, ease);
}
.loc__btn[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.loc__btn[aria-selected="true"] .loc__meta { color: rgba(245, 243, 237, 0.72); }
.loc__btn[aria-selected="true"] .loc__arrow { transform: rotate(90deg); }
.loc__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .loc__btn:not([aria-selected="true"]):hover { border-color: var(--ink); }
  .loc__btn:not([aria-selected="true"]):hover .loc__arrow { transform: translateX(3px); }
}
@media (max-width: 520px) {
  .loc__picker { grid-template-columns: minmax(0, 1fr); }
}
.loc-panel[hidden] { display: none; }
.loc-panel { animation: uae-fade-in 520ms var(--ease-out-quart, ease) both; }
.loc-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--hairline, rgba(0, 0, 0, 0.08));
}
.loc-panel__title {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.loc-panel__note { margin: 0; max-width: 52ch; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.loc-empty {
  margin: clamp(1rem, 3vw, 2rem) 0 0;
  padding: clamp(2.5rem, 7vw, 5rem) 1rem;
  border: 1px dashed var(--hairline-strong, rgba(0, 0, 0, 0.18));
  border-radius: 2px;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}
.loc-empty[hidden] { display: none; }
@keyframes uae-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .loc-panel { animation: none; }
}

/* ── Team: UAE directors and associates (sheet 4.1 and 4.2) ─────────── */
.crew { padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2rem, 5vw, 4rem); }
.crew__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.crew__filter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.crew__fbtn {
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--hairline-strong, rgba(0, 0, 0, 0.18));
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.crew__fbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.crew__fbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .crew__fbtn:not([aria-pressed="true"]):hover { color: var(--ink); border-color: var(--ink); }
}
.crew__tier + .crew__tier { margin-top: clamp(3rem, 7vw, 5.5rem); }
.crew__tier[hidden] { display: none; }
.crew__tierhead {
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}
.crew__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
}
@media (max-width: 1100px) { .crew__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .crew__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mate { margin: 0; }
.mate[hidden] { display: none; }
.mate__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hairline, rgba(0, 0, 0, 0.08));
}
/* The two brochures mix colour and black-and-white portraits. One treatment
   for all of them keeps the grid reading as one set; colour comes back on
   hover where there is a hover. */
.mate__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter 600ms var(--ease-out-quart, ease), transform 900ms var(--ease-out-expo, ease);
}
@media (hover: hover) {
  .mate:hover .mate__img img { filter: grayscale(0) contrast(1); transform: scale(1.03); }
}
.mate__offices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.9rem 0 0.55rem;
  padding: 0;
  list-style: none;
}
.mate__office {
  padding: 0.28rem 0.55rem 0.24rem;
  border: 1px solid var(--hairline-strong, rgba(0, 0, 0, 0.18));
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.mate__name {
  margin: 0;
  font-size: clamp(1.02rem, 1.35vw, 1.3rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.mate__cred { font-weight: 400; color: var(--muted); font-size: 0.82em; letter-spacing: 0; }
.mate__role {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--muted);
}
@media (max-width: 420px) {
  .mate__office { font-size: 0.56rem; letter-spacing: 0.12em; }
  .mate__role { font-size: 0.8rem; }
}

.uae-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.crew__intro {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(0.95rem, 1.1vw, 1.06rem);
  line-height: 1.6;
  color: var(--muted);
}
.crew__tier .associates__title { margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); }

/* Team: the office film takes the slideshow's slot (sheet 4.3). */
.officefilm { padding: clamp(1rem, 3vw, 2rem) 0 clamp(1rem, 3vw, 2.5rem); }