/* Section: roof_lifecycle — bitumen-dak levensloop timeline (design .tl/.ph2). */

.roof-lifecycle .rl-head { max-width: 700px; margin-bottom: 26px; }
.roof-lifecycle .rl-head .eyebrow { display: inline-flex; }
.roof-lifecycle .rl-head h2 { margin-bottom: 8px; }
.roof-lifecycle .rl-head .lede { margin: 0;}

.roof-lifecycle .tl {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 48px;
	margin-bottom: 10px;
}
.roof-lifecycle .tl::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%; top: 25%;
    height: 4px; border-radius: 9px;
    background: linear-gradient(90deg, var(--blue), var(--green), var(--amber));
}
.roof-lifecycle .ph2 { text-align: center; position: relative; }
.roof-lifecycle .ph2 .d {
    width: 80px; height: 80px; border-radius: 50%;
    background: #fff; ;
    margin: 0 auto 14px; display: grid; place-items: center;
    font-weight: 800; color: var(--blue-d); font-size: .76rem; font-family: var(--display);
    box-shadow: var(--sh-sm); position: relative; z-index: 1;
}
.roof-lifecycle .ph2.act .d { background: linear-gradient(135deg, #212b55 0%, #005770 100%); color: #fff; transform: scale(1.2);  }
.roof-lifecycle .ph2 b { display: block; font-size: 1rem; color: var(--ink); font-family: var(--display); }
.roof-lifecycle .ph2 small { color: var(--muted); font-size: .84rem; }

@media (max-width: 780px) {
.roof-lifecycle .tl {
    display: grid; /* Zorg dat de container als grid is ingesteld */
    grid-template-columns: repeat(2, 1fr); /* 2 gelijke kolommen op mobiel */
    gap: 12px; /* Optioneel: voeg wat tussenruimte toe tussen de blokken */
  }
	
    .roof-lifecycle .tl::before { display: none; }