/* ============================================================
   DevCo · Section 08 — Credibility
   Light ground. The calmest section on the page — hairline
   structure, generous space, no cards, no icons.
   ============================================================ */
.credibility{}

/* — Heading row: aside index / main headline — */
.credibility__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  gap:clamp(40px,5vw,80px);
  align-items:start;
  margin-bottom:clamp(64px,9vh,128px);
}
.credibility__head-aside{padding-top:6px;}
.credibility__headline{
  margin:0;
  max-width:24ch;
}
.credibility__headline em{
  display:block;
  font-style:italic;
}

/* — Principle list — hairline-separated rows — */
.credibility__list{
  border-top:var(--hair) solid var(--ink-hair);
}
.credibility__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,44px);
  padding:clamp(38px,5vh,60px) 0;
  border-bottom:var(--hair) solid var(--ink-hair);
}

/* small mono number — sits with the heading baseline */
.credibility__idx{
  color:var(--accent);
  padding-top:.55em;
  letter-spacing:.16em;
}

/* the principle itself */
.credibility__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
  gap:clamp(20px,3vw,56px);
  align-items:baseline;
}
.credibility__title{
  margin:0;
  letter-spacing:-.012em;
}
.credibility__text{
  margin:0;
  max-width:48ch;
  font-size:var(--fs-body-sm);
  line-height:1.74;
}

/* — Responsive — */
@media (max-width:960px){
  .credibility__head{
    grid-template-columns:1fr;
    gap:clamp(24px,4vh,40px);
  }
  .credibility__head-aside{padding-top:0;}
  .credibility__headline{max-width:28ch;}
  .credibility__body{
    grid-template-columns:1fr;
    gap:14px;
  }
}
@media (max-width:640px){
  .credibility__item{
    grid-template-columns:1fr;
    gap:14px;
  }
  .credibility__idx{padding-top:0;}
}

/* ============================================================
   ELEMENTOR COMPATIBILITY — Section 08 (credibility)
   ------------------------------------------------------------
   The section is rebuilt as native Elementor content
   (decision 0003). Elementor wraps every widget in an
   .elementor-element div and adds e-con/e-flex classes to
   containers. The design-system classes (dc-*, credibility__*)
   sit on those wrappers via the CSS Classes control. This block
   bridges the two so the rules above style the Elementor
   structure unchanged. Section 08 has NO markup decoration —
   only the grid layouts need to win over Elementor's e-flex.
   Scoped to .devco-site so it never touches WP admin.
   ============================================================ */

/* — Heading row: aside index / main headline — grid must win — */
.devco-site #credibility .credibility__head.e-con{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  gap:clamp(40px,5vw,80px);
  align-items:start;
  margin-bottom:clamp(64px,9vh,128px);
}
.devco-site #credibility .credibility__head-aside.e-con{padding-top:6px;}

/* eyebrow row keeps its inline-flex layout under Elementor */
.devco-site #credibility .dc-eyebrow.e-con{
  display:flex;flex-direction:row;align-items:center;gap:14px;
}
.devco-site #credibility .dc-eyebrow__rule{flex:none;}
.devco-site #credibility .dc-eyebrow__idx>span,
.devco-site #credibility .dc-eyebrow__label>span,
.devco-site #credibility .dc-eyebrow__rule>span{display:inline;}

/* headline — heading widget's inner <h2> inherits display type */
.devco-site #credibility .credibility__headline .elementor-heading-title{
  font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;margin:0;
}
.devco-site #credibility .credibility__headline em{
  display:block;font-style:italic;
}

/* — Principle list — hairline-separated rows — */
.devco-site #credibility .credibility__list.e-con{
  display:flex;flex-direction:column;
  border-top:var(--hair) solid var(--ink-hair);
}
.devco-site #credibility .credibility__item.e-con{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,44px);
  padding:clamp(38px,5vh,60px) 0;
  border-bottom:var(--hair) solid var(--ink-hair);
}

/* small mono number — collapse the text-editor's inner <span> */
.devco-site #credibility .credibility__idx{
  color:var(--accent);padding-top:.55em;letter-spacing:.16em;
}
.devco-site #credibility .credibility__idx span{display:inline;}

/* the principle itself — two-column body grid must win */
.devco-site #credibility .credibility__body.e-con{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
  gap:clamp(20px,3vw,56px);
  align-items:baseline;
}
.devco-site #credibility .credibility__title .elementor-heading-title{
  font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;margin:0;
}
.devco-site #credibility .credibility__text p{
  margin:0;
  font-size:var(--fs-body-sm);
  line-height:1.74;
  color:inherit;
}

/* — Responsive — mirror credibility.css breakpoints — */
@media (max-width:960px){
  .devco-site #credibility .credibility__head.e-con{
    grid-template-columns:1fr;
    gap:clamp(24px,4vh,40px);
  }
  .devco-site #credibility .credibility__head-aside.e-con{padding-top:0;}
  .devco-site #credibility .credibility__body.e-con{
    grid-template-columns:1fr;
    gap:14px;
  }
}
@media (max-width:640px){
  .devco-site #credibility .credibility__item.e-con{
    grid-template-columns:1fr;
    gap:14px;
  }
  .devco-site #credibility .credibility__idx{padding-top:0;}
}