:root {
  --ink: #111210;
  --black: #090a09;
  --orange: #dd641f;
  --orange-bright: #f2762e;
  --cream: #f5eddf;
  --paper: #fffdf8;
  --sand: #d3c4ae;
  --muted: #6b675f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
svg { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.utility {
  min-height: 42px;
  padding: 8px clamp(22px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--cream);
  font-size: 14px;
}
.utility span { display: flex; align-items: center; gap: 8px; }
.utility svg { color: var(--orange); }

.header {
  height: 92px;
  padding: 0 clamp(22px, 4vw, 64px);
  background: var(--black);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  position: relative;
  z-index: 10;
}
.brand {
  font-family: var(--display-font);
  font-stretch: condensed;
  letter-spacing: .02em;
  font-size: clamp(25px, 3vw, 39px);
  line-height: .9;
  white-space: nowrap;
}
.brand strong { color: var(--orange); font-weight: inherit; }
.logoLink, .footerLogo { display: inline-flex; align-items: center; }
.logoLink img, .footerLogo img { width: min(260px, 28vw); height: auto; display: block; }
.header nav { display: flex; gap: clamp(22px, 3vw, 48px); font-weight: 700; }
.header nav a { padding: 10px 0; border-bottom: 2px solid transparent; transition: .2s ease; }
.header nav a:hover, .header nav a:focus-visible { color: var(--orange-bright); border-color: var(--orange); }
.headerCta {
  border: 2px solid var(--orange);
  color: var(--orange-bright);
  border-radius: 12px;
  padding: 14px 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 9px;
}

.hero { min-height: 720px; background: var(--black); color: var(--cream); display: grid; grid-template-columns: 46% 54%; }
.heroCopy {
  padding: clamp(58px, 6vw, 82px) clamp(30px, 5vw, 76px) 88px;
  position: relative;
  background: radial-gradient(circle at 20% 25%, #24241f 0, transparent 38%), linear-gradient(135deg, #131412, #080908);
  animation: rise .55s ease both;
}
.eyebrow { margin: 0 0 20px; color: var(--orange-bright); text-transform: uppercase; letter-spacing: .16em; font-size: 13px; font-weight: 900; }
.eyebrow.dark { color: #b44d13; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { text-wrap: balance; }
h1 {
  max-width: 680px;
  margin-bottom: 24px;
  font-family: var(--display-font);
  text-transform: uppercase;
  font-size: clamp(62px, 6vw, 88px);
  line-height: .91;
  letter-spacing: .005em;
  font-weight: 900;
}
.heroText { max-width: 610px; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.48; color: #ded7cb; }
.heroActions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.button {
  min-height: 58px;
  padding: 15px 24px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--orange); color: white; box-shadow: 0 10px 26px #0004; }
.button.primary:hover { background: var(--orange-bright); box-shadow: 0 14px 30px #0005; }
.button.secondary { background: transparent; border: 2px solid var(--cream); color: var(--cream); }
.proof { display: flex; flex-wrap: wrap; margin-top: 36px; gap: 18px 26px; }
.proof span { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; }
.proof svg { color: var(--orange-bright); width: 25px; height: 25px; }
.heroImage {
  min-height: 720px;
  background: linear-gradient(90deg, #090a0940, transparent 25%), url("/images/hero.webp") center/cover no-repeat;
  animation: imageReveal .75s ease both;
}

.areaRibbon {
  width: min(92%, 1450px);
  min-height: 98px;
  margin: -48px auto 0;
  padding: 14px 28px;
  border-radius: 17px;
  background: var(--cream);
  box-shadow: 0 14px 35px #2a241b22;
  display: grid;
  grid-template-columns: 1.25fr repeat(6, 1fr) 1fr;
  align-items: center;
  position: relative;
  z-index: 5;
}
.ribbonLabel { display: flex; align-items: center; gap: 12px; text-transform: uppercase; font-size: 12px; font-weight: 900; line-height: 1.15; }
.ribbonLabel svg { width: 29px; height: 29px; }
.ribbonArea { text-align: center; border-left: 1px solid #bfb4a3; padding: 11px 8px; font-size: 14px; }
.areaRibbon > a { display: flex; align-items: center; justify-content: flex-end; gap: 7px; color: #bd4f16; text-transform: uppercase; font-weight: 900; }

.section { padding: clamp(74px, 8vw, 120px) clamp(24px, 6vw, 96px); }
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; padding-bottom: 45px; }
h2 { font-family: var(--display-font); font-size: clamp(44px, 5.2vw, 78px); line-height: .98; text-transform: uppercase; letter-spacing: .01em; }
.sectionLead { color: var(--muted); font-size: 19px; line-height: 1.7; max-width: 650px; }

.materialGrid { padding-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.materialCard { min-height: 420px; padding: 0; overflow: hidden; border: 1px solid #dfd7ca; border-radius: 18px; background: white; opacity: .25; transform: translateY(24px); transition: transform .45s ease, opacity .45s ease, border .2s ease, box-shadow .2s ease; }
.materialCard.revealed { opacity: 1; transform: none; }
.materialCard:hover { transform: translateY(-7px); border-color: var(--orange); box-shadow: 0 22px 48px #3c302122; }
.materialCard > img { width: 100%; height: 220px; display: block; object-fit: cover; transition: transform .55s ease; }
.materialCard:hover > img { transform: scale(1.045); }
.materialCard > div { position: relative; padding: 30px; }
.materialIcon { width: 54px; height: 54px; border-radius: 50%; background: var(--cream); color: #b44d13; display: grid; place-items: center; font-family: Georgia, serif; font-weight: 800; }
.materialCard .materialIcon { position: absolute; top: -28px; right: 26px; border: 4px solid white; background: var(--orange); color: white; }
.materialCard h3 { margin: 24px 0 12px; font-size: 22px; }
.materialCard p { color: var(--muted); line-height: 1.65; }
.materialCard a, .textLink { margin-top: 20px; color: #b44d13; font-weight: 900; display: inline-flex; gap: 8px; align-items: center; }
.materialCard a svg, .textLink svg { transition: transform .2s ease; }
.materialCard a:hover svg, .textLink:hover svg { transform: translateX(4px); }

.process { margin: 0 clamp(18px, 3vw, 48px); padding: clamp(70px, 8vw, 110px) clamp(24px, 5vw, 82px); background: #111210; color: var(--cream); border-radius: 24px; }
.processHead { display: grid; grid-template-columns: 1.25fr .75fr; gap: 60px; align-items: end; }
.processHead h2 { max-width: 800px; margin-bottom: 0; }
.processHead > p { color: #c9c1b5; line-height: 1.7; font-size: 18px; }
.stepGrid { margin-top: 70px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.stepGrid article { border-top: 1px solid #57564f; padding: 28px 8px 0 0; }
.stepGrid article > span { color: var(--orange-bright); font-size: 13px; font-weight: 900; }
.stepGrid h3 { margin: 38px 0 12px; font-size: 26px; }
.stepGrid p { color: #bbb4a9; line-height: 1.65; max-width: 350px; }

.areas { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(45px, 8vw, 120px); align-items: center; }
.areasCopy > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; font-size: 18px; }
.areaList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #ddd4c7; }
.areaList span { min-height: 58px; padding: 15px 10px; border-bottom: 1px solid #ddd4c7; display: flex; align-items: center; gap: 11px; font-weight: 700; }
.areaList svg { color: var(--orange); width: 19px; }

.why { padding-top: 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; }
.whyPanel { background: var(--orange); color: white; padding: clamp(45px, 6vw, 88px); border-radius: 22px 0 0 22px; }
.whyPanel .eyebrow { color: #2c1203; }
.whyPanel p { max-width: 680px; line-height: 1.7; font-size: 18px; }
.whyPanel ul { padding-left: 20px; display: grid; gap: 12px; line-height: 1.5; }
.whyStats { background: var(--cream); border-radius: 0 22px 22px 0; padding: clamp(45px, 6vw, 88px); display: grid; align-content: center; }
.whyStats div { padding: 22px 0; border-bottom: 1px solid #c8bca9; display: flex; justify-content: space-between; gap: 30px; align-items: baseline; }
.whyStats div:last-child { border: 0; }
.whyStats strong { font-family: var(--display-font); text-transform: uppercase; font-size: clamp(26px, 3vw, 42px); letter-spacing: .02em; }
.whyStats span { color: var(--muted); text-align: right; }

.businessProfile { padding-top: 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(45px, 8vw, 120px); align-items: center; }
.businessProfile h2 { font-size: clamp(40px, 4.5vw, 68px); }
.profileDetails { border-top: 1px solid #ddd4c7; }
.profileDetails p { margin: 0; padding: 19px 0; border-bottom: 1px solid #ddd4c7; display: flex; justify-content: space-between; gap: 24px; }
.profileDetails p span, .profileDetails p a { color: var(--muted); text-align: right; }
.profileDetails .textLink { margin-top: 25px; }

.emirates { padding-top: 0; }
.emirates h2 { max-width: 760px; }
.emirates > div { margin-top: 42px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #d9d0c3; border-bottom: 1px solid #d9d0c3; }
.emirates > div a { min-height: 100px; padding: 24px 16px; border-right: 1px solid #d9d0c3; display: flex; justify-content: space-between; align-items: center; font-size: 19px; font-weight: 900; transition: color .2s ease, background .2s ease; }
.emirates > div a:last-child { border-right: 0; }
.emirates > div a:hover { background: var(--cream); color: #b44d13; }

.quote { background: #111210; color: var(--cream); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px, 9vw, 140px); align-items: start; }
.quote > div > p:not(.eyebrow) { color: #c5bdb1; font-size: 18px; line-height: 1.7; }
.quote form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote label { display: grid; gap: 9px; color: #ddd4c7; font-weight: 700; font-size: 13px; }
.quote input, .quote textarea { width: 100%; background: #20211f; color: white; border: 1px solid #4b4c47; border-radius: 10px; padding: 15px; font: inherit; outline: none; }
.quote input:focus, .quote textarea:focus { border-color: var(--orange-bright); box-shadow: 0 0 0 3px #dd641f33; }
.quote textarea { min-height: 115px; resize: vertical; }
.quote label:nth-of-type(4), .quote .button, .formNote { grid-column: 1 / -1; }
.formNote { color: #8f8c85; font-size: 12px; line-height: 1.5; }

footer { background: #080908; color: #c8c1b7; padding: 65px clamp(24px, 6vw, 96px) 30px; display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 50px; }
footer .brand { color: var(--cream); display: inline-block; margin-bottom: 20px; }
footer > div { display: flex; flex-direction: column; gap: 11px; }
footer > div > strong { color: white; margin-bottom: 8px; }
footer p { line-height: 1.6; }
.copyright { grid-column: 1 / -1; border-top: 1px solid #2e302e; padding-top: 25px; margin-top: 15px; font-size: 13px; }
.copyright button { appearance: none; border: 0; background: none; color: var(--orange-bright); padding: 0; cursor: pointer; }
.mobileBar { display: none; }

.seoContent { background: #f5eddf; }
.seoContent h2 { max-width: 900px; }
.seoColumns { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; color: var(--muted); font-size: 18px; line-height: 1.75; }
.faq { margin-top: 40px; border-top: 1px solid #cfc1ad; }
.faq details { border-bottom: 1px solid #cfc1ad; padding: 20px 0; }
.faq summary { cursor: pointer; font-size: 18px; font-weight: 900; }
.faq details p { margin: 14px 0 0; color: var(--muted); line-height: 1.7; }

.floatingContact { position: fixed; z-index: 60; right: 18px; bottom: 24px; display: grid; gap: 11px; }
.floatingContact a { min-width: 150px; height: 54px; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; color: white; font-weight: 900; box-shadow: 0 12px 28px #0004; transition: transform .2s ease; }
.floatingContact a:hover { transform: translateY(-3px) scale(1.02); }
.floatCall { background: #171917; }
.floatWhatsapp { background: #1fa855; }

.cookieBanner { position: fixed; z-index: 80; left: 20px; bottom: 20px; width: min(620px, calc(100% - 40px)); padding: 19px; display: none; grid-template-columns: 1fr auto; gap: 20px; align-items: center; border: 1px solid #ddd2c2; border-radius: 16px; background: #fffdf8; box-shadow: 0 20px 60px #0003; }
.cookieBanner.show { display: grid; animation: cookieUp .35s ease both; }
.cookieBanner strong { font-size: 17px; }
.cookieBanner p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cookieActions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookieActions button { min-height: 42px; padding: 9px 14px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.cookieAccept { border: 1px solid var(--orange); background: var(--orange); color: white; }
.cookieReject { border: 1px solid #222; background: #222; color: white; }
.cookieSettings { border: 1px solid #c9bba8; background: transparent; color: var(--ink); }
.cookiePanel { position: fixed; z-index: 90; inset: 0; padding: 20px; display: none; place-items: center; background: #090a09b8; }
.cookiePanel.show { display: grid; }
.cookiePanelCard { position: relative; width: min(520px, 100%); padding: 32px; border-radius: 18px; background: white; box-shadow: 0 30px 80px #0005; }
.cookiePanelCard h3 { font-size: 27px; }
.cookiePanelCard p { color: var(--muted); line-height: 1.6; }
.cookieClose { position: absolute; right: 15px; top: 12px; border: 0; background: none; font-size: 28px; cursor: pointer; }
@keyframes cookieUp { from { opacity: 0; transform: translateY(20px); } }

.cityHero { min-height: 650px; padding: clamp(70px, 8vw, 110px) clamp(24px, 7vw, 110px); background: radial-gradient(circle at 70% 20%, #2b2b25, transparent 35%), #0b0c0b; color: var(--cream); display: grid; grid-template-columns: 1fr .42fr; gap: clamp(50px, 10vw, 160px); align-items: center; }
.cityHero h1 { margin-bottom: 26px; }
.cityHero > div > p:not(.eyebrow) { max-width: 690px; color: #d0c8bc; font-size: 20px; line-height: 1.65; }
.cityHero aside { padding: 32px; border: 1px solid #4c4c45; border-top: 5px solid var(--orange); }
.cityHero aside span { display: block; color: #aaa398; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 900; }
.cityHero aside strong { display: block; margin: 14px 0; font-family: var(--display-font); font-size: 40px; text-transform: uppercase; color: white; }
.cityHero aside p { margin: 0; color: #bdb5a9; line-height: 1.55; }
.cityMaterials { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 8vw, 120px); align-items: center; }
.cityMaterialList { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #ddd4c7; }
.cityMaterialList span { padding: 21px 8px; border-bottom: 1px solid #ddd4c7; font-weight: 800; }
.cityCoverage { margin: 0 clamp(16px, 3vw, 48px); padding-inline: clamp(24px, 5vw, 82px); border-radius: 24px; background: #111210; color: var(--cream); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 8vw, 120px); }
.cityCoverage > div:first-child > p:not(.eyebrow) { color: #bbb4a9; line-height: 1.7; font-size: 18px; }
.cityAreaGrid { display: grid; grid-template-columns: 1fr 1fr; align-content: center; }
.cityAreaGrid span { padding: 19px 12px; border-bottom: 1px solid #454640; font-weight: 800; }
.cityQuote { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }
.cityQuote p { color: var(--muted); font-size: 18px; line-height: 1.6; }
.cityQuote .button { white-space: nowrap; }
.otherCities { padding-top: 0; }
.otherCities > div { display: flex; flex-wrap: wrap; gap: 12px; }
.otherCities a { padding: 15px 20px; background: var(--cream); border-radius: 8px; font-weight: 800; }
.cityPage footer { grid-template-columns: 2fr 1fr 1fr; }

@keyframes rise { from { transform: translateY(18px); } to { transform: none; } }
@keyframes imageReveal { from { clip-path: inset(0 0 0 16%); } to { clip-path: inset(0); } }

@media (max-width: 1050px) {
  .header nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .heroCopy { min-height: 620px; background: linear-gradient(90deg, #0a0b0af2 0, #0a0b0ad9 57%, #0a0b0a40), url("/images/hero.webp") center/cover; }
  .heroImage { display: none; }
  .areaRibbon { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)) 1fr; }
  .ribbonArea:nth-of-type(n+4) { display: none; }
  .materialGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas, .businessProfile { grid-template-columns: 1fr; }
  .emirates > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emirates > div a:nth-child(2) { border-right: 0; }
}

@media (max-width: 720px) {
  body { padding-bottom: 0; }
  .utility { justify-content: center; min-height: 36px; font-size: 12px; }
  .utility span:last-child { display: none; }
  .header { height: 72px; padding: 0 18px; }
  .headerCta { font-size: 0; padding: 10px; border-radius: 50%; }
  .headerCta svg { font-size: 18px; }
  .hero { min-height: auto; }
  .heroCopy { min-height: 660px; padding: 58px 22px 100px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(0deg, #080908 3%, #080908dc 56%, #08090840), url("/images/hero.webp") 60% center/cover; }
  h1 { font-size: clamp(56px, 18vw, 82px); }
  .heroText { font-size: 17px; }
  .heroActions .button { flex: 1; padding-inline: 14px; }
  .proof { gap: 14px 18px; }
  .proof span { font-size: 12px; }
  .areaRibbon { width: calc(100% - 24px); margin-top: -42px; min-height: 84px; padding: 12px 16px; grid-template-columns: 1fr 1fr; }
  .ribbonArea { display: none !important; }
  .areaRibbon > a { justify-content: flex-end; }
  .intro, .processHead, .quote { grid-template-columns: 1fr; }
  .intro { gap: 12px; }
  .materialGrid, .stepGrid, .why { grid-template-columns: 1fr; }
  .emirates > div { grid-template-columns: 1fr; }
  .emirates > div a { border-right: 0; }
  .cityHero, .cityMaterials, .cityCoverage, .cityQuote { grid-template-columns: 1fr; }
  .cityHero { min-height: auto; }
  .cityCoverage { margin: 0 12px; border-radius: 18px; }
  .cityQuote .button { width: 100%; white-space: normal; }
  .cityPage footer { grid-template-columns: 1fr; }
  .cityPage footer .copyright { grid-column: 1; }
  .materialCard { min-height: auto; }
  .materialCard > img { height: 205px; }
  .process { margin: 0 12px; border-radius: 18px; }
  .stepGrid { margin-top: 45px; }
  .whyPanel { border-radius: 18px 18px 0 0; }
  .whyStats { border-radius: 0 0 18px 18px; }
  .whyStats div { align-items: center; }
  .quote form { grid-template-columns: 1fr; }
  .quote label, .quote label:nth-of-type(4), .quote .button, .formNote { grid-column: 1; }
  footer { grid-template-columns: 1fr 1fr; padding-bottom: 45px; }
  footer > div:first-child, .copyright { grid-column: 1 / -1; }
  .logoLink img { width: 205px; max-width: 66vw; }
  .seoColumns { grid-template-columns: 1fr; gap: 5px; }
  .floatingContact { right: 12px; bottom: 12px; grid-template-columns: 1fr 1fr; }
  .floatingContact a { min-width: 0; width: 54px; padding: 0; border-radius: 50%; font-size: 20px; }
  .floatingContact a span { display: none; }
  .cookieBanner { left: 10px; bottom: 78px; width: calc(100% - 20px); padding: 16px; grid-template-columns: 1fr; }
  .cookieActions { width: 100%; }
  .cookieActions button { flex: 1; }
}

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

/* Compact responsive layout */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { font-size: 16px; font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
main { width: 100%; max-width: 100%; overflow: clip; }
img { max-width: 100%; height: auto; }
section, header, footer, article, div, form, nav, aside { min-width: 0; }
h1, h2, h3, p, a, span { overflow-wrap: anywhere; }

.utility { min-height: 36px; padding: 7px max(18px, calc((100vw - 1200px) / 2)); font-size: 13px; }
.header { height: 78px; padding: 0 max(20px, calc((100vw - 1200px) / 2)); gap: 24px; }
.logoLink img, .footerLogo img { width: 215px; }
.header nav { gap: clamp(18px, 2.3vw, 34px); font-size: 14px; }
.headerCta { padding: 11px 16px; border-radius: 10px; font-size: 14px; }

.hero { min-height: 570px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.heroCopy { padding: 66px max(28px, calc((100vw - 1200px) / 2)) 72px; }
.heroImage { min-height: 570px; }
h1, h2 { font-family: "Segoe UI", Inter, Arial, sans-serif; font-weight: 900; letter-spacing: -.045em; }
h1 { max-width: 600px; font-size: clamp(46px, 5.2vw, 70px); line-height: .96; }
h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1.02; }
.eyebrow { font-family: "Segoe UI", Inter, Arial, sans-serif; letter-spacing: .19em; }
.heroText { max-width: 540px; font-size: clamp(16px, 1.35vw, 19px); }
.button { min-height: 50px; padding: 12px 19px; font-size: 14px; border-radius: 10px; }
.proof { margin-top: 28px; gap: 13px 20px; }
.proof span { font-size: 13px; }

.areaRibbon { width: min(calc(100% - 32px), 1180px); min-height: 76px; margin-top: -30px; padding: 10px 18px; grid-template-columns: minmax(130px, 1.2fr) repeat(6, minmax(0, 1fr)) minmax(90px, .8fr); border-radius: 14px; }
.ribbonArea { padding: 8px 5px; font-size: 12px; overflow-wrap: normal; }
.areaRibbon > a { font-size: 12px; }

.section { width: min(100%, 1240px); margin-inline: auto; padding: 68px 28px; }
.intro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; padding-bottom: 34px; }
.sectionLead, .areasCopy > p:not(.eyebrow), .quote > div > p:not(.eyebrow), .cityQuote p { font-size: 16px; line-height: 1.65; }

.materialGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 0; }
.materialCarousel { padding-top: 0; }
.carouselHeading { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.carouselHeading > p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 800; }
.carouselControls { display: flex; gap: 8px; }
.carouselControls button { width: 42px; height: 42px; border: 1px solid #d7ccbd; border-radius: 50%; background: white; color: var(--ink); font: inherit; font-size: 19px; font-weight: 900; cursor: pointer; transition: .2s ease; }
.carouselControls button:hover:not(:disabled) { border-color: var(--orange); background: var(--orange); color: white; }
.carouselControls button:disabled { opacity: .35; cursor: default; }
.materialViewport { width: 100%; max-width: 100%; overflow: hidden; }
.materialCarousel .materialGrid { width: 100%; max-width: 100%; display: flex; gap: 16px; transform: translate3d(0,0,0); transition: transform .42s cubic-bezier(.22,.8,.24,1); }
.materialCarousel .materialCard { flex: 0 0 calc((100% - 32px) / 3); }
.materialCard { min-width: 0; min-height: 0; border-radius: 14px; }
.materialCard > img { width: 100%; max-width: 100%; height: 170px; object-fit: cover; }
.materialCard > div { padding: 22px; }
.materialCard .materialIcon { width: 44px; height: 44px; top: -22px; right: 18px; font-size: 13px; }
.materialCard h3 { margin: 16px 0 8px; font-family: "Segoe UI", Inter, Arial, sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.materialCard p { min-height: 48px; margin-bottom: 0; font-size: 14px; line-height: 1.5; }
.materialCard a { margin-top: 14px; font-size: 14px; }

.process { width: min(calc(100% - 32px), 1180px); margin: 0 auto; padding: 62px 44px; border-radius: 18px; }
.processHead { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; }
.processHead > p { font-size: 16px; }
.stepGrid { margin-top: 44px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.stepGrid article { min-width: 0; padding-top: 20px; }
.stepGrid h3 { margin: 22px 0 8px; font-size: 21px; }
.stepGrid p { font-size: 14px; line-height: 1.55; }

.areas { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; }
.areaList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.areaList span { min-width: 0; min-height: 52px; padding: 12px 8px; font-size: 14px; }
.why { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.whyPanel, .whyStats { padding: 50px; }
.whyPanel p { font-size: 16px; }
.whyStats strong { font-family: "Segoe UI", Inter, Arial, sans-serif; font-size: clamp(24px, 2.6vw, 36px); font-weight: 900; letter-spacing: -.035em; }
.businessProfile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; }
.businessProfile h2 { font-size: clamp(32px, 3.7vw, 48px); }
.emirates > div { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 30px; }
.emirates > div a { min-width: 0; min-height: 76px; padding: 18px 14px; font-size: 16px; }
.seoContent { width: min(calc(100% - 32px), 1180px); margin-bottom: 68px; border-radius: 18px; }
.seoColumns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; font-size: 16px; }
.faq { margin-top: 28px; }
.faq details { padding: 16px 0; }
.faq summary { font-size: 16px; }
.quote { width: 100%; max-width: none; padding-inline: max(28px, calc((100vw - 1180px) / 2)); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; }
.quote form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quote input, .quote textarea { min-width: 0; padding: 13px; }

footer { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); padding: 50px max(28px, calc((100vw - 1180px) / 2)) 28px; gap: 34px; font-size: 14px; }
.floatingContact { right: 12px; bottom: 14px; grid-template-columns: repeat(2, 48px); gap: 8px; }
.floatingContact a { width: 48px; min-width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 18px; }
.floatingContact a span { display: none; }
.cookieBanner { left: 14px; bottom: 14px; width: min(500px, calc(100% - 28px)); padding: 15px; gap: 14px; }
.cookieBanner strong { font-size: 15px; }
.cookieBanner p { font-size: 12px; }
.cookieBanner p a, .cookiePanelCard a { color: #b44d13; font-weight: 800; text-decoration: underline; }
.cookieActions button { min-height: 38px; padding: 8px 11px; font-size: 12px; }

.cityHero { min-height: 520px; padding: 70px max(28px, calc((100vw - 1180px) / 2)); grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 60px; }
.cityHero h1 { font-size: clamp(44px, 5vw, 64px); }
.cityHero > div > p:not(.eyebrow) { font-size: 17px; }
.cityHero aside { padding: 25px; }
.cityHero aside strong { font-family: "Segoe UI", Inter, Arial, sans-serif; font-size: 32px; font-weight: 900; letter-spacing: -.035em; }
.cityMaterials { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; }
.cityMaterialList, .cityAreaGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cityCoverage { width: min(calc(100% - 32px), 1180px); margin: 0 auto; padding: 62px 44px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; }
.cityCoverage > div:first-child > p:not(.eyebrow) { font-size: 16px; }
.cityQuote { grid-template-columns: minmax(0, 1fr) auto; }
.cityPage footer { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.legalPage { max-width: 900px; }
.legalPage h1 { color: var(--ink); font-size: clamp(40px, 5vw, 60px); }
.legalPage h2 { margin: 34px 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 24px; text-transform: none; }
.legalPage p { color: var(--muted); font-size: 16px; line-height: 1.75; }
.legalPage p a:not(.button) { color: #b44d13; font-weight: 800; }

@media (max-width: 980px) {
  .header nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .heroCopy { min-height: 560px; background: linear-gradient(90deg, #0a0b0af2 0, #0a0b0ad5 62%, #0a0b0a55), url("/images/hero.webp") center/cover; }
  .heroImage { display: none; }
  .areaRibbon { grid-template-columns: minmax(120px, 1.2fr) repeat(3, minmax(0, 1fr)) minmax(80px, .8fr); }
  .ribbonArea:nth-of-type(n+4) { display: none; }
  .materialGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materialCarousel .materialCard { flex-basis: calc((100% - 16px) / 2); }
  .areas, .businessProfile { grid-template-columns: 1fr; gap: 38px; }
  .emirates > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cityHero, .cityMaterials, .cityCoverage { grid-template-columns: 1fr; }
  .cityHero aside { max-width: 420px; }
}

@media (max-width: 680px) {
  .utility { justify-content: center; font-size: 11px; }
  .utility span:last-child { display: none; }
  .header { height: 66px; padding: 0 14px; }
  .logoLink img { width: 175px; }
  .headerCta { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; font-size: 0; }
  .headerCta::before { content: "☎"; font-size: 17px; }
  .heroCopy { min-height: 520px; padding: 54px 20px 76px; justify-content: flex-end; }
  h1 { font-size: clamp(40px, 13vw, 58px); }
  h2 { font-size: clamp(30px, 10vw, 42px); }
  .heroActions { margin-top: 22px; }
  .heroActions .button { flex: 1; min-width: 130px; }
  .proof { margin-top: 24px; }
  .areaRibbon { width: calc(100% - 20px); margin-top: -24px; min-height: 68px; grid-template-columns: 1fr auto; padding: 10px 14px; }
  .ribbonArea { display: none !important; }
  .section { padding: 50px 18px; }
  .intro, .processHead, .quote, .why, .cityQuote { grid-template-columns: 1fr; }
  .intro { gap: 12px; }
  .materialGrid, .stepGrid { grid-template-columns: 1fr; gap: 14px; }
  .carouselHeading { margin-bottom: 12px; }
  .carouselControls button { width: 38px; height: 38px; }
  .materialCarousel .materialGrid { gap: 12px; }
  .materialCarousel .materialCard { flex-basis: 100%; }
  .materialCard > img { height: 155px; }
  .materialCard > div { padding: 20px; }
  .materialCard p { min-height: 0; }
  .process { width: calc(100% - 20px); padding: 48px 20px; border-radius: 14px; }
  .stepGrid { margin-top: 32px; }
  .areas { gap: 28px; }
  .areaList { grid-template-columns: 1fr; }
  .whyPanel, .whyStats { padding: 34px 22px; }
  .whyPanel { border-radius: 14px 14px 0 0; }
  .whyStats { border-radius: 0 0 14px 14px; }
  .whyStats div { align-items: center; }
  .profileDetails p { gap: 14px; font-size: 13px; }
  .emirates > div { grid-template-columns: 1fr; }
  .emirates > div a { border-right: 0; }
  .seoContent { width: calc(100% - 20px); margin-bottom: 50px; }
  .seoColumns { grid-template-columns: 1fr; gap: 2px; }
  .quote { padding: 50px 18px 92px; gap: 30px; }
  .quote form { grid-template-columns: 1fr; }
  .quote label, .quote label:nth-of-type(4), .quote .button, .formNote { grid-column: 1; }
  footer, .cityPage footer { grid-template-columns: 1fr 1fr; padding: 42px 18px 84px; gap: 28px 18px; }
  footer > div:first-child, .copyright, .cityPage footer .copyright { grid-column: 1 / -1; }
  .cityHero { min-height: auto; padding: 54px 18px; gap: 34px; }
  .cityHero h1 { font-size: clamp(38px, 13vw, 52px); }
  .cityCoverage { width: calc(100% - 20px); padding: 48px 20px; border-radius: 14px; }
  .cityMaterialList, .cityAreaGrid { grid-template-columns: 1fr; }
  .cityQuote .button { width: 100%; white-space: normal; }
  .floatingContact { left: 0; right: 0; bottom: 0; grid-template-columns: 1fr 1fr; gap: 0; height: 58px; }
  .floatingContact a { width: auto; min-width: 0; height: 58px; border-radius: 0; font-size: 15px; }
  .floatingContact a span { display: inline; }
  .cookieBanner { left: 8px; bottom: 66px; width: calc(100% - 16px); grid-template-columns: 1fr; }
  .cookieActions { width: 100%; }
  .cookieActions button { flex: 1; }
}

/* Final compact design and cache-safe release */
:root {
  --display-font: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", Inter, Arial, sans-serif;
}

body {
  font-family: var(--display-font);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.header {
  min-height: 74px;
}

.logoLink img {
  width: 200px;
}

.hero,
.heroImage {
  min-height: 520px;
}

.heroCopy {
  padding-top: 56px;
  padding-bottom: 62px;
}

h1 {
  max-width: 560px;
  font-size: clamp(44px, 4.7vw, 62px);
}

h2 {
  font-size: clamp(34px, 3.6vw, 50px);
}

.section {
  width: min(calc(100% - 36px), 1180px);
  padding-block: 62px;
}

.intro {
  padding-bottom: 28px;
}

.materialCarousel {
  padding-top: 0;
  padding-bottom: 68px;
}

.materialViewport {
  contain: layout paint;
  border-radius: 14px;
}

.materialCard {
  overflow: hidden;
}

.materialCard > img {
  height: 160px;
}

.materialCard > div {
  padding: 18px 20px 20px;
}

.materialCard .materialIcon {
  width: 40px;
  height: 40px;
  top: -20px;
}

.materialCard h3 {
  margin-top: 12px;
}

.process {
  padding: 52px 40px;
}

.processHead {
  gap: 38px;
}

.stepGrid {
  margin-top: 38px;
  gap: 16px;
}

.stepGrid article {
  padding: 18px 20px;
}

.whyPanel,
.whyStats {
  padding: 42px;
}

.quote {
  gap: 50px;
}

.floatingContact {
  right: 16px;
  bottom: 16px;
}

.cookieBanner {
  width: min(480px, calc(100% - 28px));
}

@media (max-width: 980px) {
  .hero,
  .heroImage {
    min-height: 500px;
  }

  .heroCopy {
    min-height: 500px;
  }
}

@media (max-width: 680px) {
  body {
    padding-bottom: 58px;
  }

  .header {
    min-height: 64px;
  }

  .logoLink img {
    width: 168px;
  }

  .heroCopy {
    min-height: 470px;
    padding: 46px 20px 58px;
  }

  h1 {
    font-size: clamp(38px, 11.6vw, 48px);
  }

  .section {
    width: min(calc(100% - 28px), 1180px);
    padding: 46px 0;
  }

  .materialCarousel {
    padding-top: 0;
    padding-bottom: 54px;
  }

  .materialCard > img {
    height: 145px;
  }

  .materialCard > div {
    padding: 17px 18px 18px;
  }

  .process {
    padding: 42px 18px;
  }

  .whyPanel,
  .whyStats {
    padding: 32px 20px;
  }

  .floatingContact,
  .floatingContact a {
    height: 56px;
  }

  .cookieBanner {
    bottom: 64px;
  }
}

/* Small refinements: unobstructed mobile controls, light maps and subtle depth */
.process {
  background:
    radial-gradient(circle at 92% 8%, rgba(242, 118, 46, .13), transparent 28%),
    #111210;
}

.whyPanel {
  background: linear-gradient(145deg, #e66a23, #c94e11);
}

.seoContent {
  background:
    radial-gradient(circle at 90% 12%, rgba(221, 100, 31, .11), transparent 30%),
    linear-gradient(145deg, #f7efe3, #f2e7d7);
  box-shadow: inset 0 0 0 1px rgba(180, 77, 19, .08);
}

.cityCoverage {
  background:
    radial-gradient(circle at 88% 15%, rgba(242, 118, 46, .12), transparent 30%),
    #111210;
}

.cityHero {
  position: relative;
  isolation: isolate;
  background-color: #0b0c0b;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: min(38vw, 470px) auto;
}

.cityHeroAbuDhabi {
  --city-map: url("/maps/abu-dhabi-map.svg");
}

.cityHeroFujairah {
  --city-map: url("/maps/fujairah-map.svg");
}

.cityHeroRasAlKhaimah {
  --city-map: url("/maps/ras-al-khaimah-map.svg");
}

.cityHeroUmmAlQuwain {
  --city-map: url("/maps/umm-al-quwain-map.svg");
}

.cityHero::after {
  content: "";
  width: min(38vw, 450px);
  aspect-ratio: 1.4;
  position: absolute;
  top: 50%;
  right: 2%;
  z-index: 0;
  transform: translateY(-50%);
  background: var(--city-map) center / contain no-repeat;
  opacity: .68;
  pointer-events: none;
}

.cityHero > * {
  position: relative;
  z-index: 1;
}

.menuToggle {
  width: 42px;
  height: 42px;
  padding: 9px;
  display: none;
  place-content: center;
  gap: 5px;
  border: 1px solid #4a4c46;
  border-radius: 10px;
  background: #171917;
  color: white;
  cursor: pointer;
}

.menuToggle span {
  width: 20px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: currentColor;
  transition: transform .22s ease, opacity .22s ease;
}

.header.menuOpen .menuToggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header.menuOpen .menuToggle span:nth-child(2) {
  opacity: 0;
}

.header.menuOpen .menuToggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.floatingContact a {
  position: relative;
}

.floatingContact a span {
  width: auto;
  height: auto;
  padding: 7px 10px;
  position: absolute;
  right: calc(100% + 9px);
  display: block;
  overflow: visible;
  clip: auto;
  border-radius: 7px;
  background: #111310;
  color: white;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(5px);
  transition: opacity .18s ease, transform .18s ease;
}

.floatingContact a:hover span,
.floatingContact a:focus-visible span {
  opacity: 1;
  transform: none;
}

@media (max-width: 1050px) {
  .menuToggle {
    margin-left: auto;
    display: grid;
  }

  .headerCta {
    margin-left: 0;
  }

  .header nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 14px;
    left: 14px;
    z-index: 20;
    padding: 10px;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    background: rgba(14, 16, 13, .98);
    border: 1px solid #3c3f37;
    border-radius: 13px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
  }

  .header.menuOpen nav {
    display: grid;
  }

  .header nav a {
    padding: 12px;
    border: 0;
    border-radius: 8px;
    background: #20231d;
    text-align: center;
  }
}

@media (max-width: 680px) {
  body {
    padding-bottom: 0;
  }

  footer,
  .cityPage footer {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .floatingContact {
    left: auto;
    right: 10px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
    height: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
  }

  .floatingContact a {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    font-size: 16px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .26);
  }

  .floatingContact a span {
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .cookieBanner {
    bottom: 8px;
  }

  .cityHero {
    background-position: right 28px;
    background-size: 280px auto;
  }

  .cityHero::after {
    width: 290px;
    top: 36%;
    right: -24px;
    opacity: .52;
  }

  .header {
    gap: 8px;
  }

  .menuToggle {
    width: 40px;
    height: 40px;
    margin-left: auto;
  }

  .header nav {
    grid-template-columns: 1fr;
  }
}

/* Contact icon release */
.headerContactIcons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.headerIcon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  border-radius: 50%;
  color: white;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.headerIcon:hover,
.headerIcon:focus-visible {
  transform: translateY(-2px);
}

.headerWhatsapp {
  background: #20ad5a;
  border-color: #20ad5a;
}

.headerWhatsapp:hover,
.headerWhatsapp:focus-visible {
  background: #16964a;
  border-color: #16964a;
}

.headerPhone {
  background: transparent;
  border-color: var(--orange);
  color: var(--orange-bright);
}

.headerPhone:hover,
.headerPhone:focus-visible {
  background: var(--orange);
  color: white;
}

.contactGlyph {
  width: 1.18em;
  height: 1.18em;
  display: block;
  flex: none;
  fill: currentColor;
  stroke: none;
}

.button .contactGlyph {
  width: 1.22em;
  height: 1.22em;
}

.floatingContact a {
  overflow: visible;
}

.floatingContact a span {
  padding: 5px 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .01em;
  opacity: .96;
  transform: none;
}

.floatingContact a:hover span,
.floatingContact a:focus-visible span {
  opacity: 1;
  background: #050605;
}

.floatingContact .contactGlyph {
  width: 21px;
  height: 21px;
}

@media (max-width: 1050px) {
  .headerContactIcons {
    margin-left: 0;
  }
}

@media (max-width: 680px) {
  .headerContactIcons {
    gap: 6px;
  }

  .headerIcon {
    width: 40px;
    height: 40px;
  }

  .floatingContact a span {
    right: calc(100% + 7px);
    padding: 4px 6px;
    font-size: 10px;
  }
}

@media (max-width: 400px) {
  .header {
    padding-inline: 12px;
    gap: 6px;
  }

  .logoLink img {
    width: 142px;
  }

  .menuToggle,
  .headerIcon {
    width: 36px;
    height: 36px;
  }

  .menuToggle {
    padding: 7px;
  }
}

/* Desktop floating contact buttons */
@media (min-width: 681px) {
  .floatingContact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .floatingContact a {
    width: 176px;
    min-width: 176px;
    height: 50px;
    padding: 0 16px;
    justify-content: flex-start;
    gap: 10px;
    border-radius: 12px;
  }

  .floatingContact a span {
    position: static;
    padding: 0;
    background: transparent;
    color: white;
    font-size: 13px;
    opacity: 1;
    transform: none;
  }

  .floatingContact a:hover span,
  .floatingContact a:focus-visible span {
    background: transparent;
  }
}

/* Homepage emirate maps and dedicated-page scrap imagery */
.emirates > div {
  gap: 10px;
  border: 0;
}

.emirates > div a {
  min-height: 120px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 13px;
  background:
    linear-gradient(90deg, rgba(8, 9, 8, .98), rgba(8, 9, 8, .78) 56%, rgba(8, 9, 8, .34)),
    var(--emirate-map) right -24px center / 205px auto no-repeat,
    #111210;
  color: var(--cream);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
  box-shadow: 0 10px 24px rgba(21, 18, 13, .12);
}

.emirates > div a:nth-child(1) {
  --emirate-map: url("/maps/abu-dhabi-map.svg");
}

.emirates > div a:nth-child(2) {
  --emirate-map: url("/maps/fujairah-map.svg");
}

.emirates > div a:nth-child(3) {
  --emirate-map: url("/maps/ras-al-khaimah-map.svg");
}

.emirates > div a:nth-child(4) {
  --emirate-map: url("/maps/umm-al-quwain-map.svg");
}

.emirates > div a:hover,
.emirates > div a:focus-visible {
  background:
    linear-gradient(90deg, rgba(180, 77, 19, .98), rgba(180, 77, 19, .78) 56%, rgba(180, 77, 19, .34)),
    var(--emirate-map) right -16px center / 215px auto no-repeat,
    #b44d13;
  color: white;
}

.cityHero {
  background:
    linear-gradient(90deg, rgba(6, 7, 6, .96) 0%, rgba(6, 7, 6, .84) 48%, rgba(6, 7, 6, .58) 100%),
    var(--city-photo) center / cover no-repeat;
}

.cityHero h1,
.cityHero > div > p {
  text-shadow: 0 3px 18px rgba(0, 0, 0, .82);
}

.cityHero aside {
  background: rgba(5, 6, 5, .8);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28);
  backdrop-filter: blur(4px);
}

.cityHeroAbuDhabi {
  --city-photo: url("/images/iron-steel.webp");
}

.cityHeroFujairah {
  --city-photo: url("/images/copper.webp");
}

.cityHeroRasAlKhaimah {
  --city-photo: url("/images/aluminium.webp");
}

.cityHeroUmmAlQuwain {
  --city-photo: url("/images/appliances.webp");
}

.cityHero::after {
  display: none;
}

@media (max-width: 680px) {
  .emirates > div {
    gap: 8px;
  }

  .emirates > div a {
    min-height: 92px;
    background:
      linear-gradient(90deg, rgba(8, 9, 8, .98), rgba(8, 9, 8, .72) 62%, rgba(8, 9, 8, .3)),
      var(--emirate-map) right -14px center / 175px auto no-repeat,
      #111210;
  }

  .cityHero {
    background:
      linear-gradient(rgba(6, 7, 6, .9), rgba(6, 7, 6, .82)),
      var(--city-photo) center / cover no-repeat;
  }
}

/* Keep the mobile contact controls visible immediately above cookie consent. */
@media (max-width: 680px) {
  .floatingContact {
    transition: bottom .25s ease;
  }

  body.cookieNoticeVisible .floatingContact {
    bottom: calc(var(--cookie-contact-offset, 164px) + env(safe-area-inset-bottom));
  }
}

/* Readable, search-focused service copy for Dubai and the emirate pages. */
.seoColumns h3 {
  margin: 0 0 12px;
  color: #171917;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
}

.seoColumns p {
  margin: 0 0 18px;
}

.seoNote {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid #cfc1ad;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 680px) {
  .seoColumns h3 {
    margin-top: 10px;
    font-size: 20px;
  }
}

.materialCard h3 a {
  color: inherit;
  text-decoration: none;
}

.materialCard h3 a:hover,
.materialCard h3 a:focus-visible {
  color: var(--orange);
}

.guideHero {
  --city-photo: url("/images/iron-steel.webp");
}

.guideContent {
  margin-top: 64px;
}

.guideLinks {
  padding-top: 20px;
}

@media (max-width: 680px) {
  .guideContent {
    margin-top: 46px;
  }
}

/* Fast, responsive blog and homepage post cards. */
.blogHero { padding: clamp(72px,9vw,130px) max(6vw,24px); color:#f7efe2; background:linear-gradient(100deg,rgba(7,8,7,.96),rgba(7,8,7,.7)),url('/images/copper.webp') center/cover; }
.blogHero h1,.articleHeader h1 { max-width:900px; margin:12px 0 18px; font-size:clamp(42px,7vw,86px); line-height:.95; }
.blogHero>p:last-child,.articleHeader>p:last-child { max-width:700px; font-size:clamp(18px,2.2vw,24px); line-height:1.55; }
.latestPostsHead { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.latestPostsHead h2,.blogIntro h2 { margin:7px 0 0; }
.blogGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.blogCard { overflow:hidden; background:#fff; border:1px solid #ddcfbc; border-radius:4px; box-shadow:0 12px 36px rgba(29,19,10,.07); }
.blogCard img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.blogCard>div { padding:22px; }
.blogCard time { display:block; margin-bottom:8px; color:#9f4619; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.blogCard h2,.blogCard h3 { margin:0 0 10px; font-size:clamp(20px,2vw,26px); line-height:1.15; }
.blogCard h2 a,.blogCard h3 a { color:#161816; text-decoration:none; }
.blogCard p { margin:0 0 15px; color:var(--muted); line-height:1.65; }
.blogListing { padding-top:70px; padding-bottom:80px; }
.blogIntro { margin-bottom:30px; }
.blogCta { display:flex; align-items:center; justify-content:space-between; gap:30px; color:#f7efe2; background:#101210; }
.blogCta h2 { margin:6px 0 0; }
.articlePage { background:#fbf8f2; }
.articleHeader { padding:70px max(8vw,24px) 55px; color:#f7efe2; background:#101210; }
.articleBack { display:inline-block; margin-bottom:38px; color:#f47a31; font-weight:800; text-decoration:none; }
.articleImage { display:block; width:min(1100px,calc(100% - 48px)); max-height:620px; margin:45px auto; object-fit:cover; }
.articleBody { width:min(760px,calc(100% - 48px)); margin:0 auto; padding:0 0 90px; color:#2b2d2b; font-size:18px; line-height:1.8; }
.articleBody aside { margin-top:45px; padding:28px; color:#f7efe2; background:#101210; }
.articleBody aside strong { font-size:25px; }
.articleBody aside .button { margin-top:8px; }
.articleMissing { min-height:60vh; }
@media(max-width:900px){.blogGrid{grid-template-columns:repeat(2,minmax(0,1fr));}.blogCta{align-items:flex-start;flex-direction:column;}}
@media(max-width:620px){.blogGrid{grid-template-columns:1fr}.latestPostsHead{align-items:flex-start;flex-direction:column}.blogHero{padding-top:58px;padding-bottom:65px}.blogHero h1,.articleHeader h1{font-size:44px}.articleImage{width:calc(100% - 30px);margin:24px auto}.articleBody{width:calc(100% - 36px);font-size:17px}.blogCta .heroActions{width:100%;}}