/* Extrusion Foam Filling. Loaded before density.css, which can override shared classes but not ff-* rules. */
.ff-hero,.ff-features{--ff-navy:#102447;--ff-green:#8be490;--ff-blue:#0094d9}

/* Hero: the supplied foam-filled extrusion photo under a navy wash so the text stays readable. */
.ff-hero {
    position: relative;
    color: #fff;
    background: linear-gradient(90deg,rgba(10,26,54,.94) 0%,rgba(16,36,71,.82) 48%,rgba(16,36,71,.5) 100%),url("/media/foam-fill/foam-fill-artistic.jpg") center/cover no-repeat,var(--ff-navy)
}
.ff-hero-inner{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:460px;padding-top:54px;padding-bottom:64px}
.ff-hero .back-link{color:#bfe9ff}
.ff-hero .eyebrow{color:var(--ff-green)}
.ff-hero h1{color:#fff;font-size:clamp(40px,6vw,76px);line-height:1.04;max-width:12ch}
.ff-tagline{margin:22px 0 0;max-width:520px;font:700 clamp(20px,2.4vw,30px)/1.25 var(--font-display);color:var(--ff-green);letter-spacing:-.02em}
.ff-hero .actions{margin-top:30px}
.ff-hero .button-on-dark{border-color:#fff;color:#fff}
.ff-hero .button-on-dark:hover{background:#fff;color:var(--ff-navy)}

/* Features: decorative bars sit behind the copy. */
.ff-features{position:relative;overflow:hidden;padding:76px 0;background:#f4f8f7}
.ff-features:before{content:"";position:absolute;right:-90px;top:-40px;width:420px;height:360px;background:url("/media/foam-fill/bars.svg") center/contain no-repeat;opacity:.35;pointer-events:none}
.ff-features-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:center}
.ff-features h2{margin:0 0 16px}
.ff-intro{max-width:620px;margin:0 0 26px;font-size:18px;line-height:1.65}
.ff-feature-list{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;max-width:720px}
.ff-feature-list li{display:flex;gap:12px;align-items:flex-start;font-weight:700;line-height:1.4;color:var(--ff-navy)}
.ff-feature-list li:before{content:"";flex:0 0 24px;height:24px;margin-top:-1px;background:url("/media/foam-fill/check.svg") center/contain no-repeat}

/* Comparison: the same extrusions before and after foam filling, side by side next to the features, with real text labels. */
.ff-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ff-compare-card{margin:0;padding:18px 14px 20px;border-radius:16px;background:linear-gradient(135deg,#0a1a36,var(--ff-navy) 60%,#0d2f5b);box-shadow:0 18px 40px rgba(16,36,71,.22)}
.ff-compare-label{margin:0 0 12px;font:800 clamp(17px,1.8vw,22px)/1.1 var(--font-display);letter-spacing:.03em;text-transform:uppercase;color:#fff}
.ff-compare-label.ff-foamed{color:var(--ff-green)}
.ff-compare-card img{display:block;width:100%;height:auto}

@media (max-width:900px){
  .ff-features-grid{grid-template-columns:1fr;gap:40px}
  .ff-compare{max-width:560px}
}
@media (max-width:640px){
  .ff-hero-inner{min-height:0;padding-top:40px;padding-bottom:48px}
  .ff-features{padding:52px 0}
  .ff-features:before{opacity:.18}
  .ff-feature-list{grid-template-columns:1fr}
  .ff-compare{grid-template-columns:1fr}
}