﻿/* Flat-roofing child page only. Existing Mississauga and child-page styles remain untouched. */
.flat-roofing-page .ms-hero h1{font-size:clamp(2.7rem,4.4vw,4.2rem)}
.flat-roofing-page .ms-breadcrumb{margin-bottom:48px}
.fr-problems-layout{display:grid;grid-template-columns:.7fr 1.5fr;gap:28px;align-items:stretch}
.fr-problems-photo{position:relative;min-height:660px;border-radius:16px;overflow:hidden;background:var(--ms-navy)}
.fr-problems-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.fr-problems-photo::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(var(--ms-overlay-rgb),.9))}
.fr-problems-photo>span{position:absolute;left:26px;right:26px;bottom:30px;color:var(--ms-white);z-index:1;font-size:1.2rem;font-weight:750;line-height:1.45}
.fr-problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fr-problem{padding:25px;border:1px solid var(--ms-border);border-radius:13px;background:var(--ms-white);box-shadow:0 5px 18px rgba(var(--ms-navy-rgb),.035)}
.fr-problem .rr-problem-icon{margin-bottom:16px}
.fr-problem h3{font-size:1.14rem;line-height:1.3;font-weight:800;margin-bottom:12px}
.fr-problem p{font-size:.91rem;line-height:1.75;color:var(--ms-gray);margin:0}
.fr-systems-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fr-system-photo{position:relative;min-height:300px;background:var(--ms-navy);border-radius:14px;overflow:hidden}
.fr-system-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fr-system-photo::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(var(--ms-overlay-rgb),.9))}
.fr-system-photo>span{position:absolute;left:26px;right:26px;bottom:28px;color:var(--ms-white);font-size:1.3rem;font-weight:750;line-height:1.3;z-index:1}
.fr-system{padding:28px;border:1px solid var(--ms-border);border-radius:14px;background:var(--ms-warm)}
.fr-system-top{display:flex;align-items:center;justify-content:space-between;color:var(--ms-orange-hover);margin-bottom:22px}
.fr-system-top>span{font-weight:800;font-size:.76rem;letter-spacing:.12em}
.fr-system-top svg{width:25px;height:25px}
.fr-system h3{font-size:1.5rem;letter-spacing:-.025em;line-height:1.25;margin-bottom:8px}
.fr-system-tag{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ms-orange-hover);font-weight:700;margin-bottom:16px}
.fr-system p{font-size:.92rem;line-height:1.75;color:var(--ms-gray);margin:0}
.fr-property-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}
.fr-property-types{display:grid;gap:22px}
.fr-property-types article{border-top:1px solid var(--ms-border);padding-top:22px}
.fr-property-types h3{font-size:1.16rem;line-height:1.3;margin-bottom:12px}
.fr-property-types p{font-size:.94rem;line-height:1.75;color:var(--ms-gray);margin:0}
.fr-property-photo{min-height:530px;position:relative;overflow:hidden;border-radius:16px;background:var(--ms-navy)}
.fr-property-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% center}
.fr-property-photo::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(var(--ms-overlay-rgb),.9))}
.fr-property-photo>span{position:absolute;left:28px;right:28px;bottom:28px;z-index:1;color:var(--ms-white);font-size:1.15rem;font-weight:750;line-height:1.5}
.flat-roofing-page .rr-related ul{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.fr-problems-layout{grid-template-columns:.65fr 1.35fr;gap:22px}.fr-problem{padding:22px}.fr-system{padding:24px}.fr-property-grid{gap:32px}.fr-property-photo{min-height:580px}}
@media(max-width:800px){.flat-roofing-page .ms-hero h1{font-size:clamp(2.8rem,7vw,4rem)}.fr-problems-layout{grid-template-columns:1fr}.fr-problems-photo{min-height:290px}.fr-problems-photo>img{object-position:center 55%}.fr-systems-grid{grid-template-columns:1fr 1fr;gap:20px}.fr-system-photo{min-height:290px}.fr-property-grid{grid-template-columns:1fr}.fr-property-photo{min-height:320px;order:-1}.fr-property-photo>img{object-position:center 45%}.flat-roofing-page .rr-related ul{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.flat-roofing-page .ms-hero h1{font-size:clamp(2.5rem,10vw,3.3rem)}.flat-roofing-page .ms-breadcrumb{margin-bottom:30px}.flat-roofing-page .ms-hero-trust{gap:12px}.flat-roofing-page .ms-hero-trust li{font-size:.69rem}.fr-problems-photo{min-height:245px}.fr-problems-photo>span{font-size:1.1rem;left:23px;bottom:24px}.fr-problem-grid{grid-template-columns:1fr;gap:16px}.fr-problem{padding:25px}.fr-problem h3{font-size:1.25rem}.fr-problem p{font-size:.95rem}.fr-systems-grid{grid-template-columns:1fr}.fr-system-photo{min-height:240px}.fr-system{padding:27px 24px}.fr-system h3{font-size:1.55rem}.fr-system p{font-size:.95rem}.fr-property-photo{min-height:270px}.fr-property-photo>span{font-size:1.1rem;left:23px}.flat-roofing-page .rr-related ul{grid-template-columns:1fr}.flat-roofing-page .ms-neighbourhoods .ms-neighbourhood-prefix{font-size:.6rem}}
/* Frame the membrane and parapet, rather than a skyline, in this page's hero. */
.flat-roofing-page .ms-hero-image{object-position:48% 58%}
@media(max-width:800px){.flat-roofing-page .ms-hero-image{object-position:44% 50%}}
