/*
 * Top banner of the inner pages (About, Contact, Certificates, Products, Category).
 * The left half is a dark panel with the text; the right half is the picture, used as the background of the banner.
 * The picture is shown whole, nothing is laid over it. Its left edge is cut diagonally with a red line along it.
 */
.ph { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 500px; padding: 9rem 0 2.6rem; color: #fff; background: linear-gradient(115deg, #0b0b0d 0%, #16181d 60%, #1d1214 100%); }
.ph-shape { position: absolute; z-index: -1; pointer-events: none; }
.ph-shape-bar { left: 0; top: 0; width: 7px; height: 100%; background: var(--brand-red); }
.ph-dots { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 55%); mask-image: linear-gradient(90deg, #000, transparent 55%); }
.ph-wrap { position: relative; z-index: 2; width: 100%; max-width: 1240px; }

/* Right half: the picture as background */
.ph-bgwrap { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 52%; filter: drop-shadow(-6px 0 0 var(--brand-red)); }
.ph-bg { position: absolute; inset: 0; background-color: #22252b; background-position: right center; background-repeat: no-repeat; background-size: cover; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%); }

.ph-kicker { display: inline-block; margin-bottom: .8rem; padding: .35rem .9rem; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--brand-red); }
.ph-title { margin: 0 0 .8rem; color: #fff; font-family: var(--font-body); font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; overflow-wrap: anywhere; }
.ph-sub { max-width: 480px; margin: 0 0 1.2rem; color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.65; }
.ph-crumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.4); --bs-breadcrumb-item-active-color: rgba(255,255,255,.65); font-size: .88rem; }
.ph .ph-crumb a { color: #fff; text-decoration: none; }
.ph .ph-crumb a:hover { color: #ff6a70; }

/* Tablet and phone: the text first, the picture as a background strip below it */
@media (max-width: 991.98px) {
  .ph { display: block; min-height: 0; padding: 6.6rem 0 0; }
  .ph-copy { padding-bottom: 1.8rem; }
  .ph-sub { max-width: none; }
  .ph-bgwrap { position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: 280px; filter: none; }
  .ph-bg { clip-path: none; background-position: right center; }
  .ph-dots { -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
}
@media (max-width: 575.98px) {
  .ph { padding-top: 6.2rem; }
  .ph-bgwrap { height: 220px; }
}

/* Simple banner (colours and shapes, no picture): used by the blog and by pages without a picture */
/* List page: hero extras */
.bl-kicker { cursor: default; }
.bl-kicker:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.bl-hero-sub { max-width: 560px; margin: 0 0 1.6rem; color: rgba(255,255,255,.8); font-size: 1.05rem; line-height: 1.6; }
/* Single article: hero made only of colour and shapes */
.bd-hero { position: relative; isolation: isolate; overflow: hidden; padding: 9.5rem 0 2.4rem; color: #fff; background: linear-gradient(120deg, #0b0b0c 0%, #17181c 55%, #25080b 100%); }
.bd-hero-shape { position: absolute; z-index: -1; pointer-events: none; }
.bd-hero-band { top: 0; right: 0; width: 46%; height: 100%; background: linear-gradient(160deg, #ed1c24, #8e0f15); clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); opacity: .92; }
.bd-hero-line { top: 0; right: 38%; width: 5px; height: 100%; background: rgba(255,255,255,.14); transform: skewX(-20deg); transform-origin: top; }
.bd-hero-ring { right: 7%; bottom: -120px; width: 320px; height: 320px; border: 34px solid rgba(255,255,255,.07); transform: rotate(45deg); }
.bd-hero-grid { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); mask-image: linear-gradient(90deg, #000, transparent 60%); }
.bd-hero-inner { position: relative; }
.bd-hero-cat { display: inline-block; margin-bottom: 1rem; padding: .35rem .9rem; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); }
.bd-hero-cat:hover { color: #fff; background: var(--brand-red); border-color: var(--brand-red); }
.bd-hero h1 { max-width: 760px; margin: 0 0 1.2rem; color: #fff; font-size: clamp(1.8rem, 3.8vw, 3rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; overflow-wrap: anywhere; }
.bd-hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0 0 1.6rem; padding: 0; list-style: none; color: rgba(255,255,255,.78); font-size: .92rem; }
.bd-hero-meta i { margin-right: .35rem; color: #ff6a70; }
.bd-crumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.4); --bs-breadcrumb-item-active-color: rgba(255,255,255,.65); font-size: .85rem; }
.bd-crumb a { color: #fff; text-decoration: none; }
.bd-crumb a:hover { color: #ff6a70; }
@media (max-width: 991.98px) {
  .bd-hero { padding-top: 7.5rem; }
  .bd-hero-band { width: 60%; opacity: .5; }
}
@media (max-width: 575.98px) { .bd-hero-ring { display: none; } }