/* ============================================================================
   et.css — Empirisch Tech design system, "The Lab".
   Loaded AFTER the legacy theme stylesheets; this file is the override layer
   that carries the site's visual identity. Page markup is unchanged: the
   legacy Bootstrap grid still lays pages out, this restyles what it renders.
   ============================================================================ */

:root{
  --et-paper:#F6F8F2;
  --et-paper-2:#FFFFFF;
  --et-ink:#13170E;
  --et-ink-2:#4C5343;
  --et-line:#DBE0D1;
  --et-line-2:#EBEEE4;
  --et-green:#1B7A0E;
  --et-green-deep:#0E4A07;
  --et-wash:#E8F1DF;
  --et-max:1120px;
  --et-serif:Newsreader,Georgia,"Times New Roman",serif;
  --et-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --et-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------------------------------------------------------------- base ---- */
body{
  background:var(--et-paper) !important;
  color:var(--et-ink) !important;
  font-family:var(--et-sans) !important;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}

h1,h2,h3,h4,h5,h6{
  font-family:var(--et-serif) !important;
  color:var(--et-ink);
  letter-spacing:-.015em;
  line-height:1.16;
  text-wrap:balance;
  font-weight:400;
}
h1{font-size:clamp(30px,4.4vw,50px); font-weight:300; letter-spacing:-.022em; margin:0 0 18px}
h2{font-size:clamp(25px,3.2vw,38px); margin:0 0 16px}
h3{font-size:clamp(20px,2.2vw,25px); font-weight:500; margin:0 0 12px}
h4{font-size:19px; font-weight:500; margin:0 0 10px}
h5{font-size:17px; font-weight:500; margin:0 0 10px}
h6{font-size:15px; font-weight:600; font-family:var(--et-sans) !important; margin:0 0 8px}

p{color:var(--et-ink-2); line-height:1.62; margin:0 0 16px}
strong,b{color:var(--et-ink); font-weight:600}
a{color:var(--et-green-deep); text-decoration:none; transition:color .15s}
a:hover{color:var(--et-green); text-decoration:none}
:focus-visible{outline:2px solid var(--et-green); outline-offset:3px; border-radius:2px}
hr{border:0; border-top:1px solid var(--et-line); margin:32px 0}
blockquote{
  border-left:3px solid var(--et-green); background:var(--et-paper-2);
  margin:24px 0; padding:18px 22px; font-family:var(--et-serif); font-size:18px; color:var(--et-ink);
}
blockquote p{margin:0; color:inherit; font-family:inherit}
code,pre,kbd,samp{font-family:var(--et-mono); font-size:.92em}
code{background:var(--et-wash); color:var(--et-green-deep); padding:.12em .38em; border-radius:3px}
pre{background:var(--et-paper-2); border:1px solid var(--et-line); border-radius:5px; padding:16px 18px; overflow-x:auto}
pre code{background:none; padding:0; color:var(--et-ink-2)}
ul,ol{color:var(--et-ink-2)}
li{margin-bottom:7px}

/* utility label used by the new chrome and the landing page */
.et-lbl{
  font-family:var(--et-mono); font-size:11px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--et-green); margin:0 0 10px;
}

/* ------------------------------------------------------------- sections --- */
.ptb-100{padding-top:82px !important; padding-bottom:82px !important}
.ptb-70{padding-top:60px !important; padding-bottom:60px !important}
.pt-100{padding-top:82px !important}
.pb-100{padding-bottom:82px !important}
.pb-70{padding-bottom:60px !important}
.pt-70{padding-top:60px !important}
@media (max-width:767px){
  .ptb-100{padding-top:52px !important; padding-bottom:52px !important}
  .ptb-70{padding-top:42px !important; padding-bottom:42px !important}
  .pt-100{padding-top:52px !important}
  .pb-100{padding-bottom:52px !important}
  .pb-70{padding-bottom:42px !important}
  .pt-70{padding-top:42px !important}
}

.container{max-width:var(--et-max)}
@media (min-width:1200px){ .container{max-width:var(--et-max)} }

/* tonal section backgrounds — the legacy palette mapped onto ours */
.bg-e3fbff,.bg-f1f8fb,.bg-fafafb{background:var(--et-paper-2) !important; border-top:1px solid var(--et-line); border-bottom:1px solid var(--et-line)}
.bg-fefaf4,.bg-fffbf5{background:var(--et-wash) !important; border-top:1px solid var(--et-line); border-bottom:1px solid var(--et-line)}
.bg-light{background:var(--et-paper-2) !important}

/* the old theme's decorative blobs, gradients and floating shapes */
.circle-shape1,.circle-shape2,.circle-shape3,.vector-shape1,.vector-shape2,.vector-shape3,
.shape-img,.shape-img1,.shape-img2,.shape-img3,.banner-shape1,.footer-map,.lines,.line{
  display:none !important;
}

/* section headings */
.section-title{max-width:62ch; margin:0 auto 40px; text-align:left}
.section-title h2{
  font-family:var(--et-serif) !important; font-weight:400;
  font-size:clamp(25px,3.2vw,38px); margin:0;
}
.section-title p{margin-top:14px; font-size:15.5px; text-align:left !important}
.sub-title{
  font-family:var(--et-mono) !important; font-size:11px !important; font-weight:500 !important;
  letter-spacing:.13em !important; text-transform:uppercase !important;
  color:var(--et-green) !important; display:block; margin-bottom:12px; background:none !important;
}

/* ---------------------------------------------------------------- cards --- */
.single-services-item,.single-services-box,.single-solutions-box,.single-features-box,
.single-industries-box,.single-team-box,.single-pricing-box,.single-funfacts{
  background:var(--et-paper-2) !important;
  border:1px solid var(--et-line) !important;
  border-radius:5px !important;
  padding:24px !important;
  box-shadow:none !important;
  height:100%;
  transition:border-color .16s, transform .16s, box-shadow .16s;
}
.single-services-item:hover,.single-services-box:hover,.single-solutions-box:hover,
.single-features-box:hover,.single-industries-box:hover,.single-team-box:hover{
  border-color:var(--et-green) !important;
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(19,23,14,.07) !important;
}
.single-services-item::before,.single-services-item::after,
.single-services-box::before,.single-services-box::after{display:none !important}
.single-services-item h3,.single-services-box h3{
  font-size:20px !important; font-weight:500; margin:12px 0 10px;
}
.single-services-item h3 a,.single-services-box h3 a{color:var(--et-ink)}
.single-services-item h3 a:hover,.single-services-box h3 a:hover{color:var(--et-green-deep)}
.single-services-item p,.single-services-box p{font-size:14.5px; margin-bottom:0}
.single-services-item .icon,.single-services-box .icon{
  background:none !important; border-radius:0 !important; width:auto !important; height:auto !important;
  line-height:normal !important; color:var(--et-green) !important; margin-bottom:4px;
}
.single-services-item .icon img,.single-services-box .icon img{max-width:64px; height:auto}

.how-its-work-content{padding:0}
.how-its-work-content h1,.how-its-work-content h2,.how-its-work-content h3{margin-bottom:16px}
.how-its-work-content p{max-width:70ch}

/* ------------------------------------------------------------- buttons ---- */
.default-btn,.read-more-btn,.optional-btn{
  display:inline-flex !important; align-items:center; gap:8px;
  background:var(--et-green-deep) !important; color:#fff !important;
  font-family:var(--et-sans) !important; font-size:14px !important; font-weight:600 !important;
  padding:12px 20px !important; border-radius:4px !important; border:0 !important;
  box-shadow:none !important; transition:background .15s; overflow:visible;
}
.default-btn:hover,.read-more-btn:hover,.optional-btn:hover{background:var(--et-green) !important; color:#fff !important}
.default-btn span,.optional-btn span{display:none !important}
.default-btn i,.read-more-btn i{font-size:13px}
.read-more-btn{background:transparent !important; color:var(--et-green-deep) !important; padding:0 !important; border-bottom:1.5px solid var(--et-green) !important; border-radius:0 !important}
.read-more-btn:hover{background:transparent !important; color:var(--et-green) !important}

/* ---------------------------------------------------------------- blog ---- */
.single-blog-post{
  background:var(--et-paper-2) !important; border:1px solid var(--et-line) !important;
  border-radius:5px !important; box-shadow:none !important; overflow:hidden; height:100%;
  transition:border-color .16s, transform .16s;
}
.single-blog-post:hover{border-color:var(--et-green) !important; transform:translateY(-2px)}
.single-blog-post .post-image img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.single-blog-post .post-content{padding:18px 20px 22px}
.single-blog-post .post-content h3{font-size:19px !important; margin:12px 0 0; line-height:1.3}
.single-blog-post .post-content h3 a{color:var(--et-ink)}
.single-blog-post .post-content h3 a:hover{color:var(--et-green-deep)}
.post-meta{
  list-style:none; margin:0 !important; padding:0 !important;
  font-family:var(--et-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--et-ink-2);
}
.post-meta li{margin:0; color:var(--et-ink-2)}
.post-author img{width:26px !important; height:26px !important; margin-right:8px}
.post-author span{font-size:11px}

.blog-details-desc .article-content,.article-content{padding-top:8px}
.blog-details-desc .article-content h1,.blog-details-desc .article-content h2,
.blog-details-desc .article-content h3,.article-content h2,.article-content h3{margin-top:34px}
.blog-details-desc .article-content p,.article-content p{max-width:74ch}
.blog-details-desc .article-image img,.article-content img{border-radius:5px}
.article-content ul,.article-content ol,.blog-details-desc ul,.blog-details-desc ol{max-width:74ch}

.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px; margin:0 3px;
  border:1px solid var(--et-line) !important; border-radius:4px !important;
  background:var(--et-paper-2) !important; color:var(--et-ink-2) !important;
  font-family:var(--et-mono); font-size:13px; box-shadow:none !important;
}
.page-numbers.current,.page-numbers:hover{background:var(--et-green-deep) !important; color:#fff !important; border-color:var(--et-green-deep) !important}

/* sidebar */
.widget-area .widget{
  background:var(--et-paper-2) !important; border:1px solid var(--et-line) !important;
  border-radius:5px !important; padding:20px !important; box-shadow:none !important; margin-bottom:20px;
}
.widget-area .widget-title,.widget-area .widget h3{
  font-family:var(--et-mono) !important; font-size:11px !important; font-weight:500 !important;
  letter-spacing:.12em; text-transform:uppercase; color:var(--et-green) !important;
  border:0 !important; padding:0 0 12px !important; margin:0 0 12px !important;
  border-bottom:1px solid var(--et-line-2) !important;
}
.widget-area .widget-title::before,.widget-area .widget-title::after{display:none !important}
.widget-area ul{list-style:none; margin:0; padding:0}
.widget-area ul li{padding:8px 0; border-bottom:1px solid var(--et-line-2); font-size:14px}
.widget-area ul li:last-child{border-bottom:0}
.tag-link-count,.tagcloud a{
  display:inline-block; font-family:var(--et-mono); font-size:11px !important;
  border:1px solid var(--et-line); border-radius:100px; padding:5px 12px; margin:0 5px 6px 0;
  background:var(--et-paper) !important; color:var(--et-ink-2) !important;
}
.tag-link-count:hover,.tagcloud a:hover{border-color:var(--et-green); color:var(--et-green-deep) !important}

/* --------------------------------------------------------------- tables --- */
.article-content table,.blog-details-desc table,table.et-table{
  width:100%; border-collapse:collapse; margin:26px 0; font-size:14px; background:var(--et-paper-2);
}
.article-content th,.blog-details-desc th,table.et-table th{
  text-align:left; font-family:var(--et-sans); font-weight:600; font-size:11.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--et-ink-2);
  padding:12px 16px; border-bottom:1.5px solid var(--et-ink);
}
.article-content td,.blog-details-desc td,table.et-table td{
  padding:13px 16px; border-bottom:1px solid var(--et-line-2); color:var(--et-ink-2); vertical-align:top;
}
.table-responsive,.et-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------------------------------------------------------------- forms --- */
.form-control,input[type=text],input[type=email],input[type=tel],input[type=number],textarea,select{
  background:var(--et-paper-2) !important; border:1px solid var(--et-line) !important;
  border-radius:4px !important; color:var(--et-ink) !important;
  font-family:var(--et-sans) !important; font-size:15px !important;
  padding:12px 14px !important; height:auto !important; box-shadow:none !important;
}
.form-control:focus,input:focus,textarea:focus,select:focus{
  border-color:var(--et-green) !important; outline:2px solid var(--et-wash); outline-offset:0;
}
.form-control::placeholder{color:#8A9280 !important}
label{font-size:13.5px; font-weight:600; color:var(--et-ink); margin-bottom:6px}
.help-block.with-errors{font-size:12.5px; color:#B04A22}

/* ------------------------------------------------------- page furniture --- */
.page-title-area,.page-title-content{
  background:var(--et-paper-2) !important; border-bottom:1px solid var(--et-line);
  padding:56px 0 !important; text-align:left;
}
.page-title-content h1,.page-title-content h2{margin:0}
.page-title-content ul{list-style:none; margin:12px 0 0; padding:0; display:flex; gap:10px; font-family:var(--et-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--et-ink-2)}

.case-studies-details-image img,.services-details-image img,.about-image img{border-radius:5px}

.go-top{
  background:var(--et-green-deep) !important; color:#fff !important;
  border-radius:4px !important; width:40px !important; height:40px !important;
  line-height:40px !important; box-shadow:none !important;
}
.go-top:hover{background:var(--et-green) !important}

/* the legacy preloader washes the page white before the theme boots */
.preloader{background:var(--et-paper) !important}
.preloader .loader .sbl-half-circle-spin div{border-color:var(--et-green) transparent transparent !important}

/* --------------------------------------------------------------- chrome --- */
/* main_header.html / main_footer.html carry their own et-* classes; these
   neutralise the legacy theme's chrome rules where markup still overlaps. */
.navbar-area,.tracer-nav,.tracer-responsive-nav{background:transparent !important; box-shadow:none !important}
.footer-area{background:var(--et-ink) !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ============================================================================
   Site chrome — used by includes/main_header.html and includes/main_footer.html
   ============================================================================ */
.et-wrap{max-width:var(--et-max); margin:0 auto; padding:0 40px}
@media (max-width:720px){ .et-wrap{padding:0 20px} }

/* ------------------------------------------------------------------ nav --- */
.et-nav{display:flex; align-items:center; gap:26px; padding:16px 0; border-bottom:1px solid var(--et-line)}
.et-nav .et-logo{display:flex; align-items:center; gap:10px; font-family:var(--et-sans); font-weight:600; font-size:14.5px; letter-spacing:-.015em; color:var(--et-ink); white-space:nowrap}
.et-nav .et-logo:hover{color:var(--et-ink)}
.et-nav .et-logo img{width:24px; height:24px}
.et-menu{display:flex; gap:20px; list-style:none; margin:0; padding:0; font-size:13.5px}
.et-menu > li{position:relative; margin:0}
.et-menu > li > a,.et-menu > li > button{
  color:var(--et-ink-2); background:none; border:0; font:inherit; cursor:pointer;
  padding:6px 0; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.et-menu > li > a:hover,.et-menu > li > button:hover,.et-menu > li:focus-within > button{color:var(--et-green-deep)}
.et-menu > li > a.et-on,.et-menu > li > button.et-on{color:var(--et-ink); font-weight:600}
.et-caret{width:9px; height:9px; opacity:.55; flex:none}
.et-sub{
  position:absolute; top:100%; left:-14px; min-width:238px; background:var(--et-paper-2);
  border:1px solid var(--et-line); border-radius:5px; padding:7px; list-style:none; margin:6px 0 0;
  box-shadow:0 8px 26px rgba(19,23,14,.10); opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s, transform .15s, visibility .15s; z-index:60;
}
.et-menu > li:hover > .et-sub,.et-menu > li:focus-within > .et-sub{opacity:1; visibility:visible; transform:none}
.et-sub li{margin:0}
.et-sub a{display:block; padding:8px 11px; font-size:13px; color:var(--et-ink-2); border-radius:4px}
.et-sub a:hover{background:var(--et-wash); color:var(--et-green-deep)}
.et-sub a.et-on{color:var(--et-green-deep); font-weight:600}
.et-nav .et-cta{
  margin-left:auto; font-size:13px; font-weight:600; color:#fff !important;
  background:var(--et-green-deep); padding:10px 16px; border-radius:4px; white-space:nowrap;
}
.et-nav .et-cta:hover{background:var(--et-green); color:#fff !important}
.et-burger{display:none; margin-left:auto; background:none; border:1px solid var(--et-line); border-radius:4px; padding:8px 10px; cursor:pointer}
.et-burger svg{width:18px; height:18px; display:block; color:var(--et-ink)}
#et-mobile{display:none; border-bottom:1px solid var(--et-line); background:var(--et-paper-2)}
#et-mobile[data-open="true"]{display:block}
#et-mobile ul{list-style:none; margin:0; padding:14px 0; display:grid; gap:1px}
#et-mobile li{margin:0}
#et-mobile a{display:block; padding:10px 0; font-size:15px; color:var(--et-ink)}
#et-mobile a:hover{color:var(--et-green-deep)}
#et-mobile .et-grp{font-family:var(--et-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--et-green); padding:14px 0 4px}
@media (max-width:1050px){
  .et-menu{display:none}
  .et-nav .et-cta{display:none}
  .et-burger{display:block}
}

/* --------------------------------------------------------------- footer --- */
.et-footer{background:var(--et-ink); color:#A8B29A; padding:64px 0 36px; font-size:13.5px; margin-top:0}
.et-footer .et-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.6fr; gap:40px}
.et-footer h3{font-family:var(--et-mono) !important; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:#7DD16A; margin:0 0 16px; font-weight:500}
.et-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.et-footer li{margin:0; color:#A8B29A}
.et-footer a{color:#A8B29A}
.et-footer a:hover{color:#F2F5EC}
.et-footer .et-brand img{width:170px; margin-bottom:14px}
.et-footer .et-brand p{color:#8A9480; font-size:13px; max-width:34ch}
.et-sub-form{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.et-footer input[type=email]{
  flex:1 1 190px; min-width:0; background:#1E2418 !important; border:1px solid #2F3826 !important;
  color:#F2F5EC !important; padding:11px 13px !important; border-radius:4px !important; font-size:14px !important;
}
.et-footer input[type=email]::placeholder{color:#78826E !important}
.et-footer input[type=email]:focus{outline:2px solid #7DD16A; outline-offset:1px; border-color:transparent !important}
.et-footer button[type=submit]{
  background:#7DD16A; color:#0E1409; border:0; font-family:var(--et-sans); font-size:14px;
  font-weight:600; padding:11px 18px; border-radius:4px; cursor:pointer;
}
.et-footer button[type=submit]:hover{background:#95E082}
#outputSubscribe{font-size:13px; margin-top:10px; min-height:1px}
#outputSubscribe.et-ok{color:#95E082}
#outputSubscribe.et-err{color:#E88A6A}
.et-footer .et-bottom{border-top:1px solid #2A3222; margin-top:44px; padding-top:22px; display:flex; gap:22px; flex-wrap:wrap; font-size:12px; color:#78826E}
.et-footer .et-bottom a{color:#78826E}
.et-footer .et-bottom a:hover{color:#F2F5EC}
@media (max-width:900px){ .et-footer .et-cols{grid-template-columns:1fr 1fr; gap:32px} }
@media (max-width:560px){ .et-footer .et-cols{grid-template-columns:1fr} }

.et-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------------------------------------------------- standalone splash --- */
/* coming-soon.html has no site chrome by design; keep it on the same ground */
.coming-soon-area{background:var(--et-paper) !important; background-image:none !important}
.coming-soon-content{background:var(--et-paper-2) !important; border:1px solid var(--et-line) !important; border-radius:6px; box-shadow:none !important; padding:44px !important}
.coming-soon-content h2{font-family:var(--et-serif) !important; font-weight:300}