/* ==========================================================================
   SPRAY FOAM INSULATION PAGE
   ========================================================================== */

/* ---------- Page Header (Mini-Hero) ---------- */
/* Background photo: spray-foam-worker-wide.webp, 2688x1536, generated with Adobe Firefly
   (Image 3, upscaled) on 2026-08-13 and licensed for commercial use under Adobe's generative
   AI terms. It REPLACED a photo Caroline at Profoam supplied 2026-07-27 whose source file was
   named AdobeStock_180177447, i.e. an Adobe Stock asset that Profoam sending did not license
   to Patriot. That licensing question is closed; nothing here is gated on it any more.
   Known and accepted: the gun and gloved hands do not survive close inspection. They sit
   behind the overlay and the subline text at every breakpoint, which is why this shipped.
   Patriot's own job photography should still replace it when it exists. */
.sf-hero {
    position: relative;
    padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
    text-align: center;
    overflow: hidden;
    background-color: var(--color-dark);
}

.sf-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* The overlay is lighter here than the site's other dark bands on purpose: this photo
       carries a person, and at the old 0.88/0.93 the worker and the spray both vanished into
       the murk. 0.80/0.86 is the point where he still reads and every hero text layer still
       clears WCAG AA. Darkening it back is safe; lightening it further is not, without
       re-measuring.

       RE-MEASURED 2026-08-13 against the current hero photo, because the previous numbers were
       derived from the retired one and a photo swap voids them. Method: composite both
       gradient layers analytically over the actual crop each viewport produces, then take the
       worst single pixel under each glyph run, using the ALPHA-COMPOSITED glyph colour rather
       than the nominal one (rgba white over a dark backdrop is not white). The radial layer is
       sized per the CSS default (farthest-corner ellipse: Rh = dx*sqrt(2), Rv = dy*sqrt(2) from
       the 50%/40% centre). A first pass used the farthest-SIDE radii, which understates how far
       the red tint reaches; correcting it moved every figure by 0.02-0.03, so the conclusion
       held, but the numbers below are the corrected ones.

           element            desktop 1409x654   narrow asset, by box width
           eyebrow #FF8A8A          5.21          4.75 @375/400 · 5.06 @500 · 5.24 @753
           division rgba(w,.6)      5.06          ~5.1
           division tagline         5.90          (same run as division)
           subline rgba(w,.7)       6.51          ~6.5
           heading #fff            11.14          (large text, 3.0 floor)

       The eyebrow is the binding constraint at 4.75 on a 375-400px phone. That is above the 4.5
       AA floor but only by 0.25, so treat it as the tripwire: re-measure it first after any
       change to this overlay, the hero photo, or either crop. Note the worst case is at the
       NARROW end, not the wide end, because the phone crop puts the bright suit under the text.

       Note the worst case is NOT under the brightest part of the suit, which an earlier pass
       assumed. The gradient is darkest at the top of the hero and lightest at the bottom, so
       the true worst pixel sits lower down the frame where the overlay is thinnest. */
    background:
        radial-gradient(ellipse at 50% 40%, rgba(178, 34, 34, 0.16) 0%, transparent 70%),
        linear-gradient(180deg, rgba(18, 18, 42, 0.80) 0%, rgba(12, 12, 28, 0.86) 100%),
        url('../assets/images/spray-foam-worker-wide.webp') center 35%/cover no-repeat;
}

.sf-hero__inner {
    position: relative;
    z-index: 1;
}

/* Division branding kicker: carries the "Patriot Services Logical Insulation" name +
   tagline through from the homepage division-spotlight teaser so a visitor who clicks
   through actually lands on the same brand they just saw. */
.sf-hero__division {
    display: block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-sm);
}

.sf-hero__division-tagline {
    display: inline-block;
    margin-left: 0.5em;
    font-style: italic;
    /* 0.4 alpha computed to ~3.8:1 on the dark hero, below the AA floor.
       0.6 matches .sf-hero__division above and clears it. */
    color: rgba(255, 255, 255, 0.6);
}

.sf-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    /* Lighter tint of --color-accent (#CC0000) for AA contrast on this dark background
       (raw accent computes ~2.9:1 against --color-dark, below the 4.5:1 floor). The sitewide
       dark-section red #FF6B6B is NOT enough once the hero carries a photo with a person in
       it: over the worker's lit suit it measures 4.05:1, under the floor.

       #FF8A8A is measured, not guessed. Worst case is 4.84:1 at a 1300px viewport.
       Derivation: composite both overlay gradients analytically over the source image pixels
       for the exact crop each viewport produces, then take the worst pixel under the text
       box. Checked at 320/375/413/700/900/1100/1300/1500/1920.

       An earlier pass checked only 1500px and 413px and reported 4.72:1 for #FF8383. Both the
       method and the sample were too thin: the real worst case for that colour was 4.62:1, in
       the 900-1300px band neither width covered, leaving only 0.12 over the floor. #FF8A8A
       roughly doubles that margin and is visually indistinguishable.

       If the hero photo is ever swapped, this number is void. Re-measure. */
    color: #FF8A8A;
    margin-bottom: var(--space-md);
}

.sf-hero__heading {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    margin-bottom: var(--space-md);
}

.sf-hero__subline {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 300;
    color: var(--color-text-light);
    max-width: 680px;
    margin: 0 auto var(--space-xl);
    line-height: 1.7;
}

.sf-hero__actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* The header stays solid white on this page, same as every other page. There is
   deliberately no per-page header treatment here: a one-page exception to the nav is not
   something this site wants.

   What used to live here was a block trying to make the header transparent over the hero,
   plus matching light nav-link and burger colours. None of it ever took effect. Every rule
   was prefixed `.page-template-templates-spray-foam-php`, but the class WordPress actually
   puts on the body is `page-template-templatesspray-foam-php` (no hyphen after "templates",
   because the slash in the template path is stripped, not converted). So the selectors never
   matched anything and removing them changes nothing on screen. Verified before deleting.

   Worth knowing if you touch the other templates: home.php carries the same misspelled
   prefix, so its per-page header rules are dead too. Its hero only looks right because it
   pulls itself up with a negative margin, which does not depend on the broken class. */

/* ---------- Intro ---------- */
.sf-intro {
    padding: var(--space-2xl) 0;
    background-color: var(--color-bg);
}

.sf-intro__inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.sf-intro__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.sf-intro__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.sf-intro__body {
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 1.5vw, 1.08rem);
    line-height: 1.8;
    color: var(--color-text-muted);
}

/* ---------- Benefits Grid ---------- */
.sf-benefits {
    padding: var(--space-2xl) 0;
    background-color: var(--color-bg-alt);
}

.sf-benefits__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.sf-benefits__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.sf-benefits__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

.sf-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.sf-benefit {
    padding: var(--space-lg);
    border-radius: 6px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    background-color: var(--color-bg);
}

.sf-benefit__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-md);
    color: var(--color-accent);
}

.sf-benefit__icon svg {
    width: 28px;
    height: 28px;
}

.sf-benefit h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.sf-benefit p {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

.sf-benefits__grid .reveal:nth-child(1) { transition-delay: 0s; }
.sf-benefits__grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.sf-benefits__grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.sf-benefits__grid .reveal:nth-child(4) { transition-delay: 0.24s; }
.sf-benefits__grid .reveal:nth-child(5) { transition-delay: 0.32s; }
.sf-benefits__grid .reveal:nth-child(6) { transition-delay: 0.4s; }

/* ---------- Open-Cell vs Closed-Cell Compare ---------- */
.sf-compare {
    padding: var(--space-2xl) 0;
    background-color: var(--color-bg);
}

.sf-compare__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.sf-compare__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.sf-compare__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

.sf-compare__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.sf-compare__card {
    padding: var(--space-lg);
    border-radius: 6px;
    border: 1px solid var(--color-border);
    border-left: 4px solid transparent;
    background-color: var(--color-bg-alt);
}

/* Closed-cell vs open-cell get distinct accent colors (red vs blue) so the two
   cards read differently at a glance, not just via label text. */
.sf-compare__card--closed {
    border-left-color: var(--color-accent);
}

.sf-compare__card--open {
    border-left-color: var(--color-blue);
}

.sf-compare__card-label {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    padding: 0.3em 0.75em;
    border-radius: 3px;
    margin-bottom: var(--space-md);
}

.sf-compare__card-label--closed {
    background-color: var(--color-accent);
}

.sf-compare__card-label--open {
    background-color: var(--color-blue);
}

.sf-compare__card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.sf-compare__card p {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.sf-compare__card-best {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text);
    font-weight: 500;
    margin-bottom: 0;
}

.sf-compare__card-best span {
    color: var(--color-text-muted);
    font-weight: 300;
    text-transform: none;
}

/* ---------- Stats ---------- */
.sf-stats {
    padding: var(--space-2xl) 0;
    text-align: center;
}

.sf-stats__header {
    margin-bottom: var(--space-xl);
}

.sf-stats__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    /* Lighter tint of --color-accent (#CC0000) for AA contrast on this dark background
       (raw accent computes ~2.9:1 against --color-dark, below the 4.5:1 floor). */
    color: #FF6B6B;
    margin-bottom: var(--space-md);
}

.sf-stats__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    line-height: 1.15;
}

.sf-stats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.sf-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-lg) var(--space-md);
    border-left: 1px solid var(--color-dark-border);
}

.sf-stat:first-child {
    border-left: none;
}

.sf-stat__value {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
    letter-spacing: 0.01em;
    margin-bottom: var(--space-sm);
    display: inline-flex;
    align-items: baseline;
}

.sf-stat__plus {
    font-size: 0.5em;
    /* --color-accent computes to ~2.9:1 on the dark stats band; #FF6B6B is the
       established AA-safe red for dark sections in this theme. */
    color: #FF6B6B;
    margin-left: 0.15em;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.sf-stat__label {
    font-family: var(--font-body);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    text-align: center;
}

.sf-stats__footnote {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-muted);
    max-width: 620px;
    margin: 0 auto;
}

/* ---------- Where It's Used Strip ---------- */
.sf-areas {
    padding: var(--space-lg) 0;
    background-color: var(--color-bg-alt);
}

.sf-areas__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.sf-areas__label {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.sf-areas__items {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.sf-areas__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text);
}

.sf-areas__item svg {
    width: 16px;
    height: 16px;
    color: var(--color-accent);
}

/* ---------- Equipment ---------- */
/* Photos: Profoam rig-interior equipment shots (profoam.com), PLACEHOLDER until
   Patriot's own spray-foam rig/job photography exists — swap when available. */
.sf-equipment {
    padding: var(--space-2xl) 0;
    background-color: var(--color-bg);
}

.sf-equipment__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.sf-equipment__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.sf-equipment__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

.sf-equipment__card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
}

.sf-equipment__photo {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.sf-equipment__photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.sf-equipment__body p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.sf-equipment__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sf-equipment__list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text);
}

.sf-equipment__list svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-accent);
}

/* ---------- Trust / Certifications ---------- */
.sf-certs {
    padding: var(--space-2xl) 0;
    background-color: var(--color-bg-alt);
}

.sf-certs__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.sf-certs__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.sf-certs__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

.sf-certs__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.sf-certs__card {
    padding: var(--space-lg) var(--space-md);
    border-radius: 6px;
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-accent);
    background-color: var(--color-bg);
    text-align: center;
}

.sf-certs__card-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    height: 70px;
}

.sf-certs__card-badge img {
    max-height: 70px;
    width: auto;
    margin: 0 auto;
}

.sf-certs__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    color: var(--color-accent);
    margin-bottom: var(--space-md);
}

.sf-certs__card-icon svg {
    width: 36px;
    height: 36px;
}

.sf-certs__card h3 {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.sf-certs__card p {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .sf-benefits__grid {
        grid-template-columns: 1fr 1fr;
    }

    .sf-compare__grid {
        grid-template-columns: 1fr;
    }

    .sf-stats__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sf-stat {
        border-left: none;
        border-top: 1px solid var(--color-dark-border);
        padding: var(--space-md);
    }

    .sf-stat:first-child {
        border-top: none;
    }

    .sf-certs__grid {
        grid-template-columns: 1fr 1fr;
    }

    .sf-equipment__card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* No --header-height term here. The header is position:fixed and .site-main already
       clears it, so the hero box starts BELOW the header, not under it. Adding the header
       height again left 136px of dead space above the text against 64px below it, which
       read as the hero being badly centred on a phone. */
    .sf-hero {
        padding: var(--space-xl) 0 var(--space-xl);
    }

    /* Hero image replaced 2026-08-13; the old P=15 / P=22 pair below was measured against the
       previous photo, whose applicator sat at 26.5% of the source width. This image centres
       its subject, so that whole drift correction is gone.

       A percentage background-position aligns the P% point of the image with the P% point of
       the box, so the visible window is centred on source fraction F where:

           P/100 = (F * scaledWidth - boxWidth/2) / (scaledWidth - boxWidth)

       At F = 0.5 that reduces to P = 50 exactly, independent of box width and overflow. The
       framing we want IS the image centre (applicator left of centre, foamed bays to his
       right), so one value holds across every phone width and the narrow-phone override that
       used to live below is no longer needed.

       The Y term is NOT inert here, and an earlier version of this comment wrongly said it was.
       That was true of the old landscape hero; it is false for the current portrait crop.
       The asset is 820x1285 (aspect 0.6381), so `cover` is height-bound (no vertical crop, Y
       genuinely inert) only while boxWidth/boxHeight <= 0.6381. Measured against the live hero
       box: 320x720 and 400x662 are height-bound with 0px overflow, but the crossover falls near
       425px and by 500x576 there is 208px of vertical overflow and by 753x551 there is 629px.
       Across that upper half of this breakpoint the 35% is actively choosing which slice shows.
       Framing checked by rendering the real crop at 375, 500 and 753: the worker's head and hard
       hat stay in frame at all three, it simply tightens as the box widens. Acceptable, but it
       is a chosen framing, not a no-op. Re-check it if the asset or the breakpoint changes. */
    .sf-hero__bg {
        /* NOTE: no standalone background-position here on purpose. The `background` shorthand
           below sets position inline (`50% 35%`) and would reset any separate declaration that
           preceded it anyway. One place to edit, not two. */
        /* A 375px phone was downloading the full 2688x1536 / 312KB desktop asset.
           spray-foam-worker-narrow.webp is 820x1285 / 84KB.

           It is a PORTRAIT CROP of the wide image, taken from source x 746..1726 at full height
           (a 980x1536 region) and then resized to 820x1285, i.e. about 0.84x. An earlier version
           of this comment called that "native resolution", which was wrong. The point is that it
           is a CROP rather than a squeezed-down copy of the whole landscape frame: the
           phone hero box is tall and narrow (about 320x720), so `cover` scales to fit HEIGHT
           and throws most of a landscape asset off both sides. A 900x514 landscape variant was
           tried first and had to be scaled UP 1.4x to cover, leaving only 228 source pixels
           across 960 device pixels on a 3x phone. The portrait crop shows 607 source pixels
           over the same span, a 1.58x upscale at 3x and about 1:1 at 2x.

           The crop is centred on 46% of the source, not 50%, because the worker's head sits
           left of frame centre and a 320px-wide window centred on 50% clips his hard hat.
           Checked by rendering the actual crop at 320, 375 and 400.

           Both gradients are repeated because this shorthand replaces the whole background
           stack, not just the url layer. */
        background:
            radial-gradient(ellipse at 50% 40%, rgba(178, 34, 34, 0.16) 0%, transparent 70%),
            linear-gradient(180deg, rgba(18, 18, 42, 0.80) 0%, rgba(12, 12, 28, 0.86) 100%),
            url('../assets/images/spray-foam-worker-narrow.webp') 50% 35%/cover no-repeat;
    }

    .sf-hero__actions {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .sf-hero__actions .btn {
        width: 100%;
        max-width: 320px;
    }

    .sf-intro,
    .sf-benefits,
    .sf-compare,
    .sf-stats,
    .sf-equipment,
    .sf-certs {
        padding: var(--space-xl) 0;
    }

    .sf-benefits__grid {
        grid-template-columns: 1fr;
    }

    .sf-areas__row {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .sf-areas__items {
        justify-content: center;
    }

    .sf-equipment__card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .sf-equipment__list li {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .sf-certs__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .sf-hero__eyebrow {
        font-size: 0.65rem;
    }

    .sf-hero__division {
        font-size: 0.75rem;
    }

    .sf-hero__division-tagline {
        display: block;
        margin-left: 0;
    }
}

/* The narrow-phone (320-400px) .sf-hero__bg correction was removed 2026-08-13 along with the
   old hero photo. It existed only to stop an off-centre subject drifting across the frame as
   the viewport narrowed; the current image is centre-weighted, so P = 50% is stable at every
   width (derivation in the note on .sf-hero__bg above). Re-add a band-specific value only if
   the hero photo is swapped for another off-centre one. */