/* =====================================================================
   RAWAND — shared site styles (every page): the footer — "the curtain comes down"
   A burgundy sheet that drops over the end of the page (its edge sags like a drape and settles),
   then the closing line, the columns and a full-width روند drawn in outline.
   Without JS the footer is simply burgundy; js/site.js adds .is-staged and plays the drop.
   ===================================================================== */

.site-foot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--rw-900);
  color: var(--rw-paper);
}
.site-foot.is-staged { background: transparent; }

/* the curtain (an SVG so its lower edge can sag while it falls) */
.foot-curtain {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--rw-900);
}
/* drawing-paper grid, printed in light ink on the burgundy */
.foot-paper {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(245, 243, 240, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 243, 240, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, .35));
          mask-image: linear-gradient(#000, rgba(0, 0, 0, .35));
}

.foot-inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(88px, 14svh, 150px) var(--sp) 28px;
  box-sizing: content-box;
}

/* ------------------------------------------------------------ closing line + CTA */
.foot-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.foot-title {
  margin: 0;
  font: 800 clamp(2.4rem, 5.6vw, 5.4rem)/1.08 var(--font-ar);
  color: var(--rw-paper);
}
.foot-title span { color: var(--rw-stone); }
.foot-cta {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  flex: none;
  width: clamp(124px, 12vw, 160px);
  aspect-ratio: 1;
  border: 1px solid rgba(245, 243, 240, .45);
  border-radius: 50%;
  font: 700 15px/1.2 var(--font-ar);
  text-align: center;
  color: var(--rw-paper);
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out), transform .5s var(--ease-out);
}
.foot-cta svg { width: 20px; height: 20px; transition: transform .45s var(--ease-out); }
.foot-cta:hover { border-color: var(--rw-paper); background: var(--rw-paper); color: var(--rw-900); transform: rotate(-8deg); }
.foot-cta:hover svg { transform: translateX(-5px); }

.foot-rule {
  display: block;
  height: 1px;
  margin: clamp(48px, 8svh, 80px) 0 clamp(40px, 6svh, 56px);
  background: rgba(245, 243, 240, .22);
  transform-origin: right center;
}

/* ------------------------------------------------------------ columns */
.foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px clamp(28px, 4vw, 64px);
}
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot-col-title {
  margin: 0 0 6px;
  font: 600 12px/1 var(--font-ar);
  color: rgba(245, 243, 240, .5);
}
.foot-col a,
.foot-col span { position: relative; font: 600 15px/1.5 var(--font-ar); color: var(--rw-paper); }
.foot-col span { color: rgba(245, 243, 240, .82); }
.foot-col a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease-out);
}
.foot-col a:hover::after { transform: scaleX(1); }
.foot-logo { display: block; width: auto; height: 46px; fill: var(--rw-paper); }
.foot-brand p { max-width: 320px; margin: 10px 0 0; font: 400 14px/1.9 var(--font-ar); color: rgba(245, 243, 240, .7); }

/* ------------------------------------------------------------ RAWAND, as wide as the footer */
.foot-word-wrap { padding: clamp(28px, 5svh, 56px) clamp(8px, 1.6vw, 24px) clamp(10px, 1.6vw, 22px); }
.foot-word {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;          /* the letters rise out of the footer's lower edge */
  fill: var(--rw-paper);
}
.foot-word path { transition: fill .4s var(--ease-out); }

/* ------------------------------------------------------------ bottom bar */
.foot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(48px, 8svh, 80px);
  padding-top: 20px;
  border-top: 1px solid rgba(245, 243, 240, .16);
}
.foot-copy { margin: 0; font: 400 12px/1.8 var(--font-ar); color: rgba(245, 243, 240, .55); }
.foot-up {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(245, 243, 240, .4);
  border-radius: 50%;
  color: var(--rw-paper);
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}
.foot-up svg { width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.foot-up:hover { background: var(--rw-paper); color: var(--rw-900); }
.foot-up:hover svg { transform: translateY(-3px); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot-lead { align-items: flex-start; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .foot-cta { width: 116px; font-size: 14px; }
}