/* ==========================================================================
   0. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
[role="link"], [role="button"] { cursor: pointer; }
:focus-visible { outline: 2px solid #7B5FD9; outline-offset: 2px; }

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* Colors */
--c-purple-900:#3B2482;
  --c-purple-800:#4B348F;
  --c-purple-700:#5B3FA0;
  --c-purple-100:#EFEAFB;
  --c-ink:#181121;
--c-ink-soft:#545454;
  --c-black-card:#141018;
  --c-bg:#FAFAFA;
  --c-white:#FFFFFF;
  --c-border:#E7E4EF;
  --c-line-onpurple:rgba(255,255,255,0.14);
  --c-text-onpurple:rgba(255,255,255,0.75);
--c-light-gray:#EAEAEA;

  /* Typography */
  --font-base:'Bricolage Grotesque', system-ui, -apple-system, Segoe UI, Roboto, sans-serif!important;
  --fs-h1: clamp(2.4rem, 4.6vw, 3.6rem);
  --fs-h2: clamp(1.9rem, 3.2vw, 2.6rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.975rem;
  --fs-xs: 0.75rem;

  /* Layout */
  --container-w: 1340px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --gap-section: clamp(64px, 8vw, 110px);
  --topbar-h: 40px;
  --navbar-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
}

body{
  font-family: var(--font-base);
  color: var(--c-ink);
  background: var(--c-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container{
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}


/* My Custom code ===========================###########============================== */ 

.admin-bar .site-header {top: 32px;}

.searchBoxnew button {
  -webkit-appearance:none;
  appearance:none;
  width:30px;
  height:30px;
  flex-shrink:0;
  border:none;
  border-radius:50%;
  background-color: var(--c-purple-900);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
  color:transparent;
  font-size:0;
  line-height:0;
  cursor:pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.searchBoxnew button:hover {background-color: #2f1b68; transform: translateY(-2px);}
.searchBoxnew form {display:flex;}
.author .story-taglists {max-width: 780px;}
.author .listing-content h3 {margin-bottom:15px;}
.author .listing-content p {margin-bottom:15px;}
.contactus-form .form2Rows p {display:inline-block;}
.contactus-form .form2Rows {display: flex; column-gap: 20px;}
.wp-block-table .has-fixed-layout {
    border-radius: 0px;
}
.footer__brand ul {list-style:none;}
.footer__brand ul li {color: rgba(255, 255, 255, .85);}
.footer__brand ul a {color:#fff;}
.single .over-arrow {display:none;}
.footer-header {font-size: var(--fs-xs); margin-top:30px; display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 18px;}
.over-mail {display:none;}
.single .over-mail {display:inline-block;}
.single .floating-cta.active .over-arrow {display:inline-block;}
.single .floating-cta.active .over-mail {display:none;}
.wp-block-table table {margin-bottom: 15px;}
.wp-block-table td, .wp-block-table th {border: 0px solid;}
.light_button {
  background: var(--c-light-gray); 
  padding: 10px 40px; 
  border-radius: 48px;    
  display: flex;
  column-gap: 10px;
  align-items: center;
}
.methods .article-card {background: #FEFEFE; border: 1px solid #BDBDBD; border-radius: 24px; padding:20px; 
  height:180px; 
  overflow: hidden;}
.methods .article-card__media {margin-bottom: 0;}
.methods .article-card__desc {margin-bottom: 15px;}
.methods .article-card__media {transform: rotate(-10deg); position: absolute; bottom: -45px; left: 45px; margin-right: -45px;}
.methods .article-card {position: relative;}
.methods .article-card__tag {color:#252525; background: #EAEAEA;}
.methods .article-card__readtime {padding: 4px 10px; border-radius: 48px; background: #fff; position: absolute; bottom: 20px; right:20px; z-index: 999;
    display: flex;
    column-gap: 9px;
    align-items: center;
    justify-content: center;
}
.methods .article-card__readtime svg { width: 15px; height: 15px; opacity: .9;}
.workflow .text-h2 {color: #FEFEFE;}
.workflow .text-body {color: #EAEAEA;}
.workflow .workflow-step .text-body {color: #252525;}


.resources .article-card__readtime {display: flex; align-items: center; column-gap: 5px;}
.resources .article-card__readtime svg {width: 15px; height: 15px;}
.network__main_product {display: flex; justify-content: center; align-items: center; column-gap: 20px;}
.network__main_product .prod_lists a {color:#EBE9F3; font-weight: 600; font-size: 16px; text-decoration: none;}
.network__main_product .prod_lists {display: flex; justify-content: center; align-items: center; column-gap: 20px;}
.network__main_product .prod_lists svg {width:40px; height: 40px;}
.network__main_product .prod_lists span {display: contents;}

.cta-wrap {position: relative;}
.cta-wrap .cta-inner_bottom {position: absolute; bottom: 0; width:100%; left: 0;}
.cta-wrap {
    height: 650px;
    background:
        linear-gradient(
            to top,
            #3B2482 0%,
            #3B2482 17%,
            rgba(59, 36, 130, 0) 100%
        ),
        url("images/footerbackground.jpg") center center / cover no-repeat;
}
.cta__partners .text-body {display: flex; align-items: center; column-gap: 15px;}
.gridImg-mobile {display: none;}
.workflow-boardImage img {width:100%;}
.hero__panel_wh {background: #FDFDFD; padding:15px; border-radius: 16px;}
.topbar__item_green svg {width:12px!important; height:12px!important;}

/* ==========================================================================
   2. REUSABLE COMPONENTS
   ========================================================================== */

/* --- Text roles (divs standing in for headings/paragraphs) --- */
.text-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size: var(--fs-xs);
  font-weight:500;
  letter-spacing:.02em;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: #EBE9F3;
  color: #201448;
  width:fit-content;
}
.text-eyebrow--onpurple{ background: rgba(255,255,255,0.1); color:#fff; }
.text-eyebrow--onblack{ background: rgba(255,255,255,0.08); color:#fff; }

.text-h1{ font-size: var(--fs-h1); font-weight:700; line-height:1.08; letter-spacing:-0.01em; }
.text-h2{ font-size: var(--fs-h2); font-weight:700; line-height:1.15; letter-spacing:-0.01em; }
.text-h3{ font-size: var(--fs-h3); font-weight:700; line-height:1.3; }
.text-body{ font-size: var(--fs-body); color: var(--c-ink-soft); line-height:1.4; }
.text-body--onpurple{ color: var(--c-text-onpurple); }
.text-small{ font-size: var(--fs-small); color: var(--c-ink-soft); }

/* --- Buttons --- */
.zsiq_flt_rel {
    background-color: #3b2482 !important;
}
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight:600;
  font-size: var(--fs-small);
  white-space:nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn--primary{ background: var(--c-purple-900); color:#fff; }
.btn--primary:hover{ background:#2f1b68; box-shadow:0 10px 24px rgba(60,36,130,.28); }
.btn--white{ background:#fff; color: var(--c-purple-900); }

/* ---- Small corner badge (e.g. "New") - sits on the button's top-right
   corner, red text on a light pill, blinking to draw the eye. Works on
   any .btn regardless of what's nested inside it (the <a> doesn't need
   its own position set - it anchors to .btn, which is now relative). ---- */
.btn__badge{
  position:absolute;
  top:-9px;
  right:-8px;
  background:#E4032E;
  color:#fff;
  font-size:9px;
  font-weight:800;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:4px 7px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  pointer-events:none;
  will-change: opacity;
  animation: btnBadgeBlink 1.3s ease-in-out infinite;
  animation-play-state: running;
}
/* Explicit: the badge keeps blinking through hover too - it's never
   paused, tied to :hover, or affected by the button's own hover
   transform (translateY on .btn is a separate compositor layer). */
.btn:hover .btn__badge{ animation-play-state: running; }
@keyframes btnBadgeBlink{
  0%, 100% { opacity:1; }
  50% { opacity:.3; }
}
.btn--white:hover{ box-shadow:0 10px 24px rgba(0,0,0,.12); }
.btn--outline{ background:transparent; border:1px solid var(--c-border); color: var(--c-ink); }
.btn--outline:hover{ border-color: var(--c-purple-900); color: var(--c-purple-900); }
.btn--outline-light{ background:transparent; border:1px solid #fff; color:#fff; }
.btn--outline-light:hover{ background:rgba(255,255,255,.08); }
.btn--sm{ padding:10px 18px; font-size: var(--fs-xs); }
.btn--icon-circle{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--c-border);
  flex-shrink:0;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn--icon-circle svg{ width:16px; height:16px; }
.btn--icon-circle:hover{ background: var(--c-purple-900); border-color: var(--c-purple-900); color:#fff; }
.btn--icon-circle.is-disabled{ opacity:.35; pointer-events:none; }

/* --- Section head --- */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin-bottom:44px;
}
.section-head__main{ max-width:560px; }
.section-head__main .text-eyebrow{ margin-bottom:16px; }
.section-head__main .text-h2{ margin-bottom:14px; }
.section-head__aside{ max-width:455px; text-align:left; flex-shrink:0; }
.section-head__aside .text-body {margin-bottom: 30px;}
.section-head--center{ flex-direction:column; align-items:center; text-align:center; }
.section-head--center .section-head__main{ max-width:640px; margin:0 auto; }
.section-head--center .section-head__main .text-eyebrow{ margin-inline:auto; }
.capabilities .section-head__aside {text-align: left;}

/* --- Nav / list helpers (divs acting as list/listitem) --- */
[role="list"]{ display:flex; }
.chip-list{ display:flex; flex-wrap:wrap; gap:10px; }

/* --- Card base --- */
.card{ background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-lg); }

/* --- Carousel (generic, reusable across 3 sliders) --- */
.carousel{ position:relative; }
.carousel__viewport{ overflow:hidden; }
.carousel__track{
  display:flex;
  gap:24px;
  transition: transform .5s var(--ease);
  will-change: transform;
}
.carousel__slide{ flex-shrink:0; }
.carousel__dots{ display:flex; justify-content:center; gap:8px; margin-top:28px; }
.carousel__dot{ width:8px; height:8px; border-radius:50%; background: var(--c-border); transition: all .25s var(--ease); }
.carousel__dot.is-active{ background: var(--c-purple-900); width:22px; border-radius:5px; }

.founder-section {display: flex; column-gap: 80px; align-items: start;}
.founder-section .map-block img {height:auto;}
.founder-section .text-h3 {width:500px;}
.founder-section .text-h3 h3 {margin-bottom: 20px;}
.founder-section .text-h3 p {color: #252525; font-size: 16px; font-weight: 400; }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index:100;
  background:#fff;
}

/* Spacer compensation: body is pushed down by the header's current height.
   This animates in sync with the topbar collapse so content never jumps. */
body{
  padding-top: calc(var(--topbar-h) + var(--navbar-h));
  transition: padding-top .45s var(--ease);
}
body.is-scrolled{
  padding-top: var(--navbar-h);
}

.topbar{
  background:#fff;
  border-bottom:1px solid var(--c-border);
  overflow:hidden;
  max-height: var(--topbar-h);
  opacity:1;
  transition: max-height .45s var(--ease), opacity .35s var(--ease), border-color .35s var(--ease);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: var(--topbar-h);
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
}
.topbar__left, .topbar__right{ display:flex; align-items:center; gap:22px; }
.topbar__item{ display:flex; align-items:center; gap:6px; }
.topbar__item svg{ width:13px; height:13px; opacity:.7; }

.navbar{
  background:#fff;
  transition: box-shadow .35s var(--ease);
}
.navbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: var(--navbar-h);
  gap:24px;
}
.navbar__logo{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.25rem; letter-spacing:-0.01em; }
.navbar__logo-mark{ width:28px; height:28px; border-radius:8px; background: var(--c-purple-900); flex-shrink:0; }

.navbar__menu{ display:flex; align-items:center; gap:32px; }
.navbar__link{ font-size: var(--fs-small); font-weight:500; color: var(--c-ink); transition: color .2s var(--ease); position:relative; }
.navbar__link:hover{ color: var(--c-purple-900); }

.navbar__actions{ display:flex; align-items:center; gap:14px; }
.navbar__search{ display:flex; align-items:center; gap:8px; color: var(--c-ink-soft); font-size: var(--fs-small); padding: 6px 8px 6px 12px;
    border-radius: 48px; border:1px solid #BDBDBD;}
.navbar__search input {outline: none; border:none;}
.navbar__search svg{ width:16px; height:16px; }

.navbar__burger{ display:none; flex-direction:column; gap:5px; width:24px; }
.navbar__burger span{ height:2px; background:var(--c-ink); border-radius:2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }

/* Scroll behaviour: header is fixed (see above), so animating the topbar's
   own height never fights with sticky/scroll layout math - no more jitter.
   The <body> padding-top animates in parallel to keep content in place. */
body.is-scrolled .topbar{
  max-height:0;
  opacity:0;
  border-color:transparent;
}
body.is-scrolled .navbar{
  box-shadow: 0 8px 24px rgba(20,10,40,.08);
}


/* ==========================================================================
   4. HERO
   ========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  min-height: clamp(480px, 56vw, 706px);
  display:flex;
  padding: 56px 0 48px;
}

/* Full-bleed background photo */
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(18,12,40,.35) 0%,
    rgba(35,20,85,.55) 40%,
    rgba(48,28,110,.82) 70%,
    var(--c-purple-900) 100%);
}

.hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  display:grid;
  grid-template-columns: 1fr 380px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "eyebrow panel"
    "gap     panel"
    "title   panel";
  gap: 20px 48px;
}
.hero__eyebrow-text{ grid-area:eyebrow; color:#fff; font-size: var(--fs-small); max-width:440px; }
.hero__title{ grid-area:title; align-self:end; color:#fff; font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight:700; line-height:1.1; letter-spacing:-0.02em; max-width:620px; }

/* Floating request panel */
.hero__panel{
  grid-area:panel;
  align-self:center;
  background:#E1E1E1;
  border-radius: var(--radius-lg);
  padding:22px;
  box-shadow: 0 30px 60px rgba(10,4,30,.35);
  width:100%;
}
.hero__panel-field{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding:12px 16px;
  margin-bottom:12px;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.hero__panel-field svg{ width:15px; height:15px; opacity:.55; flex-shrink:0; }
.hero__panel-field input{ border:none; outline:none; width:100%; font-size:var(--fs-small); background:transparent; }
.hero__panel-list{ margin: 14px 0 18px; display:flex; flex-direction:column; border-top:0px solid rgba(20,10,40,.08); }
.hero__panel-list-item{ display:flex; align-items:center; gap:12px; font-size: var(--fs-small); font-weight:500; padding:13px 2px; border-bottom:1px solid rgba(20,10,40,.08); }
.hero__panel-list-item:last-child {border-bottom:0px solid rgba(20,10,40,.08); }
.hero__panel-icon{
  width:30px; height:30px; border-radius:50%;
  background: var(--c-purple-100);
  color: var(--c-purple-900);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.hero__panel-icon svg{width: 32px; height: 32px;}
.hero__panel .btn{ width:100%; }

/* ==========================================================================
   24. HERO__PANEL AS A REAL CONTACT FORM 7 FORM
   Same lessons as the td-hero__bar / floating-cta__bar conversions: CF7
   auto-wraps each field's content in its own <p> (based on line breaks
   in the Form-tab editor), which sits between ".hero__panel-field" and
   the icon/input, so the field's own flex rules no longer reach them
   directly - fixed here proactively (rather than waiting to see it
   break) by making that <p> the real flex row.

   The submit becomes a real <input type="submit">, which can't hold a
   child <svg> the way the decorative ".btn.btn--primary.btn-heroform"
   div could - the arrow icon is recreated as a background-image on
   ::after instead; everything else matches ".btn.btn--primary" as
   closely as an <input> can (that class still applies via the tag's
   "class:" options, so the existing purple/pill/hover styling is
   unchanged).
   ========================================================================== */

.hero__panel-field p{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0;
}
.hero__panel-field .wpcf7-form-control-wrap{ flex:1; min-width:0; display:flex; }
.hero__panel-field .wpcf7-not-valid-tip{
  position:absolute;
  left:0px;
  top:100%;
  margin-top:4px;
  font-size:11px;
  color:#E4032E;
}

.hero__panel input[type="submit"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  padding:14px 44px 14px 26px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M1.40723 0.0253906H11.9072C12.1414 0.0253906 12.3373 0.104731 12.4961 0.263672C12.6547 0.422387 12.7343 0.617724 12.7344 0.851562V11.3516C12.7344 11.5855 12.6547 11.7816 12.4951 11.9404C12.3355 12.0993 12.1386 12.1787 11.9033 12.1787C11.6638 12.1787 11.4662 12.0992 11.3096 11.9404C11.153 11.7817 11.0752 11.5856 11.0752 11.3516V2.84277L11.0322 2.88477L1.43652 12.4863C1.26697 12.652 1.07344 12.7344 0.854492 12.7344C0.635968 12.7344 0.444 12.6508 0.27832 12.4814V12.4805C0.108871 12.3108 0.0253906 12.1169 0.0253906 11.8984C0.0254706 11.68 0.108792 11.4861 0.27832 11.3164L9.87402 1.7207L9.91699 1.67871H1.40723C1.16928 1.67865 0.972123 1.59809 0.813477 1.43848C0.654819 1.27898 0.575287 1.08281 0.575195 0.847656C0.575195 0.61248 0.654837 0.417454 0.813477 0.260742C0.972091 0.104066 1.16914 0.0254508 1.40723 0.0253906Z' fill='%23FEFEFE' stroke='%23FEFEFE' stroke-width='0.05'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 20px center;
  background-size:13px 13px;
  transition: transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}

.hero__panel .wpcf7-response-output{
  margin-top:10px;
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
  border-radius: var(--radius-md);
}

/* Trust bar */
.trustbar{ background: var(--c-purple-900); padding: 44px 0 56px; overflow:hidden; }
.trustbar__label{ text-align:center; color: var(--c-text-onpurple); font-size: var(--fs-xs); letter-spacing:.04em; margin-bottom:30px; }
.trustbar__marquee{
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.trustbar__track{
  display:flex;
  align-items:center;
  gap: clamp(40px, 6vw, 72px);
  width: max-content;
  animation: trustbar-scroll 26s linear infinite;
}
.trustbar__marquee:hover .trustbar__track{ animation-play-state: paused; }
.trustbar__logo{ display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.trustbar__logo img{ height:90px; width:auto; opacity:.9; filter: brightness(0) invert(1); transition: opacity .25s var(--ease); }
.trustbar__logo:hover img{ opacity:1; }

@keyframes trustbar-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ==========================================================================
   5. CAPABILITIES SECTION (purple, stacked cards)
   ========================================================================== */
.cardheader_caption p {color: var(--c-white); font-size: 16px; font-weight: 400;}
.capabilities{ background: var(--c-purple-900); padding: var(--gap-section) 0; }
.capabilities .section-head__main .text-h2,
.capabilities .section-head__main .text-body{ color:#fff; }
.capabilities .section-head__main .text-body{ color: var(--c-text-onpurple); }

.capability-list{ display:flex; flex-direction:column; gap:24px; }
.capability-card{
  background: var(--c-purple-800);
  border-radius: var(--radius-lg);
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:stretch;
  overflow:hidden;
}
.capability-card--dark{ background: var(--c-black-card); }
.capability-card__content{ padding:44px; display:flex; flex-direction:column; justify-content:space-between; gap:14px; }
.capability-inner__content{ display:flex; flex-direction:column; justify-content:start; gap:14px; }
.capability-card__content .text-eyebrow{ background:rgba(255,255,255,.12); color:#fff; }
.capability-card__content .text-h3{ color:#fff; font-size:1.7rem; }
.capability-card__content .text-body{ color: var(--c-text-onpurple); max-width:360px; }
.capability-card__content .btn{ margin-top:10px; align-self:flex-start; width: 66%;}
.capability-card__media{ min-height:280px; padding: 44px;}
.capability-card__media img{ width:100%; height:100%; object-fit:cover; border-radius: 10px; }

/* ==========================================================================
   6. TESTING METHODS (white, carousel)
   ========================================================================== */
.methods{ background: var(--c-bg); padding: var(--gap-section) 0; }
.article-card{ width: 100%; }
.article-card__media{ border-radius: var(--radius-md); overflow:hidden; margin-bottom:18px; background:#eee; }
.article-card__media img{ width:100%; height: 240px; object-fit:cover; }
.article-card__meta{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.article-card__tag{ font-size: var(--fs-xs); font-weight:600; padding:4px 10px; border-radius: var(--radius-pill); background: #EAEAEA; color: #252525; }
.article-card__readtime{ font-size: var(--fs-xs); color: var(--c-ink-soft); }
.article-card__title{ font-weight:700; font-size:1.05rem; line-height:1.35; margin-bottom:8px; }
.article-card__desc{ font-size: var(--fs-small); color: var(--c-ink-soft); }

.methods .carousel__slide{ width: calc((100% - 48px)/3); }

/* ==========================================================================
   7. INDUSTRY COVERAGE (purple, icon grid)
   ========================================================================== */
.industries{ background: var(--c-purple-900); padding: var(--gap-section) 0; }
.industries .section-head__main .text-h2{ color:#fff; }
.industries .section-head__main .text-body{ color: var(--c-text-onpurple); }
.industries .text-eyebrow{ background: #C2BBD8; color:##201448; }

.industry-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  overflow:hidden;
  gap: 30px;
}
.industry-item{
  background: var(--c-purple-900);
  padding:20px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.industry-item:hover{ background:#62509B; border-radius: 16px;}
.industry-item:hover .industry-item__icon{ background: var(--c-purple-100); color: var(--c-purple-900); }
.industry-item:hover .industry-item__link{ color: var(--c-purple-900); }
.industry-item:hover .industry-item__link {background: #FAFAFA;}
.industry-item__icon{
  width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}

.industry-item__icon svg{ width:18px; height:18px; }
.industry-item .text-h3{ color:#fff; font-size:1.05rem; }
.industry-item .text-body{ color: var(--c-text-onpurple); font-size: var(--fs-small); }
.industry-item__link{  border-radius: 48px; padding:5px 10px; display:flex; align-items:center; width: 110px; justify-content: center; gap:6px; font-size: var(--fs-xs); font-weight:600; color:#fff; margin-top:auto; }
.industry-item__link svg{ width:12px; height:12px; }

/* ==========================================================================
   8. WORKFLOW (light, diagram board)
   ========================================================================== */
.workflow{ background: var(--c-purple-900); padding: var(--gap-section) 0; }
.workflow-board{
  position:relative;
  background:
    radial-gradient(circle, #E7E4EF 1px, transparent 1.4px) 0 0/16px 16px,
    var(--c-bg);
  border:1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 56px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:32px 60px;
}
.workflow-step{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding:24px;
  box-shadow: 0 12px 30px rgba(20,10,45,.06);
}
.workflow-step .text-h3{ font-size:1.05rem; margin-bottom:8px; }
.workflow-step .text-body{ font-size: var(--fs-small); margin-bottom:14px; }
.workflow-step__tag{ display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-xs); font-weight:600; color: var(--c-purple-900); background: var(--c-purple-100); padding:6px 12px; border-radius: var(--radius-pill); }
.workflow-step--a{ grid-column:1; grid-row:1; }
.workflow-step--b{ grid-column:2; grid-row:1/3; align-self:center; }
.workflow-step--c{ grid-column:1; grid-row:2; }

/* ==========================================================================
   9. TECHNICAL RESOURCES (white, carousel with authors)
   ========================================================================== */
.resources{ background:#fff; padding: var(--gap-section) 0; }
.resources .carousel__slide{ width: calc((100% - 48px)/3); }
.article-card__author{ display:flex; align-items:center; gap:10px; padding-top:16px; }
.article-card__avatar{ width:32px; height:32px; border-radius:50%; overflow:hidden; background: var(--c-purple-100); flex-shrink:0; }
.article-card__avatar img{ width:100%; height:100%; object-fit:cover; }
.article-card__author-name{ font-size: var(--fs-xs); font-weight:700; }
.article-card__author-role{ font-size: var(--fs-xs); color: var(--c-ink-soft); }

/* ==========================================================================
   10. GLOBAL NETWORK (dark, image + panels)
   ========================================================================== */
.network{ position:relative; background: var(--c-purple-900); padding: var(--gap-section) 0 0; overflow:hidden; }
.network .section-head--center{ position:relative; z-index:2; margin-bottom:40px; }
.network .text-eyebrow{ background: rgba(255,255,255,.08); color:#fff; }
.network .text-h2{ color:#fff; }
.network .text-body{ color: #FEFEFE; }

.network__media{ position:relative; aspect-ratio: 16/7; background: linear-gradient(135deg,#1c1330,#3a2a63 60%, #b8632f); overflow:hidden; }
.network__media img{ width:100%; height:100%; object-fit:cover; }

.network__panels{
  position:relative;
  margin-top:-250px;
  z-index:3;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:0px;
  padding-bottom:0px;
  background: #E1E1E1;
  padding:10px;
  border-radius: 24px;
}
.network__panel_1 {background: #FEFEFE; border-top-right-radius: 0!important; border-bottom-right-radius: 0!important;}
.network__panel_2 {background: #FEFEFE; border-top-left-radius: 0!important; border-bottom-left-radius: 0!important;}
.network__panel_3 {background: #E1E1E1;}
.tickList {display: block;}
.network__panel{
  border-radius: var(--radius-lg);
  padding:28px;
}
.network__panel .text-h3{ font-size:1.05rem; margin-bottom:10px; }
.network__panel .text-body{ color: var(--c-ink-soft); font-size: var(--fs-small); }
.network__metric{ display:flex; align-items:center; gap:10px; font-size: var(--fs-small); font-weight:400; padding:1px 0; }
.network__metric svg{ width:16px; height:16px; color: var(--c-purple-900); flex-shrink:0; }

/* ==========================================================================
   11. TESTIMONIAL (purple, two-column: left intro + divider + right quote)
   ========================================================================== */
.testimonial{ background: var(--c-purple-900); padding: var(--gap-section) 0; }

.testimonial__inner{
  display:grid;
  grid-template-columns: minmax(220px, 320px) 1px 1fr;
  gap:48px;
  align-items:center;
}

.testimonial__left{ display:flex; flex-direction:column; gap:14px; }
.testimonial__left .text-eyebrow{ background: rgba(255,255,255,.1); color:#fff; width:fit-content; }
.testimonial__left .text-h2{ color:#fff; }
.testimonial__left .text-body{ color: var(--c-text-onpurple); }

.testimonial__divider{ width:1px; height:100%; min-height:180px; background: rgba(255,255,255,.22); align-self:stretch; }

.testimonial__right{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:24px; min-width:0; }
.testimonial__right .carousel{ grid-column:1; min-width:0; }
.testimonial__right .carousel__viewport{ overflow:hidden; }

.testimonial__nav{ grid-column:2; display:flex; align-items:center; gap:2px; background:#fff; border-radius: var(--radius-pill); padding:6px; align-self:center; }
.testimonial__nav-btn{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--c-ink); transition: background .2s var(--ease), color .2s var(--ease); }
.testimonial__nav-btn:hover{ background: var(--c-purple-100); color: var(--c-purple-900); }
.testimonial__nav-btn svg{ width:16px; height:16px; }
.testimonial__nav-divider{ width:1px; height:18px; background: var(--c-border); }

.testimonial-slide{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.testimonial-slide .text-h3{ color:#fff; font-size:1.5rem; font-weight:400; line-height:1.5; margin-bottom:28px; }
.testimonial-slide__author{ display:flex; align-items:center; gap:12px; }
.testimonial-slide__avatar{ width:52px; height:52px; border-radius:50%; overflow:hidden; background: var(--c-purple-100); flex-shrink:0; }
.testimonial-slide__avatar img{ width:100%; height:100%; object-fit:cover; }
.testimonial-slide__name{ font-weight:700; font-size:1.05rem; color:#fff; text-align:left; }
.testimonial-slide__role{ font-size: var(--fs-small); color: var(--c-text-onpurple); text-align:left; }
.testimonial .carousel__slide{ width:100%; }
.industries_about {padding-top:20px;}

/* legacy rule kept (unused by current markup, harmless if referenced elsewhere) */
.testimonial__media{ border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 21/8; margin-bottom: 56px; background:#1a1a1a; }
.testimonial__media img{ width:100%; height:100%; object-fit:cover; }

.our-team_sec {background: #F9F9F9;}
.value-belief-sec {background: #F9F9F9;}
/* ==========================================================================
   12. CTA
   ========================================================================== */
.cta{ background: var(--c-purple-900); border-radius: var(--radius-lg); }
.cta-wrap{ padding: 0 24px; }
.cta-inner{
  margin:0 auto;
  padding: 0px;
  display:grid;
  grid-template-columns: 1.2fr 0.6fr;
  gap:40px;
  align-items:center;
}
.cta__content .text-h2{ color:#fff; margin-bottom:10px; }
.cta__content .text-body{ color: var(--c-text-onpurple); }
.cta__actions{ display:flex; gap:14px; margin-top:24px; }
.cta__partners{ display:flex; flex-direction:column; gap:14px; }
.cta__partners-label{ color: var(--c-text-onpurple); font-size: 1rem;; text-align:left; }
.cta__partner-row{ display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.06); border:1px solid var(--c-line-onpurple); border-radius: var(--radius-pill); padding:12px 20px; }
.cta__partner-row .text-body{ color:#fff; font-size: var(--fs-small); margin:0; }
.cta__partner-row svg{ width:14px; height:14px; color:#fff; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer{ background: var(--c-purple-900); color:#fff; padding: 90px 0 0; margin-top: 0; }
.footer__top{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap:32px; padding-bottom:56px; border-bottom:1px solid var(--c-line-onpurple); }
.footer__brand-logo{ font-weight:700; font-size:1.3rem; margin-bottom:12px; }
.footer__brand .text-body{ color: var(--c-text-onpurple); max-width:260px; }
.footer__col-title{ font-size: var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: rgba(255,255,255,.5); margin-bottom:18px; }
.footer__col-list{ display:flex; flex-direction:column; gap:12px; }
.footer__link{ font-size: var(--fs-small); color: rgba(255,255,255,.85); transition: color .2s var(--ease); }
.footer__link:hover{ color:#fff; }
.footer__link a {color:rgba(255, 255, 255, .85);}
.footer__link a:hover {color:#fff;}
section.cta-wrap .btn--outline-light a {color: #fff;}

.footer__bottom{ display:flex; align-items:center; justify-content:space-between; padding:28px 0; flex-wrap:wrap; gap:16px; }
.footer__social{ display:flex; gap:12px; }
.footer__social-item{ width:34px; height:34px; border-radius:50%; border:1px solid var(--c-line-onpurple); display:flex; align-items:center; justify-content:center; transition: background .2s var(--ease); }
.footer__social-item:hover{ background: rgba(255,255,255,.1); }
.footer__social-item svg{ width:22px; height:22px; }
.footer__copyright{ font-size: var(--fs-xs); color: rgba(255,255,255,.5); }

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .hero{ min-height:auto; padding: 44px 0 40px; }
  .hero__inner{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "eyebrow"
      "title"
      "panel";
    gap:28px;
  }
  .hero__title{ align-self:auto; }
  .hero__panel{ margin-left:0; max-width:100%; }
  .methods .carousel__slide, .resources .carousel__slide{ width: calc((100% - 24px)/2); }
  .industry-grid{ grid-template-columns: repeat(2,1fr); }
  .network__panels{ grid-template-columns:1fr; margin-top:24px; }
  .network__media{ aspect-ratio:16/9; }
  .footer__top{ grid-template-columns: 1fr 1fr 1fr; }
  .cta-inner{ grid-template-columns:1fr; }
}

@media (max-width: 768px){
  :root{ --gap-section: 56px; }
  .container{ padding:0 20px; }
  .topbar__left .topbar__item:nth-child(2){ display:none; }
  .navbar__menu, .navbar__search{ display:none; }
  .navbar__burger{ display:flex; }
  .navbar .btn--sm{ padding:9px 16px; }

  .capability-card{ grid-template-columns:1fr; }
  .capability-card__media{ order:-1; min-height:220px; padding: 0px;}
  .capability-card__content{ padding:30px; }

  .section-head{ flex-direction:column; align-items:flex-start; text-align:left; gap:20px; }
  .section-head__aside{ text-align:left; }

  .methods .carousel__slide, .resources .carousel__slide{ width: 82%; }

  .industry-grid{ grid-template-columns:1fr; }

  .testimonial__inner{ grid-template-columns:1fr; gap:28px; }
  .testimonial__divider{ display:none; }
  .testimonial__right{ grid-template-columns:1fr; }
  .testimonial__nav{ justify-self:flex-start; }

  .workflow-board{ grid-template-columns:1fr; padding:24px; gap:20px; }
  .workflow-step--b{ grid-column:1; grid-row:auto; }

  .footer__top{ grid-template-columns: 1fr 1fr; gap:32px 20px; }
  .footer__brand{ grid-column: 1/3; }

  .cta-inner{ padding:32px; }
  .cta__actions{ flex-direction:column; }
  .cta__actions .btn{ width:100%; }


.topbar {display: none;}
.hero .hero__title { margin-top: 369px;}
main {    margin-top: -40px;}
.methods .article-card {height: 330px;}
.industries .section-head--center .section-head__main {text-align: center;}
.workflow .section-head__aside .text-body {    margin-bottom: 0px;}
.gridImg-mobile {display: block;}
.gridImg-desktop {display: none;}
.network__main_product {flex-wrap: wrap;}
.network__main_product .prod_lists {width:47%;    justify-content: start; margin-bottom: 10px; column-gap: 12px;}
.network__main_product .prod_lists svg {width: 26px;height: 26px;}
.network__main_product .prod_lists a {font-weight: 600; font-size: 14px;}
.network__media {aspect-ratio: auto!important;}
.network__panel_1 {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.network__panel_2 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 20px !important;
    border-top-right-radius: 0 !important;
}
    .network__panels {margin-bottom: 24px;}
    .network__media .container {background: url(images/vision-mission-bg.jpg);
background-position: center;
        background-repeat: no-repeat;
        padding-top: 245px;
        padding-bottom: 20px;
    }
    .network__media img {display: none;}


}

@media (max-width: 480px){
  .footer__top{ grid-template-columns:1fr 1fr; }
  .methods .carousel__slide, .resources .carousel__slide{ width:88%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .trustbar__track{ animation:none; }
}

/* ==========================================================================
   15. TEST DETAILS PAGE
   Content sections below (".entry-content") style raw h2/h3/h4/p/a/ul/li/ol/
   table output exactly as it will come out of the WordPress editor - every
   rule is a descendant selector off one parent class, nothing is hung on
   the content tags themselves. Only template chrome (tabs, sidebar, FAQ,
   steps nav) gets its own classes, since editors never touch that markup.
   ========================================================================== */

/* ---- Page title + "share requirements" bar ---- */
.td-hero{ padding: 56px 0 28px; text-align:center; }
.td-hero h1{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight:700; line-height:1.25; letter-spacing:-0.01em; max-width:820px; margin:0 auto; color:var(--c-ink); }
.td-hero__bar{ display:flex; align-items:center; gap:6px; max-width:720px; margin:32px auto 0; background:#fff; border:5px solid var(--c-border); border-radius:15px; padding:8px; box-shadow:0 20px 45px rgba(20,10,45,.08); }
.td-hero__field{ flex:1; display:flex; align-items:center; gap:10px; padding:12px 18px; position:relative; }
.td-hero__field:first-child::after{ content:''; position:absolute; right:0; top:20%; height:60%; width:1px; background:var(--c-border); }
.td-hero__field svg{ width:16px; height:16px; opacity:.5; flex-shrink:0; }
.td-hero__field input{ border:none; outline:none; width:100%; font-size:var(--fs-small); background:transparent; }
.td-hero__submit{ width:44px; height:44px; border-radius:50%; background:var(--c-purple-900); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: transform .25s var(--ease), background .25s var(--ease); }

/* ==========================================================================
   21. TD-HERO__BAR AS A REAL CONTACT FORM 7 FORM
   Same markup/classes as the static ".td-hero__bar", just with CF7 tags
   dropped in place of the raw <input>s. CF7 auto-wraps each field's
   content in its own <p> (based on line breaks in the Form-tab editor)
   and wraps the input itself in <span class="wpcf7-form-control-wrap">
   - checked the actual rendered markup, and that <p> sits between
   ".td-hero__field" and the icon/input, so ".td-hero__field"'s own flex
   rules no longer reach them (flex only affects direct children, and
   the <p> is now the only direct child). Fixed by making that <p> the
   real flex row instead. The submit <input> is targeted by
   "[type=submit]" rather than a class, since CF7 only adds the class
   from the tag's "class:" option if it was actually included when the
   tag was written - this way it's styled correctly either way.
   ========================================================================== */

.td-hero__field p{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0;
}
.td-hero__field .wpcf7-form-control-wrap{ flex:1; min-width:0; display:flex; }

/* Validation error tip: CF7 appends this inside the same field wrapper
   when a required field is left empty - let it drop to its own line
   under the pill instead of squeezing into the input's row. */
.td-hero__field .wpcf7-not-valid-tip{
  position:absolute;
  left:18px;
  top:100%;
  margin-top:4px;
  font-size:11px;
  color:#E4032E;
}

/* CF7 wraps the submit input in its own <p> too, sitting as a plain
   sibling of the two ".td-hero__field" divs inside ".td-hero__bar"
   (which is already "display:flex") - that <p> just needs its default
   margin removed and to not stretch/shrink like the fields do. */
.td-hero__bar > p{ margin:0; flex-shrink:0; display:flex; align-items:center; }

.td-hero__bar input[type="submit"],
.td-hero__submit-btn{
  -webkit-appearance:none;
  appearance:none;
  width:44px;
  height:44px;
  flex-shrink:0;
  border:none;
  border-radius:50%;
  background-color: var(--c-purple-900);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
  color:transparent;
  font-size:0;
  line-height:0;
  cursor:pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.td-hero__bar input[type="submit"]:hover,
.td-hero__submit-btn:hover{ background-color:#2f1b68; transform:translateY(-2px); }

/* CF7's little inline loading spinner, shown next to the submit button
   during an actual submission - keep it from disturbing the row's
   height/alignment. */
.td-hero__bar .wpcf7-spinner{ margin:0 0 0 8px; flex-shrink:0; }

/* CF7's success/error banner, shown under the bar after a submit */
.td-hero__bar-wrap .wpcf7-response-output{
  margin-top:10px;
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
  border-radius: var(--radius-md);
}

@media (max-width: 768px){
  .td-hero__bar > p,
  .td-hero__submit-btn{ width:100%; border-radius: var(--radius-pill); margin-top:6px; }
  .td-hero__bar input[type="submit"]{ width:100%; border-radius: var(--radius-pill); }
}
.td-hero__submit svg{ width:16px; height:16px; }
.td-hero__submit:hover{ background:#2f1b68; transform:translateY(-2px); }

/* ---- Table-of-contents tabs: sticky under the fixed header, scrollspy driven ---- */
.td-tabs{
  position: sticky;
  top: var(--navbar-h);
  z-index: 60;
  background:#fff;
  border-bottom: 1px solid var(--c-border);
}
.td-tabs__list{ display:flex; gap:36px; overflow-x:auto; scrollbar-width:none; }
.td-tabs__list::-webkit-scrollbar{ display:none; }
.td-tabs__link{
  position:relative;
  padding:18px 2px;
  font-size: var(--fs-small);
  font-weight:600;
  color: var(--c-ink-soft);
  white-space:nowrap;
  cursor:pointer;
  transition: color .2s var(--ease);
}
.td-tabs__link::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background: var(--c-purple-900);
  transform: scaleX(0);
  transition: transform .25s var(--ease);
}
.td-tabs__link:hover{ color: var(--c-ink); }
.td-tabs__link.is-active{ color: var(--c-ink); }
.td-tabs__link.is-active::after{ transform: scaleX(1); }

/* Scroll targets land below the fixed header + sticky tab bar.
   Covers both the old static demo ids (test-details.html /
   blog-details.html) and single.php's real, per-post h2 ids (those
   don't have fixed names, so they're matched via the .entry-content h2[id]
   pattern instead). 193px = topbar + navbar + sticky tabs bar height. */
#overview, #scope-benefits, #instrumentation, #results, #challenges, #faq,
.td-main .entry-content h2[id]{
  scroll-margin-top: 193px;
}

/* ---- Two column layout: article body + sticky sidebar ---- */
.td-layout{ background: var(--c-bg); padding: 48px 0 var(--gap-section); }
.td-layout__inner{
  display:grid;
  grid-template-columns: 1fr 440px;
  gap:32px;
  align-items:start;
}
.sideSingle_cta {display: flex; align-items: center; column-gap: 10px;}
.sideSingle_cta .td-sidebar__phone {background: #EAEAEA;}
.sideOnSingle .td-sidebar__actions .td-sidebar__email {background: #EAEAEA;}
.td-main{ display:flex; flex-direction:column; gap:24px; min-width:0; }

.td-card{ background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-lg); padding:32px; }
.td-card h2{ font-size: var(--fs-h3); font-weight:700; margin-bottom:20px; }
.td-card__media{ width:100%; border-radius: var(--radius-md); margin-bottom:24px; aspect-ratio:16/9; object-fit:cover; }

/* ---- .entry-content: raw WYSIWYG output styling (no classes on the tags) ---- */
.entry-content h3{ font-size:1.2rem; font-weight:700; margin: 28px 0 12px; }
.entry-content h3:first-child{ margin-top:0; }
.entry-content h4{ font-size:1rem; font-weight:700; margin-bottom:12px; }
.entry-content p{ color: var(--c-ink-soft); font-size: var(--fs-small); line-height:1.7; margin-bottom:14px; }
.entry-content p:last-child{ margin-bottom:0; }

.entry-content a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color: var(--c-ink);
  font-weight:600;
  font-size: var(--fs-small);
  line-height: 1.7;
  border-radius: var(--radius-pill);
  text-decoration:none;
  margin-top:6px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
/*.entry-content a:hover{ background: var(--c-purple-100); color: var(--c-purple-900); }*/
.entry-content a::after{ content:'\2197'; font-size:.9em; }
.popupButton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F0EFF2;
    color: var(--c-ink);
    font-weight: 600;
    font-size: var(--fs-xs);
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    margin-top: 6px;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.popupButton:hover{ background: var(--c-purple-100); color: var(--c-purple-900); }
.popupButton::after{ content:'\2197'; font-size:.9em; }

/* Checklist style: default <ul> = check icon + divider row */
.entry-content ul{ list-style:none; margin:8px 0 20px; padding:0; }
.entry-content ul li{
  position:relative;
  padding:14px 0 14px 36px;
  border-bottom:1px solid var(--c-border);
  font-weight:500;
  font-size: var(--fs-small);
}
.entry-content ul li:last-child{ border-bottom:none; }
.entry-content ul li::before{
  content:'';
  position:absolute;
  left:0; top:14px;
  width:20px; height:20px;
  border-radius:50%;
  background: var(--c-purple-100);
}
.entry-content ul li::after{
  content:'';
  position:absolute;
  left:6px; top:19px;
  width:9px; height:5px;
  border-left:2px solid var(--c-purple-900);
  border-bottom:2px solid var(--c-purple-900);
  transform: rotate(-45deg);
}

/* 2-column checklist grid variant (parent modifier only) */
.entry-content--grid ul{ display:grid; grid-template-columns:1fr 1fr; gap:2px 24px; }
.entry-content--grid ul li{ border-bottom:none; padding:10px 0 10px 36px; }

/* Plain numbered/bulleted list variant: no icon, no divider (parent modifier only) */
.entry-content--plain ol{ list-style:none; margin:8px 0 20px; padding:0; }
.entry-content--plain ol li{ padding:6px 0; color: var(--c-ink-soft); font-size: var(--fs-small); border-bottom:none; }

/* Table styling */
.entry-content table{ width:100%; border-collapse:collapse; margin-top:8px; border-radius: var(--radius-md); overflow:hidden; }
.entry-content th{ text-align:left; font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.03em; color: var(--c-ink-soft); padding:14px 18px; background:#F3F1F8; }
.entry-content td{ padding:16px 18px; font-size: var(--fs-small); color: var(--c-ink-soft); vertical-align:top; border-top:1px solid var(--c-border); }
.entry-content tbody tr:nth-child(even) td{ background:#F8F6FB; }

/* ---- Testing procedure steps: parent modifier drives a 2-up card grid,
        the ol/li/h4/ul underneath stay completely class-free ---- */
.td-steps-wrap{ margin: 8px 0; }
.td-steps ol{
  list-style:none;
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:4px 0 8px;
  margin:12px 0 0;
  scrollbar-width:none;
}
.td-steps ol::-webkit-scrollbar{ display:none; }
.td-steps ol > li{
  scroll-snap-align:start;
  flex:1 0 calc(50% - 10px);
  min-width:240px;
  background:#F7F6F9;
  border:1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding:20px;
}
.td-steps ol > li ul{ margin:0; }
.td-steps ol > li ul li{
  padding:8px 0 8px 26px;
  border-bottom:none;
  font-size: var(--fs-small);
}
.td-steps ol > li ul li::before{ left:0; top:9px; width:16px; height:16px; }
.td-steps ol > li ul li::after{ left:4px; top:13px; width:7px; height:4px; }

.td-steps-nav{ display:flex; justify-content:center; gap:12px; margin-top:16px; }

/* ---- FAQ: standalone accordion component (its own classes + JS) ---- */
.td-faq{ display:flex; flex-direction:column; }
.td-faq__item{ border-bottom:1px solid var(--c-border); }
.td-faq__item:last-child{ border-bottom:none; }
.td-faq__question{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; cursor:pointer; }
.td-faq__question > div:first-child{ font-weight:700; font-size: var(--fs-small); }
.td-faq__icon{ position:relative; width:26px; height:26px; border-radius:50%; background: var(--c-purple-100); flex-shrink:0; }
.td-faq__icon span{ position:absolute; left:50%; top:50%; background: var(--c-purple-900); transform:translate(-50%,-50%); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.td-faq__icon span:first-child{ width:10px; height:2px; }
.td-faq__icon span:last-child{ width:2px; height:10px; }
.td-faq__item.is-open .td-faq__icon span:last-child{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.td-faq__answer{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.td-faq__item.is-open .td-faq__answer{ max-height:240px; }
.td-faq__answer-inner{ padding:0 0 20px; color: var(--c-ink-soft); font-size: var(--fs-small); line-height:1.7; }

/* ---- Sidebar: sticky "quick summary" card ---- */
.td-sidebar{ position: sticky; top: calc(var(--navbar-h) + 64px + 24px); }
.td-sidebar__card{ background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-lg); padding:15px 20px; }
.td-sidebar__title{ font-size:1.1rem; font-weight:700; display:inline-block; text-decoration:underline; text-decoration-color:var(--c-border); text-underline-offset:8px; margin-bottom:10px; }
.td-sidebar__list{ display:flex; flex-direction:column; }
.td-sidebar__item{ display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--c-border); }
.td-sidebar__item:last-child{ border-bottom:none; }
.td-sidebar__icon{ width:38px; height:38px; border-radius:50%; background: var(--c-purple-100); color: var(--c-purple-900); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.td-sidebar__icon svg{ width:16px; height:16px; }
.td-sidebar__item-title{ font-weight:700; font-size: var(--fs-small); margin-bottom:4px; }
.td-sidebar__item-desc{ font-size: var(--fs-xs); color: var(--c-ink-soft); line-height:1.5; }
.td-sidebar__actions{ margin-top:5px; padding-top:15px; border-top:1px solid var(--c-border); display:flex; flex-direction:column; gap:12px; }
.td-sidebar__phone, .td-sidebar__email{ display:flex; align-items:center; gap:10px; font-size: var(--fs-small); font-weight:600; color: var(--c-ink); }
.td-sidebar__phone svg, .td-sidebar__email svg{ width:16px; height:16px; color: var(--c-purple-900); flex-shrink:0; }
.td-sidebar__actions .btn{ width:100%; }

/* ---- About author (full-width band under the two-column layout) ---- */
.td-author{
  background: var(--c-bg);
  background-image: radial-gradient(var(--c-border) 1px, transparent 1.4px);
  background-size:16px 16px;
  padding: 0 0 var(--gap-section);
}
.td-author__card{
  background:#fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px rgba(20,10,45,.08);
  padding:36px;
  display:flex;
  gap:28px;
  align-items:flex-start;
  max-width:900px;
  margin:0 auto;
  transform: translateY(-40px);
}
.td-author__avatar{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.td-author__avatar img{ width:100%; height:100%; object-fit:cover; }
.td-author__name{ font-size:1.2rem; font-weight:700; margin:8px 0 10px; }
.td-author__bio{ font-size: var(--fs-small); color: var(--c-ink-soft); line-height:1.7; margin-bottom:16px; }
.td-author__social{ display:flex; gap:10px; }
.td-author__social .footer__social-item{ border-color: var(--c-border); color: var(--c-ink); }
.td-author__social .footer__social-item:hover{ background: var(--c-purple-100); }

/* ==========================================================================
   16. TEST DETAILS PAGE - RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .td-layout__inner{ grid-template-columns: 1fr; }
  .td-sidebar{ position:static; top:auto; }
  .td-author__card{ transform:none; margin-top:-24px; }
}

@media (max-width: 768px){
  .td-hero{ padding:40px 0 24px; }
  .td-hero__bar{ flex-direction:column; align-items:stretch; border-radius: var(--radius-md); }
  .td-hero__field:first-child::after{ display:none; }
  .td-hero__field{ border-bottom:1px solid var(--c-border); }
  .td-hero__submit{ width:100%; border-radius: var(--radius-pill); margin-top:6px; }

  .td-card{ padding:22px; }
  .entry-content--grid ul{ grid-template-columns:1fr; }
  .td-steps ol > li{ flex-basis:85%; }

  .td-author__card{ flex-direction:column; align-items:flex-start; padding:26px; }
}


/* ==========================================================================
   17. TEST LISTING PAGE
   Card grid uses its own standalone component - ".tl-card" - fully
   decoupled from ".article-card" (the blog card). Renaming/restyling
   ".article-card" on the blog side can never affect this page, and vice
   versa; they just happen to share a similar visual language.
   ========================================================================== */

/* ---- Page title + search/filter bar ---- */
.tl-hero{ padding: 64px 0 40px; text-align:center; }
.tl-hero h1{ font-size: clamp(2rem, 4vw, 3rem); font-weight:700; line-height:1.15; letter-spacing:-0.01em; max-width:760px; margin:0 auto 16px; color: var(--c-ink); }
.tl-hero p{ font-size: var(--fs-small); color: var(--c-ink-soft); max-width:620px; margin:0 auto; line-height:1.6; }

/* ---- Category tab slider - replaces the search box + filter dropdown ---- */
.tl-tabbar{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:720px;
  margin:36px auto 0;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding:8px;
  box-shadow: 0 20px 45px rgba(20,10,45,.06);
}
.tl-tabbar__track{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.tl-tabbar__track::-webkit-scrollbar{ display:none; }
.tl-tab{
  flex-shrink:0;
  padding:12px 20px;
  border-radius: var(--radius-pill);
  font-weight:600;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  white-space:nowrap;
  cursor:pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.tl-tab:hover{ color: var(--c-ink); }
.tl-tab.is-active{ background:#EFEDF3; color: var(--c-ink); }
.tl-tabbar__nav{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* ---- Grid section ---- */
.tl-listing{ padding: 8px 0 var(--gap-section); }
.tl-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}

/* ---- .tl-card: title/desc/tag on top, full-bleed image at the bottom with
        a floating read-time pill over its corner. Standalone component -
        not a variant of .article-card. ---- */
.tl-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.tl-card__title{ font-weight:700; font-size:1.1rem; margin:26px 26px 8px; }
.tl-card__desc{ font-size: var(--fs-small); color: var(--c-ink-soft); line-height:1.5; margin:0 26px 16px; }
.tl-card__meta{ margin:0 26px 22px; display:flex; align-items:center; }
.tl-card__tag{ font-size: var(--fs-xs); font-weight:600; padding:6px 14px; border-radius: var(--radius-pill); background: var(--c-purple-100); color: var(--c-purple-900); }

/* read-time pops out of normal flow and floats over the image's corner */
.tl-card__readtime{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:6px;
  background:#fff;
  font-size: var(--fs-xs);
  font-weight:600;
  color: var(--c-ink);
  padding:8px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px rgba(20,10,45,.12);
}
.tl-card__readtime svg{ width:13px; height:13px; }

.tl-card__media{ margin-top:auto; aspect-ratio: 4/3; background:#eee; }
.tl-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Load more (replaces numbered pagination) ---- */
.tl-listing__more{ display:flex; justify-content:center; margin-top:48px; }
.tl-load-more.is-disabled{ opacity:.5; pointer-events:none; }

/* ==========================================================================
   18. TEST LISTING PAGE - RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .tl-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px){
  .tl-hero{ padding:44px 0 32px; }
  .tl-tabbar{ max-width:none; margin-left:16px; margin-right:16px; }
  .tl-grid{ grid-template-columns: 1fr; }
}


/* ==========================================================================
   19. SHARED COMPONENTS FOR NEW INNER PAGES
   (Careers / About us / Contact us). Sections already existing on index.html
   - .network, .workflow, .industries, .testimonial, .cta-wrap, .section-head,
   .text-eyebrow, .btn, .card, .carousel - are reused as-is on these pages
   with zero extra CSS. Everything below is genuinely new UI not already
   covered by index.html.
   ========================================================================== */

/* ---- Page hero: full-bleed photo, badge+button top, title+meta bottom ---- */
.page-hero{
  position:relative;
  overflow:hidden;
  min-height: clamp(340px, 34vw, 420px);
  display:flex;
  padding: 40px 0 36px;
}
.page-hero__bg{ position:absolute; inset:0; z-index:0; }
.page-hero__bg img{ width:100%; height:100%; object-fit:cover; object-position: top;}
.page-hero__bg::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(18,12,40,.25) 0%, rgba(35,20,85,.55) 45%, rgba(48,28,110,.88) 100%);
}
.page-hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "badge  button"
    "gap    meta"
    "title  meta";
  gap:16px 32px;
}
.page-hero__badge{ grid-area:badge; }
.page-hero__badge .text-eyebrow{ background:rgba(255,255,255,.9); color: var(--c-purple-900); }
.page-hero__button{ grid-area:button; justify-self:end; align-self:start; }
.page-hero__title{ grid-area:title; align-self:end; color:#fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight:700; line-height:1.2; letter-spacing:-0.01em; max-width:520px; }
.page-hero__meta{ grid-area:meta; align-self:center; justify-self:end; text-align:right; display:flex; flex-direction:column; gap:10px; }
.page-hero__location{ color:#fff; font-size: var(--fs-small); font-weight:600; }
.page-hero__location--underline{ text-decoration:underline; text-underline-offset:4px; }
.page-hero__contact{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.page-hero__contact-item{ display:flex; align-items:center; gap:8px; color: rgba(255,255,255,.85); font-size: var(--fs-small); }
.page-hero__contact-item svg{ width:14px; height:14px; flex-shrink:0; }

/* ---- Feature grid: icon + title + desc, N columns, plain background ---- */
.feature-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:36px 32px; }
.feature-grid--cols-3{ grid-template-columns: repeat(3, 1fr); }
.feature-grid--cols-2{ grid-template-columns: repeat(2, 1fr); }
.feature-grid__icon{
  width:44px; height:44px; border-radius:50%;
  background: var(--c-purple-100);
  color: var(--c-purple-900);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.feature-grid__icon svg{ width:19px; height:19px; }
.feature-grid__item .text-h3{ font-size:1.05rem; margin-bottom:8px; }
.feature-grid__item .text-body{ font-size: var(--fs-small); }

/* ---- Photo gallery strip (e.g. "Life at MaTestLab") ---- */
.gallery{ display:grid; 
  /*grid-template-columns: repeat(3, 1fr);*/
  grid-template-columns: 25% 50% 25%;
   gap:20px; }
.gallery img{ width:100%; aspect-ratio: 1/1; object-fit:cover; border-radius: var(--radius-lg); }

/* ---- Split block: image + text, two columns ---- */
.split-block{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
.split-block--reverse{ direction:rtl; }
.split-block--reverse > *{ direction:ltr; }
.split-block__media img{ width:100%; border-radius: var(--radius-lg); }
.split-block__content .text-eyebrow{ margin-bottom:16px; }
.split-block__content .text-h2{ margin-bottom:14px; }
.split-block__content .text-body{ margin-bottom:24px; }

/* ---- Talent network block: text + two offset/staggered photos ---- */
.talent-block{ display:grid; grid-template-columns: 1.1fr 1fr; gap:48px; align-items:center; }
.talent-block__media{ display:grid; 
  /*grid-template-columns: 1fr 1fr; */
      grid-template-columns: 36% 60%;
  gap:20px; }
.talent-block__media img{ width:100%; border-radius: var(--radius-lg); object-fit:cover; }
.talent-block__media img:last-child{ margin-top:32px; }

/* ---- Jobs listing ---- */
.jobs-filterbar{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px; justify-content: center;}
.jobs-filter{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-pill);
  padding:12px 18px; font-size: var(--fs-small); font-weight:500; color: var(--c-ink);
}
.jobs-filter svg{ width:14px; height:14px; opacity:.6; }
.jobs-list{ display:flex; flex-direction:column; gap:16px; }
.job-card{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-lg);
  padding:26px 30px;
  transition: box-shadow .2s var(--ease);
}
.job-card:hover{ box-shadow: 0 16px 34px rgba(20,10,45,.08); }
.job-card--active{ background: var(--c-purple-900); border-color: var(--c-purple-900); }
.job-card__tags{ display:flex; gap:8px; margin-bottom:10px; }
.job-card__tag{ font-size: var(--fs-xs); font-weight:600; padding:5px 12px; border-radius: var(--radius-pill); background: var(--c-purple-100); color: var(--c-purple-900); }
.job-card--active .job-card__tag{ background: rgba(255,255,255,.15); color:#fff; }
.job-card__title{ font-weight:700; font-size:1.1rem; margin-bottom:6px; }
.job-card--active .job-card__title{ color:#fff; }
.job-card__desc{ font-size: var(--fs-small); color: var(--c-ink-soft); max-width:520px; }
.job-card--active .job-card__desc{ color: rgba(255,255,255,.75); }
.job-card__action{ flex-shrink:0; }
.team-showcase__specialization .people-card__tag {padding: 0; border-radius: none; background: none; color: #252525;}

/* ---- People carousel: founders/advisors + single "team member" feature ---- */
.outer_feature-grid {padding: 40px 40px; border-radius: 24px; border: 8px solid #E1E1E1;}
.outer_feature-grid .feature-grid__item .text-h3 {font-size: 24px;}
.outer_feature-grid .feature-grid__item .text-h3 span {display: block;}
.who_we_are .text-body {color: #252525;}
.vision_mission_sec {padding-top:0;}
.td-listing {padding: var(--gap-section) 0;}
.value-belief-sec .feature-grid__item {text-align: center;}
.value-belief-sec .feature-grid__icon {margin:0 auto; margin-bottom: 20px;}
.people-card{ background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-lg); padding:24px; }
.people-card__media{ position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio:1/1; }
.people-card__media img{ width:100%; height:100%; object-fit:cover; }
.people-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 9;
    background: linear-gradient(
        to top,
        #3B2482 0%,
        rgba(59, 36, 130, 0.95) 20%,
        rgba(59, 36, 130, 0.6) 45%,
        transparent 75%
    );
    pointer-events: none;
}
.carousel_advisors .people-card__name, .carousel_advisors .people-card__role, .carousel_advisors .people-card__desc {color: #FEFEFE!important;}
.carousel_advisors .people-card__desc p {font-weight: 300; color: #f2f2f2!important}
.people-card__social{ position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:8px; }
.people-card__social .footer__social-item{ width:30px; height:30px; background:#fff; border-color: var(--c-border); color: var(--c-ink); }
.people-card__name{ font-weight:700; font-size:1.05rem; margin-bottom:4px; }
.people-card__role{ font-size: var(--fs-small); color: var(--c-ink-soft); margin-bottom:10px; }
.people-card__desc{ font-size: var(--fs-xs); color: var(--c-ink-soft); line-height:1.6; margin-bottom:12px; }
.people-card__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.people-card__tag{ font-size: var(--fs-xs); font-weight:600; padding:5px 12px; border-radius: var(--radius-pill); background: var(--c-purple-100); color: var(--c-purple-900); }
.people-over__image{ position:absolute; bottom:0px; left:0px; padding: 15px; padding-bottom: 5px; z-index: 999;}

.team-feature{ display:grid; grid-template-columns: 1fr 1.3fr; gap:40px; align-items:center; }
.team-feature__media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio:4/3; }
.team-feature__media img{ width:100%; height:100%; object-fit:cover; }
.team-feature__name{ font-weight:700; font-size:1.2rem; margin-bottom:6px; }
.team-feature__role{ font-size: var(--fs-small); color: var(--c-ink-soft); margin-bottom:20px; }
.team-feature__desc{ font-size: var(--fs-small); color: var(--c-ink-soft); line-height:1.7; margin-bottom:20px; }
.team-feature__tags-label{ font-size: var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.03em; color: var(--c-ink-soft); margin-bottom:8px; }
.team-feature__tags{ display:flex; gap:8px; }

.people-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:32px; }
.people-nav__count{ font-size: var(--fs-small); font-weight:600; color: var(--c-ink-soft); }

/* ---- Quote block ---- */
.quote-block{ text-align:center; max-width:820px; margin:0 auto; }
.quote-block__mark{ font-size:2.5rem; color: var(--c-purple-100); line-height:1; margin-bottom:12px; }
.quote-block__text{ font-size:1.3rem; font-weight:600; line-height:1.5; color: var(--c-ink); margin-bottom:20px; }
.quote-block__name{ font-weight:700; font-size: var(--fs-small); }
.quote-block__role{ font-size: var(--fs-xs); color: var(--c-ink-soft); }

/* ---- Contact info + form ---- */
.contact-block{ display:grid; grid-template-columns: 0.9fr 1.3fr; gap:48px; align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:28px; }
.contact-info__icon{
  width:42px; height:42px; border-radius:50%;
  background: var(--c-purple-100); color: var(--c-purple-900);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.contact-info__icon svg{ width:18px; height:18px; }
.contact-info__item .text-h3{ font-size:1.05rem; margin-bottom:8px; }
.contact-info__item .text-body{ font-size: var(--fs-small); }

.contact-form-card{ background:#fff; border-radius: var(--radius-lg); padding:36px; box-shadow: 0 20px 45px rgba(20,10,45,.08); }
.contact-form-card .text-h2{ margin-bottom:22px; }
.contact-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form-card input, .contact-form-card textarea{
  width:100%;
  border:1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding:14px 16px;
  font-size: var(--fs-small);
  margin-bottom:0px;
  outline:none;
  transition: border-color .2s var(--ease);
}
.contact-form-card input:focus, .contact-form-card textarea:focus{ border-color: var(--c-purple-900); }
.contact-form-card textarea{ min-height:110px; resize:vertical; font-family:inherit; }

/* ==========================================================================
   23. CONTACTUS-FORM AS A REAL CONTACT FORM 7 FORM ("Contact us form")
   Uses your actual HTML structure as-is - ".contactus-form" wrapping
   bare fields (Email, textarea, submit) plus ".contact-form__row" for
   the three paired rows. Both classes already exist and are already
   styled (".contact-form-card input/textarea" above, and
   ".contact-form__row"'s 2-up grid) - nothing here redefines that, it
   only accounts for what CF7 adds on top when the tags render:
     1) CF7 wraps each field's tag in its own <p> (based on line breaks
        in the Form-tab editor). Inside ".contact-form__row" this is
        harmless - the grid still applies to whatever its direct
        children are - but that <p>'s default margin needs zeroing so
        it doesn't add extra space around each field.
     2) The submit becomes a real <input type="submit">, which can't
        hold the original ".btn.btn--primary" div's separate text +
        arrow-icon children - the arrow is recreated as a
        background-image on ::after instead, everything else matches
        ".btn.btn--primary" as closely as an <input> can.
   ========================================================================== */

.contactus-form p{ margin:0; }
.contactus-form .wpcf7-form-control-wrap{ display:block; width:100%; margin-bottom:20px;}

/* Row/field spacing already comes from ".contact-form-card input,
   textarea{ margin-bottom:16px; }" above - that reaches the real CF7
   <input>/<textarea> fine regardless of the <p>/<span> CF7 wraps
   around them, so it's not redefined here; the <p> reset above just
   stops it from also adding its own default margin on top of that. */

.contactus-form .wpcf7-not-valid-tip{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:#E4032E;
}

.contactus-form input[type="submit"]{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  margin-bottom:0;
  border:none;
  border-radius: var(--radius-pill);
  background-color: var(--c-purple-900);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 20px center;
  background-size:14px 14px;
  color:#fff;
  font-weight:600;
  font-size: var(--fs-small);
  padding:14px 44px 14px 26px;
  cursor:pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.contactus-form input[type="submit"]:hover{
  background-color:#2f1b68;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(60,36,130,.28);
}

.contactus-form .wpcf7-response-output{
  margin-top:8px;
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
  border-radius: var(--radius-md);
}

/* ---- Map block ---- */
.map-block img{ width:100%; border-radius: var(--radius-lg); display:block; }

/* ---- "Let's work together" light section wrapper ---- */
.together-section{ padding: var(--gap-section) 0; }
.together-section .section-head {margin-top:40px;}
.together-section .map-block {padding:5px;}
.together-inner-box {background: #E1E1E1; border-radius: 24px;}
.fontact-form-body {padding:30px 30px;}
.fontact-form-body {padding-top:0px;}

/* Contrast fix: the header's Material/Product/Failure/Post-test icon row
   (".network__main_product") is styled for use on a dark image background.
   These new pages place the same component on a plain light section, so
   the label color needs to flip to stay legible - everything else reused. */
.section-head--oncard .network__main_product .prod_lists a{ color: var(--c-ink); }

/* ==========================================================================
   20. NEW INNER PAGES - RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .page-hero__inner{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "badge"
      "title"
      "meta"
      "button";
    gap:16px;
  }
  .page-hero__button, .page-hero__meta{ justify-self:start; text-align:left; align-items:flex-start; }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .feature-grid--cols-3{ grid-template-columns: repeat(2, 1fr); }
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .split-block, .talent-block, .team-feature, .contact-block{ grid-template-columns:1fr; }
  .talent-block__media{ order:-1; }
}

@media (max-width: 768px){
  .feature-grid, .feature-grid--cols-3, .feature-grid--cols-2{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr; }
  .job-card{ flex-direction:column; align-items:flex-start; gap:16px; }
  .job-card__action{ align-self:flex-end; }
  .contact-form__row{ grid-template-columns:1fr; }
  .contact-form-card{ padding:24px; }
  .talent-block__media img:last-child{ margin-top:0; }

  .founder-section {display: block;}
  .founder-section .text-h3 {width:100%;}
  .page-hero__contact {align-items: start;}
  .split-block__media img {height: auto;}
  .talent-block__media img {height: 150px;}
  .blog-grid-option3 .article-card__media img {height: auto!important;}
  .testimonial__right .carousel {grid-column: 2;}
  .tl-listing .article-card__media {margin: 8px;}
  .map-block img {height: auto;}
  .founder-adviser-part .carousel__slide {width: auto!important;} 
  .testimonial-slide .text-h3 {font-size: 1.2rem;}
  .testimonial__right {column-gap: 0;}

}


/* ==========================================================================
   21. BLOG LISTING PAGE
   The cards below use the base ".article-card" component exactly as already
   defined (image, tag + read-time, title, desc, author row) - zero extra
   card CSS needed. Only the page header and grid wrapper are new.
   ========================================================================== */
.blog-hero{ padding: var(--gap-section) 0 40px; text-align:center; }
.blog-hero h1{ font-size: clamp(2rem, 4vw, 3rem); font-weight:700; letter-spacing:-0.01em; color: var(--c-ink); margin-bottom:32px; }

.blog-tabbar{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.blog-tab{
  display:flex; align-items:center; gap:6px;
  padding:12px 22px;
  border-radius: var(--radius-pill);
  font-weight:600; font-size: var(--fs-small);
  color: var(--c-ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.blog-tab:hover{ color: var(--c-ink); }
.blog-tab.is-active{ background:#EFEDF3; color: var(--c-ink); }
.blog-tab svg{ width:14px; height:14px; }

.blog-search{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-pill);
  padding:12px 20px; flex:1; max-width:320px;
}
.blog-search svg{ width:16px; height:16px; opacity:.5; flex-shrink:0; }
.blog-search input{ border:none; outline:none; width:100%; font-size: var(--fs-small); background:transparent; }

.blog-listing{ padding:0 0 var(--gap-section); }
.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px 24px; }
.blog-grid + .blog-grid{ margin-top:48px; }
.blog-grid--featured{ grid-template-columns: repeat(2, 1fr); margin-bottom:48px; }
.blog-grid .article-card__readtime svg {width:14px; height: 14px;}
.blog-grid .article-card__readtime {display: flex; align-items: center; column-gap: 5px;}
.blog-grid-option2 {grid-template-columns: 66% 33%;}
.blog-grid-option3 {grid-template-columns: 66% 33%;}
.blog-grid-option3 .article-card__media img {height: 240px;}
.career-vision .map-block {background: #E1E1E1; padding: 12px; border-radius: 24px;}
.career-vision .map-block img {height: auto;}

/* ==========================================================================
   22. BLOG LISTING PAGE - RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .blog-grid{ grid-template-columns: repeat(2, 1fr); }
  .blog-grid--featured{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .blog-grid{ grid-template-columns: 1fr; }
  .blog-tabbar{ flex-direction:column; align-items:stretch; }
  .blog-search{ max-width:none; }
}


/* ==========================================================================
   23. TEAM SHOWCASE (Contact Us "Meet Our Team" - 3-column carousel feature)
   New, distinct classes on purpose: the older ".team-feature"/".people-nav"
   layout is still used as-is on about-us.html, so this doesn't touch it.
   ========================================================================== */
.team-showcase{ display:grid; grid-template-columns: 0.85fr 1.3fr 0.95fr; gap:40px; align-items:stretch; }

.team-showcase__info{ height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.team-showcase__name{ font-size:1.6rem; font-weight:700; margin-bottom:8px; }
.team-showcase__role{ font-size:1.05rem; color: #252525; }
.team-showcase__spec-label{ font-size: var(--fs-small); color: var(--c-ink-soft); margin-bottom:14px; }
.team-showcase__spec-tags{ display:flex; flex-wrap:wrap; gap:10px; }

.team-showcase__media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 1/1.05; background:#eee; }
.team-showcase__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-showcase__social{ position:absolute; top:20px; right:20px; display:flex; flex-direction:column; gap:12px; }
.team-showcase__social .footer__social-item{ width:44px; height:44px; background:#fff; border:none; color: var(--c-ink); box-shadow: 0 8px 20px rgba(20,10,45,.18); }
.team-showcase__social .footer__social-item:hover{ background: var(--c-purple-100); color: var(--c-purple-900); }

.team-showcase__desc{ font-size: 16px; color:#252525; line-height:1.5; }

.team-showcase-nav{ display:grid; grid-template-columns: 0.85fr 1.3fr 0.95fr; gap:40px; align-items:center; margin-top:28px; }
.team-showcase-nav__count{ font-weight:600; color: var(--c-ink-soft); font-size: var(--fs-small); }
.team-showcase-nav__arrows{ display:flex; gap:10px; justify-self:end; }

@media (max-width: 1024px){
  .team-showcase{ grid-template-columns:1fr; text-align:center; }
  .team-showcase__info{ flex-direction:column-reverse; align-items:center; gap:20px; }
  .team-showcase__spec-tags{ justify-content:center; }
  .team-showcase__media{ order:-1; aspect-ratio:4/3; }
  .team-showcase-nav{ grid-template-columns: 1fr; justify-items:center; gap:12px; }
  .team-showcase-nav__arrows{ justify-self:center; }
}

/* ==========================================================================
   16. BLOG DETAILS PAGE
   Same raw-content philosophy as the test details template (".entry-content"
   still carries every h2/h3/p/a/ul/li/table rule via descendant selectors -
   nothing is hung on the content tags themselves). Chrome classes here are
   namespaced "bd-" so this page doesn't collide with the "td-" set used on
   test-details.html; the sidebar is a floating TOC on the left instead of a
   sticky summary card on the right.
   ========================================================================== */

/* ---- Two column layout: floating TOC sidebar (left) + article body (right),
        both sitting inside one shared white panel ---- */
.bd-layout{ background: var(--c-bg); padding: 48px 0 var(--gap-section); }
.bd-panel{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items:start;
}

/* ---- Sidebar: floats (sticky) alongside the article as the page scrolls ---- */
.bd-sidebar{
  position: sticky;
  top: calc(var(--navbar-h) + 25px + 20px);
  display:flex;
  flex-direction:column;
  gap:20px;
}

.bd-toc{ background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-lg); padding:22px; box-shadow: 0 20px 45px rgba(20,10,45,.05); }
.bd-toc__title{ font-size:1.25rem; font-weight:800; margin-bottom:16px; }
.bd-toc__list{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.bd-toc__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-radius: var(--radius-md);
  background:#F5F4F8;
  font-size: var(--fs-xs);
  font-weight:600;
  line-height:1.4;
  color: var(--c-ink);
  cursor:pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.bd-toc__item svg{ width:14px; height:14px; flex-shrink:0; opacity:.55; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.bd-toc__item:hover{ background: var(--c-purple-100); }
.bd-toc__item.is-active{ background: var(--c-purple-100); color: var(--c-purple-900); }
.bd-toc__item.is-active svg{ opacity:1; transform: translateX(2px); }
.bd-toc__viewall{
  width:100%;
  text-align:center;
  padding:13px;
  border-radius: var(--radius-pill);
  background:#F5F4F8;
  font-size: var(--fs-xs);
  font-weight:700;
  cursor:pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.bd-toc__viewall:hover{ background: var(--c-purple-100); color: var(--c-purple-900); }

.bd-sidebar__actions{ display:flex; flex-direction:column; gap:12px; }
.bd-sidebar__phone, .bd-sidebar__email{
  display:flex;
  align-items:center;
  justify-content: center;
  gap:10px;
  font-size: var(--fs-small);
  font-weight:600;
  color: var(--c-ink);
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding:14px 20px;
  cursor:pointer;
  transition: border-color .2s var(--ease);
}
.bd-sidebar__phone svg, .bd-sidebar__email svg{ width:16px; height:16px; color: var(--c-purple-900); flex-shrink:0; }
.bd-sidebar__phone:hover, .bd-sidebar__email:hover{ border-color: var(--c-purple-900); }
.bd-sidebar__cta{ width:100%; justify-content:center; }

/* ---- Article body ---- */
.bd-main{ min-width:0; }

.bd-article__head h1{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight:800; line-height:1.25; letter-spacing:-0.01em; color: var(--c-ink); margin-bottom:18px; }
.bd-article__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-bottom:28px; }
.bd-article__author{ display:flex; align-items:center; gap:8px; font-size: var(--fs-xs); font-weight:700; color: var(--c-ink); }
.bd-article__author img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.bd-article__date{ display:flex; align-items:center; gap:6px; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.bd-article__date svg{ width:14px; height:14px; }
.bd-article__badge{ font-size: var(--fs-xs); font-weight:700; background:#F5F4F8; padding:8px 16px; border-radius: var(--radius-pill); }

.bd-article__media{ width:100%; border-radius: var(--radius-lg); overflow:hidden; margin-bottom:32px; aspect-ratio:16/8; background:#eee; }
.bd-article__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Each content section is one ".entry-content" block, spaced by its parent -
   headings/paragraphs/lists/links/tables inside stay entirely class-free. */
.bd-main > .entry-content{ margin-bottom:36px; }
.bd-main > .entry-content:last-of-type{ margin-bottom:0; }
.entry-content h2{ font-size: var(--fs-h3); font-weight:800; margin-bottom:14px; }
.entry-content h2:first-child{ margin-top:0; }

/* ---- FAQ: standalone accordion component, not editor content ---- */
.bd-faq{ margin-top:8px; }
.bd-faq > h2{ font-size: var(--fs-h3); font-weight:800; display:inline-block; margin-bottom:8px; text-decoration:underline; text-decoration-color:var(--c-border); text-underline-offset:10px; }
.bd-faq__list{ display:flex; flex-direction:column; margin-top:8px; }
.bd-faq__item{ border-bottom:1px solid var(--c-border); }
.bd-faq__item:last-child{ border-bottom:none; }
.bd-faq__question{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; cursor:pointer; }
.bd-faq__question > div:first-child{ font-weight:700; font-size: var(--fs-small); }
.bd-faq__icon{ position:relative; width:26px; height:26px; border-radius:50%; background: var(--c-purple-100); flex-shrink:0; }
.bd-faq__icon span{ position:absolute; left:50%; top:50%; background: var(--c-purple-900); transform:translate(-50%,-50%); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.bd-faq__icon span:first-child{ width:10px; height:2px; }
.bd-faq__icon span:last-child{ width:2px; height:10px; }
.bd-faq__item.is-open .bd-faq__icon span:last-child{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.bd-faq__answer{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.bd-faq__item.is-open .bd-faq__answer{ max-height:240px; }
.bd-faq__answer-inner{ padding:0 0 20px; color: var(--c-ink-soft); font-size: var(--fs-small); line-height:1.7; }

@media (max-width: 1024px){
  .bd-panel{ grid-template-columns:1fr; padding:26px; }
  .bd-sidebar{ position:static; top:auto; flex-direction:row; flex-wrap:wrap; gap:16px; }
  .bd-toc{ flex:1 1 100%; }
  .bd-sidebar__actions{ flex:1 1 100%; flex-direction:row; flex-wrap:wrap; gap:12px; }
  .bd-sidebar__actions .btn{ order:-1; flex:1 1 100%; width:100%; }
  .bd-sidebar__phone, .bd-sidebar__email{ flex:1 1 auto; }
}
@media (max-width: 768px){
  .bd-panel{ padding:20px; border-radius: var(--radius-md); }
  .bd-article__meta{ gap:12px; }
  .bd-sidebar__actions{ flex-direction:column; flex-wrap:nowrap; gap:12px; }
  .bd-sidebar__actions .btn{ order:0; flex:0 0 auto; width:100%; }
  .bd-sidebar__phone, .bd-sidebar__email{ flex:0 0 auto; width:100%; }
}

/* ==========================================================================
   17. SECTION DETAIL MODAL (test-details.html)
   One shared popup, one content slot - no per-section markup lives in the
   modal itself. Every section keeps its own extra content in a hidden
   ".more_content" block right after its "Read more" link (real content,
   normal document order, just CSS-hidden below); on click, JS clones that
   section's ".more_content" into ".td-modal__panel .entry-content". Panel
   bodies stay on the same raw-content philosophy as the rest of the page:
   h2/h3/p/ul/li carry no classes, everything is styled off ".entry-content"
   plus two small parent-only modifiers - ".badge-grid" (badge-check icon,
   2-col, boxed) and ".dot-list" (plain bulleted list) - for the two list
   styles the modal design needs beyond the checklist/plain variants already
   defined for the page body. NOTE: named "badge-grid" (not "feature-grid")
   because ".feature-grid" is already a different, unrelated component used
   on about-us.html / careers.html - reusing that name here would have
   silently broken those pages.
   ========================================================================== */

body.has-modal-open{ overflow:hidden; }

/* Extra per-section content, only ever shown once it's cloned into the
   modal above - kept in the page in normal reading order so it stays real,
   crawlable content rather than something injected purely for the popup. */
.more_content{ display:none; }

.td-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding: 48px 20px;
  overflow-y:auto;
}
.td-modal.is-open{ display:flex; }
.td-modal__backdrop{ position:fixed; inset:0; background: rgba(20,10,33,.55); }
.td-modal__dialog{
  position:relative;
  background:#fff;
  border-radius: var(--radius-lg);
  width:100%;
  max-width:900px;
  margin:auto;
  box-shadow: 0 40px 80px rgba(20,10,45,.28);
  animation: tdModalIn .25s var(--ease);
}
@keyframes tdModalIn{
  from{ opacity:0; transform:translateY(16px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.td-modal__head{ display:flex; justify-content:center; padding:20px 0; border-bottom:1px solid var(--c-border); }
.td-modal__close{
  width:44px; height:44px;
  border-radius:50%;
  background:#F0EFF2;
  color: var(--c-ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.td-modal__close svg{ width:18px; height:18px; }
.td-modal__close:hover{ background: var(--c-purple-100); color: var(--c-purple-900); }

.td-modal__body{ padding: 32px 40px 8px; max-height: 62vh; overflow-y:auto; }
.td-modal__panel .entry-content{ min-height:40px; }
.td-modal__panel .entry-content h2{ font-size: var(--fs-h3); font-weight:800; margin-bottom:14px; }
.td-modal__panel .entry-content h3{ margin-top:24px; }
.td-modal__panel .entry-content h3:first-child{ margin-top:0; }

.td-modal__footer{ padding: 24px 40px 36px; border-top:1px solid var(--c-border); margin-top:20px; }
.td-modal__footer .td-hero__bar{ margin:0; max-width:none; }

/* ---- .badge-grid: badge-check icon, 2-col, boxed (parent modifier only) ---- */
.badge-grid{ background: var(--c-bg); border-radius: var(--radius-md); padding:24px 28px; margin:20px 0 28px; }
.badge-grid ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:18px 32px; }
.badge-grid ul li{
  position:relative;
  padding-left:34px;
  font-weight:600;
  font-size: var(--fs-small);
  color: var(--c-ink);
  border-bottom:none;
}
.badge-grid ul li::before{
  content:'';
  position:absolute;
  left:0; top:-1px;
  width:22px; height:22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B2482' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat:no-repeat;
}

/* ---- .dot-list: plain bulleted list, no divider (parent modifier only) ---- */
.dot-list{ margin:12px 0 28px; }
.dot-list ul{ list-style:none; margin:0; padding:0; }
.dot-list ul li{
  position:relative;
  padding:6px 0 6px 20px;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  line-height:1.6;
  border-bottom:none;
}
.dot-list ul li::before{
  content:'';
  position:absolute;
  left:2px; top:15px;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--c-ink);
}

@media (max-width: 768px){
  .td-modal{ padding:0; align-items:flex-end; }
  .td-modal__dialog{ max-width:none; width:100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height:92vh; display:flex; flex-direction:column; }
  .td-modal__body{ padding:24px 22px 8px; max-height:none; flex:1 1 auto; }
  .td-modal__footer{ padding:20px 22px 28px; }
  .badge-grid{ padding:18px 20px; }
  .badge-grid ul{ grid-template-columns:1fr; gap:14px; }
}

/* ==========================================================================
   18. FLOATING CTA (reusable across all pages)
   Fixed, bottom-center bar for lead capture. Class-namespaced under
   ".floating-cta" so it never collides with the page-specific ".td-hero__bar"
   it visually echoes - this is a standalone, drop-in component: copy the
   ".floating-cta" markup block + this CSS section + the script block at the
   bottom of the page into any other page that needs it.

   Visibility is driven entirely by JS toggling ".is-visible" on the outer
   ".floating-cta" element:
     - hidden (slid down, out of view) near the top of the page
     - slides up once the user scrolls past 50% of the first viewport
     - slides back down again if they scroll back above that point
     - slides down and hides once the footer is reached, on any breakpoint
   ========================================================================== */

.floating-cta{
  position: fixed;
  left: 50%;
  bottom: 10px;
  z-index: 150;
  max-width: calc(100vw - 32px);
  background:#fff;
  border: 1px solid var(--c-border);
  border-radius: 50px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(20,10,45,.18);
  transform: translate(-50%, calc(100% + 48px));
  opacity: 0;
  pointer-events: none;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}
.floating-cta.is-visible{
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.floating-cta__bar{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding:8px;
}

.floating-cta__field{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border:1px solid var(--c-border);
  border-radius: var(--radius-pill);
}
.floating-cta__field svg{ width:16px; height:16px; opacity:.55; flex-shrink:0; color: var(--c-ink-soft); }
.floating-cta__field input{ border:none; outline:none; background:transparent; font-size: var(--fs-small); width:180px; max-width:32vw; }
.floating-cta__field input::placeholder{ color: var(--c-ink-soft); }
.floating-cta__field--email input{ width:140px; }

.floating-cta__submit{ position:relative; flex-shrink:0; }

@media (max-width: 640px){
.zsiq_theme1.zsiq_floatmain {bottom: 84px!important;}
	  .hero__panel .floating-cta__submit {
        border-radius: 99px!important;
    }
    #floatingCta .floating-cta__submit svg {
        position: absolute;
        left: 13px;
        top: 14px;
    }
	#floatingCta.floating-cta {padding: 0px; padding: 0!important;}
	#floatingCta .floating-cta__field svg {display: none;}
	
  .floating-cta{ bottom:16px; padding:8px; border-radius:28px; }
  .floating-cta__bar{ gap:6px; padding:6px; }
  .floating-cta__field{ padding: 10px 10px; }
  .floating-cta__field input{ width:34vw; min-width:110px; }

  /* Email field collapses to an icon-only circle - matches the compact
     mobile layout in the design (input hidden, just the icon remains). */
/*   .floating-cta__field--email{ padding:0; width:44px; height:44px; justify-content:center; }
  .floating-cta__field--email input{ display:none; } */

  /* Submit button collapses to an icon-only circle too - label hides,
     arrow icon stays centered. */
  .floating-cta__submit{ width:44px; height:44px; padding:0; border-radius:50%; }
  .floating-cta__submit > div:first-child{ display:none; }
  .floating-cta__submit svg{ width:16px; height:16px; }
}

/* ==========================================================================
   22. FLOATING-CTA__BAR AS A REAL CONTACT FORM 7 FORM ("Sticky Form")
   Same lessons as the td-hero__bar conversion: CF7 auto-wraps each
   field's content in its own <p> (based on line breaks in the Form-tab
   editor), which sits between ".floating-cta__field" and the icon/
   input, so the field's own flex rules no longer reach them directly -
   fixed the same way, by making that <p> the real flex row.

   The submit is different here on purpose: ".floating-cta__submit"
   already has its own text label + two icon variants
   (".over-arrow"/".over-mail") with presentation logic that isn't in
   this stylesheet, so instead of replacing that markup with a plain
   CF7 <input type="submit"> (which would lose it), the real submit
   input is layered on top as a fully invisible, full-size overlay -
   the existing button keeps looking and behaving exactly as it already
   does, and a click anywhere on it now genuinely submits the form.
   ========================================================================== */

.floating-cta__field p{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0;
}
.floating-cta__field .wpcf7-form-control-wrap{ flex:1; min-width:0; display:flex; }
.floating-cta__field .wpcf7-not-valid-tip{
  position:absolute;
  left:0px;
  top:100%;
  margin-top:4px;
  font-size:11px;
  color:#E4032E;
}

/* Invisible overlay - covers the button whether CF7 rendered the
   submit <input> directly inside ".floating-cta__submit" or wrapped it
   in a <p> first. */
.floating-cta__submit > input[type="submit"],
.floating-cta__submit > p{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:none;
  background:transparent;
  color:transparent;
  font-size:0;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.floating-cta__submit > p input[type="submit"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
  background:transparent;
  cursor:pointer;
}
.floating-cta__submit .wpcf7-spinner{ position:absolute; right:-24px; top:50%; transform:translateY(-50%); }

.floating-cta__bar-wrap .wpcf7-response-output{
  margin-top:10px;
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   19. TEST LISTING - TOP INTRO SECTIONS (page-test-listing.php)
   Three sections added above the existing ".tl-hero" search/filter
   header: a 2-col intro banner, a category showcase grid, and an
   "About ASTM" info block. All new, namespaced ".tl-intro" /
   ".tl-categories" / ".tl-about" so they don't touch any existing
   ".tl-*" listing/grid/card rules already used further down this page.
   ========================================================================== */

/* ---- 1. Intro banner: heading + copy + CTA + share bar, image right ---- */
.tl-intro{ background: var(--c-bg); padding: 56px 0; }
.tl-intro__inner{
  display:flex;
  align-items:center;
  gap: 56px;
}
.tl-intro__content{ flex:1; min-width:0; }
.tl-intro__content h2{
  font-size: var(--fs-h1);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.01em;
  color: var(--c-ink);
  margin-bottom:20px;
}
.tl-intro__content p{
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  line-height:1.6;
  max-width:520px;
  margin-bottom:32px;
}
.tl-intro__content .btn{ margin-bottom:24px; }

.tl-intro__bar{
  display:flex;
  align-items:center;
  gap:6px;
  max-width:480px;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding:8px;
  box-shadow: 0 20px 45px rgba(20,10,45,.08);
}
.tl-intro__field{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  min-width:0;
}
.tl-intro__field svg{ width:16px; height:16px; opacity:.5; flex-shrink:0; }
.tl-intro__field input{ border:none; outline:none; width:100%; font-size: var(--fs-small); background:transparent; }
.tl-intro__icon-btn{
  width:44px; height:44px;
  flex-shrink:0;
  border:1px solid var(--c-border);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--c-ink-soft);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.tl-intro__icon-btn:hover{ border-color: var(--c-purple-900); color: var(--c-purple-900); }
.tl-intro__icon-btn svg{ width:16px; height:16px; }
.tl-intro__submit{
  width:44px; height:44px;
  flex-shrink:0;
  border-radius:50%;
  background: var(--c-purple-900);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.tl-intro__submit svg{ width:16px; height:16px; }
.tl-intro__submit:hover{ background:#2f1b68; transform:translateY(-2px); }

.tl-intro__media{ flex:1; min-width:0; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/3; background:#111; }
.tl-intro__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- 2. Category showcase grid ---- */
.tl-categories{ background:#F7F6F9; padding: var(--gap-section) 0 24px; }
.tl-categories h2{ font-size: var(--fs-h2); font-weight:700; letter-spacing:-0.01em; margin-bottom:32px; }
.tl-categories__grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.tl-categories__card{
  flex: 1 1 calc(25% - 18px);
  min-width:220px;
  box-sizing:border-box;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding:16px;
  display:flex;
  align-items:center;
  gap:16px;
}
.tl-categories__media{ width:64px; height:64px; flex-shrink:0; border-radius: var(--radius-md); overflow:hidden; background:#111; }
.tl-categories__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.tl-categories__title{ font-weight:700; font-size: var(--fs-small); color: var(--c-ink); margin-bottom:4px; }
.tl-categories__desc{ font-size: var(--fs-xs); color: var(--c-ink-soft); }

/* ---- 3. "About ASTM" info block ---- */
.tl-about{ background:#F7F6F9; padding: 56px 0 var(--gap-section); text-align:center; }
.tl-about__head{ max-width:720px; margin:0 auto 40px; }
.tl-about__head .text-eyebrow{ margin:0 auto 16px; }
.tl-about__head h2{ font-size: var(--fs-h1); font-weight:700; letter-spacing:-0.01em; margin-bottom:16px; }
.tl-about__head p{ font-size: var(--fs-small); color: var(--c-ink-soft); line-height:1.6; }

.tl-about__stats{
  display:flex;
  text-align:left;
  margin-bottom:32px;
  overflow:hidden;
}
.tl-about__stat{ flex:1; min-width:0; padding:32px 28px; border-left:1px solid var(--c-border); }
.tl-about__stat:first-child{ border-left:none; }
.tl-about__stat-title{ font-size: var(--fs-h3); font-weight:700; line-height:1.25; margin-bottom:12px; }
.tl-about__stat-desc{ font-size: var(--fs-xs); color: var(--c-ink-soft); line-height:1.6; }

.tl-about__footer{ max-width:760px; margin:0 auto; font-size: var(--fs-small); color: var(--c-ink-soft); line-height:1.7; }

@media (max-width: 1024px){
  .tl-intro__inner{ flex-direction:column; }
  .tl-intro__media{ order:-1; width:100%; aspect-ratio:16/9; }
  .tl-categories__card{ flex-basis: calc(50% - 12px); }
  .tl-about__stats{ flex-wrap:wrap; }
  .tl-about__stat{ flex-basis:50%; }
  .tl-about__stat:nth-child(3){ border-left:none; }
}
@media (max-width: 640px){
  .tl-intro{ padding:40px 0; }
  .tl-intro__bar{ flex-wrap:wrap; }
  .tl-categories__card{ flex-basis:100%; }
  .tl-about__stat{ flex-basis:100%; border-left:none; border-top:1px solid var(--c-border); }
  .tl-about__stat:first-child{ border-top:none; }
}

/* ==========================================================================
   20. EXPERT / PARTNER REQUEST POPUPS (footer.php)
   Two Contact Form 7 popups already sitting in footer.php's markup:
     .expert-popup          - "Free Consulting" (steps + form)
     .expert-popup-partner  - "Partner with us" (message + form)
   Both share the same box shape (dark left panel / white right panel).
   CSS-only + JS-only addition - no HTML here was changed; every class
   below already exists in the given markup. Open triggers (elsewhere on
   the page, not part of this markup):
     .popup_free-consulting  -> opens .expert-popup
     .partners-with-us       -> opens .expert-popup-partner
   See expert-popups.js for the open/close behaviour.
   ========================================================================== */

body.has-expert-popup-open{ overflow:hidden; }

/* ---- Overlay: hidden by default, JS toggles ".is-open" ---- */
.expert-popup,
.expert-popup-partner{
  position:fixed;
  inset:0;
  z-index:400;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background: rgba(20,10,45,.55);
  overflow-y:auto;
}
.expert-popup.is-open,
.expert-popup-partner.is-open{ display:flex; }

/* ---- Box: white rounded card, two panels side by side ---- */
.expert-popup-box{
  position:relative;
  width:100%;
  max-width:900px;
  background:#fff;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: 0 40px 80px rgba(20,10,45,.28);
  animation: expertPopupIn .25s var(--ease);
}
@keyframes expertPopupIn{
  from{ opacity:0; transform:translateY(16px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.close-expert-btn{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  background-color:#fff;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px auto;
  box-shadow: 0 6px 16px rgba(20,10,45,.18);
  cursor:pointer;
  transition: transform .2s var(--ease);
}
.close-expert-btn:hover{ transform: scale(1.08); }

.expert-popup-box-inner{
  display:flex;
  align-items:stretch;
  min-height:420px;
}

/* ---- Left panel: dark background image + steps / message ---- */
.testing-steps-container{
  position:relative;
  flex:0 0 42%;
  padding:40px 32px;
  background-color:#181121;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/* Darkening overlay so white text stays legible over any photo */
.testing-steps-container::before{
  content:'';
  position:absolute;
  inset:0;
  background: rgba(20,10,45,.55);
}
.testing-steps-container > *{ position:relative; z-index:1; }

.steps-heading{
  color:#fff;
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:28px;
}

.steps-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:34px; }
.steps-list li{ display:flex; align-items:flex-start; gap:14px; }

.step-icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:50%;
  background-color:#fff!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:24px auto!important;
}

.step-text{ padding-top:2px; }
.step{
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.06em;
  color:#C6B7F2;
  margin-bottom:4px;
}
.step-description{
  color:rgba(255,255,255,.85);
  font-size: var(--fs-small);
  line-height:1.4;
  margin:0;
}

/* Partner popup's left panel only ever holds a message paragraph, no
   steps list - centred vertically by the flex column above. */
.form-message-partner{
  color:rgba(255,255,255,.9);
  font-size:1.05rem;
  line-height:1.6;
  margin:0;
}

/* ---- Right panel: white background, heading + form ---- */
.expert-form-container{ flex:1; min-width:0; }
.form-box{ padding:40px 36px; }

.screen-response-process{ margin-bottom:20px; }

.form-heading-process{
  position:relative;
  display:inline-block;
  padding-bottom:12px;
  color: var(--c-ink);
  font-size:1.4rem;
  font-weight:800;
}
.form-heading-process::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:56px;
  height:3px;
  border-radius:2px;
  background: var(--c-purple-900);
}

.form-message-process{
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  line-height:1.6;
  margin-top:12px;
}

/* ---- Contact Form 7 fields + submit button, upgraded to match the
   site's current theme (pill shape, purple-900 primary, hover lift)
   instead of the old blue/5px-radius look from the inline <style>
   block already sitting in footer.php. That block's selectors are
   scoped under ".cnf_form" - checked the actual rendered markup and
   that class never wraps the real form fields on the live page (it
   isn't an ancestor of the <input>s at all), so neither that inline
   block nor an earlier version of this stylesheet scoped the same way
   were ever actually matching anything. Rescoped under ".mainV3Form"
   below instead, which genuinely does wrap the fields in both forms.
   !important is kept on the submit button as a safety net in case
   ".cnf_form" ever does end up wrapping the form later. ---- */
.mainV3Form{ display:flex; flex-direction:column; gap:16px; margin-top:24px; }
.mainV3Form .formRows,
.mainV3Form .formCols{ width:100%; }
.mainV3Form .actionControl{ margin-top:4px; }
.mainV3Form.innerpopform{ gap:14px; margin-top:18px; }

.mainV3Form input.wpcf7-form-control.wpcf7-text{
  width:100%;
  box-sizing:border-box;
  height:46px;
  padding:0 20px;
  border:1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background:#fff;
  font-size: var(--fs-small);
  color: var(--c-ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.mainV3Form input.wpcf7-form-control.wpcf7-text::placeholder{ color: var(--c-ink-soft); }
.mainV3Form input.wpcf7-form-control.wpcf7-text:focus{
  outline:none;
  border-color: var(--c-purple-900);
  box-shadow: 0 0 0 3px rgba(59,36,130,.12);
}

.mainV3Form input.wpcf7-form-control.wpcf7-submit{
  height:46px !important;
  padding:0 30px !important;
  border:none !important;
  border-radius: var(--radius-pill) !important;
  background: var(--c-purple-900) !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size: var(--fs-small) !important;
  cursor:pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.mainV3Form input.wpcf7-form-control.wpcf7-submit:hover{
  background:#2f1b68 !important;
  color:#fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(60,36,130,.28);
}

@media (max-width: 768px){
	.tl-tabbar__track {justify-content: start!important;}
  .author .together-section {padding-top:0;}
  .author .story-taglists {max-width: 100%;}
  .expert-popup-box-inner{ flex-direction:column; min-height:0; }
  .testing-steps-container{ flex-basis:auto; padding:32px 24px; }
  .form-box{ padding:28px 24px; }

}