/* ============================================================
   QUANTUM DOT — Inner page text block styling
   Paste into your Custom CSS. Wrap page content in:
    ... 
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

.text-inner-pages{
  font-family: 'Cormorant Garamond', serif;
  color: #17151a;
  width: 100%;
  margin: 0 auto;
  padding: 20px 40px 60px;
}

/* main headline (h4) */
.text-inner-pages h4{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1.2;
  color: #17151a;
  margin: 0 0 8px;
}

/* intro / lead paragraph directly under the headline */
.text-inner-pages h4 + p,
.text-inner-pages h4 + br + p{
  font-size: 23px;
  font-weight: 500;
  color: #4a4650;
  line-height: 1.7;
  margin: 0 0 46px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(23,21,26,.08);
}

/* section labels (h3): small, uppercase, pink accent — matches the "Trade Sectors" eyebrow style */
.text-inner-pages h3{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #d81760;
  margin: 46px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.text-inner-pages h3::before{
  content: "";
  width: 26px;
  height: 1px;
  background: #d81760;
  flex-shrink: 0;
}

/* body paragraphs */
.text-inner-pages p{
  font-size: 22px;
  font-weight: 500;
  line-height: 1.75;
  color: #3a3640;
  margin: 0 0 20px;
}

.text-inner-pages p strong{
  font-weight: 700;
  color: #17151a;
}

/* Optional: add class="flow-line" to a  that stands alone as a
   process line (e.g. "Product & Specification → Quantity → ..."), to get
   the pill/badge treatment. Inline bold text elsewhere stays plain bold. */
.text-inner-pages strong.flow-line{
  display: inline-block;
  font-size: 19px;
  letter-spacing: .3px;
  color: #17151a;
  background: #faf9f7;
  border: 1px solid rgba(23,21,26,.1);
  border-radius: 30px;
  padding: 14px 26px;
  line-height: 1.9;
  margin-top: 6px;
}

@media (max-width: 620px){
  .text-inner-pages{ padding: 10px 20px 40px; }
  .text-inner-pages h4{ margin-bottom: 6px; }
  .text-inner-pages h4 + p{ font-size: 19px; margin-bottom: 34px; padding-bottom: 22px; }
  .text-inner-pages h3{ margin: 34px 0 12px; }
  .text-inner-pages p{ font-size: 18px; }
}