/* Shared material finish. Existing page structure, spacing, and content stay in
   the Webflow stylesheet; this layer changes surfaces, light, and contrast. */
:root {
  --workshop-metal: url('/assets/industrial/aged-brass-texture-v1.webp');
  --workshop-edge: #ac8c5566;
  --workshop-edge-light: #d3ad6c99;
  --workshop-graphite: linear-gradient(#232526eb, #232526eb), var(--workshop-metal);
  --workshop-panel: linear-gradient(115deg, #161a1bbf, #1b1d1eaa), var(--workshop-metal);
  --workshop-recess: inset 0 3px 8px #0009, inset 0 -1px 0 #e1be7b28;
}

/* The same quiet navigation and footer on every portfolio page. */
.nav-component, .footer-component {
  background-color: var(--industrial-surface);
  background-image: var(--workshop-graphite);
  background-size: auto, 460px;
  border-color: var(--workshop-edge);
}
.nav-component { box-shadow: 0 1px 0 #0008; }
.nav-component .nav-link.w--current { color: var(--industrial-amber); }
.nav-component .nav-button,
.showcase-page .contact-link {
  color: var(--industrial-ivory);
  background: transparent;
  border: 1px solid var(--workshop-edge);
  box-shadow: inset 0 1px 0 #fff2cf0a;
}
.nav-component .nav-button .nav-button-text { color: var(--industrial-ivory); }
.nav-component .nav-button .button-overlay { background-color: #d3a35e18; }
.nav-component .nav-button:hover,
.showcase-page .contact-link:hover { border-color: var(--industrial-amber); background-color: #d3a35e0d; }
.footer-component { box-shadow: inset 0 1px 0 var(--workshop-edge), inset 0 4px 12px #0006; }
.footer-bottom-border { background: linear-gradient(90deg, #ac8c5520, #ac8c5580, #ac8c5520); }
.footer-title { text-shadow: 0 2px 1px #0008; }
.footer-social-link, .contact-form-social, .mobile-hamburger {
  background-image: var(--workshop-panel);
  background-color: var(--industrial-surface);
  background-size: auto, 300px;
  box-shadow: var(--workshop-recess), 0 0 0 1px var(--workshop-edge);
}
.mobile-hamburger img { filter: brightness(0) invert(.84) sepia(.18); }
.mobile-hamburger.w--open { background-color: var(--industrial-surface); }
.footer-social-link:hover, .contact-form-social:hover { box-shadow: var(--workshop-recess), 0 0 0 1px var(--industrial-amber), 0 0 14px #d3a35e17; }
.footer-social-link:hover .footer-social-link-icon,
.contact-form-social:hover .contact-form-social-icon { color: var(--industrial-amber-hover); }

/* Textured title fields, with the original heading positions and dimensions. */
.section-template-header {
  background-color: var(--industrial-ink);
  background-image: radial-gradient(ellipse at 50% 0, #d3a35e0b, transparent 65%), linear-gradient(#1b1d1eea, #1b1d1ef7), var(--workshop-metal);
  background-size: auto, auto, 460px;
  box-shadow: inset 0 -1px 0 #ac8c5540;
}
.template-header-title { color: var(--industrial-ivory); text-shadow: 0 3px 2px #0008; }
.breadcrumb-llink, .breadcrumb-icon { color: var(--industrial-muted); }
.breadcrumb-llink:hover, .breadcrumb-llink.w--current { color: var(--industrial-amber); }
.section-all-project, .section-project-details,
.section-contact-form, .section-contact-map, .blog-details-section {
  background-color: var(--industrial-ink);
}

/* Brass is a finish on controls, rather than a large competing color field. */
.nav-button.mainbutton, .primary-button, .submit-button, .button, .lab-promo-link {
  background-color: var(--industrial-amber);
  background-image: linear-gradient(#d3a35ef0, #d3a35ee0), var(--workshop-metal);
  background-size: auto, 300px;
  color: var(--industrial-deep);
  box-shadow: inset 0 1px 0 #fff3d466, inset 0 -2px 1px #56422655, 0 3px 0 #101213;
}
.nav-button.mainbutton:hover, .primary-button:hover, .submit-button:hover, .button:hover, .lab-promo-link:hover {
  background-image: linear-gradient(#e4b87cf0, #e4b87ce0), var(--workshop-metal);
  color: var(--industrial-deep);
  box-shadow: inset 0 1px 0 #fff3d488, inset 0 -2px 1px #56422655, 0 3px 0 #101213, 0 0 20px #d3a35e18;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--industrial-amber-hover);
  outline-offset: 5px;
}

/* Fine brass lips and inset glass. Overlays leave screenshot pixels untouched. */
.section-home-project .collection-item > a,
.blog-thumbnail-wrap,
.project-body figure > div:has(> img),
.blog-body figure > div:has(> img),
.rich-text-block figure > div:has(> img),
.lightbox-link {
  position: relative;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--workshop-edge), 0 3px 0 #0f1112, 0 12px 24px #0005;
}
.section-home-project .collection-item > a::after,
.blog-thumbnail-wrap::after,
.project-body figure > div:has(> img)::after,
.blog-body figure > div:has(> img)::after,
.rich-text-block figure > div:has(> img)::after,
.lightbox-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #c4a46b77;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px #1e2223, inset 0 0 0 4px #a58a5544, inset 0 6px 12px #000b, inset 3px 0 8px #0006;
  pointer-events: none;
}
.section-home-project .image { border-radius: 6px; box-shadow: none; height: auto; }
.section-home-project .collection-item > a { overflow: hidden; }
.section-home-project .collection-item > a .image {
  transform: none !important; /* Disable the legacy Webflow hover scale. */
  opacity: 1 !important; /* Show loaded work immediately, without an empty-frame reveal. */
  filter: brightness(.78);
  transition: filter .28s ease;
}
.section-home-project .collection-item > a:hover .image,
.section-home-project .collection-item > a:focus-visible .image { filter: brightness(1); }
@media (hover: none) { .section-home-project .collection-item > a .image { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .section-home-project .collection-item > a .image { transition: none; } }
.project-thumb { border-color: var(--workshop-edge); height: auto; }
.project-thumb-overlay { box-shadow: inset 0 0 0 3px #252829, inset 0 0 0 4px #b7965855, inset 0 8px 18px #0009; }

/* A wider, genuinely textured brass bezel on every project display. */
:is(.section-home-project .collection-item > a, .project-thumb-wrap, .project-body figure > div:has(> img), .lightbox-link) {
  --frame-width: 12px;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #b79b6977, 0 4px 0 #101213, 0 12px 24px #0005;
}
:is(.section-home-project .collection-item > a, .project-thumb-wrap, .project-body figure > div:has(> img), .lightbox-link)::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  padding: var(--frame-width); border-radius: inherit; pointer-events: none;
  background: linear-gradient(130deg, #b3976266, #6b553d33 38%, #b39b6a44 75%, #51422ccc), var(--workshop-metal) center / 380px;
  background-blend-mode: screen, normal;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
:is(.section-home-project .collection-item > a, .project-thumb-wrap, .project-body figure > div:has(> img), .lightbox-link)::after {
  content: ''; position: absolute; inset: var(--frame-width); z-index: 2;
  border: 1px solid #bda67755; border-radius: 3px; pointer-events: none;
  box-shadow: 0 0 0 1px #0a0e0ecc, inset 0 5px 10px #000c, inset 3px 0 7px #0008;
}
.project-thumb-overlay { box-shadow: none; }
@media (max-width: 760px) {
  :is(.section-home-project .collection-item > a, .project-thumb-wrap, .project-body figure > div:has(> img), .lightbox-link) { --frame-width: 8px; }
}
.project-content, .project-info-wrap {
  color: var(--industrial-ivory);
  background-color: var(--industrial-surface);
  background-image: var(--workshop-panel);
  background-size: auto, 430px;
  box-shadow: var(--workshop-recess), 0 0 0 1px var(--workshop-edge), 0 5px 0 #101213, 0 9px 18px #0006;
}
.project-item-title, .heading-medium.project-info-title { color: var(--industrial-ivory); text-shadow: 0 2px 1px #0008; }
.project-item-subtitle, .project-info-sub-title { color: var(--industrial-muted); }
.project-link {
  background-color: var(--industrial-surface);
  background-image: var(--workshop-panel);
  background-size: auto, 260px;
  box-shadow: inset 0 1px 1px #e1be7b44, inset 0 -3px 4px #000a, 0 0 0 1px var(--workshop-edge-light), 0 4px 14px #0007;
}
.project-link-text { color: var(--industrial-amber-hover); }

/* Reading surfaces stay quiet; texture belongs to cards and framing. */
.blog-single-item, .testimonial-item, .contact-form {
  background-color: var(--industrial-surface);
  background-image: var(--workshop-panel);
  background-size: auto, 460px;
  box-shadow: var(--workshop-recess), inset 0 0 0 1px var(--workshop-edge);
}
.blog-title, .author-name { color: var(--industrial-ivory); }
.blog-category-wrapper, .post-meta-subtitle { color: var(--industrial-amber); }
.blog-post-meta-wrapper { border-color: var(--workshop-edge); }
.project-body, .blog-body, .rich-text-block, .rich-text-block-2, .rich-text-block-3 { color: var(--industrial-muted); }
.w-richtext :is(h1,h2,h3,h4,h5,h6,strong) { color: var(--industrial-ivory); }
.w-richtext a { color: var(--industrial-amber-hover); text-decoration-color: #d3a35e70; }
.w-richtext a:hover { color: var(--industrial-ivory); }
.w-richtext li::marker { color: var(--industrial-amber); }
.w-richtext blockquote { color: var(--industrial-ivory); background-color: var(--industrial-surface); border-color: var(--industrial-amber); box-shadow: inset 3px 0 0 var(--workshop-edge-light), inset 0 1px 0 #d3a35e22; }
.blog-details-thumbnail, .image-14, .youtube, .w-richtext iframe { box-shadow: 0 0 0 1px var(--workshop-edge), 0 6px 20px #0005; }
.image-14 { filter: grayscale(1) sepia(.12) brightness(.9); }

/* The form uses the same metal housing as the capability panels. */
.section-contact-card.section-padding-both {
  background-color: var(--industrial-ink);
  background-image: linear-gradient(#1b1d1eed, #1b1d1ef5), var(--workshop-metal);
  background-size: auto, 460px;
}
.contact-card-icon { color: var(--industrial-amber); }
.contact-form-field, .contact-form-field-two, .contact-form-field-two.is-two, .contact-form-field-two.textarea {
  background-color: var(--industrial-deep);
  border-color: #a78b585c;
  color: var(--industrial-ivory);
  box-shadow: inset 0 3px 7px #0006;
}
.contact-form-field::placeholder, .contact-form-field-two::placeholder, .contact-form-field-two.is-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); }
.success-message { background: var(--industrial-surface); color: var(--industrial-ivory); box-shadow: inset 0 0 0 1px var(--workshop-edge); }
.error-message { background: #422e2a; color: var(--industrial-ivory); }
.utility-page-wrap { background: var(--workshop-graphite); background-size: auto, 460px; }

/* The showcase retains its machinery, lighting, and layout, with the same metals. */
.showcase-page {
  --bg: var(--industrial-ink);
  --deep: var(--industrial-deep);
  --ink: var(--industrial-ivory);
  --muted: var(--industrial-muted);
  --teal: #c7b794;
  --coral: var(--industrial-amber);
  --brass: #b79b69;
  --line: var(--workshop-edge);
}
.showcase-page .site-header {
  background: linear-gradient(#232526f0, #232526d9), var(--workshop-metal);
  background-size: auto, 460px;
  box-shadow: 0 1px 0 var(--workshop-edge);
}
.showcase-page .room-background { filter: saturate(.6); }
.showcase-page .hero { background-color: var(--industrial-ink); }
.showcase-page .light-teal { background: linear-gradient(170deg, #c7b79412, transparent 85%); }
.showcase-page .monitor-housing,
.showcase-page .screenshot-button,
.showcase-page .stage-navigation,
.showcase-page .index-item[aria-pressed="true"] {
  background-image: linear-gradient(115deg, #55504450, #1b1d1e88), var(--workshop-metal);
  background-size: auto, 430px;
}
.showcase-page .stage-controls { color: var(--industrial-muted); background: linear-gradient(#5b514380, #232526f2 6%, #181a1bf5 94%, #ac8c5566); }
.showcase-page .stage-navigation > button.drive-button:not(#motion-toggle) { background-image: linear-gradient(#55534e99, #222526bb), var(--workshop-metal); background-size: auto, 300px; }
.showcase-page .collection { background: radial-gradient(ellipse 470px 310px at 95% 0%, #d79d4627, transparent 77%); }
.showcase-page .project-index, .showcase-page .filters { background: #141617b8; }
.showcase-page .index-item, .showcase-page .detail-description,
.showcase-page .image-foot, .showcase-page .image-foot span:last-child,
.showcase-page .new-tab-note, .showcase-page footer { color: var(--industrial-muted); }
.showcase-page .index-item[aria-pressed="true"] { color: var(--industrial-ivory); }
.showcase-page .filters button[aria-pressed="true"] { background: #c3a97412; }
.showcase-page .module-open { color: #d0bb92; border-color: var(--workshop-edge); }
.showcase-page .exhibit:hover .module-open, .showcase-page .exhibit:focus-visible .module-open { color: #fff1c8; text-shadow: 0 0 5px #ffdfa0, 0 0 13px #d3a35e, 0 0 24px #c6965544; }
.showcase-page .preview-label { background-color: #141617ed; color: var(--industrial-ivory); }
.showcase-page footer { background-image: var(--workshop-graphite); background-size: auto, 460px; }

@media (max-width: 991px) {
  .nav-menu-wrapper { background: var(--workshop-graphite); background-size: auto, 460px; box-shadow: inset 0 -1px 0 var(--workshop-edge), 0 8px 16px #0006; }
}

/* Small vents keep steam at the margins, away from reading and interaction. */
.workshop-steam { position: absolute; left: 0; right: 0; height: 180px; z-index: 3; pointer-events: none; }
.workshop-steam canvas { display: block; width: 100%; height: 100%; }
.workshop-steam::before, .workshop-steam::after {
  content: ''; position: absolute; bottom: 6px; width: 22px; height: 4px;
  background: #101213;
  border: 1px solid #b79b6933; border-radius: 50%;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 #e1be7b33;
}
.workshop-steam::before { left: max(9px, calc(4% - 11px)); }
.workshop-steam::after { right: max(9px, calc(4% - 11px)); }
.section-home-about-us { position: relative; }
.section-home-about-us > .workshop-steam { top: -151px; }
.showcase-page .workshop-steam { bottom: 94px; height: 220px; }
.workshop-steam[data-steam-state="unavailable"] canvas { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .workshop-steam { display: none; } }