/* DABB 2 — the footer, on FLAT GROUND IN THE SUN (AMENDMENT 11: no dune under any footer · AMENDMENT 7, css/base.css .in-sun: deep type, no shade, the sun's lift): a hairline, then the wordmark large in deep umber · the brand line · the social icons
   (rings) and the e-mail · one last line (© · where we started · back to top) · the bottom band (the trackway, quiet).
   Short on purpose. Its last stretch is kept clear for the floating button, which comes to rest over the band's end. */

.footer {
  position: relative;
  padding-block-end: clamp(8px, 1vw, 14px);                     /* the band's last prints do not touch the page's edge */
  --sh: var(--shade-sun); --sh-in: var(--shade-sun);      /* (the layer itself: .shade, css/base.css; --sh-in: the hour of what lies above it — DABB.Nafud starts there) */
  color: var(--fg);
  border-block-start: var(--hair) solid var(--rule);
}
.footer__in { position: relative; z-index: 1; padding-block: clamp(64px, 8vw, 120px) var(--s-8); }

/* ── its ground: FLAT, firm sand with its ripples runs on under the footer to the very end of the page (DABB.Nafud paints this
   canvas with its own light: from the hour of what lies above — on the home page the about-teaser's ground, a piece of the same —
   into the sun, a breath of shade at the very last edge; behind every piece of type what its ink needs, measured). Until
   it is painted, and without the painter: the page's own sand under the footer's layer (.shade: the sun's lift). ── */
.footer__ground { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; opacity: 0; }
.footer__ground.is-in { opacity: 1; }
.footer--after-teaser { border-block-start: 0; }                  /* the same ground runs on from the teaser: no hairline across it */
.footer .band--foot { position: relative; z-index: 1; }

/* ── the last edge of the site: the line of nassi, on the sand above the closing trackway (its canvas takes no room: it
   lies in the air the footer already keeps under its last line) ── */
.footer__nassi {
  position: absolute; inset-inline: 0; inset-block-end: calc(clamp(8px, 1vw, 14px) + clamp(22px, 2vw, 30px) - 6px);
  inline-size: 100%; block-size: 58px; pointer-events: none;
  opacity: 0.92;                                                /* the grass lies in the sun like the sand it grows on */
}

/* ── the wordmark, large, in the ink of the ground (deep umber in the sun; sized by height only: --logo-h, which the slogan
   under it is sized from too). A phone: larger than before (76 / 80 px), so the signature under it stays the smaller line ── */
.footer { --logo-h: clamp(56px, max(min(19.5vw, 76px), 11.5vw), 168px); }
html[lang="ar"] .footer { --logo-h: clamp(62px, max(min(20.5vw, 80px), 10.4vw), 150px); }
.footer__logo { display: flex; color: var(--fg); }
.footer__logo .logo { block-size: var(--logo-h); inline-size: auto; max-inline-size: 100%; }
.footer__logo .logo--opt2 { block-size: clamp(50px, 10.4vw, 152px); }   /* the second option on trial: the same width as the first */
.footer__logo .logo--ar.logo--opt2 { block-size: clamp(58px, 9.8vw, 142px); }

/* ── THE SLOGAN, the company's signature (parts/_slogan.html: the phrase, then the drawn mark). A LOCK-UP with the wordmark
   (2026-10-19 — at the far end of the row it sat small and alone): directly UNDER the wordmark, its end on the wordmark's end,
   sized from the wordmark's height (about half the wordmark's width, in Arabic and English alike; never under 18 / 20 px).
   The head is exactly as wide as the wordmark. One line, never broken. ── */
.footer__head { display: grid; justify-content: start; justify-items: end; row-gap: calc(var(--logo-h) * 0.11); }
.footer__head > .footer__logo { justify-self: start; }
.footer__slogan {
  font-family: var(--f-display); font-weight: var(--w-display);
  font-size: max(18px, var(--logo-h) * 0.18);                   /* 18 → 30: about half the wordmark's width */
  line-height: 1.2; letter-spacing: var(--tr-h3); white-space: nowrap; color: var(--fg);
}
html[lang="ar"] .footer__slogan { font-size: max(20px, var(--logo-h) * 0.205); line-height: 1.5; }

/* ── the brand line · the social icons · the e-mail ── */
.footer__mid { display: grid; gap: var(--s-6) var(--gutter); margin-block-start: clamp(36px, 4.4vw, 64px); }
.footer__lines { display: flex; flex-direction: column; font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; letter-spacing: var(--tr-h3); color: var(--fg-2); }
.footer__line { white-space: nowrap; }
.footer__line:first-child { color: var(--fg); }
.footer__reach { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.footer__social { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.footer__soc {
  display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%;
  border: var(--hair) solid var(--rule); color: var(--fg-2);
}
.footer__soc-ico { inline-size: 18px; block-size: 18px; fill: currentColor; }
/* the Upwork mark is a wide, low word-shape (its glyph spans the whole 24-unit width but only the middle of its height): at 18 px
   its ink was 18 × 12.8 px beside the others' 18 × 18 and drew smaller. At 22 px: 22 × 15.6 — about the same area, one family (measured 2026-10-19) */
.footer__soc[href*="upwork.com"] .footer__soc-ico { inline-size: 22px; block-size: 22px; }
.footer__soc:hover { background: var(--fg); border-color: var(--fg); color: var(--on-btn); }
.footer__mail { font-size: var(--fs-body); line-height: 1.4; }

/* ── the last line ── */
.footer__base {
  display: grid; gap: var(--s-2) var(--s-6);
  grid-template-areas: "copy" "legal" "proud" "top";           /* a phone: the ©, the legal line under it, where we started, back to top */
  margin-block-start: clamp(32px, 4vw, 56px); padding-block-start: var(--s-5);
  border-block-start: var(--hair) solid var(--rule);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.footer__copy { grid-area: copy; font-weight: 500; color: var(--fg); }
/* THE LEGAL LINE — the four policies (Privacy · Terms · Refunds · Revisions), small and quiet, directly under the ©: the same
   small size, the secondary ink (in the sun: 5.7 : 1 on the darkest grain), a middot between them. One line at every width
   (it is short: about 270 px in English, less in Arabic); each link is a 28 px target, underlined on hover. */
.footer__legal { grid-area: legal; }
.footer__legal-list { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.55em; }
.footer__legal-list > li { display: inline-flex; align-items: center; column-gap: 0.55em; }
.footer__legal-list > li + li::before { content: "·"; color: var(--fg-2); }
.footer__legal-link {
  display: inline-flex; align-items: center; min-block-size: 28px;
  color: var(--fg-2); white-space: nowrap;
  text-decoration: underline 1px transparent; text-underline-offset: 0.3em;
}
.footer__legal-link:hover { color: var(--fg); text-decoration-color: currentColor; }
.footer__proud { grid-area: proud; color: var(--fg-2); text-wrap: pretty; }      /* (small text: the secondary ink, never the tertiary) */
/* NAJD GREEN, its first use: growth. The line says where the company started and that it is still growing
   ("now in three countries, with more to come") — one small dot of the plants' green before it (a mark, not a ground) */
.footer__proud::before {
  content: ""; display: inline-block; inline-size: 6px; block-size: 6px; border-radius: 50%;
  margin-inline-end: 0.6em; vertical-align: 0.12em; background: var(--green-text);
}
/* back to top: a small outlined pill, its arrow in a ring at the end */
.footer__top {
  grid-area: top; display: inline-flex; align-items: center; gap: var(--s-3); justify-self: start;
  min-block-size: 40px; padding-inline: 18px 6px; margin-block: var(--s-3) 0;
  border: var(--hair) solid var(--rule-2); border-radius: var(--r-pill);
  font-weight: 500; color: var(--fg); text-decoration: none; white-space: nowrap;
}
.footer__top:hover { background: var(--fg); border-color: var(--fg); color: var(--on-btn); }
.footer__top .ico {
  box-sizing: border-box; inline-size: 28px; block-size: 28px; padding: 6px; border-radius: 50%;
  background: var(--bg-3); color: var(--fg);
  transform: rotate(180deg);                                    /* the sprite's down arrow, turned to point up */
}
.footer__top:hover .ico { transform: rotate(180deg) translateY(2px); }

@media (min-width: 640px) {
  html:not([lang="ar"]) .footer__lines { flex-direction: row; flex-wrap: wrap; gap: 0 0.36em; }      /* Arabic lines carry no full stop: they stay one above the other */
}
@media (min-width: 900px) {
  .footer__mid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .footer__reach { flex-wrap: nowrap; justify-content: flex-end; }
  /* the ©, and the legal line under it · where we started, its first line on the ©'s line (where it takes two lines — 1024 —
     the second runs beside the legal line) · back to top, centred on both lines */
  .footer__base { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "copy proud top" "legal proud top"; align-items: center; row-gap: 0; }
  .footer__copy, .footer__proud { align-self: start; }
  .footer__top { justify-self: end; margin-block: 0; }
}
/* wide screens: the floating button sits in the side gutter beside the band — nothing to clear. Below that the last
   line leaves it room at the end of the row */
@media (max-width: 1199.98px) {
  .footer__in { padding-block-end: calc(var(--s-8) + 24px); }
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .footer__ground { transition: opacity 700ms var(--e-std); }
  html:not(.is-calm) .footer__legal-link { transition: color var(--t-2) var(--e-std), text-decoration-color var(--t-2) var(--e-std); }
  html:not(.is-calm) .footer__soc, html:not(.is-calm) .footer__top { transition: background-color var(--t-2) var(--e-std), color var(--t-2) var(--e-std), border-color var(--t-2) var(--e-std); }
  html:not(.is-calm) .footer__top .ico { transition: transform var(--t-3) var(--e-dash); }
}