/*-----------------------------------------------*/ 
/* Site fonts */ 
/*-----------------------------------------------*/ 
:root {
  --e-global-typography-primary-font-family: 'Hanken Grotesk', sans-serif;
  --e-global-typography-secondary-font-family: 'Hanken Grotesk', sans-serif;
  --e-global-typography-text-font-family: 'Hanken Grotesk', sans-serif;
  --e-global-typography-accent-font-family: 'Hanken Grotesk', sans-serif;

  --e-global-typography-primary-font-weight: 800;
  --e-global-typography-secondary-font-weight: 700;
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-weight: 700;
}

/*-----------------------------------------------*/ 
/* Global text + headings */ 
/*-----------------------------------------------*/ 

body {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* Headings – covers native tags and Elementor widgets */
h1, .elementor-widget-heading h1 { font-size: 55px; font-weight: 700; line-height: 1.2; }
h2, .elementor-widget-heading h2 { font-size: 35px; font-weight: 700; line-height: 1.3; }
h3, .elementor-widget-heading h3 { font-size: 22px; font-weight: 700; line-height: 1.3; }
h4, .elementor-widget-heading h4 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}
h5, .elementor-widget-heading h5 { font-size: 16px; font-weight: 700; }
h6, .elementor-widget-heading h6 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Utility heading classes (for custom use outside Elementor) */
.h1 { font-size: 55px; font-weight: 700; line-height: 1.2; }
.h2 { font-size: 35px; font-weight: 700; line-height: 1.3; }
.h3 { font-size: 22px; font-weight: 700; line-height: 1.3; }
.h4 { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
.h5 { font-size: 16px; font-weight: 700; }
.h6 { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/*-----------------------------------------------*/ 
/* Organized overrides go here. This file is enqueued after child style.css */
/*-----------------------------------------------*/ 

/* Tablet spacing adjustment for Elementor containers */
@media (max-width: 1024px) {
  .elementor-container { gap: 18px; }
}

/* Utility: visually hidden (for a11y or SEO text) */
.mmg-visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/*-----------------------------------------------*/ 
/* Tag list styling (Industries, etc.) */
/*-----------------------------------------------*/ 
.industries-tag {
  display: flex;
  gap: 1.25rem;          /* space between items */
  flex-wrap: wrap;       /* wrap on smaller screens */
  align-items: baseline; /* baseline alignment */
}

.industries-tag span,
.industries-tag a {
  font-weight: 700;
  white-space: nowrap;
  position: relative;
  padding: 10px 0;
  line-height: 1.2;
  color: gray;
  text-decoration: none;
}

/*-----------------------------------------------*/ 
/* Breadcrumbs */ 
/*-----------------------------------------------*/ 
.breadcrumb {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #596670;
}

.breadcrumb a {
  color: #ac1a2d;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* Boyd Jones breadcrumb variant */
.mmg-breadcrumb .crumb a,
.mmg-breadcrumb .crumb span[itemprop="name"] {
  color: #596670;
  font-weight: normal;
}

.mmg-breadcrumb .crumb:last-of-type span[itemprop="name"] {
  color: #ac1a2d; /* Boyd Jones red */
  font-weight: bold;
}

/*-----------------------------------------------*/ 
/* Project subtitle (Boyd Jones) */
/*-----------------------------------------------*/ 
.projects-subtitle {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  color: #ad3b51;
}

/*-----------------------------------------------*/ 
/* Remove Margin Between Items in Carousel (Boyd Jones) */
/*-----------------------------------------------*/ 
.xpro-post-grid-wrapper .owl-item {
    margin-right: 0 !important;
}


/*-----------------------------------------------*/ 
/* industries hover images */
/*-----------------------------------------------*/ 
    /* Layout */
.feature-gallery{
  display:grid;
  grid-template-columns: 1fr 520px;
  gap: 20px;
  align-items:start;
}
@media (max-width: 900px){
  .feature-gallery{ grid-template-columns: 1fr; }
}

/* Two-column list (robust) */
.feature-list ul{
  column-count: 2;
  column-gap: 70px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-list ul li{
  display: block;            /* keep each item on its own line */
  break-inside: avoid;
  padding-bottom: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: #222;
  transition: color .2s ease;
  line-height: 2rem;
}

.feature-list ul li:hover{
  color: #111;
}

@media (max-width: 900px){
  .feature-list ul{
    column-count: 1;
    column-gap: 24px;
  }
}

/* Locked aspect, stacked slots, silky transitions */
.feature-visual{
  aspect-ratio: 16 / 9;
  width:100%;
  max-width:520px;
  position:relative;
  overflow:hidden;
}
.feature-visual .slot{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  opacity:0;
  transform:scale(1.015);         /* slight zoom in on the incoming image */
  filter: blur(0.2px);            /* tiny blur to hide compression seams */
  transition:
    opacity 320ms ease,
    transform 700ms cubic-bezier(.22,.61,.36,1),
    filter 700ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform, filter;
}
.feature-visual .slot.is-active{
  opacity:1;
  transform:scale(1);
  filter: blur(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .feature-visual .slot{
    transition: opacity 150ms linear;
    transform:none; filter:none;
  }
}