/**
 * Theme: applies global design system to all components.
 * Load after design-system.css. Full visual reset — no old look preserved.
 */

/* ─── HERO ───────────────────────────────────────────────────────────────── */
.hero-container {
  /* Align all pages with homepage hero scale and layout */
  min-height: 92vh;
  max-height: 920px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  margin: 0 auto;
  background-color: var(--ds-bg) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  box-shadow: none !important;
}

.hero-image-wrapper,
.hero-container .hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  transform: none;
  text-align: left;
  padding: clamp(2.5rem, 6vw, 4.8rem) var(--ds-container-gutter)
    clamp(3rem, 8vw, 5.5rem);
  max-width: var(--ds-container-max);
  margin: 0 auto;
  width: 100%;
}

/* ─── PRODUCT PAGES BACKGROUND ───────────────────────────────────────────── */
body.page-product {
  background-color: var(--ds-bg);
}

.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(12, 12, 12, 0.2) 0%,
    rgba(12, 12, 12, 0.55) 50%,
    rgba(12, 12, 12, 0.9) 100%
  ) !important;
}

.hero-title {
  font-family: var(--ds-font-display) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: var(--ds-tracking-wide) !important;
  color: var(--ds-text) !important;
  text-shadow: none !important;
  animation: hero-fade-up var(--ds-motion-reveal-duration) var(--ds-ease-out) both;
}

.hero-subtitle {
  font-family: var(--ds-font-body) !important;
  font-size: var(--ds-text-xl) !important;
  font-weight: 500 !important;
  letter-spacing: var(--ds-tracking-wider) !important;
  color: var(--ds-text) !important;
  text-shadow: none !important;
  animation: hero-fade-up var(--ds-motion-reveal-duration) var(--ds-ease-out) 0.12s both;
}

.hero-intro {
  font-size: var(--ds-text-sm) !important;
  color: var(--ds-text-muted) !important;
  line-height: var(--ds-leading-relaxed);
}

.hero-cta {
  display: inline-block;
  padding: var(--ds-space-3) var(--ds-space-8);
  font-family: var(--ds-font-body) !important;
  font-size: var(--ds-text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: var(--ds-tracking-wider) !important;
  text-transform: uppercase;
  color: var(--ds-text);
  border: 1px solid var(--ds-border-strong);
  background: transparent !important;
  border-radius: var(--ds-radius-md) !important;
  box-shadow: none !important;
  transition: border-color var(--ds-duration-slow) var(--ds-ease-out),
    color var(--ds-duration-slow) var(--ds-ease-out),
    transform var(--ds-duration-slow) var(--ds-ease-out);
}

.hero-cta:hover {
  border-color: var(--ds-accent) !important;
  color: var(--ds-accent) !important;
  background: transparent !important;
  transform: translateY(var(--ds-motion-hover-y));
  box-shadow: none !important;
}

.hero-image-wrapper img,
.hero-container .hero-image {
  transition: transform var(--ds-duration-reveal) var(--ds-ease-out);
}

.hero-container:hover .hero-image-wrapper img,
.hero-container:hover .hero-image {
  transform: scale(var(--ds-motion-hover-scale-img)) translateY(calc(var(--hero-parallax) * 1px));
}

/* Static content pages (About, Contact) */
.page-static-hero .hero-container {
  min-height: 92vh;
  max-height: 920px;
  border-bottom: none !important;
}

.page-static-hero .hero-image {
  object-fit: cover;
  object-position: center 30%;
}

.page-static-hero .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(12, 12, 12, 0.2) 0%,
    rgba(12, 12, 12, 0.7) 55%,
    rgba(12, 12, 12, 0.98) 100%
  ) !important;
}

/* Match homepage hero typography scale on static pages */
.page-static-hero .hero-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.08;
}

.page-static-hero .hero-subtitle {
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}

.page-static-hero .hero-title,
.page-static-hero .hero-subtitle,
.page-static-hero .hero-cta {
  animation: hero-fade-up var(--ds-motion-reveal-duration) var(--ds-ease-out) both;
}

.page-static-hero .hero-subtitle {
  animation-delay: 0.12s;
}

.page-static-hero .hero-cta {
  animation-delay: 0.24s;
}

.page-static-hero .hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  transform: none;
  text-align: left;
  padding: clamp(3rem, 8vw, 6rem) var(--ds-container-gutter) clamp(4rem, 10vw, 7rem);
  max-width: var(--ds-container-max);
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 768px) {
  .page-static-hero .hero-content {
    text-align: center;
    padding: 2rem var(--ds-space-4) 3rem;
  }
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(var(--ds-motion-reveal-y)); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── NAV ────────────────────────────────────────────────────────────────── */
nav {
  font-family: var(--ds-font-body) !important;
  background: var(--ds-bg-elevated) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  box-shadow: none !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

nav.nav--transparent {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

nav.nav--transparent .nav-links ul li a,
nav.nav--transparent .search-bar input[type=search] {
  color: var(--ds-text);
}

.nav-links ul li a,
.dropdown-column a {
  color: #ffffff !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  transition: color var(--ds-duration-fast) var(--ds-ease);
}

.search-bar input[type=search] {
  font-size: 0.85rem !important;
}

.nav-links ul li a:hover,
.dropdown-column a:hover {
  color: var(--ds-accent) !important;
}

.dropdown-column h3 {
  color: var(--ds-text-muted) !important;
  font-family: var(--ds-font-body) !important;
  font-weight: 500 !important;
}

nav,
.nav-links ul li .dropdown {
  background: var(--ds-bg-elevated) !important;
}

.dropdown {
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-md) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

nav.nav--solid {
  background: rgba(12, 12, 12, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ds-border) !important;
  padding-top: var(--ds-space-2) !important;
  padding-bottom: var(--ds-space-2) !important;
}

nav.nav--solid img {
  max-height: 40px !important;
  width: auto !important;
}

/* Search bar: same as home page (style.css) on product pages */
.search-bar {
  position: relative;
  margin: 0 20px;
  flex: 0.5;
  min-width: 250px;
}
.search-bar form {
  display: flex;
  position: relative;
}
.search-bar input[type=search] {
  padding: 10px 40px 10px 15px;
  background: rgba(30, 30, 30, 0.7);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 25px;
  outline: 0;
  width: 95%;
  max-width: 280px;
  color: #e0e0e0;
  font-size: 13px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.search-bar input[type=search]::placeholder {
  color: #a0a0a0;
  opacity: 0.7;
}
.search-bar input[type=search]:focus {
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
  background: rgba(40, 40, 40, 0.9);
}
.search-bar button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
  transition: 0.3s;
  font-size: 16px;
}
.search-bar button:hover {
  color: gold;
  transform: translateY(-50%) scale(1.1);
}
.search-bar #searchResults {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 5px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}
.search-bar #searchResults:not(:empty) {
  display: block;
}
.search-bar .search-results,
.search-bar #searchResults {
  background: linear-gradient(152deg, var(--medium-gray, #2a2a2a) 0%, var(--dark-gray, #1a1a1a) 100%);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  padding: 0;
}
.search-bar .result-category {
  padding: 10px 15px;
  background: rgba(255, 215, 0, 0.1);
  color: gold;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 215, 0, 0.3);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.search-bar .search-result-item {
  display: block;
  padding: 12px 15px;
  color: #e0e0e0;
  border-bottom: 1px solid rgba(255, 215, 0, 0.1);
  transition: 0.3s;
  font-size: 14px;
}
.search-bar .search-result-item:hover {
  background: rgba(255, 215, 0, 0.1);
  color: gold;
  padding-left: 20px;
}

.search-results {
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-md) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.search-result-item {
  color: var(--ds-text) !important;
  border-bottom-color: var(--ds-border) !important;
}

.search-result-item:hover {
  background: var(--ds-bg-soft) !important;
  color: var(--ds-accent) !important;
}

.result-category {
  background: var(--ds-bg-soft) !important;
  color: var(--ds-accent) !important;
  border-bottom-color: var(--ds-border) !important;
}

.menu-toggle span {
  background: var(--ds-text-muted) !important;
  border-radius: var(--ds-radius-sm);
}

/* ─── SECTIONS & SHOWCASE ─────────────────────────────────────────────────── */
#targetSection,
.gallery-showcase,
.image-gallery {
  font-family: var(--ds-font-body) !important;
  background: var(--ds-bg) !important;
  padding-top: var(--ds-section-y) !important;
  padding-bottom: var(--ds-section-y) !important;
}

#targetSection h2,
.gallery-showcase h2,
.image-gallery h2,
.gallery-banner h2 {
  font-family: var(--ds-font-display) !important;
  font-weight: 500 !important;
  color: var(--ds-text) !important;
  letter-spacing: var(--ds-tracking-tight) !important;
}

#targetSection h2::after {
  display: none !important;
}

.section-subtitle,
.section-intro,
.divider-text,
.showcase-text p,
.image-caption {
  color: var(--ds-text-muted) !important;
  font-family: var(--ds-font-body) !important;
  line-height: var(--ds-leading-relaxed);
}

.showcase-text h3,
.epic-title {
  color: var(--ds-text) !important;
  font-family: var(--ds-font-display) !important;
  font-weight: 500 !important;
}

.project-category {
  color: var(--ds-text-muted) !important;
  font-family: var(--ds-font-body) !important;
  font-weight: 500 !important;
}

.gallery-showcase .container,
.image-gallery .container {
  max-width: var(--ds-container-max);
  padding-left: var(--ds-container-gutter);
  padding-right: var(--ds-container-gutter);
}

.gallery-showcase::before {
  display: none !important;
}

.showcase-row {
  margin-bottom: var(--ds-space-20);
  border-top: 1px solid var(--ds-border);
}

.showcase-row:first-of-type {
  border-top: none;
}

.showcase-row img {
  border-radius: var(--ds-radius-xl) !important;
  border: none !important;
  box-shadow: var(--ds-shadow-sm) !important;
  transition: transform var(--ds-duration-reveal) var(--ds-ease-out);
}

.showcase-row:hover img {
  transform: scale(var(--ds-motion-hover-scale));
  box-shadow: var(--ds-shadow-md) !important;
}

/* ─── GALLERY BANNER ─────────────────────────────────────────────────────── */
.gallery-banner {
  background: var(--ds-bg-elevated) !important;
  border-top: 1px solid var(--ds-border) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  padding-top: var(--ds-section-y) !important;
  padding-bottom: var(--ds-section-y) !important;
  box-shadow: none !important;
}

.gallery-banner::before {
  display: none !important;
}

.gallery-banner-btn {
  display: inline-block;
  padding: var(--ds-space-3) var(--ds-space-8);
  font-family: var(--ds-font-body) !important;
  font-size: var(--ds-text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: var(--ds-tracking-wider) !important;
  text-transform: uppercase;
  color: var(--ds-text);
  border: 1px solid var(--ds-border-strong);
  background: transparent !important;
  border-radius: var(--ds-radius-md) !important;
  transition: border-color var(--ds-duration-slow) var(--ds-ease-out),
    color var(--ds-duration-slow) var(--ds-ease-out),
    transform var(--ds-duration-slow) var(--ds-ease-out);
}

.gallery-banner-btn:hover {
  border-color: var(--ds-accent) !important;
  color: var(--ds-accent) !important;
  background: transparent !important;
  transform: translateY(var(--ds-motion-hover-y));
}

/* ─── GALLERY GRID ───────────────────────────────────────────────────────── */
.image-gallery .gallery-grid {
  gap: var(--ds-space-6);
}

.image-gallery .gallery-item {
  border-radius: var(--ds-radius-xl);
  overflow: hidden;
  transition: transform var(--ds-duration-slow) var(--ds-ease-out),
    box-shadow var(--ds-duration-slow) var(--ds-ease-out);
}

.image-gallery .gallery-item:hover {
  transform: translateY(var(--ds-motion-hover-y));
  box-shadow: var(--ds-shadow-md);
}

.image-gallery .gallery-item img {
  border: none !important;
  border-radius: var(--ds-radius-xl);
  box-shadow: none !important;
  transition: transform var(--ds-duration-reveal) var(--ds-ease-out);
}

.image-gallery .gallery-item:hover img {
  transform: scale(var(--ds-motion-hover-scale-img));
}

.image-gallery .image-caption {
  font-size: var(--ds-text-sm);
  margin-top: var(--ds-space-2);
}

/* ─── SECTION DIVIDER ────────────────────────────────────────────────────── */
.section-divider {
  background: var(--ds-bg) !important;
}

.section-divider::before {
  display: none !important;
}

.glow-circle {
  background: var(--ds-border) !important;
  box-shadow: none !important;
}

/* ─── LIGHTBOX ───────────────────────────────────────────────────────────── */
.lightbox {
  background: rgba(12, 12, 12, 0.94) !important;
  backdrop-filter: blur(12px);
}

.lightbox img {
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-lg) !important;
}

/* ─── PRODUCT LISTING (art gallery) ────────────────────────────────────── */
/* Container: editorial spacing, no animated underline */
.container:has(.products) {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(3rem, 8vw, 5rem) var(--ds-container-gutter) !important;
}

.container:has(.products) h1 {
  font-family: var(--ds-font-display) !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--ds-text) !important;
  text-align: center !important;
  margin-bottom: clamp(2rem, 5vw, 3.5rem) !important;
  padding-bottom: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  animation: none !important;
}

.container:has(.products) h1::after {
  display: none !important;
}

/* Grid: exactly 4 products per row; new row every 4; empty cells if last row has 1–3 */
.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-flow: row !important;
  gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  padding: 0 !important;
  justify-content: stretch !important;
}

@media (max-width: 1200px) {
  .products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(1.25rem, 4vw, 2rem) !important;
  }
}

@media (max-width: 520px) {
  .products {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* Card: one cell per product — never 5 in a row; last row can have 1–3 + empty space */
.product {
  grid-column: auto !important;
  background: var(--ds-bg-elevated) !important;
  padding: 0 !important;
  border-radius: var(--ds-radius-xl) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: center !important;
  border: 1px solid var(--ds-border) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  height: 100% !important;
  transition: transform var(--ds-duration-slow) var(--ds-ease-out),
    box-shadow var(--ds-duration-slow) var(--ds-ease-out),
    border-color var(--ds-duration-slow) var(--ds-ease-out) !important;
}

.product:hover {
  transform: translateY(var(--ds-motion-hover-y)) !important;
  box-shadow: var(--ds-shadow-md) !important;
  border-color: var(--ds-border-strong) !important;
}

/* Image: fixed height so all product titles align above the button */
.product img {
  width: 100% !important;
  height: 280px !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  transition: transform var(--ds-duration-reveal) var(--ds-ease-out) !important;
}

.product:hover img {
  transform: scale(var(--ds-motion-hover-scale-img)) !important;
}

/* Title: fixed spacing so all names sit at same distance above the button */
.product h3 {
  font-family: var(--ds-font-display) !important;
  font-size: var(--ds-text-lg) !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  color: var(--ds-text) !important;
  margin: 0 1.25rem 1rem !important;
  min-height: 2.5em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: none !important;
  transition: color var(--ds-duration-fast) var(--ds-ease-out) !important;
}

.product:hover h3 {
  color: var(--ds-text) !important;
}

/* Button: invitation style, sticks to bottom for tidy rows */
.product .open-modal {
  align-self: center !important;
  margin: auto 1.25rem 1.5rem !important;
  padding: 0.6rem 1.5rem !important;
  font-family: var(--ds-font-body) !important;
  font-size: var(--ds-text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  background: transparent !important;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: var(--ds-radius-md) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: color var(--ds-duration-slow) var(--ds-ease-out),
    border-color var(--ds-duration-slow) var(--ds-ease-out),
    transform var(--ds-duration-slow) var(--ds-ease-out) !important;
}

.product .open-modal:hover {
  color: var(--ds-accent) !important;
  border-color: var(--ds-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

.product .open-modal::before {
  display: none !important;
}

/* ─── PRODUCT MODAL: Data-Sheet button (أقصى اليمين، نص أبيض) ─────────────── */
.modal-main {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: var(--ds-space-4) !important;
  width: 100% !important;
}
.modal-main > a#downloadPdf {
  width: 100% !important;
  margin-left: 0 !important;
  margin-top: 0.5rem !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding-right: 0 !important;
}
.modal-main .continue-application {
  color: #fff !important;
  margin-left: auto !important;
}

/* Quick view overlay removed by design */

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.luxury-footer {
  background: var(--ds-bg-elevated) !important;
  border-top: 1px solid var(--ds-border) !important;
  padding-top: var(--ds-space-20) !important;
  font-family: var(--ds-font-body) !important;
  box-shadow: none !important;
}

.luxury-footer .light-particles,
.luxury-footer .light-effect {
  display: none !important;
}

.luxury-footer .footer-container {
  max-width: var(--ds-container-max);
  padding-left: var(--ds-container-gutter);
  padding-right: var(--ds-container-gutter);
  gap: var(--ds-space-12);
}

.luxury-footer .brand-tagline,
.luxury-footer .marquee p {
  color: var(--ds-text-muted) !important;
  font-weight: 400 !important;
}

.luxury-divider {
  background: linear-gradient(90deg, transparent, var(--ds-border), transparent) !important;
  height: 1px !important;
}

.luxury-footer .luxury-link {
  color: var(--ds-text-muted) !important;
  transition: color var(--ds-duration-fast) var(--ds-ease),
    transform var(--ds-duration-fast) var(--ds-ease);
}

.luxury-footer .luxury-link:hover {
  color: var(--ds-accent) !important;
  transform: translateX(3px);
}

.luxury-footer .section-title,
.luxury-footer .title-ornament {
  color: var(--ds-text) !important;
}

.title-ornament::after {
  background: var(--ds-accent) !important;
}

.luxury-footer .gold-button {
  border: 1px solid var(--ds-border-strong) !important;
  color: var(--ds-text) !important;
  border-radius: var(--ds-radius-md) !important;
  transition: border-color var(--ds-duration-slow) var(--ds-ease-out),
    color var(--ds-duration-slow) var(--ds-ease-out),
    transform var(--ds-duration-slow) var(--ds-ease-out);
}

.luxury-footer .gold-button:hover {
  border-color: var(--ds-accent) !important;
  color: var(--ds-accent) !important;
  background: transparent !important;
  transform: translateY(var(--ds-motion-hover-y));
  box-shadow: none !important;
}

.luxury-footer .input-group input {
  border-bottom-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
}

.luxury-footer .input-group input:focus + label,
.luxury-footer .input-group input:valid + label {
  color: var(--ds-accent) !important;
}

.luxury-footer .input-group .focus-beam {
  background: var(--ds-accent) !important;
}

.luxury-footer .contact-luxury i,
.luxury-footer .contact-luxury p i {
  color: var(--ds-accent) !important;
}

.copyright-bar {
  border-top: 1px solid var(--ds-border) !important;
  margin-top: var(--ds-space-12);
  padding: var(--ds-space-4) 0 !important;
}

.copyright-bar::before {
  display: none !important;
}

.hologram {
  filter: none !important;
}

/* ─── ABOUT ──────────────────────────────────────────────────────────────── */
.services,
.a-section,
.epic-banner {
  padding-top: var(--ds-section-y) !important;
  padding-bottom: var(--ds-section-y) !important;
  background: var(--ds-bg) !important;
}

.services-text p,
.epic-subtext {
  font-family: var(--ds-font-body) !important;
  color: var(--ds-text-muted) !important;
  line-height: var(--ds-leading-relaxed);
}

.service-box {
  transition: transform var(--ds-duration-slow) var(--ds-ease-out),
    box-shadow var(--ds-duration-slow) var(--ds-ease-out);
}

.service-box:hover {
  transform: translateY(var(--ds-motion-hover-y));
  box-shadow: var(--ds-shadow-md);
}

.epic-btn {
  border: 1px solid var(--ds-border-strong) !important;
  color: var(--ds-text) !important;
  letter-spacing: var(--ds-tracking-wide) !important;
  border-radius: var(--ds-radius-md) !important;
  transition: border-color var(--ds-duration-slow) var(--ds-ease-out),
    color var(--ds-duration-slow) var(--ds-ease-out),
    transform var(--ds-duration-slow) var(--ds-ease-out);
}

.epic-btn:hover {
  border-color: var(--ds-accent) !important;
  color: var(--ds-accent) !important;
  transform: translateY(var(--ds-motion-hover-y));
}

/* ─── GALLERY / PROJECTS PAGE ─────────────────────────────────────────────── */
.project-card {
  border-radius: var(--ds-radius-xl) !important;
  overflow: hidden;
  transition: transform var(--ds-duration-slow) var(--ds-ease-out),
    box-shadow var(--ds-duration-slow) var(--ds-ease-out);
}

.project-card:hover {
  transform: translateY(var(--ds-motion-hover-y));
  box-shadow: var(--ds-shadow-lg);
}

.project-card img {
  transition: transform var(--ds-duration-reveal) var(--ds-ease-out);
}

.project-card:hover img {
  transform: scale(var(--ds-motion-hover-scale-img));
}

.project-card .description {
  background: rgba(12, 12, 12, 0.88) !important;
  color: var(--ds-text) !important;
  font-family: var(--ds-font-body) !important;
  padding: var(--ds-space-5) var(--ds-space-4);
}

.gallery-section h1 {
  font-family: var(--ds-font-display) !important;
  color: var(--ds-text) !important;
}

/* ─── CONTACT ────────────────────────────────────────────────────────────── */
.contact-card,
.contact-info-box .info-section {
  transition: transform var(--ds-duration-slow) var(--ds-ease-out);
}

.contact-card:hover {
  transform: translateY(var(--ds-motion-hover-y));
}

/* ─── REVEAL ANIMATIONS (slow, subtle fade + translate, no bounce) ───────── */
.reveal {
  opacity: 0;
  transform: translateY(var(--ds-motion-reveal-y));
  transition: opacity var(--ds-motion-reveal-duration) var(--ds-ease-out),
    transform var(--ds-motion-reveal-duration) var(--ds-ease-out);
}

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

.gallery-showcase .showcase-row {
  opacity: 0;
  transform: translateY(var(--ds-motion-reveal-y));
  transition: opacity var(--ds-motion-reveal-duration) var(--ds-ease-out),
    transform var(--ds-motion-reveal-duration) var(--ds-ease-out);
}

.gallery-showcase.reveal.revealed .showcase-row {
  opacity: 1;
  transform: translateY(0);
}

.gallery-showcase.reveal.revealed .showcase-row:nth-of-type(1) { transition-delay: 0s; }
.gallery-showcase.reveal.revealed .showcase-row:nth-of-type(2) { transition-delay: var(--ds-motion-stagger); }
.gallery-showcase.reveal.revealed .showcase-row:nth-of-type(3) { transition-delay: calc(var(--ds-motion-stagger) * 2); }
.gallery-showcase.reveal.revealed .showcase-row:nth-of-type(4) { transition-delay: calc(var(--ds-motion-stagger) * 3); }

.image-gallery .gallery-item {
  opacity: 0;
  transform: translateY(var(--ds-motion-reveal-y));
  transition: opacity var(--ds-motion-reveal-duration) var(--ds-ease-out),
    transform var(--ds-motion-reveal-duration) var(--ds-ease-out);
}

.image-gallery.reveal.revealed .gallery-item {
  opacity: 1;
  transform: translateY(0);
}

.image-gallery.reveal.revealed .gallery-item:nth-child(1) { transition-delay: 0s; }
.image-gallery.reveal.revealed .gallery-item:nth-child(2) { transition-delay: var(--ds-motion-stagger); }
.image-gallery.reveal.revealed .gallery-item:nth-child(3) { transition-delay: calc(var(--ds-motion-stagger) * 2); }
.image-gallery.reveal.revealed .gallery-item:nth-child(4) { transition-delay: calc(var(--ds-motion-stagger) * 3); }
.image-gallery.reveal.revealed .gallery-item:nth-child(5) { transition-delay: calc(var(--ds-motion-stagger) * 4); }
.image-gallery.reveal.revealed .gallery-item:nth-child(6) { transition-delay: calc(var(--ds-motion-stagger) * 5); }
.image-gallery.reveal.revealed .gallery-item:nth-child(7) { transition-delay: calc(var(--ds-motion-stagger) * 6); }
.image-gallery.reveal.revealed .gallery-item:nth-child(8) { transition-delay: calc(var(--ds-motion-stagger) * 7); }

.reveal .container > h2,
.reveal .section-intro {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--ds-motion-reveal-duration) var(--ds-ease-out),
    transform var(--ds-motion-reveal-duration) var(--ds-ease-out);
}

.reveal.revealed .container > h2,
.reveal.revealed .section-intro {
  opacity: 1;
  transform: translateY(0);
}

.reveal.revealed .section-intro { transition-delay: var(--ds-motion-stagger); }

.gallery-banner.reveal .gallery-banner-content {
  opacity: 0;
  transform: translateY(var(--ds-motion-reveal-y));
  transition: opacity var(--ds-motion-reveal-duration) var(--ds-ease-out),
    transform var(--ds-motion-reveal-duration) var(--ds-ease-out);
}

.gallery-banner.reveal.revealed .gallery-banner-content {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.revealed,
  .gallery-showcase .showcase-row,
  .gallery-showcase.reveal.revealed .showcase-row,
  .image-gallery .gallery-item,
  .image-gallery.reveal.revealed .gallery-item,
  .reveal .container > h2,
  .reveal .section-intro,
  .reveal.revealed .container > h2,
  .reveal.revealed .section-intro,
  .gallery-banner.reveal .gallery-banner-content,
  .gallery-banner.reveal.revealed .gallery-banner-content {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-title,
  .hero-subtitle {
    animation: none !important;
  }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gallery-showcase .container,
  .image-gallery .container {
    padding-left: var(--ds-space-4);
    padding-right: var(--ds-space-4);
  }
  .showcase-row {
    margin-bottom: var(--ds-space-12);
  }
  .luxury-footer .footer-container {
    padding-left: var(--ds-space-4);
    padding-right: var(--ds-space-4);
  }
}

/* ─── GLOBAL LUXURY COMPACT TUNING ───────────────────────────────────────── */
.hero-title {
  font-size: clamp(2rem, 4.4vw, 3.25rem) !important;
  margin-bottom: 0.45em !important;
}

.hero-subtitle {
  font-size: var(--ds-text-lg) !important;
  margin-bottom: 1.5rem !important;
}

.hero-cta {
  padding: 0.72rem 1.4rem !important;
  font-size: 0.78rem !important;
}

.page-static-hero .hero-container {
  min-height: 66vh !important;
  max-height: 720px !important;
}

.page-static-hero .hero-content {
  padding: clamp(2.25rem, 6vw, 4.25rem) var(--ds-container-gutter) clamp(2.75rem, 7vw, 5rem) !important;
}

nav,
nav.nav--solid,
nav.nav--transparent {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

nav img,
nav.nav--solid img {
  max-height: 36px !important;
  width: auto !important;
}

.nav-links ul li a,
.dropdown-column a {
  font-size: 0.88rem !important;
}

.search-bar {
  min-width: 220px !important;
}

.search-bar input[type=search] {
  padding: 9px 38px 9px 14px !important;
  font-size: 12px !important;
}

/* ─── ABOUT / CONTACT PAGE POLISH ────────────────────────────────────────── */
.page-about .services,
.page-about .a-section,
.page-contact .cards-container {
  width: min(1120px, calc(100% - 2 * var(--ds-container-gutter)));
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-about .services,
.page-about .a-section,
.page-contact .cards-container {
  padding-top: clamp(3.5rem, 7vw, 5rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 5rem) !important;
}

.page-about .services {
  background:
    radial-gradient(circle at top left, rgba(184, 149, 107, 0.08), transparent 28%),
    var(--ds-bg-soft) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-2xl) !important;
  padding-left: clamp(1.2rem, 3vw, 2rem) !important;
  padding-right: clamp(1.2rem, 3vw, 2rem) !important;
}

.page-about .services-container {
  max-width: 100% !important;
  gap: clamp(1.5rem, 4vw, 3rem) !important;
  align-items: stretch !important;
}

.page-about .im2 {
  width: 100% !important;
  max-width: 460px !important;
  border-radius: var(--ds-radius-xl) !important;
}

.page-about .services-text {
  padding: 1.4rem 1.5rem !important;
  border-left: 1px solid var(--ds-border-strong) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.page-about .services-text p,
.page-about .service-box p,
.page-contact .info-section,
.page-contact .contact-luxury p {
  font-size: var(--ds-text-sm) !important;
  line-height: 1.8 !important;
}

.page-about .a-section {
  background: var(--ds-bg) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-about .a-grid {
  gap: 1.25rem !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.page-about .service-box {
  padding: 1.35rem 1.25rem !important;
  border-radius: var(--ds-radius-xl) !important;
}

.page-about .service-box h4 {
  font-size: 0.92rem !important;
  letter-spacing: 0.12em !important;
}

.page-contact .cards-container {
  gap: 1.5rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-contact .contact-card {
  width: clamp(280px, 40vw, 420px) !important;
  padding: 1.1rem 1.15rem !important;
  border-radius: var(--ds-radius-xl) !important;
}

.page-contact .office-title {
  font-size: 0.78rem !important;
  letter-spacing: 0.14em !important;
}

.page-contact .contact-info-box {
  padding: 0.95rem 1rem !important;
  border-radius: var(--ds-radius-lg) !important;
}

.page-contact .map-container {
  height: clamp(150px, 24vw, 220px) !important;
}

.page-contact .hover-hint {
  color: var(--ds-text-subtle);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

/* ─── PRODUCT PAGES COMPACT REFINEMENT ───────────────────────────────────── */
.container:has(.products) {
  max-width: 1180px !important;
  padding: clamp(2.5rem, 6vw, 4rem) var(--ds-container-gutter) !important;
}

.container:has(.products) h1 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem) !important;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem) !important;
}

.products {
  gap: clamp(1rem, 2.2vw, 1.75rem) !important;
}

.product img {
  height: 235px !important;
  padding: clamp(1rem, 2.5vw, 1.4rem) !important;
}

.product h3 {
  font-size: 1rem !important;
  margin: 0 1rem 0.85rem !important;
}

.product .open-modal {
  margin: auto 1rem 1.1rem !important;
  padding: 0.52rem 1.2rem !important;
  font-size: 0.75rem !important;
}

/* ─── MOBILE: noticeably smaller, cleaner, 2-up products ─────────────────── */
@media (max-width: 768px) {
  nav,
  nav.nav--solid,
  nav.nav--transparent {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
  }

  nav img,
  nav.nav--solid img {
    max-height: 32px !important;
  }

  .hero-title {
    font-size: clamp(1.55rem, 6vw, 2.15rem) !important;
    letter-spacing: 0.05em !important;
  }

  .hero-subtitle {
    font-size: 0.82rem !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 1rem !important;
  }

  .hero-intro,
  .section-intro,
  .showcase-text p,
  .services-text p,
  .service-box p,
  .contact-luxury p {
    font-size: 0.76rem !important;
    line-height: 1.75 !important;
  }

  .hero-cta {
    padding: 0.62rem 1.05rem !important;
    font-size: 0.7rem !important;
  }

  .page-static-hero .hero-container {
    min-height: 52vh !important;
    max-height: 560px !important;
  }

  .page-static-hero .hero-content {
    text-align: center !important;
    padding: 1.5rem var(--ds-space-4) 2rem !important;
  }

  .page-about .services,
  .page-about .a-section,
  .page-contact .cards-container {
    width: min(100%, calc(100% - 1.5rem));
  }

  .page-contact .cards-container {
    gap: 1rem !important;
  }

  .page-contact .contact-card {
    width: 100% !important;
    padding: 0.85rem !important;
    height: auto !important;
  }

  .page-contact .contact-image {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 0.35rem !important;
  }

  .page-contact .office-title {
    font-size: 0.68rem !important;
    margin-bottom: 0.35rem !important;
  }

  .page-contact .card-content {
    padding-top: 0.5rem !important;
  }

  .page-contact .contact-info-box {
    padding: 0.7rem !important;
    gap: 0.35rem !important;
  }

  .page-contact .info-section {
    font-size: 0.66rem !important;
  }

  .page-contact .map-container {
    height: 96px !important;
  }

  .container:has(.products) {
    padding: 1.5rem 0.85rem 2rem !important;
  }

  .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
  }

  .product {
    border-radius: var(--ds-radius-lg) !important;
  }

  .product img {
    height: 150px !important;
    padding: 0.7rem !important;
  }

  .product h3 {
    font-size: 0.82rem !important;
    margin: 0 0.6rem 0.6rem !important;
    min-height: 2.2em !important;
    letter-spacing: 0.015em !important;
  }

  .product .open-modal {
    margin: auto 0.65rem 0.75rem !important;
    padding: 0.46rem 0.75rem !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.08em !important;
  }

  /* Unified mobile header: toggle left, search center, logo right */
  nav,
  nav.nav--solid,
  nav.nav--transparent {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 0.65rem !important;
    row-gap: 0.5rem !important;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  nav > a {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
  }

  .menu-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  .search-bar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: none !important;
  }

  .search-bar form {
    width: 100% !important;
  }

  .search-bar input[type=search] {
    width: 100% !important;
    max-width: none !important;
  }

  .nav-links {
    display: none !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    position: static !important;
    padding: 0.8rem 0.25rem 0.9rem !important;
    background: rgba(12, 12, 12, 0.96) !important;
    border-top: 1px solid var(--ds-border) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    box-shadow: var(--ds-shadow-md) !important;
    border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg) !important;
    z-index: 1001 !important;
  }

  nav.active .nav-links {
    display: block !important;
  }

  .nav-links ul {
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-links ul li {
    display: block !important;
    padding: 0.55rem 0 !important;
    text-align: left !important;
  }

  .nav-links ul li a {
    font-size: 0.86rem !important;
    display: inline-block !important;
  }

  .nav-links ul li .dropdown {
    position: static !important;
    display: none !important;
    width: min(100%, 280px) !important;
    margin-top: 0.75rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding: 0.85rem !important;
    border-radius: var(--ds-radius-md) !important;
    box-shadow: none !important;
    background: rgba(20, 20, 20, 0.96) !important;
    border: 1px solid var(--ds-border) !important;
  }

  .nav-links ul li:hover > .dropdown,
  .nav-links ul li:focus-within > .dropdown {
    display: block !important;
  }

  .dropdown-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    padding: 0 !important;
  }

  .dropdown-column {
    width: 100% !important;
  }

  .dropdown-column h3 {
    font-size: 0.74rem !important;
    margin-bottom: 0.55rem !important;
    padding-bottom: 0.45rem !important;
    text-align: left !important;
  }

  .dropdown-column a {
    font-size: 0.78rem !important;
    display: block !important;
    width: 100% !important;
    padding: 0.42rem 0 !important;
    text-align: left !important;
  }

  .nav-links ul li > a {
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
  }

  .product img {
    height: 132px !important;
    padding: 0.55rem !important;
  }

  .product h3 {
    font-size: 0.76rem !important;
    margin: 0 0.45rem 0.45rem !important;
  }

  .product .open-modal {
    font-size: 0.58rem !important;
    padding: 0.42rem 0.55rem !important;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  nav.nav--solid {
    background: rgba(12, 12, 12, 0.98) !important;
  }
}