/* Technical illustrations: Sikra blue, pale mineral surfaces, green open zones. */
.sikra-diagram {
    --diagram-ink: #123b5d;
    --diagram-blue: #287cb6;
    --diagram-line: #cddde0;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    margin: 40px 0;
    color: var(--diagram-ink);
}
.sikra-diagram *, .sikra-layer-section * { box-sizing: border-box; }
.sikra-diagram-stage {
    min-width: 0;
    overflow: hidden;
    background: #eff5f3;
    border: 1px solid var(--diagram-line);
    border-radius: 6px;
}
.sikra-diagram-stage-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 23px 26px 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}
.sikra-diagram-stage-heading > span:last-child { color: #526d75; font-weight: 400; }
.sikra-diagram-stage > svg, .sikra-courtyard-drawing > svg { display: block; width: 100%; height: auto; }
.sikra-diagram-instruction { margin: 0 0 16px; color: #526b77; font-size: 14px; line-height: 1.6; }
.sikra-diagram-choices { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sikra-diagram-choices li { border-top: 1px solid var(--diagram-line); }
.sikra-diagram-choices li:last-child { border-bottom: 1px solid var(--diagram-line); }
.sikra-diagram-choices button {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 19px 16px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--diagram-ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.sikra-diagram-choices button:hover { background: #f5f9f8; }
.sikra-diagram-choices button[aria-pressed="true"] { background: #fff; border-left-color: var(--diagram-blue); }
.sikra-diagram-number {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    height: 30px;
    border: 1px solid #aac4cd;
    border-radius: 50%;
    color: #547582;
    font-size: 12px;
    font-weight: 650;
}
[aria-pressed="true"] > .sikra-diagram-number { background: var(--diagram-ink); border-color: var(--diagram-ink); color: #fff; }
.sikra-diagram-choices strong { display: block; padding-top: 3px; font-size: 17px; font-weight: 650; line-height: 1.4; }
.sikra-diagram-description { display: block; margin-top: 7px; color: #526775; font-size: 14px; line-height: 1.65; }
.sikra-diagram-note { margin: 20px 0 0; color: #62797f; font-size: 12px; line-height: 1.65; }
.sikra-diagram-stage > .sikra-diagram-note { margin: 0; padding: 0 26px 22px; }
.sikra-diagram button:focus-visible { outline: 3px solid #287cb6; outline-offset: 4px; }
.sikra-diagram-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; padding: 0 24px 24px; font-size: 12px; color: #4b6975; }
.sikra-diagram-legend span { display: flex; align-items: center; gap: 8px; }
.sikra-diagram-legend i { width: 10px; height: 10px; border-radius: 2px; }
.legend-open { background: #b6d8cb; }
.legend-work { background: #e8c58e; }
.legend-done { background: #a7cddd; }
.parking-zone-fill { fill: #b6d8cb; transition: fill .5s; }
.parking-zone-hatch, .parking-zone-barrier { opacity: 0; transition: opacity .4s; }
.parking-zone-cars { opacity: 1; transition: opacity .3s; }
.sikra-parking-diagram[data-selected="1"] [data-diagram-zone="1"] .parking-zone-fill,
.sikra-parking-diagram[data-selected="2"] [data-diagram-zone="2"] .parking-zone-fill,
.sikra-parking-diagram[data-selected="3"] [data-diagram-zone="3"] .parking-zone-fill { fill: #e8c58e; }
.sikra-parking-diagram[data-selected="1"] [data-diagram-zone="1"] .parking-zone-hatch,
.sikra-parking-diagram[data-selected="1"] [data-diagram-zone="1"] .parking-zone-barrier,
.sikra-parking-diagram[data-selected="2"] [data-diagram-zone="2"] .parking-zone-hatch,
.sikra-parking-diagram[data-selected="2"] [data-diagram-zone="2"] .parking-zone-barrier,
.sikra-parking-diagram[data-selected="3"] [data-diagram-zone="3"] .parking-zone-hatch,
.sikra-parking-diagram[data-selected="3"] [data-diagram-zone="3"] .parking-zone-barrier { opacity: 1; }
.sikra-parking-diagram[data-selected="1"] [data-diagram-zone="1"] .parking-zone-cars,
.sikra-parking-diagram[data-selected="2"] [data-diagram-zone="2"] .parking-zone-cars,
.sikra-parking-diagram[data-selected="3"] [data-diagram-zone="3"] .parking-zone-cars { opacity: 0; }
.sikra-parking-diagram[data-selected="2"] [data-diagram-zone="1"] .parking-zone-fill,
.sikra-parking-diagram[data-selected="3"] [data-diagram-zone="1"] .parking-zone-fill,
.sikra-parking-diagram[data-selected="3"] [data-diagram-zone="2"] .parking-zone-fill { fill: #a7cddd; }
.sikra-courtyard-drawing { position: relative; }
.courtyard-callout { fill: #fff; stroke: #7899a8; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .65; transition: stroke .2s, opacity .2s; pointer-events: none; }
.courtyard-callout path { fill: none; }
.sikra-courtyard-diagram[data-selected="1"] [data-callout="1"],
.sikra-courtyard-diagram[data-selected="2"] [data-callout="2"],
.sikra-courtyard-diagram[data-selected="3"] [data-callout="3"],
.sikra-courtyard-diagram[data-selected="4"] [data-callout="4"] { stroke: #287cb6; opacity: 1; }
.sikra-diagram-pin {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border: 3px solid #fff;
    border-radius: 50%;
    background: #123b5d;
    color: #fff;
    font: 650 14px Inter, sans-serif;
    cursor: pointer;
    box-shadow: 0 3px 12px #123b5d22;
    transition: background .2s, box-shadow .2s;
}
.sikra-diagram-pin[aria-pressed="true"] { background: #287cb6; box-shadow: 0 0 0 8px #287cb61c; }
.courtyard-highlight { opacity: .15; transition: opacity .4s; }
.sikra-courtyard-diagram[data-selected="1"] [data-highlight="1"] { opacity: .65; }
.sikra-courtyard-diagram[data-selected="2"] [data-highlight="2"],
.sikra-courtyard-diagram[data-selected="3"] [data-highlight="3"],
.sikra-courtyard-diagram[data-selected="4"] [data-highlight="4"] { opacity: 1; }
.courtyard-water-flow { opacity: .15; transition: opacity .4s; }
.sikra-courtyard-diagram[data-selected="1"] .courtyard-water-flow { opacity: 1; }
.sikra-layer-section { background: #f0f5f7; padding: 88px 28px; }
.sikra-layer-container { max-width: 1280px; margin: auto; }
.sikra-layer-heading { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: end; }
.sikra-layer-heading h2 { max-width: 690px; margin: 14px 0 0; color: #123b5d; font-size: clamp(30px, 3vw, 42px); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
.sikra-layer-heading > p { max-width: 430px; margin: 0; color: #526775; font-size: 16px; line-height: 1.7; }
.sikra-layer-diagram { margin-bottom: 0; align-items: start; }
.sikra-layer-diagram .sikra-diagram-stage { background: #eaf2f2; position: sticky; top: 110px; }
.membrane-diagram-slab { transform: translateY(var(--slab-assembled)); transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.sikra-layer-diagram.is-expanded .membrane-diagram-slab { transform: translateY(var(--slab-expanded)); }
.membrane-slab-outline { opacity: 0; transition: opacity .4s; }
.membrane-diagram-slab.is-selected .membrane-slab-outline { opacity: 1; }
.sikra-layer-diagram.is-expanded .membrane-diagram-slab:not(.is-selected) { opacity: .55; }
.sikra-layer-selected { display: flex; justify-content: space-between; gap: 12px; padding: 0 26px 24px; font-size: 13px; font-weight: 600; }
.sikra-layer-selected > span:last-child { font-size: 11px; font-weight: 400; color: #62797f; }
.sikra-layer-diagram .sikra-diagram-choices button { padding-block: 13px; }
.sikra-layer-diagram .sikra-diagram-choices strong { font-size: 16px; }
@media (max-width: 900px) {
    .sikra-diagram { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .sikra-layer-heading { grid-template-columns: 1fr; gap: 20px; }
    .sikra-layer-heading > p { max-width: 600px; }
    .sikra-layer-diagram .sikra-diagram-stage { position: static; }
    .sikra-layer-section { padding: 60px 24px; }
}
@media (max-width: 540px) {
    .sikra-diagram { margin-top: 28px; }
    .sikra-diagram-stage-heading { padding: 18px 16px 0; font-size: 11px; }
    .sikra-courtyard-diagram .sikra-diagram-stage-heading > span:last-child { width: 100%; }
    .sikra-diagram-choices button { padding: 16px 12px; gap: 12px; }
    .sikra-diagram-choices strong { font-size: 16px; }
    .sikra-diagram-stage > .sikra-diagram-note { padding: 4px 16px 18px; }
    .sikra-layer-selected { padding: 0 16px 20px; flex-wrap: wrap; }
    .sikra-layer-section { padding: 52px 20px; }
    .sikra-layer-heading h2 { font-size: 30px; }
    .sikra-layer-diagram .sikra-diagram-stage-heading > span { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sikra-diagram *, .sikra-diagram *::before, .sikra-diagram *::after { transition: none !important; animation: none !important; }
}

/* A full scene stays in view while the document scroll drives its construction. */
html.has-sikra-interactions, html.has-sikra-interactions body { overflow-x: clip; overflow-y: visible; }
/* Enabling sticky scenes must not make the site's previously scrolling header stick. */
html.has-sikra-interactions body > .topbar:not(.topbar-home) { position: relative; top: auto; }
.sikra-layer-section.is-scrolly { height: 440svh; padding: 0 28px; overflow: visible; }
.sikra-layer-section.is-scrolly > .sikra-layer-container {
    position: sticky;
    top: var(--sikra-sticky-top, 0px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100svh - var(--sikra-sticky-top, 0px));
    padding: 28px 0;
}
.is-scrolly .sikra-layer-heading { gap: 48px; }
.is-scrolly .sikra-layer-heading h2 { font-size: clamp(28px, 2.6vw, 38px); }
.is-scrolly .sikra-layer-diagram { margin: 28px 0 0; align-items: center; }
.is-scrolly .sikra-layer-diagram .sikra-diagram-stage { position: static; }
.is-scrolly .sikra-layer-diagram .sikra-diagram-stage > svg { height: min(51svh, 500px); }
.is-scroll-diagram .membrane-diagram-slab { transition: opacity .25s; }
.membrane-slab-label { opacity: 0; transition: opacity .25s; }
.is-expanded .membrane-slab-label { opacity: 1; }
.is-scroll-diagram .sikra-diagram-description {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s, margin .3s, opacity .3s;
}
.is-scroll-diagram [aria-pressed="true"] .sikra-diagram-description { max-height: 140px; margin-top: 7px; opacity: 1; }
.sikra-layer-diagram.is-scroll-diagram .sikra-diagram-description { display: grid; grid-template-rows: 0fr; max-height: none; transition: grid-template-rows .42s cubic-bezier(.22, .61, .36, 1), margin-top .42s cubic-bezier(.22, .61, .36, 1), opacity .22s ease; }
.sikra-description-content { min-height: 0; overflow: hidden; }
.sikra-layer-diagram.is-scroll-diagram [aria-pressed="true"] .sikra-diagram-description { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .42s cubic-bezier(.22, .61, .36, 1), margin-top .42s cubic-bezier(.22, .61, .36, 1), opacity .28s ease .08s; }
.is-scroll-diagram .sikra-diagram-choices button { padding-block: 12px; }
.sikra-scroll-progress { display: none; height: 3px; margin-top: 22px; background: #d1e0e3; }
.sikra-scroll-progress > span { display: block; height: 100%; background: #287cb6; transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; }
.sikra-scroll-hint { display: none; margin: 9px 0 0; color: #526d75; font-size: 12px; line-height: 1.5; }
.is-scroll-diagram .sikra-scroll-progress, .is-scroll-diagram .sikra-scroll-hint { display: block; }
.sikra-parking-scroll-track.is-scrolly { height: 310svh; position: relative; margin-block: 40px; }
.sikra-parking-scroll-track.is-scrolly > .sikra-diagram { position: sticky; top: var(--sikra-sticky-top, 0px); height: calc(100svh - var(--sikra-sticky-top, 0px)); margin: 0; padding-block: 24px; }
.sikra-parking-scroll-track.is-scrolly .sikra-diagram-stage > svg { height: min(56svh, 500px); }
.sikra-parking-diagram[data-selected="4"] .parking-zone-fill { fill: #a7cddd; }
.sikra-courtyard-diagram [data-selected] { transition: opacity .3s; }
.sikra-courtyard-diagram .sikra-diagram-choices button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px #cddde0; }

@media (max-width: 900px) {
    .is-scrolly .sikra-layer-heading { grid-template-columns: 1fr; gap: 10px; }
    .is-scrolly .sikra-layer-heading > p { display: none; }
    .is-scrolly .sikra-layer-diagram { gap: 16px; margin-top: 18px; }
    .is-scrolly .sikra-layer-diagram .sikra-diagram-stage > svg { height: 22svh; }
    .is-scroll-diagram .sikra-diagram-instruction, .is-scroll-diagram .sikra-diagram-note { display: none; }
    .is-scrolly .sikra-layer-heading .eyebrow { display: none; }
    .is-scrolly .sikra-layer-heading h2 { font-size: 26px; margin: 0; max-width: 650px; }
    .is-scroll-diagram .sikra-diagram-choices button { padding: 7px 10px; gap: 12px; }
    .is-scroll-diagram .sikra-diagram-number { flex-basis: 25px; height: 25px; font-size: 10px; }
    .is-scroll-diagram .sikra-diagram-choices strong { font-size: 14px; }
    .is-scroll-diagram .sikra-diagram-description { font-size: 12px; line-height: 1.5; }
    .is-scroll-diagram .sikra-diagram-stage-heading { padding: 12px 16px 0; }
    .is-scroll-diagram .sikra-layer-selected { padding: 0 16px 12px; font-size: 11px; }
    .is-scroll-diagram .sikra-layer-selected > span:last-child { display: none; }
    .is-scroll-diagram .sikra-scroll-progress { margin-top: 12px; }
    .is-scroll-diagram .sikra-scroll-hint { font-size: 11px; }
    .sikra-parking-scroll-track.is-scrolly > .sikra-diagram { display: flex; flex-direction: column; justify-content: center; gap: 20px; }
    .sikra-parking-scroll-track.is-scrolly .sikra-diagram-stage { width: 100%; }
    .sikra-parking-scroll-track.is-scrolly .sikra-diagram-stage > svg { height: 34svh; }
    .sikra-parking-scroll-track.is-scrolly .sikra-diagram-sidebar { width: 100%; }
}
@media (max-width: 600px) {
    .sikra-layer-section.is-scrolly { padding-inline: 20px; }
    .sikra-layer-section.is-scrolly > .sikra-layer-container { padding-block: 14px; }
    .is-scroll-diagram .sikra-diagram-stage-heading > span { width: auto; }
    .membrane-slab-label { display: none; }
    .sikra-parking-scroll-track.is-scrolly .sikra-diagram-stage > svg { height: 30svh; }
    .sikra-parking-scroll-track.is-scrolly .sikra-diagram-legend { padding-bottom: 14px; gap: 16px; font-size: 10px; }
}

/* Sikra's technical viewer: material sample, square markers and a straight project rail. */
.sikra-diagram-stage { border-radius: 2px; background: #eef3f6; }
.sikra-layer-diagram .sikra-diagram-stage {
    background-color: #eaf1f6;
    background-image: linear-gradient(#123b5d05 1px, transparent 1px), linear-gradient(90deg, #123b5d05 1px, transparent 1px);
    background-size: 28px 28px;
}
.sikra-layer-section { background: #f2f5f8; }
.sikra-diagram-number { border-radius: 3px; }
.sikra-diagram-pin { border-radius: 5px; width: 40px; height: 40px; border-width: 2px; }
.sikra-diagram-pin[aria-pressed="true"] { box-shadow: 0 0 0 4px #287cb61c; }
.sikra-courtyard-diagram .sikra-diagram-stage { background: #edf3f8; }
.sikra-courtyard-diagram .sikra-diagram-pin { border-radius: 50%; border: 1.5px solid #6e9fbe; background: #f9fcfe; color: #174563; box-shadow: 0 2px 5px #1745630c; }
.sikra-courtyard-diagram .sikra-diagram-pin:hover { border-color: #287cb6; background: #e4f1fa; }
.sikra-courtyard-diagram .sikra-diagram-pin[aria-pressed="true"] { border-color: #287cb6; background: #287cb6; color: #fff; box-shadow: 0 0 0 4px #287cb612; }
.sikra-courtyard-diagram .sikra-diagram-pin:focus-visible { outline: 2px solid #174563; outline-offset: 4px; }
.sikra-courtyard-diagram .courtyard-highlight { opacity: 0; }
.sikra-courtyard-diagram[data-selected="1"] [data-highlight="1"] { opacity: .4; }
.sikra-courtyard-diagram .courtyard-water-flow { opacity: 0; }
.sikra-courtyard-diagram[data-selected="1"] .courtyard-water-flow { opacity: .8; animation: sikra-courtyard-water 2.4s linear infinite; }
@keyframes sikra-courtyard-water { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .sikra-courtyard-diagram .courtyard-water-flow { animation: none !important; } .courtyard-callout { transition: none; } }
.sikra-layer-diagram.is-expanded .membrane-diagram-slab:not(.is-selected) { opacity: .36; }
.sikra-layer-diagram .sikra-diagram-choices button[aria-pressed="true"] { border-left-width: 4px; background: #e1edf6; }
@media (min-width: 901px) {
    .sikra-layer-diagram { grid-template-columns: minmax(280px, .85fr) minmax(0, 1.5fr); }
    .sikra-layer-diagram .sikra-diagram-sidebar { grid-column: 1; grid-row: 1; }
    .sikra-layer-diagram .sikra-diagram-stage { grid-column: 2; grid-row: 1; }
}

.waterproof-layer-rail.has-scroll-accent > li { position: relative; }
.waterproof-layer-rail.has-scroll-accent > li::after { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 3px; background: var(--cta, #287cb6); transform: scaleX(var(--edge-progress, 0)); transform-origin: left; pointer-events: none; }
.waterproof-system-statement.has-scroll-accent { position: relative; border-left-color: transparent; }
.waterproof-system-statement.has-scroll-accent::before { content: ''; position: absolute; top: 0; bottom: 0; left: -3px; width: 3px; background: var(--cta, #287cb6); transform: scaleY(var(--accent-progress, 0)); transform-origin: top; pointer-events: none; }
@media (max-width: 640px) {
    .waterproof-layer-rail.has-scroll-accent > li:nth-child(n + 3)::after { content: none; }
}
[data-interactive-layer-rail] > span { grid-template-columns: minmax(0, 1fr); }
[data-interactive-layer-rail] button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 13px; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
[data-interactive-layer-rail] button small { transition: background .2s, color .2s, box-shadow .2s; }
[data-interactive-layer-rail] button[aria-pressed="true"] small { background: #287cb6; border-color: #287cb6; color: #fff; box-shadow: 0 0 0 5px #287cb61a; }
[data-interactive-layer-rail] button:focus-visible { outline: 2px solid #287cb6; outline-offset: 6px; border-radius: 3px; }
.membrane-rail-progress { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.membrane-rail-progress path { fill: none; stroke: #287cb6; stroke-width: 3; transition: stroke-dashoffset .35s ease; }
.membrane-rail-detail { min-height: 100px; margin-top: 28px; padding: 18px 0 0; border-top: 1px solid #c9deea; }
.membrane-rail-detail strong { color: #174563; font-size: 15px; }
.membrane-rail-detail p { max-width: 760px; margin: 7px 0 0; color: #516575; font-size: 15px; line-height: 1.6; }
@media (max-width: 640px) {
    [data-interactive-layer-rail]::before { left: 39px; top: 25px; bottom: 25px; }
    [data-interactive-layer-rail] button { grid-template-columns: 34px minmax(0, 1fr); justify-items: start; align-items: center; gap: 14px; }
    .membrane-rail-detail { min-height: 140px; }
}
@media (prefers-reduced-motion: reduce) { [data-interactive-layer-rail] button small, .membrane-rail-progress path { transition: none; } }
/* A quiet accent below each number; the content stays visible throughout. */
.service-process-section .service-process-list > li > span { position: relative; align-self: start; }
.service-process-section .service-process-list > li > span::after {
    content: '';
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    width: 24px;
    height: 2px;
    background: #8ad6ff;
    transform-origin: left center;
    pointer-events: none;
}
.service-process-section .service-process-list > li.has-process-accent > span::after {
    transform: scaleX(0);
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1) var(--process-accent-delay, 0ms);
}
.service-process-section .service-process-list > li.is-process-visible > span::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .service-process-section .service-process-list > li.has-process-accent > span::after {
        transform: none;
        transition: none;
    }
}
.has-zone-interaction .wayfinding-zone-swatch { transform: scaleY(var(--zone-reveal, 1)); transform-origin: top left; transition: transform .18s ease-out; }
.has-zone-interaction .sikra-zone-choice { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; transition: color .2s; }
.has-zone-interaction li:is(:hover, :focus-within, .is-zone-selected) .wayfinding-zone-swatch { transform: scaleX(1.5) scaleY(1); }
.has-zone-interaction li:is(:hover, :focus-within, .is-zone-selected) .sikra-zone-choice { color: var(--zone-ink); }
.has-zone-interaction .sikra-zone-choice:focus-visible { outline: 2px solid #287cb6; outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .has-zone-interaction .wayfinding-zone-swatch, .has-zone-interaction .sikra-zone-choice { transition: none; } }
.has-design-examples > li { position: relative; }
.has-design-examples > li > span { position: relative; }
.sikra-design-example { position: absolute; right: 0; top: -4px; width: 68px; height: 24px; color: #287cb6; opacity: .78; transition: opacity .22s ease, color .22s ease; pointer-events: none; }
.sikra-design-choice { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.has-design-examples > li:is(:hover, :focus-within, .is-design-selected) .sikra-design-example { opacity: 1; }
.has-design-examples > li:nth-child(1):is(:hover, :focus-within, .is-design-selected) rect { animation: sikra-color-sample .6s ease both; }
.has-design-examples > li:nth-child(1) rect:nth-child(2) { animation-delay: .12s; }
.has-design-examples > li:nth-child(1) rect:nth-child(3) { animation-delay: .24s; }
.has-design-examples > li:nth-child(2):is(:hover, :focus-within, .is-design-selected) path { stroke-dasharray: 1; animation: sikra-parking-outline .65s ease both; }
.has-design-examples > li:nth-child(3):is(:hover, :focus-within, .is-design-selected) svg { animation: sikra-contrast-sample .65s ease; }
.has-design-examples > li:nth-child(4):is(:hover, :focus-within, .is-design-selected) path { animation: sikra-direction-sample .55s ease; }
.has-design-examples > li:nth-child(5):is(:hover, :focus-within, .is-design-selected) svg { color: #174563; }
@keyframes sikra-color-sample { 0% { opacity: .35; } 60% { opacity: 1; } 100% { opacity: 1; } }
@keyframes sikra-parking-outline { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sikra-contrast-sample { 0%, 100% { opacity: 1; } 40% { opacity: .45; } }
@keyframes sikra-direction-sample { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.sikra-design-choice:focus-visible { outline: 2px solid #287cb6; outline-offset: -5px; }
.wayfinding-documentation article > small { position: relative; }
.sikra-documentation-check { position: absolute; top: 25px; left: 0; width: 18px; height: 18px; overflow: visible; pointer-events: none; }
.sikra-documentation-check path { fill: none; stroke: #287cb6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--check-progress, 0)); }
@media (prefers-reduced-motion: reduce) { .sikra-design-example { transition: none; } .has-design-examples .sikra-design-example, .has-design-examples .sikra-design-example * { animation: none !important; } }
.has-smooth-faq .service-faq-item summary { min-height: var(--faq-summary-height, 0px); box-sizing: border-box; }
.has-smooth-faq .service-faq-item:hover { transform: none; }
.has-smooth-faq .service-faq-item[open] { border-left-color: rgba(47, 125, 186, .72); }
.has-smooth-faq .service-faq-item.is-faq-open { border-left-color: #174563; }
.sikra-faq-icon { position: relative; display: block; justify-self: end; width: 28px; height: 28px; border-radius: 50%; background: #eaf3f9; color: #287cb6; }
.sikra-faq-icon::before, .sikra-faq-icon::after { content: ''; position: absolute; top: 13px; left: 8px; width: 12px; height: 2px; border-radius: 1px; background: currentColor; }
.sikra-faq-icon::after { transform: rotate(90deg); transition: transform .25s ease, opacity .2s; }
.is-faq-open .sikra-faq-icon { color: #174563; }
.is-faq-open .sikra-faq-icon::after { transform: rotate(0); opacity: 0; }
.has-smooth-faq summary:focus-visible { outline: 2px solid #287cb6; outline-offset: -5px; }
@media (prefers-reduced-motion: reduce) { .sikra-faq-icon::after { transition: none; } }
.has-ramp-illustrations > li > span { position: relative; }
.sikra-ramp-sample { position: absolute; top: 25px; left: 0; width: 40px; height: 28px; color: #9dd6fa; opacity: .8; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transition: opacity .2s; pointer-events: none; }
.sikra-ramp-choice { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.sikra-ramp-choice:focus-visible { outline: 2px solid #9dd6fa; outline-offset: 5px; }
.has-ramp-illustrations > li:is(:hover, :focus-within, .is-ramp-selected) .sikra-ramp-sample { opacity: 1; }
.has-ramp-illustrations > li:is(:hover, :focus-within, .is-ramp-selected) .ramp-angle { animation: sikra-ramp-angle .6s ease; }
.has-ramp-illustrations > li:is(:hover, :focus-within, .is-ramp-selected) .ramp-traffic { animation: sikra-ramp-traffic .65s ease; }
.has-ramp-illustrations > li:is(:hover, :focus-within, .is-ramp-selected) .ramp-water-flow { animation: sikra-ramp-water .6s ease; }
.has-ramp-illustrations > li:is(:hover, :focus-within, .is-ramp-selected) .ramp-temperature { transform-origin: 21px 23px; animation: sikra-ramp-temperature .65s ease; }
.has-ramp-illustrations > li:is(:hover, :focus-within, .is-ramp-selected) .ramp-layer { animation: sikra-ramp-layer .6s ease; }
.has-ramp-illustrations .ramp-layer-middle { animation-delay: .1s; }
.has-ramp-illustrations .ramp-layer-bottom { animation-delay: .2s; }
@keyframes sikra-ramp-angle { 0%, 100% { opacity: 1; } 40% { opacity: .25; } }
@keyframes sikra-ramp-traffic { from { stroke-dashoffset: 8; } to { stroke-dashoffset: 0; } }
@keyframes sikra-ramp-water { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes sikra-ramp-temperature { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.55); } }
@keyframes sikra-ramp-layer { 0%, 100% { opacity: 1; } 40% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sikra-ramp-sample { transition: none; } .has-ramp-illustrations .sikra-ramp-sample * { animation: none !important; } }
.sikra-performance-icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 0; padding: 3px; border: 1px solid #b9d8ef; border-radius: 6px; background: transparent; color: var(--ramp-cool, #287cb6); cursor: pointer; transition: background .2s, border-color .2s; }
.ramp-heat-panel .sikra-performance-icon { color: var(--ramp-heat, #b88a44); }
.ramp-heat-panel .sikra-performance-icon svg { width: 26px; height: 26px; stroke-width: 1.8; }
.sikra-performance-icon svg { width: 30px; height: 30px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sikra-performance-icon:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.has-performance-illustration:is(:hover, :focus-within, .is-performance-selected) .sikra-performance-icon { border-color: currentColor; background: #287cb609; }
.has-performance-illustration:is(:hover, :focus-within, .is-performance-selected) .ramp-grip-texture { animation: sikra-grip-texture .6s ease; }
.ramp-grip-texture:nth-of-type(2) { animation-delay: .1s; }
.ramp-grip-texture:nth-of-type(3) { animation-delay: .2s; }
.ramp-heat-mercury { transform-origin: 18px 18px; }
.has-performance-illustration:is(:hover, :focus-within, .is-performance-selected) .ramp-heat-mercury { animation: sikra-heat-mercury .7s ease; }
.has-performance-illustration:is(:hover, :focus-within, .is-performance-selected) .ramp-heat-rays { animation: sikra-heat-rays .7s ease; }
@keyframes sikra-grip-texture { 0%, 100% { opacity: 1; } 40% { opacity: .3; stroke-width: 2.3; } }
@keyframes sikra-heat-mercury { 0%, 100% { transform: scaleY(1); } 35% { transform: scaleY(.55); } }
@keyframes sikra-heat-rays { 0%, 100% { opacity: 1; } 35% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .sikra-performance-icon { transition: none; } .has-performance-illustration .sikra-performance-icon * { animation: none !important; } }

/* Concrete: keep the native grids and add illustrations in their existing gutters. */
.has-concrete-illustrations > li > span { position: relative; }
.sikra-concrete-repair-icon, .sikra-concrete-document-icon, .concrete-cause-flow .sikra-concrete-cause-icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; pointer-events: none; }
.sikra-concrete-repair-icon { position: absolute; top: 26px; left: 0; width: 40px; height: 28px; color: #92cef5; opacity: .85; transition: opacity .2s; }
.sikra-concrete-choice { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.sikra-concrete-choice:focus-visible { outline: 2px solid #92cef5; outline-offset: 5px; }
.has-concrete-illustrations > li:is(:hover, :focus-within) .sikra-concrete-repair-icon { opacity: 1; }
.concrete-cause-flow.has-concrete-cause > span { display: grid; justify-items: start; gap: 8px; }
.concrete-cause-flow .sikra-concrete-cause-icon { display: block; width: 40px; height: 28px; color: #92cef5; opacity: calc(.35 + var(--cause-reveal, 0) * .65); }
.concrete-cause-flow.has-concrete-cause > span { color: color-mix(in srgb, #fff, #92cef5 calc(var(--cause-reveal, 0) * 100%)); }
.concrete-cause-flow.has-concrete-cause > svg { margin-top: 36px; opacity: calc(.25 + var(--cause-reveal, 0) * .75); }
.concrete-documentation article > small { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sikra-concrete-document-icon { width: 40px; height: 28px; color: #92cef5; flex-shrink: 0; }
.sikra-concrete-document-icon > * { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--document-reveal, 0)); }
@media (max-width: 640px) {
    .concrete-cause-flow.has-concrete-cause > span { grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; }
    .concrete-cause-flow .sikra-concrete-cause-icon { display: block; width: 32px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .sikra-concrete-repair-icon { transition: none; } }

[data-concrete-cases].has-case-connection { position: relative; }
.sikra-case-number { position: relative; z-index: 1; display: inline-block; padding: 3px 0; margin: -3px 0; background: #fff; }
.sikra-case-connection { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sikra-case-connection path { fill: none; stroke-linecap: butt; }
.sikra-case-track { stroke: #d7e8f3; stroke-width: 1; }
.sikra-case-progress { stroke: #287cb6; stroke-width: 2; }

.concrete-faq-list.has-smooth-faq details { overflow: hidden; }
.concrete-faq-list.has-smooth-faq summary { transition: color .2s ease; }
.concrete-faq-list.has-smooth-faq .is-faq-open summary { color: #287cb6; }
.concrete-faq-list.has-smooth-faq .sikra-faq-icon { width: 20px; height: 20px; background: transparent; border-radius: 0; }
.concrete-faq-list.has-smooth-faq .sikra-faq-icon::before, .concrete-faq-list.has-smooth-faq .sikra-faq-icon::after { top: 9px; left: 4px; }
.concrete-faq-list.has-smooth-faq .is-faq-open .sikra-faq-icon { color: #287cb6; }
.concrete-faq-list.has-smooth-faq summary:focus-visible { outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .concrete-faq-list.has-smooth-faq summary { transition: none; } }

.staged-zone-plan { margin-top: 28px; max-width: 440px; }
.staged-zone-plan-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #174563; font-size: 12px; }
.staged-zone-plan-heading > span { color: #526d7d; }
.staged-zone-plan > svg { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.staged-deck-shadow { fill: #174563; opacity: .065; }
.staged-deck-front { fill: #cedee7; stroke: #819eaf; stroke-width: 1; }
.staged-deck-side { fill: #b6ccd9; stroke: #819eaf; stroke-width: 1; }
.staged-deck-floor { fill: #e8f0f5; stroke: #819eaf; stroke-width: 1; }
.staged-plan-surface { fill: #e8f0f5; transition: fill .45s; }
.staged-plan-bays { fill: none; stroke: #fff; stroke-width: 2; }
.staged-plan-hatch { opacity: 0; transition: opacity .35s; }
.staged-plan-zone text { fill: #526d7d; font-size: 13px; font-weight: 700; }
.staged-plan-zone.is-working .staged-plan-surface { fill: #f1ddba; }
.staged-plan-zone.is-working .staged-plan-hatch { opacity: 1; }
.staged-plan-zone.is-working text { fill: #795a29; }
.staged-plan-zone.is-reopened .staged-plan-surface { fill: #bad7e8; }
.staged-deck-car { opacity: 1; transition: opacity .3s; }
.is-working .staged-deck-car { opacity: 0; }
.staged-deck-car > rect { fill: #416a83; stroke: #24485e; stroke-width: 1; }
.staged-deck-car > path { fill: #b9d9e9; }
.staged-deck-car .staged-deck-car-trim { fill: none; stroke: #eaf4fa; stroke-width: 2; }
.staged-deck-guardrail { fill: none; stroke: #7896a7; stroke-width: 1.5; stroke-linejoin: round; }
.staged-deck-barrier { transition: transform .65s cubic-bezier(.22,.61,.36,1), opacity .3s; }
.staged-deck-barrier-posts { fill: none; stroke: #5b7180; stroke-width: 2; }
.staged-deck-barrier-board { fill: #b88a44; stroke: #8a662c; stroke-width: 1; }
.staged-plan-road { fill: #174563; }
.staged-plan-road-marking { fill: none; stroke: #fff; stroke-width: 1; stroke-dasharray: 8 8; opacity: .22; }
.staged-plan-direction { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.staged-deck-legend { display: flex; gap: 22px; align-items: center; font-size: 11px; color: #526d7d; }
.staged-deck-legend > span { display: inline-flex; gap: 7px; align-items: center; }
.staged-deck-legend > span::before { content: ''; width: 14px; height: 3px; background: #b88a44; }
.staged-deck-legend > span:last-child::before { background: #174563; }
.staged-zone-plan .staged-zone-note { margin: 10px 0 0; color: #526d7d; font-size: 11px; line-height: 1.5; }
.staged-phase-track.has-phase-connections::before { content: none; }
.staged-phase-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.staged-phase-connections path { fill: none; stroke-linecap: butt; stroke-linejoin: round; }
.staged-phase-base { stroke: #b9d8ea; stroke-width: 2; }
.staged-phase-drawn { stroke: #287cb6; stroke-width: 3; }
.has-phase-connections .staged-phase-node { transition: border-color .25s, color .25s; }
.has-phase-connections .staged-phase-node.is-phase-reached { border-color: #287cb6; color: #174563; }
@media (max-width: 1100px) {
    .staged-phase-track.has-phase-connections { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .staged-phase-track.has-phase-connections > li { display: grid; grid-template-columns: 50px minmax(0, 1fr); min-height: 0; padding: 20px 0; column-gap: 16px; border-right: 0; border-bottom: 1px solid var(--staged-line); }
    .has-phase-connections .staged-phase-node { grid-row: 1 / 4; margin: 0; }
    .has-phase-connections small, .has-phase-connections h3, .has-phase-connections p { grid-column: 2; }
    .has-phase-connections h3 { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .staged-zone-plan *, .has-phase-connections .staged-phase-node { transition: none; } }

.sikra-courtyard-operation-button { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 5px; margin: 0; border: 1px solid #96c1db; border-radius: 6px; background: transparent; color: var(--courtyard-accent, #287cb6); cursor: pointer; }
.sikra-courtyard-operation-button > svg { display: block; width: 24px; height: 24px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sikra-courtyard-operation-button:focus-visible { outline: 2px solid #287cb6; outline-offset: 3px; }
.sikra-courtyard-operation-button:hover { border-color: #287cb6; }
.courtyard-documentation article > small { position: relative; }
.sikra-courtyard-document-icon { position: absolute; left: 0; top: 25px; width: 28px; height: 28px; overflow: visible; fill: none; stroke: #287cb6; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.sikra-courtyard-document-icon > * { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--courtyard-document-reveal, 0)); }
/* A solid concrete construction is repaired in place, one operation at a time. */
.concrete-cutaway-scroll-track { margin-top: 54px; }
.concrete-cutaway-scroll-track .concrete-renovation-repair-layout { margin-top: 0; }
.concrete-repair-cutaway.concrete-renovation-build-visual { padding: 30px; gap: 0; justify-content: flex-start; min-height: 0; }
.concrete-repair-cutaway > span { margin-bottom: 0; }
.concrete-repair-cutaway > svg { display: block; width: 100%; flex: 1; min-height: 0; overflow: visible; }
.concrete-repair-cutaway .cutaway-rebar-rib { stroke: #516b79; opacity: .7; }
.concrete-repair-cutaway .cutaway-finished-detail { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.concrete-repair-cutaway > .cutaway-step-status { color: #d9efff; font-size: 14px; font-weight: 700; line-height: 1.5; margin: 10px 0 14px; min-height: 42px; }
.concrete-repair-cutaway > .cutaway-scroll-progress { display: block; height: 3px; min-height: 0; border: 0; background: rgba(172,216,245,.2); }
.cutaway-scroll-progress > span { display: block; width: 100%; height: 100%; background: #80cdff; transform: scaleX(0); transform-origin: left; }
.concrete-repair-cutaway > .cutaway-note { color: #a8c5d9; font-size: 11px; line-height: 1.6; margin: 14px 0 0; }
.concrete-cutaway-scroll-track .concrete-renovation-repair-list h3 button { font: inherit; color: inherit; text-align: left; cursor: pointer; border: 0; background: none; padding: 0; }
.concrete-cutaway-scroll-track .concrete-renovation-repair-list h3 button:focus-visible { outline: 2px solid #328bd1; outline-offset: 5px; }
.concrete-cutaway-scroll-track .concrete-renovation-repair-list h3 { transition: color .3s ease; }
.concrete-cutaway-scroll-track .is-cutaway-current h3 { color: #267fc0; }
@media (min-width: 901px) and (min-height: 650px) {
    .concrete-cutaway-scroll-track.is-scroll-story { height: 320svh; }
    .is-scroll-story .concrete-renovation-repair-layout { position: sticky; top: 0; height: 100svh; align-items: center; padding: 28px 0; box-sizing: border-box; }
    .is-scroll-story .concrete-repair-cutaway { height: min(76svh, 640px); box-sizing: border-box; }
    .is-scroll-story .concrete-renovation-repair-list li { padding: 17px 0; }
}
@media (max-width: 900px), (max-height: 649px) {
    .concrete-cutaway-scroll-track .concrete-renovation-repair-layout { display: grid; grid-template-columns: 1fr; gap: 26px; }
    .concrete-repair-cutaway.concrete-renovation-build-visual { position: sticky; top: 12px; height: min(46svh, 390px); padding: 18px 22px; z-index: 2; box-sizing: border-box; }
    .concrete-repair-cutaway > .cutaway-note { display: none; }
    .concrete-repair-cutaway > .cutaway-step-status { min-height: 0; margin: 4px 0 10px; font-size: 12px; }
    .concrete-repair-cutaway > span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .concrete-repair-cutaway.concrete-renovation-build-visual { position: static; }
}

.concrete-renovation-protection li { align-items: flex-start; }
.concrete-renovation-protection li > svg { margin-top: 2px; }
.concrete-protection-copy { min-width: 0; }
.concrete-protection-copy strong { display: block; font-size: 16px; line-height: 1.35; }
.concrete-renovation-protection .concrete-protection-copy p {
    margin: 10px 0 0;
    color: #526174;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

/* Protection icons read as symbols, while documentation follows a quiet timeline. */
.concrete-renovation-protection li > svg {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    stroke-width: 1.6;
}
.concrete-renovation-documentation[data-concrete-renovation-documentation] {
    margin-top: 38px;
    border: 0;
}
[data-concrete-renovation-documentation] > article,
[data-concrete-renovation-documentation] > article:first-child,
[data-concrete-renovation-documentation] > article:last-child {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    min-height: 0;
    padding: 0 24px;
    border: 0;
    text-align: center;
}
[data-concrete-renovation-documentation] > article > small {
    position: relative;
    z-index: 1;
    display: block;
    padding: 0 12px;
    background: #dceefa;
    color: var(--concrete-renovation-accent, #2f86c5);
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
}
[data-concrete-renovation-documentation] > article > div { max-width: 320px; }
[data-concrete-renovation-documentation] > article h3 { margin: 0 0 10px; }
[data-concrete-renovation-documentation] > article p { margin: 0; }
[data-concrete-renovation-documentation] > article::after {
    content: '';
    position: absolute;
    top: 11px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #9fc5dc;
}
@media (max-width: 560px) {
    [data-concrete-renovation-documentation] > article,
    [data-concrete-renovation-documentation] > article:first-child,
    [data-concrete-renovation-documentation] > article:last-child {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
        gap: 18px;
        padding: 0 0 30px;
        text-align: left;
    }
    [data-concrete-renovation-documentation] > article:last-child { padding-bottom: 0; }
    [data-concrete-renovation-documentation] > article > small {
        padding: 3px 0;
        text-align: center;
    }
    [data-concrete-renovation-documentation] > article::after {
        top: 0;
        bottom: 0;
        left: 19px;
        width: 1px;
        height: auto;
    }
}

/* Assessment gestures are decorative: the questions stay visible and readable. */
[data-asphalt-underlay-assessment] > article {
    transition: background-color 200ms ease;
}
[data-asphalt-underlay-assessment] > article > svg {
    width: 22px;
    height: 22px;
    overflow: visible;
    stroke-width: 1.8;
}
[data-asphalt-underlay-assessment] > article h3 { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
    [data-asphalt-underlay-assessment] > article:hover { background-color: #dceefa; }
    [data-asphalt-underlay-assessment] > article:hover h3 { color: var(--asphalt-accent); }
}
@media (prefers-reduced-motion: reduce) {
    [data-asphalt-underlay-assessment] > article,
    [data-asphalt-underlay-assessment] > article h3 { transition: none; }
}

/* Numbers and quiet icons share a marker; only the inner grid divides the benefits. */
[data-asphalt-underlay-benefits] { border: 0; }
[data-asphalt-underlay-benefits] > article {
    border: 0;
    transition: background-color 200ms ease;
}
[data-asphalt-underlay-benefits] > article:nth-child(even) { border-left: 1px solid #9fc5dc; }
[data-asphalt-underlay-benefits] > article:nth-child(n + 3) { border-top: 1px solid #9fc5dc; }
[data-asphalt-underlay-benefits] > article > .asphalt-benefit-marker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.asphalt-benefit-marker > svg { width: 22px; height: 22px; stroke-width: 1.8; }
[data-asphalt-underlay-benefits] > article > .asphalt-benefit-accent {
    display: block;
    width: 32px;
    height: 2px;
    margin: 12px 0;
    background: var(--asphalt-accent);
    transform-origin: left center;
}
[data-asphalt-underlay-benefits] > article.has-benefit-motion > .asphalt-benefit-accent { transform: scaleX(0); }
[data-asphalt-underlay-benefits] > article.is-benefit-visible > .asphalt-benefit-accent { transform: scaleX(1); }
.asphalt-preserve-condition { margin-top: 26px; padding-left: 20px; border-left: 3px solid var(--asphalt-accent); }
.asphalt-preserve-condition > strong { display: block; color: var(--marine); font-size: 17px; line-height: 1.5; }
.asphalt-preserve-condition > small { display: block; margin-top: 10px; color: var(--body); font-size: 13px; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
    [data-asphalt-underlay-benefits] > article:hover { background: #dceefa; }
}
@media (max-width: 560px) {
    [data-asphalt-underlay-benefits] > article:nth-child(even) { border-left: 0; }
    [data-asphalt-underlay-benefits] > article:nth-child(n + 2) { border-top: 1px solid #9fc5dc; }
}
@media (prefers-reduced-motion: reduce) {
    [data-asphalt-underlay-benefits] > article { transition: none; }
    [data-asphalt-underlay-benefits] > article.has-benefit-motion > .asphalt-benefit-accent { transform: none; }
}

/* A click-controlled construction keeps the existing asphalt in place. */
.asphalt-build-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; margin-top: 48px; align-items: start; }
.asphalt-build-visual { padding: 28px; background: #103650; border: 1px solid #a4c9df33; border-radius: 8px; }
.asphalt-build-kicker { display: block; color: #9dd6fa; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.asphalt-build-visual svg { display: block; width: 100%; height: auto; margin: 12px 0 0; }
.asphalt-build-status { margin: 0; color: #d9efff; font-size: 15px; font-weight: 700; line-height: 1.5; }
.asphalt-build-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #a4c9df33; color: #a8c5d9; font-size: 12px; line-height: 1.6; }
.asphalt-build-layer, .asphalt-build-operation { opacity: 0; transform: translateY(5px); }
.asphalt-build-layer[data-visible="true"], .asphalt-build-operation[data-visible="true"] { opacity: 1; transform: none; }
.has-build-transitions .asphalt-build-layer, .has-build-transitions .asphalt-build-operation { transition: opacity 350ms ease, transform 450ms cubic-bezier(.22, 1, .36, 1); }
.has-build-transitions [data-asphalt-dust], .has-build-transitions [data-asphalt-damage] { transition: opacity 300ms ease; }
.asphalt-build-demo [data-asphalt-underlay-build] { grid-template-columns: 1fr; margin: 0; }
.asphalt-build-demo [data-asphalt-underlay-build] > li,
.asphalt-build-demo [data-asphalt-underlay-build] > li:nth-child(3n + 2),
.asphalt-build-demo [data-asphalt-underlay-build] > li:nth-child(3n) {
    position: relative;
    min-height: 0;
    padding: 18px 16px;
    grid-template-columns: 30px minmax(0, 1fr);
    border-right: 0;
    transition: background-color 200ms ease;
}
.asphalt-build-demo [data-asphalt-underlay-build] h3 { font-size: 17px; }
.asphalt-build-demo [data-asphalt-underlay-build] p { margin-top: 6px; font-size: 14px; }
.asphalt-build-demo [data-asphalt-underlay-build] h3 button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.asphalt-build-demo [data-asphalt-underlay-build] h3 button::after { content: ''; position: absolute; inset: 0; }
.asphalt-build-demo [data-asphalt-underlay-build] h3 button:focus-visible { outline: none; }
.asphalt-build-demo [data-asphalt-underlay-build] h3 button:focus-visible::after { outline: 2px solid #9dd6fa; outline-offset: -2px; }
.asphalt-build-demo [data-asphalt-underlay-build] > li.is-asphalt-build-current { background: #9dd6fa14; box-shadow: inset 3px 0 #8ad6ff; }
.asphalt-build-demo .is-asphalt-build-current h3 { color: #9dd6fa; }
@media (hover: hover) { .asphalt-build-demo [data-asphalt-underlay-build] > li:hover { background: #9dd6fa0d; } }
@media (max-width: 900px) { .asphalt-build-demo { gap: 30px; } }
@media (max-width: 700px) {
    .asphalt-build-demo { grid-template-columns: 1fr; gap: 24px; }
    .asphalt-build-visual { padding: 20px; }
    .asphalt-build-visual svg { max-width: 460px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .has-build-transitions .asphalt-build-layer, .has-build-transitions .asphalt-build-operation,
    .has-build-transitions [data-asphalt-dust], .has-build-transitions [data-asphalt-damage],
    .asphalt-build-demo [data-asphalt-underlay-build] > li { transition: none; }
}

.asphalt-build-retained { margin: 0 0 16px; color: #9dbbcf; font-size: 12px; line-height: 1.5; }
@media (max-width: 700px) and (min-height: 650px) {
    .asphalt-build-visual { position: sticky; top: 12px; z-index: 2; }
    .asphalt-build-visual svg { max-height: 180px; }
    .asphalt-build-retained { margin-bottom: 8px; }
    .asphalt-build-note { margin-top: 10px; padding-top: 10px; }
}

/* Courtyard waterproofing: one detailed illustration, quiet supporting gestures. */
[data-courtyard-waterproofing-problems] > article { transition: background-color 200ms ease; }
[data-courtyard-waterproofing-problems] svg { overflow: visible; }
@media (hover: hover) and (pointer: fine) { [data-courtyard-waterproofing-problems] > article:hover { background: #eaf4fb; } }
.courtyard-waterproofing-path header > strong { padding: 0 0 0 20px; border-top: 0; border-left: 3px solid var(--courtyard-waterproofing-accent); }
.courtyard-approach-marker { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.courtyard-approach-marker > svg { width: 22px; height: 22px; stroke-width: 1.8; }
.courtyard-approach-accent { display: block; width: 28px; height: 2px; margin: 10px 0; background: var(--courtyard-waterproofing-accent); transform-origin: left center; }
.has-courtyard-approach-motion .courtyard-approach-accent { transform: scaleX(0); }
.is-courtyard-approach-visible .courtyard-approach-accent { transform: scaleX(1); }
.courtyard-waterproofing-system-layout:has([data-courtyard-detail]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.courtyard-waterproofing-system-layout > .courtyard-detail-visual { display: block; min-height: 0; padding: 26px; background: #103650; border-radius: 8px; }
.courtyard-detail-caption { margin: 0 0 20px; }
.courtyard-detail-kicker { margin: 0 0 6px; color: #a8d9f7; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.courtyard-detail-message { max-width: 440px; margin: 0; color: #fff; font-size: 22px; font-weight: 700; line-height: 1.35; }
.courtyard-waterproofing-system-layout > .courtyard-detail-visual > svg { display: block; width: 100%; height: auto; margin: 12px 0; stroke-width: initial; }
.courtyard-detail-status { margin: 0; color: #d9efff; font-size: 15px; font-weight: 700; line-height: 1.5; }
.courtyard-detail-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #a4c9df33; color: #a8c5d9; font-size: 12px; line-height: 1.6; }
.courtyard-detail-stage { opacity: 0; }
.courtyard-detail-stage[data-visible="true"] { opacity: 1; }
.has-detail-transitions .courtyard-detail-stage { transition: opacity 350ms ease; }
.has-detail-transitions [data-courtyard-drain] { transition: transform 350ms ease; }
[data-courtyard-waterproofing-layers] > li { position: relative; transition: background-color 200ms ease; }
.courtyard-waterproofing-layer-list[data-courtyard-waterproofing-layers] > li { padding: 18px 16px; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; }
[data-courtyard-waterproofing-layers] button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
[data-courtyard-waterproofing-layers] button::after { content: ''; position: absolute; inset: 0; }
[data-courtyard-waterproofing-layers] button:focus-visible { outline: none; }
[data-courtyard-waterproofing-layers] button:focus-visible::after { outline: 2px solid #2f82bf; outline-offset: -2px; }
[data-courtyard-waterproofing-layers] > li.is-courtyard-layer-current { background: #eaf4fb; box-shadow: inset 3px 0 #2f82bf; }
[data-courtyard-waterproofing-layers] > li.is-courtyard-layer-current h3 { color: #2f82bf; }
@media (hover: hover) { [data-courtyard-waterproofing-layers] > li:hover { background: #f1f7fc; } }
.courtyard-waterproofing-documentation[data-courtyard-waterproofing-documentation] { margin-top: 42px; border: 0; }
[data-courtyard-waterproofing-documentation] > article,
[data-courtyard-waterproofing-documentation] > article:first-child {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px;
    min-height: 0; padding: 0 24px; border: 0; text-align: center;
}
[data-courtyard-waterproofing-documentation] > article > small {
    position: relative; z-index: 1; display: block; padding: 0 12px; background: #eaf4fb;
    color: var(--courtyard-waterproofing-accent); font-size: 13px; font-weight: 700; line-height: 22px;
}
[data-courtyard-waterproofing-documentation] > article > div { max-width: 320px; }
[data-courtyard-waterproofing-documentation] > article h3 { margin: 0 0 10px; }
[data-courtyard-waterproofing-documentation] > article p { margin: 0; }
[data-courtyard-waterproofing-documentation] > article::after { content: ''; position: absolute; top: 11px; left: 0; width: 100%; height: 1px; background: #9fc5dc; }
@media (max-width: 800px) {
    .courtyard-waterproofing-system-layout:has([data-courtyard-detail]) { grid-template-columns: 1fr; gap: 24px; }
    .courtyard-waterproofing-system-layout > .courtyard-detail-visual { padding: 20px; }
    .courtyard-waterproofing-system-layout > .courtyard-detail-visual > svg { max-height: 240px; }
}
@media (max-width: 800px) and (min-height: 650px) { .courtyard-detail-visual { position: sticky; top: 12px; z-index: 2; } }
@media (max-width: 680px) {
    [data-courtyard-waterproofing-documentation] > article,
    [data-courtyard-waterproofing-documentation] > article:first-child {
        display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start;
        gap: 18px; padding: 0 0 30px; text-align: left;
    }
    [data-courtyard-waterproofing-documentation] > article:last-child { padding-bottom: 0; }
    [data-courtyard-waterproofing-documentation] > article > small { padding: 3px 0; text-align: center; }
    [data-courtyard-waterproofing-documentation] > article::after { top: 0; bottom: 0; left: 19px; width: 1px; height: auto; }
    .courtyard-waterproofing-system-layout > .courtyard-detail-visual > svg { max-height: 180px; }
    .courtyard-detail-caption { margin-bottom: 14px; }
    .courtyard-detail-message { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    [data-courtyard-waterproofing-problems] > article, [data-courtyard-waterproofing-layers] > li,
    .has-detail-transitions .courtyard-detail-stage, .has-detail-transitions [data-courtyard-drain] { transition: none; }
    .has-courtyard-approach-motion .courtyard-approach-accent { transform: none; }
}

/* Slidstærke overflader: små markeringer og én samlet lagillustration. */
[data-durable-surface-problems] > article { transition: background-color 220ms ease; }
.durable-surface-selection header > strong { padding: 0 0 0 20px; border-top: 0; border-left: 3px solid var(--durable-accent); }
.durable-surface-assessment .durable-point-marker { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.durable-point-marker svg { width: 22px; height: 22px; color: var(--durable-accent); stroke-width: 1.8; }
.durable-point-accent { display: block; width: 28px; height: 2px; margin: 10px 0; background: var(--durable-accent); transform-origin: left center; }
.durable-surface-feature-list .durable-point-marker { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.durable-surface-feature-list .durable-point-accent { display: none; }
.durable-surface-media { grid-template-rows: auto; align-items: stretch; }
.durable-surface-media figure { display: flex; flex-direction: column; background: #eaf4fb; }
.durable-surface-media img { display: block; height: 440px; flex: 0 0 auto; }
.durable-surface-media figcaption { position: static; padding: 22px 24px; background: none; color: var(--marine); }
.durable-surface-media figcaption small { color: var(--durable-accent); }
.durable-build-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 48px; align-items: start; }
.durable-build-visual { min-width: 0; margin: 0; padding: 24px; background: #103650; border-radius: 8px; }
.durable-build-visual > svg { display: block; width: 100%; height: auto; max-height: 440px; overflow: visible; }
.durable-build-status { margin: 8px 0 0; color: #d9efff; font-size: 15px; font-weight: 700; line-height: 1.5; }
.durable-build-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #a4c9df33; color: #a8c5d9; font-size: 12px; line-height: 1.6; }
[data-durable-slab] .durable-slab-material { opacity: .12; }
[data-durable-slab][data-built="true"] .durable-slab-material { opacity: .28; }
[data-durable-slab][data-active="true"] .durable-slab-material { opacity: 1; }
[data-durable-slab] .durable-slab-marker { opacity: .65; }
[data-durable-slab][data-active="true"] .durable-slab-marker { opacity: 1; }
[data-durable-slab][data-active="true"] .durable-slab-marker circle { fill: #2f82bf; stroke: #d9efff; stroke-width: 2px; r: 14px; }
[data-durable-slab][data-active="true"] .durable-slab-marker path { stroke: #d9efff; stroke-width: 2px; }
[data-durable-slab][data-active="true"] .durable-slab-marker text { fill: #fff; font-size: 11px; }
[data-durable-slab][data-built="true"]:not([data-active="true"]) .durable-slab-marker { opacity: 0; }
.has-durable-build-transitions [data-durable-slab] { transition: transform 550ms cubic-bezier(.22,.8,.3,1); }
.has-durable-build-transitions .durable-slab-material { transition: opacity 350ms ease; }
.durable-build-demo > .durable-surface-layer-list { display: block; margin: 0; border-bottom: 0; }
.durable-build-demo > .durable-surface-layer-list > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; min-height: 0; padding: 18px 16px; border-left: 0; border-top: 0; border-bottom: 1px solid #9fc5dc; background: none; transition: background-color 200ms ease; }
.durable-build-demo .durable-surface-layer-list > li:last-child span { color: var(--durable-accent); }
.durable-build-demo .durable-surface-layer-list > li:last-child h3 { color: var(--marine); }
.durable-build-demo .durable-surface-layer-list > li:last-child p { color: var(--body); }
[data-durable-surface-layers] button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
[data-durable-surface-layers] button::after { content: ''; position: absolute; inset: 0; }
[data-durable-surface-layers] button:focus-visible { outline: none; }
[data-durable-surface-layers] button:focus-visible::after { outline: 2px solid #2f82bf; outline-offset: -2px; }
.durable-build-demo .durable-surface-layer-list > li.is-durable-layer-current { background: #dceefa; box-shadow: inset 3px 0 #2f82bf; }
.durable-build-demo .durable-surface-layer-list > li.is-durable-layer-current h3 { color: #2f82bf; }
@media (hover: hover) {
    [data-durable-surface-problems] > article:hover { background: #eaf4fb; }
    [data-durable-surface-problems] > article:hover h3 { color: var(--durable-accent); }
    .durable-build-demo .durable-surface-layer-list > li:not(.is-durable-layer-current):hover { background: #e0eef7; }
}
@media (max-width: 1000px) { .durable-surface-media img { height: 360px; } }
@media (max-width: 800px) {
    .durable-build-demo { grid-template-columns: 1fr; gap: 24px; }
    .durable-build-visual { padding: 20px; }
    .durable-build-visual > svg { max-height: 240px; }
}
@media (max-width: 800px) and (min-height: 650px) { .durable-build-visual { position: sticky; top: 12px; z-index: 2; } }
@media (max-width: 680px) {
    .durable-surface-media { grid-template-rows: auto; }
    .durable-surface-media img { height: 300px; }
    .durable-surface-media figcaption { padding: 18px 20px; }
    .durable-build-visual > svg { max-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    [data-durable-surface-problems] > article, .has-durable-build-transitions [data-durable-slab], .has-durable-build-transitions .durable-slab-material,
    .durable-build-demo .durable-surface-layer-list > li { transition: none; }
}

.durable-build-detail { margin: 6px 0 0; color: #c0d8e7; font-size: 13px; line-height: 1.5; }

.durable-slab-operation { opacity: 0; pointer-events: none; }
[data-durable-slab][data-active="true"] .durable-slab-operation { opacity: 1; }

/* Tagmembraner: detaljer, dokumentation og én interaktiv tagillustration. */
[data-roof-membrane-problems] > article { transition: background-color 220ms ease; }
.roof-membrane-assessment header > strong { padding: 0 0 0 20px; border-top: 0; border-left: 3px solid var(--roof-accent); }
.roof-assessment-marker { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.roof-assessment-marker svg { width: 22px; height: 22px; color: var(--roof-accent-strong); stroke-width: 1.8; }
.roof-assessment-accent { display: block; width: 28px; height: 2px; margin: 10px 0; background: var(--roof-accent); transform-origin: left center; }
.roof-membrane-media figure { display: flex; flex-direction: column; min-height: 0; background: #eaf4fb; }
.roof-membrane-media img { display: block; height: 420px; min-height: 0; flex: 0 0 auto; }
.roof-membrane-media figcaption { position: static; padding: 22px 24px; background: none; color: #123b5d; }
.roof-membrane-media figcaption small { color: var(--roof-accent-strong); }
.roof-detail-demo { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; margin-top: 48px; }
.roof-detail-visual { margin: 0; padding: 24px; min-width: 0; background: #103650; border-radius: 8px; }
.roof-detail-visual > svg { display: block; width: 100%; max-width: 780px; max-height: 480px; height: auto; margin: 0 auto; }
.roof-detail-caption { width: 100%; max-width: 760px; margin: 28px auto 0; padding: 0 20px; min-height: 156px; text-align: center; }
.roof-detail-caption::before { content: ""; display: block; width: 32px; height: 2px; margin: 0 auto 16px; background: var(--roof-accent); }
.roof-detail-status { margin: 0; color: #123b5d; font-size: 21px; font-weight: 700; line-height: 1.5; }
.roof-detail-copy { margin: 10px 0 0; color: var(--body); font-size: 17px; line-height: 1.5; }
.roof-detail-note { max-width: 620px; margin: 20px auto 0; padding-top: 0; border-top: 0; color: var(--body); font-size: 12px; line-height: 1.6; }
.roof-detail-stage { opacity: 0; }
.roof-detail-stage[data-visible="true"] { opacity: 1; }
[data-roof-layer][data-visible="true"][data-current="false"] { opacity: .25; }
.has-roof-detail-transitions .roof-detail-stage { transition: opacity 350ms ease; }
.has-roof-detail-transitions [data-roof-drain], .has-roof-detail-transitions .roof-pipe-detail { transition: transform 350ms ease; }
.roof-detail-demo > .roof-membrane-layer-list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 20px 0 0; border: 0; }
.roof-detail-demo > .roof-membrane-layer-list > li { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 96px; padding: 16px 18px; border: 0; border-bottom: 1px solid #aecfe2; transition: background-color 200ms ease; }
.roof-detail-demo .roof-membrane-layer-list h3 { margin: 0; font-size: 16px; line-height: 1.4; }
[data-roof-membrane-layers] button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
[data-roof-membrane-layers] button::after { content: ''; position: absolute; inset: 0; }
[data-roof-membrane-layers] button:focus-visible { outline: none; }
[data-roof-membrane-layers] button:focus-visible::after { outline: 2px solid #2f82bf; outline-offset: -2px; }
.roof-detail-demo .roof-membrane-layer-list > li.is-roof-layer-current { background: #dceefa; box-shadow: inset 0 -3px #2f82bf; }
.roof-detail-demo .roof-membrane-layer-list > li.is-roof-layer-current h3 { color: #2f82bf; }
[data-roof-membrane-documentation] { margin-top: 42px; border: 0; }
[data-roof-membrane-documentation] > article,
[data-roof-membrane-documentation] > article:first-child { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 0; padding: 0 24px; border: 0; text-align: center; }
[data-roof-membrane-documentation] > article > small { position: relative; z-index: 1; display: block; padding: 0 12px; background: #eaf4fb; color: var(--roof-accent-strong); font-size: 13px; font-weight: 700; line-height: 22px; }
[data-roof-membrane-documentation] > article > div { max-width: 320px; }
[data-roof-membrane-documentation] > article h3 { margin: 0 0 10px; }
[data-roof-membrane-documentation] > article p { margin: 0; }
[data-roof-membrane-documentation] > article::after { content: ''; position: absolute; top: 11px; left: 0; width: 100%; height: 1px; background: #9fc5dc; }
@media (hover: hover) {
    [data-roof-membrane-problems] > article:hover { background: #eaf4fb; }
    [data-roof-membrane-problems] > article:hover h3 { color: var(--roof-accent-strong); }
    .roof-detail-demo .roof-membrane-layer-list > li:not(.is-roof-layer-current):hover { background: #eef6fb; }
}
@media (max-width: 1000px) { .roof-membrane-media img { height: 340px; } }
@media (max-width: 800px) {
    .roof-detail-demo > .roof-membrane-layer-list { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; }
    .roof-detail-demo > .roof-membrane-layer-list > li { flex: 0 0 170px; scroll-snap-align: start; min-height: 98px; }
    .roof-detail-visual { padding: 20px; }
    .roof-detail-visual > svg { max-height: 230px; }
}

@media (max-width: 680px) {
    .roof-membrane-media img { height: 300px; }
    .roof-membrane-media figcaption { padding: 18px 20px; }
    .roof-detail-visual > svg { max-height: 230px; }
    [data-roof-membrane-documentation] { grid-template-columns: 1fr; }
    [data-roof-membrane-documentation] > article,
    [data-roof-membrane-documentation] > article:first-child { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 18px; align-items: start; padding: 0 0 30px; text-align: left; }
    [data-roof-membrane-documentation] > article:last-child { padding-bottom: 0; }
    [data-roof-membrane-documentation] > article > small { padding: 3px 0; text-align: center; }
    [data-roof-membrane-documentation] > article::after { top: 0; bottom: 0; left: 19px; width: 1px; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
    [data-roof-membrane-problems] > article, .has-roof-detail-transitions .roof-detail-stage,
    .has-roof-detail-transitions [data-roof-drain], .has-roof-detail-transitions .roof-pipe-detail, .roof-detail-demo .roof-membrane-layer-list > li { transition: none; }
}

[data-roof-layer="3"][data-visible="true"][data-current="false"] { opacity: .65; }


.roof-drawing-labels { font-family: inherit; font-size: 12px; font-weight: 600; }
.roof-drawing-labels path { fill: none; stroke: #85b7d4; stroke-width: 1; }
.roof-drawing-labels circle { fill: #a8d9f7; }
.roof-drawing-labels text { fill: #b8d6e8; }
.roof-drawing-labels [data-emphasized="true"] path { stroke: #d6efff; stroke-width: 1.5; }
.roof-drawing-labels [data-emphasized="true"] text { fill: #fff; font-weight: 700; }
.roof-drawing-labels [data-emphasized="true"] circle { fill: #fff; }
@media (max-width: 680px) { .roof-drawing-labels { font-size: 22px; } }

.roof-drawing-labels > g { opacity: 0; }
.roof-drawing-labels > g[data-visible="true"] { opacity: 1; }
.has-roof-detail-transitions .roof-drawing-labels > g { transition: opacity 200ms ease; }
@media (prefers-reduced-motion: reduce) { .has-roof-detail-transitions .roof-drawing-labels > g { transition: none; } }

@media (max-width: 680px) { .roof-detail-caption { margin-top: 22px; padding: 0 8px; min-height: 184px; } .roof-detail-status { font-size: 19px; } .roof-detail-copy { font-size: 15px; } }

/* Roof renovation: preserve the existing construction, repair locally, renew above it. */
.flat-roof-renovation-problem-grid article { transition: background-color .25s; }
.flat-roof-renovation-problem-grid article:hover { background: #edf7fc; }
.flat-roof-renovation-problem-grid article svg,
.flat-roof-renovation-benefit-list h3 svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--flat-roof-accent); }
.flat-roof-renovation-benefit-list h3 { display: flex; align-items: center; gap: 14px; }
.flat-roof-renovation-benefit-list li > span::after { content: ''; display: block; width: 22px; height: 2px; margin-top: 12px; background: var(--flat-roof-accent); }
.flat-roof-renovation-benefits header > strong { padding: 16px 0 16px 20px; border-left: 3px solid var(--flat-roof-accent); }
.renovation-demo { margin-top: 48px; }
.renovation-visual { margin: 0; background: #10364d; border-radius: 8px; display: grid; place-items: center; overflow: hidden; padding: 20px; }
.renovation-visual svg { display: block; width: 100%; max-width: 900px; max-height: 500px; }
[data-renovation-stage] { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
[data-renovation-stage][data-visible="true"] { opacity: 1; }
.renovation-label { font: 600 13px 'Inter', sans-serif; fill: #d5edf9; }
.renovation-label path { fill: none; stroke: #92cceb; stroke-width: 1.2; }
.renovation-label circle { fill: #a7def7; }
.renovation-choices { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-bottom: 1px solid #aecfe2; }
.renovation-choices button { position: relative; display: flex; justify-content: center; align-items: center; gap: 16px; min-height: 84px; border: 0; border-right: 1px solid #aecfe2; background: transparent; color: #163e5a; font: inherit; font-size: 21px; font-weight: 750; cursor: pointer; transition: background .2s; }
.renovation-choices button:last-child { border-right: 0; }
.renovation-choices button span { color: #3087bc; font-size: 12px; }
.renovation-choices button:hover { background: #eff8fd; }
.renovation-choices button[aria-pressed="true"] { background: #dcedf8; color: #277fad; }
.renovation-choices button[aria-pressed="true"]::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: #3087bc; }
.renovation-choices button:focus-visible { outline: 2px solid #3087bc; outline-offset: -5px; }
.renovation-caption { max-width: 760px; min-height: 172px; margin: 28px auto 0; text-align: center; padding: 0 16px; }
.renovation-caption h3 { font-size: 23px; }
.renovation-caption p { margin: 12px 0 18px; }
.renovation-caption small { display: block; color: #667784; font-size: 12px; line-height: 1.6; }
.flat-roof-renovation-media { margin-top: 34px; }
.flat-roof-renovation-media figure { background: transparent; min-height: 0; border-radius: 0; overflow: visible; }
.flat-roof-renovation-media img { display: block; height: 360px; min-height: 0; border-radius: 6px; }
.flat-roof-renovation-media figcaption { position: static; padding: 20px 0 0; color: #163e5a; background: transparent; }
.flat-roof-renovation-media figcaption small { color: #3087bc; }
.flat-roof-renovation-documentation { position: relative; border: 0; gap: 0; }
.flat-roof-renovation-documentation::before { content: ''; position: absolute; top: 0; left: 16.666%; right: 16.666%; height: 1px; background: #98c4de; }
.flat-roof-renovation-documentation article { position: relative; min-height: 0; padding: 30px 16px 0; border: 0; text-align: center; }
.flat-roof-renovation-documentation article::before { content: ''; position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #3087bc; }
.flat-roof-renovation-documentation article small { display: block; color: #3087bc; }
.flat-roof-renovation-documentation h3 { margin: 10px 0; }
@media (max-width: 680px) {
    .renovation-visual { padding: 12px 0; }
    .renovation-label { font-size: 18px; }
    .renovation-choices button { min-height: 70px; font-size: 16px; gap: 9px; }
    .renovation-caption { min-height: 184px; }
    .renovation-caption h3 { font-size: 20px; }
    .renovation-caption p { font-size: 15px; }
    .flat-roof-renovation-media img { height: 260px; }
    .flat-roof-renovation-documentation { grid-template-columns: 1fr; gap: 0; }
    .flat-roof-renovation-documentation::before { top: 5px; bottom: 32px; left: 5px; right: auto; width: 1px; height: auto; }
    .flat-roof-renovation-documentation article { padding: 0 0 28px 32px; text-align: left; }
    .flat-roof-renovation-documentation article::before { top: 5px; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    [data-renovation-stage], .renovation-choices button, .flat-roof-renovation-problem-grid article { transition: none; }
}

/* Renovation plan: the intervention is shown on one consistent roof footprint. */
.renovation-visual { display: block; padding: 24px 28px 20px; background: #f1f6f9; border: 1px solid #c7dbe8; }
.renovation-plan-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: #456b85; font-size: 12px; }
.renovation-plan-heading > span:first-child { font-weight: 700; }
.renovation-plan-heading > span:last-child { font-weight: 600; color: #287cb6; }
.renovation-visual svg { margin: 4px auto 0; max-width: 900px; max-height: 440px; }
.renovation-visual .renovation-label { fill: #456b85; font-size: 13px; }
.renovation-visual .renovation-label path { stroke: #779bb2; }
.renovation-visual .renovation-label circle { fill: #456b85; }
.renovation-plan-legend { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; color: #456b85; font-size: 12px; }
.renovation-plan-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.renovation-plan-legend i { display: block; width: 12px; height: 12px; border: 1px solid #6f9d8d; background: #a8cec0; border-radius: 2px; }
.renovation-plan-legend .renovation-legend-context { background: #e8eff3; border-color: #b7c9d3; }
[data-renovation-selected="2"] [data-renovation-legend-swatch] { background: #edd1a6; border-color: #b47a37; }
[data-renovation-selected="3"] [data-renovation-legend-swatch] { background: #80bde0; border-color: #287cb6; }
[data-renovation-selected="3"] .renovation-legend-context { background: #547991; border-color: #456e89; }
[data-renovation-stage="3"][data-visible="true"] .renovation-membrane-fill { animation: renovation-membrane-spread .75s cubic-bezier(.22,.61,.36,1) both; }
[data-renovation-stage="2"][data-visible="true"] .renovation-repair-fields { animation: renovation-repair-reveal .4s ease-out both; }
[data-renovation-stage="2"][data-visible="true"] .renovation-repair-checks { animation: renovation-repair-reveal .35s .25s ease-out both; }
@keyframes renovation-membrane-spread { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes renovation-repair-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 680px) {
    .renovation-visual { padding: 16px 8px; }
    .renovation-plan-heading { padding: 0 8px; font-size: 11px; }
    .renovation-visual svg { margin: 14px auto; }
    .renovation-visual .renovation-label { font-size: 17px; }
    .renovation-plan-legend { gap: 10px 16px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .renovation-membrane-fill, .renovation-repair-fields, .renovation-repair-checks { animation: none !important; }
}

/* Home process accents share the circle and copy's center axis. */
.home-page .service-process-section .service-process-list > li > span::after {
    left: calc(50% - 12px);
    transform-origin: center;
}

/* Durable surface: scroll through the same five selectable construction steps. */
.durable-build-scroll-track { margin-top: 48px; }
.durable-build-scroll-track .durable-build-demo { margin-top: 0; }
.durable-build-scroll-progress { height: 3px; margin-top: 16px; background: #a4c9df33; }
.durable-build-scroll-progress > span { display: block; height: 100%; background: #80cdff; transform: scaleX(0); transform-origin: left; }
@media (min-width: 901px) and (min-height: 650px) {
    .durable-build-scroll-track.is-durable-scroll-story { height: 340svh; }
    .is-durable-scroll-story .durable-build-demo { position: sticky; top: var(--durable-sticky-top, 0px); height: calc(100svh - var(--durable-sticky-top, 0px)); align-items: center; padding-block: 24px; box-sizing: border-box; }
    .is-durable-scroll-story .durable-build-visual { display: flex; flex-direction: column; height: min(78svh, 680px); max-height: calc(100svh - var(--durable-sticky-top, 0px) - 48px); box-sizing: border-box; }
    .is-durable-scroll-story .durable-build-visual > svg { flex: 1; min-height: 0; max-height: none; }
    .is-durable-scroll-story .durable-surface-layer-list > li { padding-block: 15px; }
}
@media (max-width: 900px), (max-height: 649px) {
    .is-durable-scroll-enabled .durable-build-demo { grid-template-columns: 1fr; gap: 24px; }
    .is-durable-scroll-enabled .durable-build-visual { position: sticky; top: calc(var(--durable-sticky-top, 0px) + 12px); display: flex; flex-direction: column; height: min(46svh, 390px); padding: 16px 20px; box-sizing: border-box; z-index: 2; }
    .is-durable-scroll-enabled .durable-build-visual > svg { flex: 1; min-height: 0; max-height: none; }
    .is-durable-scroll-enabled .durable-build-note { display: none; }
    .is-durable-scroll-enabled .durable-build-status { margin-top: 4px; font-size: 12px; }
    .is-durable-scroll-enabled .durable-build-detail { font-size: 12px; margin-top: 6px; }
    .is-durable-scroll-enabled .durable-build-scroll-progress { margin-top: 10px; }
}

/* Existing felt: small graphic examples integrated into the content. */
.existing-roof-felt-problem-list article { transition: background-color .2s ease; }
.existing-roof-felt-problem-list article > div { position: relative; min-width: 0; }
.existing-roof-felt-problem-list h3 { padding-right: 86px; }
.existing-roof-felt-problem-list .roof-felt-sample { position: absolute; top: 0; right: 0; width: 68px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; overflow: visible; }
.existing-roof-felt-problem-list .roof-felt-sample path,
.existing-roof-felt-problem-list .roof-felt-sample circle,
.existing-roof-felt-problem-list .roof-felt-sample ellipse { transform-box: fill-box; transform-origin: center; }
.existing-roof-felt-problem-list article:hover { background: #f3f9fc; }
.existing-roof-felt-benefit-list li > span::after { content: ''; display: block; width: 22px; height: 2px; margin-top: 10px; background: #7dbde3; }
.existing-roof-felt-media { grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); align-items: start; gap: 32px; margin-top: 42px; }
.existing-roof-felt-media figure { min-height: 0; overflow: visible; border-radius: 0; background: transparent; }
.existing-roof-felt-media figure:first-child { padding-top: 38px; }
.existing-roof-felt-media img { display: block; height: 380px; min-height: 0; border-radius: 6px; }
.existing-roof-felt-media figure:first-child img { height: 310px; }
.existing-roof-felt-media figcaption { position: static; padding: 20px 0 0; background: transparent; color: #174563; }
.existing-roof-felt-media figcaption small { color: #287cb6; }
.roof-felt-document-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.roof-felt-document { width: 32px; height: 36px; fill: #ffffff66; stroke: #6896b4; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.roof-felt-document-check { fill: none; stroke: #287cb6; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.has-felt-reveal .roof-felt-document-check { stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease .15s; }
.is-felt-visible .roof-felt-document-check { stroke-dashoffset: 0; }
.existing-roof-felt-documentation h3 { margin-top: 0; }
@media (max-width: 680px) {
    .existing-roof-felt-problem-list h3 { padding-right: 0; }
    .existing-roof-felt-problem-list .roof-felt-sample { position: static; display: block; margin: 10px 0; }
    .existing-roof-felt-media { grid-template-columns: 1fr; gap: 32px; }
    .existing-roof-felt-media figure:first-child { padding-top: 0; }
    .existing-roof-felt-media img, .existing-roof-felt-media figure:first-child img { height: 260px; }
}
/* One visual example per assessment row, with the number retained. */
.existing-roof-felt-problem-list article { grid-template-columns: 38px minmax(0, 1fr); }

/* Six existing steps carry the drawings; no separate system panel. */
.roof-felt-build-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 72px; }
.roof-felt-build-heading > span { color: var(--roof-felt-accent); font-size: 11px; font-weight: 900; }
.roof-felt-build-drawing { display: block; width: 168px; height: 72px; flex: 0 1 168px; min-width: 0; overflow: visible; }
.existing-roof-felt-build-list h3 { margin-top: 14px; }
.existing-roof-felt-build-list li { transition: background-color .2s ease; }
@media (hover: hover) { .existing-roof-felt-build-list li:hover { background: #f3f9fc; } }
@media (max-width: 680px) { .roof-felt-build-drawing { width: 144px; height: 61px; flex-basis: 144px; } .roof-felt-build-heading { min-height: 61px; } }
@media (prefers-reduced-motion: reduce) { .roof-felt-document-check { stroke-dashoffset: 0 !important; transition: none !important; } }

/* Rodfast: a connected section with one quiet entrance animation. */
.root-resistant-layers-layout { display: block; }
.root-resistant-layers header { position: static; padding: 0; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); column-gap: 80px; }
.root-resistant-layers header .eyebrow, .root-resistant-layers header h2 { grid-column: 1; }
.root-resistant-layers header > p { grid-column: 2; grid-row: 1 / 3; align-self: end; max-width: 490px; margin: 0; }
.root-roof-system { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,.95fr); gap: 38px; align-items: center; margin-top: 46px; }
.root-roof-section { min-width: 0; margin: 0; }
.root-roof-section > svg { display: block; width: 100%; height: auto; overflow: visible; }
.root-roof-section figcaption { margin: 16px 34px 0; color: #afcbdc; font-size: 12px; line-height: 1.6; }
.root-roof-system .root-resistant-layer-stack { gap: 0; }
.root-roof-system .root-resistant-layer-stack li { grid-template-columns: 28px minmax(0,1fr); gap: 16px; min-height: 82px; padding: 16px 0; border-left: 0; border-bottom: 1px solid #ffffff24; background: transparent; }
.root-roof-system .root-resistant-layer-stack li:last-child { border-bottom: 0; }
.root-roof-system .root-resistant-layer-stack li > span { color: #9cd2ef; font-size: 12px; font-weight: 800; }
.root-roof-system .root-resistant-layer-stack h3 { color: #f1f7fb; font-size: 17px; }
.root-roof-system .root-resistant-layer-stack p { color: #bad0df; font-size: 13px; }
.root-roof-system .root-resistant-layer-stack li.is-root-layer-current { margin-inline: -16px; padding-inline: 16px; border-left: 3px solid #70c5ec; background: #ffffff08; }
.root-resistant-risk-grid article { transition: background-color .2s ease; }
.root-resistant-risk-grid article > div span::after { content: ''; display: block; width: 24px; height: 2px; margin-top: 10px; background: #89c4e6; }
.root-resistant-risk-grid h3 { margin-top: 38px; }
.root-resistant-risk-grid svg { transform-origin: center; }
@media (hover: hover) { .root-resistant-risk-grid article:hover { background: #f2f8fc; } }
@media (max-width: 1080px) {
    .root-roof-system { grid-template-columns: minmax(0,1.4fr) minmax(270px,1fr); gap: 24px; }
    .root-resistant-layers header { column-gap: 40px; }
}
@media (max-width: 760px) {
    .root-resistant-layers header { display: block; }
    .root-resistant-layers header > p { margin-top: 22px; }
    .root-roof-system { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
    .root-roof-section figcaption { margin: 12px 0 0; }
    .root-roof-system .root-resistant-layer-stack li { min-height: 0; padding-block: 18px; }
    .root-roof-system .root-resistant-layer-stack li.is-root-layer-current { margin-inline: 0; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .root-roof-roots path, .root-roof-water { stroke-dashoffset: 0 !important; }
}

/* The planted roof stays connected while scrolling isolates each layer. */
.root-roof-scroll-track { margin-top: 46px; }
.root-roof-scroll-track .root-roof-system { margin-top: 0; }
.root-roof-section [data-root-layer] { transition: opacity .35s ease; }
.root-roof-section [data-root-layer][data-active="false"] { opacity: .16; }
.root-roof-section [data-root-layer][data-active="true"] { opacity: 1; }
.root-roof-section [data-root-callout] { transition: opacity .25s ease; }
.root-roof-section [data-root-callout][data-active="false"] { opacity: .35; }
.root-roof-section [data-root-callout][data-active="true"] { stroke: #d5efff; stroke-width: 2; }
.root-roof-section [data-root-bubble] { transition: opacity .25s ease; }
.root-roof-section [data-root-bubble][data-active="false"] { opacity: .4; }
.root-roof-section [data-root-bubble][data-active="true"] circle { fill: #318dc3; stroke: #c3eaff; stroke-width: 2; }
.root-roof-system h3 > button { appearance: none; display: block; width: 100%; margin: -8px 0; padding: 8px 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.root-roof-system h3 > button:focus-visible { outline: 2px solid #9ed9fa; outline-offset: 5px; border-radius: 2px; }
.root-roof-section figcaption { display: grid; gap: 6px; }
.root-roof-section figcaption > strong { font-size: 15px; color: #e0f0fa; }
.root-roof-scroll-hint { color: #c4dbe9; }
.root-roof-progress { height: 2px; margin: 16px 34px 0; background: #abcde333; }
.root-roof-progress > span { display: block; height: 100%; background: #85d1f5; transform: scaleX(0); transform-origin: left; }
@media (min-width: 901px) and (min-height: 650px) {
    .root-roof-scroll-track.is-root-scroll-story { height: 360svh; }
    .is-root-scroll-story .root-roof-system { position: sticky; top: var(--root-sticky-top,0px); height: calc(100svh - var(--root-sticky-top,0px)); padding-block: 24px; align-items: center; }
    .is-root-scroll-story .root-roof-section { display: flex; flex-direction: column; height: min(80svh,710px); max-height: calc(100svh - var(--root-sticky-top,0px) - 48px); }
    .is-root-scroll-story .root-roof-section > svg { flex: 1; min-height: 0; }
    .is-root-scroll-story .root-resistant-layer-stack li { min-height: 0; padding-block: 14px; }
}
@media (max-width: 900px), (max-height: 649px) {
    .is-root-scroll-enabled .root-roof-system { grid-template-columns: 1fr; gap: 24px; }
    .is-root-scroll-enabled .root-roof-section { position: sticky; top: calc(var(--root-sticky-top,0px) + 8px); display: flex; flex-direction: column; height: min(46svh,400px); padding-block: 8px 12px; background: var(--root-navy); z-index: 2; }
    .is-root-scroll-enabled .root-roof-section > svg { flex: 1; min-height: 0; }
    .is-root-scroll-enabled .root-roof-section figcaption { margin: 8px 0 0; }
    .is-root-scroll-enabled .root-roof-section figcaption > span:last-child { display: none; }
    .is-root-scroll-enabled .root-roof-section figcaption > strong { font-size: 13px; }
    .is-root-scroll-enabled .root-roof-scroll-hint { font-size: 11px; }
    .is-root-scroll-enabled .root-roof-progress { margin: 6px 0 0; }
    .is-root-scroll-enabled .root-resistant-layer-stack li.is-root-layer-current { margin-inline: 0; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .root-roof-section [data-root-layer], .root-roof-section [data-root-callout], .root-roof-section [data-root-bubble] { transition: none; }
}

/* Four small documentation motifs, without a selected card treatment. */
.root-resistant-documentation article { grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr; gap: 12px; }
.root-document-mark { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; }
.root-document-motif { flex: 0 0 40px; width: 40px; height: 32px; fill: none; stroke: #3984b6; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

.root-resistant-planning-copy h3 { display: flex; align-items: flex-start; gap: 12px; }
.root-planning-icon { display: block; flex: 0 0 22px; width: 22px; height: 22px; color: var(--root-blue); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* Grønne tage: small examples and material samples within the existing content. */
.green-roof-example-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 36px; }
.green-roof-example, .green-roof-material { display: block; width: 80px; height: 36px; flex: 0 1 80px; min-width: 0; overflow: visible; }
.green-roof-planning-rail h3 { margin-top: 28px; }
.green-roof-layer-sequence h3 { margin-top: 24px; }
.green-roof-layer-sequence li { transition: background-color .2s ease; }
@media (hover: hover) { .green-roof-layer-sequence li:hover { background: #f1f7fb; } }
.green-roof-doc-check { display: block; width: 20px; height: 20px; margin-top: 12px; fill: none; stroke: #328bc3; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.green-roof-doc-check path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.has-green-doc-reveal .green-roof-doc-check path { stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease; }
.is-green-doc-visible .green-roof-doc-check path { stroke-dashoffset: 0; }
@media (max-width: 720px) {
    .green-roof-planning-rail h3, .green-roof-layer-sequence h3 { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .green-roof-doc-check path { stroke-dashoffset: 0 !important; transition: none !important; }
    .green-roof-layer-sequence li { transition: none; }
}

/* Project drawing and material section share exactly the same geometry. */
.fire-roof-assembly-layout { display: block; }
.fire-roof-assembly-layout > header { position: static; padding: 0; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); column-gap: 80px; align-items: end; margin-bottom: 48px; }
.fire-roof-assembly-layout > header .eyebrow { grid-column: 1 / -1; }
.fire-roof-assembly-layout > header > p { margin: 0; }
.fire-roof-system { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 40px; align-items: start; }
.fire-roof-comparison { margin: 0; padding: 22px 18px 20px; background: #103850; border: 1px solid #41657d; border-radius: 8px; min-width: 0; position: relative; }
.fire-comparison-labels { display: flex; justify-content: space-between; gap: 16px; padding-inline: 12px; color: #cce8f7; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.fire-comparison-stage { position: relative; margin-block: 16px; touch-action: pan-y; cursor: ew-resize; overflow: hidden; }
.fire-comparison-svg { display: block; width: 100%; height: auto; }
.fire-comparison-material { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--fire-split)); background: #103850; pointer-events: none; }
.fire-comparison-divider { position: absolute; top: 0; bottom: 0; left: var(--fire-split); width: 1px; background: #c4e6f6; pointer-events: none; }
.fire-comparison-divider > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #2f86b9; border: 2px solid #d7edf7; color: #fff; font: 700 20px/1 Arial,sans-serif; box-shadow: 0 2px 12px #06283d66; }
.fire-comparison-divider:focus-visible { outline: none; }
.fire-comparison-divider:focus-visible > span { outline: 3px solid #fff; outline-offset: 4px; }
.fire-roof-comparison figcaption { margin: 14px 12px 0; color: #a6c6d7; font-size: 12px; line-height: 1.6; }
.fire-roof-system .fire-roof-specification { border: 0; border-top: 1px solid #45667d; }
.fire-roof-system .fire-roof-specification-head { display: none; }
.fire-roof-system .fire-roof-specification li { grid-template-columns: 32px minmax(0,1fr); gap: 6px 12px; padding: 17px 10px; min-height: 0; }
.fire-roof-system .fire-roof-specification li > span { grid-row: 1 / 3; align-self: start; margin-top: 3px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #719eb7; border-radius: 50%; font-size: 10px; }
.fire-roof-system .fire-roof-specification h3 { font-size: 17px; }
.fire-roof-system .fire-roof-specification p { grid-column: 2; }
@media (max-width: 960px) {
    .fire-roof-assembly-layout > header { grid-template-columns: 1fr; gap: 0; }
    .fire-roof-assembly-layout > header > p { margin-top: 24px; }
    .fire-roof-system { grid-template-columns: 1fr; gap: 30px; }
    .fire-roof-comparison { position: relative; top: auto; }
}
@media (max-width: 540px) {
    .fire-roof-comparison { padding: 18px 8px; }
    .fire-comparison-labels { font-size: 11px; padding-inline: 8px; }
    .fire-comparison-divider > span { width: 28px; height: 28px; font-size: 16px; }
    .fire-roof-comparison figcaption { margin-inline: 8px; }
}

/* Quiet technical details around the roof comparison. */
.fire-roof-dependency-grid .fire-dependency-motif { width: 80px; height: 48px; flex: 0 0 80px; fill: none; stroke: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.fire-motif-detail { stroke-width: 1.7; }
.fire-roof-dependency-grid article:hover .fire-motif-detail { animation: fire-detail-draw .65s ease-out both; }
@keyframes fire-detail-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.fire-roof-assessment-copy h3 { display: flex; align-items: center; gap: 11px; }
.fire-assessment-icon { display: block; width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: #2f86c5; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fire-document-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.fire-document-motif { width: 48px; height: 40px; flex: 0 0 48px; fill: none; stroke: #2f86c5; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fire-roof-documentation h3 { margin-top: 24px; }
.fire-document-detail { stroke-dasharray: 1; stroke-dashoffset: 0; }
.has-fire-document-reveal .fire-document-detail { stroke-dashoffset: 1; transition: stroke-dashoffset .7s ease-out var(--fire-document-delay,0ms); }
.has-fire-document-reveal.is-fire-document-visible .fire-document-detail { stroke-dashoffset: 0; }
.fire-roof-page .service-process-list > li { column-gap: 14px; }
.fire-roof-page .service-process-list h3 { margin-bottom: 10px; }
.fire-roof-page .service-process-list > li > span::after { width: 22px; }
@media (prefers-reduced-motion: reduce) {
    .fire-roof-dependency-grid article:hover .fire-motif-detail { animation: none; }
    .has-fire-document-reveal .fire-document-detail { stroke-dashoffset: 0; transition: none; }
}

/* Industrial floors: material samples and one functional floor study. */
.industrial-load-icon { position: relative; display: block; width: 32px; height: 32px; }
.industrial-load-icon > svg:not(.industrial-load-detail) { width: 23px; height: 23px; stroke: #2f86c5; stroke-width: 1.8; }
.industrial-load-detail { position: absolute; width: 32px; height: 12px; top: 25px; left: -4px; fill: none; stroke: #6fb6da; stroke-width: 1.4; stroke-linecap: round; opacity: .25; }
.industrial-floor-load-list article:hover .industrial-load-detail { opacity: 1; }
.industrial-floor-load-list article:hover .industrial-load-detail path { animation: industrial-line .65s ease-out both; }
@keyframes industrial-line { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.industrial-floor-motif { display: block; width: 80px; height: 48px; flex: 0 0 80px; }
.industrial-floor-requirement-grid .industrial-equipment-motif { width: 112px; height: 100px; flex-basis: 112px; }
.industrial-motif-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; color: #2f86c5; }
.industrial-floor-requirement-grid li > .industrial-motif-heading { display: flex; min-height: 100px; margin-bottom: 26px; }
.industrial-floor-build-grid li { display: block; min-height: 174px; }
.industrial-floor-build-grid .industrial-motif-heading { margin-bottom: 18px; }
.industrial-floor-solutions-layout { display: block; }
.industrial-floor-solutions-layout > header { position: static; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 0 80px; align-items: end; margin-bottom: 44px; }
.industrial-floor-solutions-layout > header .eyebrow { grid-column: 1 / -1; }
.industrial-floor-solutions-layout > header > p { margin: 0; }
.industrial-floor-function-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 40px; align-items: start; }
.industrial-floor-sample { margin: 0; min-width: 0; background: #123e59; border-radius: 8px; overflow: hidden; }
.industrial-floor-sample > svg { display: block; width: 100%; height: auto; }
.industrial-floor-sample figcaption { margin: 0 28px; padding: 20px 0 24px; border-top: 1px solid #476f87; }
.industrial-floor-sample figcaption strong { display: block; color: #e3f1f8; font-size: 18px; margin-bottom: 10px; }
.industrial-floor-sample figcaption span { display: block; color: #b6d2e1; font-size: 13px; line-height: 1.6; }
.industrial-sample-state { display: none; }
[data-floor-function="0"] [data-floor-state="0"], [data-floor-function="1"] [data-floor-state="1"], [data-floor-function="2"] [data-floor-state="2"], [data-floor-function="3"] [data-floor-state="3"], [data-floor-function="4"] [data-floor-state="4"] { display: inline; }
.industrial-floor-solution-list article { padding: 22px 12px; gap: 14px; border-left: 3px solid transparent; cursor: pointer; transition: background .2s, border-color .2s; }
.industrial-floor-solution-list article.is-industrial-selected { background: #deeff8; border-left-color: #2f86c5; }
.industrial-floor-solution-list article:hover { background: #e6f2f8; }
.industrial-floor-solution-list button { appearance: none; border: 0; background: transparent; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.industrial-floor-solution-list button:focus-visible { outline: 2px solid #2f86c5; outline-offset: 5px; border-radius: 2px; }
.industrial-floor-solution-list article > svg { width: 23px; height: 23px; color: #2f86c5; stroke-width: 1.8; }
.industrial-floor-page .service-process-list > li { column-gap: 14px; }
.industrial-floor-page .service-process-list h3 { margin-bottom: 10px; }
@media (max-width: 960px) {
    .industrial-floor-function-layout { grid-template-columns: 1fr; gap: 28px; }
    .industrial-floor-solutions-layout > header { grid-template-columns: 1fr; gap: 0; }
    .industrial-floor-solutions-layout > header > p { margin-top: 24px; }
}
@media (max-width: 540px) {
    .industrial-floor-sample figcaption { margin-inline: 20px; }
    .industrial-floor-requirement-grid li > .industrial-motif-heading { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .industrial-floor-load-list article:hover .industrial-load-detail path { animation: none; }
    .industrial-floor-solution-list article { transition: none; }
}