/* ── Site-level tokens (mirrors woollemia.css) ── */
.wm-cert {
  --primary:     #2454ff;
  --primary-mid: #1d4ed8;
  --dark-bg:     #0b132b;
  --dark-mid:    #12244f;
  --cyan:        #00c8ff;
  --text-muted:  #5b6478;
  --border:      #e2e8f0;
  --font-body:   'Inter', sans-serif;
  --font-mono:   'IBM Plex Mono', monospace;
}


/* ════════════════════════════════════════════════
   SECTION SHELL
════════════════════════════════════════════════ */
.wm-cert {
  position: relative;
  background: #fff;
  padding: clamp(60px, 7vw, 100px) 0 clamp(48px, 5vw, 80px);
  overflow: hidden;
}

/* Dot-grid texture (matches site's .wm-svc5::before) */
.wm-cert::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 80%);
}

/* Top blue accent line (like .newcert-section::before) */
.wm-cert::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dark-bg) 0%, var(--primary) 50%, var(--cyan) 100%);
}

.wm-cert__wrap {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 48px);
}


/* ════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════ */
.wm-cert__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}

/* Eyebrow — matches .wm-svc5__eyebrow style */
.wm-cert__eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
}
.wm-cert__eyebrow::before {
  content: '';
  width: 32px;
  height: 1.5px;
  background: currentColor;
  flex-shrink: 0;
}

.wm-cert__title {
  font-family: var(--font-body);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--dark-bg);
  margin: 0;
}
.wm-cert__title em {
  font-style: normal;
  color: var(--primary);
}

/* Stats row under headline */
.wm-cert__stats {
  display: flex;
  gap: 28px;
  margin-top: 20px;
}
.wm-cert__stat {
  border-left: 2.5px solid var(--primary);
  padding-left: 12px;
}
.wm-cert__stat-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--dark-bg);
  line-height: 1;
  letter-spacing: -0.02em;
}
.wm-cert__stat-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Right column */
.wm-cert__intro {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.wm-cert__pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wm-cert__pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8faff;
  border: 1px solid #dbe4ff;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: #1e293b;
  transition: border-color 0.2s, background 0.2s;
}
.wm-cert__pill:hover {
  border-color: var(--primary);
  background: #eef3ff;
}
.wm-cert__pill i {
  font-size: 16px;
  color: var(--primary);
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════
   DIVIDER LABEL
════════════════════════════════════════════════ */
.wm-cert__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.wm-cert__divider-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.wm-cert__divider-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}


/* ════════════════════════════════════════════════
   FRAMEWORK GRID  (3 cols, icon + badge + text)
════════════════════════════════════════════════ */
.wm-cert__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.wm-cert__card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px 14px;
  position: relative;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
  cursor: default;
}
.wm-cert__card:hover {
  border-color: rgba(36,84,255,0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -12px rgba(36,84,255,0.14);
}

/* Featured card — ISO 27001 */
.wm-cert__card--featured {
  background: linear-gradient(140deg, var(--dark-bg) 0%, var(--dark-mid) 100%);
  border-color: transparent;
}
.wm-cert__card--featured:hover {
  border-color: rgba(0,200,255,0.35);
  box-shadow: 0 12px 32px -12px rgba(0,200,255,0.25);
}

/* Card number */
.wm-cert__num {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.04em;
}
.wm-cert__card--featured .wm-cert__num {
  color: #334155;
}

/* Icon circle */
.wm-cert__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.wm-cert__icon i { font-size: 17px; }

/* Badge */
.wm-cert__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* Card text */
.wm-cert__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dark-bg);
  margin: 0 0 4px;
  line-height: 1.3;
  padding-right: 24px;
}
.wm-cert__card--featured .wm-cert__name { color: #f8fafc; }

.wm-cert__desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.wm-cert__card--featured .wm-cert__desc { color: #64748b; }

/* ── Per-card colour themes ── */
/* Featured */
.ic-featured .wm-cert__icon { background: rgba(0,200,255,0.12); }
.ic-featured .wm-cert__icon i { color: var(--cyan); }
.ic-featured .wm-cert__badge { background: rgba(0,200,255,0.12); color: var(--cyan); }

/* Audit */
.ic-audit .wm-cert__icon { background: #fefce8; }
.ic-audit .wm-cert__icon i { color: #b45309; }
.ic-audit .wm-cert__badge { background: #fef9c3; color: #854d0e; }

/* QSA */
.ic-qsa .wm-cert__icon { background: #f0fdf4; }
.ic-qsa .wm-cert__icon i { color: #16a34a; }
.ic-qsa .wm-cert__badge { background: #dcfce7; color: #166534; }

/* Security */
.ic-sec .wm-cert__icon { background: #fff1f2; }
.ic-sec .wm-cert__icon i { color: #dc2626; }
.ic-sec .wm-cert__badge { background: #fee2e2; color: #b91c1c; }

/* Privacy */
.ic-priv .wm-cert__icon { background: #f5f3ff; }
.ic-priv .wm-cert__icon i { color: #7c3aed; }
.ic-priv .wm-cert__badge { background: #ede9fe; color: #6d28d9; }

/* Framework */
.ic-fw .wm-cert__icon { background: #f0f9ff; }
.ic-fw .wm-cert__icon i { color: #0284c7; }
.ic-fw .wm-cert__badge { background: #e0f2fe; color: #0369a1; }

/* Methodology */
.ic-meth .wm-cert__icon { background: #fff7ed; }
.ic-meth .wm-cert__icon i { color: #ea580c; }
.ic-meth .wm-cert__badge { background: #ffedd5; color: #c2410c; }

/* Detection */
.ic-det .wm-cert__icon { background: #fdf2f8; }
.ic-det .wm-cert__icon i { color: #db2777; }
.ic-det .wm-cert__badge { background: #fce7f3; color: #9d174d; }

/* Aligned */
.ic-aln .wm-cert__icon { background: #f8fafc; }
.ic-aln .wm-cert__icon i { color: #64748b; }
.ic-aln .wm-cert__badge { background: #f1f5f9; color: #475569; }


/* ════════════════════════════════════════════════
   CREDENTIALS BAR  (mirrors .newcert-additional-bar)
════════════════════════════════════════════════ */
.wm-cert__cred {
  background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-mid) 100%);
  border-radius: 14px;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.5vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
/* Cyan glow accent (like .wm-svc5__panel::after) */
.wm-cert__cred::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(400px 200px at 95% 50%, rgba(0,200,255,0.14), transparent 70%);
}

.wm-cert__cred-left { position: relative; z-index: 1; }

.wm-cert__cred-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 8px;
}

.wm-cert__cred-text {
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  max-width: 520px;
}
.wm-cert__cred-text strong {
  color: #e2e8f0;
  font-weight: 600;
}

.wm-cert__cred-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.wm-cert__chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,200,255,0.25);
  border-radius: 7px;
  padding: 6px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cyan);
  transition: background 0.2s;
}
.wm-cert__chip:hover {
  background: rgba(0,200,255,0.1);
}


/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .wm-cert__head { grid-template-columns: 1fr; }
  .wm-cert__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wm-cert__grid { grid-template-columns: 1fr; }
  .wm-cert__cred { flex-direction: column; align-items: flex-start; }
}

/* ── Hard overrides: this site applies global !important rules to
   raw h1/h2/h3/p/i tags that otherwise
   flatten every heading/paragraph/icon in this section to near-black.
   Re-assert this section's intended colors and icon fonts here. ── */
.wm-cert__eyebrow { color: var(--primary) !important; }
.wm-cert__title, .wm-cert__title em { color: var(--dark-bg) !important; }
.wm-cert__title em { color: var(--primary) !important; }
.wm-cert__stat-num { color: var(--dark-bg) !important; }
.wm-cert__stat-lbl { color: var(--text-muted) !important; }
.wm-cert__intro { color: var(--text-muted) !important; }
.wm-cert__pill { color: #1e293b !important; }
.wm-cert__divider-lbl { color: var(--text-muted) !important; }
.wm-cert__name { color: var(--dark-bg) !important; }
.wm-cert__card--featured .wm-cert__name { color: #f8fafc !important; }
.wm-cert__desc { color: var(--text-muted) !important; }
.wm-cert__card--featured .wm-cert__desc { color: #64748b !important; }
.wm-cert__cred-label { color: var(--cyan) !important; }
.wm-cert__cred-text { color: rgba(255,255,255,0.6) !important; }
.wm-cert__cred-text strong { color: #e2e8f0 !important; }
.wm-cert__chip { color: var(--cyan) !important; }

/* Icons are inline SVG (not an icon font) so they render with zero
   dependency on any external font loading/naming. */
.wm-cert__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.wm-cert__pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ic-featured .wm-cert__icon svg { color: var(--cyan) !important; }
.ic-audit .wm-cert__icon svg { color: #b45309 !important; }
.ic-qsa .wm-cert__icon svg { color: #16a34a !important; }
.ic-sec .wm-cert__icon svg { color: #dc2626 !important; }
.ic-priv .wm-cert__icon svg { color: #7c3aed !important; }
.ic-fw .wm-cert__icon svg { color: #0284c7 !important; }
.ic-meth .wm-cert__icon svg { color: #ea580c !important; }
.ic-det .wm-cert__icon svg { color: #db2777 !important; }
.ic-aln .wm-cert__icon svg { color: #64748b !important; }
.wm-cert__pill svg { color: var(--primary) !important; }