/* Highline: full-width roof panorama, assessment strip and paired service summaries. */
[data-design="roofline"] .demo-site-header { background: var(--color-ink); color: var(--color-paper); border:0; }
.roof-opening { position:relative; min-height:690px; background:var(--color-ink); }
.roof-opening .brand-art { position:absolute; inset:0; }
.roof-opening .brand-photo { height:690px; object-fit:cover; }
.roof-opening .brand-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--color-ink),transparent 90%); opacity:.88; }
.roof-opening figcaption { position:absolute; bottom:0; right:0; z-index:1; }
.roof-statement { position:relative; z-index:2; padding:95px 7vw 100px; color:var(--color-paper); max-width:820px; }
[data-design="roofline"] .roof-statement h1 { font-size:clamp(3rem,5.6vw,6.3rem); max-width:13ch; font-weight:600; }
.roof-statement>p:first-child { font-size:.8rem; }
.roof-statement .brand-intro { margin:28px 0; }
[data-design="roofline"] .roof-statement .demo-actions a:first-child { background:var(--color-paper); color:var(--color-ink); border-color:var(--color-paper); }
.roof-jump { position:relative; z-index:2; display:block; padding:20px 7vw; color:var(--color-paper); border-top:1px solid var(--color-secondary); }
[data-design="roofline"] .demo-task .roof-gauge { display:none; }
body[data-design="roofline"] .demo-task[data-task-mode="roof"] { display:block; }
[data-design="roofline"] .roof-conditions { grid-template-columns:repeat(4,minmax(0,1fr)); }
[data-design="roofline"] .roof-conditions button { padding:20px; min-height:100px; }
[data-design="roofline"] .roof-conditions button::after { content:none; }
.roof-options>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 70px; }
.roof-options article { border-top:3px solid var(--color-accent); padding-top:24px; }
[data-design="roofline"] .brand-process { background:var(--color-surface); }
[data-design="roofline"] .brand-process ol { max-width:900px; }
@media(max-width:760px){.roof-opening,.roof-opening .brand-photo{min-height:620px;height:620px;}.roof-statement{padding:70px 6vw 36px;}.roof-options>div,[data-design="roofline"] .roof-conditions{grid-template-columns:minmax(0,1fr);}.roof-jump{padding-inline:6vw;}}