//*Themify Ultra Child Theme style.css FINAL 20260223*//

/*
 Theme Name: Drill Tech Child (Ultra)
 Template: themify-ultra
 Author: WOWSuccessTeam & Lynn Herkes
 Description: Consolidated, update-safe CSS — preserves dev submenu/tiles, fluid type (opt-in), row tweaks, services tiles, svc-intro, and heading fixes. Home page preserved.
 Version: 1.2.2
*/
/* Custom CSS starts below… */

/* =========================================
   0) Developer NAV / TILE styling (preserved)
   ========================================= */
.menuphoto1{
  display:inline-block; width:20vw; transform:scale(1.2); transition:transform .3s ease;
  vertical-align:top; margin-left:-1.5vw; clip-path:inset(0 round 5px); margin-bottom:1vw;
}
.menuphoto1:hover{ transform:scale(1.3); }
.child-arrow{ display:inline-block; vertical-align:middle; text-align:center; }
.menutext{
  display:inline-block; text-align:left; font-family:Arial,sans-serif; text-transform:uppercase;
  font-size:clamp(12px, .8vw, 20px); position:absolute; top:-1vw; left:-4.5vw; white-space:nowrap; margin-left:0;
}
.menutext2{
  font-family:Arial,sans-serif; text-transform:uppercase; font-size:clamp(12px, .8vw, 20px); position:absolute;
  top:-.95vw; left:-5vw; white-space:nowrap;
}
/* main nav colors */
#main-nav>li>a{ color:#fff !important; }
#main-nav>li>a:hover{ color:#ebd131 !important; }
/* tile boxes */
.tilebox{
  display:flex; align-items:center !important; justify-content:center !important;
  height:10vw; width:15vw; border-radius:10px; overflow:hidden;
}
.tilebox img.tile-icon{ width:40% !important; height:auto !important; display:block; }
h4.tile-title{ text-align:center; font-size:clamp(12px, 1vw, 20px) !important; margin-top:.5em; }
[class^="module"] .tile-front{ background-repeat:no-repeat; background-size:40% auto; background-position:center 80%; }

/* =========================================
   1) Fluid Typography (opt-in with .fluid-type)
   ========================================= */
:root{
  --h1-min:2.8rem; --h1-vw:3.8vw; --h1-max:4.2rem;
  --h2-min:1.9rem; --h2-vw:2.2vw; --h2-max:3.1rem;
  --h3-min:1.3rem; --h3-vw:1.2vw; --h3-max:2.1rem;
  --h5-min:.9rem; --h5-vw:.55vw; --h5-max:1.2rem; /* eyebrow/kicker */
  --body-min:.92rem; --body-vw:.55vw; --body-max:1.08rem;
}
.fluid-type .tb_text_wrap h1{
  font-size:clamp(var(--h1-min), var(--h1-vw) + .2rem, var(--h1-max)) !important;
  line-height:1.06 !important; letter-spacing:-.01em;
}
.fluid-type .tb_text_wrap h2{
  font-size:clamp(var(--h2-min), var(--h2-vw) + .2rem, var(--h2-max)) !important;
  line-height:1.15 !important;
}
.fluid-type .tb_text_wrap h3{
  font-size:clamp(var(--h3-min), var(--h3-vw) + .4rem, var(--h3-max)) !important;
  line-height:1.2 !important;
}
/* ALL-CAPS eyebrow/kicker */
.fluid-type .tb_text_wrap h4,
.fluid-type .tb_text_wrap h5,
.fluid-type .tb_text_wrap h6{
  font-size:clamp(var(--h5-min), var(--h5-vw) + .55rem, var(--h5-max)) !important;
  line-height:1.2 !important; letter-spacing:.08em; text-transform:uppercase;
}
/* body/lists */
.fluid-type .tb_text_wrap p,
.fluid-type .tb_text_wrap li{
  font-size:clamp(var(--body-min), var(--body-vw) + .5rem, var(--body-max)) !important;
  line-height:1.42 !important;
}
/* keep scope tight */
.fluid-type .tb_text_wrap [style*="line-height"]{ line-height:inherit !important; }
.fluid-type .tb_text_wrap [style*="font-size"]{ font-size:inherit !important; }
/* never touch menus/tiles when fluid-type is on */
.fluid-type .menuphoto1,
.fluid-type .menutext,
.fluid-type .menutext2,
.fluid-type .tilebox,
.fluid-type #main-nav,
.fluid-type .tile-icon,
.fluid-type .tile-title{ font-size:inherit; line-height:normal; }

/* =========================================
   2) Row-level refinements (scoped; no bleed)
   ========================================= */
.row-hero, .row-hero .tb_text_wrap, .row-hero .module-title{ text-align:left !important; }
.row-hero .tb_text_wrap h5{ font-size:clamp(var(--h5-min), .6vw + .55rem, var(--h5-max)) !important; }
.row-hero .tb_text_wrap h1,
.row-hero .tb_text_wrap .hero-title{
  font-size:clamp(2.8rem, 3.8vw + .2rem, 4.2rem) !important;
  line-height:1.06 !important; letter-spacing:-.015em;
}
/* OUR SERVICES: center headings for this row only */
.row-services .tb_text_wrap,
.row-services .module-title,
.row-services .module-title h2{
  text-align:center !important; margin-left:auto !important; margin-right:auto !important; display:block;
}
/* WHY CHOOSE — denser body */
.row-why .tb_text_wrap p, .row-why .tb_text_wrap li{
  font-size:clamp(1rem, .65vw + .5rem, 1.25rem); line-height:1.55;
}
/* JOBS */
.row-jobs .tb_text_wrap h5{ font-size:clamp(var(--h5-min), var(--h5-vw) + .5rem, var(--h5-max)); }
.row-jobs .tb_text_wrap h2{ font-size:clamp(2rem, 2.6vw + .2rem, 3.4rem); }
.row-jobs .tb_text_wrap p { font-size:clamp(1rem, .65vw + .5rem, 1.25rem); }

/* CERTS & ACCREDITATIONS */
.row-certs .tb_text_wrap h2,
.row-certs .module-title h2,
.row-certs h2{
  font-size:clamp(1.15rem, 1.1vw + .5rem, 1.8rem) !important;
  line-height:1.18 !important; text-align:center !important; margin-inline:auto !important;
}

/* RESULTS — smaller body cap */
.row-results .tb_text_wrap p{ font-size:clamp(.95rem, .55vw + .5rem, 1.15rem); line-height:1.55; }

/* =========================================
   NEWS / BLOG — improved responsive post entries
   ========================================= */
/* Home / Archive list — centered title + tidy cards */
.row-news .tb_text_wrap h2,
.row-news .module-title,
.row-news .module-title h2{
  text-align:center !important; margin-left:auto !important; margin-right:auto !important; display:block !important;
}
/* Post titles (list view) */
.row-news .module-post .post-title,
.row-news .tb_text_wrap .post-title,
.post-title a{
  font-size:clamp(1.3rem, 1.4vw + .6rem, 2rem) !important;
  line-height:1.22 !important;
  margin:.4em 0 .35em !important;
  font-weight:600 !important;
}
/* Post meta (date, author, etc.) */
.row-news .module-post .post-meta,
.row-news .tb_text_wrap .post-meta{
  font-size:clamp(.82rem, .4vw + .5rem, .98rem) !important;
  opacity:.8; margin-bottom:.8em;
}
/* Excerpt / content preview */
.row-news .module-post .post-content,
.row-news .tb_text_wrap .post-excerpt,
.row-news .tb_text_wrap p{
  font-size:clamp(1rem, .65vw + .5rem, 1.18rem) !important;
  line-height:1.55 !important;
}
/* Card padding & links */
.row-news .module-post .post{
  padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 1.8vw, 1.4rem) !important;
  border-radius:8px;
  transition: box-shadow .25s ease;
}
.row-news .module-post .post:hover{ box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.row-news .module-post .post a{ text-decoration:none; }
.row-news .module-post .post a:hover{ text-decoration:underline; }

/* =========================================
   3) Buttons (scale where .fluid-type is active)
   ========================================= */
.fluid-type .module-buttons .btn,
.fluid-type .tb_button a,
.fluid-type a.btn,
.fluid-type a.button{
  font-size:clamp(.92rem, .45vw + .6rem, 1.06rem) !important;
  line-height:1.2 !important; letter-spacing:.02em;
  padding:clamp(.55rem, .6vw + .3rem, .85rem) clamp(.9rem, .8vw + .6rem, 1.25rem) !important;
  border-radius:.6rem !important;
}

/* =========================================
   4) Footer (compact, matches address line)
   ========================================= */
.row-footer p, .row-footer li,
#footerwrap p, #footerwrap li,
.site-footer p, .site-footer li,
#footer p, #footer li{
  font-size:clamp(12px, .5vw + 10px, 14px) !important;
  line-height:1.1 !important; margin:.1em 0 !important;
}
/* tiny copyright */
.row-footer .copyright, #footerwrap .copyright, .site-footer .copyright{
  font-size:6px !important; line-height:1.05 !important; margin-top:.2em !important; opacity:.85;
}
.row-footer .tb_text_wrap{ max-width:none; }

/* =========================================
   5) Services submenu (SAFE — preserve dev layout)
   ========================================= */
/* Parent "Services" item must have CSS class: nav-services */
#main-nav li.nav-services { 
  position: relative !important; 
} /* REQUIRED */

#main-nav li.nav-services > .sub-menu {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(160px, 1fr));    /* ← changed from 4 to 3 */
  gap: 18px 22px;
  padding: 20px 22px !important;
  max-width: min(90vw, 1200px);
  width: max-content !important;
  min-width: 580px;                                           /* ← reduced from 680px */
  margin: 0 auto !important;
  background: rgba(255,255,255,0.98);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  transform: translateX(-15%) !important;                    /* centered better with 3 cols */
  z-index: 9999 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

#main-nav li.nav-services:hover > .sub-menu,
#main-nav li.nav-services:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
}

#main-nav li.nav-services > .sub-menu > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#main-nav li.nav-services > .sub-menu > li > a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #000;
  line-height: 1.35;
  padding: 10px 8px 14px;
  border-radius: 12px;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: keep-all;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: clamp(14px, 1.2vw, 16px);
  transition: background 0.25s ease;
}

#main-nav li.nav-services > .sub-menu > li > a:hover { 
  background: rgba(0,0,0,0.05); 
}

#main-nav li.nav-services > .sub-menu > li > a::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0 0 12px 0;
  border-radius: 10px;
  background-color: #ccc;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.28s ease;
}

#main-nav li.nav-services > .sub-menu > li > a:hover::before { 
  transform: scale(1.045); 
}

#main-nav li.nav-services > .sub-menu > li > a:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

/* ────────────────────────────────────────────────
   Responsive adjustments — now starts from 3 cols
──────────────────────────────────────────────── */

@media (max-width: 1100px) {
  #main-nav li.nav-services > .sub-menu {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    min-width: 580px;
  }
}

@media (max-width: 880px) {
  #main-nav li.nav-services > .sub-menu {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 16px;
    padding: 18px !important;
    min-width: 380px;
  }
}

@media (max-width: 580px) {
  #main-nav li.nav-services > .sub-menu {
    grid-template-columns: 1fr;
    min-width: 300px;
    max-width: 90vw;
    gap: 14px;
    padding: 16px !important;
  }
}

/* Image mappings — unchanged */
#main-nav li.nav-services .svc-er > a::before{ 
  background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2026/01/Service_EarthRetention3-upscaled.jpg"); 
}
#main-nav li.nav-services .svc-mining > a::before{ 
  background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2025/12/Service-Box-Mining-Tunneling.jpg"); 
}
#main-nav li.nav-services .svc-rail > a::before{ 
  background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2025/12/Service-Box-Rail.jpg"); 
}
#main-nav li.nav-services .svc-gt > a::before{ 
  background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2025/12/Service-Box-Ground-Treatment.jpg"); 
}
#main-nav li.nav-services .svc-found > a::before{ 
  background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2025/12/Service-Box-Foundations.jpg"); 
}
#main-nav li.nav-services .svc-more > a::before{ 
  background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2025/12/Service-Box-Fabrication-Shop-scaled.png"); 
}
#main-nav li.nav-services .svc-engineer > a::before{ 
  background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/service-1.png"); 
}
#main-nav li.nav-services .svc-crete > a::before{ 
  background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2025/12/Service-Box-Architectural-Shotcrete.png"); 
}

/* =========================================
   6) Utilities (opt-in)
   ========================================= */
.u-left{ text-align:left !important; }
.u-center{ text-align:center !important; }
.pad-tight{ padding-inline:clamp(10px, 1.4vw, 20px) !important; }
.pad-normal{ padding-inline:clamp(14px, 2.2vw, 28px) !important; }
.pad-loose{ padding-inline:clamp(18px, 3vw, 40px) !important; }
.max-72ch{ max-width:72ch !important; margin-inline:auto !important; }
.max-60ch{ max-width:60ch !important; margin-inline:auto !important; }
@media (max-width:480px){
  .tb_text_wrap h5, .tb_text_wrap h6{ letter-spacing:.06em; }
  .tb_text_wrap p, .tb_text_wrap li{ line-height:1.5; }
}
:target{ scroll-margin-top:100px; }

/* =========================================
   7) Services tiles (Pro Image) — rows tagged `svc-tiles`
   ========================================= */
.svc-tiles .module-pro-image .image-title,
.svc-tiles .module-pro-image .pro-image-title,
.svc-tiles .module-pro-image .tb_image_title,
.svc-tiles .module-pro-image [class*="image-title"]{
  font-size: clamp(14px, 1.1vw, 20px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  margin: 6px 0 0 0 !important;
  padding: 6px 10px !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.svc-tiles .module-pro-image .tb_image_wrap:hover .tb_button,
.svc-tiles .module-pro-image .tb_button{
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  margin-left: 0 !important;
}

/* =========================================
   8) Services “intro” subtitle under H1 — rows tagged `svc-intro`
   ========================================= */
/* svc-intro hero H2 — enforce identical styling on pages + posts */
.svc-intro.row-hero h2,
.svc-intro.row-hero .tb_text_wrap h2,
.svc-intro.row-hero .module-title h2{
  font-size: clamp(18px, .9vw + 4px, 24px) !important;
  line-height: 1.5 !important;
  margin: .5em 0 .6em !important;
  letter-spacing: .01em;

  /* Normalize anything that can make it "look" bigger/bolder on posts */
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Post pages: svc-intro hero H2 — tighten line-height to match Services exactly */
.single .svc-intro.row-hero h2,
.single .svc-intro.row-hero .tb_text_wrap h2,
.single .svc-intro.row-hero .module-title h2{
  line-height: 1.32 !important;   /* tighten */
}

/* Safety: if Themify wraps text in spans/strong, keep them from changing the leading */
.single .svc-intro.row-hero h2 *,
.single .svc-intro.row-hero .tb_text_wrap h2 *,
.single .svc-intro.row-hero .module-title h2 *{
  line-height: inherit !important;
}


/* =========================================
   9) Injected service post area
   ========================================= */
#svc-target{ margin-block:2rem; }
#svc-target iframe{ width:100%; border:0; display:block; min-height:800px; }

/* =========================================
   10) HERO heading weights/metrics — Services & Posts; Home intact
   ========================================= */
/* Single Posts: hero H1 not bold; same feel as Services H1 */
.single .row-hero h1,
.single .row-hero .module-title h1,
.single h1.entry-title,
.single .entry-title,
.single .page-title h1,
.single .tf_heading h1{
  font-weight:400 !important;
  line-height:1.06 !important;
  letter-spacing:-.015em !important;
  font-variation-settings:"wght" 400 !important;
  font-synthesis:none !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 !important;
}
.single .row-hero h1[style*="font-weight"]{ font-weight:400 !important; }
.single .row-hero h1 strong,
.single .row-hero h1 b{ font-weight:inherit !important; }

/* 1) PAGES ONLY (includes Home & Services): make hero H1 a bit smaller */
.page .row-hero .tb_text_wrap h1,
.page .row-hero .hero-title{
  font-size: clamp(2.4rem, 3.2vw + 0.2rem, 3.8rem) !important;
}

/* Posts using the Services hero pattern (svc-intro row-hero):
   match Services H1 sizing, but ~2px smaller across devices */
.single .row-hero.svc-intro h1,
.single .row-hero.svc-intro .tb_text_wrap h1,
.single .row-hero.svc-intro .hero-title,
.single .row-hero.svc-intro .module-title h1{
  font-size: calc(clamp(2.4rem, 3.2vw + 0.2rem, 3.8rem) - 2px) !important;
}


/* 2) SERVICES (Pages, not Home): make hero H2 a touch smaller */
.page:not(.home) .row-hero h2,
.page:not(.home) .row-hero .module-title h2{
  font-size: clamp(16px, 0.75vw + 9px, 22px) !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
}
/* 3) POSTS: hero H2 — match Services sizing + don't override svc-intro */
.single .row-hero:not(.svc-intro) h2,
.single .row-hero:not(.svc-intro) .module-title h2,
.single .row-hero:not(.svc-intro) .tb_text_wrap h2{
  font-size: clamp(16px, 0.75vw + 9px, 22px) !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
}

/* Posts using the Services hero pattern (svc-intro row-hero) should look identical to Services pages */
.single .row-hero.svc-intro h2,
.single .row-hero.svc-intro .module-title h2,
.single .row-hero.svc-intro .tb_text_wrap h2{
  font-size: clamp(18px, .9vw + 4px, 24px) !important;
  line-height: 1.5 !important;
  margin: .5em 0 .6em !important;
  letter-spacing: .01em;
  font-weight: 400 !important;
}


/* =========================================
   ImagePro tiles: title + description sizing
   Scoped only to rows: svc-loader / srv-tiles
   ========================================= */
.svc-loader .module-pro-image .image-pro-title,
.srv-tiles .module-pro-image .image-pro-title{
  font-size: clamp(20px, 1.4vw, 28px);
  line-height: 1.2;
}
.svc-loader .module-pro-image .image-pro-caption,
.srv-tiles .module-pro-image .image-pro-caption{
  font-size: clamp(14px, 1.0vw, 18px);
  line-height: 1.4;
}

/* =========================================================
   HOME – Services tiles
   Force Learn More button LEFT aligned (builder + frontend)
   Scope: .srv-tiles only
========================================================= */

.srv-tiles .module-pro-image .image-pro-action-button{
  display: inline-flex !important;
  justify-content: flex-start !important;
  align-items: center;
  margin-left: 0 !important;
  margin-right: auto !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  text-align: left !important;
}

/* Defensive: kill any centering inherited from overlay containers */
.srv-tiles .image-pro-overlay-inner{
  align-items: flex-start !important;
  text-align: left !important;
}


/* =========================================================
   HOME – Key Projects overlay layout
   Title at TOP + keep meta/excerpt/button (hover)
   ========================================================= */

/* Make the overlay content a vertical stack */
.home .dt-home-key-projects .post-content,
.home .dt-home-key-projects .post-content-inner,
.home .dt-home-key-projects .post-inner,
.home .dt-home-key-projects .post {
  /* don't force anything here unless needed */
}

/* This is usually the overlay wrapper in Themify Post modules.
   We apply flex to the overlay content area so the title can sit at the top. */
.home .dt-home-key-projects .post-image + .post-content,
.home .dt-home-key-projects .post-image .post-content,
.home .dt-home-key-projects .post-image .post-content-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* TOP */
  align-items: flex-start;
}

/* Title styling + keep it top */
.home .dt-home-key-projects .post-title {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  order: 1;
}

.home .dt-home-key-projects .post-title,
.home .dt-home-key-projects .post-title a {
  font-size: 24px;      /* try 20px if you want tighter */
  line-height: 1.15;
  letter-spacing: 0.2px;
}

/* Allow long titles to wrap and not get clipped */
.home .dt-home-key-projects .post-title a {
  display: block;
  white-space: normal;
}

/* Keep the other overlay elements below the title */
.home .dt-home-key-projects .post-meta,
.home .dt-home-key-projects .post-excerpt,
.home .dt-home-key-projects .entry-content,
.home .dt-home-key-projects .builder_button,
.home .dt-home-key-projects .post-more-link {
  order: 2;
  margin-top: 5px;
}

/* HOME: Key Projects – force title to top of overlay (keep hover content working) */
.home .dt-home-key-projects .post-title,
.home .dt-home-key-projects .post-title a{
  font-size: 24px !important;   /* try 20px if you want smaller */
  line-height: 1.15 !important;
}

/* These selectors cover the common Themify Post overlay structures */
.home .dt-home-key-projects .post-image .post-title,
.home .dt-home-key-projects .post-image + .post-content .post-title,
.home .dt-home-key-projects .post-content .post-title{
  position: absolute !important;
  top: var(--kp-title-top) !important;
  bottom: auto !important;
  left: 14px !important;
  right: 14px !important;
  margin: 0 !important;
  z-index: 5 !important;
}

/* Make sure the overlay has enough top padding so the title doesn't collide with hover content */
.home .dt-home-key-projects .post-image .post-content,
.home .dt-home-key-projects .post-image + .post-content,
.home .dt-home-key-projects .post-content{
  padding-top: var(--kp-title-padding) !important; /* adjust 40–60 depending on title height */
}

/* Ensure long titles wrap instead of clipping */
.home .dt-home-key-projects .post-title a{
  display: block !important;
  white-space: normal !important;
}

/* -------------------------------------------------
   Key Projects – Responsive title sizing (safe caps)
   Homepage only
-------------------------------------------------- */

/* Laptop / smaller desktop (12"–13") tighten title vertical balance on small laptops*/
@media (max-width: 1366px) {
  .home .module-post .post-title,
  .home .module-post .post-title a {
    font-size: 24px !important;
    line-height: 1.15;
  }
}

/* Tablet & smaller */
@media (max-width: 1024px) {
  .home .module-post .post-title,
  .home .module-post .post-title a {
    font-size: 20px !important;
    line-height: 1.15;
  }
}

:root {
  --kp-title-top: 3px;       /* move title up slightly */
    --kp-title-padding: 48px; /* adds space BELOW wrapped title */
}

/* =========================================================
   DRILL TECH — HISTORY TIMELINE (ROBUST / DUPLICATION-SAFE)
   Scope: ONLY modules with class: dt-history-timeline
   Goal:
   - Restore “perfect state” behavior
   - Keep it stable even if rows/modules are duplicated
   - Improve: center the entire (image + date + title) group
             while keeping text left-aligned to image edge
========================================================= */

/* ---------- FEATURE SLIDE: CENTER THE GROUP, KEEP TEXT LEFT ---------- */
/* Center the whole slide content column */
.dt-history-timeline .tl-slide-content{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
}

/* Shared width so image + text align perfectly */
.dt-history-timeline .tl-media,
.dt-history-timeline .tl-text{
  width: 100% !important;
  max-width: 980px !important;     /* adjust if you want wider/narrower */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep the text left-aligned *inside* the centered width */
.dt-history-timeline .tl-text,
.dt-history-timeline .tl-text-content-container,
.dt-history-timeline .tl-text-content{
  text-align: left !important;
}

/* Keep image proportions intact and prevent “shrinking weirdness” */
.dt-history-timeline .tl-media img,
.dt-history-timeline .tl-media video,
.dt-history-timeline .tl-media iframe{
  max-width: 100% !important;
  height: auto !important;
}

/* Add comfortable spacing between text and media if Theme/Timeline collapses it */
.dt-history-timeline .tl-text{
  margin-top: 0 !important;
}
.dt-history-timeline .tl-media{
  margin-top: 0 !important;
}

/* ---------- NAV ARROWS: ARROW ONLY (NO TITLE/DATE) ---------- */
.dt-history-timeline .tl-slidenav-title,
.dt-history-timeline .tl-slidenav-description,
.dt-history-timeline .tl-slidenav-description-date{
  display: none !important;
}

/* ---------- FLAG / MARKER: THUMBNAIL + TITLE UNDER THUMB ---------- */
/* Force the marker content to stack: thumbnail on top, title underneath */
.dt-history-timeline .tl-timemarker-content,
.dt-history-timeline .tl-timemarker-content-container{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

/* Thumbnail box sizing (140x140) — shows as actual thumb, not icon */
.dt-history-timeline .tl-timemarker-media-container{
  width: 140px !important;
  height: 140px !important;
  flex: 0 0 140px !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* If Timeline outputs an <img> inside the thumb */
.dt-history-timeline .tl-timemarker-media-container img{
  width: 50px !important;
  height: 50px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Kill the default “image icon” that replaces/overlays the real thumb */
.dt-history-timeline .tl-timemarker-media-container .tl-icon-image,
.dt-history-timeline .tl-timemarker .tl-icon-image,
.dt-history-timeline .tl-timenav-item .tl-icon,
.dt-history-timeline .tl-timenav-item .tl-icon-image{
  display: none !important;
}

/* Make the flag title wrap cleanly under the thumbnail */
.dt-history-timeline .tl-timemarker-text,
.dt-history-timeline .tl-timemarker-text .tl-headline,
.dt-history-timeline .tl-timemarker-text h2{
  width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.15 !important;
}

/* ---------- TIMENAV (BOTTOM STRIP) THUMBNAIL SUPPORT (IF USED) ---------- */
/* Some builds use tl-timenav-thumbnail instead of tl-timemarker-media-container */
.dt-history-timeline .tl-timenav-item{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dt-history-timeline .tl-timenav-thumbnail,
.dt-history-timeline .tl-timenav-thumbnail img{
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  object-fit: cover !important;
  display: block !important;
}

.dt-history-timeline .tl-timenav-thumbnail{
  background-size: cover !important;
  background-position: center center !important;
}

.dt-history-timeline .tl-timenav-title,
.dt-history-timeline .tl-timenav-description{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  min-width: 0 !important;
}
/*******************************************************
 TIMELINE FIXES — DO NOT AFFECT MAIN FEATURED IMAGE SIZE
 Goals:
  - Date + Title BELOW the featured image, aligned to image left edge
  - Thumbnail shows in flag at 100x100
  - Do NOT reintroduce icon
  - Do NOT add title/date under nav arrows
*******************************************************/

/* 1) Ensure the slide content stacks: MEDIA first, TEXT second */
.tl-slide .tl-slide-content {
  display: flex !important;
  flex-direction: column !important;
}

/* TimelineJS typically uses these siblings for media + text */
.tl-slide .tl-slide-content .tl-media {
  order: 1 !important;
}

.tl-slide .tl-slide-content .tl-text {
  order: 2 !important;
}

/* 2) Align the text block with the featured image's left edge
   We do this by matching the text block's width/margins to the media block,
   WITHOUT changing the media itself. */
.tl-slide .tl-slide-content .tl-text {
  /* If media is centered via auto margins, this keeps text centered too */
  margin-left: auto !important;
  margin-right: auto !important;
  /* Match common TimelineJS media sizing behavior */
  width: 100% !important;
  max-width: 1024px !important; /* Safe cap; does NOT change image size */
  text-align: left !important;
  padding-top: 12px !important; /* puts it visually below the image */
}

/* If your featured image container has its own max-width, mirror it here.
   This does NOT resize the image; it only constrains the text block. */
.tl-slide .tl-slide-content .tl-media {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1024px !important;
}

/* 3) Flag/marker thumbnail: force it to show + enforce 100x100 */
.tl-timemarker .tl-timemarker-media-container,
.tl-timemarker .tl-timemarker-media-container * {
  /* Stop inherited "display:none" or weird collapsing */
  visibility: visible !important;
}

/* The actual thumbnail image inside the marker */
.tl-timemarker .tl-timemarker-media-container img,
.tl-timemarker img.tl-timemarker-media {
  display: block !important;
  width: 100px !important;
  height: 100px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Make sure the marker media container doesn't squash it */
.tl-timemarker .tl-timemarker-media-container {
  width: 100px !important;
  height: 100px !important;
  overflow: hidden !important;
}

/* 4) Keep the icon gone (belt + suspenders) */
.tl-timemarker .tl-timemarker-icon,
.tl-timemarker .tl-icon {
  display: none !important;
}

/* =========================================================
   DT History Timeline — Marker (flag) thumbnails 100x100
   Scope: ONLY .dt-history-timeline
========================================================= */

/* The injected thumbnail */
.dt-history-timeline .dt-tl-marker-thumb{
  width: 100px;
  height: 100px;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
}

/* Try to make the marker container hold the thumbnail cleanly */
.dt-history-timeline .tl-timemarker .tl-timemarker-media-container,
.dt-history-timeline .tl-timemarker .tl-timemarker-content-container{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide TimelineJS default media icon so it doesn't collide */
.dt-history-timeline .tl-timemarker .tl-icon-image,
.dt-history-timeline .tl-timemarker .tl-icon{
  display: none !important;
}


/* =========================================================
   Drill Tech — History Timeline refinements
   Scope: ONLY .dt-history-timeline
========================================================= */

/* Headline wrapper under the featured image */
.dt-history-timeline .dt-tl-headline-wrap{
  display: block;
  width: 100%;
}

/* Keep the date + title spacing clean (optional) */
.dt-history-timeline .dt-tl-headline-wrap .tl-headline-date{
  display: block;
  margin: 10px 0 2px 0;
}
.dt-history-timeline .dt-tl-headline-wrap .tl-headline{
  display: block;
  margin: 0;
}

/* DT History Timeline — Marker thumbnail size (slightly larger) */
.dt-history-timeline .dt-tl-marker-thumb{
  width: 140px;
  height: 140px;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
}


/* Ensure the marker media container can show the thumb nicely */
.dt-history-timeline .tl-timemarker .tl-timemarker-media-container{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* If TimelineJS inserts an icon in the marker media container, keep it from interfering */
.dt-history-timeline .tl-timemarker .tl-timemarker-media-container .tl-icon-image,
.dt-history-timeline .tl-timemarker .tl-timemarker-media-container .tl-icon{
  display: none !important;
}

/* ===== History Timeline: Left-align YYYY + Title under featured image ===== */
.dt-history-timeline .dt-tl-headline-wrap{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Force the text itself left (Timeline often centers these) */
.dt-history-timeline .dt-tl-headline-wrap .tl-headline-date,
.dt-history-timeline .dt-tl-headline-wrap .tl-headline{
  text-align: left !important;
}

/* =========================================================
   DT History Timeline — Keep headline block tied to media width
   Scope: ONLY .dt-history-timeline
========================================================= */

/* Timeline adds big left/right padding to .tl-slide-content; that breaks alignment on wide screens */
.dt-history-timeline .tl-slide .tl-slide-content{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Center the text container under the media block */
.dt-history-timeline .tl-text-content-container{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep text left-aligned within that centered block */
.dt-history-timeline .tl-text-content-container .tl-headline-date,
.dt-history-timeline .tl-text-content-container .tl-headline{
  text-align: left !important;
}

/* Force left text alignment inside the active slide text area */
.dt-history-timeline .tl-slide.tl-slide-active .tl-text,
.dt-history-timeline .tl-slide.tl-slide-active .tl-text-content-container{
  text-align: left !important;
}

/* =========================================================
   DT History Timeline — Marker layout: thumb + readable title
   Scope: ONLY .dt-history-timeline
========================================================= */

/* Make the marker content a reliable 2-column grid */
.dt-history-timeline .tl-timemarker-content{
  display: grid !important;
  grid-template-columns: 70px 1fr !important;
  column-gap: 10px !important;
  align-items: start !important;
}

/* Thumbnail box (keep your current size) */
.dt-history-timeline .tl-timemarker-media-container{
  width: 70px !important;
  height: 70px !important;
  max-width: 70px !important;
  max-height: 70px !important;
  overflow: hidden !important;
  border-radius: 4px !important;
}

/* Injected thumb fills the box */
.dt-history-timeline .tl-timemarker-media-container .dt-tl-marker-thumb{
  width: 70px !important;
  height: 70px !important;
  display: block !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Hide default icon */
.dt-history-timeline .tl-timemarker-media-container .tl-icon-image{
  display: none !important;
}

/* Make the text area behave normally */
.dt-history-timeline .tl-timemarker-text{
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important; /* critical: allows wrapping correctly in grid */
}

/* Title: allow 2 lines, not 1-letter wrap */
.dt-history-timeline .tl-timemarker-text .tl-headline{
  margin: 0 !important;
  line-height: 1.2 !important;
  font-size: 12px !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* Keep the overall marker from getting tall */
.dt-history-timeline .tl-timemarker-content-container{
  height: auto !important;
  max-height: 95px !important;
  overflow: hidden !important;
}

/* =========================================================
   DT History Timeline — widen marker card so title can wrap
========================================================= */

/* Give each marker enough horizontal room for image + text */
.dt-history-timeline .tl-timemarker{
  min-width: 180px !important;
}

/* Ensure inner content is allowed to use that width */
.dt-history-timeline .tl-timemarker-content{
  width: 100% !important;
}

/* =========================================================
   DT History Timeline — Force marker card width + readable text
========================================================= */

.dt-history-timeline .tl-timemarker-content-container{
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

.dt-history-timeline .tl-timemarker-content{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
}

.dt-history-timeline .tl-timemarker-media-container{
  flex: 0 0 70px !important;
  width: 70px !important;
  height: 70px !important;
  overflow: hidden !important;
  border-radius: 4px !important;
}

.dt-history-timeline .dt-tl-marker-thumb{
  width: 70px !important;
  height: 70px !important;
  display: block !important;
  background-size: cover !important;
  background-position: center !important;
}

.dt-history-timeline .tl-timemarker-text{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.dt-history-timeline .tl-timemarker-text .tl-headline{
  margin: 0 !important;
  line-height: 1.2 !important;
  font-size: 12px !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;

  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* hide the default icon overlay */
.dt-history-timeline .tl-timemarker-media-container .tl-icon-image{
  display: none !important;
}

/* =========================================================
   DT History Timeline — Marker layout: thumb LEFT, title RIGHT
========================================================= */

.dt-history-timeline .tl-timemarker-content-container{
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
}

/* Force side-by-side layout inside the marker card */
.dt-history-timeline .tl-timemarker-content{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Thumb container stays fixed */
.dt-history-timeline .tl-timemarker-media-container{
  flex: 0 0 70px !important;
  width: 70px !important;
  height: 70px !important;
  overflow: hidden !important;
  border-radius: 4px !important;
}

/* Your injected thumb span */
.dt-history-timeline .dt-tl-marker-thumb{
  width: 70px !important;
  height: 70px !important;
  display: block !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 4px !important;
}

/* Text column takes remaining width and wraps like normal text */
.dt-history-timeline .tl-timemarker-text{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.dt-history-timeline .tl-timemarker-text .tl-headline{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  font-size: 12px !important;

  /* allow wrapping */
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;

  /* remove the “one letter per line” behavior */
  -webkit-line-clamp: unset !important;
  display: block !important;
}

/* Hide the default image icon overlay if it’s still present */
.dt-history-timeline .tl-timemarker-media-container .tl-icon-image{
  display: none !important;
}

/* =========================================================
   DT History Timeline — Left-align YYYY + Title to image edge
   Scope: ONLY .dt-history-timeline (safe)
   ========================================================= */

/* 1) Override TimelineJS inline width/padding that breaks alignment */
.dt-history-timeline .tl-slide .tl-slide-content{
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Keep the slide stacked: image first, then text */
.dt-history-timeline .tl-slide .tl-slide-content{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* 3) Force media + text to share the exact same centered column width */
.dt-history-timeline .tl-slide .tl-media,
.dt-history-timeline .tl-slide .tl-text{
  width: 100% !important;
  max-width: 980px !important;     /* adjust if you want wider/narrower */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4) Make sure the image stays centered inside that column (responsive) */
.dt-history-timeline .tl-slide .tl-media-content-container{
  display: flex !important;
  justify-content: center !important;
}
.dt-history-timeline .tl-slide .tl-media img{
  max-width: 100% !important;
  height: auto !important;
}

/* 5) Left-align the YYYY + title to the column's left edge */
.dt-history-timeline .tl-slide .tl-text,
.dt-history-timeline .tl-slide .tl-text-content-container{
  text-align: left !important;
}

.dt-history-timeline .tl-slide .tl-headline-date,
.dt-history-timeline .tl-slide .tl-headline,
.dt-history-timeline .tl-slide .tl-headline a{
  text-align: left !important;
  margin-left: 0 !important;
}

/* Optional: tighten spacing between image and headline block */
.dt-history-timeline .tl-slide .tl-text{
  margin-top: 12px !important;
}


/* =========================================
   Mobile-only adjustments for menu / services submenu
   ========================================= */
@media (max-width: 1024px) {

  /* 1. green background for the mobile menu panel / dropdown area
     Targets the common Themify mobile menu container — adjust selector if your mobile menu uses a different class
     (inspect element on mobile to confirm — often .mobile-menu-active #mobile-menu, .overlay-menu-active .body-overlay, etc.)
  */
  body.mobile-menu-active #main-nav,
  body.mobile-menu-active .main-nav-dropdown, 
  #mobile-menu,
  .mobile-menu-panel,
  .overlay-menu .nav-container {
    background-color: #2c4e3b !important;   /* dark green */
  }

 
  /* 2. Left-justify the Services submenu items in mobile view
     Override the centered grid → make it simple left-aligned list
  */
  #main-nav li.nav-services > .sub-menu {
/*    display: block !important;  */           /* change from grid to block */
    grid-template-columns: none !important; 
    text-align: left !important;
    padding: 16px !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;            /* remove the -20% shift */
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
}

  #main-nav li.nav-services > .sub-menu > li > a {
    text-align: left !important;
    padding: 14px 18px !important;         /* more touch-friendly horizontal padding */
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 !important;
  }

  /* Make font a bit larger/more readable on mobile */
  #main-nav li.nav-services > .sub-menu > li > a {
    font-size: 15px !important;            /* or clamp(15px, 3.8vw, 17px) */
    padding-left: 24px !important;         /* indent a bit for hierarchy */
  }

  /* If submenu items still feel too grid-like at certain widths, force stack earlier */
  @media (max-width: 580px) {
    #main-nav li.nav-services > .sub-menu {
      padding: 12px !important;
    }
  }
}

/* =========================================================
   THEMIFY POST MODULE — consistent gap + bottom-aligned Read More
========================================================= */

/* Each post card becomes a vertical flex stack */
.module-post .builder-posts-wrap .post{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Keep image at top; content should fill remaining height */
.module-post .builder-posts-wrap .post-image{
  flex:0 0 auto;
}

.module-post .builder-posts-wrap .post-content{
  display:flex;
  flex:1 1 auto;
}

.module-post .builder-posts-wrap .post-content-inner{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}

/* Entry content should expand to fill space, allowing button to sit at bottom */
.module-post .builder-posts-wrap .entry-content{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}

/* Smaller, cleaner gap + push button to bottom of the card */
.module-post .builder-posts-wrap .entry-content .more-link-wrap{
  margin-top:auto;       /* bottom align across cards */
  padding-top:6px;       /* reduce the gap (tweak 4–10px as desired) */
}

/* Make link behave like a button element */
.module-post .builder-posts-wrap .entry-content .more-link{
  display:inline-flex;
  align-items:center;
}

.module-post .builder-posts-wrap{
  align-items:stretch;
}

/* =========================================================
   LEVEL THE CARD HEIGHTS (so Read More aligns across row)
   Themify post module > loops-wrapper grid4
========================================================= */

/* Ensure the row stretches items to equal height */
.module-post .builder-posts-wrap.loops-wrapper{
  display: flex;            /* in case Themify flips modes per breakpoint */
  flex-wrap: wrap;
  align-items: stretch;
}

/* Make each post card fill the stretched height */
.module-post .builder-posts-wrap.loops-wrapper > .post,
.module-post .builder-posts-wrap.loops-wrapper > article.post{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Make the content area take remaining space so button can sit at bottom */
.module-post .builder-posts-wrap .post-content{
  flex: 1 1 auto;
  display: flex;
}

.module-post .builder-posts-wrap .post-content-inner{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.module-post .builder-posts-wrap .entry-content{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Small consistent gap + pin to bottom of the card */
.module-post .builder-posts-wrap .more-link-wrap{
  margin-top: auto;
  padding-top: 6px;  /* tweak 4–8px */
}

/* =========================================================
   HOME: Latest News & Insights (Themify Post Module tb_fpew651)
   Goal:
   - Equal-height cards per row
   - "Read More" aligned to true bottom of each card
   - Small consistent gap above button
========================================================= */

/* The wrapper that contains the 4 posts */
#themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .builder-posts-wrap{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

/* Each post card must be a flex column and fill the row height */
#themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .builder-posts-wrap > article.post,
#themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .builder-posts-wrap > .post{
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Content area stretches so button can be pushed to the bottom */
#themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .post-content{
  flex: 1 1 auto !important;
  display: flex !important;
}

#themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .post-content-inner{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

#themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .entry-content{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Bottom-align the Read More + tighten spacing */
#themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .more-link-wrap{
  margin-top: auto !important;
  padding-top: 6px !important; /* adjust to 4–8px */
}
#themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .post-content-inner{
  height: 100% !important;
}
/* =========================================================
   FIX: Align Read More buttons to the bottom + normalize spacing
   Scope: Themify Post module tb_fpew651 (homepage)
========================================================= */

#themify_builder_content-6579 .module.module-post.tb_fpew651 .builder-posts-wrap{
  align-items: stretch !important;
}

/* Make each post card a column that can stretch */
#themify_builder_content-6579 .module.module-post.tb_fpew651 .builder-posts-wrap > article.post{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Let the content fill remaining height */
#themify_builder_content-6579 .module.module-post.tb_fpew651 .post-content,
#themify_builder_content-6579 .module.module-post.tb_fpew651 .post-content-inner,
#themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Pin the wrapper to the bottom of the card */
#themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content .more-link-wrap{
  margin-top: auto !important;
  padding-top: 6px !important; /* small gap from excerpt */
}

/* STOP Themify’s % margins from moving the "button" around */
#themify_builder_content-6579 .module.module-post.tb_fpew651 a.more-link{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   FORCE EVEN CARD BODIES + TRUE BOTTOM BUTTON ALIGNMENT
   Scope: homepage post module tb_fpew651
========================================================= */

/* Keep your wrapper flex */
#themify_builder_content-6579 .module.module-post.tb_fpew651 .builder-posts-wrap{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
}

/* Make each card a column */
#themify_builder_content-6579 .module.module-post.tb_fpew651 .builder-posts-wrap > article.post{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}

/* KEY: make the content area a consistent "card body" height */
#themify_builder_content-6579 .module.module-post.tb_fpew651 .post-content{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height: 240px;  /* tweak this number */
}

/* Ensure the inner content can push the button down */
#themify_builder_content-6579 .module.module-post.tb_fpew651 .post-content-inner,
#themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}

/* Pin butt*

/* =========================================================
   Clamp excerpt to consistent height (line-based), so buttons align
   Scope: tb_fpew651 (Homepage News & Insights)
========================================================= */

#themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content{
  /* Keep normal flow for text; we’ll clamp only the text node area */
}

/* Themify often outputs the excerpt as plain text inside .entry-content.
   Clamp the .entry-content itself, but allow the button to remain visible. */
#themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content{
  display: block;
}

/* Clamp the excerpt text by limiting the entry-content height,
   then keep the Read More visible below it. */
#themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content{
  overflow: hidden;
}

/* This targets the text portion by clamping and then re-enabling the button.
   We do it by clamping a wrapper created via a pseudo approach:
   easiest is to clamp the entry-content but pull the button out of the clamp. */
#themify_builder_content-6579 .module.module-post.tb_fpew651 .more-link-wrap{
  position: relative;
  z-index: 2;
}

/* Clamp excerpt to a fixed number of lines (responsive) */
#themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;  /* desktop lines */
  overflow: hidden !important;
}

/* BUT: don’t clamp the Read More */
#themify_builder_content-6579 .module.module-post.tb_fpew651 .more-link-wrap{
  display: block !important;
  -webkit-line-clamp: unset !important;
}

/* =========================================================
   FORCE POST TITLES TO RESERVE 2 LINES OF SPACE
   (Even if the title is only 1 line)
   Scope: tb_fpew651 – Homepage News & Insights
========================================================= */

#themify_builder_content-6579 
.module.module-post.tb_fpew651 
.post-title{
  /* Allow wrapping */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;

  /* THIS is the key part */
  line-height: 1.3;
  min-height: calc(1.3em * 2); /* always reserve 2 lines */

  margin-bottom: 8px;
}

@media (max-width: 768px){
  #themify_builder_content-6579 
  .module.module-post.tb_fpew651 
  .post-title{
    -webkit-line-clamp: 3;
    min-height: calc(1.3em * 3);
  }
}

/* =========================================
   Mobile-only adjustments for menu / services submenu — continued
   ========================================= */
@media (max-width: 1024px) {
  /* Existing rules you already have... */
  body.mobile-menu-active #main-nav,
  body.mobile-menu-active .main-nav-dropdown,
  #mobile-menu,
  .mobile-menu-panel,
  .overlay-menu .nav-container {
    background-color: #2c4e3b !important; /* dark green */
  }
  #main-nav li.nav-services > .sub-menu {
    /* your existing overrides */
  }
  /* NEW: Make close button ("X") white — targets common Themify close icons */
  body.mobile-menu-active .close,
  body.mobile-menu-active .menu-close,
  .mobile-menu-active .tf_close,
  .overlay-close,
  .mobile-menu-panel .close-icon,
  .mobile-menu-active [class*="close"] {
    color: #ffffff !important;
  }
  /* If the "X" is made with ::before / ::after pseudo-elements (common in Themify) */
  body.mobile-menu-active .close::before,
  body.mobile-menu-active .close::after,
  .mobile-menu-active .close span,
  .mobile-menu-active .menu-toggle-inner span {
    background-color: #ffffff !important; /* if it's lines/bars */
  }
  /* NEW: Make ALL mobile menu links & submenu items white for readability on dark bg
     (includes top-level items + Services sub-items) */
  body.mobile-menu-active #main-nav a,
  body.mobile-menu-active #main-nav li a,
  #mobile-menu a,
  .mobile-menu-panel a,
  .mobile-menu-active .sub-menu a {
    color: #ffffff !important;
  }
  /* Optional: hover/active state for better UX (light yellow like desktop hover?) */
  body.mobile-menu-active #main-nav a:hover,
  body.mobile-menu-active #main-nav li.current-menu-item > a,
  #mobile-menu a:hover,
  .mobile-menu-active .sub-menu a:hover {
    color: #ebd131 !important; /* matches your desktop hover color */
  }
  /* Ensure submenu items inherit white color and look clean */
  #main-nav li.nav-services > .sub-menu > li > a {
    /* color: #ffffff !important; /* enforce white */
    border-bottom-color: rgba(255,255,255,0.12) !important; /* slightly brighter divider */
  }

/* Optional: make hover/active state more visible on mobile (light yellow like desktop) */
#main-nav li.nav-services > .sub-menu a:hover,
#main-nav li.nav-services > .sub-menu .current-menu-item > a {
  color: #ebd131 !important;          /* your gold hover color */
  background: rgba(255,255,255,0.12) !important;  /* subtle bg highlight if desired */
}
	/* Broader fallback — targets almost all submenu links in mobile menu */
body.mobile-menu-active .sub-menu a,
.mobile-menu-panel .sub-menu a,
#main-nav .sub-menu a {
  color: #ffffff !important;
}

/* Or very aggressive (use only if needed — might affect other submenus) */
body[class*="mobile-menu-active"] #main-nav a {
  color: #ffffff !important;               /* default white */
}

	/* 1. Mobile menu close "X" → white
     Common Themify selectors — covers most variants (tf_close, close, menu-close, etc.)
     Adjust if inspector shows a different class (e.g. .nav-close, .tf_mob_close)
  */
  body.mobile-menu-active .tf_close,
  body.mobile-menu-active .close,
  body.mobile-menu-active .menu-close,
  .mobile-menu-active .close-icon,
  .mobile-menu-panel .close,
  .overlay-close,
  body[class*="mobile-menu-active"] [class*="close"] {
    color: #ffffff !important;
  }

  /* If close is built with spans/bars (hamburger → X transform) */
  body.mobile-menu-active .tf_close span,
  body.mobile-menu-active .close span,
  body.mobile-menu-active .menu-toggle-inner span,
  .mobile-menu-active .tf_close::before,
  .mobile-menu-active .tf_close::after {
    background-color: #ffffff !important;
  }

  /* 2. All mobile menu links white by default (top-level + most submenus) */
  body.mobile-menu-active #main-nav a,
  body.mobile-menu-active #main-nav > li > a,
  body.mobile-menu-active .sub-menu a,
  #mobile-menu a,
  .mobile-menu-panel a,
  .mobile-menu-active .nav-container a {
    color: #ffffff !important;
  }

  /* Hover / current-item states — match your desktop gold hover */
  body.mobile-menu-active #main-nav a:hover,
  body.mobile-menu-active #main-nav li.current-menu-item > a,
  body.mobile-menu-active .sub-menu a:hover,
  .mobile-menu-active a:hover {
    color: #ebd131 !important;
  }

  /* 3. EXCEPTION: Services submenu items → keep dark text (or your original color)
     Assuming Services submenu uses .nav-services in mobile too
     This overrides the white rule only for Services children
  */
  #main-nav li.nav-services > .sub-menu a,
  #main-nav li.nav-services .sub-menu > li > a {
    color: #000000 !important;       /* or whatever your preferred dark color was */
  }

  /* Optional: Services submenu hover in mobile (subtle feedback) */
  #main-nav li.nav-services > .sub-menu a:hover,
  #main-nav li.nav-services .sub-menu .current-menu-item > a {
    color: #2c4e3b !important;       /* dark green or your choice */
    background: rgba(255,255,255,0.15) !important;
  }

  /* If you want Services submenu divider more visible on dark bg */
  #main-nav li.nav-services > .sub-menu > li > a {
    border-bottom-color: rgba(255,255,255,0.10) !important;
  }
}

/* =========================================================
   LATEST NEWS & INSIGHTS – SAFE CARD ALIGNMENT
   - Desktop/tablet landscape: equal heights + button aligned
   - Tablet portrait/phone: revert to native Themify layout (prevents overlap)
   - Excerpt clamp (3 lines): applies everywhere
   ========================================================= */

/* Scope EVERYTHING to the News row only (prevents breaking other modules) */
.module_row.row-news .module-post .entry-content{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ----- Small screens (portrait tablet + phones): use Themify defaults ----- */
@media (max-width: 900px){
  .module_row.row-news .module-post,
  .module_row.row-news .module-post .post-content{
    display: block !important;
    height: auto !important;
  }

  .module_row.row-news .module-post .more-link-wrap{
    margin-top: 0 !important;
  }

  .module_row.row-news .module-post .post-title{
    min-height: 0 !important;
  }
}

/* ----- Larger screens: equal-height cards + button pinned to bottom ----- */
@media (min-width: 901px){
  .module_row.row-news .module-post{
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .module_row.row-news .module-post .post-content{
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /* Reserve space for up to 2 lines of title so buttons align better */
  .module_row.row-news .module-post .post-title{
    line-height: 1.3;
    min-height: calc(2 * 1.3em);
  }

  /* Push button to bottom */
  .module_row.row-news .module-post .more-link-wrap{
    margin-top: auto;
  }
}

/* =========================================================
   DRILL TECH — GLOBAL TYPOGRAPHY OVERRIDES (SAFE / SCOPED)
   Goal:
   - H1 uses Vollkorn everywhere
   - H2–H6 + body text uses Arial everywhere
   - Does NOT change sizes/colors/line-heights
   - High-specificity to beat old/builder/responsive rules
========================================================= */

/* Base body text (scoped to front-end content wrappers) */
body,
#pagewrap,
.themify_builder_content,
.post-content,
.page-content {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Force H1 to Vollkorn everywhere in content */
#pagewrap h1,
.themify_builder_content h1,
.post-content h1,
.page-content h1,
.single-post .post-title,
.page .page-title {
  font-family: "Vollkorn", Georgia, "Times New Roman", serif !important;
}

/* Force H2–H6 + paragraphs + common text elements to Arial */
#pagewrap h2,
#pagewrap h3,
#pagewrap h4,
#pagewrap h5,
#pagewrap h6,
#pagewrap p,
.themify_builder_content h2,
.themify_builder_content h3,
.themify_builder_content h4,
.themify_builder_content h5,
.themify_builder_content h6,
.themify_builder_content p,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6,
.post-content p,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6,
.page-content p {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Lists and blockquotes typically inherit, but this makes it consistent */
#pagewrap li,
#pagewrap blockquote,
.themify_builder_content li,
.themify_builder_content blockquote {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* =========================================================
   DRILL TECH — Home Services Tiles: remove bold caption text on tablet/mobile
   Targets: homepage builder content block (6579) + Image Pro captions only
========================================================= */

@media (max-width: 1024px) {
  body.home .themify_builder_content-6579 .module-pro-image .image-pro-caption,
  body.home .themify_builder_content-6579 .module-pro-image .image-pro-caption * {
    font-weight: 400 !important;
  }
}

/* Optional: keep the same behavior on phones too (safe redundancy) */
@media (max-width: 768px) {
  body.home .themify_builder_content-6579 .module-pro-image .image-pro-caption,
  body.home .themify_builder_content-6579 .module-pro-image .image-pro-caption * {
    font-weight: 400 !important;
  }
}

/* =========================================================
   DRILL TECH — Home Hero H1 mobile wrap fix
   Fixes text running off screen on small phones ONLY
========================================================= */

@media (max-width: 480px) {
  body.home .themify_builder_content h1,
  body.home .themify_builder_content .page-title,
  body.home .themify_builder_content .hero h1 {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100%;
  }
}

/* =========================================================
   DRILL TECH — Home Hero H1 mobile word-wrap correction
   Allows wrapping ONLY at word boundaries (no mid-word breaks)
========================================================= */

@media (max-width: 480px) {
  body.home .themify_builder_content h1,
  body.home .themify_builder_content .page-title,
  body.home .themify_builder_content .hero h1 {
    white-space: normal !important;
    word-break: keep-all !important;     /* <-- key fix */
    overflow-wrap: normal !important;    /* <-- key fix */
    hyphens: none !important;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  body.home .themify_builder_content h1 span {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}

/* SEM Videos – subtle left offset for the video title */
.sem-video .video-content .video-title,
.sem-video .video-content .video-title a{
  text-align: left;
  display: block;
  width: 100%;
  padding-left: 1%;
}

/* Reduce vertical space around embedded service post */
#svc-target{
  margin-block: 1rem !important;   /* was effectively ~2rem */
  padding-block: 0 !important;
}

/* =========================================
   DrillTech — Service injection placeholder row control
   Collapses the Themify row that contains #svc-target when empty
========================================= */

/* Always keep the target itself tight */
#svc-target{
  margin: 0 !important;
  padding: 0 !important;
}

/* When empty, hide the target (helps collapse its container) */
#svc-target:empty{
  display: none !important;
}

/* The JS adds these classes on the parent row wrapper */
.dt-svc-target-empty{
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* When it has content, allow normal flow but keep spacing reasonable */
.dt-svc-target-hascontent{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================================
   DRILL TECH — Service Insert Spacing Control
   Only affects the row that CONTAINS #svc-target
========================================= */

/* The spacer div you placed in HTML */
#test{
  height: clamp(18px, 2vh, 36px);
}

/* When empty: collapse the row so it doesn't create a giant white block */
.dt-svc-target-empty{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

/* When we have content: controlled breathing room above/below */
.dt-svc-target-hascontent{
  padding-top: clamp(16px, 2vh, 32px) !important;
  padding-bottom: clamp(18px, 3vh, 44px) !important;
}

/* Ensure the injected frame never shows its own scrollbar */
#svc-target iframe#svc-frame{
  overflow: hidden !important;
  display: block;
}

/* =========================================================
   DTDS — SERVICE TILES → INSERTED SERVICE CONTENT SPACING
   Duplication-safe: does NOT depend on the next row being
   immediately adjacent to #svc-target
   ========================================================= */

body:has(#svc-target){

  /* Space between tiles and injected content */
  #svc-target{
    margin-top: clamp(18px, 2.2vw, 44px) !important;

    /* Space after injected content (before whatever comes next) */
    margin-bottom: clamp(18px, 2.4vw, 52px) !important;

    /* Optional extra breathing room within the target area */
    padding-bottom: clamp(10px, 1.4vw, 24px) !important;
  }

  /* Keep tiles rows stable against Themify overlay quirks */
  .svc-loader.srv-tiles{ position: relative; }
  .svc-loader.srv-tiles .builder_row_cover{ pointer-events: none; }

  /* Ensure injected frame never shows its own scrollbar */
  #svc-target iframe#svc-frame{
    overflow: hidden !important;
    display: block;
  }
}

@media (max-width: 480px){
  body:has(#svc-target){
    #svc-target{
      margin-top: 18px !important;
      margin-bottom: 22px !important;
      padding-bottom: 14px !important;
    }
  }
}

/* =========================================
   NORMALIZE INSERTED POST SPACING
   ========================================= */

/* Base (desktop / large screens) */
#svc-target {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

/* Small laptops / tablets */
@media (max-width: 1200px) {
  #svc-target {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
}

/* Tablets / large phones */
@media (max-width: 900px) {
  #svc-target {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
  }
}

/* Mobile phones */
@media (max-width: 600px) {
  #svc-target {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
}

/* =========================================================
   Drill Tech — Service Injection Styling
   Stable spacing across all breakpoints
========================================================= */

.svc-target {
  width: 100%;
  margin-top: clamp(2rem, 4vw, 4rem);
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.svc-target iframe {
  width: 100%;
  border: 0;
  display: block;
}

/* Optional loading state */
.svc-target.is-loading {
  min-height: 300px;
}

/* Safety: no extra spacing from tile rows */
.svc-loader.srv-tiles {
  margin-bottom: 0 !important;
}

/* =========================================================
   DrillTech — Injected Post Frame Safety
   Prevents inner scrollbars & runaway spacing
========================================================= */

#svc-target {
  width: 100%;
  overflow: visible;
}

#dt-service-frame {
  overflow: hidden !important;
  display: block;
  width: 100%;
  border: 0;
}

/* =========================================
   Drill Tech — Injected service post area (CANONICAL OVERRIDE)
   Purpose:
   - Remove runaway whitespace (especially on smaller screens)
   - Prevent inner scrollbars inside iframe
   - Override older conflicting #svc-target rules in this stylesheet
========================================= */
#svc-target{
  margin: clamp(14px, 2.5vw, 28px) 0 !important; /* responsive but bounded */
  padding: 0 !important;
  width: 100%;
  overflow: visible;
}
#svc-target:empty{ display:none !important; }

#svc-target iframe{
  width: 100% !important;
  border: 0 !important;
  display: block !important;

  /* Critical: kill any inherited min-height:800px */
  min-height: 0 !important;

  /* Critical: ensure no internal scroll */
  overflow: hidden !important;
}

/* =========================================================
   CANONICAL FIX — svc-intro row-hero H2 MUST MATCH SERVICES
   Scope: ONLY hero rows with svc-intro + row-hero
   Applies to: Pages (services) + Single posts (subsidiaries)
   Purpose:
   - Override earlier conflicting rules in sections 8 + 10
   - Make font-size + line-height identical everywhere
========================================================= */

/* Force identical hero subtitle styling for svc-intro row-hero (pages + posts) */
.page .svc-intro.row-hero h2,
.page .svc-intro.row-hero .tb_text_wrap h2,
.page .svc-intro.row-hero .module-title h2,
.single .svc-intro.row-hero h2,
.single .svc-intro.row-hero .tb_text_wrap h2,
.single .svc-intro.row-hero .module-title h2{
  /* Match the Services page computed sizing */
  font-size: clamp(16px, 0.75vw + 9px, 22px) !important;

  /* Match the Services hero rhythm */
  line-height: 1.22 !important;

  margin: .5em 0 .6em !important;
  letter-spacing: .01em !important;

  /* Prevent “looks bolder/taller” differences */
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  font-synthesis: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* If Themify wraps parts of the H2 in spans/strong, don't let them change line-height */
.page .svc-intro.row-hero h2 *,
.page .svc-intro.row-hero .tb_text_wrap h2 *,
.page .svc-intro.row-hero .module-title h2 *,
.single .svc-intro.row-hero h2 *,
.single .svc-intro.row-hero .tb_text_wrap h2 *,
.single .svc-intro.row-hero .module-title h2 *{
  line-height: inherit !important;
  font-weight: inherit !important;
}

/* =========================================================
   PROJECTS PAGE — Themify Post Module (dt-projects-postgrid)
   Goal:
   - Titles can wrap to 2+ lines without being clipped
   - Excerpt is normal paragraph styling (not bold / not H5-looking) and >= 16px
   Scope: ONLY the Projects grid module (dt-projects-postgrid)
   ========================================================= */

/* 1) Remove Themify clamp / fixed box behavior so titles can grow naturally */
.dt-projects-postgrid h2.post-title.entry-title,
.dt-projects-postgrid .post-title.entry-title a{
  display:block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  line-clamp: unset !important;

  height:auto !important;
  max-height:none !important;
  min-height:0 !important;

  overflow:visible !important;
  text-overflow:unset !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important; /* safer wrap without mid-word clipping */
}

/* 2) Ensure the content wrappers don’t clip the title */
.dt-projects-postgrid .post-content,
.dt-projects-postgrid .post-content-inner{
  overflow:visible !important;
}

/* 3) Excerpt / description typography */
.dt-projects-postgrid .entry-content{
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
}



/* =========================================================
   PROJECTS PAGE — Post tiles overlay layout (dt-projects-postgrid)
   Goal (match HOME Key Projects behavior):
   1) NO extra black title box
   2) NO hover image zoom effect
   3) Title sits at the TOP of the existing unhovered overlay strip
      and can wrap to 2+ lines without clipping
   Scope: ONLY the Projects grid module (dt-projects-postgrid)
========================================================= */

/* Ensure each tile is the positioning context */
.dt-projects-postgrid .post,
.dt-projects-postgrid .post-inner{
  position: relative !important;
}

/* --- 2) Remove hover zoom / scale effects (Projects grid only) --- */
.dt-projects-postgrid .post-image img{
  transform: none !important;
  transition: none !important;
}
.dt-projects-postgrid .post:hover .post-image img,
.dt-projects-postgrid .post:focus-within .post-image img{
  transform: none !important;
}

/* --- 3) Overlay strip layout: let it grow so wrapped titles don't clip --- */
/* Themify commonly positions .post-content over the image for overlay layouts.
   We reinforce that behavior here, then pin the TITLE to the top of that strip. */
.dt-projects-postgrid .post-content{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  /* Let the strip expand for wrapped titles */
  height: auto !important;
  min-height: 64px;                 /* enough for 2 lines comfortably */
  box-sizing: border-box;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;   /* TOP */
  align-items: flex-start !important;

  padding: 12px 14px 14px !important;
}

/* If Themify uses an inner wrapper, keep it from re-centering content */
.dt-projects-postgrid .post-content-inner{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;   /* TOP */
  align-items: flex-start !important;
  width: 100%;
  box-sizing: border-box;
}

/* Title: remove any added background and keep it at top */
.dt-projects-postgrid .post-title{
  margin: 0 !important;
  padding: 0 !important;
  order: 1;
  width: 100%;
}

.dt-projects-postgrid .post-title a{
  background: none !important;      /* removes the unwanted black box */
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: block !important;

  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Responsive tightening */
@media (max-width: 768px){
  .dt-projects-postgrid .post-content{
    min-height: 58px;
    padding: 10px 12px 12px !important;
  }
}

/* =========================================================
   DRILL TECH — HISTORY TIMELINE (ROBUST / DUPLICATION-SAFE)
   Scope: ONLY modules with class: dt-history-timeline
   Goal:
   - Restore “perfect state” behavior
   - Keep it stable even if rows/modules are duplicated
   - Improve: center the entire (image + date + title) group
             while preserving left alignment of text within
========================================================= */

/* 1) Ensure module has predictable width + no overflow clipping */
.dt-history-timeline {
  width: 100%;
  max-width: 100%;
  overflow: visible !important;
}

/* 2) Center the whole slide content group (media + text), keep text left */
.dt-history-timeline .tl-slide-content-container{
  display: flex !important;
  justify-content: center !important;
}

.dt-history-timeline .tl-slide-content{
  margin: 0 auto !important;
  max-width: 1200px;
}

/* Keep the internal text alignment left (date/title) */
.dt-history-timeline .tl-text,
.dt-history-timeline .tl-text-content,
.dt-history-timeline .tl-headline,
.dt-history-timeline .tl-headline-date{
  text-align: left !important;
}

/* 3) MEDIA (main image) — preserve size rules you already tuned */
.dt-history-timeline .tl-media .tl-media-content-container{
  display: flex !important;
  justify-content: flex-start !important;
}

.dt-history-timeline img.tl-media-item.tl-media-image{
  max-height: 371px;
  width: auto;
}

/* 4) TIMEMARKER THUMB (the 50x50 marker image) — requires an IMG in the container */
.dt-history-timeline .tl-timemarker-media-container{
  width: 50px !important;
  height: 50px !important;
  overflow: hidden !important;
}

.dt-history-timeline .tl-timemarker-media-container img{
  display: block !important;
  width: 50px !important;
  height: 50px !important;
  object-fit: cover !important;
}

/* Keep default Timeline icon elements hidden (prevents collisions with the IMG thumb) */
.tl-timemarker .tl-timemarker-icon,
.tl-timemarker .tl-icon{
  display: none !important;
}

/* DT Timeline marker thumb — force visible (does NOT affect main slide media) */
.dt-history-timeline img.dt-tl-marker-thumb{
  display: block !important;
  width: 50px !important;
  height: 50px !important;
  object-fit: cover !important;
}

/* =========================================================
   DT History Timeline — TRUE CENTERING on wide screens
   Goal: center the whole (image + date + title) block
   while keeping text left-aligned within the block.
   Scope: ONLY .dt-history-timeline
========================================================= */

/* Center the content container itself */
.dt-history-timeline .tl-slide-scrollable-container,
.dt-history-timeline .tl-slide-content-container{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Center the fixed-width .tl-slide-content block that TimelineJS sizes inline */
.dt-history-timeline .tl-slide-content{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep internal text left-aligned (do NOT center the text) */
.dt-history-timeline .tl-text,
.dt-history-timeline .tl-text-content,
.dt-history-timeline .tl-headline,
.dt-history-timeline .tl-headline-date{
  text-align: left !important;
}

/* =========================================================
   DT History Timeline — final centering nudge (desktop only)
   Goal: center (image + YYYY + title) in the visible slide area
   Safe: does NOT change widths/padding rules, just shifts block
========================================================= */

@media (min-width: 900px){
  .dt-history-timeline .tl-slide-content{
    transform: translateX(250px) !important;
  }
}

/* =====================================================
   DTDS – Team Member Cards
   Clean vertical card layout for Themify Image module
   ===================================================== */

.dtds-team-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  transition: transform 140ms ease, box-shadow 140ms ease;
  height: 100%;
  overflow: hidden;
}

.dtds-team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

/* Force Themify Image module to stack image above text */
.dtds-team-card .module-image {
  display: block;
}

/* Image behavior */
.dtds-team-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px 10px 0 0;
}

/* Caption area under image */
.dtds-team-card .image-content {
  padding: 14px;
  text-align: center;
}

/* Name styling */
.dtds-team-card .image-title {
  margin: 0 0 6px 0;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Title styling */
.dtds-team-card .image-caption {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #6b7280;
}