:root {
  --brand: #d2354f;
  --brand-dark: #a5263c;
  --brand-soft: #f7e9ec;
  --content-width: 1280px;
  --pattern-line: rgba(210,53,79,.065);
}

html { max-width: 100%; overflow-x: hidden; scrollbar-gutter: stable; }
body { max-width: 100%; overflow-x: hidden; }
body.home-page { --home-accent: var(--brand); --home-accent-dark: var(--brand-dark); --home-accent-soft: var(--brand-soft); }

.shell, .home-page .shell, .inner-page .shell { width: min(var(--content-width), calc(100% - 64px)); }
.site-header, .home-page .site-header, .inner-page .site-header { height: 92px; background: rgba(255,255,255,.985); border-bottom: 1px solid #e5e2dc; }
.nav-wrap, .header-inner, .home-page .nav-wrap, .inner-page .header-inner { height: 100%; }

.brand-wordmark, .home-page .brand-wordmark, .inner-page .brand-wordmark {
  display: block; width: 210px; min-width: 210px; height: 56px; overflow: visible;
  background: url("assets/dubau-wordmark.png") center / 210px auto no-repeat;
}
.brand-wordmark img, .home-page .brand-wordmark img, .inner-page .brand-wordmark img { width: 100%; height: 100%; opacity: 0; }
.main-nav, .site-nav, .home-page .main-nav { gap: 32px; }
.menu-toggle { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 0; background: #fff; font-size: 0; }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { content: ""; display: block; width: 20px; height: 2px; margin: 5px auto; background: var(--ink); }

.nav-cta, .nav-contact, .home-page .nav-cta, .site-nav .nav-contact,
.button-primary, .home-page .button-primary, .button-yellow, .reference-toggle {
  color: #fff; background: var(--brand); border-color: var(--brand); border-radius: 3px;
}
.nav-cta:hover, .nav-contact:hover, .home-page .nav-cta:hover, .site-nav .nav-contact:hover,
.button-primary:hover, .home-page .button-primary:hover, .button-yellow:hover, .reference-toggle:hover {
  color: #fff; background: var(--brand-dark); border-color: var(--brand-dark);
}
.home-page .main-nav > a:hover:not(.nav-cta), .home-page .main-nav > a.is-active,
.site-nav a:hover:not(.nav-contact), .site-nav a[aria-current="page"] { color: var(--brand); border-color: var(--brand); }

.home-hero, .home-about, .home-services, .inner-page .subhero, .inner-page .page-title,
.inner-page .service-detail, .inner-page .references, .inner-page .contact-section, .inner-page .privacy-section {
  background-color: #fbfaf8;
  background-image:
    radial-gradient(circle at 0 100%, transparent 0 94px, rgba(210,53,79,.055) 95px, rgba(210,53,79,.055) 96px, transparent 97px),
    linear-gradient(122deg, transparent 0 49.75%, rgba(210,53,79,.045) 49.9%, rgba(210,53,79,.045) 50.1%, transparent 50.25%);
  background-position: 0 0, 150px 0;
  background-size: 460px 360px, 560px 300px;
}
.home-about, .inner-page .service-detail, .inner-page .references,
.inner-page .contact-section, .inner-page .privacy-section { background-color: #f4f2ee; }

.home-hero::before, .home-about::before, .home-hero__visual::after, .home-services::after,
.inner-page .subhero::after, .inner-page .page-title::after, .inner-page .service-detail::after,
.inner-page .references::after, .inner-page .contact-section::after, .subhero figure::before { display: none; }

.home-hero__visual img, .section-photo img, .subhero figure img, .subhero-photo img, .page-title-photo img {
  border: 0; border-radius: 0; box-shadow: none;
}
.home-hero { padding: 58px 0 64px; }
.home-hero__grid { grid-template-columns: .88fr 1.12fr; gap: clamp(54px,6vw,92px); }
.home-hero__visual img { height: clamp(460px,42vw,560px); }
.home-section { padding: 82px 0; }
.home-about__grid { grid-template-columns: 1fr 1fr; gap: clamp(54px,7vw,96px); }
.section-photo img { height: 410px; }

.inner-page .subhero, .inner-page .page-title { padding: 58px 0; color: var(--ink); border: 0; }
.inner-page .subhero-grid, .inner-page .page-title-inner, .inner-page .page-title-inner--compact {
  grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(54px,6vw,92px);
}
.inner-page .subhero figure img, .inner-page .page-title-photo img { height: 390px; object-fit: cover; }
.inner-page .section { padding: 76px 0; }
.site-footer, .home-page .site-footer, .inner-page .site-footer { border-top: 4px solid var(--brand); }

.home-references .reference-card::before,
.reference-feature::before {
  display: block;
  padding: 24px 28px;
  text-align: right;
}

@media (max-width: 900px) {
  .shell, .home-page .shell, .inner-page .shell { width: min(var(--content-width), calc(100% - 40px)); }
  .home-hero__grid, .home-about__grid, .inner-page .subhero-grid,
  .inner-page .page-title-inner, .inner-page .page-title-inner--compact { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 700px) {
  .shell, .home-page .shell, .inner-page .shell { width: calc(100% - 30px); }
  .site-header, .home-page .site-header, .inner-page .site-header { height: 72px; }
  .brand-wordmark, .home-page .brand-wordmark, .inner-page .brand-wordmark {
    width: 158px; min-width: 158px; height: 43px; background-size: 158px auto;
  }
  .home-hero__grid, .home-about__grid, .inner-page .subhero-grid,
  .inner-page .page-title-inner, .inner-page .page-title-inner--compact,
  .home-hero__copy, .home-about__content, .subhero-copy, .page-title-copy,
  .home-hero__visual, .section-photo, .subhero figure, .page-title-photo { min-width: 0; }
  .home-hero, .home-about, .home-services, .inner-page .subhero, .inner-page .page-title,
  .inner-page .service-detail, .inner-page .references, .inner-page .contact-section, .inner-page .privacy-section {
    background-position: 0 0, 70px 0;
    background-size: 300px 250px, 360px 230px;
  }
  .home-hero { padding: 34px 0 42px; }
  .home-hero__copy h1 { font-size: clamp(38px,12vw,48px); }
  .home-hero__visual img { height: 300px; }
  .home-section { padding: 56px 0; }
  .section-photo img { height: 260px; }
  .inner-page .subhero, .inner-page .page-title { padding: 36px 0; }
  .inner-page .subhero-copy h1, .inner-page .page-title h1 { font-size: clamp(34px,10vw,43px); }
  .inner-page .subhero figure img, .inner-page .page-title-photo img { height: 230px; }
  .inner-page .section { padding: 52px 0; }
  .service-rail, .service-rail--three, .reference-grid, .service-detail-grid, .reference-showcase {
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .service-rail::-webkit-scrollbar, .reference-grid::-webkit-scrollbar,
  .service-detail-grid::-webkit-scrollbar, .reference-showcase::-webkit-scrollbar { display: none; }
  .contact-card, .contact-layout, .privacy-grid { display: grid; grid-template-columns: 1fr; }
}