/**
 * Shared section heading: a short accent rule + eyebrow, then a two-tone title.
 *
 * The same treatment appears above the process timeline, the Installation Scope
 * cards and the case study slider, so it lives here once rather than being
 * redefined per component. Anything that needs it emits:
 *
 *   <div class="section-head section-head--green">
 *     <p class="section-head__eyebrow">How We Work</p>
 *     <h2 class="section-head__title">Our Installation &
 *       <span class="section-head__hl">Commissioning Process</span></h2>
 *   </div>
 *
 * The eyebrow rule is a pseudo-element, so editors writing this markup by hand
 * in a rich-text intro do not have to include an empty <span> for it.
 */

.section-head {
    --sh-accent: var(--phi-green);
    text-align: center;
    margin: 0 0 3rem;
}

.section-head--orange {
    --sh-accent: var(--phi-orange);
}

.section-head__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    color: var(--sh-accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* The brand flame rather than the short dash that used to sit here. The dash
   is the default marketing-template ornament and carries no meaning; the flame
   is specific to PHI. Drawn as a MASK filled by background-color so it follows
   --sh-accent, exactly like the .orange-subheading-flame utility. */
.section-head__eyebrow::before {
    content: "";
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    background-color: var(--sh-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.674 24'%3E%3Cpath d='M9.338,24A9.378,9.378,0,0,1,0,14.662,9.237,9.237,0,0,1,1.036,10.4,9.419,9.419,0,0,1,3.9,7.08c.085-.058.146-.1.2-.142l.077-.056A9.408,9.408,0,0,0,7.957,1.033L8.161,0l.868.6a9.407,9.407,0,0,1,4.053,7.69,9.284,9.284,0,0,1-.6,3.276.059.059,0,0,0,.018.067.057.057,0,0,0,.068,0,9.558,9.558,0,0,0,2.877-2.828l.515-.786.6.725a9.2,9.2,0,0,1,2.12,5.918A9.348,9.348,0,0,1,9.338,24M4.514,7.495l.411.557c-.07.051-.149.109-.234.166a8.011,8.011,0,0,0-2.424,2.817,7.857,7.857,0,0,0-.883,3.629,7.953,7.953,0,1,0,15.907,0,7.825,7.825,0,0,0-1.265-4.3A10.987,10.987,0,0,1,13.3,12.8a1.443,1.443,0,0,1-2.12-1.727A7.9,7.9,0,0,0,11.7,8.287,8.038,8.038,0,0,0,9.047,2.37,10.789,10.789,0,0,1,4.987,8.006Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.674 24'%3E%3Cpath d='M9.338,24A9.378,9.378,0,0,1,0,14.662,9.237,9.237,0,0,1,1.036,10.4,9.419,9.419,0,0,1,3.9,7.08c.085-.058.146-.1.2-.142l.077-.056A9.408,9.408,0,0,0,7.957,1.033L8.161,0l.868.6a9.407,9.407,0,0,1,4.053,7.69,9.284,9.284,0,0,1-.6,3.276.059.059,0,0,0,.018.067.057.057,0,0,0,.068,0,9.558,9.558,0,0,0,2.877-2.828l.515-.786.6.725a9.2,9.2,0,0,1,2.12,5.918A9.348,9.348,0,0,1,9.338,24M4.514,7.495l.411.557c-.07.051-.149.109-.234.166a8.011,8.011,0,0,0-2.424,2.817,7.857,7.857,0,0,0-.883,3.629,7.953,7.953,0,1,0,15.907,0,7.825,7.825,0,0,0-1.265-4.3A10.987,10.987,0,0,1,13.3,12.8a1.443,1.443,0,0,1-2.12-1.727A7.9,7.9,0,0,0,11.7,8.287,8.038,8.038,0,0,0,9.047,2.37,10.789,10.789,0,0,1,4.987,8.006Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Size and weight deliberately NOT set here: this is an <h2> and must match
   the h2 treatment used by section headings on every other page. Setting them
   here made these headings lighter and smaller than their neighbours. */
.section-head__title {
    margin: 0;
    color: var(--phi-dark);
}

.section-head__hl {
    color: var(--sh-accent);
}

/* For section heads sitting on a dark band. Only the title needs inverting —
   the eyebrow and highlight already use the accent colour, which reads on both
   light and dark. */
.section-head--invert .section-head__title {
    color: #fff;
}

/* Left-aligned variant for sections where the copy sits in a column. */
.section-head--left {
    text-align: left;
}

.section-head--left .section-head__eyebrow {
    justify-content: flex-start;
}

@media (max-width: 992px) {
    .section-head { margin-bottom: 2.5rem; }
}

@media (max-width: 650px) {
    .section-head { margin-bottom: 2rem; }
}