/* ============================================
   Homepage slider entrance animations
   (previously pulled the entire 3,591-line animate.css
   for these two effects only - kept here instead)
   ============================================ */
@keyframes lightSpeedIn {
    0%   { transform: translateX(100%) skewX(-30deg); opacity: 0; }
    60%  { transform: translateX(-20%) skewX(30deg); opacity: 1; }
    80%  { transform: translateX(0%) skewX(-15deg); opacity: 1; }
    100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}

@keyframes flipInX {
    0%   { transform: perspective(400px) rotateX(90deg); opacity: 0; }
    40%  { transform: perspective(400px) rotateX(-10deg); }
    70%  { transform: perspective(400px) rotateX(10deg); }
    100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}

.carousel .item.active .animated2 {
    animation: lightSpeedIn 1s ease-in 200ms both;
}

.carousel .item.active .animated4 {
    animation: flipInX 1s ease-in 500ms both;
    text-align: center;
}

/* ============================================
   Custom additions - Project filter & cards
   ============================================ */

/* Filter buttons */
.project-filter {
    list-style: none;
    margin: 0 0 35px;
    padding: 0;
    text-align: center;
}

.project-filter li {
    display: inline-block;
    margin: 0 5px 10px;
}

.project-filter li a {
    display: inline-block;
    padding: 8px 22px;
    border: 1px solid #e1e1e1;
    border-radius: 30px;
    color: #777;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.25s ease;
    cursor: pointer;
}

.project-filter li a:hover,
.project-filter li a.selected {
    background-color: #d4202c;
    border-color: #d4202c;
    color: #fff;
}

/* Project Card Grid Layout */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 24px;
}

/* .clearfix's ::before/::after generate display:table pseudo-elements, which
   grid layout counts as real items -- that occupies the grid's first cell
   with an empty box, shifting every card over by one column. Neutralize it
   wherever clearfix is combined with the grid. */
.project-grid.clearfix::before,
.project-grid.clearfix::after {
  display: none;
}

.project-card,
.project-card-half {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover,
.project-card-half:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.project-card-inner {
  padding: 24px;
}

.project-card-location {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 13px;
  margin-bottom: 12px;
}

.project-category-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
}

/* Metal-matching badge colors.
   .project-category-badge sets white text by default, but most of these
   backgrounds are too light/mid-tone for white text to hit WCAG AA's 4.5:1
   body-text contrast minimum — badge-platinum was bad enough to be fully
   illegible. Switched to dark text (#1f2937) wherever it wins the contrast
   check; badge-chrome needed a darker blue since neither text color passed
   against the original #3b82f6. */
.badge-platinum   { background-color: #e5e7eb; color: #1f2937; }  /* Light gray-silver */
.badge-gold       { background-color: #fbbf24; color: #1f2937; }  /* Bright gold-yellow */
.badge-chrome     { background-color: #2563eb; }  /* Cyan-blue, darkened for contrast */
.badge-basemetals { background-color: #10b981; color: #1f2937; }  /* Emerald green */
.badge-copper     { background-color: #d4a618; color: #1f2937; }  /* Bronze copper */
.badge-lead       { background-color: #374151; }  /* Dark slate-gray */
.badge-uranium    { background-color: #f59e2b; color: #1f2937; }  /* Amber uranium */
.badge-zinc       { background-color: #60a3d8; color: #1f2937; }  /* Sky-blue zinc */
.badge-silver     { background-color: #94a3b8; color: #1f2937; }  /* Slate silver */
.badge-other      { background-color: #fb7185; color: #1f2937; }  /* Salmon-pink other */

/* Project card year (shown only when a sourced date is available) */
.project-card-year {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #d4202c;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* One-line technology/scope summary on richly-documented (2015+) project cards */
.project-card-scope {
    font-size: 12.5px;
    color: #888;
    margin: 8px 0 0;
    line-height: 1.5;
}

/* Era section heading */
.era-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 10px;
}

.era-header h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}

.era-header p {
    color: #777;
    font-size: 15px;
}

/* Timeline transition marker between the two eras */
.era-transition {
    max-width: 640px;
    margin: 10px auto 40px;
    text-align: center;
    padding: 25px 20px;
    border-top: 2px dashed #e1e1e1;
    border-bottom: 2px dashed #e1e1e1;
}

.era-transition-year {
    display: inline-block;
    background-color: #d4202c;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 6px 18px;
    border-radius: 30px;
    margin-bottom: 12px;
}

.era-transition p {
    color: #777;
    font-size: 14px;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .project-grid {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  
  .project-card-inner {
    padding: 16px;
  }
}


.project-stats {
    text-align: center;
    margin-bottom: 40px;
}

.project-stats .stat-item {
    display: inline-block;
    padding: 0 35px;
    margin-bottom: 15px;
}

.project-stats .stat-number {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: #d4202c;
    line-height: 1.2;
}

.project-stats .stat-label {
    display: block;
    font-size: 13px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Fixed 2-column content grid: used for small, fixed-count card sets
   (company milestones, infrastructure highlights, platform/system
   reference cards) where the default auto-fit grid would stretch a
   lone trailing card to fill the whole row on an odd item count. */
.project-grid-2col {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 600px) {
    .project-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* Icon header for info/service cards */
.info-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f5f5f5;
    text-align: center;
    line-height: 50px;
    margin-bottom: 14px;
    font-size: 20px;
    color: #d4202c;
}

.project-card-inner ul.icons-list {
    margin: 10px 0 12px;
}

.project-card-inner ul.icons-list li {
    font-size: 13px;
    line-height: 1.6;
}

/* Map embed */
.map-embed-wrapper {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #ececec;
}

/* Fix homepage service icon row - theme's .service-center adds 25px
   left margin per item, which pushes a 4th col-lg-3 item to wrap */
.section.service .service-box.service-center {
    margin-left: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .project-card {
        width: 50%;
    }
}


/* ============================================
   Spacing utilities
   Replaces one-off inline `style="margin:..."` overrides
   previously scattered across every page (mostly on .hr1
   divider elements). Values match the specific margins that
   were already in use, kept as a small fixed scale rather
   than inventing a larger utility system.
   ============================================ */
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-50 { margin-bottom: 50px; }
.my-20 { margin: 20px 0; }
.my-30 { margin: 30px 0; }
.my-40 { margin: 40px 0; }
.my-50 { margin: 50px 0; }

/* ============================================
   Text utilities
   ============================================ */
.text-muted-sm {
    font-size: 13px;
    color: #777;
}

/* ============================================
   404 / error page
   ============================================ */
.error-page {
    padding: 80px 0;
}

.error-page .error-code {
    font-size: 90px;
    font-weight: 700;
    color: #d4202c;
    margin: 0;
}

.error-page .error-message {
    max-width: 520px;
    margin: 20px auto 30px;
}

/* ============================================
   Contact form
   ============================================ */
/* Honeypot field - visually hidden, present for bots, skipped by
   screen readers and keyboard navigation via aria-hidden on the wrapper */
.honeypot-field {
    position: absolute;
    left: -9999px;
}

.consent-group {
    margin-top: 5px;
}

.consent-label {
    font-weight: 400;
    font-size: 13px;
    color: #777;
    line-height: 1.5;
}

.map-embed-wrapper iframe {
    border: 0;
}

.js-alert {
    display: none;
}

.js-alert.is-visible {
    display: block;
}

.hr1-spaced-tight-top { margin: 45px 0 40px; }
.hr1-spaced-tight-bottom { margin: 40px 0 30px; }

.lead-muted {
    font-size: 16px;
    color: #777;
    margin-bottom: 0;
}

.text-muted-date {
    font-size: 13px;
    color: #999;
}

/* Homepage "why work with us" section background */
.section-alt-bg {
    background-color: #f9f9f9;
}