/* Shared portfolio palette. Large surfaces are neutral charcoal; amber is an
   accent, not another section background. Preserve the original page layouts. */
:root {
  color-scheme: dark;
  --industrial-ink: #1b1d1e;
  --industrial-surface: #232526;
  --industrial-deep: #141617;
  --industrial-amber: #d3a35e;
  --industrial-amber-hover: #e4b87c;
  --industrial-brass: var(--industrial-amber);
  --industrial-copper: var(--industrial-amber);
  --industrial-ivory: #f0ece4;
  --industrial-muted: #b7b5b0;
  --industrial-line: #393b3c;
  --industrial-ink-rgb: 27, 29, 30;

  /* Existing Webflow tokens keep their original role and geometry. */
  --gray: var(--industrial-ivory);
  --white: var(--industrial-ivory);
  --color--body-font-3: var(--industrial-muted);
  --color--body-font-1: #999995;
  --color--primary-navy: var(--industrial-ink);
  --color--brand-teal: var(--industrial-amber);
  --defatult--template-bg: var(--industrial-surface);
  --defatult--black: var(--industrial-deep);
  --defatult--white: var(--industrial-ivory);
  --black: var(--industrial-deep);
  --disable-color: #999995;
}

body,
.body,
.main-wrapper,
.section-template-header,
.section-home-project.section-padding-both,
.image-8,
.image-8-full-width,
.image-13,
.slider,
.collection-list-wrapper-5 {
  background-color: var(--industrial-ink);
}

::selection { background-color: var(--industrial-amber); color: var(--industrial-deep); }
.nav-component, .footer-component { background-color: var(--industrial-deep); border-color: var(--industrial-line); }
.nav-link { color: var(--industrial-muted); }
.nav-link:hover, .nav-link.w--current, .paragraph-large.footer-link:hover { color: var(--industrial-amber); }
.header-title.doug { color: var(--industrial-ivory); -webkit-text-stroke-color: var(--industrial-ivory); }
.header-subtitle:not(.introparagraph) { color: var(--industrial-amber); }
.header-subtitle.introparagraph { color: var(--industrial-muted); }
.header-bg-overlay { background-image: linear-gradient(#0000, var(--industrial-deep)); }
.header-thumb { height: auto; }

.nav-button,
.nav-button.mainbutton,
.nav-button.buttontop,
.primary-button,
.button,
.submit-button {
  background-color: var(--industrial-amber);
  color: var(--industrial-deep);
}
.nav-button:hover, .button:hover, .submit-button:hover, .button-overlay { background-color: var(--industrial-amber-hover); color: var(--industrial-deep); }
.nav-button .nav-button-text, .nav-button .nav-button-text.navtwo, .nav-button .nav-button-text-copy, .primary-button .button-text { color: var(--industrial-deep); }

/* The existing bolt silhouette takes the exact accent color. Its source image
   remains unchanged; the mask removes the competing copper/green shading. */
.section-home-loop-scroll { background-color: var(--industrial-deep); border-block: 1px solid var(--industrial-line); }
.keyword-name { color: var(--industrial-ivory); }
.keyword-icon { display: block; width: 33px; height: 46px; align-self: center; background-color: var(--industrial-amber); -webkit-mask: url('/assets/industrial/lightning-copper-v1.png') center / contain no-repeat; mask: url('/assets/industrial/lightning-copper-v1.png') center / contain no-repeat; }

/* Luminosity blending removes the blue cast baked into the coffee photo.
   The neutral gradient makes both edges meet the surrounding charcoal. */
.section-home-about-us.section-padding-bottom {
  background-color: var(--industrial-ink);
  background-image: linear-gradient(180deg, var(--industrial-ink), rgba(var(--industrial-ink-rgb), .2) 24%, rgba(var(--industrial-ink-rgb), .2) 70%, var(--industrial-ink)), url('/assets/img/67577b8eafc2bf93214cc174_coffeeBG472.jpg');
  background-blend-mode: normal, luminosity;
  background-position: center, left center;
  background-size: 100% 100%, auto;
  background-repeat: no-repeat;
}
.about-us-title { color: var(--industrial-ivory); }

.service-slider-mask { background-color: var(--industrial-surface); }
.service-item { background-color: rgba(var(--industrial-ink-rgb), .2); }
.service-item .heading-five, .paragraph-small.service-text { color: var(--industrial-ivory); }
.section-home-blog.section-padding-both { background-color: var(--industrial-surface); }
.section-home-blog .text-block, .section-home-blog .color-gray { color: var(--industrial-muted); }
.blog-thumbnail, .project-thumb, .blog-details-thumbnail,
.image-16, .image-17, .image-18, .image-19, .image-20, .image-21, .image-22, .image-23, .youtube { border-color: var(--industrial-line); }
.heading-2 { color: var(--industrial-ivory); }
.client-logos-title-line { background-color: var(--industrial-amber); }
.footer-bottom-border { background-color: var(--industrial-line); }
.footer-social-link, .contact-form-social { background-color: var(--industrial-surface); }
.footer-social-link-icon, .contact-form-social-icon { color: var(--industrial-ivory); }
.paragraph-large.copyright { color: var(--industrial-muted); }
.w-slider-dot { background-color: #737574; }
.w-slider-dot.w-active { background-color: var(--industrial-amber); }
.project-info-wrap { background-color: var(--industrial-ivory); }
.contact-form-field, .contact-form-field-two, .contact-form-field-two.textarea { background-color: var(--industrial-deep); border-color: #555756; color: var(--industrial-ivory); }
.contact-form-field::placeholder, .contact-form-field-two::placeholder, .contact-form-field-two.textarea::placeholder { color: var(--industrial-muted); }
.contact-form-field:focus, .contact-form-field-two:focus { border-color: var(--industrial-amber); }
.mobile-hamburger { background-color: var(--industrial-amber); }
.mobile-hamburger.w--open { background-color: var(--industrial-amber-hover); }

@media (max-width: 991px) { .nav-menu-wrapper { background-color: var(--industrial-deep); } }
@media (max-width: 479px) { .section-home-about-us.section-padding-bottom { background-position: center, center bottom; } }