/* =====================================================================
   AT REALTY — Site styles (premium real estate / GSAP-driven)
   ===================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-feature-settings: "ss01","cv11"; }
img { max-width: 100%; height: auto; display: block; }

::selection { background: #B89B6A; color: #1A1A1A; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #F2EBDD; }
::-webkit-scrollbar-thumb { background: #B89B6A; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #937848; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 56px); }

/* ---------- Typography ---------- */
.display-xxl  { font-family: "Righteous", sans-serif; font-weight: 500; font-size: clamp(48px, 9vw, 156px); line-height: 1.02; letter-spacing: -0.02em; }
.display-xl   { font-family: "Righteous", sans-serif; font-weight: 500; font-size: clamp(44px, 7.2vw, 120px); line-height: 1.04; letter-spacing: -0.02em; }
.display-lg   { font-family: "Righteous", sans-serif; font-weight: 500; font-size: clamp(36px, 5vw, 72px); line-height: 1.08; letter-spacing: -0.015em; }
.display-md   { font-family: "Righteous", sans-serif; font-weight: 500; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -0.01em; }

.eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #937848; margin: 0 0 18px; font-weight: 500;
}
.eyebrow--light { color: #B89B6A; }
.lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: #3A3A3A; max-width: 56ch; }
.body-lg { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; color: #3A3A3A; margin-bottom: 18px; }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: #1A1A1A; color: #F2EBDD;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; will-change: transform;
}
.loader__mark { display: flex; align-items: center; justify-content: center; }
.loader__logo {
  width: clamp(96px, 16vw, 200px); height: auto; display: block;
  opacity: 0; transform: translateY(40px) scale(0.94);
  will-change: opacity, transform;
}
.loader__caption {
  font-family: "Righteous", sans-serif; font-weight: 500;
  font-size: clamp(20px, 2vw, 28px); letter-spacing: 0.42em;
  color: #B89B6A;
  /* Lock LTR — AT must never flip even when html dir="rtl" */
  direction: ltr; unicode-bidi: isolate;
  margin-top: 4px; opacity: 0;
}
html.is-rtl .loader__caption { direction: ltr; unicode-bidi: isolate; }
.loader__bar { width: min(360px, 60vw); height: 1px; background: rgba(184,155,106,.25); position: relative; overflow: hidden; }
.loader__bar span { position: absolute; inset: 0; background: #B89B6A; transform-origin: left; transform: scaleX(0); }
.is-loaded .loader { pointer-events: none; }

/* ---------- Site nav ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px, 4vw, 56px);
  transition: background-color .35s ease, padding .35s ease, box-shadow .35s ease, color .35s ease;
  color: #F2EBDD;
  pointer-events: auto;
}
.site-nav.is-scrolled {
  background: rgba(242,235,221,.95);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 1px 0 rgba(26,26,26,.06);
  color: #1A1A1A;
  padding-block: 14px;
}
.site-nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-logo { width: 32px; height: 32px; object-fit: contain; display: block; flex-shrink: 0; }
.brand-logo--nav { width: 28px; height: 28px; }
.brand-logo--lg { width: 48px; height: 48px; }
.brand-logo--xl { width: 80px; height: 80px; }
@media (max-width: 600px) {
  .brand-logo--nav { width: 24px; height: 24px; }
}
.brand-mark { font-family: "Righteous", sans-serif; font-weight: 600; font-size: 28px; letter-spacing: 0.02em; color: #B89B6A; line-height: 1; }
.brand-mark--lg { font-size: 64px; }
.brand-word { font-family: "Inter", sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 0.4em; }
.brand-word--nav { font-size: 14px; letter-spacing: 0.5em; }
.brand-word--lg { font-size: 15px; display: block; margin-top: 4px; }
.site-nav__links { display: flex; gap: 32px; }
.site-nav__links a {
  font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
  text-decoration: none; color: inherit; position: relative; padding: 4px 0;
}
.site-nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: currentColor; transition: width .3s ease;
}
.site-nav__links a:hover::after, .site-nav__links a.is-active::after { width: 100%; }

.site-nav__toggle { display: none; background: transparent; border: 0; cursor: pointer; padding: 8px; gap: 4px; flex-direction: column; }
.site-nav__toggle span { display: block; width: 26px; height: 1.5px; background: currentColor; }

@media (max-width: 800px) {
  .site-nav__links { position: fixed; inset: 0 0 0 auto; width: 78%; max-width: 360px; background: #1A1A1A; color: #F2EBDD; flex-direction: column; padding: 96px 32px; gap: 22px; transform: translateX(100%); transition: transform .4s ease; z-index: 65; }
  .site-nav__links.is-open { transform: translateX(0); }
  .site-nav__toggle { display: flex; position: relative; z-index: 66; }
  body.nav-open::before {
    content: ""; position: fixed; inset: 0; z-index: 58;
    background: #1A1A1A;
    animation: navBackdrop .3s ease forwards;
  }
  @keyframes navBackdrop { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 16px 28px; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.btn-gold { background: #B89B6A; color: #1A1A1A; border-color: #B89B6A; }
.btn-gold:hover { background: #D4B98C; border-color: #D4B98C; }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: currentColor; color: #1A1A1A; }

.link-arrow {
  font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: #937848; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid transparent; transition: border-color .3s ease, color .3s ease, gap .3s ease;
}
.link-arrow:hover { color: #1A1A1A; border-color: #B89B6A; gap: 14px; }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100svh; min-height: 100vh; overflow: hidden;
  display: flex; align-items: center;
  color: #F2EBDD;
}
.hero__bg { position: absolute; inset: 0; z-index: 1; }
.hero__bg-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0;
  transform: scale(1.08);
  will-change: opacity, transform;
  pointer-events: none;
}
.hero__bg-slide.is-active { opacity: 1; }
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,26,26,.45) 0%, rgba(26,26,26,.20) 35%, rgba(26,26,26,.62) 100%),
    radial-gradient(80% 60% at 50% 30%, rgba(184,155,106,.08), transparent 70%);
}
.hero__content {
  position: relative; z-index: 2;
  padding: clamp(80px, 12vw, 140px) clamp(20px, 4vw, 56px);
  max-width: 1280px; margin: 0 auto; width: 100%;
  /* Always anchor the hero brand text to the left edge, even in RTL mode */
  direction: ltr;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(16px, 4vw, 48px);
  flex-wrap: wrap;
}
.hero__tagline { flex-shrink: 0; max-width: 32ch; }
html.is-rtl .hero__content { direction: ltr; }
html.is-rtl .hero__tagline { direction: rtl; }
.hero__brand {
  font-family: "Righteous", sans-serif; font-weight: 500;
  font-size: clamp(56px, 11vw, 168px); line-height: 0.98;
  letter-spacing: 0.04em; color: #D4B98C;
  margin: 0;
  text-shadow: 0 6px 36px rgba(0,0,0,.4);
}
.hero__tagline {
  font-family: "Inter", sans-serif; font-weight: 500;
  font-size: clamp(12px, 1.15vw, 16px); line-height: 1.5;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: #D4B98C; margin: 0;
  opacity: .92;
  text-align: right;
}
html[lang="ar"] .hero__brand { letter-spacing: 0.06em; }
html[lang="ar"] .hero__tagline {
  font-family: "Almarai", "Inter", sans-serif; font-weight: 700;
  letter-spacing: 0.04em; text-transform: none;
  font-size: clamp(15px, 1.5vw, 20px);
  color: #D4B98C;
}
@media (max-width: 600px) {
  .hero__brand { font-size: clamp(48px, 14vw, 80px); margin: 0 0 16px 0; letter-spacing: 0.06em; }
  .hero__tagline { font-size: 11px; letter-spacing: 0.22em; }
  html[lang="ar"] .hero__tagline { font-size: 14px; letter-spacing: 0.04em; }
  /* On narrow screens, drop the side-by-side layout — stack with tagline below */
  .hero__content { flex-direction: column; align-items: flex-start; }
  .hero__tagline { text-align: left; align-self: flex-start; }
  html[lang="ar"] .hero__tagline { text-align: left; }
}
/* On 24"+ desktop monitors, widen the content frame so the brand text
   sits closer to the left viewport edge (and the tagline closer to the right). */
@media (min-width: 1440px) {
  .hero__content { max-width: 1600px; padding-inline: clamp(40px, 3.4vw, 80px); }
}
@media (min-width: 1920px) {
  .hero__content { max-width: 1760px; }
}
.hero__eyebrow {
  font-family: "Inter", sans-serif; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: #D4B98C; margin-bottom: 28px; opacity: 0;
}
.hero__title { margin: 0 0 28px; max-width: none; }
.hero__title .line .word { white-space: nowrap; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .word { display: inline-block; will-change: transform; }
html:not(.is-loaded) .hero__title .word { transform: translateY(110%); }
.hero__sub { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.6; max-width: 56ch; margin: 0 0 36px; color: rgba(242,235,221,.86); opacity: 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; opacity: 0; }

.hero__scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(242,235,221,.9); text-decoration: none;
  font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  opacity: 0; z-index: 3;
}
.hero__scroll-line { width: 1px; height: 64px; background: rgba(242,235,221,.6); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; inset: 0; background: #B89B6A; transform: translateY(-100%); animation: scrollLine 2.4s ease-in-out infinite; }
@keyframes scrollLine { 0% { transform: translateY(-100%); } 60% { transform: translateY(100%); } 100% { transform: translateY(100%); } }

/* ---------- Story hero (image + headline section beneath the hero) ---------- */
.story-hero {
  position: relative; min-height: 88svh; min-height: 88vh; overflow: hidden;
  display: flex; align-items: center;
  color: #F2EBDD;
}
.story-hero__bg { position: absolute; inset: 0; z-index: 1; }
.story-hero__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.06); will-change: transform;
}
.story-hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,26,26,.55) 0%, rgba(26,26,26,.30) 40%, rgba(26,26,26,.70) 100%),
    radial-gradient(80% 60% at 50% 40%, rgba(184,155,106,.10), transparent 70%);
}
.story-hero__content {
  position: relative; z-index: 2;
  padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 56px);
  max-width: 1280px; margin: 0 auto; width: 100%;
}
.story-hero__title { margin: 0; max-width: none; }
.story-hero__title .line { display: block; overflow: hidden; }
.story-hero__title .line .word { white-space: nowrap; }

/* Arabic glyphs need more vertical room (diacritics above + descenders below).
   Without this the .line's overflow:hidden mask clips tashkeel and tails. */
html[lang="ar"] .story-hero__title { line-height: 1.5; }
html[lang="ar"] .story-hero__title .line { line-height: 1.5; padding-block: 0.08em; }
html[lang="ar"] .story-hero__title .word { line-height: 1.5; padding-block: 0.04em; }
html[lang="ar"] .tagline__big { line-height: 1.4; }
html[lang="ar"] .tagline__big .line { line-height: 1.4; padding-block: 0.06em; }
html[lang="ar"] .tagline__big .word { line-height: 1.4; padding-block: 0.04em; }
.story-hero__title .word { display: inline-block; will-change: transform; }
html:not(.is-loaded) .story-hero__title .word { transform: translateY(110%); }

/* ---------- Brand intro ---------- */
.brand-intro { padding: clamp(80px, 12vw, 160px) 0; background: #F2EBDD; }
.brand-intro__grid { display: grid; grid-template-columns: 160px 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.brand-intro__monogram .monogram-svg, .brand-intro__logo { width: 100%; height: auto; max-width: 120px; display: block; }
.brand-intro__copy .lede { font-family: "Righteous", sans-serif; font-size: clamp(22px, 2.4vw, 36px); line-height: 1.45; color: #1A1A1A; font-weight: 400; max-width: 38ch; }
@media (max-width: 760px) { .brand-intro__grid { grid-template-columns: 1fr; } .brand-intro__monogram { max-width: 200px; } }

/* ---------- Split sections (Mission / Goal) ---------- */
.split-section { padding: clamp(60px, 10vw, 130px) 0; background: #F8F2E5; position: relative; overflow: hidden; }
.split-section--goal { background: #F2EBDD; }
.split-section__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.split-section--reverse .split-section__inner > .split-section__media { order: 2; }
.split-section--reverse .split-section__inner > .split-section__copy { order: 1; }

.split-section__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.split-section__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.split-section__media-frame {
  position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(184,155,106,.4); transform: translate(16px, 16px);
}

@media (max-width: 800px) {
  .split-section__inner { grid-template-columns: 1fr; }
  .split-section--reverse .split-section__inner > .split-section__media { order: 1; }
}

/* ---------- Trio cards ---------- */
.trio { padding: clamp(80px, 12vw, 160px) 0; background: #F8F2E5; }
.trio__head { text-align: center; max-width: 720px; margin: 0 auto 72px; }
.trio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trio__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 920px; margin: 0 auto; }
.trio-card {
  position: relative; background: #FFFFFF; padding: 40px 32px; border: 1px solid rgba(184,155,106,.18);
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.trio-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: #B89B6A; transition: width .5s ease;
}
.trio-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(26,26,26,.18); border-color: #B89B6A; }
.trio-card:hover::before { width: 100%; }
.trio-card__num { font-family: "Righteous", sans-serif; font-size: 14px; color: #B89B6A; letter-spacing: 0.3em; margin: 0 0 18px; }
.trio-card__title { margin: 0 0 28px; }
.trio-card__list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 16px; color: #3A3A3A; line-height: 1.5; }
.trio-card__list li { padding-left: 16px; position: relative; }
.trio-card__list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 1px; background: #B89B6A; }
@media (max-width: 800px) { .trio__grid { grid-template-columns: 1fr; } }

/* ---------- Tagline section ---------- */
.tagline { position: relative; min-height: 90vh; display: flex; align-items: center; overflow: hidden; color: #F2EBDD; }
.tagline__bg { position: absolute; inset: 0; z-index: 1; }
.tagline__bg img { width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.tagline__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.7)); }
.tagline__content { position: relative; z-index: 2; padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 56px); max-width: 1280px; margin: 0 auto; width: 100%; }
.tagline__big { margin: 0; }
.tagline__big .line { display: block; overflow: hidden; }
.tagline__big .word { display: inline-block; will-change: transform; }
html:not(.is-loaded) .tagline__big .word { transform: translateY(110%); }
.tagline__big--accent { color: #D4B98C; font-style: italic; }
.tagline__sub { font-family: "Righteous", sans-serif; font-style: italic; font-size: clamp(20px, 2vw, 30px); margin: 32px 0 0; opacity: .85; }

/* ---------- Partners ---------- */
/* ---------- Brand family (Atlas Territories) ---------- */
.brand-family {
  padding: clamp(80px, 12vw, 160px) 0;
  background: #F8F2E5;
  position: relative;
}
.brand-family__head { text-align: center; max-width: 760px; margin: 0 auto 28px; padding: 0 clamp(20px, 4vw, 56px); }
.brand-family__title {
  margin: 14px 0 0; line-height: 1.04; letter-spacing: -0.015em; color: #1A1A1A;
}
.brand-family__sub {
  margin: 22px auto 0; max-width: 56ch;
  color: #6B6B6B; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6;
}
/* Gold divider connecting parent heading to children grid */
.brand-family__connector {
  display: block; margin: 56px auto 56px; width: 1px; height: 64px;
  background: linear-gradient(180deg, transparent, #B89B6A 35%, #B89B6A 65%, transparent);
  position: relative;
}
.brand-family__connector::after {
  content: ""; position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%);
  width: 7px; height: 7px; background: #B89B6A; border-radius: 50%;
}
.brand-family__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px);
}
@media (max-width: 1080px) { .brand-family__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .brand-family__grid { grid-template-columns: repeat(2, 1fr); } }
.brand-card {
  position: relative; background: #FFFFFF;
  padding: 38px 20px 30px;
  border: 1px solid rgba(184,155,106,.18);
  text-align: center;
  transition: transform .45s cubic-bezier(.2,.6,.2,1), box-shadow .45s ease, border-color .45s ease;
  cursor: default;
}
.brand-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: #B89B6A; transition: width .55s cubic-bezier(.2,.6,.2,1);
}
.brand-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -22px rgba(26,26,26,.20);
  border-color: #B89B6A;
}
.brand-card:hover::before { width: 100%; }
.brand-card__num {
  font-family: "Righteous", sans-serif; font-size: 12px;
  color: #B89B6A; letter-spacing: 0.32em;
  margin: 0 0 18px; text-transform: uppercase;
}
.brand-card__name {
  font-family: "Righteous", sans-serif;
  font-size: clamp(16px, 1.35vw, 22px); line-height: 1.08;
  letter-spacing: 0.01em; margin: 0; color: #1A1A1A;
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.brand-card:hover .brand-card__name { transform: translateY(-2px); }
.brand-card__sub {
  display: inline-block;
  margin: 16px 0 0; padding: 4px 10px;
  color: #937848;
  font-family: "Inter", sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  border: 1px solid rgba(184,155,106,.35);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.brand-card:hover .brand-card__sub {
  background: #B89B6A; color: #FFFFFF; border-color: #B89B6A;
}

.partners { padding: clamp(80px, 12vw, 160px) 0; background: #F2EBDD; overflow: hidden; }
.partners__head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.partners__sub { color: #6B6B6B; margin: 18px 0 0; }
.partners__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 32px; align-items: center; justify-items: center;
}
.partners__rows { display: flex; flex-direction: column; gap: 24px; }
.partners__row {
  display: flex; flex-wrap: nowrap; gap: 24px;
  width: max-content; margin: 0 auto;
  will-change: transform;
}
.partners__row .partner-tile {
  flex: 0 0 180px; width: 180px; aspect-ratio: 16 / 10;
}
@media (max-width: 760px) {
  .partners__row { gap: 16px; }
  .partners__row .partner-tile { flex: 0 0 132px; width: 132px; }
}
.partner-tile {
  width: 100%; aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: #FFFFFF; border: 1px solid rgba(184,155,106,.15);
  padding: 18px; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  filter: grayscale(100%); opacity: .65;
}
.partner-tile:hover { filter: grayscale(0%); opacity: 1; transform: translateY(-3px); border-color: #B89B6A; box-shadow: 0 10px 24px -14px rgba(26,26,26,.25); }
.partner-tile img { max-width: 80%; max-height: 80%; object-fit: contain; }
.partners__credit { text-align: center; margin: 56px 0 0; color: #6B6B6B; font-family: "Righteous", sans-serif; font-style: italic; font-size: 18px; }

/* ---------- Footer ---------- */
.footer { background: #1A1A1A; color: #F2EBDD; padding: 80px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 64px; border-bottom: 1px solid rgba(242,235,221,.12); }
.footer__brand .brand-mark--lg { color: #B89B6A; }
.footer__brand .brand-word--lg { display: block; margin-top: -10px; color: #F2EBDD; }
.footer__tagline { font-family: "Righteous", sans-serif; font-style: italic; font-size: 18px; margin: 16px 0 0; color: rgba(242,235,221,.7); max-width: 26ch; }
.footer__col .eyebrow { color: #B89B6A; }
.footer__link { display: block; color: rgba(242,235,221,.78); text-decoration: none; padding: 6px 0; transition: color .3s ease; }
.footer__link:hover { color: #D4B98C; }
.footer__base { padding: 24px clamp(20px, 4vw, 56px); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; max-width: 1280px; margin: 0 auto; font-size: 13px; color: rgba(242,235,221,.5); }
.footer__base p { margin: 0; }

@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Reveal helpers ---------- */
.reveal-words .word { display: inline-block; }

/* ============================================================
   RTL / BIDI isolation
   When AR is active the document direction is RTL. Without
   isolation, browsers can reorder Latin runs ("AT REALTY",
   "Atlas Territories", brand names) relative to the surrounding
   Arabic — letters and words can appear flipped. These rules
   force every Latin/brand element to be its own LTR isolation
   boundary so words and letters always render left-to-right.
   ============================================================ */
html.is-rtl .loader,
html.is-rtl .loader__mark,
html.is-rtl .word,
html.is-rtl .brand-word,
html.is-rtl .brand-mark,
html.is-rtl .brand-card__name,
html.is-rtl .hero__brand,
html.is-rtl .lang-switch,
html.is-rtl .lang-switch__btn,
html.is-rtl [data-i18n="family.title"],
html.is-rtl [data-i18n="family.c1.name"],
html.is-rtl [data-i18n="family.c2.name"],
html.is-rtl [data-i18n="family.c3.name"],
html.is-rtl [data-i18n="family.c3.sub"],
html.is-rtl [data-i18n="family.c4.name"],
html.is-rtl [data-i18n="family.c5.name"],
html.is-rtl [data-i18n="footer.poweredName"],
html.is-rtl [data-i18n="partners.credit.name"] {
  direction: ltr;
  unicode-bidi: isolate;
}
/* Mixed-content paragraphs (Arabic body with embedded "AT Realty")
   — let the browser auto-detect paragraph direction and isolate
   embedded Latin runs internally. */
html.is-rtl [data-i18n="brand.lede"],
html.is-rtl [data-i18n="mission.p1"],
html.is-rtl [data-i18n="mission.p2"],
html.is-rtl [data-i18n="goal.p1"],
html.is-rtl [data-i18n="footer.copyright"],
html.is-rtl [data-i18n^="title."] {
  unicode-bidi: plaintext;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero__bg img, .story-hero__bg img, .tagline__bg img, .split-section__media img { transform: none !important; }
}

/* =====================================================================
   Language switcher (sits in nav, right side, before hamburger)
   ===================================================================== */
.lang-switch {
  display: inline-flex; align-items: center;
  font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; line-height: 1;
  margin-inline-start: 18px;
  user-select: none;
}
.lang-switch__btn {
  background: transparent; border: 0; padding: 6px 8px;
  color: inherit; cursor: pointer; opacity: .65;
  transition: color .25s ease, opacity .25s ease;
  font: inherit; letter-spacing: inherit;
  min-width: 30px; min-height: 30px;
}
.lang-switch__btn:hover { opacity: 1; }
.lang-switch__btn.is-active { color: #B89B6A; opacity: 1; }
.lang-switch__sep {
  opacity: .35; padding: 0 2px;
  pointer-events: none;
}
@media (max-width: 800px) {
  .lang-switch { margin-inline-start: auto; margin-inline-end: 8px; }
}

/* =====================================================================
   RTL / Arabic support
   ===================================================================== */
html.is-rtl body,
html[lang="ar"] body { font-family: "Almarai", "Inter", sans-serif; }

/* Keep brand wordmarks Latin even in AR (they ARE the brand) */
html.is-rtl .brand-word,
html.is-rtl .brand-mark,
html.is-rtl .brand-word--nav,
html.is-rtl .brand-word--lg,
html.is-rtl .brand-mark--lg,
html.is-rtl .loader__mark,
html.is-rtl .lang-switch { font-family: "Righteous", "Inter", sans-serif; }
html.is-rtl .lang-switch { font-family: "Inter", sans-serif; }

/* In RTL the directional ::after underline anchored to left edge looks wrong;
   anchor it to the inline-start instead. */
html.is-rtl .site-nav__links a::after { left: auto; right: 0; }

/* Trio card list bullets are anchored to the left — flip in RTL */
html.is-rtl .trio-card__list li,
html.is-rtl .num-row__list li,
html.is-rtl .feature-project__list li { padding-left: 0; padding-right: 16px; }
html.is-rtl .trio-card__list li::before,
html.is-rtl .num-row__list li::before,
html.is-rtl .feature-project__list li::before { left: auto; right: 0; }
html.is-rtl .num-row__list li,
html.is-rtl .feature-project__list li { padding-right: 22px; }

/* Card top-border accent reads from inline-start in both directions */
html.is-rtl .trio-card::before,
html.is-rtl .brand-card::before { left: auto; right: 0; }

/* Mobile drawer comes from the OPPOSITE side in RTL */
@media (max-width: 800px) {
  html.is-rtl .site-nav__links { inset: 0 auto 0 0; transform: translateX(-100%); }
  html.is-rtl .site-nav__links.is-open { transform: translateX(0); }
}

/* Subpage hero headings read right-to-left */
html.is-rtl .subpage-hero__title,
html.is-rtl .subpage-hero__sub { text-align: right; }

/* Story hero & tagline & section headings — natural RTL flow */
html.is-rtl .story-hero__title .word,
html.is-rtl .tagline__big .word { white-space: normal; }

/* Footer base layout already wraps; ensure direction-correct columns */
html.is-rtl .footer__base { direction: rtl; }

/* Tighter letter-spacing for Arabic eyebrows (Latin spacing breaks them) */
html.is-rtl .eyebrow { letter-spacing: 0.05em; }
html.is-rtl .lang-switch { letter-spacing: 0.18em; } /* keep EN/AR labels Latin */
html.is-rtl .site-nav__links a { letter-spacing: 0; }

/* Numerals like "01 — رسالتنا" should read LTR within an RTL line */
html.is-rtl .num-row__num,
html.is-rtl .trio-card__num,
html.is-rtl .brand-card__num,
html.is-rtl .mission .eyebrow,
html.is-rtl .goal .eyebrow { direction: ltr; unicode-bidi: isolate; }

/* Reverse the visual order of split-sections in RTL so the
   "media on left, copy on right" of LTR becomes "media on right, copy on left". */
html.is-rtl .split-section__inner { direction: rtl; }
html.is-rtl .split-section--reverse .split-section__inner { direction: ltr; }
html.is-rtl .split-section__copy { direction: rtl; text-align: right; }

/* =====================================================================
   Responsive — global breakpoint refinements
   320 / 375 / 480 / 640 / 768 / 1024 / 1280 / 1440 / 1920 / 2560
   ===================================================================== */

/* Wide screens — keep the container honored but let sections breathe */
@media (min-width: 1920px) {
  .container { max-width: 1440px; }
  .hero__content,
  .story-hero__content,
  .tagline__content,
  .footer__base,
  .brand-family__grid { max-width: 1440px; }
}
@media (min-width: 2560px) {
  .container { max-width: 1600px; }
  .hero__content,
  .story-hero__content,
  .tagline__content,
  .footer__base,
  .brand-family__grid { max-width: 1600px; }
  .display-xxl { font-size: clamp(48px, 8vw, 200px); }
  .display-xl  { font-size: clamp(44px, 6.4vw, 152px); }
}

/* Laptop range — keep desktop trio 3-up but tighten gaps */
@media (max-width: 1280px) {
  .trio__grid { gap: 20px; }
  .brand-family__grid { gap: 16px; }
}

/* Tablet landscape (1024) — split sections still side-by-side, but tighten */
@media (max-width: 1024px) {
  .split-section__inner { gap: clamp(28px, 4vw, 56px); }
  .brand-intro__grid { gap: clamp(24px, 4vw, 56px); }
  .hero__content { padding: 100px clamp(20px, 4vw, 40px) 120px; }
}

/* Tablet portrait (768) — split sections stack, trio stays 3-up until 800 */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}

@media (max-width: 800px) {
  /* Make tap targets generous on the mobile drawer */
  .site-nav__links a { font-size: 16px; padding: 12px 0; min-height: 44px; display: flex; align-items: center; }
  .site-nav__toggle { padding: 12px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .site-nav { padding: 14px clamp(16px, 4vw, 32px); }

  .hero { min-height: 92svh; }
  .hero__content { padding: 110px 20px 110px; }
  .story-hero { min-height: 70svh; }
  .story-hero__content { padding: clamp(56px, 12vw, 110px) 20px; }

  /* Mission/Goal media frame offset is too aggressive on mobile */
  .split-section__media-frame { transform: translate(8px, 8px); }

  /* Trio cards already stack at 800; tighten their padding */
  .trio-card { padding: 32px 24px; }

  /* Tagline big text — drop a notch on small screens */
  .tagline__content { padding: clamp(64px, 14vw, 110px) 20px; }

  /* Brand intro logo doesn't need to be tiny on tablet */
  .brand-intro__monogram .brand-intro__logo { max-width: 140px; }
}

/* 640 — small tablet / large phone landscape */
@media (max-width: 640px) {
  .container { padding-inline: 18px; }
  .hero__scroll { bottom: 20px; }
  .hero__scroll-line { height: 48px; }

  /* Tagline big — keep 2 visible lines, never let words overflow */
  .display-xxl { font-size: clamp(40px, 11.5vw, 96px); line-height: 1.05; }
  .display-xl  { font-size: clamp(38px, 10vw, 80px); line-height: 1.05; }
  .display-lg  { font-size: clamp(30px, 7.5vw, 56px); }

  .brand-family__head { padding: 0 18px; }
  .brand-family__grid { padding: 0 18px; gap: 14px; }
  .brand-family__connector { margin: 40px auto; height: 48px; }

  .trio { padding: 64px 0; }
  .partners { padding: 64px 0; }
  .partners__head { margin-bottom: 40px; }

  .footer { padding: 56px 0 0; }
  .footer__grid { padding-bottom: 40px; gap: 32px; }
  .footer__base { padding: 18px 18px; font-size: 12px; }
}

/* 480 — small phones */
@media (max-width: 480px) {
  .container { padding-inline: 16px; }

  .display-xxl { font-size: clamp(32px, 11vw, 64px); }
  .display-xl  { font-size: clamp(30px, 10vw, 60px); }
  .display-lg  { font-size: clamp(26px, 8vw, 48px); }
  .display-md  { font-size: clamp(22px, 6.5vw, 36px); }

  .lede { font-size: 16px; line-height: 1.55; }
  .body-lg { font-size: 15px; line-height: 1.6; }

  .hero__content { padding: 96px 16px 96px; }
  .story-hero__content { padding: 64px 16px; }

  .brand-intro { padding: 56px 0; }
  .brand-intro__monogram .brand-intro__logo { max-width: 96px; }
  .split-section { padding: 56px 0; }
  .split-section__media-frame { transform: translate(6px, 6px); }

  .trio-card { padding: 28px 22px; }
  .trio-card__title { margin-bottom: 22px; }
  .trio__head { margin-bottom: 48px; }

  .tagline { min-height: 70vh; }
  .tagline__content { padding: 80px 16px; }
  .tagline__sub { font-size: 16px; margin-top: 24px; }

  .brand-family { padding: 64px 0; }
  .brand-family__sub { font-size: 14px; }
  .brand-family__connector { height: 36px; margin: 28px auto; }
  .brand-family__grid { gap: 10px; padding: 0 16px; }
  .brand-card { padding: 28px 12px 22px; }
  .brand-card__name { font-size: 14px; }
  .brand-card__num { font-size: 11px; margin-bottom: 12px; }
  .brand-card__sub { font-size: 9px; padding: 3px 8px; margin-top: 12px; }

  .partners__credit { font-size: 16px; margin-top: 40px; }

  /* Subpage hero on small phones */
  .subpage-hero { padding: 110px 16px 56px !important; }
  .subpage-hero__logo { width: 80px !important; margin-bottom: 32px !important; }
  .subpage-hero__title { font-size: clamp(36px, 11vw, 60px) !important; text-align: center !important; }
  .subpage-hero__sub { text-align: center !important; }

  .num-row__num { font-size: clamp(96px, 36vw, 160px) !important; }
  .num-row__title { font-size: clamp(20px, 5.5vw, 26px) !important; margin-bottom: 18px !important; }

  .contact-line { font-size: 16px !important; }
  .contact-block { padding: 64px 0 !important; }
  .contact-block__title { font-size: clamp(36px, 11vw, 56px) !important; margin-bottom: 24px !important; }
}

/* 375 — iPhone */
@media (max-width: 380px) {
  .display-xxl { font-size: clamp(28px, 10.5vw, 52px); }
  .display-xl  { font-size: clamp(26px, 9.5vw, 48px); }
  .brand-family__grid { gap: 8px; }
  .brand-card { padding: 24px 8px 20px; }
  .brand-card__name { font-size: 13px; }

  /* Loader brand mark mustn't overflow */
  .loader__mark { font-size: clamp(60px, 18vw, 120px); }
}

/* 320 — smallest phones (Galaxy Fold closed, etc.) */
@media (max-width: 340px) {
  .container { padding-inline: 12px; }
  .display-xxl { font-size: 28px; line-height: 1.06; }
  .display-xl  { font-size: 26px; line-height: 1.06; }
  .display-lg  { font-size: 22px; }
  .display-md  { font-size: 20px; }
  .lede, .body-lg { font-size: 14px; }
  .hero__content { padding: 88px 12px 88px; }
  .brand-family__grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px; }
  .brand-card { padding: 20px 6px 16px; }
  .brand-card__name { font-size: 12px; letter-spacing: 0; }
  .brand-card__sub { font-size: 8px; letter-spacing: 0.18em; }
  .footer__base { font-size: 11px; gap: 8px; }
}

/* Belt-and-braces: never allow horizontal scrollbars from a runaway element */
html, body { max-width: 100vw; overflow-x: hidden; }