@font-face {
  font-family: 'Lama Sans';
  src: url('../fonts/LamaSans-SemiBold-subset.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --bg: #f7ead8;
  --paper: #fffaf2;
  --paper-soft: #f5e8d5;
  --paper-deep: #ead7bc;
  --ink: #3e3822;
  --muted: #5f563c;
  --sand: #a88f61;
  --line: rgb(62 56 34 / 14%);
  --card: rgb(255 250 242 / 72%);
  --shadow: 0 20px 70px rgb(62 56 34 / 10%);
  --footer: #3e3822;
  --footer-2: #5e5130;
  --footer-text: #fff8ec;
  --footer-muted: rgb(255 248 236 / 76%);
  --focus: #8f6f3d;
  --building-line: #3e3822;
  --unit-icon: url('../assets/meras-unit.svg');
  color-scheme: light;
}

html[data-theme='dark'] {
  --bg: #302b1b;
  --paper: #4a432a;
  --paper-soft: #5c5132;
  --paper-deep: #2f2a1a;
  --ink: #ead7bc;
  --muted: #d9c49b;
  --sand: #d9c49b;
  --line: rgb(234 215 188 / 18%);
  --card: rgb(74 67 42 / 82%);
  --shadow: 0 22px 75px rgb(0 0 0 / 22%);
  --footer: #ead7bc;
  --footer-2: #d9c49b;
  --footer-text: #3e3822;
  --footer-muted: rgb(62 56 34 / 78%);
  --focus: #ead7bc;
  --building-line: #ead7bc;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  background: var(--footer);
}

html[data-theme='dark'] {
  background: #302b1b;
}

body {
  position: relative;
  isolation: isolate;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 78% 9%, rgb(234 215 188 / 68%), transparent 70%),
    radial-gradient(800px 520px at 8% 38%, rgb(255 250 242 / 70%), transparent 72%),
    linear-gradient(180deg, #f7ead8 0%, #fff7ea 32%, #fbf0df 64%, #ead7bc 100%);
  font-family: 'Lama Sans', 'Cairo', 'Tajawal', sans-serif;
}

html[data-theme='dark'] body {
  background:
    radial-gradient(900px 520px at 78% 9%, rgb(234 215 188 / 8%), transparent 70%),
    radial-gradient(800px 520px at 8% 38%, rgb(234 215 188 / 6%), transparent 72%),
    linear-gradient(180deg, #302b1b 0%, #3e3822 28%, #4b4329 58%, #302b1b 100%);
}

body::before {
  position: fixed;
  z-index: 1;
  inset: 0;
  content: '';
  pointer-events: none;
  opacity: 0.18;
  background:
    linear-gradient(135deg, transparent 0 46%, rgb(62 56 34 / 10%) 47% 48%, transparent 49%),
    radial-gradient(ellipse at 82% 18%, rgb(176 152 110 / 16%), transparent 42%),
    radial-gradient(ellipse at 15% 78%, rgb(62 56 34 / 8%), transparent 38%);
  background-size: 220px 220px, 100% 100%, 100% 100%;
  mix-blend-mode: multiply;
}

html[data-theme='dark'] body::before {
  opacity: 0.08;
  filter: invert(1) sepia(0.25);
}

a {
  color: inherit;
  text-decoration: none;
}

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

button,
input,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  border-radius: 10px;
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 500;
  inset-block-start: -80px;
  inset-inline-start: 16px;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--paper);
  background: var(--ink);
}

.skip-link:focus {
  inset-block-start: 12px;
}

/* GSAP/ScrollTrigger-drawn Hijazi facade. It always stays below every content layer. */
.building-draw {
  position: fixed;
  z-index: 0;
  left: -2.5vw;
  bottom: -7vh;
  width: clamp(310px, 30vw, 470px);
  aspect-ratio: 285 / 600;
  overflow: hidden;
  color: var(--building-line);
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  transition: color 180ms ease;
  contain: layout paint style;
  will-change: opacity;
  mask-image: linear-gradient(90deg, #000 0 76%, rgb(0 0 0 / 82%) 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0 76%, rgb(0 0 0 / 82%) 88%, transparent 100%);
}

.building-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center bottom;
  will-change: transform;
}

.building-svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  opacity: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.building-svg path[data-draw-stage='structure'] {
  stroke-width: 1.35;
}

.building-svg path[data-draw-stage='rawashin'] {
  stroke-width: 0.95;
}

.building-svg path[data-draw-stage='detail'] {
  stroke-width: 0.82;
}

html[dir='ltr'] .building-draw {
  right: -2.5vw;
  left: auto;
  transform: scaleX(-1);
}

main,
.site-footer {
  position: relative;
  z-index: 2;
}

.section,
.section-shell,
.footer-grid,
.footer-social,
.footer-bottom {
  width: min(1160px, calc(100% - 120px));
  margin-inline: auto;
}

.footer-col a {
  transition: opacity 160ms ease;
}

.footer-col a:hover {
  opacity: 0.72;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.section {
  padding-block: 68px;
  scroll-margin-top: 122px;
}

.kicker {
  margin: 0 0 14px;
  color: var(--sand);
  font-size: 12.5px;
}

.section h2,
.hero h1 {
  color: var(--ink);
  letter-spacing: 0;
}

.section h2 {
  max-width: 820px;
  margin: 0 0 18px;
  font-size: clamp(28px, 3.25vw, 44px);
  line-height: 1.28;
}

.section-lead,
.section p,
.hero p {
  max-width: 760px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  gap: 44px;
  align-items: center;
  min-height: 500px;
  margin-top: 14px;
  padding: 68px 58px;
  overflow: hidden;
  border-radius: 40px;
  background: linear-gradient(135deg, rgb(255 250 242 / 52%), rgb(245 232 213 / 20%));
  box-shadow: 0 24px 90px rgb(62 56 34 / 5%);
}

.hero-copy {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: auto;
  text-align: start;
}

html[dir='ltr'] .hero-copy {
  width: auto;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(29px, 3.2vw, 42px);
  line-height: 1.26;
}

html[dir='ltr'] .hero h1 {
  font-size: clamp(34px, 3.1vw, 48px);
  line-height: 1.18;
}

.hero p {
  margin-block: 0;
  font-size: 15.6px;
}

.hero-art {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 330px;
  --art-image: url('../assets/hero_hotel_commercial_transparent.webp');
  --art-transform: scale(1.07);
}

.media-soft {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: visible;
  background: radial-gradient(ellipse at center, rgb(255 250 242 / 72%) 0%, rgb(245 232 213 / 46%) 54%, transparent 84%);
}

.media-soft img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.82;
  mix-blend-mode: multiply;
  filter: contrast(0.96) saturate(0.88);
  transform: var(--art-transform, none);
  transform-origin: center;
}

html[dir='ltr'] .hero-art {
  --art-transform: scaleX(-1) scale(1.07);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.btn {
  height: 48px;
  padding-inline: 24px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
}

.btn.primary {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.btn:disabled {
  cursor: wait;
  opacity: 0.62;
}

.split-section {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 48px;
  align-items: center;
}

#about.split-section {
  display: block;
  max-width: 980px;
  padding-top: 64px;
  padding-bottom: 52px;
}

#about .text-block p {
  max-width: 920px;
}

.text-block p {
  max-width: 650px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  max-width: 760px;
  margin-top: 22px;
}

.chips span {
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 58%, transparent);
  font-size: 13px;
}

.cards {
  display: grid;
  gap: 16px;
  margin-top: 38px;
}

#services .five-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

section[aria-labelledby='why-title'] .five-cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.three-cards,
.compact-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  min-width: 0;
  padding: 24px 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: var(--card);
  box-shadow: 0 16px 36px rgb(62 56 34 / 5%);
  backdrop-filter: blur(3px);
}

.card h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 16.4px;
  line-height: 1.48;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 13.05px;
  line-height: 1.82;
}

section[aria-labelledby='why-title'] .card {
  padding: 20px 16px;
}

section[aria-labelledby='why-title'] .card p {
  font-size: 12.75px;
  line-height: 1.72;
}

.number {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 16px;
  direction: inherit;
  unicode-bidi: isolate;
}

.num-icon {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: currentColor;
  color: #504d3a;
  opacity: 0.96;
  mask: var(--unit-icon) center / contain no-repeat;
  -webkit-mask: var(--unit-icon) center / contain no-repeat;
}

.num-icon i {
  display: none;
}

.num-separator {
  width: 1px;
  height: 30px;
  flex: 0 0 1px;
  background: color-mix(in srgb, currentColor 34%, transparent);
}

.num-value {
  min-width: 16px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.sector-art {
  min-height: 520px;
  --art-image: url('../assets/sector-architectural-operations-transparent.webp');
  --art-mask-inset: 0 -6%;
}

.sector-art img {
  width: 112%;
  max-width: none;
}

html[dir='ltr'] .sector-art {
  --art-transform: scaleX(-1);
}

.mashaer-section {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 54px;
  align-items: center;
  padding-block: 74px;
}

.mashaer-art {
  grid-column: 2;
  grid-row: 1;
  width: 112%;
  height: 430px;
  transform: translateX(-18px);
  --art-image: url('../assets/mina_panorama_transparent.webp');
}

html[dir='ltr'] .mashaer-art {
  transform: translateX(18px);
  --art-transform: scaleX(-1);
}

.mashaer-section .text-block {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.mashaer-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.mashaer-cards .card {
  min-height: 168px;
  padding: 18px 15px;
}

.mashaer-cards .card h3 {
  font-size: 15.2px;
  line-height: 1.44;
}

.mashaer-cards .card p {
  font-size: 12.15px;
  line-height: 1.68;
}

.quality-section {
  width: min(1060px, calc(100% - 120px));
  padding-block: 28px 48px;
}

.quality-band {
  padding: 44px 48px;
  overflow: hidden;
  border-radius: 42px;
  color: var(--footer-text);
  text-align: center;
  background: linear-gradient(145deg, var(--footer), var(--footer-2));
}

.quality-band h2,
.quality-band p {
  max-width: 850px;
  margin-inline: auto;
}

.quality-band h2 {
  color: var(--footer-text);
  font-size: clamp(28px, 3.3vw, 44px);
}

.quality-band p,
.quality-band .kicker {
  color: var(--footer-muted);
}

.certs-section {
  width: 100%;
  padding-inline: max(72px, calc((100vw - 1060px) / 2));
  overflow: hidden;
}

.certs-section > .kicker,
.certs-section > h2,
.certs-section > .section-lead {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.certs-section > h2 {
  font-size: clamp(30px, 3.6vw, 48px);
}

.certs-section .three-cards {
  max-width: 980px;
  margin-inline: auto;
}

.contact-section {
  display: block;
  width: min(960px, calc(100% - 120px));
  max-width: none;
  margin-block: 8px 12px;
  padding-block: 60px;
  text-align: center;
}

.contact-section .text-block {
  max-width: 760px;
  margin-inline: auto;
}

.contact-section .text-block p {
  max-width: 620px;
  margin-inline: auto;
}

.contact-section .btn {
  min-width: 200px;
  margin-top: 14px;
}

.site-footer {
  margin-top: 52px;
  padding: 52px 0 calc(22px + env(safe-area-inset-bottom));
  overflow: hidden;
  color: var(--footer-text);
  background: linear-gradient(145deg, var(--footer), var(--footer-2));
}

.footer-wave {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 18%, rgb(255 255 255 / 6%) 22%, transparent 34%, transparent 62%, rgb(255 255 255 / 5%) 67%, transparent 78%);
}

.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.75fr 0.9fr;
  gap: 36px;
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 340px;
}

.footer-brand .footer-logo-pair {
  display: block;
  width: fit-content;
}

.footer-brand .footer-logo-img {
  display: block;
  width: auto;
  height: 96px;
  max-width: 210px;
  max-height: 96px;
  margin-bottom: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  filter: none;
}

.footer-brand p {
  max-width: 430px;
  margin-top: 10px;
  color: var(--footer-muted);
  font-size: 13.5px;
  line-height: 1.75;
}

.footer-brand .footer-logo-light {
  display: block;
}

.footer-brand .footer-logo-dark {
  display: none;
}

html[data-theme='dark'] .footer-brand .footer-logo-light {
  display: none;
}

html[data-theme='dark'] .footer-brand .footer-logo-dark {
  display: block;
}

.footer-col {
  display: grid;
  gap: 13px;
  align-content: start;
}

.footer-col h3 {
  margin: 0 0 8px;
  color: var(--footer-text);
  font-size: 18px;
}

.footer-col a,
.footer-col span {
  color: var(--footer-muted);
  font-size: 14px;
}

.footer-social {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 14px 0 2px;
}

.social-icons {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

.social-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--footer-text) 34%, transparent);
  border-radius: 50%;
  color: var(--footer-text);
  background: color-mix(in srgb, var(--footer-text) 5%, transparent);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.social-link:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--footer-text) 60%, transparent);
  background: color-mix(in srgb, var(--footer-text) 12%, transparent);
}

.social-link svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--footer-text) 20%, transparent);
  color: var(--footer-muted);
  font-size: 13px;
  line-height: 1.6;
}

.footer-bottom span {
  white-space: nowrap;
}

.form-status {
  min-height: 20px;
  margin: 0;
  color: var(--sand);
  font-size: 12.5px;
}

.form-status.is-success {
  color: #2e7d32;
}

.form-status.is-error {
  color: #c62828;
}

html[data-theme='dark'] .hero {
  background: linear-gradient(135deg, rgb(74 67 42 / 68%), rgb(62 56 34 / 40%));
}

html[data-theme='dark'] .media-soft {
  background: radial-gradient(ellipse at center, rgb(234 215 188 / 8%) 0%, rgb(234 215 188 / 4%) 54%, transparent 84%);
}

html[data-theme='dark'] .media-soft img {
  opacity: 0;
  mix-blend-mode: normal;
  filter: none;
}

html[data-theme='dark'] .media-soft::after {
  position: absolute;
  z-index: 2;
  inset: var(--art-mask-inset, 0);
  content: '';
  pointer-events: none;
  opacity: 0.88;
  transform: var(--art-transform, none);
  transform-origin: center;
  background: #ead7bc;
  mask-image: var(--art-image);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--art-image);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

html[data-theme='dark'] .btn.primary {
  border-color: rgb(234 215 188 / 45%);
  color: #ead7bc;
  background: #2b2617;
}

html[data-theme='dark'] .btn:not(.primary) {
  border-color: rgb(234 215 188 / 50%);
  color: #ead7bc;
  background: transparent;
}

html[data-theme='dark'] .num-icon {
  color: #ead7bc;
}

html[data-theme='dark'] .mashaer-section,
html[data-theme='dark'] .contact-section,
html[data-theme='dark'] .certs-section {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 1050px) {
  .section,
  .section-shell,
  .footer-grid,
  .footer-social,
  .footer-bottom,
  .quality-section {
    width: min(90vw, 720px);
  }

  .hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
    gap: 28px;
    padding: 52px 40px;
  }

  .hero-art {
    height: 285px;
  }

  #services .five-cards,
  section[aria-labelledby='why-title'] .five-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-section,
  .mashaer-section {
    grid-template-columns: 1fr;
  }

  .mashaer-section .text-block,
  .mashaer-art {
    grid-column: 1;
  }

  .mashaer-section .text-block {
    grid-row: 1;
  }

  .mashaer-art {
    grid-row: 2;
    width: 100%;
    height: 330px;
    transform: none;
  }

  html[dir='ltr'] .mashaer-art {
    transform: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .certs-section {
    padding-inline: 5vw;
  }
}

@media (max-width: 768px) {
  .section,
  .section-shell,
  .footer-grid,
  .footer-social,
  .footer-bottom,
  .quality-section {
    width: min(90vw, 640px);
  }

  .building-draw {
    left: -7vw;
    bottom: -5vh;
    width: min(82vw, 340px);
    mask-image: linear-gradient(90deg, #000 0 68%, rgb(0 0 0 / 78%) 84%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0 68%, rgb(0 0 0 / 78%) 84%, transparent 100%);
  }

  html[dir='ltr'] .building-draw {
    right: -7vw;
    left: auto;
  }

  .section {
    padding-block: 54px;
  }

  .section h2 {
    margin-bottom: 14px;
    font-size: 25px;
    line-height: 1.34;
  }

  .section-lead,
  .section p {
    font-size: 13.75px;
    line-height: 1.82;
  }

  .kicker {
    font-size: 11.5px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 20px;
    height: auto;
    min-height: 0;
    padding: 36px 24px 18px;
    border-radius: 28px;
  }

  .hero-copy,
  html[dir='ltr'] .hero-copy {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }

  .hero h1,
  html[dir='ltr'] .hero h1 {
    margin-bottom: 10px;
    font-size: 23px;
    line-height: 1.34;
    white-space: normal;
  }

  .hero p {
    font-size: 13.3px;
    line-height: 1.72;
  }

  .hero-art,
  html[dir='ltr'] .hero-art {
    grid-column: 1;
    grid-row: 2;
    inset: auto;
    width: 100%;
    max-width: none;
    height: clamp(210px, 58vw, 260px);
    opacity: 0.78;
    --art-image: url('../assets/hero_hotel_commercial_transparent-960.webp');
  }

  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 24px;
  }

  .hero-actions .btn {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding-inline: 12px;
    font-size: 12.1px;
    text-align: center;
  }

  #about.split-section {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .chips span {
    padding: 10px 8px;
    font-size: 12.6px;
    text-align: center;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
  }

  .cards,
  #services .five-cards,
  section[aria-labelledby='why-title'] .five-cards,
  .three-cards,
  .compact-cards,
  .mashaer-cards {
    grid-template-columns: 1fr;
  }

  .card,
  section[aria-labelledby='why-title'] .card {
    padding: 20px 17px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: none;
  }

  .card h3,
  .mashaer-cards .card h3 {
    font-size: 15.8px;
    line-height: 1.42;
  }

  .card p,
  .mashaer-cards .card p {
    font-size: 12.75px;
    line-height: 1.76;
  }

  .num-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .sector-art {
    min-height: 350px;
    --art-image: url('../assets/sector-architectural-operations-transparent-640.webp');
  }

  .mashaer-section {
    gap: 18px;
    padding-block: 48px;
  }

  .mashaer-art {
    height: 260px;
    --art-image: url('../assets/mina_panorama_transparent-1200.webp');
  }

  .quality-band {
    padding: 34px 24px;
    border-radius: 30px;
    text-align: start;
  }

  .quality-band h2 {
    font-size: 23px;
  }

  .certs-section > .kicker,
  .certs-section > h2,
  .certs-section > .section-lead {
    max-width: 100%;
    margin-inline: 0;
    text-align: start;
  }

  .contact-section {
    width: min(90vw, 640px);
    padding-block: 48px;
    text-align: start;
  }

  .contact-section .text-block p {
    margin-inline: 0;
  }

  .site-footer {
    margin-top: 34px;
    padding: 36px 0 calc(18px + env(safe-area-inset-bottom));
  }

  .footer-grid {
    gap: 20px;
  }

  .footer-brand {
    max-width: 100%;
  }

  .footer-brand .footer-logo-img {
    width: auto;
    height: 84px;
    max-width: 190px;
    max-height: 84px;
  }

  .footer-brand p,
  .footer-col a,
  .footer-col span {
    font-size: 12.5px;
  }

  .footer-col h3 {
    margin-bottom: 2px;
    font-size: 15px;
  }

  .footer-social {
    padding-top: 12px;
  }

  .social-link {
    width: 40px;
    height: 40px;
  }

  .social-link svg {
    width: 19px;
    height: 19px;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: center;
    gap: 6px 14px;
    margin-top: 14px;
    padding-top: 10px;
    font-size: 11.5px;
    text-align: center;
  }
}

@media (max-width: 380px) {

  .hero h1,
  html[dir='ltr'] .hero h1 {
    font-size: 22px;
  }

  .hero-actions .btn {
    font-size: 11.7px;
  }
}

@media (max-width: 350px) {
  .hero-actions {
    grid-template-columns: 1fr;
  }
}

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

/* content-v11 fixes: hero slogan size+spacing, unified section alignment, sectors cards, quality band, certs */
.hero .kicker {
  font-size: 16px;
  margin-bottom: 26px;
}

html[dir='ltr'] .hero .kicker {
  font-size: 15.5px;
}

.hero-sub {
  margin: 0 0 24px;
  color: var(--ink);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.6;
}

.hero h1 {
  white-space: nowrap;
}

html[data-theme='dark'] .hero-sub {
  color: var(--ink);
}

#about.split-section {
  max-width: none;
  width: min(1160px, calc(100% - 120px));
}

.quality-section {
  width: min(1160px, calc(100% - 120px));
}

.quality-band {
  padding: 46px 52px;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-align: start;
  background: linear-gradient(135deg, rgb(255 250 242 / 60%), rgb(245 232 213 / 30%));
  box-shadow: 0 16px 36px rgb(62 56 34 / 5%);
}

.quality-band h2,
.quality-band p {
  max-width: 900px;
  margin-inline: 0;
}

.quality-band h2 {
  color: var(--ink);
}

.quality-band p,
.quality-band .kicker {
  color: var(--muted);
}

html[data-theme='dark'] .quality-band {
  background: linear-gradient(145deg, #3e3822, #302b1b);
  border-color: rgb(234 215 188 / 18%);
  color: #ead7bc;
}

html[data-theme='dark'] .quality-band h2 {
  color: #ead7bc;
}

html[data-theme='dark'] .quality-band p,
html[data-theme='dark'] .quality-band .kicker {
  color: #d9c49b;
}

.certs-section {
  width: min(1160px, calc(100% - 120px));
  padding-inline: 0;
}

.certs-section > .kicker,
.certs-section > h2,
.certs-section > .section-lead {
  max-width: 900px;
  margin-inline: 0;
  text-align: start;
}

.certs-section .three-cards {
  max-width: 100%;
  margin-inline: 0;
}

.contact-section {
  width: min(1160px, calc(100% - 120px));
  text-align: start;
}

.contact-section .text-block {
  margin-inline: 0;
}

.contact-section .text-block p {
  margin-inline: 0;
}

.sector-cards {
  grid-template-columns: 1fr;
  gap: 14px;
}

.sector-cards .card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 4px 18px;
  padding: 22px 24px;
}

.sector-cards .card .number {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: start;
  flex: 0 0 auto;
  margin-bottom: 0;
  padding-top: 2px;
}

.sector-cards .card h3,
.sector-cards .card p {
  grid-column: 2;
}

.sector-cards .card h3 {
  margin: 0 0 8px;
  white-space: nowrap;
}

.sector-cards .num-icon {
  --unit-icon: url('../assets/meras-sector.svg');
}

.sector-cards .card p {
  margin: 0;
}

@media (max-width: 768px) {
  .hero-sub {
    font-size: 15.5px;
    margin-bottom: 20px;
  }

  .hero h1,
  html[dir='ltr'] .hero h1 {
    font-size: 20px;
    white-space: nowrap;
  }

  .sector-cards .card {
    flex-direction: column;
    gap: 10px;
  }

  .sector-cards .card h3 {
    white-space: normal;
  }

  .quality-band {
    padding: 34px 26px;
  }
}

@media (max-width: 380px) {
  .hero h1,
  html[dir='ltr'] .hero h1 {
    font-size: 17px;
  }
}

/* content-v11.1: shared typography system + full-width hero/header + stacked hero CTAs */
:root {
  --text-sm: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.16vw, 1rem);
  --text-2xl: clamp(1.125rem, 1.02rem + 0.45vw, 1.5rem);
  --text-3xl: clamp(1.75rem, 1.55rem + 0.9vw, 2rem);
  --text-4xl: clamp(2rem, 1.72rem + 1.25vw, 2.5rem);
  --leading-tight: 1.25;
  --leading-copy: 1.9;
}

body {
  font-size: var(--text-base);
  line-height: var(--leading-copy);
}

h1,
h2,
h3,
p {
  text-wrap: pretty;
}

.hero h1,
html[dir='ltr'] .hero h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
}

.section h2,
.quality-band h2,
.certs-section > h2 {
  font-size: var(--text-3xl);
  line-height: 1.35;
}

.card h3 {
  font-size: var(--text-2xl);
  line-height: 1.45;
}

.section-lead,
.section p,
.hero p {
  font-size: var(--text-base);
  line-height: var(--leading-copy);
}

.kicker,
small {
  font-size: var(--text-sm);
}

.hero .kicker,
html[dir='ltr'] .hero .kicker {
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
}

.hero {
  width: min(1500px, calc(100% - 32px));
}

.hero {
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  min-height: 520px;
  padding-inline: clamp(2rem, 5vw, 6rem);
}

.hero-copy {
  max-width: 660px;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
}

main > .section:not(.hero) {
  width: min(1160px, calc(100% - 120px));
  margin-inline: auto;
}

.hero-actions .btn {
  width: auto;
  min-width: 0;
}

@media (max-width: 1050px) {
  .hero {
    width: min(100% - 28px, 1500px);
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr);
    padding-inline: clamp(1.75rem, 4vw, 3rem);
  }
}

@media (max-width: 768px) {
  .hero {
    width: calc(100% - 20px);
  }

  main > .section:not(.hero),
  #about.split-section,
  .quality-section,
  .certs-section,
  .contact-section {
    width: calc(100% - 40px) !important;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 2.25rem 1.35rem 1.5rem;
  }

  .hero h1,
  html[dir='ltr'] .hero h1 {
    font-size: clamp(1.0625rem, 0.72rem + 1.52vw, 1.25rem);
  }

  .hero-actions {
    align-items: flex-start;
  }

  .hero-actions .btn {
    width: auto;
  }

  .card h3 {
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  }

  .sector-cards .card {
    gap: 4px 10px;
  }

  .sector-cards .card h3 {
    white-space: nowrap;
  }
}

@media (max-width: 350px) {
  .sector-cards .card h3 {
    white-space: normal;
  }
}

/* content-v11.2: open hero composition, image-first layering, equal CTAs */
.hero {
  display: block;
  min-height: 640px;
  padding-block: clamp(4rem, 5vw, 5.25rem);
  overflow: hidden;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.hero-copy,
html[dir='ltr'] .hero-copy {
  position: relative;
  z-index: 3;
  width: min(58%, 760px);
  max-width: 760px;
  margin-inline-end: auto;
}

.hero .kicker,
html[dir='ltr'] .hero .kicker {
  font-size: clamp(1.125rem, 1.05rem + 0.32vw, 1.25rem);
}

.hero h1,
html[dir='ltr'] .hero h1 {
  font-size: clamp(2.25rem, 2rem + 1vw, 2.75rem);
}

.hero-sub {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem) !important;
}

.hero-art,
html[dir='ltr'] .hero-art {
  position: absolute;
  z-index: 1;
  top: var(--hero-art-top, 300px);
  right: auto;
  left: clamp(1.25rem, 5vw, 5.5rem);
  grid-column: auto;
  grid-row: auto;
  width: min(46vw, 650px);
  height: 310px;
  margin: 0;
  background: none;
}

html[dir='ltr'] .hero-art {
  right: clamp(1.25rem, 5vw, 5.5rem);
  left: auto;
}

.hero-actions,
html[dir='ltr'] .hero-actions {
  position: relative;
  z-index: 3;
  align-items: flex-start;
}

.hero-actions .btn {
  width: 12.5rem;
  min-width: 12.5rem;
  text-align: center;
}

@media (max-width: 768px) {
  .hero {
    min-height: 490px;
    padding: 2.75rem 1.35rem 1.5rem;
  }

  .hero-copy,
  html[dir='ltr'] .hero-copy {
    width: 100%;
    max-width: none;
  }

  .hero .kicker,
  html[dir='ltr'] .hero .kicker {
    font-size: clamp(1.02rem, 0.94rem + 0.35vw, 1.1rem);
  }

  .hero h1,
  html[dir='ltr'] .hero h1 {
    font-size: clamp(1.125rem, 0.82rem + 1.35vw, 1.35rem);
  }

  .hero-sub {
    font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem) !important;
  }

  .hero-art,
  html[dir='ltr'] .hero-art {
    position: absolute;
    top: var(--hero-art-top, 245px);
    right: auto;
    left: clamp(1.25rem, 7vw, 2rem);
    width: min(72vw, 285px);
    height: 220px;
    opacity: 0.8;
  }

  html[dir='ltr'] .hero-art {
    right: clamp(1.25rem, 7vw, 2rem);
    left: auto;
  }

  .hero-actions .btn {
    width: 9.5rem;
    min-width: 9.5rem;
  }
}

/* content-v11.3: remove dark translucent hero layers */
html[data-theme='dark'] .hero,
html[data-theme='dark'] .hero .hero-art {
  background: none !important;
  box-shadow: none !important;
}

/* content-v11.4: unified typography, rhythm, and single-line section titles */
:root {
  --type-kicker: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --type-body: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
  --type-card-title: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --type-section-title: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --leading-copy-unified: 1.8;
  --leading-title-unified: 1.28;
  --leading-card-title: 1.42;
  --space-title-copy: 1rem;
  --space-copy-cards: 2rem;
}

main > .section h2 {
  max-width: none;
  margin: 0 0 var(--space-title-copy);
  overflow: visible;
  font-size: var(--section-title-fit, var(--type-section-title)) !important;
  line-height: var(--leading-title-unified) !important;
  letter-spacing: 0;
  white-space: nowrap !important;
  text-wrap: nowrap;
}

main > .section .kicker {
  margin: 0 0 0.75rem;
  font-size: var(--type-kicker) !important;
  line-height: 1.45 !important;
}

main > .section p:not(.kicker),
main > .section .section-lead,
main > .section .card p,
main > .section .mashaer-cards .card p {
  font-size: var(--type-body) !important;
  line-height: var(--leading-copy-unified) !important;
}

main > .section p {
  margin-block: 0;
}

main > .section p + p {
  margin-top: 0.875rem;
}

main > .section .cards {
  gap: 1rem;
  margin-top: var(--space-copy-cards);
}

main > .section .card h3,
main > .section .mashaer-cards .card h3 {
  margin: 0 0 0.625rem;
  font-size: var(--type-card-title) !important;
  line-height: var(--leading-card-title) !important;
}

main > .section .card .number {
  margin-bottom: 1rem;
}

main > .section .sector-cards .card .number {
  margin-bottom: 0;
}

.certs-section .card {
  display: flex;
  align-items: center;
  min-height: 6.25rem;
}

.certs-section .card h3 {
  margin: 0 !important;
}

@media (max-width: 768px) {
  :root {
    --type-body: 0.9375rem;
    --type-card-title: 1rem;
    --type-section-title: 1.25rem;
    --space-title-copy: 0.875rem;
    --space-copy-cards: 1.5rem;
  }

  main > .section h2 {
    letter-spacing: -0.015em;
  }
}

/* content-v11.5: larger titles, stacked sector cards, refined quality and certificates */
:root {
  --type-section-title: clamp(1.625rem, 1.35rem + 1.15vw, 2.25rem);
}

.sector-cards .card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.sector-cards .card .number,
.sector-cards .card h3,
.sector-cards .card p {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
}

.sector-cards .card .number {
  margin-bottom: 1rem;
  padding-top: 0;
}

.sector-cards .card h3 {
  margin-bottom: 0.625rem;
  white-space: normal;
}

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

.mashaer-cards .card {
  min-height: 12.25rem;
  padding: 1.25rem;
}

.mashaer-cards .card .number {
  margin-bottom: 1rem;
}

.quality-section {
  width: min(1160px, calc(100% - 120px));
  padding-block: 2.5rem 3.5rem;
}

.quality-band {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.25rem);
  border: 1px solid rgb(234 215 188 / 18%);
  border-radius: 2rem;
  text-align: start;
  background:
    radial-gradient(circle at 85% 15%, rgb(234 215 188 / 9%), transparent 34%),
    linear-gradient(145deg, var(--footer), var(--footer-2));
  box-shadow: 0 1.5rem 3.75rem rgb(62 56 34 / 12%);
}

.quality-copy h2,
.quality-copy p {
  max-width: none;
  margin-inline: 0;
}

.quality-copy > p:not(.kicker) {
  max-width: 31rem;
}

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

.quality-item {
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid rgb(234 215 188 / 18%);
  border-radius: 1.25rem;
  background: rgb(234 215 188 / 7%);
}

.quality-mark {
  position: relative;
  display: block;
  width: 2.25rem;
  height: 0.22rem;
  margin-bottom: 0.9rem;
  border-radius: 999px;
  color: #ead7bc;
  background: #ead7bc;
  opacity: 0.86;
}

.quality-mark::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  content: '';
  background: currentColor;
  transform: translateY(-50%);
}

html[dir='ltr'] .quality-mark::after {
  right: auto;
  left: 0;
}

.quality-item h3 {
  margin: 0 0 0.45rem;
  color: #ead7bc;
  font-size: var(--type-card-title);
  line-height: var(--leading-card-title);
}

.quality-band .quality-item p {
  max-width: none;
  margin: 0;
  color: var(--footer-muted);
  font-size: var(--type-body) !important;
  line-height: var(--leading-copy-unified) !important;
}

.cert-groups {
  display: grid;
  gap: 1.25rem;
  max-width: 980px;
  margin: 2.25rem auto 0;
}

.cert-group {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: 0 1rem 2.25rem rgb(62 56 34 / 5%);
}

.cert-group-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem);
  line-height: 1.45;
}

.cert-note {
  max-width: 52rem;
  margin: 0.55rem 0 0 !important;
  color: var(--muted);
}

.cert-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem !important;
  margin-top: 1rem !important;
}

.certs-section .cert-cards .card {
  min-height: 5.25rem;
  padding: 1.15rem;
  border-radius: 1.15rem;
  box-shadow: none;
}

@media (max-width: 768px) {
  :root {
    --type-section-title: 1.375rem;
  }

  .mashaer-cards,
  .quality-principles,
  .cert-cards {
    grid-template-columns: 1fr;
  }

  .mashaer-cards .card {
    min-height: 0;
  }

  .quality-section {
    width: calc(100% - 40px);
    padding-block: 1.75rem 2.5rem;
  }

  .quality-band {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 1.6rem;
  }

  .cert-group {
    padding: 1.1rem;
    border-radius: 1.4rem;
  }

  .certs-section .cert-cards .card {
    min-height: 4.5rem;
  }
}

/* content-v11.6: one heading system, balanced sectors, standard quality cards, unified certificates */
.hero h1,
html[dir='ltr'] .hero h1 {
  margin: 0 0 var(--space-title-copy);
  font-size: var(--hero-title-fit, var(--section-title-fit, var(--type-section-title))) !important;
  line-height: var(--leading-title-unified) !important;
  letter-spacing: 0;
  white-space: nowrap;
}

#sectors.split-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: clamp(2.5rem, 4vw, 4.25rem);
  align-items: center;
  width: min(1160px, calc(100% - 120px));
}

#sectors .text-block {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: none;
}

#sectors .sector-art {
  display: flex;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1;
}

#sectors .sector-cards {
  width: 100%;
  max-width: none;
}

#sectors .sector-cards .card {
  width: 100%;
  padding: 1.5rem 1.6rem;
}

#sectors .sector-cards .card .number {
  margin-bottom: 1.35rem;
}

#sectors .sector-cards .card h3 {
  margin-bottom: 0.75rem;
}

#sectors .sector-cards .card p {
  width: 100%;
  max-width: none;
}

@media (max-width: 900px) {
  #sectors.split-section {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: min(90vw, 960px);
  }

  #sectors .sector-art {
    width: 100%;
    aspect-ratio: 1;
  }
}

.quality-section {
  width: min(1160px, calc(100% - 120px));
  padding-block: 3rem;
}

.quality-band {
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  text-align: start;
  background: none;
  box-shadow: none;
}

.quality-copy {
  max-width: 56rem;
}

.quality-band .quality-copy .kicker {
  color: var(--sand);
}

.quality-band .quality-copy h2 {
  color: var(--ink) !important;
}

.quality-band .quality-copy > p:not(.kicker) {
  max-width: 52rem;
  color: var(--muted);
}

.quality-principles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: var(--space-copy-cards);
}

.quality-item.card {
  min-height: 11.5rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 1.55rem;
  background: var(--card);
  box-shadow: 0 1rem 2.25rem rgb(62 56 34 / 5%);
}

.quality-item .quality-mark {
  color: var(--ink);
  background: var(--ink);
}

.quality-item.card h3 {
  color: var(--ink);
}

.quality-band .quality-item.card p {
  color: var(--muted);
}

.cert-unified {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 980px;
  margin: 1rem auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  background: var(--card);
  box-shadow: 0 1rem 2.25rem rgb(62 56 34 / 5%);
}

.cert-list-block {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
}

.cert-list-block + .cert-list-block {
  border-inline-start: 1px solid var(--line);
}

.cert-list-block > h3 {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: var(--type-card-title);
  line-height: var(--leading-card-title);
}

.cert-list-block ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cert-list-block li {
  position: relative;
  padding: 0.8rem 1.25rem 0.8rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  color: var(--muted);
  font-size: var(--type-body);
  line-height: var(--leading-copy-unified);
}

html[dir='ltr'] .cert-list-block li {
  padding: 0.8rem 0 0.8rem 1.25rem;
}

.cert-list-block li:last-child {
  border-bottom: 0;
}

.cert-list-block li::before {
  position: absolute;
  top: 1.42rem;
  right: 0;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  content: '';
  background: var(--ink);
  transform: translateY(-50%);
}

html[dir='ltr'] .cert-list-block li::before {
  right: auto;
  left: 0;
}

@media (max-width: 768px) {
  #sectors.split-section,
  .quality-section {
    width: calc(100% - 40px);
  }

  #sectors .sector-cards .card {
    padding: 1.35rem;
  }

  #sectors .sector-cards .card .number {
    margin-bottom: 1.25rem;
  }

  .quality-section {
    padding-block: 2.5rem;
  }

  .quality-principles {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }

  .quality-item.card {
    min-height: 0;
    border-radius: 22px;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
  }

  .cert-unified {
    grid-template-columns: 1fr;
    border-radius: 1.45rem;
  }

  .cert-list-block {
    padding: 1.35rem;
  }

  .cert-list-block + .cert-list-block {
    border-top: 1px solid var(--line);
    border-inline-start: 0;
  }
}

/* content-v11.7: half-width desktop sectors, numbered quality, clean mobile section */
.form-honey {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.quality-section,
.quality-band {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.quality-section::before,
.quality-section::after,
.quality-band::before,
.quality-band::after {
  display: none !important;
  content: none !important;
}

.quality-item.card .number {
  margin-bottom: 1rem;
}

.quality-item.card h3 {
  margin-bottom: var(--space-card-title-copy);
}

@media (min-width: 769px) {
  #sectors .text-block {
    width: min(50%, 580px);
    margin-inline-end: auto;
  }
}

@media (max-width: 768px) {
  #sectors .text-block {
    width: 100%;
    margin: 0;
  }

  .quality-section {
    background: none !important;
  }

  .quality-band {
    min-height: 0;
    padding: 0 !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
  }
}

/* ui-balance-v1: unified hero rhythm and decisive button palette */
.btn {
  border-color: #3e3822;
  color: #fffaf2;
  background: #3e3822;
}

html[data-theme='dark'] .btn,
html[data-theme='dark'] .btn.primary,
html[data-theme='dark'] .btn:not(.primary) {
  border-color: #ead7bc;
  color: #3e3822;
  background: #ead7bc;
}

.hero-copy,
html[dir='ltr'] .hero-copy {
  width: min(52%, 680px);
  max-width: 680px;
}

.hero .kicker,
html[dir='ltr'] .hero .kicker {
  margin-bottom: 0.75rem;
  font-size: var(--type-kicker) !important;
  line-height: 1.45 !important;
}

.hero-sub,
html[data-theme='dark'] .hero-sub {
  max-width: 42rem;
  color: var(--muted);
  font-size: var(--type-body) !important;
  font-weight: 500;
  line-height: var(--leading-copy-unified) !important;
}

.hero-actions {
  gap: 0.65rem;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .hero-copy,
  html[dir='ltr'] .hero-copy {
    width: 100%;
    max-width: none;
  }
}

/* ui-balance-v1: align hero to the section axis and rebalance its artwork */
@media (min-width: 1051px) {
  .hero {
    padding-inline: max(10px, calc((min(1500px, calc(100vw - 32px)) - 1160px) / 2));
  }
}

@media (min-width: 769px) and (max-width: 1050px) {
  .hero {
    padding-inline: max(10px, calc(5vw - 14px));
  }
}

.hero-art,
html[dir='ltr'] .hero-art {
  width: min(50vw, 700px);
  height: 350px;
}

.hero-art {
  left: clamp(3rem, 8vw, 7rem);
}

html[dir='ltr'] .hero-art {
  right: clamp(3rem, 8vw, 7rem);
  left: auto;
}

@media (max-width: 768px) {
  .hero {
    padding-inline: 10px;
  }

  .hero-art,
  html[dir='ltr'] .hero-art {
    width: min(82vw, 330px);
    height: 245px;
  }

  .hero-art {
    left: clamp(2.5rem, 10vw, 3rem);
  }

  html[dir='ltr'] .hero-art {
    right: clamp(2.5rem, 10vw, 3rem);
    left: auto;
  }

  .chips span {
    display: flex;
    min-height: 3.75rem;
    padding: 0.65rem 0.75rem;
    align-items: center;
    justify-content: center;
    line-height: 1.45;
    text-align: center;
  }
}

/* reading-rail-v5: original Lama Sans, natural spacing, tuned semantic measures */
:where(
  .text-block > p:not(.kicker),
  .section-lead,
  .card > p,
  .concept-heading > p:not(.kicker),
  .journey-copy > p,
  .contact-section p,
  .footer-brand p
) {
  inline-size: 100%;
  max-inline-size: var(--copy-measure, 520px);
  margin-inline: 0;
  line-height: 1.8;
  word-spacing: normal;
  letter-spacing: normal;
  text-align: start;
  text-align-last: start;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

html[dir='rtl'] :where(
  .text-block > p:not(.kicker),
  .section-lead,
  .card > p,
  .concept-heading > p:not(.kicker),
  .journey-copy > p,
  .contact-section p,
  .footer-brand p
) { direction: rtl; }

html[dir='ltr'] :where(
  .text-block > p:not(.kicker),
  .section-lead,
  .card > p,
  .concept-heading > p:not(.kicker),
  .journey-copy > p,
  .contact-section p,
  .footer-brand p
) { direction: ltr; }

.card { --copy-measure: 40ch; }
.card > p,
.journey-copy > p,
.concept-heading > p:not(.kicker) {
  text-wrap: balance;
}


/* Direction remains document-aware; reading-rail-v5 controls prose rhythm. */
html[dir='rtl'] body {
  font-family: 'Lama Sans', sans-serif;
  line-height: 1.8;
}
html[dir='rtl'] body p { direction: rtl; }
html[dir='ltr'] body p { direction: ltr; }

/* bounded desktop and laptop rails */
@media (min-width: 1051px) {
  .section, .section-shell, .footer-grid, .footer-social, .footer-bottom {
    width: min(1200px, calc(100% - clamp(5rem, 8vw, 7.5rem)));
    max-width: 1200px;
  }
}

@media (min-width: 769px) and (max-width: 1050px) {
  .section, .section-shell, .footer-grid, .footer-social, .footer-bottom {
    width: min(92vw, 920px);
    max-width: 920px;
  }
}

.sector-featured {
  border-color: color-mix(in srgb, var(--sand) 55%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--sand) 10%, var(--paper)), var(--paper));
  box-shadow: 0 18px 42px rgb(62 56 34 / 9%);
}

.sector-featured .number { color: var(--sand); }

.sector-more {
  display: inline-flex;
  width: fit-content;
  margin-top: 1rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
  color: var(--sand);
  font-size: 0.78rem;
}

html[data-theme='dark'] .sector-featured {
  border-color: rgb(234 215 188 / 42%);
  background: linear-gradient(145deg, rgb(234 215 188 / 12%), rgb(234 215 188 / 5%));
  box-shadow: none;
}

html[data-theme='dark'] .sector-more { color: #ead7bc; }

/* Reset typography to Lama Sans with justified Arabic text */
html[dir='rtl'] body {
  font-family: 'Lama Sans', sans-serif;
  line-height: 1.8;
}

/* Arabic justified text blocks */
html[dir='rtl'] main :where(
  .text-block > p:not(.kicker),
  .section-lead,
  .concept-heading > p:not(.kicker),
  .contact-section .text-block > p:not(.kicker),
  .hero p,
  .section > p,
  .footer-brand p
) {
  text-align: justify;
  margin-inline: auto;
  max-width: 640px;
}

/* Headings and short text: center */
html[dir='rtl'] main :where(
  h1, h2, h3,
  .section > .kicker,
  .text-block > .kicker,
  .concept-heading > .kicker,
  .card h3,
  .card > p,
  .journey-copy h3,
  .journey-copy > p,
  .concept-heading h2,
  .concept-heading > p:not(.kicker)
) {
  text-align: center;
  margin-inline: auto;
}

/* Numbers in cards: center */
html[dir='rtl'] main .card .number {
  justify-content: center;
  margin-inline: auto;
}

/* final-preview-v1: comprehensive consistency pass */
:root {
  --section-rail: min(1160px, calc(100% - clamp(2.5rem, 8vw, 7.5rem)));
  --section-gap: clamp(3.25rem, 6vw, 5.25rem);
  --section-pad: clamp(2rem, 4vw, 3rem);
  --radius-section: 2rem;
  --radius-card: 1.35rem;
  --card-pad: clamp(1.25rem, 2vw, 1.55rem);
  --card-min: 12.25rem;
  --image-bg: radial-gradient(ellipse at center, rgb(255 250 242 / 76%) 0%, rgb(245 232 213 / 42%) 58%, transparent 84%);
  --type-section-title: clamp(1.85rem, 1.45rem + 1.25vw, 2.5rem);
  --type-card-title: clamp(1.02rem, 0.98rem + 0.18vw, 1.16rem);
  --type-body: clamp(0.93rem, 0.9rem + 0.14vw, 1rem);
  --type-kicker: clamp(0.76rem, 0.73rem + 0.12vw, 0.84rem);
}

html[dir='rtl'] body,
html[dir='ltr'] body {
  font-family: 'Lama Sans', 'Cairo', 'Tajawal', sans-serif;
  line-height: 1.8;
}
.footer-logo { display: inline-flex; align-items: center; justify-content: flex-start; }
.footer-brand .footer-logo-img {
  width: 168px;
  height: auto;
  max-width: 168px;
  max-height: 58px;
  margin: 0 0 0.75rem;
  object-fit: contain;
}

main > .section:not(.hero),
#about.split-section,
#sectors.split-section,
.quality-section,
.certs-section,
.contact-section {
  width: var(--section-rail) !important;
  max-width: 1160px;
  margin-inline: auto;
  padding-block: var(--section-gap);
}

.hero {
  width: min(1200px, calc(100% - 2rem));
  min-height: clamp(32rem, 48vw, 39rem);
  padding-inline: var(--section-pad);
  padding-block: clamp(3.75rem, 7vw, 5.25rem);
}
.hero-copy,
html[dir='ltr'] .hero-copy { width: min(54%, 650px); max-width: 650px; margin-inline-end: auto; }
.hero-art,
html[dir='ltr'] .hero-art { width: min(48vw, 620px); height: clamp(18rem, 29vw, 22rem); top: clamp(13.5rem, 23vw, 17.5rem); }
.hero-art { left: clamp(2rem, 6vw, 5rem); }
html[dir='ltr'] .hero-art { right: clamp(2rem, 6vw, 5rem); left: auto; }

/* One text system: no forced justification, no random centering. */
html[dir='rtl'] main :where(h1,h2,h3,p,.kicker,.section-lead,.card > p,.concept-heading > p:not(.kicker),.footer-brand p),
html[dir='ltr'] main :where(h1,h2,h3,p,.kicker,.section-lead,.card > p,.concept-heading > p:not(.kicker),.footer-brand p) {
  text-align: start !important;
  text-align-last: start !important;
  margin-inline: 0 !important;
}
main > .section h2,
.hero h1,
html[dir='ltr'] .hero h1 {
  max-width: 760px;
  margin: 0 0 1rem !important;
  color: var(--ink);
  font-size: var(--section-title-fit, var(--type-section-title)) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-wrap: balance;
}
main > .section .kicker,
.hero .kicker,
html[dir='ltr'] .hero .kicker {
  margin-bottom: 0.75rem !important;
  color: var(--sand);
  font-size: var(--type-kicker) !important;
  line-height: 1.45 !important;
}
main > .section :where(.section-lead, .text-block > p:not(.kicker), .concept-heading > p:not(.kicker), .contact-section p),
.hero-sub,
.footer-brand p {
  max-width: 640px !important;
  color: var(--muted);
  font-size: var(--type-body) !important;
  line-height: 1.82 !important;
  text-wrap: pretty;
}

.cards,
#services .five-cards,
.sector-cards,
.mashaer-cards,
.quality-principles {
  display: grid;
  gap: 1rem !important;
  margin-top: 2rem !important;
}
#services .five-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sector-cards, .mashaer-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card,
.quality-item.card,
.planner-step {
  min-width: 0;
  min-height: var(--card-min);
  padding: var(--card-pad) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: color-mix(in srgb, var(--paper) 86%, transparent) !important;
  box-shadow: 0 1rem 2.4rem rgb(62 56 34 / 5%) !important;
  backdrop-filter: none !important;
}
.card h3,
main > .section .card h3,
main > .section .mashaer-cards .card h3 {
  margin: 0 0 0.75rem !important;
  color: var(--ink) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.42 !important;
  text-align: start !important;
}
.card > p,
main > .section .card p,
main > .section .mashaer-cards .card p {
  max-width: none !important;
  color: var(--muted) !important;
  font-size: var(--type-body) !important;
  line-height: 1.75 !important;
  text-align: start !important;
  text-wrap: pretty !important;
}
.number,
main > .section .card .number,
html[dir='rtl'] main .card .number {
  justify-content: flex-start !important;
  width: 100%;
  margin: 0 0 1.05rem !important;
  gap: 0.62rem;
}
.num-icon { width: 1.85rem; height: 1.85rem; flex-basis: 1.85rem; color: var(--ink); }
.num-separator { height: 1.85rem; }
.num-value { min-width: 1.1rem; color: var(--ink); font-size: 1.05rem; }

.split-section,
#sectors.split-section,
.mashaer-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.88fr) !important;
  gap: clamp(2rem, 5vw, 4rem) !important;
  align-items: center;
}
#about.split-section { display: block; }
#sectors .text-block { width: auto !important; max-width: none; margin-inline-end: 0 !important; }
#sectors .sector-art,
.sector-art,
.mashaer-art {
  display: flex !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1 / 0.92;
  border-radius: var(--radius-section);
  background: var(--image-bg);
  transform: none !important;
}
.mashaer-art { aspect-ratio: 1.25 / 0.8; }
.media-soft img { opacity: 0.86; filter: contrast(0.98) saturate(0.9); }
.sector-art img { width: 100%; max-width: 100%; }

.journey-section .concept-heading,
.concept-planner .concept-heading,
.certs-section > .kicker,
.certs-section > h2,
.contact-section .text-block { max-width: 760px; margin-inline: 0; text-align: start; }
.journey-player { border-radius: var(--radius-section); }
.journey-slides, .journey-slides > li { min-height: 11rem; }
.planner-shell { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); gap: 1rem; }
.planner-controls { gap: 1rem; }
.planner-step { min-height: auto; }
.planner-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.planner-chip { width: 100%; min-height: 2.65rem; text-align: center; }
.certs-section { padding-top: clamp(2.5rem, 5vw, 4rem) !important; }
.cert-unified { margin: 2rem 0 0; max-width: 100%; border-radius: var(--radius-card); }

.contact-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.site-footer {
  margin-top: 0;
  padding-block: clamp(2.25rem, 5vw, 3.5rem) calc(1.25rem + env(safe-area-inset-bottom));
  background: linear-gradient(145deg, var(--footer), var(--footer-2));
}
.footer-grid {
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(10rem, 0.72fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
.footer-brand { max-width: 22rem; }
.footer-col { gap: 0.65rem; }
.footer-col h3 { margin-bottom: 0.25rem; font-size: 0.98rem; }
.footer-col a,
.footer-col span,
.footer-brand p { color: color-mix(in srgb, var(--footer-text) 86%, transparent); font-size: 0.86rem; line-height: 1.75; }
.footer-actions-col a {
  width: fit-content;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--footer-text) 28%, transparent);
}
.footer-social { justify-content: flex-start; padding-top: 1.25rem; }
.social-icons { justify-content: flex-start; gap: 0.55rem; width: auto; }
.footer-bottom { margin-top: 1rem; }

html[data-theme='dark'] .card,
html[data-theme='dark'] .quality-item.card,
html[data-theme='dark'] .planner-step {
  background: color-mix(in srgb, var(--paper) 88%, transparent) !important;
  box-shadow: none !important;
}
html[data-theme='dark'] .media-soft { background: radial-gradient(ellipse at center, rgb(234 215 188 / 9%) 0%, rgb(234 215 188 / 4%) 58%, transparent 84%); }

@media (max-width: 1050px) {
  main > .section:not(.hero), #about.split-section, #sectors.split-section, .certs-section, .contact-section { width: min(92vw, 920px) !important; }
  .split-section, #sectors.split-section, .mashaer-section { grid-template-columns: 1fr !important; }
  #sectors .sector-art, .sector-art, .mashaer-art { aspect-ratio: 1.6 / 0.85; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root {
    --section-rail: calc(100% - 2.5rem);
    --section-gap: 2.75rem;
    --card-min: 0;
    --type-section-title: clamp(1.45rem, 1.2rem + 1.05vw, 1.7rem);
    --type-body: 0.92rem;
  }
  .hero {
    width: calc(100% - 1.25rem);
    min-height: 31rem;
    padding: 2.25rem 1.25rem 1.25rem;
  }
  .hero-copy, html[dir='ltr'] .hero-copy { width: 100%; }
  .hero-art, html[dir='ltr'] .hero-art {
    top: auto;
    bottom: 0.6rem;
    left: 50%;
    right: auto;
    width: min(82vw, 21rem);
    height: 13.75rem;
    transform: translateX(-50%) !important;
  }
  .hero-actions { flex-direction: row; width: 100%; gap: 0.55rem; }
  .hero-actions .btn { flex: 1 1 0; width: auto; min-width: 0; height: 2.85rem; padding-inline: 0.6rem; font-size: 0.76rem; }
  main > .section h2, .hero h1, html[dir='ltr'] .hero h1 { max-width: 100%; }
  .cards, #services .five-cards, .sector-cards, .mashaer-cards, .quality-principles { grid-template-columns: 1fr !important; gap: 0.85rem !important; margin-top: 1.45rem !important; }
  .card, .quality-item.card, .planner-step { padding: 1.05rem !important; border-radius: 1.15rem !important; }
  .number, main > .section .card .number, html[dir='rtl'] main .card .number { margin-bottom: 0.85rem !important; }
  #sectors .sector-art, .sector-art, .mashaer-art { aspect-ratio: 1.3 / 0.82; border-radius: 1.35rem; }
  .planner-shell { grid-template-columns: 1fr; }
  .planner-options { grid-template-columns: 1fr 1fr; }
  .planner-chip { font-size: 0.76rem; }
  .cert-unified { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1rem; }
  .footer-brand .footer-logo-img { width: 142px; max-width: 142px; max-height: 50px; }
  .footer-social, .social-icons { justify-content: flex-start; }
  .footer-bottom { justify-content: flex-start; text-align: start; }
  .footer-bottom span { white-space: normal; }
}

@media (max-width: 380px) {
  .planner-options { grid-template-columns: 1fr; }
  .hero-actions { grid-template-columns: 1fr; flex-direction: column; }
  .hero-actions .btn { width: 100%; }
}

/* final-preview-v2: premium correction after laptop review */
:root {
  --premium-line: color-mix(in srgb, var(--ink) 13%, transparent);
  --premium-soft: color-mix(in srgb, var(--paper) 72%, transparent);
  --premium-card: color-mix(in srgb, var(--paper) 80%, transparent);
}

/* Services: 3 + centered 2, no orphaned lower cards */
#services .five-cards {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: stretch;
}
#services .five-cards > .card { grid-column: span 2; }
#services .five-cards > .card:nth-child(4) { grid-column: 2 / span 2; }
#services .five-cards > .card:nth-child(5) { grid-column: 4 / span 2; }

/* A cleaner premium card language: calmer, same rhythm, less boxed/noisy */
.card,
.quality-item.card,
.planner-step {
  border-color: var(--premium-line) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 88%, transparent), color-mix(in srgb, var(--paper-soft) 42%, transparent)) !important;
  box-shadow: 0 0.75rem 1.8rem rgb(62 56 34 / 4%) !important;
}

/* Business sectors and Holy Sites: not ugly boxes — a structured premium list beside the artwork */
#sectors.split-section,
.mashaer-section {
  grid-template-columns: minmax(0, 0.96fr) minmax(24rem, 1.04fr) !important;
  gap: clamp(2.25rem, 4vw, 3.5rem) !important;
  align-items: center !important;
}
html[dir='rtl'] #sectors .text-block,
html[dir='rtl'] .mashaer-section .text-block { grid-column: 1; }
html[dir='rtl'] #sectors .sector-art,
html[dir='rtl'] .mashaer-section .mashaer-art { grid-column: 2; grid-row: 1; }
html[dir='ltr'] #sectors .text-block,
html[dir='ltr'] .mashaer-section .text-block { grid-column: 1; }
html[dir='ltr'] #sectors .sector-art,
html[dir='ltr'] .mashaer-section .mashaer-art { grid-column: 2; grid-row: 1; }

#sectors .sector-cards,
.mashaer-cards {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin-top: 1.55rem !important;
  border-block: 1px solid var(--premium-line);
}
#sectors .sector-cards .card,
.mashaer-cards .card {
  display: grid !important;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  min-height: 0 !important;
  padding: 1rem 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#sectors .sector-cards .card + .card,
.mashaer-cards .card + .card { border-top: 1px solid var(--premium-line) !important; }
#sectors .sector-cards .card .number,
.mashaer-cards .card .number {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: start;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding-top: 0.2rem;
}
#sectors .sector-cards .card h3,
#sectors .sector-cards .card p,
#sectors .sector-cards .sector-more,
.mashaer-cards .card h3,
.mashaer-cards .card p {
  grid-column: 2;
}
#sectors .sector-cards .card h3,
.mashaer-cards .card h3 { margin-bottom: 0.35rem !important; }
#sectors .sector-cards .card p,
.mashaer-cards .card p { line-height: 1.65 !important; }
.sector-featured {
  background: transparent !important;
  border-color: transparent !important;
}
.sector-more { margin-top: 0.55rem; font-size: 0.78rem; }

#sectors .sector-art,
.sector-art,
.mashaer-art {
  min-height: clamp(20rem, 34vw, 28rem) !important;
  aspect-ratio: 1.25 / 1 !important;
  border: 0 !important;
  background: radial-gradient(ellipse at center, rgb(255 250 242 / 34%) 0%, transparent 70%) !important;
}
.mashaer-art { min-height: clamp(17rem, 26vw, 22rem) !important; aspect-ratio: 1.55 / 1 !important; }
#sectors .sector-art img,
.sector-art img { width: 108% !important; max-width: none !important; opacity: 0.9; }
.mashaer-art img { width: 112% !important; max-width: none !important; opacity: 0.9; }

/* Journey: remove the heavy empty cinema block */
.journey-section { padding-block: clamp(2.5rem, 5vw, 4rem) !important; }
.journey-section .concept-heading { margin-bottom: 1.25rem !important; }
.journey-player {
  max-width: 920px;
  margin-inline: 0;
  border-radius: 1.35rem !important;
  background: linear-gradient(135deg, #3e3822, #292414) !important;
}
.journey-viewport { padding: clamp(1rem, 2.4vw, 1.55rem) !important; }
.journey-slides,
.journey-slides > li { min-height: 7.25rem !important; }
.journey-copy {
  max-width: 34rem !important;
  padding-inline: 0 !important;
}
.journey-copy h3 {
  margin-block: 0.35rem 0.45rem !important;
  font-size: clamp(1.45rem, 2.5vw, 2.2rem) !important;
}
.journey-copy p { max-width: 28rem !important; line-height: 1.65 !important; }
.journey-controls { margin-top: 0.65rem; }

/* Planner: no huge dark column and no stretched ugly buttons */
.concept-planner { padding-block: clamp(2.75rem, 5vw, 4.25rem) !important; }
.concept-planner .concept-heading { margin-bottom: 1.35rem !important; }
.planner-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1rem !important;
}
.planner-controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem !important;
}
.planner-step {
  min-height: 0 !important;
  padding: 1rem !important;
  border-radius: 1.15rem !important;
}
.planner-step legend {
  margin-bottom: 0.7rem !important;
  font-size: 0.95rem;
}
.planner-options {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.45rem !important;
}
.planner-chip {
  width: auto !important;
  min-height: 2.15rem !important;
  padding: 0.42rem 0.78rem !important;
  border-color: color-mix(in srgb, var(--ink) 18%, transparent) !important;
  background: color-mix(in srgb, var(--paper) 76%, transparent) !important;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
}
.planner-chip.is-active {
  border-color: #3e3822 !important;
  background: #3e3822 !important;
  color: #fffaf2 !important;
}

/* Footer: make logo obvious and clean */
.site-footer { padding-top: 3rem !important; }
.footer-brand .footer-logo-img {
  width: 230px !important;
  max-width: 230px !important;
  max-height: 72px !important;
}
.footer-brand { max-width: 25rem !important; }
.footer-brand p { margin-top: 0.9rem !important; color: rgb(255 248 236 / 86%) !important; }
.footer-col h3 { color: #fff8ec !important; }
.footer-col a,
.footer-col span { color: rgb(255 248 236 / 82%) !important; }
html[data-theme='dark'] .footer-brand p,
html[data-theme='dark'] .footer-col a,
html[data-theme='dark'] .footer-col span { color: rgb(62 56 34 / 82%) !important; }
html[data-theme='dark'] .footer-col h3 { color: #3e3822 !important; }

@media (max-width: 1050px) {
  #services .five-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #services .five-cards > .card,
  #services .five-cards > .card:nth-child(4),
  #services .five-cards > .card:nth-child(5) { grid-column: auto !important; }
  #services .five-cards > .card:nth-child(5) { grid-column: 1 / -1 !important; max-width: min(100%, 28rem); justify-self: center; }
  #sectors.split-section,
  .mashaer-section { grid-template-columns: 1fr !important; }
  html[dir='rtl'] #sectors .text-block,
  html[dir='rtl'] .mashaer-section .text-block,
  html[dir='rtl'] #sectors .sector-art,
  html[dir='rtl'] .mashaer-section .mashaer-art,
  html[dir='ltr'] #sectors .text-block,
  html[dir='ltr'] .mashaer-section .text-block,
  html[dir='ltr'] #sectors .sector-art,
  html[dir='ltr'] .mashaer-section .mashaer-art { grid-column: 1; }
  #sectors .sector-art,
  .sector-art,
  .mashaer-art { min-height: 18rem !important; aspect-ratio: 1.65 / 0.9 !important; }
}

@media (max-width: 768px) {
  #services .five-cards { grid-template-columns: 1fr !important; }
  #services .five-cards > .card:nth-child(5) { grid-column: auto !important; max-width: none; }
  #sectors .sector-cards .card,
  .mashaer-cards .card { grid-template-columns: 3.15rem minmax(0, 1fr); padding-block: 0.9rem !important; }
  #sectors .sector-art,
  .sector-art,
  .mashaer-art { min-height: 13.5rem !important; aspect-ratio: 1.4 / 0.86 !important; }
  .journey-slides,
  .journey-slides > li { min-height: 8.5rem !important; }
  .journey-controls { gap: 0.5rem; }
  .planner-controls { grid-template-columns: 1fr !important; }
  .planner-chip { flex: 1 1 calc(50% - 0.5rem); }
  .footer-brand .footer-logo-img { width: 190px !important; max-width: 190px !important; max-height: 60px !important; }
}


/* final-preview-v2.1: mobile planner tightening */
@media (max-width: 768px) {
  .concept-planner { padding-block: 2.25rem !important; }
  .planner-controls { gap: 0.7rem !important; }
  .planner-step { padding: 0.85rem !important; }
  .planner-step legend { margin-bottom: 0.5rem !important; font-size: 0.86rem; }
  .planner-options { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.38rem !important; }
  .planner-chip { width: 100% !important; min-height: 2rem !important; padding: 0.35rem 0.45rem !important; font-size: 0.7rem !important; }
}
@media (max-width: 340px) {
  .planner-options { grid-template-columns: 1fr !important; }
}


/* final-preview-v2.2: fix mobile/laptop split ordering and footer logo contrast */
.footer-brand .footer-logo-img {
  opacity: 1 !important;
  filter: brightness(1.18) contrast(1.08) drop-shadow(0 2px 10px rgb(0 0 0 / 18%)) !important;
}
html[data-theme='dark'] .footer-brand .footer-logo-img {
  filter: none !important;
}
@media (max-width: 1050px) {
  #sectors .text-block,
  .mashaer-section .text-block {
    grid-row: 1 !important;
  }
  #sectors .sector-art,
  .mashaer-section .mashaer-art {
    grid-row: 2 !important;
  }
}
@media (max-width: 768px) {
  #sectors .sector-art,
  .mashaer-section .mashaer-art {
    margin-top: 1.2rem;
    margin-bottom: 0.25rem;
  }
  .mashaer-section .mashaer-art {
    margin-top: 1.5rem;
  }
  .footer-brand .footer-logo-img {
    width: 220px !important;
    max-width: 220px !important;
    max-height: 68px !important;
    margin-inline: auto !important;
  }
  .footer-brand { align-items: center !important; text-align: center; }
  .footer-brand p { text-align: center !important; }
}


/* final-preview-v2.3: keep artwork strictly inside very small screens */
@media (max-width: 350px) {
  #sectors .sector-art,
  .sector-art,
  .mashaer-art {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 12rem !important;
    justify-self: stretch !important;
    margin-inline: 0 !important;
    overflow: hidden !important;
  }
  #sectors .sector-art img,
  .sector-art img,
  .mashaer-art img {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* final-preview-v3: institutional homepage restructure */
.hero { min-height: clamp(31rem, 43vw, 38rem); }
.hero-art { top: clamp(10rem, 18vw, 15rem) !important; width: min(46vw, 620px) !important; height: clamp(20rem, 30vw, 24rem) !important; }
.hero h1 { max-width: 660px; }
.hero-actions { flex-direction: row !important; width: auto !important; }
.hero-actions .btn { width: auto !important; min-width: 10rem !important; }
.services-feature { padding-block: clamp(3rem, 6vw, 5rem) !important; }
.service-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; margin-top: 2rem; border-block: 1px solid var(--line); }
.service-strip article { min-height: 8.25rem; padding: 1.25rem 1rem; border-inline-start: 1px solid var(--line); }
html[dir='ltr'] .service-strip article { border-inline-start: 0; border-inline-end: 1px solid var(--line); }
.service-strip article:last-child { border-inline-start: 0; }
.service-strip span { display:block; margin-bottom: 1rem; color: var(--sand); font-size: .82rem; direction:ltr; }
.service-strip h3 { margin: 0; color: var(--ink); font-size: clamp(.98rem,.92rem + .22vw,1.12rem); line-height: 1.5; }
.read-more { display: inline-flex; margin-top: 1.1rem; padding-bottom: .2rem; border-bottom: 1px solid currentColor; color: var(--ink); }
.detail-hero { display: grid; grid-template-columns: minmax(0,.95fr) minmax(22rem,1.05fr); gap: clamp(2rem,5vw,4rem); align-items: center; padding-top: clamp(4rem,7vw,6rem) !important; }
.detail-copy h1 { margin: 0 0 1rem; color: var(--ink); font-size: clamp(2rem,1.55rem + 1.35vw,2.8rem); line-height: 1.25; }
.detail-copy p:not(.kicker) { max-width: 42rem; color: var(--muted); }
.detail-art { min-height: clamp(18rem,30vw,25rem); background: transparent !important; }
.detail-art img { width: 100%; height: 100%; object-fit: contain; opacity: .9; mix-blend-mode: multiply; }
.detail-list { padding-top: 0 !important; }
.detail-list ol { display: grid; gap: 0; margin: 0 0 2rem; padding: 0; list-style: none; border-block: 1px solid var(--line); }
.detail-list li { display: grid; grid-template-columns: 4rem minmax(0,1fr); gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.detail-list li:last-child { border-bottom: 0; }
.detail-list li span { color: var(--sand); direction: ltr; }
.detail-list li p { margin: 0 !important; max-width: 52rem !important; }
.site-footer { background: linear-gradient(145deg, #ead7bc, #f7ead8) !important; color: #3e3822 !important; border-top: 1px solid rgb(62 56 34 / 14%); }
.footer-brand .footer-logo-light { display:block !important; }
.footer-brand .footer-logo-dark { display:none !important; }
.footer-brand p, .footer-col a, .footer-col span { color: rgb(62 56 34 / 78%) !important; }
.footer-col h3, .footer-bottom, .social-link { color: #3e3822 !important; }
.social-link { border-color: rgb(62 56 34 / 26%) !important; background: rgb(62 56 34 / 4%) !important; }
html[data-theme='dark'] .media-soft,
html[data-theme='dark'] .detail-art,
html[data-theme='dark'] #sectors .sector-art,
html[data-theme='dark'] .mashaer-art { background: transparent !important; }
html[data-theme='dark'] .media-soft::after { opacity: .72 !important; background: #d9c49b !important; }
html[data-theme='dark'] .media-soft img, html[data-theme='dark'] .detail-art img { opacity: .68 !important; mix-blend-mode: normal !important; filter: sepia(.12) saturate(.82) brightness(1.12) !important; }
@media (max-width: 1050px){.service-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.service-strip article:nth-child(5){grid-column:1/-1}.detail-hero{grid-template-columns:1fr}.detail-art{min-height:16rem} }
@media (max-width:768px){ .hero{min-height:30rem}.hero-actions{width:100% !important}.service-strip{grid-template-columns:1fr}.service-strip article{min-height:0;border-inline:0!important;border-top:1px solid var(--line);padding:1rem 0}.detail-list li{grid-template-columns:3rem 1fr}.footer-brand .footer-logo-img{width:235px!important;max-width:235px!important;max-height:72px!important} }


/* final-preview-v3.1: keep accessibility skip link hidden until keyboard focus */
.skip-link:not(:focus):not(:focus-visible) {
  inset-block-start: 0 !important;
  transform: translateY(-220%) !important;
}
.skip-link:focus,
.skip-link:focus-visible {
  inset-block-start: 12px !important;
  transform: translateY(0) !important;
}


/* final-preview-v4: user-directed section gates and planner return */
.read-more { align-items: center; gap: .5rem; margin-top: .8rem !important; color: var(--olive) !important; font-weight: 700; border-bottom-color: color-mix(in srgb, var(--olive) 45%, transparent) !important; }
.read-more::after { content: '←'; font-weight: 400; }
.home-planner { padding-block: clamp(2.5rem, 5vw, 4.5rem) !important; }
.home-planner .concept-heading { display: grid; grid-template-columns: minmax(0, .55fr) minmax(16rem, .45fr); gap: 1.5rem; align-items: end; margin-bottom: 1.25rem; }
.home-planner .concept-heading p:not(.kicker) { margin: 0 !important; max-width: 36rem !important; }
.home-planner .planner-shell { background: color-mix(in srgb, var(--paper) 84%, transparent) !important; border: 1px solid color-mix(in srgb, var(--olive) 13%, transparent) !important; box-shadow: none !important; }
.site-footer { background: linear-gradient(135deg, var(--olive), color-mix(in srgb, var(--olive) 72%, #000 28%)) !important; color: var(--beige) !important; }
.footer-brand .footer-logo-light { display: none !important; }
.footer-brand .footer-logo-dark { display: block !important; }
.footer-brand p, .footer-col a, .footer-col span { color: color-mix(in srgb, var(--beige) 78%, transparent) !important; }
.footer-col h3, .footer-bottom, .social-link { color: var(--beige) !important; }
.social-link { border-color: color-mix(in srgb, var(--beige) 24%, transparent) !important; background: color-mix(in srgb, var(--beige) 7%, transparent) !important; }
.detail-art img { max-width: 360px; margin-inline: auto; }
@media (max-width: 1050px){
  .home-planner .concept-heading { grid-template-columns: 1fr; }
}


/* final-preview-v4.1: fix real site variables and RTL visual placement */
.read-more { color: var(--footer) !important; border-bottom-color: color-mix(in srgb, var(--footer) 45%, transparent) !important; }
.home-planner .planner-shell { border-color: color-mix(in srgb, var(--footer) 13%, transparent) !important; }
.site-footer { background: linear-gradient(135deg, var(--footer), var(--footer-2)) !important; color: var(--footer-text) !important; }
.footer-brand p, .footer-col a, .footer-col span { color: var(--footer-muted) !important; }
.footer-col h3, .footer-bottom, .social-link { color: var(--footer-text) !important; }
.social-link { border-color: color-mix(in srgb, var(--footer-text) 24%, transparent) !important; background: color-mix(in srgb, var(--footer-text) 7%, transparent) !important; }


/* final-preview-v4.2: execution ticker no clipped text */


/* final-preview-v4.3: preserve approved copy, Arabic numbering, original sector artwork, beige footer logo */
.footer-brand .footer-logo-img { filter: none !important; opacity: 1 !important; }
.footer-brand .footer-logo-light { display: block !important; }
.footer-brand .footer-logo-dark { display: none !important; }
.detail-art img[src*="sector-architectural"], .detail-art img[src*="mina_panorama"] { max-width: 560px !important; }
html[data-theme='dark'] .detail-art img[src*="sector-architectural"],
html[data-theme='dark'] .detail-art img[src*="mina_panorama"] { filter: none !important; opacity: .82 !important; mix-blend-mode: normal !important; }


/* final-preview-v4.4: institutional image/text balance and premium detail pages */
.read-more { width: fit-content; margin-top: .95rem !important; }

.premium-detail-hero {
  grid-template-columns: minmax(0, .62fr) minmax(22rem, .38fr) !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
  align-items: center !important;
  border-bottom: 1px solid color-mix(in srgb, var(--footer) 14%, transparent);
}
.premium-detail-hero .detail-copy {
  padding-inline-end: clamp(1.3rem, 2.6vw, 2.2rem);
  border-inline-end: 1px solid color-mix(in srgb, var(--footer) 20%, transparent);
}
.premium-detail-hero .detail-art {
  min-height: clamp(18rem, 28vw, 24rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.premium-detail-hero .detail-art img {
  width: 100% !important;
  max-width: 30rem !important;
  height: clamp(16rem, 25vw, 22rem) !important;
  object-fit: contain !important;
}
.premium-detail-hero .detail-art img[src*="mina_panorama"] { max-width: 33rem !important; height: clamp(13rem, 20vw, 17rem) !important; }
.premium-detail-list { padding-top: clamp(2.5rem, 5vw, 4rem) !important; }
.detail-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
  margin-bottom: 2rem;
}
.detail-card {
  min-height: 12rem;
  display: grid;
  grid-template-rows: auto auto 1fr;
  padding: clamp(1.25rem, 2vw, 1.65rem) !important;
  border: 1px solid color-mix(in srgb, var(--footer) 14%, transparent) !important;
  background: color-mix(in srgb, var(--paper) 82%, transparent) !important;
  box-shadow: 0 18px 48px rgb(31 29 18 / 5%) !important;
}
.detail-card .number { margin-bottom: .95rem !important; }
.detail-card h3 { margin: 0 0 .65rem !important; color: var(--ink); font-size: clamp(1.08rem, 1rem + .25vw, 1.22rem); }
.detail-card p { margin: 0 !important; color: var(--muted); line-height: 1.85 !important; }
html[data-theme='dark'] .premium-detail-hero .detail-art img { filter: none !important; opacity: .9 !important; mix-blend-mode: normal !important; }
@media (max-width: 1050px){
  .premium-detail-hero { grid-template-columns: 1fr !important; }
  .premium-detail-hero .detail-copy { border-inline-end: 0; padding-inline-end: 0; }
  .detail-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .premium-detail-hero .detail-art { min-height: 13rem !important; }
  .premium-detail-hero .detail-art img,
  .premium-detail-hero .detail-art img[src*="mina_panorama"] { height: 12rem !important; max-width: 100% !important; }
  .detail-card { min-height: 0; }
}


/* final-preview-v4.5: divider must sit between text and image, and detail pages mirror approved gateway balance */
.premium-detail-hero { direction: ltr !important; grid-template-columns: minmax(0, .58fr) minmax(24rem, .42fr) !important; }
.premium-detail-hero .detail-copy {
  direction: rtl !important;
  grid-column: 1 !important;
  border-inline-end: 0 !important;
  border-inline-start: 1px solid color-mix(in srgb, var(--footer) 20%, transparent) !important;
  padding-inline-end: 0 !important;
  padding-inline-start: clamp(1.2rem, 2.4vw, 2rem) !important;
}
.premium-detail-hero .detail-art { grid-column: 2 !important; grid-row: 1 !important; justify-content: flex-end !important; }
.premium-detail-hero .detail-art img { max-width: 34rem !important; }
.premium-detail-hero .detail-art img[src*="sector-architectural"] { max-width: 36rem !important; height: clamp(18rem, 27vw, 24rem) !important; }
.premium-detail-hero .detail-art img[src*="mina_panorama"] { max-width: 36rem !important; height: clamp(13.5rem, 21vw, 18rem) !important; }
.detail-card-grid { align-items: stretch; }
.detail-card .number { display: flex !important; align-items: center !important; gap: .7rem !important; }
.detail-card .num-value { font-size: 1.15rem !important; color: var(--footer) !important; }
@media (max-width: 1050px){
  .premium-detail-hero { grid-template-columns: 1fr !important; }
  .premium-detail-hero .detail-copy { grid-column: 1 !important; grid-row: 2 !important; border-inline-start: 0 !important; padding-inline-start: 0 !important; }
  .premium-detail-hero .detail-art { grid-column: 1 !important; grid-row: 1 !important; justify-content: center !important; }
}


/* final-preview-v4.6: user-required hero proximity, ordered gates, one-line headings, execution/planner contrast */
.hero.section-shell {
  grid-template-columns: minmax(26rem, .54fr) minmax(24rem, .46fr) !important;
  gap: clamp(.65rem, 1.8vw, 1.65rem) !important;
  align-items: center !important;
}
.hero-art { justify-self: start !important; transform: translateX(clamp(-1.1rem, -1.2vw, -.35rem)); }
.hero-copy { justify-self: end !important; max-width: 36rem !important; }
.hero-copy h1 { white-space: nowrap !important; font-size: clamp(2rem, 2.6vw, 3.15rem) !important; }
.hero-sub { white-space: nowrap !important; }

.home-planner .planner-shell {
  background: #fff8ec !important;
  border: 1px solid rgb(62 56 34 / 18%) !important;
  box-shadow: 0 24px 70px rgb(31 29 18 / 8%) !important;
}
.home-planner .planner-step { background: #ffffff !important; border-color: rgb(62 56 34 / 12%) !important; }
.home-planner .planner-step legend { color: #3e3822 !important; font-weight: 700 !important; }
.home-planner .planner-chip { background: rgb(62 56 34 / 4%) !important; color: #3e3822 !important; border-color: rgb(62 56 34 / 16%) !important; }
.home-planner .planner-chip.is-active { background: #3e3822 !important; color: #fff8ec !important; }
.home-planner .planner-eyebrow { color: rgb(234 215 188 / 75%) !important; }

@media (max-width: 1050px){
  .hero.section-shell { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .hero-art { transform: none; justify-self: center !important; }
  .hero-copy { justify-self: center !important; }
}
@media (max-width: 768px){
  .hero-copy h1, .hero-sub { white-space: normal !important; }
}


/* final-preview-v4.6.1: force desktop/laptop gateway headings onto one line */


/* final-preview-v4.6.2: bring hero text and artwork into one institutional block */
@media (min-width: 1051px){
  .hero.section-shell {
    max-width: min(1120px, calc(100vw - 5rem)) !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(30rem, .48fr) minmax(30rem, .52fr) !important;
    gap: clamp(.35rem, 1vw, 1rem) !important;
    justify-content: center !important;
  }
  .hero-art {
    justify-self: end !important;
    transform: translateX(clamp(4.5rem, 6vw, 7rem)) translateY(1.2rem) !important;
    z-index: 0;
  }
  .hero-art img { width: min(38vw, 34rem) !important; }
  .hero-copy {
    justify-self: start !important;
    transform: translateX(clamp(-3rem, -3vw, -1.4rem)) !important;
    z-index: 1;
  }
}


/* final-preview-v4.6.3: reduce hero dead space and align artwork with copy vertically */
@media (min-width: 1051px){
  .hero.section-shell {
    min-height: clamp(31rem, 42vw, 38rem) !important;
    padding-top: clamp(7rem, 10vw, 9rem) !important;
    padding-bottom: clamp(3rem, 5vw, 4rem) !important;
  }
  .hero-art {
    align-self: center !important;
    transform: translateX(clamp(5.8rem, 7.2vw, 8.4rem)) translateY(-.85rem) !important;
  }
  .hero-copy {
    align-self: center !important;
    transform: translateX(clamp(-4.2rem, -4.2vw, -2.2rem)) translateY(-.85rem) !important;
  }
}


/* final-preview-v4.7: apply supplied identity/system fixes without replacing approved Meras copy */
:root {
  --c-olive: #3E3822;
  --c-beige: #EAD7BC;
  --c-light-bg: #FFF8EC;
  --c-text-dark: #1F1D12;
  --c-text-gray: #6F6657;
  --bg-main: var(--paper, var(--c-light-bg));
  --text-main: var(--ink, var(--c-text-dark));
  --text-muted: var(--muted, var(--c-text-gray));
  --bg-surface: var(--surface, #FFFFFF);
  --border-color: rgba(62, 56, 34, 0.1);
  --btn-bg: var(--c-olive);
  --btn-text: var(--c-beige);
}
html[data-theme="light"] {
  --bg-main: var(--c-light-bg);
  --text-main: var(--c-text-dark);
  --text-muted: var(--c-text-gray);
  --bg-surface: #FFFFFF;
  --border-color: rgba(62, 56, 34, 0.1);
  --btn-bg: var(--c-olive);
  --btn-text: var(--c-beige);
  --paper: var(--c-light-bg);
  --ink: var(--c-text-dark);
  --muted: var(--c-text-gray);
  --surface: #FFFFFF;
}
html[data-theme="dark"] {
  --bg-main: var(--c-olive);
  --text-main: var(--c-light-bg);
  --text-muted: var(--c-beige);
  --bg-surface: rgba(234, 215, 188, 0.05);
  --border-color: rgba(234, 215, 188, 0.2);
  --btn-bg: var(--c-beige);
  --btn-text: var(--c-olive);
  --paper: var(--c-olive);
  --ink: var(--c-light-bg);
  --muted: rgba(234, 215, 188, .82);
  --surface: rgba(234, 215, 188, 0.05);
}
html[data-theme="dark"] .detail-art img[src$=".svg"] {
  filter: brightness(0) saturate(100%) invert(88%) sepia(19%) saturate(548%) hue-rotate(345deg) brightness(98%) contrast(93%) !important;
  opacity: .95 !important;
}
html[data-theme="dark"] .premium-detail-hero .detail-art img:not([src$=".svg"]) {
  filter: none !important;
  opacity: .94 !important;
  mix-blend-mode: normal !important;
}
.hero-art img,
.premium-detail-hero .detail-art img:not([src$=".svg"]) {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
.hero.section-shell {
  display: grid !important;
  align-items: center !important;
}
.planner-shell {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 2rem !important;
  background: var(--bg-surface) !important;
  padding: clamp(1.4rem, 3vw, 2.5rem) !important;
  border-radius: 20px !important;
  border: 1px solid var(--border-color) !important;
}
.planner-chip {
  border: 1px solid var(--btn-bg) !important;
  color: var(--text-main) !important;
  background: transparent !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
}
.planner-chip.is-active {
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
}
.premium-detail-list .detail-card {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}
.premium-detail-list .detail-card h3 { color: var(--text-main) !important; }
.premium-detail-list .detail-card p { color: var(--text-muted) !important; }
@media (max-width: 860px){
  .planner-shell { grid-template-columns: 1fr !important; }
}


/* final-preview-v4.7.1: repair planner readability after supplied CSS layer */
.planner-shell {
  align-items: stretch !important;
}
.planner-controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 2vw, 1.35rem) !important;
}
.planner-step {
  min-height: 0 !important;
  padding: clamp(1rem, 1.8vw, 1.35rem) !important;
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 18px !important;
}
html[data-theme="dark"] .planner-step {
  background: rgba(255,248,236,.08) !important;
  border-color: rgba(234,215,188,.20) !important;
}
.planner-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .65rem !important;
  justify-content: center !important;
}
.planner-chip {
  min-width: min(100%, 9rem) !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
html[data-theme="dark"] .planner-shell {
  background: rgba(234,215,188,.06) !important;
  border-color: rgba(234,215,188,.22) !important;
}
html[data-theme="dark"] .planner-chip { color: var(--c-beige) !important; border-color: rgba(234,215,188,.45) !important; }
html[data-theme="dark"] .planner-chip.is-active { background: var(--c-beige) !important; color: var(--c-olive) !important; }
@media (max-width: 860px){
  .planner-controls { grid-template-columns: 1fr !important; }
}


/* final-preview-v4.7.2: override old four-column planner summary cards */


/* final-preview-v4.8: mobile-first institutional rebuild, distinct hero image rules, no homepage numbering */
:root{
  --v48-olive:#3E3822;
  --v48-beige:#EAD7BC;
  --v48-paper:#FFF8EC;
  --v48-ink:#1F1D12;
  --v48-muted:#6F6657;
  --v48-line:rgba(62,56,34,.14);
  --v48-card:rgba(255,255,255,.82);
}
html[data-theme="dark"]{
  --v48-paper:#211e13;
  --v48-ink:#fff8ec;
  --v48-muted:rgba(234,215,188,.78);
  --v48-line:rgba(234,215,188,.20);
  --v48-card:rgba(234,215,188,.055);
}
body{background:var(--v48-paper)!important;color:var(--v48-ink)!important;}
.building-draw{opacity:.16!important;z-index:0!important;pointer-events:none!important;}
main,.site-footer{position:relative;z-index:1;}
.section,.section-shell{position:relative;z-index:1;}

/* Hero: image isolated from section image system */
.hero.section-shell{
  max-width:min(1160px,calc(100vw - 4rem))!important;
  min-height:clamp(31rem,42vw,38rem)!important;
  padding:clamp(6.5rem,9vw,8.5rem) 0 clamp(3rem,5vw,4rem)!important;
  display:grid!important;
  grid-template-columns:minmax(0,.50fr) minmax(0,.50fr)!important;
  gap:clamp(.75rem,2vw,1.5rem)!important;
  align-items:center!important;
}
.hero-art{justify-self:end!important;transform:translateX(clamp(2.2rem,4.2vw,4.8rem))!important;z-index:0!important;}
.hero-art img{
  width:min(42vw,34rem)!important;
  height:auto!important;
  max-height:31rem!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  border-radius:0!important;
  filter:none!important;
}
.hero-copy{justify-self:start!important;max-width:38rem!important;transform:translateX(clamp(-2.4rem,-2.5vw,-1.1rem))!important;z-index:2!important;}
.hero-copy h1{white-space:nowrap!important;font-size:clamp(2rem,2.6vw,3.1rem)!important;line-height:1.16!important;}
.hero-sub{white-space:nowrap!important;color:var(--v48-muted)!important;}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;}

/* Homepage gateways: no numbers, background-aware cards */
.read-more{width:fit-content!important;margin-top:1rem!important;}

/* Execution strip: approved number mechanism, high contrast, calm rhythm */

/* Planner: stable, readable on mobile and desktop */
.home-planner{padding-block:clamp(2.5rem,5vw,5rem)!important;}
.planner-shell{
  grid-template-columns:minmax(0,1.75fr) minmax(17rem,.75fr)!important;
  gap:clamp(1rem,2vw,1.5rem)!important;
  background:var(--v48-card)!important;
  border:1px solid var(--v48-line)!important;
  border-radius:24px!important;
  box-shadow:0 24px 70px rgba(31,29,18,.08)!important;
}
.planner-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1rem!important;}
.planner-step{background:rgba(255,255,255,.72)!important;border:1px solid var(--v48-line)!important;border-radius:18px!important;}
html[data-theme="dark"] .planner-step{background:rgba(234,215,188,.055)!important;}
.planner-step legend{color:var(--v48-ink)!important;}
.planner-options{justify-content:flex-start!important;}
.planner-chip{min-width:0!important;font-size:.86rem!important;border-color:var(--v48-line)!important;color:var(--v48-ink)!important;background:transparent!important;}
.planner-chip.is-active{background:var(--v48-olive)!important;color:var(--v48-beige)!important;border-color:var(--v48-olive)!important;}
html[data-theme="dark"] .planner-chip.is-active{background:var(--v48-beige)!important;color:var(--v48-olive)!important;border-color:var(--v48-beige)!important;}

@media (max-width:1050px){
  .building-draw{opacity:.09!important;}
  .hero.section-shell{max-width:min(720px,calc(100vw - 2rem))!important;grid-template-columns:1fr!important;min-height:0!important;padding:6rem 0 2.4rem!important;gap:.6rem!important;text-align:center!important;}
  .hero-art{justify-self:center!important;transform:none!important;grid-row:1!important;}
  .hero-art img{width:min(78vw,28rem)!important;max-height:20rem!important;}
  .hero-copy{justify-self:center!important;transform:none!important;grid-row:2!important;max-width:min(34rem,92vw)!important;}
  .hero-copy h1,.hero-sub{white-space:normal!important;}
  .hero-actions{justify-content:center!important;}
  .planner-shell{grid-template-columns:1fr!important;padding:1rem!important;}
  .planner-controls{grid-template-columns:1fr!important;}
}
@media (max-width:560px){
  .building-draw{opacity:.055!important;}
  .hero.section-shell{padding-top:5.25rem!important;}
  .hero-art img{width:min(86vw,22rem)!important;}
  .hero-copy .kicker{font-size:.78rem!important;}
  .hero-copy h1{font-size:clamp(1.65rem,8vw,2.15rem)!important;}
  .hero-sub{font-size:.95rem!important;}
  .hero-actions .btn{width:100%!important;justify-content:center!important;}
  .read-more{width:100%!important;justify-content:center!important;text-align:center!important;}
  .planner-shell{border-radius:20px!important;box-shadow:none!important;}
  .planner-options{display:grid!important;grid-template-columns:1fr!important;}
  .planner-chip{width:100%!important;}
}


/* final-preview-v4.8.1: preserve requested one-line gateway headings on laptop */


/* final-preview-v4.8.2: dark-theme artwork/footer correction after visual QA */
html[data-theme="dark"] .premium-detail-hero .detail-art img {
  filter: brightness(0) saturate(100%) invert(88%) sepia(19%) saturate(548%) hue-rotate(345deg) brightness(98%) contrast(93%) !important;
  opacity: .9 !important;
  mix-blend-mode: normal !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .hero-art img {
  filter: brightness(0) saturate(100%) invert(88%) sepia(19%) saturate(548%) hue-rotate(345deg) brightness(96%) contrast(90%) !important;
  opacity: .58 !important;
}
.site-footer,
html[data-theme="dark"] .site-footer {
  background: linear-gradient(135deg,#3E3822,#2c2718) !important;
  color: #EAD7BC !important;
}
.site-footer a,
.site-footer p,
.site-footer span,
.site-footer h3,
html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .site-footer p,
html[data-theme="dark"] .site-footer span,
html[data-theme="dark"] .site-footer h3 { color: #EAD7BC !important; }
html[data-theme="dark"] .footer-social,
html[data-theme="dark"] .footer-bottom { border-color: rgba(234,215,188,.18) !important; }
html[data-theme="dark"] .social-link { border-color: rgba(234,215,188,.32) !important; }
html[data-theme="dark"] .social-link svg { stroke: #EAD7BC !important; }
@media (max-width:560px){
  html[data-theme="dark"] .premium-detail-hero .detail-art img { opacity:.82 !important; }
}


/* final-preview-v4.8.3: force dark artwork tint over older specific rules */
html[data-theme="dark"] .premium-detail-hero .detail-art img[src$=".svg"],
html[data-theme="dark"] .premium-detail-hero .detail-art img[src*="sector-architectural"],
html[data-theme="dark"] .premium-detail-hero .detail-art img[src*="mina_panorama"] {
  filter: brightness(0) saturate(100%) invert(88%) sepia(19%) saturate(548%) hue-rotate(345deg) brightness(98%) contrast(93%) !important;
  opacity: .82 !important;
}
html[data-theme="dark"] .premium-detail-hero .detail-art img[src*="mina_panorama"] { opacity:.72 !important; }


/* prod-v49: light-only site, centered hero copy, transparent equal section artwork */
html,
html[data-theme="dark"],
html[data-theme="light"]{
  color-scheme: light !important;
  --bg: #FFF8EC !important;
  --surface: rgba(255,255,255,.78) !important;
  --text: #1F1D12 !important;
  --muted: #6F6657 !important;
  --border: rgba(62,56,34,.14) !important;
  --v48-paper:#FFF8EC !important;
  --v48-ink:#1F1D12 !important;
  --v48-muted:#6F6657 !important;
  --v48-card:rgba(255,255,255,.82) !important;
  --v48-line:rgba(62,56,34,.14) !important;
}
html[data-theme="dark"] body,
body{
  background:#FFF8EC !important;
  color:#1F1D12 !important;
}

@media (min-width:1051px){
  .hero.section-shell{
    max-width:min(1180px,calc(100vw - 4rem))!important;
    grid-template-columns:minmax(0,.47fr) minmax(0,.53fr)!important;
    gap:0!important;
    min-height:clamp(31rem,40vw,36rem)!important;
  }
  .hero-art{
    justify-self:start!important;
    transform:translateX(clamp(-1.2rem,-1vw,-.5rem))!important;
    opacity:.92!important;
  }
  .hero-art img{
    width:min(43vw,34rem)!important;
    max-height:30rem!important;
  }
  .hero-copy{
    justify-self:end!important;
    width:min(43rem,52vw)!important;
    max-width:43rem!important;
    /* move copy from far-right into the marked center zone */
    transform:translateX(clamp(-17rem,-16vw,-10rem))!important;
    text-align:right!important;
    padding-top:clamp(.8rem,2vw,1.8rem)!important;
  }
  .hero-copy h1{
    font-size:clamp(2.25rem,3.05vw,3.55rem)!important;
    max-width:43rem!important;
    white-space:nowrap!important;
  }
  .hero-sub{font-size:clamp(1rem,1.15vw,1.18rem)!important;}
}
@media (min-width:1280px) and (max-width:1390px){
  .hero-copy{transform:translateX(-13rem)!important;}
}
@media (min-width:1391px){
  .hero-copy{transform:translateX(-15.5rem)!important;}
}

/* Section artwork: equal drawing size, no card frame, no square crop */

@media (max-width:1050px){
  .hero.section-shell{grid-template-columns:1fr!important;text-align:center!important;}
  .hero-copy{transform:none!important;justify-self:center!important;width:min(35rem,92vw)!important;text-align:center!important;}
  .hero-actions{justify-content:center!important;}
}


/* prod-v49.1: fine tune hero copy into marked middle area without touching artwork */
@media (min-width:1051px){
  .hero-copy{transform:translateX(clamp(-10.5rem,-9.5vw,-6.5rem))!important;}
}
@media (min-width:1280px) and (max-width:1390px){
  .hero-copy{transform:translateX(-7.2rem)!important;}
}
@media (min-width:1391px){
  .hero-copy{transform:translateX(-9.2rem)!important;}
}


/* prod-v49.2: use tight transparent section art on homepage; remove empty canvas feel */


/* prod-v50: mobile section artwork must be clearly visible and larger; keep desktop unchanged */


/* prod-v50.1: keep artwork fully visible */


/* prod-v51: mobile header menu position + visible hero artwork */
@media (max-width: 768px){

  .hero.section-shell,
  .hero{
    min-height:34.5rem!important;
    padding:2.15rem 1.15rem 13.5rem!important;
    overflow:visible!important;
  }
  .hero-copy{
    position:relative!important;
    z-index:3!important;
  }
  .hero-actions{
    position:relative!important;
    z-index:4!important;
    margin-bottom:0!important;
  }
  .hero-art,
  html[dir='ltr'] .hero-art{
    display:flex!important;
    visibility:visible!important;
    position:absolute!important;
    z-index:1!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:1.25rem!important;
    width:min(94vw,23.5rem)!important;
    height:12.8rem!important;
    transform:translateX(-50%)!important;
    opacity:1!important;
    pointer-events:none!important;
  }
  .hero-art img,
  html[dir='ltr'] .hero-art img{
    display:block!important;
    visibility:visible!important;
    width:min(94vw,23.5rem)!important;
    max-width:none!important;
    height:12.8rem!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    opacity:.72!important;
    filter:none!important;
    transform:none!important;
    margin:0 auto!important;
  }
}
@media (max-width:380px){
  .hero.section-shell,
  .hero{
    min-height:35.5rem!important;
    padding-bottom:13.8rem!important;
  }
  .hero-art,
  .hero-art img{
    width:94vw!important;
    height:12.6rem!important;
  }
}


/* prod-v51.1: separate mobile menu from logo; logo visual right, menu visual left */


/* prod-v52: mobile hero tighter — stacked CTAs, raised copy/art, stronger background drawing */
@media (max-width: 768px){
  body::before{
    opacity:.52!important;
    background-size:150px 150px, 100% 100%, 100% 100%!important;
  }
  .building-draw{
    opacity:.36!important;
    color:#3E3822!important;
    width:min(72vw,20rem)!important;
    left:-3.2rem!important;
    bottom:6.5rem!important;
    z-index:0!important;
    mix-blend-mode:multiply!important;
  }
  .building-svg path{
    stroke-width:1.85!important;
    opacity:.92!important;
  }
  .hero.section-shell,
  .hero{
    min-height:30.8rem!important;
    padding:1.05rem 1.15rem 12.1rem!important;
    margin-top:.35rem!important;
    align-content:start!important;
  }
  .hero-copy{
    margin-top:0!important;
    padding-top:0!important;
    transform:translateY(-.55rem)!important;
  }
  .hero-kicker{margin-bottom:.42rem!important;}
  .hero-copy h1{
    margin-bottom:.48rem!important;
    line-height:1.15!important;
  }
  .hero-sub{margin-bottom:.78rem!important;}
  .hero-actions{
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:.48rem!important;
    width:100%!important;
    max-width:none!important;
    margin-top:.1rem!important;
  }
  .hero-actions .btn{
    width:min(100%,15.8rem)!important;
    min-width:15.8rem!important;
    max-width:15.8rem!important;
    height:2.72rem!important;
    justify-content:center!important;
    padding-inline:1rem!important;
    font-size:.82rem!important;
  }
  .hero-art,
  html[dir='ltr'] .hero-art{
    bottom:2.65rem!important;
    width:min(98vw,25rem)!important;
    height:13.9rem!important;
    opacity:1!important;
  }
  .hero-art img,
  html[dir='ltr'] .hero-art img{
    width:min(98vw,25rem)!important;
    height:13.9rem!important;
    opacity:.86!important;
    object-position:center bottom!important;
  }
}
@media (max-width:380px){
  .hero.section-shell,
  .hero{
    min-height:31.4rem!important;
    padding-top:.95rem!important;
    padding-bottom:12.4rem!important;
  }
  .hero-copy{transform:translateY(-.45rem)!important;}
  .hero-actions .btn{
    width:min(100%,14.9rem)!important;
    min-width:14.9rem!important;
    max-width:14.9rem!important;
  }
  .hero-art,
  .hero-art img{
    width:98vw!important;
    height:13.2rem!important;
  }
  .hero-art{bottom:2.45rem!important;}
  .building-draw{opacity:.42!important;width:76vw!important;left:-3.8rem!important;bottom:6rem!important;}
}


/* prod-v53: undo overdone mobile background; right-side compact CTAs */
@media (max-width: 768px){
  /* restore the old calm texture method */
  body::before{
    opacity:.18!important;
    background-size:220px 220px, 100% 100%, 100% 100%!important;
    mix-blend-mode:multiply!important;
    filter:none!important;
  }
  /* same fixed facade method, but visible enough — not washed out */
  .building-draw{
    left:-2.5vw!important;
    right:auto!important;
    bottom:-7vh!important;
    width:clamp(310px,30vw,470px)!important;
    opacity:.62!important;
    color:#3E3822!important;
    mix-blend-mode:multiply!important;
    mask-image:linear-gradient(90deg,#000 0 76%,rgb(0 0 0 / 82%) 88%,transparent 100%)!important;
    -webkit-mask-image:linear-gradient(90deg,#000 0 76%,rgb(0 0 0 / 82%) 88%,transparent 100%)!important;
  }
  .building-svg path{
    opacity:1!important;
    stroke-width:1.18!important;
  }
  .building-svg path[data-draw-stage='structure']{stroke-width:1.48!important;}
  .building-svg path[data-draw-stage='rawashin']{stroke-width:1.08!important;}
  .building-svg path[data-draw-stage='detail']{stroke-width:.94!important;}

  .hero.section-shell,
  .hero{
    min-height:30.4rem!important;
    padding-top:1.05rem!important;
    padding-bottom:11.8rem!important;
  }
  .hero-copy{
    transform:translateY(-.45rem)!important;
  }
  .hero-actions{
    flex-direction:column!important;
    align-items:flex-end!important;
    justify-content:flex-start!important;
    gap:.46rem!important;
    width:100%!important;
    margin-inline-start:auto!important;
    margin-inline-end:0!important;
  }
  .hero-actions .btn{
    flex:0 0 auto!important;
    width:12.4rem!important;
    min-width:0!important;
    max-width:12.4rem!important;
    height:2.68rem!important;
    padding-inline:.95rem!important;
    justify-content:center!important;
    font-size:.82rem!important;
    white-space:nowrap!important;
  }
  .hero-art,
  html[dir='ltr'] .hero-art{
    bottom:2.25rem!important;
    height:13.3rem!important;
    width:min(96vw,24rem)!important;
  }
  .hero-art img,
  html[dir='ltr'] .hero-art img{
    height:13.3rem!important;
    width:min(96vw,24rem)!important;
    opacity:.84!important;
  }
}
@media (max-width:380px){
  .hero.section-shell,
  .hero{
    min-height:31.2rem!important;
    padding-bottom:12rem!important;
  }
  .hero-actions .btn{
    width:11.7rem!important;
    max-width:11.7rem!important;
    height:2.6rem!important;
  }
  .hero-art,
  .hero-art img{
    height:12.9rem!important;
    width:96vw!important;
  }
}


/* prod-v53.1: RTL mobile CTAs must sit on the visual right, compact width */
@media (max-width:768px){
  html[dir='rtl'] .hero-actions{
    align-items:flex-start!important;
    text-align:right!important;
  }
  html[dir='rtl'] .hero-actions .btn{
    margin-inline-start:0!important;
    margin-inline-end:auto!important;
  }
  html[dir='ltr'] .hero-actions{
    align-items:flex-start!important;
  }
}


/* prod-v54: remove unwanted mobile dots/diagonal texture; keep only clean background + visible facade */
@media (max-width:768px){
  body::before{
    opacity:0!important;
    background:none!important;
    background-image:none!important;
    mix-blend-mode:normal!important;
    filter:none!important;
  }
  .building-draw{
    opacity:.64!important;
    color:#3E3822!important;
    mix-blend-mode:multiply!important;
  }
  .building-svg path{
    opacity:1!important;
  }
}


/* prod-v55: clean background — no decorative dots, diagonals, or stray facade strokes */
body::before{
  opacity:0!important;
  background:none!important;
  background-image:none!important;
  display:none!important;
}
@media (max-width:768px){
  .building-draw{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
  }
  .hero-art,
  .hero-art img{
    opacity:.9!important;
  }
}


/* prod-v56: restore the approved facade, but reveal it only through scrolling */
body::before{
  opacity:0!important;
  background:none!important;
  background-image:none!important;
  display:none!important;
}
.building-draw{
  display:block!important;
  visibility:visible!important;
  opacity:0!important;
  left:-2.5vw!important;
  right:auto!important;
  bottom:-7vh!important;
  width:clamp(310px,30vw,470px)!important;
  color:#3E3822!important;
  mix-blend-mode:multiply!important;
  pointer-events:none!important;
  mask-image:linear-gradient(90deg,#000 0 76%,rgb(0 0 0 / 82%) 88%,transparent 100%)!important;
  -webkit-mask-image:linear-gradient(90deg,#000 0 76%,rgb(0 0 0 / 82%) 88%,transparent 100%)!important;
}
html[dir='ltr'] .building-draw{
  right:-2.5vw!important;
  left:auto!important;
}
.building-svg path{
  opacity:0!important;
}
@media (max-width:768px){
  .building-draw{
    display:block!important;
    visibility:visible!important;
    opacity:0!important;
    left:-2.5vw!important;
    right:auto!important;
    bottom:-7vh!important;
    width:clamp(310px,30vw,470px)!important;
  }
  html[dir='ltr'] .building-draw{
    right:-2.5vw!important;
    left:auto!important;
  }
}