.body-section.text-page { padding-top:100px; }

.form-field.gdpr { font-size: 12px; width:100%; display:block; line-height:1.6; }

.slim-hero .background-overlay { opacity:0.6; }

.card-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap: 0.5rem; }
.card-gallery img { border-radius:var(--r-sm); width:100%; aspect-ratio:3/2;object-fit: cover;
  object-position: center center;}
.section.image-back { height:45vh; min-height:420px; max-height:560px;  position: relative;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 80px rgba(28,43,58,.5);}

.simple-column { display:flex; flex-direction: column;}
.columns-layout { display:grid; grid-template-columns:repeat(2,1fr); gap: 3rem;
    align-items: center; }
  
    .column-applications { display:flex; flex-direction: column; row-gap: 12px;  }
    .column-applications.simple-grid { display:grid; grid-template-columns:repeat(3,1fr);gap: 12px; margin-top:var(--r-md); margin-bottom:var(--r-lg); }
    .application-item { display:flex; flex-direction: column; row-gap: 12px; padding:var(--r-md); border-radius: var(--r-md); border: 1px solid var(--accent); background: var(--light-alt); }
    .application-item.as-flag { border-radius:0; border: 0px; border-left: 4px solid var(--accent); font-size: .95rem; padding:var(--r-sm); padding-left:var(--r-md); }
    
    
.cap-card.central { text-align:center; align-items: center; background-color: var(--light-alt); row-gap: 12px; display:flex; flex-direction: column; }
.larger { font-size: 1.25rem; }
.section { position:relative; }
.container { position:relative; z-index:3; }
.background-overlay.grey { background: var(--light); opacity:0.95; }

.background-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
}

.background-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Slim-hero featured-image backdrop: dark tint over the photo so the
   white hero text stays legible (matches the hero's own gradient). */
.slim-hero .background-overlay {
  background: linear-gradient(135deg, rgba(28,43,58,.82) 0%, rgba(10,58,85,.82) 100%);
}

 @media (max-width:767px) { .page-hero-inner { padding-top:96px; } .about-subnav { display:none;} .about-teaser-img { aspect-ratio:1/1;} .about-stats {padding-left:0px;padding-right:0px;} .cert-explainer ul { margin-left:1.4rem;} .product-gallery {justify-content:start;} .section.about .about-stats{padding-left:24px;padding-right:24px;} .capabilities-grid { grid-template-columns: 1fr !important; }}
 
 
 @media (max-width:991px) {.container.contact-grid-stuff { grid-template-columns: 1fr; } .prose-tabs-nav button { height:100%; justify-content:start; align-content:start; }}


 @media (max-width:767px) {  .columns-layout { grid-template-columns:repeat(1,1fr); gap: 1.5rem; }
        
        .cap-card.central { text-align:left; align-items: start; background-color: var(--light-alt); }
    }

#cMessage { width:100%; height:140px; min-height:140px; max-height:140px; }

.material-tile-cover { position: absolute; width:100%; height:100%; top: 0; left: 0; bottom:0; right:0;   z-index: 1; z-index:2; background-color:var(--dark); opacity:0.65; }
.material-tile-detail { position: relative; z-index:3; }
.material-tile-image { position: absolute; width:100%; height:100%; top: 0; left: 0; bottom:0; right:0;   z-index: 1;
    object-fit: cover;
    object-position: center center;  }
.industry-tile { background-color:var(--secondary); }
.spacer { height:30px; width:100%; }
.spacer.mid { height:20px; width:100%; }
.spacer.small { height:10px; width:100%; }

.ratings-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

.social-media-icon.linkedin {
  -webkit-mask-image: url(https://cdn.prod.website-files.com/67cb5d66c378c81a5e58eae9/67cd548af626c3661b4742ee_linkedin-square.svg);
  mask-image: url(https://cdn.prod.website-files.com/67cb5d66c378c81a5e58eae9/67cd548af626c3661b4742ee_linkedin-square.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-size:contain;
  mask-position: center;}
 
 .body-section.thin-top { padding-top: 20px; }
 
.w-slider-dot.w-active { background-color:#f2bb30;}

.w-slider-dot {background-color:#838383;}

.wpcf7-not-valid-tip {
  font-size:12px;
}
.wpcf7 form .wpcf7-response-output {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
}
.grecaptcha-badge {
  opacity: 0;
}

picture img {
  height:auto;
}

.text-section img[class*=" wp-image-"]:not(.left) {
  max-width:auto;
  height:auto;
}

.body-section.dark p a { color:#ffffff; }
.body-section.dark p a:hover { text-decoration:underline; }

.contact-link { font-weight:300;}

.embed-container { 
position: relative; 
padding-bottom: 56.25%;
overflow: hidden;
max-width: 100%;
height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*  */
.inline-radio-container,
.form-fw,
.contact-form-step-options {
  grid-column: 1 / -1;
}
.contact-form-step-options {
  grid-template-columns: auto;
  margin-bottom:25px;
}

.wpcf7-acceptance .wpcf7-list-item {
  margin-left:0;
}

.form-inline-radio label {
  padding: 12px 16px;
  border-style: solid;
  border-width: 1px;
  border-color: #0dbf92;
  background-color: #0dbf92;
  -webkit-transition: background-color 1000ms ease, color 1000ms ease;
  transition: background-color 1000ms ease, color 1000ms ease;
  color: #fff;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  font-size:16px;
  transition:0.8s ease color; transition:0.8s ease background-color;
}

.form-inline-radio label:hover { background-color:#ffffff; color: #0dbf92; }

.form-inline-radio label:active { background-color:#f9913d; color: #0dbf92; border-color:#f9913d;  }

.wpcf7-list-item label:active { background-color:#f9913d; color: #0dbf92; border-color:#f9913d; }

.form-inline-radio label:focus { background-color:#f9913d; color: #0dbf92; border-color:#f9913d;  }

.wpcf7-list-item label:focus { background-color:#f9913d; color: #0dbf92; border-color:#f9913d; }

.form-inline-radio label input {
  position: absolute;
  width:0;
  height:0;
  visibility:hidden;
}
.inline-radio-container .wpcf7-list-item.first {
  margin-left:0;
}

.form-text-note { display:flex; flex-wrap:wrap; font-size:16px; justify-content: flex-start; align-items: center;}

.wpcf7-response-output {
  margin:0;
  margin-top:10px;
}

.content-section p a {
  background-color: #ffd900;
  -webkit-transition: background-color 500ms ease;
  transition: background-color 500ms ease;
  color: #020202;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.content-section p a:hover {
  background-color: #ff7300;
}

.text-area.w-input { min-width:100%; max-height:100px;}
.text-area-holder {display:block; width:100%;height:auto;}

.blog-content h2 { font-size:32px; margin-bottom:12px; font-weight: 700; line-height: 1.2;font-family: erbaum, sans-serif; }
.blog-content h3 { font-size:28px; margin-bottom:12px;font-weight: 700; line-height: 1.2;font-family: erbaum, sans-serif; }
.blog-content h4 { font-size:26px; margin-bottom:12px;font-weight: 700; line-height: 1.2;font-family: erbaum, sans-serif; }
.blog-content h5 { font-size:24px; margin-bottom:12px;font-weight: 700; line-height: 1.2;font-family: erbaum, sans-serif; }

.wpcf7-form-control-wrap { width:100%; }

.wpcf7 input[type="email"] { width:100%; }
.wpcf7-spinner { display:none;visibility:hidden;}

.wpcf7-form-control-wrap input[data-vale="JOIN"] { width:25%; }
.wpcf7-form-control-wrap input[data-name="Newsletter-Email"] { width:100%; }

@media screen and (max-width: 991px) { .column.blog h2 { font-size:28px; } .column.blog h3 { font-size:24px; } }

@media screen and (max-width: 767px) { .column.blog h2 { font-size:26px; } .column.blog h3 { font-size:21px; } }

/* ============================================================
   PRODUCT GRID — photo tiles
   Tiles with a hero/featured image render the photo as a tile
   background behind a cyan→navy gradient overlay. This keeps the
   product grid visually distinct from the navy-only materials grid
   (.materials-grid-photo) while staying on-brand. Tiles without an
   image keep the default white card style.
============================================================ */
.product-tile-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--dark);
  border-color: var(--dark);
}
/* min-height wins over the condensed-grid auto height (equal specificity,
   loaded after anderman.css) so the photo is always visible. */
.product-grid .product-tile-photo { min-height: 180px; }

.product-tile-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
}
.product-tile-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(150deg, rgba(var(--accent-rgb), .82) 0%, rgba(28,43,58,.9) 100%);
  transition: background .35s var(--ease);
}
.product-tile-photo .product-tile-detail {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.product-tile-photo .product-name,
.product-tile-photo .product-desc { color: #fff; }
.product-tile-photo .product-icon {
  background: rgba(255,255,255,.16);
  color: #fff;
}
.product-tile-photo:hover {
  border-color: var(--accent);
}
.product-tile-photo:hover .product-tile-cover {
  background: linear-gradient(150deg, rgba(var(--accent-rgb), .72) 0%, rgba(28,43,58,.82) 100%);
}

/* ============================================================
   ABOUT · OUR STORY — horizontal milestone timeline
   Progressive enhancement:
   - No JS / mobile / reduced-motion → native horizontal swipe strip.
   - JS adds .is-pinned on desktop → section pins and the track slides
     left→right as you scroll past it (driven by js/additional.js).
============================================================ */
.milestone-pin-sticky {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 3rem 0;
}
.milestone-pin .title-holder { margin-bottom: 0; }

.milestone-pin-viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.milestone-pin-viewport::-webkit-scrollbar { display: none; }

.milestone-track {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: .5rem max(1.5rem, calc((100vw - 1200px) / 2));
}

.milestone-h {
  flex: 0 0 320px;
  width: 320px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.milestone-h:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.milestone-h-img {
  display: block;
  height: 190px;
  background-size: cover;
  background-position: center;
  background-color: var(--light);
}
.milestone-h-body { padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.milestone-h-year {
  align-self: flex-start;
  font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--accent);
}
.milestone-h h3 { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin: 0; }
.milestone-h p { font-size: .9rem; line-height: 1.55; color: var(--muted); margin: 0; }
.milestone-h--present { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .25), var(--shadow-card); }
.milestone-h--present .milestone-h-year::after { content: " ·"; }

.milestone-progress { display: none; height: 3px; width: min(1200px, calc(100% - 3rem)); margin: 0 auto; background: var(--border); border-radius: 999px; overflow: hidden; }
.milestone-progress-bar { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; }

.milestone-disclaimer { text-align: center; font-size: .8rem; color: var(--muted); margin: 0; }

/* Pinned state (added by JS on desktop with motion allowed) */
.milestone-pin.is-pinned .milestone-pin-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  justify-content: center;
  overflow: hidden;
}
.milestone-pin.is-pinned .milestone-pin-viewport { overflow: hidden; }
.milestone-pin.is-pinned .milestone-track { will-change: transform; }
.milestone-pin.is-pinned .milestone-progress { display: block; }