/* Generated by scripts/build_public_assets.py. Edit source files, not this bundle. */

/* ===== static/css/thmanyah.css ===== */
/* Thmanyah type system. Run scripts/install_thmanyah_fonts.py with the owner-supplied ZIP. */
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyah/thmanyahsans-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyah/thmanyahsans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyah/thmanyahsans-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyah/thmanyahsans-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyah/thmanyahsans-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("../fonts/thmanyah/thmanyahserifdisplay-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("../fonts/thmanyah/thmanyahserifdisplay-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("../fonts/thmanyah/thmanyahserifdisplay-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Text";
  src: url("../fonts/thmanyah/thmanyahseriftext-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Text";
  src: url("../fonts/thmanyah/thmanyahseriftext-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  --font-ui: "Thmanyah Sans", "Tahoma", "Arial", sans-serif;
  --font-display: "Thmanyah Serif Display", "Thmanyah Sans", "Tahoma", sans-serif;
  --font-reading: "Thmanyah Serif Text", "Thmanyah Sans", "Tahoma", sans-serif;
}
html, body, button, input, select, textarea { font-family: var(--font-ui); }
h1, h2, .display-title, .nn-brand-marquee { font-family: var(--font-display); }
.article-content, .article-main { font-family: var(--font-reading); }

/* ===== static/css/style.css ===== */
:root {
  --bg: #f7f1e8;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-strong: rgba(255, 255, 255, 0.94);
  --text: #1c1915;
  --muted: #6d6458;
  --line: rgba(28, 25, 21, 0.08);
  --primary: #83643b;
  --secondary: #0f5b54;
  --accent: #c6a56d;
  --shadow: 0 24px 60px rgba(17, 17, 17, 0.08);
  --shadow-soft: 0 14px 32px rgba(17, 17, 17, 0.05);
  --radius: 24px;
  --radius-lg: 32px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding-bottom: 6.8rem;
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.8), transparent 34%),
    radial-gradient(circle at bottom left, rgba(255,255,255,0.65), transparent 28%),
    linear-gradient(180deg, #fbfbfd, var(--bg));
  line-height: 1.75;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; border-radius: 18px; }
button { font: inherit; border: 0; cursor: pointer; }
.container { width: min(calc(100% - 2rem), var(--container)); margin: 0 auto; }
.skip-link { position: absolute; inset-inline-start: -999px; top: 1rem; }
.skip-link:focus { inset-inline-start: 1rem; z-index: 2000; background: #fff; padding: 0.75rem 1rem; border-radius: 999px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(22px);
  background: rgba(255, 255, 255, 0.74);
  border-bottom: 1px solid rgba(28, 25, 21, 0.06);
}

.header-strip {
  border-bottom: 1px solid rgba(28, 25, 21, 0.06);
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
}

.header-strip-inner {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
}

.header-strip-inner p { margin: 0; }
.header-strip-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.header-strip-links a { opacity: 0.94; }

.topbar {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.8rem 0;
  position: relative;
}

.header-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0 0.3rem 0.85rem;
}

.header-main {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
  flex: 1;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 280px;
  flex-shrink: 0;
}

.brand strong {
  display: block;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.15rem;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(34, 24, 13, 0.1);
}

.main-nav {
  display: flex;
  gap: 0.35rem;
  flex-wrap: nowrap;
  padding: 0.26rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.92);
  border: 1px solid rgba(28, 25, 21, 0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  overflow-x: auto;
}

.main-nav a {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.68rem 0.9rem;
  border-radius: 999px;
  transition: 0.25s ease;
  white-space: nowrap;
}

.main-nav a:hover {
  color: var(--text);
  background: rgba(255,255,255,0.88);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.header-response-note {
  color: var(--secondary);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: var(--shadow-soft);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.28rem;
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.phone-pill, .btn {
  border-radius: 999px;
  padding: 0.8rem 1rem;
  transition: 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 42px;
}

.btn-primary {
  background: #111111;
  color: white;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.16);
}

.btn-primary:hover { transform: translateY(-1px); }
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

.btn-primary:hover::after {
  transform: translateX(120%);
}

.btn-outline {
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  background: rgba(255,255,255,0.56);
}

.btn-soft {
  background: rgba(245, 245, 247, 0.96);
  color: var(--text);
  border: 1px solid rgba(28, 25, 21, 0.06);
}

@media (min-width: 721px) {
  .brand {
    padding-inline-end: 0.3rem;
  }

  .header-actions .btn-primary {
    padding-inline: 1.15rem;
  }
}

.hero, .page-hero { padding: 5.5rem 0 4rem; }
.page-hero.compact { padding-bottom: 1rem; }

.hero,
.page-hero {
  position: relative;
  overflow: hidden;
}

.hero-has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.9)),
    linear-gradient(90deg, rgba(255,255,255,0.84), rgba(255,255,255,0.42)),
    var(--hero-bg-image) center/cover no-repeat;
  border-bottom-left-radius: 36px;
  border-bottom-right-radius: 36px;
}

.blog-hero-has-bg::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.92)),
    linear-gradient(90deg, rgba(255,255,255,0.88), rgba(255,255,255,0.56)),
    var(--hero-bg-image) center/cover no-repeat;
}

.hero .container,
.page-hero .container {
  position: relative;
  z-index: 1;
}

.hero-grid, .two-col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.5rem;
  align-items: center;
}

.hero h1, .page-hero h1 {
  font-size: clamp(2.5rem, 4vw, 4.9rem);
  line-height: 1.03;
  margin: 0.2rem 0 1rem;
}

.hero p, .page-hero p, .content-card p { color: var(--muted); }
.hero-copy p, .page-hero p {
  max-width: 720px;
  font-size: 1.05rem;
}

.eyebrow {
  display: inline-flex;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  color: #555;
  background: rgba(245, 245, 247, 0.96);
  border: 1px solid rgba(28, 25, 21, 0.05);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.glass-card, .content-card, .service-card, .portfolio-card, .testimonial, .city-card, .blog-card, .quote-form, .trust-box, .cta-box, .stat-card, .page-hero-note {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

.glass-card, .content-card, .service-card, .city-card, .blog-card, .quote-form, .trust-box, .stat-card, .page-hero-note {
  padding: 1.5rem;
}

.hero-copy,
.hero-panel { position: relative; }

.page-hero-shell {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.25rem;
  align-items: center;
}

.page-hero-note {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.72));
}

.page-hero-note strong, .city-note strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 0.65rem;
  color: var(--primary);
}

.city-hero-shell {
  align-items: stretch;
}

.city-note {
  border-top: 4px solid var(--accent);
}

.section { padding: 2.5rem 0 4.5rem; }
.muted { background: transparent; }

.section-heading {
  max-width: 760px;
  margin-bottom: 1.5rem;
}

.split-heading {
  max-width: none;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.split-heading p {
  max-width: 420px;
  color: var(--muted);
}

.section-heading h2 {
  margin: 0.3rem 0 0;
  font-size: clamp(1.6rem, 2.4vw, 2.7rem);
}

.cards-grid, .portfolio-grid, .testimonial-grid, .blog-grid, .city-list, .media-grid {
  display: grid;
  gap: 1.2rem;
}

.cards-grid, .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.testimonial-grid, .blog-grid, .city-list, .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.service-card,
.portfolio-card,
.city-card,
.blog-card,
.managed-media,
.testimonial {
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover,
.portfolio-card:hover,
.city-card:hover,
.blog-card:hover,
.managed-media:hover,
.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 56px rgba(17, 17, 17, 0.1);
}

.service-card img,
.managed-media img,
.hero-photo img,
.portfolio-card img {
  width: 100%;
  object-fit: cover;
}

.service-card img {
  height: 220px;
  margin-bottom: 1rem;
}

.service-card h2, .service-card h3, .city-card h2, .blog-card h2 { margin-top: 0; }
.service-card p,
.city-card p,
.blog-card p,
.portfolio-copy p {
  color: var(--muted);
}

.service-card ul, .content-card ul, .trust-box ul {
  padding: 0;
  margin: 1rem 0 0;
  list-style: none;
}

.service-card li, .content-card li, .trust-box li {
  padding-inline-start: 1.25rem;
  position: relative;
  margin-bottom: 0.75rem;
}

.service-card li::before, .content-card li::before, .trust-box li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  position: absolute;
  inset-inline-start: 0;
  top: 0.7rem;
}

.service-links {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.portfolio-copy {
  padding: 1rem 1.2rem 1.35rem;
}

.portfolio-copy span, .city-card span {
  color: var(--secondary);
  font-weight: 700;
}

.hero-actions, .cta-inline {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero-media-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.hero-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: var(--shadow);
}

.page-hero-visual,
.banner-card {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: var(--shadow);
}

.page-hero-visual img {
  width: 100%;
  height: 340px;
  object-fit: cover;
}

.hero-photo-large { grid-column: span 2; }
.hero-photo img { height: 220px; }
.hero-photo-large img { height: 320px; }

.hero-photo figcaption, .managed-media figcaption, .banner-card figcaption {
  padding: 0.9rem 1rem 1rem;
  color: var(--muted);
  font-weight: 700;
}

.banner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.banner-grid-large .banner-card-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.banner-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.photo-wall,
.featured-projects,
.faq-grid,
.process-grid {
  display: grid;
  gap: 1rem;
}

.photo-wall {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.photo-wall-card,
.featured-project-card,
.faq-card,
.process-card {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.82);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.photo-wall-card img,
.featured-project-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.photo-wall-card-wide {
  grid-column: span 2;
}

.photo-wall-card-tall {
  grid-row: span 2;
}

.photo-wall-card figcaption {
  padding: 0.9rem 1rem 1rem;
  color: var(--muted);
  font-weight: 700;
}

.featured-projects {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.featured-project-card-main {
  grid-column: span 2;
}

.featured-project-card-main img {
  height: 360px;
}

.featured-project-copy {
  padding: 1.15rem 1.2rem 1.35rem;
}

.featured-project-copy span {
  color: var(--secondary);
  font-weight: 700;
}

.featured-project-copy p {
  color: var(--muted);
}

.project-badges {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

.project-badges strong {
  display: inline-flex;
  padding: 0.5rem 0.78rem;
  border-radius: 999px;
  background: rgba(245,245,247,0.96);
  border: 1px solid rgba(17,17,17,0.05);
  font-size: 0.85rem;
}

.faq-grid,
.process-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.faq-card,
.process-card {
  padding: 1.35rem;
}

.faq-card h3,
.process-card h3 {
  margin-top: 0;
}

.faq-card p,
.process-card p {
  color: var(--muted);
}

.process-card strong {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #111;
  color: #fff;
  margin-bottom: 0.9rem;
}

.two-col-top {
  align-items: start;
}

.before-after-card {
  padding: 1.2rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: var(--shadow);
}

.before-after-stage {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  min-height: 420px;
}

.before-after-image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.before-layer {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  overflow: hidden;
}

.before-layer .before-after-image {
  width: 100%;
}

.before-after-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 50%;
  width: 2px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 1px rgba(17,17,17,0.08);
}

.before-after-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #111;
  transform: translate(-50%, -50%);
  box-shadow: 0 16px 30px rgba(17,17,17,0.18);
}

.before-after-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.before-after-controls span {
  font-weight: 700;
}

.before-after-controls input[type="range"] {
  flex: 1;
}

.cities-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.cities-cloud a, .related-link, .mini-service {
  display: inline-flex;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.84);
  border: 1px solid var(--line);
}

.related-link {
  margin-bottom: 0.7rem;
}

.mini-service {
  width: 100%;
  border-radius: 18px;
  margin-top: 0.75rem;
  flex-direction: column;
  align-items: flex-start;
}

.mini-service span { color: var(--muted); font-size: 0.93rem; }

.testimonial {
  padding: 1.4rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));
}

.testimonial footer {
  color: var(--muted);
  font-weight: 700;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.4rem;
}

.stat-card strong {
  display: block;
  font-size: 1.5rem;
  color: var(--primary);
}

.trust-box {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.78));
}

.accent-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82));
}

.article-shell { padding-top: 3rem; }
.article-body { max-width: 820px; }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  align-items: start;
}
.reading-progress {
  position: sticky;
  top: 88px;
  z-index: 900;
  height: 3px;
  background: rgba(17,17,17,0.05);
}

.reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: #111;
  transition: width 0.12s linear;
}

.article-main { min-width: 0; }
.lead { font-size: 1.15rem; color: var(--muted); }
.media-section { padding-top: 0; }

.blog-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.blog-sidebar {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 110px;
}

.blog-main,
.article-main { min-width: 0; }

.blog-listing {
  display: grid;
  gap: 1rem;
}

.blog-card-body {
  padding: 1.15rem 1.2rem 1.3rem;
}

.blog-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.sidebar-card,
.search-form,
.breadcrumbs,
.article-cover,
.article-share,
.article-tags,
.comment-section {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.76);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.sidebar-card,
.search-form,
.article-share,
.article-tags,
.comment-section {
  padding: 1.2rem;
}

.breadcrumbs {
  padding: 0.9rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.search-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.search-row {
  display: flex;
  gap: 0.7rem;
}

.search-row input {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.94);
  font: inherit;
}

.taxonomy-list,
.popular-posts {
  display: grid;
  gap: 0.55rem;
}

.taxonomy-list a,
.popular-posts a,
.tag-cloud a,
.post-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(245,245,247,0.96);
  border: 1px solid rgba(17,17,17,0.05);
  color: var(--muted);
  font-size: 0.88rem;
}

.taxonomy-list a.active {
  background: #111;
  color: white;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.post-chip {
  margin-bottom: 0.8rem;
  color: #111;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0.9rem 0 1rem;
}

.article-cover {
  overflow: hidden;
  margin: 1.2rem 0;
}

.article-cover img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
}

.article-share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.article-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1rem 0 1.3rem;
}

.insight-card {
  padding: 1rem;
  border-radius: 22px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: var(--shadow-soft);
}

.insight-card strong {
  display: block;
  margin-bottom: 0.45rem;
}

.insight-card span {
  color: var(--muted);
  font-size: 0.94rem;
}

.article-summary {
  margin: 1.25rem 0;
  padding: 1.2rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.82);
  box-shadow: var(--shadow-soft);
}

.summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.summary-grid a,
.metric-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(245,245,247,0.96);
  border: 1px solid rgba(17,17,17,0.05);
  color: var(--muted);
  font-size: 0.88rem;
}

.article-section,
.article-content {
  margin-bottom: 1.25rem;
}

.article-section h2 {
  margin-bottom: 0.65rem;
}

.article-cta {
  margin: 1.5rem 0;
}

.comments-list {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.managed-media img {
  height: 260px;
}

.quote-form label {
  display: block;
  font-weight: 700;
  margin-bottom: 1rem;
}

.quote-form input,
.quote-form textarea,
.quote-form select {
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
  font: inherit;
}

.cta-box {
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(180deg, #111111, #1c1c1e);
  color: white;
  border: 1px solid rgba(255,255,255,0.08);
}

.cta-box .eyebrow {
  background: rgba(255,255,255,0.08);
  color: white;
  border-color: rgba(255,255,255,0.08);
}

.site-footer {
  padding: 2.5rem 0 3rem;
  position: relative;
}

.footer-shell {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 32px;
  box-shadow: var(--shadow);
  padding: 1.4rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 720px;
}

.footer-mark {
  flex-shrink: 0;
}

.footer-brand h2 {
  margin: 0.1rem 0 0.45rem;
  font-size: clamp(1.45rem, 2vw, 2rem);
}

.footer-brand p {
  margin: 0;
  color: var(--muted);
}

.footer-primary-action {
  flex-shrink: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 1.2rem;
  padding: 0.3rem 0 1rem;
}

.footer-grid h3 {
  margin-top: 0;
  margin-bottom: 0.8rem;
  font-size: 0.98rem;
}

.site-footer a {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--muted);
}

.site-footer a:hover {
  color: var(--text);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.floating-actions {
  position: fixed;
  left: 1rem;
  bottom: 6.25rem;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.floating-whatsapp, .floating-call {
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.12);
  padding: 0.82rem 1rem;
  border-radius: 999px;
  color: white;
  min-height: 44px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  backdrop-filter: blur(16px);
}

.floating-whatsapp {
  background: rgba(28, 28, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.floating-call {
  background: rgba(245, 245, 247, 0.96);
  color: #111111;
  border: 1px solid rgba(17, 17, 17, 0.06);
}

.conversion-bar {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1190;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(360px, 1.4fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.72);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 46px rgba(17, 17, 17, 0.14);
  backdrop-filter: blur(18px);
}

.conversion-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.conversion-copy strong {
  font-size: 1rem;
  color: var(--text);
}

.conversion-copy span {
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversion-mini-form,
.conversion-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.conversion-mini-form input,
.conversion-mini-form select {
  width: 100%;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(28, 25, 21, 0.1);
  background: rgba(247, 247, 248, 0.9);
  color: var(--text);
  padding: 0.7rem 0.9rem;
  font: inherit;
}

.conversion-mini-form button,
.conversion-actions .btn {
  min-width: 104px;
  white-space: nowrap;
}

.conversion-form-card {
  position: relative;
  border: 1px solid rgba(17, 91, 84, 0.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247, 250, 249, 0.96));
}

.conversion-form-card::before {
  content: "رد سريع";
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  border-radius: 999px;
  background: rgba(15, 91, 84, 0.1);
  color: var(--secondary);
  padding: 0.32rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
}

.conversion-form-card .btn {
  width: 100%;
}

.conversion-cta {
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(15, 91, 84, 0.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(241, 248, 246, 0.96));
}

.conversion-cta h2 {
  max-width: 760px;
}

.text-link {
  color: #111111;
  font-weight: 600;
}

.blog-card a:hover, .text-link:hover { opacity: 0.88; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .conversion-bar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .conversion-copy span {
    white-space: normal;
  }
  .conversion-mini-form,
  .conversion-actions {
    width: 100%;
  }
  .conversion-actions .btn {
    flex: 1;
  }

  .topbar,
  .header-actions,
  .header-main,
  .blog-layout,
  .article-layout,
  .page-hero-shell,
  .footer-top,
  .footer-grid,
  .hero-grid,
  .two-col,
  .testimonial-grid,
  .blog-grid,
  .city-list,
  .portfolio-grid,
  .cards-grid,
  .media-grid {
    grid-template-columns: 1fr;
  }
  .article-insights {
    grid-template-columns: 1fr;
  }

  .banner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .photo-wall,
  .featured-projects,
  .faq-grid,
  .process-grid {
    grid-template-columns: 1fr 1fr;
  }
  .featured-project-card-main,
  .photo-wall-card-wide {
    grid-column: span 2;
  }
  .before-after-stage,
  .before-after-image {
    min-height: 320px;
    height: 320px;
  }

  .topbar { align-items: flex-start; }
  .main-nav { width: 100%; justify-content: center; }
  .footer-grid { display: grid; }
  .blog-sidebar { position: static; }
}

@media (max-width: 720px) {
  body {
    padding-bottom: 13.2rem;
  }

  .header-strip {
    display: none;
  }

  .header-strip-inner,
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero, .page-hero { padding-top: 3.8rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .cta-box, .hero-actions, .cta-inline { flex-direction: column; align-items: stretch; }
  .hero-media-stack { grid-template-columns: 1fr; }
  .hero-photo-large { grid-column: auto; }
  .hero-photo img, .hero-photo-large img, .managed-media img, .page-hero-visual img, .banner-card img { height: 220px; }
  .topbar {
    min-height: auto;
    align-items: center;
    gap: 0.9rem;
  }
  .brand {
    min-width: 0;
    max-width: calc(100% - 64px);
  }
  .brand strong,
  .brand small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .header-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    inset-inline: 0;
    display: none;
    z-index: 1200;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 24px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: var(--shadow);
  }
  .menu-open .header-panel {
    display: flex;
  }
  .header-main,
  .header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .main-nav {
    width: 100%;
    justify-content: flex-start;
    flex-direction: column;
    border-radius: 22px;
    padding: 0.5rem;
    overflow: visible;
  }
  .main-nav a {
    width: 100%;
    padding: 0.9rem 1rem;
  }
  .header-actions {
    gap: 0.65rem;
  }
  .header-response-note {
    text-align: center;
  }
  .phone-pill, .btn { width: 100%; }
  .footer-shell {
    border-radius: 24px;
    padding: 1rem;
  }
  .footer-top {
    padding-bottom: 1rem;
  }
  .footer-grid {
    gap: 1.25rem;
  }
  .footer-bottom {
    gap: 0.5rem;
  }
  .search-row,
  .article-share {
    flex-direction: column;
  }
  .banner-grid {
    grid-template-columns: 1fr;
  }
  .photo-wall,
  .featured-projects,
  .faq-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }
  .featured-project-card-main,
  .photo-wall-card-wide,
  .banner-grid-large .banner-card-featured {
    grid-column: auto;
  }
  .featured-project-card-main img,
  .photo-wall-card img {
    height: 220px;
  }
  .before-after-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .before-after-stage,
  .before-after-image {
    min-height: 220px;
    height: 220px;
  }
  .reading-progress {
    top: 76px;
  }
  .floating-actions {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
  }
  .floating-whatsapp,
  .floating-call {
    flex: 0 1 auto;
    min-width: 118px;
    min-height: 40px;
    padding: 0.72rem 0.9rem;
    font-size: 0.84rem;
    box-shadow: 0 8px 22px rgba(17, 17, 17, 0.1);
  }
  .conversion-bar {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 4.9rem;
    padding: 0.75rem;
    gap: 0.6rem;
  }
  .conversion-mini-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .conversion-mini-form button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .conversion-actions {
    display: none;
  }
}

.archive-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.archive-stats a,
.archive-link-grid a,
.archive-list article {
  border: 1px solid rgba(22, 83, 76, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 34px rgba(25, 31, 28, 0.06);
}

.archive-stats a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem;
  color: var(--text);
}

.archive-stats strong {
  font-size: 1.7rem;
  color: var(--secondary);
}

.archive-section {
  margin-top: 2.5rem;
}

.archive-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.archive-link-grid.dense {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.archive-link-grid a {
  display: flex;
  min-height: 82px;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.85rem;
  color: var(--text);
}

.archive-link-grid span,
.archive-list span {
  color: var(--secondary);
  font-size: 0.78rem;
  font-weight: 800;
}

.archive-link-grid strong {
  font-size: 0.95rem;
  line-height: 1.45;
}

.archive-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.archive-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.archive-list article {
  padding: 1rem;
}

.archive-list h2 {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.05rem;
}

.archive-list p {
  margin: 0;
  color: var(--muted);
}

.calculator-card,
.calculator-result,
.comparison-grid .content-card {
  border-radius: 8px;
}

.calculator-result h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  color: var(--secondary);
  margin: 0.4rem 0 0.8rem;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.before-after-showcase {
  display: grid;
  gap: 1rem;
}

.before-after-showcase .hero-actions {
  justify-content: center;
}

.exit-modal[hidden] {
  display: none;
}

.exit-modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.exit-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.42);
  backdrop-filter: blur(6px);
}

.exit-modal-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  border-radius: 8px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 24px 70px rgba(17,17,17,0.22);
  padding: 1.4rem;
}

.exit-close {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(17,17,17,0.06);
}

.exit-lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  box-shadow: none;
  padding: 0;
  background: transparent;
}

.exit-lead-form button {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .archive-stats,
  .archive-link-grid,
  .archive-link-grid.dense,
  .comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .archive-stats,
  .archive-link-grid,
  .archive-link-grid.dense,
  .archive-list,
  .comparison-grid,
  .exit-lead-form {
    grid-template-columns: 1fr;
  }
}

/* Progressive navigation and accessibility */
.navigation-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}
.navigation-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--secondary, #0f5b54);
  opacity: 0;
  transition: width .35s ease, opacity .2s ease;
}
.site-is-navigating .navigation-progress span {
  width: 76%;
  opacity: 1;
}
html:not(.site-is-navigating) .navigation-progress span { width: 100%; }
.transition-fade { transition: opacity .18s ease, transform .18s ease; }
html.is-changing .transition-fade,
html.site-is-navigating .transition-fade { opacity: .35; transform: translateY(4px); }
.main-nav a.active,
.main-nav a[aria-current="page"] { color: var(--secondary); font-weight: 800; }
.form-status { flex-basis: 100%; margin: .35rem 0 0; font-size: .88rem; }
.form-status[data-type="success"] { color: #176b3a; }
.form-status[data-type="error"] { color: #a51d2d; }
.form-status[data-type="warning"] { color: #875f00; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2rem auto; }
.pagination a { min-height: 44px; display: inline-flex; align-items: center; padding: .6rem 1rem; border: 1px solid rgba(0,0,0,.12); border-radius: 999px; }
.pagination-disabled { opacity: .45; min-height: 44px; display: inline-flex; align-items: center; padding: .6rem 1rem; }
img { max-width: 100%; height: auto; }
button:disabled { opacity: .65; cursor: wait; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Spam trap: kept outside the viewport while remaining in the form payload. */
.website-field {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* ===== static/css/design-system-v2.css ===== */
/* Structured visual system: calmer surfaces, consistent spacing and hierarchy. */
:root {
  --v2-page: #f7f6f2;
  --v2-surface: #ffffff;
  --v2-surface-soft: #f0f3ee;
  --v2-text: #17211d;
  --v2-muted: #65706a;
  --v2-line: rgba(23, 33, 29, .11);
  --v2-brand: var(--primary-color, #6f5636);
  --v2-green: var(--secondary-color, #155d50);
  --v2-radius-sm: 12px;
  --v2-radius: 20px;
  --v2-radius-lg: 30px;
  --v2-shadow: 0 14px 45px rgba(29, 44, 37, .08);
  --v2-shadow-hover: 0 22px 60px rgba(29, 44, 37, .13);
  --v2-container: 1180px;
}

html { scroll-behavior: smooth; background: var(--v2-page); }
body { background: var(--v2-page); color: var(--v2-text); line-height: 1.75; }
.container { width: min(var(--v2-container), calc(100% - 32px)); }
.section { padding-block: clamp(64px, 8vw, 108px); }
.section.muted { background: var(--v2-surface-soft); }
.section-heading { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-heading h2, .page-hero h1, .hero h1 { letter-spacing: -.035em; line-height: 1.16; }
.section-heading p, .page-hero p, .hero p { color: var(--v2-muted); }

.site-header { background: color-mix(in srgb, var(--v2-surface) 94%, transparent); border-bottom: 1px solid var(--v2-line); box-shadow: none; }
.header-shell { min-height: 76px; }
.main-nav { gap: 6px; }
.main-nav a { border-radius: 10px; padding: 9px 13px; font-weight: 650; }
.main-nav a:hover, .main-nav a.active { background: var(--v2-surface-soft); color: var(--v2-green); }

.hero { padding-block: clamp(56px, 8vw, 104px); }
.hero-grid { gap: clamp(38px, 6vw, 84px); align-items: center; }
.hero-copy { max-width: 660px; }
.hero-copy h1 { font-size: clamp(2.45rem, 5vw, 5.2rem); }
.hero-panel, .page-hero-shell { border: 1px solid var(--v2-line); border-radius: var(--v2-radius-lg); box-shadow: var(--v2-shadow); background: var(--v2-surface); }
.page-hero-shell { padding: clamp(28px, 5vw, 64px); gap: clamp(28px, 5vw, 62px); }
.page-hero-visual, .hero-photo { overflow: hidden; border-radius: var(--v2-radius); }
.page-hero-visual img, .hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.btn { min-height: 46px; border-radius: 12px; padding-inline: 20px; font-weight: 750; box-shadow: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--v2-green); border-color: var(--v2-green); }
.btn-outline, .btn-soft { background: var(--v2-surface); border: 1px solid var(--v2-line); color: var(--v2-text); }

.cards-grid { gap: 24px; }
.service-card, .content-card, .process-card, .blog-card, .city-card, .stat-card, .trust-box, .conversion-form-card, .sidebar-card, .featured-project-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  box-shadow: none;
}
.service-card, .content-card, .process-card, .blog-card, .city-card { padding: clamp(22px, 3vw, 32px); }
.service-card { display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.service-card > img { width: calc(100% + clamp(44px, 6vw, 64px)); max-width: none; margin: calc(clamp(22px, 3vw, 32px) * -1) calc(clamp(22px, 3vw, 32px) * -1) 6px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--v2-radius) var(--v2-radius) 0 0; }
.service-card:hover, .city-card:hover, .featured-project-card:hover { box-shadow: var(--v2-shadow-hover); transform: translateY(-4px); }
.service-card h2, .service-card h3 { margin: 0; line-height: 1.3; }
.service-card p { color: var(--v2-muted); margin: 0; }
.service-card ul { margin-block: 4px 10px; }
.service-links { margin-top: auto; gap: 9px; }

.card-meta-row, .tag-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.content-badge, .tag-row span, .district-chip {
  display: inline-flex; align-items: center; min-height: 30px; padding: 5px 11px;
  border-radius: 999px; background: rgba(21, 93, 80, .1); color: var(--v2-green);
  font-size: .82rem; font-weight: 720; border: 1px solid rgba(21, 93, 80, .12);
}
.content-badge.subtle { background: var(--v2-surface-soft); color: var(--v2-muted); border-color: var(--v2-line); }
.tag-row { margin-top: -2px; }
.tag-row span { background: transparent; border-color: var(--v2-line); color: var(--v2-muted); }

.quote-form, .conversion-form-card { padding: clamp(24px, 4vw, 38px); gap: 16px; }
.quote-form label { color: var(--v2-text); font-weight: 700; }
.quote-form input, .quote-form select, .quote-form textarea {
  width: 100%; min-height: 50px; margin-top: 7px; padding: 11px 14px;
  border-radius: 12px; border: 1px solid var(--v2-line); background: #fff; color: var(--v2-text);
  outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.quote-form textarea { min-height: 118px; resize: vertical; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: var(--v2-green); box-shadow: 0 0 0 4px rgba(21, 93, 80, .1); }
.quote-form select:disabled { opacity: .6; cursor: not-allowed; }

.district-section { border-block: 1px solid var(--v2-line); }
.district-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.district-chip { justify-content: center; min-height: 44px; background: var(--v2-surface); border-color: var(--v2-line); color: var(--v2-text); }

.featured-project-card { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.featured-project-copy { padding: clamp(20px, 3vw, 32px); }
.featured-project-copy > span { color: var(--v2-green); font-weight: 750; }

.post-meta { gap: 8px; }
.post-meta span { background: var(--v2-surface-soft); border: 1px solid var(--v2-line); border-radius: 999px; padding: 5px 11px; }
.article-main, .article-sidebar { min-width: 0; }
.article-content { font-size: 1.05rem; }
.article-content h2, .article-content h3 { margin-top: 1.8em; }

.floating-actions { gap: 8px; }
.floating-actions a { box-shadow: var(--v2-shadow); border-radius: 999px; }
.navigation-progress span { background: var(--v2-green); }

@media (max-width: 720px) {
  .container { width: min(100% - 22px, var(--v2-container)); }
  .section { padding-block: 54px; }
  .hero-copy h1 { font-size: clamp(2.2rem, 11vw, 3.35rem); }
  .page-hero-shell { padding: 24px; }
  .service-card, .content-card, .process-card, .blog-card, .quote-form { border-radius: 16px; }
  .district-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Compact fixed-location selectors in persistent conversion UI. */
@media (min-width: 1081px) {
  .conversion-bar { grid-template-columns: minmax(180px, .75fr) minmax(540px, 1.9fr) auto; }
  .conversion-mini-form > * { min-width: 0; }
}

.city-card { display: flex; flex-direction: column; gap: 14px; transition: transform .2s ease, box-shadow .2s ease; }
.city-card h2, .city-card p { margin: 0; }
.city-card p { color: var(--v2-muted); }
.city-card .btn { margin-top: auto; align-self: flex-start; }

/* ===== static/css/nakheel-najd-v3.css ===== */
/* Nakheel Najd V3 — restrained, content-first visual system. */
:root {
  --nn-page: #f5f6f3;
  --nn-surface: #ffffff;
  --nn-surface-soft: #eef2ed;
  --nn-ink: #14211b;
  --nn-muted: #66716b;
  --nn-green: #176a50;
  --nn-green-dark: #0f4d3b;
  --nn-gold: #b58a4b;
  --nn-line: rgba(20, 33, 27, .10);
  --nn-shadow-sm: 0 8px 24px rgba(17, 41, 31, .055);
  --nn-shadow: 0 20px 60px rgba(17, 41, 31, .09);
  --nn-radius-sm: 12px;
  --nn-radius: 20px;
  --nn-radius-lg: 30px;
  --nn-max: 1220px;
}

html { background: var(--nn-page); }
body {
  background: var(--nn-page);
  color: var(--nn-ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
body::before { display: none; }
.container { width: min(var(--nn-max), calc(100% - 36px)); }
.section { padding-block: clamp(58px, 7.5vw, 100px); }
.section-tight { padding-block: clamp(38px, 5vw, 66px); }
.section.muted, .nn-soft-section { background: var(--nn-surface-soft); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--nn-line);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.topbar { min-height: 72px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--nn-ink); flex: 0 0 auto; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  color: #fff; font-size: 1.25rem; font-weight: 900;
  background: linear-gradient(145deg, var(--nn-green), var(--nn-green-dark));
  box-shadow: 0 8px 20px rgba(23, 106, 80, .20);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: 1.02rem; letter-spacing: -.02em; }
.brand-copy small { color: var(--nn-muted); font-size: .72rem; margin-top: 4px; }
.header-panel { margin-inline-start: auto; display: flex; align-items: center; gap: 20px; min-width: 0; }
.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav a {
  color: #35433c; font-size: .9rem; font-weight: 700; padding: 9px 11px;
  border-radius: 10px; text-decoration: none; white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active { background: var(--nn-surface-soft); color: var(--nn-green-dark); }
.header-actions { display: flex; }
.btn-whatsapp, .conversion-whatsapp {
  background: #1f9d68 !important; color: #fff !important; border-color: #1f9d68 !important;
}
.btn-whatsapp { min-height: 42px; padding-inline: 14px; gap: 8px; }
.btn-whatsapp img, .conversion-whatsapp img { width: 19px; height: 19px; filter: brightness(0) invert(1); }
.menu-toggle { display: none; margin-inline-start: auto; }

/* Typography and headings */
.eyebrow, .nn-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--nn-green); font-size: .78rem; font-weight: 800;
  letter-spacing: .01em; margin-bottom: 12px;
}
.eyebrow::before, .nn-kicker::before { content: ""; width: 20px; height: 2px; border-radius: 9px; background: var(--nn-gold); }
.section-heading { max-width: 760px; margin-bottom: clamp(28px, 4vw, 46px); }
.section-heading h2 { font-size: clamp(1.75rem, 3vw, 3rem); margin: 0 0 13px; line-height: 1.18; }
.section-heading p { margin: 0; color: var(--nn-muted); max-width: 68ch; }
.split-heading { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.split-heading > p { max-width: 50ch; }

/* Hero */
.nn-hero { padding: clamp(42px, 6vw, 78px) 0 clamp(58px, 8vw, 106px); }
.nn-hero-shell {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
  gap: clamp(34px, 6vw, 78px); align-items: center;
}
.nn-hero-copy h1 {
  font-size: clamp(2.55rem, 5.8vw, 5.75rem); line-height: 1.03;
  letter-spacing: -.055em; margin: 0 0 22px; max-width: 11ch;
}
.nn-hero-copy > p { color: var(--nn-muted); font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 61ch; margin: 0 0 28px; }
.nn-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.nn-hero-points { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.nn-hero-points li { padding: 7px 11px; border-radius: 999px; background: var(--nn-surface); border: 1px solid var(--nn-line); font-size: .84rem; font-weight: 700; }
.nn-hero-media {
  position: relative; min-height: clamp(400px, 48vw, 620px); border-radius: var(--nn-radius-lg);
  overflow: hidden; background: #dce5de; box-shadow: var(--nn-shadow);
}
.nn-hero-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.nn-hero-media::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(5, 23, 16, .45)); }
.nn-hero-media-note {
  position: absolute; z-index: 2; inset-inline: 20px; bottom: 20px; color: #fff;
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
}
.nn-hero-media-note strong { display: block; font-size: 1.2rem; }
.nn-hero-media-note span { display: block; opacity: .8; font-size: .82rem; }

.nn-stat-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--nn-surface); border: 1px solid var(--nn-line); border-radius: var(--nn-radius);
  box-shadow: var(--nn-shadow-sm); overflow: hidden; margin-top: -32px; position: relative; z-index: 3;
}
.nn-stat { padding: 24px 26px; }
.nn-stat + .nn-stat { border-inline-start: 1px solid var(--nn-line); }
.nn-stat strong { display: block; font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: 1; color: var(--nn-green-dark); margin-bottom: 7px; }
.nn-stat span { color: var(--nn-muted); font-size: .88rem; }

/* Cards and grids */
.nn-grid { display: grid; gap: 20px; }
.nn-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nn-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nn-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nn-card {
  background: var(--nn-surface); border: 1px solid var(--nn-line); border-radius: var(--nn-radius);
  overflow: hidden; box-shadow: none; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.nn-card:hover { transform: translateY(-3px); box-shadow: var(--nn-shadow-sm); border-color: rgba(23, 106, 80, .22); }
.nn-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: #dfe6e0; }
.nn-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.nn-card:hover .nn-card-media img { transform: scale(1.025); }
.nn-card-body { padding: 22px; }
.nn-card-body h2, .nn-card-body h3 { margin: 0 0 10px; font-size: 1.18rem; line-height: 1.35; }
.nn-card-body p { color: var(--nn-muted); margin: 0 0 16px; }
.nn-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nn-card-link { color: var(--nn-green-dark); font-weight: 800; text-decoration: none; }
.nn-card-link::after { content: " ←"; }
.nn-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.nn-chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px;
  border-radius: 999px; background: var(--nn-surface-soft); border: 1px solid var(--nn-line);
  color: #526059; font-size: .75rem; font-weight: 750;
}
.nn-chip-green { background: rgba(23, 106, 80, .09); color: var(--nn-green-dark); border-color: rgba(23, 106, 80, .14); }

.nn-service-groups { display: grid; gap: 42px; }
.nn-service-group { scroll-margin-top: 100px; }
.nn-service-group-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.nn-service-group-head h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.nn-service-group-head span { color: var(--nn-muted); font-size: .85rem; }
.nn-service-card { display: flex; flex-direction: column; min-height: 100%; }
.nn-service-card .nn-card-body { display: flex; flex-direction: column; flex: 1; }
.nn-service-card .nn-card-actions { margin-top: auto; }

/* City and district navigation */
.nn-city-card { padding: 24px; display: flex; flex-direction: column; min-height: 210px; }
.nn-city-card h3 { font-size: 1.35rem; margin: 0 0 8px; }
.nn-city-card p { color: var(--nn-muted); margin: 0 0 20px; }
.nn-city-card .nn-card-link { margin-top: auto; }
.nn-district-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nn-district-link {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  min-height: 48px; padding: 10px 14px; background: var(--nn-surface); color: var(--nn-ink);
  border: 1px solid var(--nn-line); border-radius: 13px; text-decoration: none; font-weight: 750;
}
.nn-district-link:hover { border-color: rgba(23, 106, 80, .3); color: var(--nn-green-dark); }
.nn-district-link small { color: var(--nn-muted); font-weight: 600; }

/* Interior hero */
.nn-page-hero { padding: clamp(38px, 5vw, 70px) 0; }
.nn-page-hero-shell {
  background: var(--nn-surface); border: 1px solid var(--nn-line); border-radius: var(--nn-radius-lg);
  padding: clamp(28px, 5vw, 60px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: clamp(28px, 5vw, 60px); align-items: center; box-shadow: var(--nn-shadow-sm);
}
.nn-page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 4.25rem); line-height: 1.08; letter-spacing: -.045em; margin: 0 0 16px; }
.nn-page-hero p { color: var(--nn-muted); margin: 0; max-width: 64ch; }
.nn-page-hero-visual { aspect-ratio: 16 / 11; border-radius: var(--nn-radius); overflow: hidden; background: #dfe6e0; }
.nn-page-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.nn-breadcrumb { display: flex; flex-wrap: wrap; gap: 7px; color: var(--nn-muted); font-size: .82rem; margin-bottom: 14px; }
.nn-breadcrumb a { color: inherit; text-decoration: none; }
.nn-breadcrumb a:hover { color: var(--nn-green); }

/* Content panels */
.nn-panel { background: var(--nn-surface); border: 1px solid var(--nn-line); border-radius: var(--nn-radius); padding: clamp(22px, 3.5vw, 36px); }
.nn-panel h2 { margin-top: 0; }
.nn-rich-content { color: #34423b; }
.nn-rich-content h2, .nn-rich-content h3 { color: var(--nn-ink); margin-top: 1.7em; }
.nn-rich-content p { margin: 0 0 1em; }
.nn-rich-content ul { padding-inline-start: 1.3rem; }
.nn-rich-content a { color: var(--nn-green-dark); }
.nn-two-col { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 24px; align-items: start; }
.nn-sticky-panel { position: sticky; top: 96px; }

/* Projects */
.nn-project-card { position: relative; min-height: 360px; border-radius: var(--nn-radius); overflow: hidden; background: #dfe6e0; }
.nn-project-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nn-project-card::after { content: ""; position: absolute; inset: 28% 0 0; background: linear-gradient(transparent, rgba(7, 24, 17, .87)); }
.nn-project-copy { position: absolute; z-index: 2; inset-inline: 22px; bottom: 20px; color: #fff; }
.nn-project-copy h3 { margin: 8px 0; font-size: 1.3rem; }
.nn-project-copy p { opacity: .82; margin: 0; font-size: .9rem; }
.nn-project-copy .nn-chip { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.18); }

/* Blog */
.nn-blog-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 30px; align-items: start; }
.nn-blog-sidebar { position: sticky; top: 96px; display: grid; gap: 14px; }
.nn-search { background: var(--nn-surface); border: 1px solid var(--nn-line); border-radius: 16px; padding: 14px; }
.nn-search label { display: block; font-weight: 800; font-size: .85rem; margin-bottom: 8px; }
.nn-search-row { display: flex; gap: 7px; }
.nn-search input { min-width: 0; width: 100%; min-height: 44px; border: 1px solid var(--nn-line); border-radius: 10px; padding: 9px 11px; }
.nn-taxonomy { background: var(--nn-surface); border: 1px solid var(--nn-line); border-radius: 16px; padding: 16px; }
.nn-taxonomy h3 { font-size: .92rem; margin: 0 0 10px; }
.nn-taxonomy a { display: block; padding: 8px 9px; color: #4c5a53; border-radius: 8px; text-decoration: none; font-size: .87rem; }
.nn-taxonomy a:hover, .nn-taxonomy a.active { background: var(--nn-surface-soft); color: var(--nn-green-dark); }
.nn-blog-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.nn-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.nn-pagination a, .nn-pagination span { min-height: 42px; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--nn-line); background: var(--nn-surface); }

/* Persistent compact conversion bar */
.conversion-bar {
  position: fixed; z-index: 990; inset-inline: 20px; bottom: 16px;
  width: min(920px, calc(100% - 40px)); margin-inline: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 10px 12px; border: 1px solid rgba(20, 33, 27, .13); border-radius: 17px;
  background: rgba(255, 255, 255, .94); box-shadow: 0 16px 52px rgba(16, 44, 33, .16);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.conversion-copy { min-width: 128px; }
.conversion-copy strong { display: block; font-size: .82rem; line-height: 1.2; }
.conversion-copy span { display: block; font-size: .68rem; color: var(--nn-muted); margin-top: 3px; }
.conversion-mini-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 7px; align-items: center; }
.conversion-mini-form select {
  height: 39px; min-width: 0; border: 1px solid var(--nn-line); border-radius: 10px;
  background: #fff; color: var(--nn-ink); padding: 0 10px; font-size: .78rem;
}
.conversion-whatsapp {
  height: 39px; min-width: 86px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 10px; font-size: .78rem; font-weight: 800; cursor: pointer;
}
.conversion-mini-form .form-status { grid-column: 1 / -1; margin: 0; font-size: .72rem; }
.floating-actions { position: fixed; z-index: 985; inset-inline-end: 18px; bottom: 86px; }
.floating-whatsapp {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: #1f9d68; box-shadow: 0 12px 32px rgba(24, 103, 72, .28);
}
.floating-whatsapp img { width: 25px; height: 25px; filter: brightness(0) invert(1); }

/* Footer */
.site-footer { padding: 76px 0 104px; background: #11241c; color: rgba(255,255,255,.76); }
.site-footer h3 { color: #fff; font-size: .92rem; }
.site-footer a { color: rgba(255,255,255,.74); }
.site-footer a:hover { color: #fff; }
.footer-grid-clean { gap: clamp(28px, 5vw, 70px); }
.footer-brand-block { max-width: 390px; }
.footer-brand-link .brand-copy strong { color: #fff; }
.footer-brand-link .brand-copy small { color: rgba(255,255,255,.56); }
.footer-phone { color: rgba(255,255,255,.56); font-size: .85rem; }

/* Existing components normalized */
.btn { border-radius: 11px; min-height: 44px; font-weight: 800; }
.btn-primary { background: var(--nn-green); border-color: var(--nn-green); }
.btn-primary:hover { background: var(--nn-green-dark); border-color: var(--nn-green-dark); }
.btn-outline { background: var(--nn-surface); color: var(--nn-ink); border-color: var(--nn-line); }
.content-badge, .post-chip, .tag-row span { border-radius: 999px; }
.empty-state { background: var(--nn-surface); border: 1px dashed rgba(23,106,80,.28); border-radius: var(--nn-radius); padding: 32px; text-align: center; }

@media (max-width: 1080px) {
  .main-nav a { padding-inline: 8px; font-size: .84rem; }
  .nn-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nn-district-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .conversion-bar { width: min(760px, calc(100% - 28px)); }
  .conversion-copy { display: none; }
  .conversion-bar { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .container { width: min(var(--nn-max), calc(100% - 24px)); }
  .topbar { min-height: 64px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .brand-copy small { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-panel {
    display: none; position: absolute; top: calc(100% + 1px); inset-inline: 12px;
    background: rgba(255,255,255,.98); border: 1px solid var(--nn-line); border-radius: 16px;
    box-shadow: var(--nn-shadow); padding: 12px; align-items: stretch;
  }
  .site-header.menu-open .header-panel { display: grid; }
  .main-nav { display: grid; }
  .main-nav a { min-height: 42px; display: flex; align-items: center; padding-inline: 12px; }
  .header-actions .btn { width: 100%; }
  .nn-hero-shell, .nn-page-hero-shell, .nn-two-col { grid-template-columns: 1fr; }
  .nn-hero-copy h1 { max-width: 13ch; }
  .nn-hero-media { min-height: 420px; }
  .nn-page-hero-visual { order: -1; max-height: 360px; }
  .nn-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nn-district-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nn-blog-layout { grid-template-columns: 1fr; }
  .nn-blog-sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .nn-search { grid-column: 1 / -1; }
  .nn-sticky-panel { position: static; }
  .split-heading { display: block; }
  .split-heading > p { margin-top: 12px; }
}

@media (max-width: 640px) {
  body { padding-bottom: 78px; }
  .section { padding-block: 52px; }
  .nn-hero { padding-top: 32px; }
  .nn-hero-copy h1 { font-size: clamp(2.35rem, 13vw, 3.8rem); }
  .nn-hero-media { min-height: 340px; }
  .nn-hero-media-note { inset-inline: 15px; bottom: 15px; }
  .nn-stat-strip { grid-template-columns: 1fr; margin-top: -20px; }
  .nn-stat { padding: 17px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
  .nn-stat + .nn-stat { border-inline-start: 0; border-top: 1px solid var(--nn-line); }
  .nn-stat strong { font-size: 1.65rem; margin: 0; }
  .nn-grid-2, .nn-grid-3, .nn-grid-4, .nn-blog-list { grid-template-columns: 1fr; }
  .nn-district-grid { grid-template-columns: 1fr 1fr; }
  .nn-page-hero-shell { padding: 22px; border-radius: 22px; }
  .nn-page-hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .nn-blog-sidebar { grid-template-columns: 1fr; }
  .conversion-bar {
    inset-inline: 8px; bottom: 8px; width: auto; padding: 7px; border-radius: 14px;
  }
  .conversion-mini-form { grid-template-columns: 1fr 1fr auto; gap: 5px; }
  .conversion-mini-form select { height: 36px; font-size: .71rem; padding-inline: 7px; }
  .conversion-mini-form select[name="service"] { display: none; }
  .conversion-whatsapp { width: 40px; min-width: 40px; height: 36px; padding: 0; }
  .conversion-whatsapp span { display: none; }
  .conversion-whatsapp img { width: 20px; height: 20px; }
  .floating-actions { display: none; }
  .site-footer { padding-bottom: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.editorial-note {
  margin: 24px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(181, 138, 75, .10);
  border: 1px solid rgba(181, 138, 75, .24);
  color: #4f4638;
}
.editorial-note a { color: var(--nn-green-dark); font-weight: 800; }
.quote-form.nn-panel { display: grid; gap: 14px; }
.quote-form.nn-panel h2 { margin: 0; }
.quote-form.nn-panel label { display: grid; gap: 7px; color: var(--nn-ink); font-weight: 750; }
.quote-form.nn-panel input,
.quote-form.nn-panel select,
.quote-form.nn-panel textarea {
  width: 100%; min-height: 48px; border: 1px solid var(--nn-line); border-radius: 11px;
  padding: 10px 12px; background: #fff; color: var(--nn-ink);
}
.quote-form.nn-panel textarea { min-height: 120px; resize: vertical; }
.quote-form.nn-panel input:focus,
.quote-form.nn-panel select:focus,
.quote-form.nn-panel textarea:focus { outline: 0; border-color: var(--nn-green); box-shadow: 0 0 0 4px rgba(23,106,80,.10); }
.article-cover { overflow: hidden; border-radius: var(--nn-radius); margin: 28px 0; background: #dfe6e0; }
.article-cover img { width: 100%; max-height: 620px; object-fit: cover; }
.article-shell .nn-two-col { grid-template-columns: minmax(0, 1fr) 260px; }
.article-shell .article-main { min-width: 0; }
.article-shell a { text-underline-offset: 3px; }

/* Remaining utility, archive, legal, comparison and calculator pages */
.page-hero.compact,
.page-hero.compact-hero { padding: clamp(38px, 5vw, 70px) 0 0; }
.page-hero.compact > .container:not(.page-hero-shell),
.page-hero.compact-hero > .container,
.page-hero .page-hero-shell {
  background: var(--nn-surface);
  border: 1px solid var(--nn-line);
  border-radius: var(--nn-radius-lg);
  padding: clamp(28px, 5vw, 56px);
  box-shadow: var(--nn-shadow-sm);
}
.page-hero .page-hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  align-items: center;
  gap: clamp(28px, 5vw, 58px);
}
.page-hero h1 { margin: 0 0 14px; font-size: clamp(2.05rem, 4.4vw, 4.15rem); line-height: 1.08; letter-spacing: -.04em; }
.page-hero p { margin: 0; color: var(--nn-muted); max-width: 68ch; }
.page-hero-visual { aspect-ratio: 16 / 11; border-radius: var(--nn-radius); overflow: hidden; background: #dfe6e0; }
.page-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.content-card,
.calculator-card,
.calculator-result,
.cta-box,
.legal-content > article,
.archive-list > article {
  background: var(--nn-surface);
  border: 1px solid var(--nn-line);
  border-radius: var(--nn-radius);
  box-shadow: none;
}
.content-card,
.calculator-card,
.calculator-result,
.cta-box { padding: clamp(22px, 3.5vw, 36px); }
.content-card h1,
.content-card h2,
.content-card h3,
.calculator-result h2 { color: var(--nn-ink); }
.content-card p,
.content-card li,
.calculator-result p,
.calculator-result li { color: var(--nn-muted); }

.two-col,
.comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.two-col-top { align-items: start; }
.accent-card { border-color: rgba(23, 106, 80, .22); background: linear-gradient(180deg, rgba(23,106,80,.035), #fff 42%); }
.conversion-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; }

.quote-form,
.calculator-card { display: grid; gap: 15px; }
.quote-form label,
.calculator-card label { display: grid; gap: 7px; font-weight: 750; color: var(--nn-ink); }
.quote-form input,
.quote-form select,
.quote-form textarea,
.calculator-card input,
.calculator-card select,
.calculator-card textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--nn-line); border-radius: 11px;
  background: #fff; color: var(--nn-ink);
}
.quote-form textarea,
.calculator-card textarea { resize: vertical; }
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus,
.calculator-card input:focus,
.calculator-card select:focus,
.calculator-card textarea:focus {
  outline: 0; border-color: var(--nn-green); box-shadow: 0 0 0 4px rgba(23,106,80,.10);
}

.archive-toolbar { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.archive-section + .archive-section { margin-top: clamp(48px, 7vw, 82px); }
.archive-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: clamp(50px, 7vw, 80px); }
.archive-stats a {
  display: flex; flex-direction: column; gap: 8px; min-height: 116px; padding: 20px;
  background: var(--nn-surface); border: 1px solid var(--nn-line); border-radius: 16px;
  color: var(--nn-ink); text-decoration: none;
}
.archive-stats strong { font-size: clamp(1.65rem, 3vw, 2.4rem); color: var(--nn-green-dark); }
.archive-stats span { color: var(--nn-muted); font-size: .85rem; }
.archive-link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.archive-link-grid.dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.archive-link-grid > a {
  min-height: 72px; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 13px 15px; border: 1px solid var(--nn-line); border-radius: 13px;
  background: var(--nn-surface); color: var(--nn-ink); text-decoration: none;
}
.archive-link-grid > a:hover { border-color: rgba(23,106,80,.3); color: var(--nn-green-dark); }
.archive-link-grid span { color: var(--nn-muted); font-size: .72rem; }
.archive-link-grid strong { font-size: .9rem; line-height: 1.45; }
.archive-list { display: grid; gap: 12px; }
.archive-list > article { padding: 20px 22px; }
.archive-list > article > span { color: var(--nn-green); font-size: .75rem; font-weight: 800; }
.archive-list h2 { margin: 6px 0; font-size: 1.08rem; }
.archive-list h2 a { color: var(--nn-ink); text-decoration: none; }
.archive-list p { color: var(--nn-muted); margin: 5px 0 0; }

.narrow-container { width: min(820px, calc(100% - 36px)); }
.legal-content { display: grid; gap: 16px; }
.legal-content > article { padding: clamp(22px, 3.5vw, 34px); }
.legal-content h2 { margin-top: 0; }
.legal-content p,
.legal-note { color: var(--nn-muted); }

@media (max-width: 980px) {
  .archive-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .archive-link-grid.dense { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .page-hero .page-hero-shell,
  .two-col,
  .comparison-grid { grid-template-columns: 1fr; }
  .page-hero-visual { order: -1; max-height: 360px; }
  .conversion-cta { display: grid; }
  .archive-link-grid,
  .archive-link-grid.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .archive-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-link-grid,
  .archive-link-grid.dense { grid-template-columns: 1fr; }
  .page-hero.compact > .container:not(.page-hero-shell),
  .page-hero.compact-hero > .container,
  .page-hero .page-hero-shell { padding: 22px; border-radius: 22px; }
}

/* ===== static/css/nakheel-najd-v4.css ===== */
/* Nakheel Najd V4 — full-viewport hero, liquid-glass mobile dock, unified cards. */
:root {
  --nn4-bg: #f4f5f1;
  --nn4-surface: #ffffff;
  --nn4-surface-2: #edf1eb;
  --nn4-ink: #102019;
  --nn4-muted: #66736c;
  --nn4-green: #176a50;
  --nn4-green-deep: #0d4434;
  --nn4-gold: #c09a61;
  --nn4-border: rgba(16, 32, 25, .10);
  --nn4-border-soft: rgba(16, 32, 25, .07);
  --nn4-shadow-1: 0 12px 32px rgba(10, 35, 26, .07);
  --nn4-shadow-2: 0 24px 70px rgba(10, 35, 26, .12);
  --nn4-radius-card: 24px;
  --nn4-radius-media: 18px;
  --nn4-header-h: 76px;
}

html { background: var(--nn4-bg); scroll-padding-top: calc(var(--nn4-header-h) + 18px); }
body { background: var(--nn4-bg); color: var(--nn4-ink); letter-spacing: -.01em; overflow-x: clip; }
.container { width: min(1240px, calc(100% - 40px)); }
.section { padding-block: clamp(64px, 7vw, 108px); }
.nn-section-white { background: #fff; }
.nn-section-soft { background: var(--nn4-bg); }
.nn-section-dark { background: #102019; color: #fff; }
.nn-section-action { display: flex; justify-content: center; margin-top: 32px; }

/* Desktop header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .86);
  border-bottom: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 8px 30px rgba(10, 35, 26, .045);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.topbar { min-height: var(--nn4-header-h); }
.brand-mark { border-radius: 14px; box-shadow: 0 10px 24px rgba(23,106,80,.22); }
.main-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--nn4-border-soft);
  border-radius: 999px;
  background: rgba(244, 246, 242, .84);
}
.main-nav a {
  padding: 9px 13px;
  border-radius: 999px;
  color: #34443c;
  transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.main-nav a:hover { transform: translateY(-1px); }
.main-nav a.active,
.main-nav a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, var(--nn4-green-deep), var(--nn4-green));
  box-shadow: 0 8px 20px rgba(23,106,80,.18);
}
.header-actions .btn-whatsapp { min-height: 44px; border-radius: 999px; padding-inline: 16px; }
.mobile-bottom-nav { display: none; }

/* Full-viewport hero */
.nn-home-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: calc(100svh - var(--nn4-header-h));
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #0e251b;
}
.nn-home-hero-media,
.nn-home-hero-shade { position: absolute; inset: 0; }
.nn-home-hero-media { z-index: -3; }
.nn-home-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  transform: scale(1.015);
  animation: nn4HeroZoom 14s ease-out both;
}
.nn-home-hero-shade {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(5,18,12,.10) 0%, rgba(5,18,12,.26) 34%, rgba(5,18,12,.83) 100%),
    linear-gradient(90deg, rgba(5,18,12,.78) 0%, rgba(5,18,12,.32) 54%, rgba(5,18,12,.08) 100%);
}
.nn-home-hero-inner {
  width: min(1240px, calc(100% - 40px));
  min-height: calc(100svh - var(--nn4-header-h));
  padding-block: clamp(80px, 12vh, 150px) 110px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 42px;
}
.nn-home-hero-copy { max-width: 770px; color: #fff; }
.nn-home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: .82rem;
  font-weight: 800;
  color: rgba(255,255,255,.88);
}
.nn-home-kicker::before { content: ""; width: 32px; height: 2px; border-radius: 999px; background: var(--nn4-gold); }
.nn-home-hero-copy h1 {
  max-width: 12ch;
  margin: 0 0 20px;
  font-size: clamp(3rem, 7vw, 7.4rem);
  line-height: .98;
  letter-spacing: -.065em;
  text-wrap: balance;
  text-shadow: 0 10px 36px rgba(0,0,0,.22);
  animation: nn4Rise .75s ease both;
}
.nn-home-hero-copy p {
  max-width: 63ch;
  margin: 0 0 28px;
  color: rgba(255,255,255,.82);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.9;
  text-wrap: pretty;
  animation: nn4Rise .9s ease both;
}
.nn-home-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nn-home-hero-actions .btn { min-height: 50px; border-radius: 999px; padding-inline: 22px; }
.nn-hero-secondary {
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nn-hero-secondary:hover { color: #fff; background: rgba(255,255,255,.18); }
.nn-home-hero-facts {
  width: min(280px, 26vw);
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 24px 70px rgba(0,0,0,.16);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
}
.nn-home-hero-facts > div { padding: 18px 20px; background: rgba(4,20,13,.18); }
.nn-home-hero-facts strong { display: block; color: #fff; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1; margin-bottom: 6px; }
.nn-home-hero-facts span { color: rgba(255,255,255,.68); font-size: .76rem; }
.nn-home-ticker {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 22px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.nn-home-ticker-track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: nn4Ticker 34s linear infinite;
}
.nn-home-ticker span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border-radius: 999px;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  font-size: .76rem;
  font-weight: 750;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nn-home-ticker span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nn4-gold); }
.nn-home-hero-line { position: absolute; z-index: 4; inset-inline: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.10); overflow: hidden; }
.nn-home-hero-line span { display: block; width: 28%; height: 100%; background: linear-gradient(90deg, transparent, var(--nn4-gold), #fff, transparent); animation: nn4Line 3.2s ease-in-out infinite; }

/* Shared section headings */
.section-heading { margin-bottom: clamp(30px, 4vw, 50px); }
.section-heading h2 { max-width: 18ch; font-size: clamp(2rem, 3.5vw, 3.4rem); line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; }
.section-heading p { line-height: 1.9; text-wrap: pretty; }
.nn-heading-light h2 { color: #fff; }
.nn-heading-light p { color: rgba(255,255,255,.62); }
.nn-heading-light .eyebrow { color: #d9ba89; }

/* Unified card language */
.nn-grid { gap: 22px; }
.nn-card,
.nn-project-card,
.nn-panel,
.nn-taxonomy,
.nn-search {
  border: 1px solid var(--nn4-border-soft);
  border-radius: var(--nn4-radius-card);
  background: var(--nn4-surface);
  box-shadow: 0 1px 0 rgba(255,255,255,.9), var(--nn4-shadow-1);
}
.nn-card {
  overflow: hidden;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.nn-card:hover { transform: translateY(-5px); border-color: rgba(23,106,80,.18); box-shadow: var(--nn4-shadow-2); }
.nn-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #dce4dd; }
.nn-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(7,25,16,.12)); pointer-events: none; }
.nn-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .48s cubic-bezier(.2,.7,.2,1); }
.nn-card:hover .nn-card-media img { transform: scale(1.045); }
.nn-card-body { display: flex; flex-direction: column; min-height: 235px; padding: 24px; }
.nn-card-body h2,
.nn-card-body h3 { margin: 0 0 11px; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.45; letter-spacing: -.025em; }
.nn-card-body h2 a,
.nn-card-body h3 a { color: inherit; text-decoration: none; }
.nn-card-body p {
  margin: 0 0 18px;
  color: var(--nn4-muted);
  line-height: 1.85;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.nn-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--nn4-border-soft);
  color: var(--nn4-muted);
  font-size: .78rem;
}
.nn-card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--nn4-green-deep); font-weight: 850; text-decoration: none; }
.nn-card-link::after { content: "←"; transition: transform .2s ease; }
.nn-card-link:hover::after { transform: translateX(-3px); }
.nn-media-badge { position: absolute; z-index: 2; inset-inline-start: 14px; bottom: 14px; padding: 6px 10px; border-radius: 999px; color: #fff; background: rgba(10,39,27,.68); border: 1px solid rgba(255,255,255,.18); font-size: .72rem; font-weight: 800; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nn-chip { border-radius: 999px; }

/* Service cards */
.nn-service-card-v4 .nn-card-body { min-height: 222px; }
.nn-service-card-v4 .nn-card-media { aspect-ratio: 4 / 3; }
.nn-service-card-v4 h3 { font-size: 1.17rem; }
.nn-service-card:not(.nn-service-card-v4) .nn-card-body { min-height: 245px; }

/* Article cards */
.nn-article-card .nn-card-media { aspect-ratio: 16 / 9; }
.nn-article-card .nn-card-body { min-height: 270px; }
.nn-article-card h2,
.nn-article-card h3 { font-size: clamp(1.16rem, 1.8vw, 1.42rem); }
.nn-blog-list .nn-card { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); }
.nn-blog-list .nn-card-media { height: 100%; aspect-ratio: auto; min-height: 270px; }
.nn-blog-list .nn-card-body { min-height: 270px; }

/* City cards */
.nn-city-card-v4 { position: relative; padding: 24px; min-height: 260px; display: flex; flex-direction: column; overflow: hidden; }
.nn-city-card-v4::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; inset-inline-end: -70px; bottom: -70px; background: radial-gradient(circle, rgba(23,106,80,.10), transparent 68%); }
.nn-city-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 30px; }
.nn-city-index { color: rgba(16,32,25,.20); font-size: 2.2rem; font-weight: 900; line-height: 1; letter-spacing: -.08em; }
.nn-city-card-v4 h3 { font-size: 1.55rem; margin: 0 0 10px; }
.nn-city-card-v4 p { color: var(--nn4-muted); margin: 0 0 22px; line-height: 1.85; }
.nn-city-card-v4 .nn-card-link { margin-top: auto; position: relative; z-index: 1; }

/* Project cards */
.nn-project-card-v4 { position: relative; min-height: clamp(360px, 38vw, 520px); overflow: hidden; border: 0; background: #102019; box-shadow: var(--nn4-shadow-1); }
.nn-project-card-v4 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.nn-project-card-v4:hover > img { transform: scale(1.045); }
.nn-project-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,18,12,.04) 28%, rgba(5,18,12,.86) 100%); }
.nn-project-card-v4 .nn-project-copy { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; padding: 24px; color: #fff; background: transparent; }
.nn-project-card-v4 .nn-project-copy h3 { color: #fff; font-size: 1.35rem; margin: 0 0 8px; }
.nn-project-card-v4 .nn-project-copy p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nn-project-card-v4 .nn-chip { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Gallery */
.nn-gallery-v4 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 14px; }
.nn-gallery-item { position: relative; grid-column: span 3; grid-row: span 2; margin: 0; overflow: hidden; border-radius: 22px; background: #1b3328; }
.nn-gallery-item:nth-child(1),
.nn-gallery-item:nth-child(6) { grid-column: span 6; grid-row: span 3; }
.nn-gallery-item:nth-child(4),
.nn-gallery-item:nth-child(7) { grid-column: span 3; grid-row: span 3; }
.nn-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nn-gallery-item:hover img { transform: scale(1.04); }
.nn-gallery-item::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(5,18,12,.72)); }
.nn-gallery-item figcaption { position: absolute; z-index: 2; inset-inline: 16px; bottom: 14px; color: #fff; font-size: .86rem; font-weight: 800; }

/* Inner pages and forms */
.nn-page-hero { padding-top: clamp(38px, 5vw, 70px); }
.nn-page-hero-shell { border-radius: 32px; box-shadow: var(--nn4-shadow-1); }
.nn-page-hero-visual { border-radius: 24px; }
.nn-panel { box-shadow: var(--nn4-shadow-1); }
.nn-search input,
.nn-search select,
.quote-form input,
.quote-form select,
.quote-form textarea { border-radius: 13px; }
.nn-pagination a,
.nn-pagination span { border-radius: 999px; }

/* Persistent quick quote */
.conversion-bar {
  width: min(1050px, calc(100% - 32px));
  bottom: 16px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: 0 20px 55px rgba(10,35,26,.14);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
}
.conversion-copy strong { font-size: .78rem; }
.conversion-copy span { font-size: .67rem; }
.conversion-mini-form select,
.conversion-whatsapp { height: 40px; border-radius: 12px; }

/* Navigation transition */
.navigation-progress { height: 3px; }
.navigation-progress span { background: linear-gradient(90deg, var(--nn4-green), var(--nn4-gold)); }
html.site-is-navigating #swup { opacity: .38; transform: translateY(5px); pointer-events: none; }
#swup { transition: opacity .18s ease, transform .18s ease; }
html.site-nav-error .navigation-progress span { background: #b42318; }

@keyframes nn4HeroZoom { from { transform: scale(1.06); } to { transform: scale(1.015); } }
@keyframes nn4Rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nn4Ticker { from { transform: translateX(0); } to { transform: translateX(50%); } }
@keyframes nn4Line { from { transform: translateX(-120%); } to { transform: translateX(460%); } }

@media (max-width: 1080px) {
  .nn-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .nn-home-hero-facts { width: 250px; }
  .nn-gallery-item { grid-column: span 4; }
  .nn-gallery-item:nth-child(1), .nn-gallery-item:nth-child(6) { grid-column: span 8; }
}

@media (max-width: 820px) {
  :root { --nn4-header-h: 64px; }
  .container { width: min(100% - 24px, 1240px); }
  body { padding-bottom: calc(106px + env(safe-area-inset-bottom)); }

  /* Top brand floats over the hero; navigation lives in the bottom dock. */
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    height: 64px;
    background: linear-gradient(180deg, rgba(5,18,12,.42), transparent);
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }
  .site-header .topbar { min-height: 64px; justify-content: center; }
  .site-header .brand { pointer-events: auto; color: #fff; padding: 7px 12px; border-radius: 999px; background: rgba(12,31,23,.28); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .site-header .brand-mark { width: 35px; height: 35px; border-radius: 11px; font-size: 1rem; }
  .site-header .brand-copy strong { color: #fff; font-size: .9rem; }
  .site-header .brand-copy small { display: none; }
  .header-panel, .menu-toggle { display: none !important; }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 1120;
    inset-inline: 16px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    align-items: stretch;
    min-height: 68px;
    padding: 8px;
    border-radius: 36px;
    background: linear-gradient(180deg, rgba(30,33,31,.60), rgba(18,21,19,.68));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 24px 55px rgba(5,18,12,.26), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
  }
  .mobile-bottom-nav::before { content: ""; position: absolute; inset: 3px 12% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent); }
  .mobile-bottom-nav a {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 52px;
    display: grid;
    place-items: center;
    padding: 8px 5px;
    border-radius: 28px;
    color: rgba(255,255,255,.74);
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
    transition: color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
  }
  .mobile-bottom-nav a.active,
  .mobile-bottom-nav a[aria-current="page"] {
    color: #101511;
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 #fff;
    transform: translateY(-1px);
  }

  .conversion-bar { display: none; }
  .floating-actions { bottom: calc(112px + env(safe-area-inset-bottom)); }

  .nn-home-hero { min-height: 100svh; }
  .nn-home-hero-inner {
    width: min(100% - 28px, 1240px);
    min-height: 100svh;
    padding: 118px 0 118px;
    align-items: end;
  }
  .nn-home-hero-media img { object-position: center center; }
  .nn-home-hero-shade {
    background: linear-gradient(180deg, rgba(5,18,12,.08) 0%, rgba(5,18,12,.18) 32%, rgba(5,18,12,.90) 100%);
  }
  .nn-home-hero-copy { max-width: 100%; }
  .nn-home-kicker { margin-bottom: 13px; }
  .nn-home-hero-copy h1 { max-width: 10ch; font-size: clamp(2.7rem, 13vw, 4.4rem); line-height: 1.02; margin-bottom: 16px; }
  .nn-home-hero-copy p { max-width: 34ch; font-size: .98rem; line-height: 1.8; margin-bottom: 22px; }
  .nn-home-hero-actions { gap: 8px; }
  .nn-home-hero-actions .btn { min-height: 47px; padding-inline: 17px; font-size: .84rem; }
  .nn-home-hero-facts { display: none; }
  .nn-home-ticker { bottom: 24px; }
  .nn-home-ticker span { font-size: .7rem; padding: 7px 11px; }

  .section { padding-block: 58px; }
  .split-heading { flex-direction: column; align-items: flex-start; gap: 10px; }
  .section-heading h2 { max-width: 14ch; font-size: clamp(2rem, 9vw, 2.8rem); }
  .split-heading > p { max-width: 40ch; }
  .nn-grid-4, .nn-grid-3, .nn-grid-2 { grid-template-columns: 1fr; }
  .nn-grid { gap: 16px; }

  .nn-project-card-v4 { min-height: 420px; border-radius: 24px; }
  .nn-project-card-v4 .nn-project-copy { padding: 20px; }
  .nn-card { border-radius: 22px; }
  .nn-card-body { min-height: auto; padding: 20px; }
  .nn-service-card-v4 .nn-card-media { aspect-ratio: 16 / 10; }
  .nn-service-card-v4 .nn-card-body, .nn-article-card .nn-card-body { min-height: 235px; }
  .nn-city-card-v4 { min-height: 230px; padding: 20px; }

  .nn-blog-layout { grid-template-columns: 1fr; }
  .nn-blog-sidebar { position: static; }
  .nn-blog-list .nn-card { grid-template-columns: 1fr; }
  .nn-blog-list .nn-card-media { min-height: 0; aspect-ratio: 16 / 9; }
  .nn-blog-list .nn-card-body { min-height: 240px; }

  .nn-gallery-v4 { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 150px; gap: 10px; }
  .nn-gallery-item,
  .nn-gallery-item:nth-child(1),
  .nn-gallery-item:nth-child(4),
  .nn-gallery-item:nth-child(6),
  .nn-gallery-item:nth-child(7) { grid-column: span 1; grid-row: span 1; border-radius: 17px; }
  .nn-gallery-item:nth-child(1), .nn-gallery-item:nth-child(6) { grid-column: span 2; grid-row: span 2; }
  .nn-gallery-item figcaption { inset-inline: 12px; bottom: 10px; font-size: .74rem; }

  .nn-page-hero { padding-top: 86px; }
  .nn-page-hero-shell { grid-template-columns: 1fr; padding: 22px; border-radius: 24px; }
  .nn-page-hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
}

@media (max-width: 430px) {
  .mobile-bottom-nav { inset-inline: 12px; bottom: calc(20px + env(safe-area-inset-bottom)); min-height: 70px; padding: 8px; }
  .mobile-bottom-nav a { font-size: .78rem; }
  .nn-home-hero-inner { width: min(100% - 22px, 1240px); }
  .nn-home-hero-actions .btn { flex: 1 1 auto; }
  .nn-gallery-v4 { grid-auto-rows: 136px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-home-hero-media img,
  .nn-home-ticker-track,
  .nn-home-hero-line span,
  .nn-home-hero-copy h1,
  .nn-home-hero-copy p { animation: none !important; }
}

/* Consistent cards on inner listing pages */
.nn-service-card .nn-card-body { min-height: 245px; }
.nn-service-card .nn-card-actions { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--nn4-border-soft); }
.nn-service-card .nn-meta:last-of-type { margin-top: auto; }
.nn-city-card:not(.nn-city-card-v4) {
  position: relative;
  min-height: 245px;
  display: flex;
  flex-direction: column;
  padding: 23px;
  overflow: hidden;
}
.nn-city-card:not(.nn-city-card-v4)::before {
  content: "";
  position: absolute;
  inset: auto -55px -65px auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23,106,80,.11), transparent 68%);
}
.nn-city-card:not(.nn-city-card-v4) h3 { margin: 10px 0 9px; font-size: 1.45rem; }
.nn-city-card:not(.nn-city-card-v4) p { color: var(--nn4-muted); line-height: 1.85; margin: 0 0 20px; }
.nn-city-card:not(.nn-city-card-v4) .nn-card-link { margin-top: auto; position: relative; z-index: 1; }

.nn-project-card {
  position: relative;
  min-height: clamp(350px, 36vw, 500px);
  overflow: hidden;
  border: 0;
  border-radius: var(--nn4-radius-card);
  background: #102019;
  box-shadow: var(--nn4-shadow-1);
  transition: transform .28s ease, box-shadow .28s ease;
}
.nn-project-card:hover { transform: translateY(-5px); box-shadow: var(--nn4-shadow-2); }
.nn-project-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.nn-project-card:hover > img { transform: scale(1.045); }
.nn-project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,18,12,.03) 25%, rgba(5,18,12,.88) 100%); }
.nn-project-card .nn-project-copy { position: absolute; z-index: 2; inset: auto 0 0; padding: 24px; color: #fff; background: transparent; }
.nn-project-card .nn-project-copy h3 { color: #fff; font-size: 1.34rem; margin: 0 0 8px; }
.nn-project-card .nn-project-copy p { color: rgba(255,255,255,.72); margin: 0; line-height: 1.75; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.nn-project-card .nn-chip { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.17); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.nn-article-card { position: relative; }
.nn-article-card .nn-meta { min-height: 28px; }
.nn-article-card .nn-card-link { margin-top: auto; }
.nn-article-card .nn-card-body > .nn-card-link { padding-top: 14px; border-top: 1px solid var(--nn4-border-soft); width: 100%; }

@media (max-width: 820px) {
  .nn-service-card .nn-card-body { min-height: 230px; }
  .nn-city-card:not(.nn-city-card-v4) { min-height: 220px; padding: 20px; }
  .nn-project-card { min-height: 410px; }
  .nn-project-card .nn-project-copy { padding: 20px; }
}

/* Footer polish */
.site-footer {
  background: linear-gradient(180deg, #102019 0%, #0a1511 100%);
  color: rgba(255,255,255,.76);
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-grid-clean { display: grid; grid-template-columns: 1.35fr .9fr .9fr .9fr; gap: 34px; }
.site-footer h3 { color: #fff; margin: 0 0 16px; font-size: .95rem; }
.site-footer p { color: rgba(255,255,255,.58); max-width: 38ch; }
.site-footer a { color: rgba(255,255,255,.68); text-decoration: none; transition: color .2s ease; }
.site-footer a:hover { color: #fff; }
.footer-brand-link .brand-copy strong { color: #fff; }
.footer-brand-link .brand-copy small { color: rgba(255,255,255,.48); }
.footer-bottom { margin-top: 38px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .8rem; }
@media (max-width: 980px) { .footer-grid-clean { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .footer-grid-clean { grid-template-columns: 1fr; } .site-footer { padding-bottom: calc(116px + env(safe-area-inset-bottom)); } }

/* ===== static/css/nakheel-najd-v4-1.css ===== */
/* Nakheel Najd V4.1 — owner media, Thmanyah typography, continuous brand rail. */
:root {
  --nn41-paper: #f4f0e8;
  --nn41-paper-2: #ebe7de;
  --nn41-ink: #111512;
  --nn41-green: #155c47;
  --nn41-green-deep: #0b382b;
  --nn41-gold: #b68a50;
  --nn41-line: rgba(16, 26, 20, .10);
  --nn41-line-light: rgba(255, 255, 255, .18);
  --nn41-shadow-card: 0 16px 42px rgba(13, 37, 28, .08);
  --nn41-shadow-hover: 0 26px 72px rgba(13, 37, 28, .14);
  --nn41-ease: cubic-bezier(.22, .72, .22, 1);
}

html { background: var(--nn41-paper); }
body { background: var(--nn41-paper); color: var(--nn41-ink); }
body.page-home { padding-top: 0; }
body.page-home .site-header {
  position: fixed;
  inset: 0 0 auto;
  background: linear-gradient(180deg, rgba(4, 18, 12, .52), rgba(4, 18, 12, 0));
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-home .site-header .brand-copy strong,
body.page-home .site-header .brand-copy small { color: #fff; }
body.page-home .main-nav {
  background: rgba(10, 21, 16, .28);
  border-color: rgba(255,255,255,.13);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
body.page-home .main-nav a { color: rgba(255,255,255,.80); }
body.page-home .main-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
body.page-home .main-nav a.active,
body.page-home .main-nav a[aria-current="page"] { color: #111; background: rgba(255,255,255,.94); }

/* Full-viewport hero: the picture is the complete visual surface. */
.nn-home-hero {
  min-height: 100svh;
  height: 100svh;
  width: 100%;
  align-items: end;
  background: #0b2218;
}
.nn-home-hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.nn-home-hero-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.02);
  animation: nn41HeroDrift 16s var(--nn41-ease) both;
}
.nn-home-hero-shade {
  background:
    linear-gradient(180deg, rgba(3, 14, 9, .12) 0%, rgba(3, 14, 9, .18) 30%, rgba(3, 14, 9, .82) 100%),
    linear-gradient(90deg, rgba(3, 14, 9, .68) 0%, rgba(3, 14, 9, .18) 60%, rgba(3, 14, 9, .04) 100%);
}
.nn-home-hero-inner {
  min-height: 100svh;
  padding-block: clamp(118px, 16vh, 190px) clamp(54px, 8vh, 90px);
}
.nn-home-hero-copy { max-width: 840px; }
.nn-home-kicker {
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nn-home-kicker::before { width: 7px; height: 7px; border-radius: 50%; }
.nn-home-hero-copy h1 {
  max-width: 11.5ch;
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 7.8vw, 8.6rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.045em;
  text-shadow: 0 20px 52px rgba(0,0,0,.25);
}
.nn-home-hero-copy p {
  max-width: 58ch;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.95;
}
.nn-home-hero-actions .btn {
  min-height: 52px;
  padding-inline: 23px;
  border-radius: 999px;
  font-weight: 800;
}
.nn-home-hero-facts {
  border-radius: 24px;
  background: rgba(8, 24, 17, .28);
  border-color: rgba(255,255,255,.13);
  box-shadow: 0 24px 60px rgba(0,0,0,.14);
}
.nn-home-ticker,
.nn-home-hero-line { display: none !important; }

/* The second section is a true seamless rail, independent from the hero. */
.nn-brand-marquee {
  position: relative;
  z-index: 5;
  width: 100%;
  overflow: hidden;
  padding: clamp(24px, 4.2vw, 54px) 0 clamp(28px, 4.7vw, 60px);
  background: var(--nn41-paper);
  color: #111;
  border-block: 1px solid rgba(16, 26, 20, .08);
  direction: ltr;
}
.nn-brand-marquee::before,
.nn-brand-marquee::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: 0;
  width: clamp(28px, 8vw, 130px);
  pointer-events: none;
}
.nn-brand-marquee::before { left: 0; background: linear-gradient(90deg, var(--nn41-paper), transparent); }
.nn-brand-marquee::after { right: 0; background: linear-gradient(-90deg, var(--nn41-paper), transparent); }
.nn-brand-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: nn41Marquee 28s linear infinite;
}
.nn-brand-marquee-group {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 54px);
  padding-inline: clamp(18px, 2.5vw, 42px);
  direction: rtl;
  white-space: nowrap;
}
.nn-brand-marquee span {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8.6vw, 9.4rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.045em;
}
.nn-brand-marquee b {
  color: rgba(17, 17, 17, .30);
  font-family: var(--font-ui);
  font-size: clamp(2.2rem, 5vw, 6rem);
  font-weight: 400;
}
.nn-brand-marquee:hover .nn-brand-marquee-track { animation-play-state: paused; }

/* Shared section rhythm. */
.section { position: relative; }
.section-heading { margin-bottom: clamp(28px, 4vw, 48px); }
.section-heading .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--nn41-green);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .01em;
}
.section-heading .eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: var(--nn41-gold);
}
.section-heading h2,
.nn-page-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.035em;
}
.split-heading > p { max-width: 54ch; line-height: 1.9; }

/* Unified media card system. */
.nn-card,
.nn-project-card,
.nn-city-card,
.nn-panel {
  border: 1px solid var(--nn41-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.8), var(--nn41-shadow-card);
}
.nn-card {
  overflow: hidden;
  border-radius: 26px;
  background: rgba(255,255,255,.98);
  transition: transform .35s var(--nn41-ease), box-shadow .35s var(--nn41-ease), border-color .35s ease;
}
.nn-card:hover {
  transform: translateY(-6px);
  border-color: rgba(21,92,71,.18);
  box-shadow: var(--nn41-shadow-hover);
}
.nn-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #dfe4dd;
}
.nn-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(4,18,12,.28));
  pointer-events: none;
}
.nn-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--nn41-ease), filter .35s ease;
}
.nn-card:hover .nn-card-media img { transform: scale(1.045); }
.nn-media-badge {
  z-index: 2;
  inset: 14px 14px auto auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 28, 20, .58);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nn-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
}
.nn-card-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 1.6vw, 1.55rem);
  line-height: 1.35;
  letter-spacing: -.02em;
}
.nn-card-body h3 a { color: var(--nn41-ink); text-decoration: none; }
.nn-card-body p {
  margin: 0;
  color: #68726c;
  line-height: 1.85;
}
.nn-card-footer {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(16,26,20,.08);
}
.nn-card-footer > span { color: #7a847e; font-size: .76rem; }
.nn-card-link {
  color: var(--nn41-green);
  font-weight: 900;
  text-decoration: none;
}
.nn-card-link::after { transition: transform .2s ease; }
.nn-card-link:hover::after { transform: translateX(-4px); }

/* Services. */
.nn-service-grid { align-items: stretch; }
.nn-service-card-v4,
.nn-service-card { height: 100%; }
.nn-service-card .nn-card-media { aspect-ratio: 4 / 3; }
.nn-service-card .nn-card-body { min-height: 252px; }
.nn-service-group + .nn-service-group { margin-top: clamp(52px, 7vw, 86px); }
.nn-service-group-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nn41-line);
  margin-bottom: 24px;
}
.nn-service-group-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 900;
}

/* Articles. */
.nn-article-card { height: 100%; }
.nn-article-card .nn-card-media { aspect-ratio: 16 / 10; }
.nn-article-card .nn-card-body { min-height: 270px; }
.nn-article-card .nn-meta { min-height: 30px; }
.nn-article-card:nth-child(3n + 2) .nn-card-media img { object-position: center 40%; }
.nn-blog-list .nn-card {
  grid-template-columns: minmax(240px, .82fr) minmax(0, 1.18fr);
  min-height: 280px;
}
.nn-blog-list .nn-card-media { min-height: 280px; }
.nn-blog-list .nn-card-body { min-height: 280px; padding: 26px; }
.nn-blog-sidebar { top: 104px; }
.nn-search,
.nn-taxonomy {
  border: 1px solid var(--nn41-line);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--nn41-shadow-card);
}
.nn-taxonomy a {
  border-radius: 11px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nn-taxonomy a:hover { transform: translateX(-2px); }

/* Projects. */
.nn-project-card {
  min-height: clamp(390px, 36vw, 520px);
  border-radius: 28px;
  background: #102019;
  isolation: isolate;
}
.nn-project-card::after {
  background: linear-gradient(180deg, rgba(4,18,12,.02) 22%, rgba(4,18,12,.30) 55%, rgba(4,18,12,.94) 100%);
}
.nn-project-card .nn-project-copy { padding: 26px; }
.nn-project-card .nn-project-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 900;
  letter-spacing: -.02em;
}
.nn-project-card .nn-project-copy p { max-width: 48ch; }
.nn-project-card:hover { transform: translateY(-7px); }

/* City cards. */
.nn-city-card-v4,
.nn-city-card:not(.nn-city-card-v4) {
  min-height: 260px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 15% 10%, rgba(182,138,80,.09), transparent 34%),
    linear-gradient(180deg, #fff, #fbfcfa);
}
.nn-city-card-v4::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  inset: auto -36px -42px auto;
  border-radius: 50%;
  border: 22px solid rgba(21,92,71,.055);
}
.nn-city-index {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: rgba(21,92,71,.25);
}
.nn-city-card-v4 h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.7vw, 2.45rem);
  font-weight: 900;
}

/* Inner page heroes. */
.nn-page-hero { padding-top: clamp(34px, 5vw, 74px); }
.nn-page-hero-shell {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  border-radius: 32px;
  background:
    radial-gradient(circle at 0 0, rgba(21,92,71,.08), transparent 30%),
    #fff;
  box-shadow: var(--nn41-shadow-card);
}
.nn-page-hero-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.nn-page-hero h1 { max-width: 13ch; }
.nn-page-hero p { max-width: 62ch; line-height: 1.95; }
.nn-page-hero-visual {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(13,37,28,.12);
}
.nn-page-hero-visual img { transition: transform .8s var(--nn41-ease); }
.nn-page-hero-shell:hover .nn-page-hero-visual img { transform: scale(1.025); }

/* Panels, forms and detail pages. */
.nn-panel {
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--nn41-shadow-card);
}
.nn-panel::before { height: 3px; }
.nn-sticky-panel { top: 104px; }
.quote-form input,
.quote-form select,
.quote-form textarea,
.calculator-card input,
.calculator-card select,
.calculator-card textarea {
  border-radius: 14px;
  border-color: rgba(16,26,20,.12);
  background: #fff;
}
.article-cover { border-radius: 26px; box-shadow: var(--nn41-shadow-card); }
.article-content {
  font-size: 1.08rem;
  line-height: 2.05;
}
.article-content h2,
.article-content h3 { font-family: var(--font-display); font-weight: 900; }

/* Gallery. */
.nn-gallery-v4 { gap: 14px; }
.nn-gallery-item {
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 54px rgba(0,0,0,.17);
}
.nn-gallery-item::after { height: 60%; }
.nn-gallery-item figcaption {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 800;
}

/* Better interaction and page transitions. */
.navigation-progress { height: 3px; }
.navigation-progress span { background: linear-gradient(90deg, var(--nn41-green), var(--nn41-gold)); }
#swup[aria-busy="true"] { pointer-events: none; }
html.site-is-navigating #swup { opacity: .74; }
#swup { transition: opacity .16s ease; }
::view-transition-old(root) { animation: nn41Out .16s ease both; }
::view-transition-new(root) { animation: nn41In .22s ease both; }

/* Mobile: thicker dock, raised slightly, full-height hero. */
@media (max-width: 820px) {
  body { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  body.page-home .site-header,
  .site-header {
    height: 70px;
  }
  .site-header .topbar { min-height: 70px; }
  .site-header .brand {
    padding: 8px 13px;
    background: rgba(10, 28, 20, .36);
    border-color: rgba(255,255,255,.17);
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
  }
  .mobile-bottom-nav {
    inset-inline: 14px;
    bottom: calc(30px + env(safe-area-inset-bottom));
    min-height: 78px;
    padding: 9px;
    border-radius: 42px;
    background:
      linear-gradient(180deg, rgba(33,36,34,.68), rgba(16,20,18,.78));
    border: 1px solid rgba(255,255,255,.20);
    box-shadow:
      0 28px 62px rgba(4, 18, 12, .30),
      inset 0 1px 0 rgba(255,255,255,.13),
      inset 0 -1px 0 rgba(0,0,0,.10);
    backdrop-filter: blur(24px) saturate(165%);
    -webkit-backdrop-filter: blur(24px) saturate(165%);
  }
  .mobile-bottom-nav::before {
    inset: 4px 16% auto;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  }
  .mobile-bottom-nav a {
    min-height: 58px;
    border-radius: 32px;
    font-size: .82rem;
  }
  .mobile-bottom-nav a.active,
  .mobile-bottom-nav a[aria-current="page"] {
    transform: translateY(-2px);
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 26px rgba(0,0,0,.18), inset 0 1px 0 #fff;
  }
  .floating-actions { bottom: calc(132px + env(safe-area-inset-bottom)); }
  .conversion-bar { display: none !important; }

  .nn-home-hero,
  .nn-home-hero-inner { min-height: 100svh; height: 100svh; }
  .nn-home-hero-inner {
    width: min(100% - 28px, 1240px);
    padding: 108px 0 116px;
  }
  .nn-home-hero-media img { object-position: center 42%; transform: none; }
  .nn-home-hero-shade {
    background: linear-gradient(180deg, rgba(3,14,9,.04) 0%, rgba(3,14,9,.15) 32%, rgba(3,14,9,.91) 100%);
  }
  .nn-home-hero-copy h1 {
    max-width: 9.5ch;
    font-size: clamp(3rem, 14vw, 4.8rem);
    line-height: .98;
  }
  .nn-home-hero-copy p { max-width: 35ch; font-size: .96rem; line-height: 1.85; }
  .nn-home-hero-actions .btn { min-height: 48px; padding-inline: 17px; font-size: .82rem; }
  .nn-home-kicker { margin-bottom: 15px; }

  .nn-brand-marquee { padding-block: 27px 31px; }
  .nn-brand-marquee-group { gap: 20px; padding-inline: 18px; }
  .nn-brand-marquee span { font-size: clamp(3.2rem, 20vw, 5.4rem); }
  .nn-brand-marquee b { font-size: clamp(2rem, 12vw, 3.4rem); }

  .section { padding-block: 62px; }
  .section-heading h2 { max-width: 13ch; line-height: 1.1; }
  .nn-grid { gap: 18px; }
  .nn-card { border-radius: 24px; }
  .nn-card-body { padding: 20px; }
  .nn-service-card .nn-card-media,
  .nn-article-card .nn-card-media { aspect-ratio: 16 / 10; }
  .nn-service-card .nn-card-body,
  .nn-article-card .nn-card-body { min-height: 230px; }
  .nn-project-card { min-height: 430px; border-radius: 24px; }
  .nn-project-card .nn-project-copy { padding: 21px; }
  .nn-city-card-v4,
  .nn-city-card:not(.nn-city-card-v4) { min-height: 230px; }
  .nn-blog-list .nn-card { grid-template-columns: 1fr; }
  .nn-blog-list .nn-card-media { min-height: 0; aspect-ratio: 16 / 10; }
  .nn-blog-list .nn-card-body { min-height: 235px; }
  .nn-page-hero { padding-top: 88px; }
  .nn-page-hero-shell { padding: 22px; border-radius: 26px; }
  .nn-page-hero-visual { order: -1; aspect-ratio: 16 / 10; border-radius: 19px; }
  .nn-page-hero h1 { max-width: 12ch; }
  .nn-panel { border-radius: 22px; }
  .nn-gallery-v4 { gap: 10px; }
}

@media (max-width: 430px) {
  .mobile-bottom-nav {
    inset-inline: 10px;
    bottom: calc(26px + env(safe-area-inset-bottom));
    min-height: 76px;
    padding: 8px;
  }
  .mobile-bottom-nav a { min-height: 58px; font-size: .77rem; }
  .nn-home-hero-inner { width: min(100% - 22px, 1240px); }
  .nn-home-hero-actions .btn { flex: 1 1 0; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-home-hero-media img,
  .nn-brand-marquee-track { animation: none !important; }
  .nn-brand-marquee-track { transform: none !important; }
}

@keyframes nn41Marquee {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}
@keyframes nn41HeroDrift {
  from { transform: scale(1.035); }
  to { transform: scale(1.005); }
}
@keyframes nn41Out { to { opacity: 0; transform: translateY(5px); } }
@keyframes nn41In { from { opacity: 0; transform: translateY(5px); } }

/* ===== static/css/nakheel-najd-v4-2.css ===== */
/* Nakheel Najd V4.2 — editorial glass shell, pinned projects, horizontal services, Saudi map. */
:root {
  --nn42-ink: #151713;
  --nn42-paper: #f4f1ea;
  --nn42-green: #14513f;
  --nn42-green-dark: #0b2b21;
  --nn42-gold: #b69158;
  --nn42-line: rgba(19, 27, 22, .10);
  --nn42-ease: cubic-bezier(.22, .61, .36, 1);
}

html { scroll-padding-top: 112px; }
body { background: var(--nn42-paper); }
body.shell-overlay-open { overflow: hidden; }
body:not(.page-home) #swup { padding-top: 104px; }
[hidden] { display: none !important; }
.mobile-bottom-nav { display: none !important; }

/* Floating desktop capsule. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1200;
  height: 98px;
  padding-top: 14px;
  pointer-events: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nn-header-capsule {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(190px, auto) 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  padding: 8px 12px 8px 20px;
  border-radius: 999px;
  color: #fff;
  background: rgba(67, 72, 68, .62);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 22px 55px rgba(5, 15, 11, .13), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  pointer-events: auto;
}
.nn-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #fff;
}
.nn-header-brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
}
.nn-header-brand strong,
.nn-header-brand small { display: block; color: #fff; }
.nn-header-brand strong { font-size: .98rem; line-height: 1.2; }
.nn-header-brand small { margin-top: 3px; font-size: .64rem; opacity: .68; letter-spacing: .01em; }
.nn-desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.nn-desktop-nav a {
  position: relative;
  padding: 11px 13px;
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color .22s ease, background .22s ease, transform .22s ease;
}
.nn-desktop-nav a:hover { color: #fff; background: rgba(255,255,255,.09); transform: translateY(-1px); }
.nn-desktop-nav a.active,
.nn-desktop-nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.14); }
.nn-desktop-nav a.active::after,
.nn-desktop-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 24% -9px;
  height: 1px;
  background: rgba(255,255,255,.92);
}
.nn-header-tools { display: flex; align-items: center; gap: 7px; }
.nn-header-search-button,
.nn-mobile-menu-button,
.nn-language-chip {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
.nn-header-search-button svg,
.nn-overlay-search-shortcut svg,
.nn-global-search button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; }
.nn-language-chip { font-size: .67rem; font-weight: 800; }
.nn-mobile-menu-button { display: none; position: relative; }
.nn-mobile-menu-button span { position: absolute; width: 16px; height: 1px; background: currentColor; }
.nn-mobile-menu-button span:first-child { transform: translateY(-3px); }
.nn-mobile-menu-button span:last-child { transform: translateY(3px); }

/* Menu and search layers. */
.nn-shell-overlay { position: fixed; inset: 0; z-index: 1500; }
.nn-overlay-backdrop { position: absolute; inset: 0; width: 100%; background: rgba(8, 12, 10, .57); backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); }
.nn-overlay-panel { position: absolute; inset: 0; overflow: auto; color: #fff; background: rgba(25, 29, 26, .70); }
.nn-overlay-toolbar {
  width: min(calc(100% - 36px), 1240px);
  min-height: 86px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.nn-overlay-close,
.nn-overlay-search-shortcut {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
}
.nn-overlay-close span { position: absolute; width: 17px; height: 1px; background: currentColor; }
.nn-overlay-close span:first-child { transform: rotate(45deg); }
.nn-overlay-close span:last-child { transform: rotate(-45deg); }
.nn-overlay-logo { margin-inline-start: auto; display: flex; align-items: center; gap: 9px; color: #fff; font-family: var(--font-display); font-weight: 900; }
.nn-overlay-logo b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); }
.nn-menu-layout {
  width: min(calc(100% - 36px), 1120px);
  min-height: calc(100svh - 86px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  align-items: center;
  gap: clamp(40px, 8vw, 120px);
  padding: clamp(42px, 7vw, 90px) 0;
}
.nn-menu-intro h2 { max-width: 14ch; color: #fff; font-size: clamp(2.2rem, 5vw, 5.4rem); line-height: 1.05; }
.nn-menu-intro p { max-width: 45ch; color: rgba(255,255,255,.68); }
.nn-menu-intro .btn { margin-top: 20px; }
.nn-overlay-nav { border-top: 1px solid rgba(255,255,255,.15); }
.nn-overlay-nav a {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.15);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.3vw, 2rem);
  font-weight: 800;
  transition: padding .25s ease, background .25s ease;
}
.nn-overlay-nav a:hover { padding-inline: 16px; background: rgba(255,255,255,.05); }
.nn-overlay-nav b { font-family: var(--font-ui); font-size: 1rem; font-weight: 400; opacity: .58; }
.nn-search-overlay { background: rgba(242, 240, 234, .68); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.nn-search-overlay .nn-overlay-backdrop { background: rgba(242,240,234,.58); }
.nn-search-dialog {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), 1240px);
  margin: clamp(110px, 14vh, 170px) auto 0;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
}
.nn-search-close { position: relative; width: 72px; height: 72px; border-radius: 50%; color: #fff; background: rgba(20,81,63,.30); }
.nn-search-close span { position: absolute; inset: 50% auto auto 50%; width: 21px; height: 1px; background: currentColor; }
.nn-search-close span:first-child { transform: translate(-50%,-50%) rotate(45deg); }
.nn-search-close span:last-child { transform: translate(-50%,-50%) rotate(-45deg); }
.nn-global-search { min-height: 80px; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 26px 70px rgba(35,39,35,.12); }
.nn-global-search label { color: #837d87; font-size: .95rem; white-space: nowrap; }
.nn-global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 1.1rem; }
.nn-global-search button { width: 46px; height: 46px; display: grid; place-items: center; color: var(--nn42-ink); background: transparent; }

/* Full-viewport hero. */
.nn-home-hero { min-height: 100svh !important; height: 100svh; }
.nn-home-hero-inner { min-height: 100svh !important; height: 100svh; padding-top: 136px; padding-bottom: 64px; }
.nn-home-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.nn-home-hero-shade { background: linear-gradient(90deg, rgba(4,17,11,.82) 0%, rgba(4,17,11,.35) 50%, rgba(4,17,11,.13) 100%), linear-gradient(180deg, rgba(4,17,11,.12), rgba(4,17,11,.68)); }
.nn-home-hero-copy h1 { max-width: 10ch; font-size: clamp(3.7rem, 8vw, 8.4rem); line-height: .92; }
.nn-home-hero-copy p { max-width: 48ch; }
.nn-hero-scroll { position: absolute; inset-inline-start: 50%; bottom: 26px; z-index: 5; width: 30px; height: 48px; transform: translateX(-50%); border-radius: 999px; border: 1px solid rgba(255,255,255,.36); }
.nn-hero-scroll span { position: absolute; left: 50%; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: nn42ScrollHint 1.8s infinite; }

/* The uninterrupted moving line directly under the hero. */
.nn-brand-marquee { border-radius: 0; border: 0; margin: 0; padding: 29px 0 35px; background: var(--nn42-paper); overflow: hidden; }
.nn-brand-marquee::before,
.nn-brand-marquee::after { display: none; }
.nn-brand-marquee-track { display: flex; width: max-content; animation: nn41Marquee 25s linear infinite; }
.nn-brand-marquee-group { display: flex; align-items: center; flex-shrink: 0; gap: 30px; padding-inline: 22px; }
.nn-brand-marquee span { color: var(--nn42-ink); font-size: clamp(4rem, 8.4vw, 9rem); line-height: .82; font-weight: 900; white-space: nowrap; }
.nn-brand-marquee b { color: rgba(21,23,19,.25); font-size: clamp(2rem, 4.4vw, 4.6rem); font-weight: 400; }

/* Compact section titles. */
.nn-section-minihead { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 24px; }
.nn-section-minihead span { color: var(--nn42-green); font-size: .72rem; font-weight: 900; letter-spacing: .04em; }
.nn-section-minihead h2 { margin: 0; max-width: none; font-size: clamp(2rem, 4vw, 4.4rem); line-height: 1; }
.nn-section-minihead-light span,
.nn-section-minihead-light h2 { color: #fff; }
.nn-section-end { display: flex; justify-content: center; padding-top: 28px; }

/* Four stacked projects. */
.nn-projects-stack-section { position: relative; padding: clamp(74px, 9vw, 126px) 0; background: #ece9e1; }
.nn-projects-stack { position: relative; }
.nn-project-panel {
  position: sticky;
  top: 96px;
  z-index: calc(20 + var(--panel-index));
  min-height: calc(100svh - 122px);
  height: calc(100svh - 122px);
  margin-bottom: 18vh;
  overflow: hidden;
  border-radius: 34px;
  color: #fff;
  background: var(--nn42-green-dark);
  box-shadow: 0 34px 90px rgba(13,32,24,.18);
  transform-origin: center top;
}
.nn-project-panel:last-child { margin-bottom: 0; }
.nn-project-panel-image,
.nn-project-panel-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.nn-project-panel-image { object-fit: cover; border-radius: 0; }
.nn-project-panel-shade { background: linear-gradient(180deg, rgba(5,16,11,.03) 22%, rgba(5,16,11,.30) 55%, rgba(5,16,11,.92) 100%); }
.nn-project-panel-content { position: absolute; z-index: 2; inset: auto 0 0; display: grid; grid-template-columns: 90px minmax(0,680px); align-items: end; gap: 24px; padding: clamp(26px,5vw,64px); }
.nn-project-number { color: rgba(255,255,255,.32); font-family: var(--font-display); font-size: clamp(3rem,7vw,7rem); line-height: .8; }
.nn-project-panel .nn-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nn-project-panel .nn-meta span { padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.14); font-size: .7rem; }
.nn-project-panel h3 { margin: 0 0 8px; color: #fff; font-size: clamp(2rem,5vw,5rem); line-height: 1; }
.nn-project-panel p { margin: 0; max-width: 48ch; color: rgba(255,255,255,.72); }

/* Vertical scroll driving a horizontal service gallery. */
.nn-services-showcase { padding: clamp(76px, 9vw, 130px) 0; overflow: clip; background: #fff; }
.nn-services-stage { width: 100%; overflow-x: auto; scrollbar-width: none; }
.nn-services-stage::-webkit-scrollbar { display: none; }
.nn-services-track { width: max-content; display: flex; align-items: stretch; gap: 18px; padding-inline: max(1rem, calc((100vw - 1240px) / 2)); will-change: transform; }
.nn-service-slide { width: clamp(340px, 33vw, 520px); flex: 0 0 auto; }
.nn-service-slide > a { position: relative; display: block; min-height: min(72svh, 680px); overflow: hidden; border-radius: 30px; background: var(--nn42-green-dark); box-shadow: 0 24px 66px rgba(17,34,27,.13); }
.nn-service-slide img,
.nn-service-slide-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.nn-service-slide img { object-fit: cover; border-radius: 0; transition: transform .7s var(--nn42-ease); }
.nn-service-slide:hover img { transform: scale(1.045); }
.nn-service-slide-shade { background: linear-gradient(180deg, rgba(4,15,10,.02) 24%, rgba(4,15,10,.84) 100%); }
.nn-service-slide-copy { position: absolute; z-index: 2; inset: auto 0 0; padding: 28px; color: #fff; }
.nn-service-slide-copy > span { display: block; margin-bottom: 26px; color: rgba(255,255,255,.42); font-family: var(--font-display); font-size: 3rem; }
.nn-service-slide-copy h3 { margin: 0 0 10px; color: #fff; font-size: clamp(1.6rem,2.8vw,2.8rem); line-height: 1.05; }
.nn-service-slide-copy p { margin: 0 0 18px; color: rgba(255,255,255,.68); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nn-service-slide-copy b { font-size: .78rem; }

/* Interactive Saudi map. */
.nn-cities-map-section { padding: clamp(76px,10vw,140px) 0; background: #e9e6de; }
.nn-saudi-map-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); align-items: center; gap: clamp(32px,7vw,100px); }
.nn-saudi-map { position: relative; min-height: 590px; }
.nn-saudi-map-shape { width: 100%; height: 100%; min-height: 590px; overflow: visible; filter: drop-shadow(0 34px 50px rgba(13,44,33,.20)); }
.nn-map-city { position: absolute; display: inline-flex; align-items: center; gap: 7px; color: var(--nn42-ink); transform: translate(50%,-50%); font-size: .72rem; font-weight: 900; white-space: nowrap; }
.nn-map-city i { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 3px solid var(--nn42-gold); box-shadow: 0 0 0 6px rgba(182,145,88,.18); transition: transform .22s ease; }
.nn-map-city span { padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 9px 22px rgba(13,34,27,.10); }
.nn-map-city:hover i { transform: scale(1.35); }
.nn-map-city-riyadh { left: 56%; top: 48%; }
.nn-map-city-jeddah { left: 22%; top: 59%; }
.nn-map-city-makkah { left: 27%; top: 61%; }
.nn-map-city-madinah { left: 28%; top: 40%; }
.nn-map-city-qassim { left: 49%; top: 35%; }
.nn-map-city-dammam { left: 79%; top: 43%; }
.nn-map-city-khobar { left: 80%; top: 48%; }
.nn-map-city-abha { left: 42%; top: 79%; }
.nn-map-city-jazan { left: 37%; top: 88%; }
.nn-map-city-taif { left: 32%; top: 64%; }
.nn-map-city-tabuk { left: 18%; top: 22%; }
.nn-map-city-hail { left: 40%; top: 27%; }
.nn-map-copy h3 { margin: 14px 0 12px; font-size: clamp(2rem,4vw,4rem); line-height: 1.05; }
.nn-map-copy p { max-width: 34ch; color: rgba(21,23,19,.62); }
.nn-map-city-list { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border-top: 1px solid var(--nn42-line); }
.nn-map-city-list a { min-height: 44px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--nn42-line); font-size: .78rem; font-weight: 800; }
.nn-map-city-list span { color: var(--nn42-green); }

/* Cleaner cards and less copy. */
.nn-article-card-v42 { overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 18px 50px rgba(18,34,27,.07); }
.nn-article-card-v42 .nn-card-media { aspect-ratio: 16/10; }
.nn-article-card-v42 .nn-card-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .6s var(--nn42-ease); }
.nn-article-card-v42:hover .nn-card-media img { transform: scale(1.035); }
.nn-article-card-v42 .nn-card-body { min-height: 250px; padding: 24px; }
.nn-article-card-v42 h3 { font-size: 1.42rem; line-height: 1.25; }
.nn-article-card-v42 p { color: rgba(21,23,19,.60); -webkit-line-clamp: 3; }

@media (max-width: 1060px) {
  .nn-desktop-nav a { padding-inline: 9px; font-size: .72rem; }
  .nn-header-brand small { display: none; }
  .nn-saudi-map-layout { grid-template-columns: 1fr; }
  .nn-map-copy { max-width: 700px; }
}

@media (max-width: 820px) {
  body { padding-bottom: 0; }
  body:not(.page-home) #swup { padding-top: 82px; }
  .site-header { height: 72px; padding-top: max(8px, env(safe-area-inset-top)); }
  .nn-header-capsule {
    width: calc(100% - 20px);
    min-height: 54px;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 6px 7px 6px 12px;
    border-radius: 19px;
    background: rgba(14,20,17,.52);
  }
  .nn-header-brand { justify-self: end; }
  .nn-header-brand-mark { width: 35px; height: 35px; font-size: 1rem; }
  .nn-header-brand strong { font-size: .78rem; }
  .nn-header-brand small,
  .nn-desktop-nav,
  .nn-language-chip { display: none; }
  .nn-header-tools { grid-column: 1; grid-row: 1; justify-self: start; }
  .nn-header-brand { grid-column: 2; grid-row: 1; }
  .nn-header-search-button,
  .nn-mobile-menu-button { display: inline-grid; width: 38px; height: 38px; background: transparent; border-color: rgba(255,255,255,.10); }
  .nn-mobile-menu-button { display: inline-grid; }

  .nn-overlay-toolbar { width: calc(100% - 24px); min-height: 68px; }
  .nn-overlay-toolbar .nn-language-chip { display: inline-grid; width: 34px; height: 28px; }
  .nn-overlay-logo { font-size: .72rem; }
  .nn-overlay-logo b { width: 31px; height: 31px; }
  .nn-menu-layout { width: calc(100% - 24px); min-height: calc(100svh - 68px); grid-template-columns: 1fr; align-items: start; padding: 18px 0 42px; }
  .nn-menu-intro { display: none; }
  .nn-overlay-nav a { min-height: 68px; font-size: 1.12rem; }
  .nn-search-dialog { width: calc(100% - 20px); grid-template-columns: 44px 1fr; gap: 8px; margin-top: max(16px, env(safe-area-inset-top)); }
  .nn-search-close { width: 44px; height: 44px; }
  .nn-global-search { min-height: 44px; padding: 0 12px; gap: 8px; }
  .nn-global-search label { font-size: .65rem; }
  .nn-global-search input { font-size: .8rem; }
  .nn-global-search button { width: 32px; height: 32px; }

  .nn-home-hero-inner { padding: 100px 0 76px; }
  .nn-home-hero-copy h1 { max-width: 9ch; font-size: clamp(3rem,14vw,5rem); }
  .nn-home-hero-copy p { max-width: 33ch; font-size: .9rem; }
  .nn-home-hero-facts { display: none; }
  .nn-hero-scroll { bottom: 18px; }
  .nn-brand-marquee { padding: 23px 0 29px; }
  .nn-brand-marquee-group { gap: 20px; }
  .nn-brand-marquee span { font-size: clamp(3.4rem,20vw,6rem); }
  .nn-brand-marquee b { font-size: 2rem; }
  .nn-section-minihead { align-items: baseline; padding-bottom: 18px; }
  .nn-section-minihead h2 { font-size: clamp(1.9rem,8vw,3rem); }

  .nn-projects-stack-section { padding: 64px 0; }
  .nn-project-panel { top: 74px; min-height: calc(100svh - 96px); height: calc(100svh - 96px); margin-bottom: 14vh; border-radius: 24px; }
  .nn-project-panel-content { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .nn-project-number { font-size: 3rem; }
  .nn-project-panel h3 { font-size: clamp(2.1rem,10vw,3.4rem); }
  .nn-project-panel p { font-size: .82rem; }

  .nn-services-showcase { padding: 66px 0; }
  .nn-services-track { gap: 12px; padding-inline: 14px; }
  .nn-service-slide { width: 84vw; }
  .nn-service-slide > a { min-height: 68svh; border-radius: 24px; }
  .nn-service-slide-copy { padding: 22px; }

  .nn-cities-map-section { padding: 66px 0; }
  .nn-saudi-map { min-height: 470px; overflow: hidden; border-radius: 28px; background: rgba(255,255,255,.34); }
  .nn-saudi-map-shape { min-height: 470px; transform: scale(1.08); }
  .nn-map-city { font-size: .57rem; }
  .nn-map-city i { width: 9px; height: 9px; border-width: 2px; box-shadow: 0 0 0 4px rgba(182,145,88,.18); }
  .nn-map-city span { padding: 4px 6px; }
  .nn-map-city-list { grid-template-columns: 1fr 1fr; }
  .nn-article-card-v42 .nn-card-body { min-height: 220px; }
}

@media (max-width: 440px) {
  .nn-header-brand strong { font-size: .72rem; }
  .nn-map-city span { display: none; }
  .nn-map-city:hover span,
  .nn-map-city:focus span { display: inline-flex; position: absolute; bottom: 14px; right: 0; }
  .nn-map-city-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-brand-marquee-track,
  .nn-hero-scroll span { animation: none !important; }
}

@keyframes nn42ScrollHint {
  0% { transform: translate(-50%,0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%,22px); opacity: 0; }
}

/* Shared card refinement across inner listings. */
.nn-service-card-v4,
.nn-article-card,
.nn-city-card-v4,
.nn-card {
  border-color: rgba(20, 33, 27, .08);
  box-shadow: 0 16px 46px rgba(15, 36, 27, .065);
}
.nn-service-card-v4 .nn-card-media,
.nn-article-card .nn-card-media { overflow: hidden; }
.nn-service-card-v4 .nn-card-media img,
.nn-article-card .nn-card-media img { transition: transform .65s var(--nn42-ease); }
.nn-service-card-v4:hover .nn-card-media img,
.nn-article-card:hover .nn-card-media img { transform: scale(1.035); }
.nn-service-card-v4 .nn-card-body,
.nn-article-card .nn-card-body { padding: clamp(19px, 2.2vw, 25px); }
.nn-service-card-v4 h3,
.nn-article-card h3 { line-height: 1.25; letter-spacing: -.025em; }
.nn-service-card-v4 p,
.nn-article-card p { color: rgba(21,23,19,.60); }
.section-heading { margin-bottom: clamp(24px, 4vw, 42px); }
.section-heading h2 { font-size: clamp(2rem, 4vw, 4.2rem); line-height: 1.04; }
.section-heading > p { max-width: 43ch; color: rgba(21,23,19,.58); }

.nn-services-track { direction: ltr; }
.nn-service-slide { direction: rtl; }

/* ===== static/css/nakheel-najd-v4-3.css ===== */
/* Nakheel Najd V4.3 — Arabic-first, open editorial layout, Saudi coverage map. */
:root {
  --nn43-paper: #f4f1ea;
  --nn43-ink: #171814;
  --nn43-muted: rgba(23, 24, 20, .60);
  --nn43-green: #175642;
  --nn43-green-dark: #0d3328;
  --nn43-gold: #b68e53;
  --nn43-line: rgba(23, 24, 20, .12);
  --nn43-radius-media: 22px;
}

html {
  direction: rtl;
  text-align: start;
  background: var(--nn43-paper);
}
body {
  direction: rtl;
  text-align: start;
  background: var(--nn43-paper);
  color: var(--nn43-ink);
}
main, #content, section, article, nav, form, input, select, textarea, button { direction: rtl; }
input, select, textarea { text-align: right; }
select { background-position: left 14px center; }

/* Arabic-only navigation shell. */
.nn-header-capsule {
  grid-template-columns: minmax(190px, auto) 1fr auto;
  padding-inline: 14px;
}
.nn-header-brand { justify-self: start; }
.nn-header-tools { justify-self: end; }
.nn-language-chip { display: none !important; }
.nn-desktop-nav { direction: rtl; }
.nn-overlay-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  direction: rtl;
}
.nn-overlay-logo { grid-column: 1; margin: 0; justify-self: start; }
.nn-overlay-search-shortcut { grid-column: 3; }
.nn-overlay-close { grid-column: 4; }
.nn-menu-layout,
.nn-overlay-nav,
.nn-menu-intro { direction: rtl; text-align: right; }
.nn-overlay-nav a b { transform: none; }
.nn-search-dialog {
  display: flex;
  flex-direction: row;
  direction: rtl;
  align-items: center;
}
.nn-global-search { order: 1; flex: 1; direction: rtl; }
.nn-search-close { order: 2; flex: 0 0 auto; }

/* Flat page language. */
.page-home,
.page-home #swup,
.page-home #content,
.page-home .nn-home-section,
.page-home .nn-projects-stack-section,
.page-home .nn-services-showcase,
.page-home .nn-cities-map-section,
.page-home .nn-home-gallery,
.page-home .nn-home-articles,
.page-home .nn-section-soft,
.page-home .nn-section-dark {
  background: var(--nn43-paper) !important;
}
.page-home .nn-home-section { padding-block: clamp(70px, 9vw, 126px); }
.page-home .nn-home-section + .nn-home-section { border-top: 1px solid var(--nn43-line); }
.page-home .nn-section-minihead {
  min-height: 0;
  padding: 0 0 clamp(26px, 4vw, 48px);
  margin: 0;
  border: 0;
}
.page-home .nn-section-minihead h2 {
  margin: 0;
  color: var(--nn43-ink);
  font-size: clamp(1.75rem, 3.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.page-home .nn-section-end { padding-top: clamp(24px, 4vw, 42px); }
.nn-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--nn43-ink);
  font-weight: 800;
  border-bottom: 1px solid currentColor;
}
.nn-text-link span { color: var(--nn43-green); transition: transform .2s ease; }
.nn-text-link:hover span { transform: translateX(-4px); }

/* Hero and moving line remain the only full-bleed visual layers. */
.nn-home-hero { background: #0d231b; }
.nn-brand-marquee {
  background: var(--nn43-paper) !important;
  border-bottom: 1px solid var(--nn43-line);
  direction: rtl;
}
.nn-brand-marquee-track { direction: rtl; }
.nn-brand-marquee-group { direction: rtl; }

/* Projects: image-led, no backing card shell. */
.nn-project-panel {
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}
.nn-project-panel-content { direction: rtl; text-align: right; }
.nn-project-panel .nn-meta { justify-content: flex-start; }

/* Services: pure image panels, no floating white card backgrounds. */
.nn-services-showcase { overflow: clip; }
.nn-services-stage { direction: rtl; }
.nn-services-track {
  direction: rtl !important;
  flex-direction: row;
  transform-origin: right center;
}
.nn-service-slide { direction: rtl !important; }
.nn-service-slide > a {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: var(--nn43-radius-media);
}
.nn-service-slide-copy { text-align: right; }

/* Accurate Saudi outline and city positions. */
.nn-cities-map-section { background: var(--nn43-paper) !important; }
.nn-saudi-map-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
  align-items: center;
}
.nn-saudi-map {
  position: relative;
  min-height: 0 !important;
  aspect-ratio: 900 / 650;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.nn-saudi-map-shape {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  object-fit: contain;
  filter: none !important;
  transform: none !important;
}
.nn-map-city {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  direction: rtl;
  color: var(--nn43-ink);
  transform: translate(-50%, -50%);
  font-size: .68rem;
  font-weight: 900;
  white-space: nowrap;
  z-index: 2;
}
.nn-map-city i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--nn43-gold);
  box-shadow: 0 0 0 5px rgba(182, 142, 83, .15);
}
.nn-map-city span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(244, 241, 234, .94);
  border: 1px solid rgba(23, 24, 20, .08);
  box-shadow: none;
}
.nn-map-city:hover i,
.nn-map-city:focus-visible i { transform: scale(1.28); }
.nn-map-city-riyadh { --x: 56.20%; --y: 47.42%; }
.nn-map-city-jeddah { --x: 25.81%; --y: 65.57%; }
.nn-map-city-makkah { --x: 28.51%; --y: 66.11%; }
.nn-map-city-madinah { --x: 27.34%; --y: 48.48%; }
.nn-map-city-qassim { --x: 45.26%; --y: 38.16%; }
.nn-map-city-dammam { --x: 70.06%; --y: 37.82%; }
.nn-map-city-khobar { --x: 70.50%; --y: 38.96%; }
.nn-map-city-abha { --x: 39.26%; --y: 83.95%; }
.nn-map-city-jazan { --x: 39.45%; --y: 91.42%; }
.nn-map-city-taif { --x: 30.77%; --y: 66.78%; }
.nn-map-city-tabuk { --x: 15.14%; --y: 26.78%; }
.nn-map-city-hail { --x: 36.07%; --y: 31.68%; }
.nn-map-city-dammam span { transform: translateY(-18px); }
.nn-map-city-khobar span { transform: translateY(18px); }
.nn-map-city-jeddah span { transform: translate(-12px, 16px); }
.nn-map-city-makkah span { transform: translate(12px, -16px); }
.nn-map-city-taif span { transform: translate(20px, 16px); }
.nn-map-city-abha span { transform: translate(-14px, -15px); }
.nn-map-city-jazan span { transform: translate(15px, 14px); }
.nn-map-copy { direction: rtl; text-align: right; }
.nn-map-summary {
  max-width: 30ch;
  margin: 0 0 22px;
  color: var(--nn43-muted);
  font-size: 1rem;
  line-height: 1.8;
}
.nn-map-city-list {
  margin: 0;
  border-top: 1px solid var(--nn43-line);
}
.nn-map-city-list a {
  color: var(--nn43-ink);
  background: transparent;
}
.nn-map-source {
  display: inline-block;
  margin-top: 16px;
  color: var(--nn43-muted);
  font-size: .68rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Gallery without section panel. */
.nn-home-gallery { color: var(--nn43-ink); }
.nn-home-gallery .nn-gallery-item {
  background: transparent;
  box-shadow: none;
  border: 0;
}
.nn-home-gallery .nn-gallery-item img { border-radius: var(--nn43-radius-media); }

/* Open editorial cards site-wide. */
.nn-card,
.nn-service-card-v4,
.nn-article-card,
.nn-article-card-v42,
.nn-article-card-v43,
.nn-city-card,
.nn-city-card-v4,
.service-card,
.city-card,
.content-card,
.nn-panel,
.nn-taxonomy,
.nn-search {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.nn-card { overflow: visible; }
.nn-card-media {
  display: block;
  overflow: hidden;
  border-radius: var(--nn43-radius-media) !important;
  background: rgba(23, 24, 20, .05);
}
.nn-card-media img { border-radius: 0 !important; }
.nn-card-body {
  min-height: 0 !important;
  padding: 18px 0 0 !important;
  text-align: right;
}
.nn-card-body h3 { margin: 10px 0 9px; }
.nn-card-body p { color: var(--nn43-muted); }
.nn-card-footer,
.nn-card-actions { padding-inline: 0; }
.nn-card-link {
  width: fit-content;
  margin-top: auto;
  padding-top: 12px;
  color: var(--nn43-ink);
  border-bottom: 1px solid rgba(23, 24, 20, .40);
}
.nn-card-link::after { content: "←"; }
.nn-meta { direction: rtl; justify-content: flex-start; }
.nn-meta span,
.nn-chip,
.nn-chip-green {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--nn43-muted) !important;
  box-shadow: none !important;
}
.nn-meta span + span::before { content: "·"; margin-inline: 7px; }
.nn-article-card-v43 .nn-card-media { aspect-ratio: 16 / 10; }
.nn-article-card-v43 .nn-card-media img { width: 100%; height: 100%; object-fit: cover; }
.nn-article-card-v43 h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.25; }
.nn-article-card-v43 p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nn-city-card,
.nn-city-card-v4,
.nn-service-card {
  padding: 0 0 22px !important;
  border-bottom: 1px solid var(--nn43-line) !important;
}
.nn-city-card::before,
.nn-panel::before { display: none !important; }
.nn-panel,
.content-card,
.nn-taxonomy,
.nn-search {
  padding: 24px 0 !important;
  border-top: 1px solid var(--nn43-line) !important;
}
.quote-form.nn-panel { background: transparent !important; }
.quote-form input,
.quote-form select,
.quote-form textarea,
.nn-search input,
.content-card input,
.content-card select,
.content-card textarea {
  background: rgba(255, 255, 255, .35) !important;
  border: 1px solid var(--nn43-line) !important;
  box-shadow: none !important;
}
.nn-page-hero-shell {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nn43-line) !important;
  border-radius: 0 !important;
  padding-inline: 0 !important;
}
.empty-state {
  background: transparent !important;
  border: 1px dashed rgba(23, 24, 20, .22) !important;
  box-shadow: none !important;
}

/* Remove decorative card shells from the public experience. */
.page-hero-shell,
.article-shell,
.calculator-card,
.accent-card,
.cta-box,
.nn-project-card,
.comparison-grid > *,
.archive-list > *,
.archive-link-grid > * {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.page-hero-shell,
.article-shell {
  border-bottom: 1px solid var(--nn43-line) !important;
}
.nn-project-card {
  overflow: visible !important;
}
.nn-project-card img {
  border-radius: var(--nn43-radius-media) !important;
}
.calculator-card,
.accent-card,
.cta-box {
  padding-inline: 0 !important;
}

/* RTL-safe physical exceptions. */
.nn-hero-scroll { inset-inline-start: 50%; }
.nn-hero-scroll span { left: 50%; }
.nn-services-track { direction: rtl !important; }
.nn-service-slide { direction: rtl !important; }

@media (max-width: 1060px) {
  .nn-saudi-map-layout { grid-template-columns: 1fr; }
  .nn-map-copy { max-width: none; }
  .nn-map-summary { max-width: 44ch; }
}

@media (max-width: 820px) {
  .nn-header-capsule {
    grid-template-columns: 1fr auto;
    padding-inline: 8px 11px;
  }
  .nn-header-brand { grid-column: 2; justify-self: end; }
  .nn-header-tools { grid-column: 1; justify-self: start; }
  .nn-overlay-toolbar { grid-template-columns: auto 1fr auto auto; }
  .nn-overlay-logo { grid-column: 1; }
  .nn-overlay-search-shortcut { grid-column: 3; }
  .nn-overlay-close { grid-column: 4; }
  .nn-search-dialog { direction: rtl; }
  .page-home .nn-home-section { padding-block: 58px; }
  .page-home .nn-section-minihead { padding-bottom: 24px; }
  .page-home .nn-section-minihead h2 { font-size: clamp(1.65rem, 7.6vw, 2.5rem); }
  .nn-service-slide > a { box-shadow: none !important; }
  .nn-saudi-map { width: min(100%, 620px); margin-inline: auto; }
  .nn-map-city { font-size: .56rem; }
  .nn-map-city span { padding: 3px 5px; }
  .nn-map-city i { width: 8px; height: 8px; border-width: 2px; box-shadow: 0 0 0 3px rgba(182, 142, 83, .14); }
  .nn-map-city-list { grid-template-columns: 1fr 1fr; }
  .nn-grid-3.nn-article-grid { grid-template-columns: 1fr; gap: 42px; }
  .nn-card-body { padding-top: 14px !important; }
  .nn-panel, .content-card, .nn-taxonomy, .nn-search { padding-block: 18px !important; }
}

@media (max-width: 520px) {
  .nn-map-city span { display: none; }
  .nn-map-city:hover span,
  .nn-map-city:focus-visible span {
    display: inline-flex;
    position: absolute;
    inset-inline-start: 12px;
    bottom: 12px;
    transform: none;
  }
  .nn-map-city-list { grid-template-columns: 1fr; }
  .nn-brand-marquee span { font-size: clamp(3rem, 18vw, 5rem); }
}

/* ===== static/css/nakheel-najd-v4-4.css ===== */
/* Nakheel Najd V4.4 — fixed top header, minimal hero, simple footer, clean gallery. */
:root {
  --nn44-paper: #f4f1ea;
  --nn44-ink: #171914;
  --nn44-green: #123f31;
  --nn44-green-dark: #0b291f;
  --nn44-line: rgba(23,25,20,.12);
  --nn44-header-h: 76px;
}

html[dir="rtl"], body { direction: rtl; }
body { background: var(--nn44-paper) !important; }
body:not(.page-home) #swup { padding-top: var(--nn44-header-h) !important; }
body.page-home .conversion-bar { display: none !important; }

/* Header is attached to the top edge, never floating. */
.site-header,
body.page-home .site-header {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 1200;
  width: 100%;
  height: var(--nn44-header-h) !important;
  padding: 0 !important;
  background: rgba(244,241,234,.96) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nn44-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  pointer-events: auto !important;
}
body.page-home .site-header {
  color: #fff;
  background: rgba(10,35,26,.92) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}
.nn-header-capsule {
  width: min(100% - 40px, 1240px);
  height: var(--nn44-header-h);
  min-height: 0 !important;
  margin: 0 auto;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: var(--nn44-ink);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nn-header-brand { order: 1; color: inherit !important; }
.nn-desktop-nav { order: 2; flex: 1; justify-content: center; }
.nn-header-tools { order: 3; }
.nn-header-brand-mark {
  width: 38px;
  height: 38px;
  color: #fff;
  background: var(--nn44-green) !important;
  border: 0 !important;
}
.nn-header-brand strong,
.nn-header-brand small,
.nn-desktop-nav a,
.nn-header-search-button,
.nn-mobile-menu-button { color: var(--nn44-ink) !important; }
body.page-home .nn-header-brand strong,
body.page-home .nn-header-brand small,
body.page-home .nn-desktop-nav a,
body.page-home .nn-header-search-button,
body.page-home .nn-mobile-menu-button { color: #fff !important; }
.nn-desktop-nav a {
  padding: 9px 12px !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: .78rem;
}
.nn-desktop-nav a::after {
  inset: auto 20% -9px !important;
  background: currentColor !important;
}
.nn-header-search-button,
.nn-mobile-menu-button {
  width: 40px;
  height: 40px;
  background: transparent !important;
  border: 1px solid currentColor !important;
  border-radius: 50%;
  opacity: .88;
}

/* Simple RTL mobile header. */
@media (max-width: 820px) {
  :root { --nn44-header-h: 64px; }
  .nn-header-capsule {
    width: 100%;
    height: var(--nn44-header-h);
    padding-inline: 14px !important;
    display: flex !important;
    direction: rtl;
  }
  .nn-header-brand { order: 1; margin-inline-end: 0; }
  .nn-header-tools { order: 2; margin-inline-start: auto; display: flex; gap: 6px; }
  .nn-desktop-nav { display: none !important; }
  .nn-mobile-menu-button { display: inline-grid !important; }
  .nn-header-brand-mark { width: 34px; height: 34px; }
  .nn-header-brand-copy small { display: none !important; }
  .nn-header-brand-copy strong { font-size: .82rem !important; }
  .nn-header-search-button,
  .nn-mobile-menu-button { width: 36px; height: 36px; }
}

/* Mobile menu is a clean full-height Arabic panel. */
.nn-menu-overlay { direction: rtl; }
.nn-menu-overlay .nn-overlay-backdrop { background: rgba(8,29,22,.66); }
.nn-menu-panel {
  inset: 0 !important;
  padding: 0 !important;
  color: #fff;
  background: #10271f !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nn-overlay-toolbar {
  width: min(100% - 32px, 1120px);
  height: var(--nn44-header-h);
  min-height: var(--nn44-header-h) !important;
  margin: 0 auto;
  display: flex !important;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.nn-overlay-logo { order: 1; margin: 0 !important; }
.nn-overlay-toolbar-actions { order: 2; display: flex; gap: 7px; }
.nn-overlay-nav {
  width: min(100% - 32px, 760px);
  margin: clamp(42px, 9vh, 94px) auto 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.nn-overlay-nav a {
  min-height: 62px;
  direction: rtl;
  text-align: right;
  font-size: clamp(1.1rem, 4vw, 1.55rem);
}
.nn-menu-whatsapp {
  width: min(100% - 32px, 760px);
  min-height: 48px;
  margin: 28px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
}
.nn-menu-whatsapp img { width: 18px; height: 18px; }

/* Search direction and order. */
.nn-search-dialog {
  direction: rtl;
  grid-template-columns: 1fr 64px !important;
  align-items: center;
}
.nn-global-search { grid-column: 1; direction: rtl; }
.nn-search-close { grid-column: 2; width: 64px; height: 64px; }
.nn-global-search input { direction: rtl; text-align: right; }

/* Hero is image-led with only a small identity/action block. */
.nn-home-hero,
.nn-home-hero-inner { min-height: 100svh !important; height: 100svh !important; }
.nn-home-hero-inner {
  padding-top: calc(var(--nn44-header-h) + 24px) !important;
  padding-bottom: 46px !important;
  display: flex;
  align-items: flex-end !important;
  justify-content: flex-start;
}
.nn-home-hero-shade {
  background: linear-gradient(180deg, rgba(7,24,18,.08) 30%, rgba(7,24,18,.62) 100%) !important;
}
.nn-home-hero-minimal {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px 14px;
  padding: 14px 16px;
  color: #fff;
  background: rgba(8,31,23,.62);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nn-home-hero-minimal strong { font-size: 1.05rem; }
.nn-home-hero-minimal span { color: rgba(255,255,255,.72); font-size: .72rem; }
.nn-home-hero-minimal .btn { grid-column: 1 / -1; min-height: 43px; margin-top: 4px; }
.nn-home-hero-copy,
.nn-home-hero-facts { display: none !important; }

/* Gallery: no zoom, shade, overlay, or floating caption. */
.nn-home-gallery .nn-gallery-item {
  overflow: visible !important;
  border-radius: 0 !important;
}
.nn-home-gallery .nn-gallery-item::after { display: none !important; }
.nn-home-gallery .nn-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}
.nn-home-gallery .nn-gallery-item:hover img { transform: none !important; }
.nn-home-gallery .nn-gallery-item figcaption {
  position: static !important;
  display: block;
  margin-top: 9px;
  padding: 0 !important;
  color: var(--nn44-ink) !important;
  font-size: .76rem;
  font-weight: 700;
  background: transparent !important;
}

/* Service slides stay photographic but use distinct media supplied by the view. */
.nn-service-slide > a { min-height: min(66svh, 620px) !important; }
.nn-service-slide img { transform: none !important; }
.nn-service-slide:hover img { transform: none !important; }

/* Simple paper footer. */
.site-footer {
  margin-top: 72px;
  padding: 34px 0 18px !important;
  color: var(--nn44-ink) !important;
  background: var(--nn44-paper) !important;
  border-top: 1px solid var(--nn44-line) !important;
}
.nn-footer-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
}
.nn-footer-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--nn44-ink) !important; }
.nn-footer-brand span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--nn44-green); }
.nn-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
.site-footer .nn-footer-links a,
.site-footer .nn-footer-bottom a { margin: 0 !important; color: rgba(23,25,20,.68) !important; }
.nn-footer-whatsapp { min-height: 40px; display: inline-flex !important; align-items: center; gap: 7px; margin: 0 !important; padding: 0 14px; border: 1px solid var(--nn44-line); border-radius: 999px; color: var(--nn44-ink) !important; }
.nn-footer-whatsapp img { width: 17px; height: 17px; }
.nn-footer-bottom { margin-top: 26px; padding-top: 16px; display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--nn44-line); color: rgba(23,25,20,.55); font-size: .72rem; }

@media (max-width: 820px) {
  .nn-home-hero-minimal { width: min(100%, 280px); }
  .nn-hero-scroll { bottom: 22px; }
  .nn-search-dialog { width: calc(100% - 24px); margin-top: 92px; grid-template-columns: 1fr 52px !important; gap: 8px; }
  .nn-search-close { width: 52px; height: 52px; }
  .nn-global-search { min-height: 56px; padding-inline: 16px; }
  .nn-global-search label { display: none; }
  .nn-footer-main { grid-template-columns: 1fr; justify-items: start; gap: 22px; }
  .nn-footer-links { justify-content: flex-start; gap: 8px 16px; }
  .nn-footer-bottom { flex-direction: column; }
  .site-footer { padding-bottom: 24px !important; }
}

@media (max-width: 520px) {
  .nn-home-hero-inner { padding-inline: 14px !important; }
  .nn-home-hero-minimal { padding: 12px 13px; border-radius: 15px; }
  .nn-brand-marquee { padding-block: 18px 24px !important; }
  .nn-brand-marquee span { font-size: clamp(2.7rem, 16vw, 4.3rem) !important; }
}