/**
 * Numu Design System v3 — editorial, Thmanyah-typeset, calm
 *
 * Loaded AFTER assets/css/frontend.css so it overrides the legacy palette
 * and typography without touching the SCSS source. Drives every page that
 * doesn't have its own scoped styles, plus the redesigned homepage.
 *
 * Type stack:
 *   --numu-font-display  Thmanyah Display  → hero / section titles
 *   --numu-font-serif    Thmanyah Serif    → body, editorial copy
 *   --numu-font-sans     Thmanyah Sans     → UI chrome (nav, buttons, prices)
 *
 * Colour palette (warm + earthy, deliberately NOT the Sotheby's blue):
 *   --numu-ink         #0d1f1a  ink / surfaces / text
 *   --numu-evergreen   #154734  primary brand
 *   --numu-evergreen-2 #1c5d44  hover
 *   --numu-copper      #b87333  accent (CTAs, prices, highlights)
 *   --numu-copper-2    #d18a4d  hover for accent
 *   --numu-cream       #f8f4ec  background
 *   --numu-paper       #ffffff  cards
 *   --numu-line        #e7dfd0  dividers
 *   --numu-mute        #6a7164  secondary text
 */

:root {
  /* Type */
  --numu-font-display: 'Thmanyah Display', 'Cairo', Georgia, serif;
  --numu-font-serif:   'Thmanyah Serif', 'Cairo', Georgia, serif;
  --numu-font-sans:    'Thmanyah Sans', 'Cairo', system-ui, -apple-system, sans-serif;

  /* Palette */
  --numu-ink: #0d1f1a;
  --numu-evergreen: #154734;
  --numu-evergreen-2: #1c5d44;
  --numu-copper: #b87333;
  --numu-copper-2: #d18a4d;
  --numu-cream: #f8f4ec;
  --numu-cream-2: #efe9dd;
  --numu-paper: #ffffff;
  --numu-line: #e7dfd0;
  --numu-mute: #6a7164;
  --numu-success: #15803d;
  --numu-danger:  #b91c1c;
  --numu-warning: #b45309;

  /* Geometry */
  --numu-radius-sm: 6px;
  --numu-radius:    10px;
  --numu-radius-lg: 18px;
  --numu-radius-xl: 28px;

  --numu-shadow-sm: 0 1px 2px rgba(13, 31, 26, .04), 0 1px 3px rgba(13, 31, 26, .06);
  --numu-shadow:    0 4px 14px rgba(13, 31, 26, .06), 0 1px 3px rgba(13, 31, 26, .04);
  --numu-shadow-lg: 0 22px 50px rgba(13, 31, 26, .12), 0 6px 18px rgba(13, 31, 26, .06);

  /* Easing */
  --numu-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------ *
 *  Base
 * ------------------------------------------------------------------ */

html { -webkit-text-size-adjust: 100%; }
body,
body:not(.app-layout) /* override legacy frontend.css `padding-top:20px` */ {
  background: var(--numu-cream);
  color: var(--numu-ink);
  font-family: var(--numu-font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  padding-top: 0;
}

/* Display headings — large, single-purpose. For Arabic multi-line headings
   line-height needs to breathe (1.25–1.4) because diacritics + descenders
   overlap at the tighter values that work for Latin. */
h1, h2, h3, .display, .h-display {
  font-family: var(--numu-font-display);
  color: var(--numu-ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
  font-weight: 700;
}
h4, h5, h6 {
  font-family: var(--numu-font-sans);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); }

/* Body copy uses Sans, not Serif. Thmanyah Serif Text has elongated final
   letters that read beautifully in pull quotes but look stretched in body
   paragraphs. Keep Serif as a deliberate choice (`.has-serif`) only. */
p, li, blockquote {
  font-family: var(--numu-font-sans);
  color: var(--numu-mute);
  line-height: 1.85;
  font-weight: 400;
}
.has-serif, blockquote.has-serif {
  font-family: var(--numu-font-serif);
}
strong, b { font-weight: 700; color: var(--numu-ink); }

a {
  color: var(--numu-evergreen);
  text-decoration: none;
  transition: color .2s var(--numu-ease);
}
a:hover { color: var(--numu-copper); }

::selection { background: var(--numu-evergreen); color: #fff; }

img { max-width: 100%; display: block; }

/* ------------------------------------------------------------------ *
 *  Buttons
 * ------------------------------------------------------------------ */

.btn,
button.btn,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--numu-font-sans);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  cursor: pointer;
  transition: all .25s var(--numu-ease);
  line-height: 1.2;
  text-transform: none;
}
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-full, .btn-block, .btn-block-primary { width: 100%; border-radius: var(--numu-radius); }

.btn-primary,
.btn--primary,
button.btn-primary,
a.btn-primary,
.btn-block-primary {
  background: var(--numu-evergreen);
  color: #fff;
  border-color: var(--numu-evergreen);
  box-shadow: 0 6px 18px rgba(21, 71, 52, .28);
}
.btn-primary:hover,
.btn--primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.btn-block-primary:hover {
  background: var(--numu-evergreen-2);
  border-color: var(--numu-evergreen-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(21, 71, 52, .35);
}

/* Outline button has a subtle filled background by default so it's
   visually present on a cream page (a fully transparent btn looks like
   text with a stray border). On hover it goes solid ink. */
.btn-outline,
.btn--outline {
  background: var(--numu-paper);
  color: var(--numu-ink);
  border-color: var(--numu-ink);
  box-shadow: 0 1px 2px rgba(13, 31, 26, .04);
}
.btn-outline:hover,
.btn--outline:hover {
  background: var(--numu-ink);
  color: var(--numu-cream);
  box-shadow: 0 8px 22px rgba(13, 31, 26, .18);
}

.btn-glass {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

.btn-copper {
  background: var(--numu-copper);
  color: #fff;
  border-color: var(--numu-copper);
}
.btn-copper:hover { background: var(--numu-copper-2); border-color: var(--numu-copper-2); }

.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}
.btn-whatsapp:hover { background: #1fb755; }

/* ------------------------------------------------------------------ *
 *  Forms
 * ------------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="datetime-local"],
input[type="date"],
input[type="password"],
select, textarea,
.clean-input {
  width: 100%;
  padding: 13px 16px;
  background: var(--numu-paper);
  border: 1px solid var(--numu-line);
  border-radius: var(--numu-radius);
  font: inherit;
  font-family: var(--numu-font-sans);
  color: var(--numu-ink);
  transition: border-color .2s var(--numu-ease), box-shadow .2s var(--numu-ease);
}
input:focus, select:focus, textarea:focus, .clean-input:focus {
  outline: 0;
  border-color: var(--numu-evergreen);
  box-shadow: 0 0 0 4px rgba(21, 71, 52, .10);
}

label {
  display: block;
  font-family: var(--numu-font-sans);
  font-weight: 600;
  color: var(--numu-ink);
  margin-bottom: 6px;
  font-size: .9rem;
}

.input-group { margin-bottom: 12px; }
.disclaimer { color: var(--numu-mute); font-size: .8rem; line-height: 1.55; margin-top: 8px; }

/* ------------------------------------------------------------------ *
 *  Cards / sections (compat overrides)
 * ------------------------------------------------------------------ */

.section { padding: clamp(56px, 9vw, 110px) 0; }

.section-clean,
.property-section,
.booking-card,
.form-card,
.sidebar-card,
.contact-card {
  border-radius: var(--numu-radius-lg);
}
.booking-card, .form-card, .sidebar-card {
  background: var(--numu-paper);
  border: 1px solid var(--numu-line);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--numu-shadow);
}

/* ------------------------------------------------------------------ *
 *  Status pills (used on units / leads frontend)
 * ------------------------------------------------------------------ */

.status-dot, .status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--numu-font-sans);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .02em;
}
.status-dot.available, .status-pill.available { background: rgba(21, 128, 61, .12); color: var(--numu-success); }
.status-dot.reserved,  .status-pill.reserved  { background: rgba(180, 83, 9, .12);  color: var(--numu-warning); }
.status-dot.sold,      .status-pill.sold      { background: rgba(185, 28, 28, .12); color: var(--numu-danger); }

/* ------------------------------------------------------------------ *
 *  Tabs (single-project interest/booking) + favourite button
 * ------------------------------------------------------------------ */

.numu-tab {
  flex: 1; padding: 11px 14px;
  border: 1px solid var(--numu-line);
  background: var(--numu-cream);
  border-radius: 999px;
  font-family: var(--numu-font-sans); font-weight: 600;
  color: var(--numu-mute);
  cursor: pointer; transition: all .2s var(--numu-ease);
}
.numu-tab:hover { border-color: var(--numu-evergreen); color: var(--numu-evergreen); }
.numu-tab--active {
  background: var(--numu-evergreen); color: #fff; border-color: var(--numu-evergreen);
}

.numu-fav-btn {
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--numu-line);
  box-shadow: var(--numu-shadow-sm);
  color: var(--numu-mute);
}
.numu-fav-btn:hover { color: var(--numu-copper); border-color: var(--numu-copper); }
.numu-fav-btn.is-fav { color: var(--numu-copper); border-color: var(--numu-copper); }
.numu-fav-btn.is-fav svg { fill: var(--numu-copper); stroke: var(--numu-copper); }

hr.divider { border: 0; height: 1px; background: var(--numu-line); margin: 32px 0; }

/* ------------------------------------------------------------------ *
 *  Reveal-on-scroll primitives (driven by GSAP/ScrollTrigger in
 *  assets/js/numu-home.js). These are safe defaults — when JS is
 *  unavailable the elements just appear normally because GSAP would
 *  otherwise overwrite opacity to 0.
 * ------------------------------------------------------------------ */

[data-numu-reveal] { will-change: transform, opacity; }

/* RTL/LTR text direction tweaks */
body.numu-rtl input, body.numu-rtl textarea, body.numu-rtl select { text-align: right; }
body.numu-ltr input, body.numu-ltr textarea, body.numu-ltr select { text-align: left; }

/* ------------------------------------------------------------------ *
 *  Site header — editorial navbar
 * ------------------------------------------------------------------ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background .35s var(--numu-ease), border-color .35s var(--numu-ease), box-shadow .35s var(--numu-ease), padding .35s var(--numu-ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 22px clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

/* State 1: at top of page, sitting over a dark hero video */
.nav--over-hero { background: transparent; }
.nav--over-hero .nav__brand-mark,
.nav--over-hero .nav__brand-text { color: #faf6ec; }
.nav--over-hero .nav__link { color: rgba(250, 246, 236, .85); }
.nav--over-hero .nav__link:hover, .nav--over-hero .nav__link.is-active { color: #fff; }
.nav--over-hero .nav__link.is-active::after { background: #e6a366; }
.nav--over-hero .nav__lang { color: #faf6ec; border-color: rgba(250, 246, 236, .35); }
.nav--over-hero .nav__lang:hover { border-color: #faf6ec; background: rgba(250, 246, 236, .1); }
.nav--over-hero .nav__burger span { background: #faf6ec; }

/* State 2: scrolled — solid cream background */
.nav--scrolled {
  background: rgba(248, 244, 236, .96);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--numu-line);
  box-shadow: 0 1px 0 rgba(13, 31, 26, .04), 0 8px 24px rgba(13, 31, 26, .05);
}
.nav--scrolled .nav__inner { padding-top: 16px; padding-bottom: 16px; }

/* Brand */
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav__brand-mark {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--numu-evergreen); color: #faf6ec;
  font-family: var(--numu-font-display); font-weight: 700; font-size: 1.1rem;
  letter-spacing: 0;
}
.nav--over-hero .nav__brand-mark { background: var(--numu-copper); color: var(--numu-ink); }
.nav__brand-text {
  font-family: var(--numu-font-display);
  font-weight: 700; font-size: 1.15rem;
  color: var(--numu-ink);
  letter-spacing: -0.005em;
}

/* Desktop links */
.nav__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
.nav__link {
  position: relative;
  font-family: var(--numu-font-sans);
  font-weight: 500;
  font-size: .95rem;
  color: var(--numu-ink);
  text-decoration: none;
  padding: 6px 0;
  transition: color .2s var(--numu-ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--numu-copper);
  transform: scaleX(0);
  transform-origin: var(--lr, left);
  transition: transform .25s var(--numu-ease);
}
body.numu-rtl .nav__link::after { --lr: right; }
.nav__link:hover { color: var(--numu-evergreen); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

/* Actions */
.nav__actions { display: flex; align-items: center; gap: 12px; justify-self: end; }
.nav__lang {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 12px;
  border: 1px solid var(--numu-line);
  border-radius: 999px;
  font-family: var(--numu-font-sans);
  font-size: .82rem; letter-spacing: .04em; font-weight: 600;
  color: var(--numu-ink);
  text-decoration: none;
  transition: all .2s var(--numu-ease);
}
.nav__lang:hover { border-color: var(--numu-evergreen); color: var(--numu-evergreen); }

.nav__cta {
  display: inline-flex;
  align-items: center; gap: 8px;
  padding: 10px 22px;
  background: var(--numu-evergreen);
  color: #faf6ec;
  border-radius: 999px;
  font-family: var(--numu-font-sans);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: all .2s var(--numu-ease);
}
.nav__cta:hover { background: var(--numu-copper); color: #fff; transform: translateY(-1px); }
.nav--over-hero .nav__cta { background: var(--numu-copper); }
.nav--over-hero .nav__cta:hover { background: var(--numu-copper-2); }

/* Burger (mobile only) */
.nav__burger {
  display: none;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0;
  width: 40px; height: 40px;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.nav__burger span {
  position: absolute; left: 10px; right: 10px;
  height: 1.5px;
  background: var(--numu-ink);
  transition: transform .25s var(--numu-ease), opacity .15s var(--numu-ease);
}
.nav__burger span:nth-child(1) { top: 14px; }
.nav__burger span:nth-child(2) { top: 20px; }
.nav__burger span:nth-child(3) { top: 26px; }

/* Hide CTA text on small screens; keep icon */
@media (max-width: 980px) {
  .nav__inner { grid-template-columns: auto 1fr auto; }
  .nav__links { display: none; }
  .nav__burger { display: inline-block; }
  .nav__cta span { display: none; }
  .nav__cta { padding: 10px 12px; }
}

/* Mobile overlay */
.navmobile {
  position: fixed; inset: 0;
  z-index: 300;
  background: var(--numu-ink);
  color: #faf6ec;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s var(--numu-ease), visibility .3s var(--numu-ease);
  overflow-y: auto;
}
.navmobile.is-open { visibility: visible; opacity: 1; }
.navmobile__inner {
  min-height: 100%;
  display: flex; flex-direction: column;
  padding: 28px clamp(24px, 6vw, 48px);
}
.navmobile__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(250, 246, 236, .12);
}
.navmobile__brand {
  font-family: var(--numu-font-display);
  font-weight: 600; font-size: 1.05rem;
  color: rgba(250, 246, 236, .9);
  letter-spacing: -.005em;
}
.navmobile__close {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 1px solid rgba(250, 246, 236, .25);
  width: 44px; height: 44px; border-radius: 50%;
  color: #faf6ec; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s var(--numu-ease);
}
.navmobile__close:hover { background: rgba(250, 246, 236, .08); border-color: rgba(250, 246, 236, .55); }

.navmobile__links {
  flex: 1;
  padding: clamp(32px, 6vw, 60px) 0;
  display: flex; flex-direction: column;
}
.navmobile__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(16px, 2.6vw, 22px) 0;
  border-bottom: 1px solid rgba(250, 246, 236, .12);
  color: #faf6ec;
  text-decoration: none;
  font-family: var(--numu-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 3.6rem);
  line-height: 1.1;
  transition: color .25s var(--numu-ease), padding .25s var(--numu-ease);
  opacity: 0; transform: translateX(-30px);
  animation: nav-mobile-in .55s var(--numu-ease) calc(.05s + var(--i, 0) * 0.07s) forwards;
}
body.numu-rtl .navmobile__link { transform: translateX(30px); }
.navmobile.is-open .navmobile__link { opacity: 1; transform: translateX(0); }
.navmobile__link:hover { color: var(--numu-copper); padding-inline-start: 10px; }
.navmobile__link-num {
  font-family: var(--numu-font-display);
  font-weight: 400;
  font-size: .9rem;
  color: var(--numu-copper);
  letter-spacing: .04em;
  align-self: start;
  padding-top: clamp(8px, 1vw, 14px);
}
.navmobile__link-label { align-self: baseline; }
.navmobile__link-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(250, 246, 236, .55);
  transition: color .25s var(--numu-ease), transform .25s var(--numu-ease);
  align-self: center;
}
.navmobile__link:hover .navmobile__link-arrow { color: var(--numu-copper); transform: rotate(-45deg); }

@keyframes nav-mobile-in { to { opacity: 1; transform: translateX(0); } }

.navmobile__foot { padding-top: 30px; border-top: 1px solid rgba(250, 246, 236, .12); }
.navmobile__cta {
  display: inline-block;
  padding: 16px 28px;
  background: var(--numu-copper);
  color: #fff;
  border-radius: 999px;
  font-family: var(--numu-font-sans);
  font-weight: 600; font-size: 1rem;
  text-decoration: none;
  transition: background .2s var(--numu-ease);
}
.navmobile__cta:hover { background: var(--numu-copper-2); color: #fff; }
.navmobile__sub {
  margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  font-family: var(--numu-font-sans);
  font-size: .88rem;
  color: rgba(250, 246, 236, .55);
}
.navmobile__sub a { color: rgba(250, 246, 236, .75); text-decoration: none; }
.navmobile__sub a:hover { color: var(--numu-copper); }
.navmobile__sub span { color: rgba(250, 246, 236, .25); }

/* Lock scroll while overlay is open */
body.has-nav-open { overflow: hidden; }

/* Page content needs to clear the fixed navbar on non-hero pages. The
   homepage hero is full-bleed and intentionally sits under the
   transparent nav, so we only push down on .has-light-hero. */
body.has-light-hero > main,
body.has-light-hero > article {
  /* No top padding — each template handles its own top spacing via the
     section-specific hero padding (e.g. .np-archive__hero, .np-about__hero).
     But push the body down enough that fixed nav doesn't cover the very
     first pixel of content on edge cases (login screens, error pages). */
  padding-top: 0;
}

/* ------------------------------------------------------------------ *
 *  Site footer
 * ------------------------------------------------------------------ */

.site-footer {
  background: var(--numu-ink);
  color: rgba(250, 246, 236, .82);
  padding: clamp(60px, 8vw, 100px) 0 0; /* explicit 0 bottom — overrides
    legacy `footer{padding:5rem 0}` rule that was leaving a tall empty
    band under the rail. */
  margin: 0;
  border-top: 0;
}
.site-footer__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px) clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

.site-footer__brand-link {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  margin-bottom: 18px;
}
.site-footer__brand-mark {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--numu-copper); color: var(--numu-ink);
  font-family: var(--numu-font-display); font-weight: 700; font-size: 1.1rem;
}
.site-footer__brand-text {
  font-family: var(--numu-font-display);
  font-weight: 700; font-size: 1.15rem;
  color: #faf6ec;
}
.site-footer__brand-copy {
  font-family: var(--numu-font-sans);
  color: rgba(250, 246, 236, .65);
  line-height: 1.85;
  margin: 0 0 22px;
  max-width: 32ch;
}
.site-footer__social { display: flex; gap: 10px; }
.site-footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(250, 246, 236, .15);
  color: rgba(250, 246, 236, .75);
  transition: all .2s var(--numu-ease);
}
.site-footer__social a:hover {
  background: var(--numu-copper); color: var(--numu-ink); border-color: var(--numu-copper);
  transform: translateY(-2px);
}

.site-footer__col h4 {
  font-family: var(--numu-font-sans);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--numu-copper);
  margin: 0 0 18px;
}
.site-footer__col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.site-footer__col li,
.site-footer__col a {
  font-family: var(--numu-font-sans);
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(250, 246, 236, .75);
  text-decoration: none;
  transition: color .2s var(--numu-ease);
}
.site-footer__col a:hover { color: var(--numu-copper); }

.site-footer__rail {
  border-top: 1px solid rgba(250, 246, 236, .12);
  background: rgba(0, 0, 0, .25);
}
.site-footer__rail-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 60px);
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: space-between;
  align-items: center;
}
.site-footer__rail p {
  font-family: var(--numu-font-sans);
  font-size: .82rem;
  color: rgba(250, 246, 236, .55);
  margin: 0;
}
.site-footer__legal {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--numu-font-sans);
  font-size: .85rem;
}
.site-footer__legal a {
  color: rgba(250, 246, 236, .75);
  text-decoration: none;
  transition: color .2s var(--numu-ease);
}
.site-footer__legal a:hover { color: var(--numu-copper); }
.site-footer__legal span { color: rgba(250, 246, 236, .25); }

/* ------------------------------------------------------------------ *
 *  Form policy notice (used under every public form)
 * ------------------------------------------------------------------ */

.numu-form-policy {
  margin-top: 14px;
  font-family: var(--numu-font-sans);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--numu-mute);
}
.numu-form-policy a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--numu-copper);
  text-underline-offset: 3px;
  font-weight: 600;
}
.numu-form-policy a:hover { color: var(--numu-evergreen); }
/* When the form sits on a dark panel (contact form's evergreen side) */
.np-contact__right .numu-form-policy { color: rgba(250, 246, 236, .65); }
.np-contact__right .numu-form-policy a { color: rgba(250, 246, 236, .9); }
.np-contact__right .numu-form-policy a:hover { color: #fff; }