/* ============================================================
   INNER PAGES — Page Hero + Switcher Tabs
   Shared across: about-us, services, portfolio, clients,
                  events, certifications, contact
   ============================================================ */
.page-hero {
  background: var(--clr-red);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + 32px);
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute;
  right: -100px; top: 50%; transform: translateY(-50%);
  width: 420px; height: 420px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.08);
  pointer-events: none;
}
.page-hero-inner {
  position: relative; z-index: 2;
  padding-bottom: 40px;
}
.page-hero-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ff-body); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 18px;
}
.page-hero-breadcrumb a { color: rgba(255,255,255,.55); transition: color .2s; }
.page-hero-breadcrumb a:hover { color: #fff; }
.page-hero-breadcrumb .sep { font-size: 10px; opacity: .4; }
.page-hero-breadcrumb .current { color: #fff; }
.page-hero-title {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 900; color: #fff;
  line-height: .95; letter-spacing: -.02em; margin-bottom: 0;
}
.page-hero-rule {
  display: block; width: 60px; height: 3px;
  background: rgba(255,255,255,.3); margin-top: 18px; border-radius: 2px;
}
.page-hero-body {
  margin-top: 16px; max-width: 600px;
  font-family: var(--ff-body); font-size: .93rem;
  line-height: 1.7; color: rgba(255,255,255,.85);
}
.page-hero-bottom-dividers { display:flex; align-items:center; gap:0; margin-top:28px; }
.page-hero-divider-left  { width:60px; height:1px; background:rgba(255,255,255,.3); }
.page-hero-divider-right { flex:1; height:1px; background:rgba(255,255,255,.1); }

/* Page switcher tabs */
.page-switcher { background:#f9f9f9; border-bottom:1px solid var(--clr-line); }
.page-switcher-inner { display:flex; gap:0; padding:0; }
.page-tab {
  display:flex; align-items:center; gap:8px;
  padding:14px 24px; font-family:var(--ff-display); font-size:13px;
  font-weight:600; letter-spacing:.04em; color:var(--clr-muted);
  border-bottom:3px solid transparent; transition:color .2s, border-color .2s;
  text-decoration:none;
}
.page-tab:hover { color:var(--clr-dark); }
.page-tab.active { color:var(--clr-red); border-bottom-color:var(--clr-red); }

/* Why features grid (about + certifications pages) */
.why-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 56px;
}
.why-feature { display:flex; align-items:flex-start; gap:20px; }
.why-icon { width:48px; height:48px; background:var(--clr-red-bg); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.why-title { font-family:var(--ff-display); font-weight:700; font-size:18px; margin-bottom:8px; color:var(--clr-dark); }
.why-desc  { font-size:14px; color:var(--clr-muted); line-height:1.7; }

@media(max-width:600px){
  .page-hero { min-height:200px; }
  .page-hero-title { font-size: 2rem; }
  .why-features { grid-template-columns: 1fr; gap:24px; }
}