:root {
  --black: #2b2722;
  --panel: #e3e3e3;
  --line: #c6c6c6;
  --ivory: #211d19;
  --grey: #706b64;
}

body { background: #d8d8d8; color: #211d19; }
.grain { opacity: .025; mix-blend-mode: multiply; }

/* Keep the cinematic hero legible against its dark banner. */
.hero { color: #f5ebdd; }
.hero .text-link { color: #f5ebdd; }
.site-header:not(.scrolled) .brand,
.site-header:not(.scrolled) nav a { color: #f5ebdd; }
.site-header:not(.scrolled) .menu-toggle { border-color: rgba(245,235,221,.45); }
.site-header:not(.scrolled) .menu-toggle span { background: #f5ebdd; }

/* Let the lion mark act as a prominent, overlapping brand badge. */
.brand {
  position: relative;
  z-index: 6;
  transform: none;
}
.brand img {
  width: 230px;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  filter: none;
}

/* Preserve the complete square logo and keep the supplied Instagram QR easy to scan. */
.footer-main > div:first-child > .footer-logo {
  width: 145px;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  margin-bottom: 11px;
}

.footer-main > div:first-child > .instagram-qr {
  display: block;
  width: 164px;
  max-width: 100%;
  height: auto;
  margin-top: 16px;
  border: 1px solid #aeaeae;
}

/* Product labels sit on photography, so use the brand orange for reliable contrast. */
.catalogue-card .project-info span,
.catalogue-card .project-info h3 {
  color: #ff7800;
}

.service-strip { background: #e4e4e4; border-color: #c7c7c7; }
.service-strip article { border-color: #c7c7c7; }
.service-strip h2 { color: #211d19; }
.service-strip p { color: #746e66; }

.section { background: #d8d8d8; }
.why { background: #c9c9c9; border-color: #b9b9b9; }
.process { background-color: #dedede; background-image: linear-gradient(rgba(222,222,222,.97),rgba(222,222,222,.97)),linear-gradient(30deg,transparent 47%,rgba(212,175,107,.16) 48%,rgba(212,175,107,.16) 52%,transparent 53%); }
.catalogue { background: #d0d0d0; }
.about { background: #c8c8c8; }
.quote { background: linear-gradient(110deg,#c6c6c6,#dedede 55%); border-color: #b5b0aa; }
.reviews { background: #d8d8d8; }

.section-lead, .why-copy>p:not(.eyebrow), .about p:not(.eyebrow), .quote-intro>p:not(.eyebrow), .process .section-heading>p, .feature-list p, .steps p { color: #6b6660; }
.feature-list, .feature-list article, .steps li { border-color: #b8b8b8; }
.search { border-color: #b7a58a; color: #9b6e2b; }
.search input { color: #211d19; }
.search input::placeholder { color: #8a8379; }
.filters button { border-color: #b8b8b8; color: #4f4b46; background: #e1e1e1; }
.filters button:hover, .filters button.selected { color: #211d19; background: #efd9bf; border-color: #ff7a00; }
.demo-note { color: #807970; }

.review-card { background: #e5e5e5; border-color: #c4c4c4; box-shadow: 0 10px 30px rgba(40,40,40,.08); }
.review-card blockquote { color: #2d2823; }
.review-card strong { color: #29231d; }
.review-card small { color: #746e66; }
.review-control button { border-color: #aaa; color: #302a24; background: #e2e2e2; }

.quote form { background: rgba(235,235,235,.84); border-color: #bcbcbc; box-shadow: 0 12px 38px rgba(40,40,40,.08); }
.quote input:not([type=file]), .quote textarea, .quote select { color: #211d19; border-color: #adadad; }
.quote select option { background: #e5e5e5; color: #211d19; }
.upload { border-color: #b9ab99; }
.upload strong { color: #29231d; }
.upload small { color: #706960; }
.contact-mini small { color: #777067; }
.contact-mini strong { color: #2b251f; }

.site-footer { background: #c7c7c7; border-color: #b1b1b1; color: #211d19; }
.footer-main h3 { color: #9a6c2c; }
.footer-main a:not(.instagram), .footer-main p { color: #655f57; }
.instagram { color: #2d2721; }
.footer-bottom { border-color: #aeaeae; color: #625d58; }

.site-header.scrolled { background: rgba(225,225,225,.92); box-shadow: 0 8px 35px rgba(55,55,55,.16); }
.site-header.scrolled nav a, .site-header.scrolled .brand { color: #211d19; }
.site-header.scrolled .menu-toggle { border-color: #b9aa99; }
.site-header.scrolled .menu-toggle span { background: #211d19; }

dialog { background: #e2e2e2; color: #211d19; border-color: #a98752; }
.dialog-content>p:not(.eyebrow) { color: #6b655d; }
.dialog-content dl, .dialog-content dl div { border-color: #d9d0c6; }
.dialog-content dt { color: #777067; }
.close-dialog { color: #211d19; }

@media (max-width: 680px) {
  .brand img { width: 165px; height: auto; }
  nav { background: #e2e2e2; border-color: #b9b9b9; }
  nav a { color: #302a24; }
}