
/* =========================================================
   ISO STANDARD DETAIL PAGE (e.g. "What is ISO 9001?")
   — page-specific styles only. Re-uses existing root vars
   (--branding-pink, --branding-orange, --brand-grey,
   --brand-light-grey) and existing global helper classes
   (.gradient-text, .gradient-bg, .btn-pink-filled,
   .standard-card, .cert-cta/.cert-card/.step-card/.step-badge,
   .faq-section/.faq-accordion) already defined
   in the site's global stylesheet. Nothing global is
   redeclared here.
   ========================================================= */

.standard-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  color: var(--branding-pink);
}
.standard-breadcrumb .breadcrumb-item a{ color:#555; text-decoration:none; }
.standard-breadcrumb .breadcrumb-item a:hover{ color:var(--branding-pink); }
.standard-breadcrumb .breadcrumb-item.active{ color:var(--branding-pink); }

.standard-hero-banner{
  background: linear-gradient(135deg,var(--branding-pink) 0%,var(--branding-orange) 100%);
  padding: 55px 0;
  border-radius: 0 0 40px 40px;
  color:#fff;
}
.standard-hero-banner h1{ color:#fff; margin-bottom:10px; }
.standard-hero-banner p{ font-size:18px; opacity:.95; margin:0; }

.quicklinks-bar{
  background-color: var(--branding-pink);
  padding: 18px 0;
}
.quicklinks-bar a{
  color:#fff;
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  display:block;
}
.quicklinks-bar a:hover{ text-decoration:underline; }

.bg-pink-soft{ background-color: rgba(230,0,126,.05); }

.glance-box{
  border:1px solid #eee;
  border-radius:16px;
  padding:30px;
  background:#fff;
}
.glance-box ul{ margin-bottom:0; }
.glance-box li{ margin-bottom:10px; }

.note-card{
  border-left:4px solid var(--branding-pink);
  background: var(--brand-light-grey);
  border-radius:12px;
  padding:25px 30px;
}

.clause-table-wrap{
  border-radius:30px;
  padding:3px;
  background: linear-gradient(90deg,var(--branding-pink) 0%,var(--branding-orange) 100%);
}
.clause-table-inner{
  background:#fff;
  border-radius:28px;
  overflow:hidden;
}
.clause-table{
  width:100%;
  border-collapse:collapse;
  margin:0;
}
.clause-table thead th{
  background: linear-gradient(90deg,var(--branding-pink) 0%,var(--branding-orange) 100%);
  color:#000;
  font-weight:800;
  border:none;
  padding:18px 22px;
  text-align:left;
  white-space:nowrap;
}
.clause-table td{
  padding:18px 22px;
  border:none;
  border-bottom:1px solid #eee;
  vertical-align:middle;
  font-size:.92rem;
  color:#333;
}
.clause-table tbody tr:last-child td{ border-bottom:none; }
.clause-table td:first-child{ font-weight:800; color:#000; }
.clause-table td:nth-child(2){ font-weight:700; color:var(--branding-pink); }
@media (max-width:991px){
  .clause-table-wrap{ overflow-x:auto; }
  .clause-table{ min-width:900px; }
}

/* Gradient-bordered cards used for the 7 principles + benefits */
.gradient-card-wrap{
  height:100%;
  padding:2px;
  border-radius:26px;
  background: linear-gradient(135deg,var(--branding-pink) 0%,var(--branding-orange) 100%);
}
.gradient-card{
  height:100%;
  background:#fff;
  border-radius:24px;
  padding:32px 28px;
}
.gradient-card h3{ font-size:1.2rem; margin-bottom:12px; }
.gradient-card p{ font-size:.92rem; color:#333; margin:0; }

.timeline-list{ list-style:none; padding-left:0; margin:0; }
.timeline-list li{
  padding-left:22px;
  position:relative;
  margin-bottom:12px;
}
.timeline-list li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:10px; height:10px;
  border-radius:50%;
  background: var(--branding-orange);
}

.process-badge-lg{
  width:56px;height:56px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:16px 16px 16px 0;
  background:#63b8e0;color:#fff;font-weight:700;font-size:22px;
  font-family:"NEOrange",Arial,sans-serif;
}

@media (max-width:767px){
  .standard-hero-banner{ padding:35px 0; border-radius:0 0 24px 24px; }
  .standard-hero-banner h1{ font-size:28px; }
}
