.roofing-page [data-roof-lang="af"] { display:none; }
html[lang="af"] .roofing-page [data-roof-lang="af"] { display:inline; }
html[lang="af"] .roofing-page [data-roof-lang="en"] { display:none; }
.roofing-page main,.roofing-page section,.roofing-page .wrap,.roofing-page figure { min-width:0; }
.roofing-page h1 { font-size:clamp(38px,4.7vw,68px);line-height:1.22;letter-spacing:-.06em;font-weight:500;overflow-wrap:anywhere; }
.roofing-page h2 { font-weight:500; }
.roofing-page figure { margin:0; }
.roofing-page .button { min-height:48px; }
.roofing-hub-hero { position:relative;isolation:isolate;overflow:hidden;min-height:590px;display:flex;align-items:center;background:var(--ink);color:#fff;padding:65px 0; }
.roofing-hub-hero>img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-2; }
.roofing-hub-hero:after { content:'';position:absolute;inset:0;background:linear-gradient(90deg,#1d1d1df5 0%,#1d1d1de6 30%,#1d1d1d66 68%,#1d1d1d22);z-index:-1; }
.roofing-hub-hero .eyebrow { color:#fff; }
.roofing-hub-hero h1 { margin:24px 0;font-size:clamp(46px,5.5vw,76px);max-width:800px;animation:roofing-rise .7s var(--ease) both; }
.roofing-hub-hero p { color:#e5e5e5;max-width:480px;font-size:18px;animation:roofing-rise .7s .12s var(--ease) both; }
.roofing-hub-hero .button { margin-top:30px; }
.roofing-hub-intro { padding:65px 0;background:#fff; }
.roofing-hub-intro>.wrap { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:100px; }
.roofing-hub-intro h2 { font-size:35px;line-height:1.35; }
.roofing-hub-intro p { font-size:16px;margin-bottom:20px; }
.roofing-hub-intro p+p { font-size:13px; }
.roofing-hub-intro .text-link { font-size:13px; }
.roofing-service-section { padding:15px 0 75px; }
.roofing-filter-bar { display:flex;justify-content:space-between;align-items:center;gap:25px;padding:30px 0 35px; }
.roofing-filters { display:flex;flex-wrap:wrap;gap:8px; }
.roofing-filters button { min-height:44px;background:transparent;border:1px solid #aaa;border-radius:4px;padding:10px 16px;font-size:13px;line-height:1.5;font-weight:800; }
.roofing-filters button[aria-pressed="true"] { background:var(--ink);border-color:var(--ink);color:#fff; }
#roofing-service-count { font-size:12px;white-space:nowrap; }
.roofing-service-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:50px 35px; }
.roofing-service-item { display:block;min-width:0; }
.roofing-service-item[hidden] { display:none; }
.roofing-service-image { position:relative;aspect-ratio:16/10;background:#ddd;overflow:hidden; }
.roofing-service-image>img { width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease); }
.roofing-service-image>span { position:absolute;right:18px;bottom:18px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--orange);color:var(--ink);border-radius:50%;font-size:24px; }
.roofing-service-item:hover img { transform:scale(1.035); }
.roofing-card-heading { display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start;margin-top:23px; }
.roofing-card-heading h2 { font-size:24px;line-height:1.4;letter-spacing:-.04em; }
.roofing-card-number { font:400 11px/2.4 Unbounded,sans-serif;color:#9a3717; }
.roofing-service-item>p { padding-left:44px;font-size:16px;line-height:1.65;margin-top:14px; }
.roofing-hub-process { background:var(--ink);color:#fff;padding:65px 0; }
.roofing-hub-process h2 { font-size:38px;max-width:700px; }
.roofing-hub-process ol { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;padding:0;margin:40px 0 25px;list-style:none; }
.roofing-hub-process li { border-top:1px solid #666;padding-top:22px; }
.roofing-hub-process b { font:300 14px/1.5 Unbounded,sans-serif;color:var(--orange); }
.roofing-hub-process h3 { font-size:20px;margin:18px 0 12px; }
.roofing-hub-process p { color:#ccc;font-size:15px; }
.roofing-hub-process .text-link { color:#fff;border-color:#888;font-size:14px; }
.roofing-detail-hero { background:var(--ink);color:#fff;padding:20px 0 65px; }
.roofing-breadcrumb { display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px;font-size:12px;color:#ccc;margin-bottom:25px; }
.roofing-breadcrumb>a { display:inline-flex;align-items:center;min-height:44px; }
.roofing-breadcrumb>a:hover { color:#fff;text-decoration:underline; }
.roofing-detail-heading { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:60px;align-items:center; }
.roofing-detail-heading .eyebrow { color:#ddd;font-size:10px; }
.roofing-detail-heading h1 { margin:24px 0; }
.roofing-detail-heading p { color:#ddd;max-width:550px;font-size:18px; }
.roofing-detail-heading .button { margin-top:28px; }
.roofing-detail-heading figure>img { width:100%;height:450px;object-fit:cover; }
.roofing-detail-layout { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.65fr);gap:80px;padding-top:65px;padding-bottom:65px;align-items:start; }
.roofing-copy>section { border-top:1px solid #c9c9c9;padding-top:25px;margin-bottom:40px; }
.roofing-copy>section>.eyebrow { font-size:10px;color:#595959; }
.roofing-copy h2 { font-size:29px;line-height:1.4;margin:18px 0 22px; }
.roofing-copy p { font-size:17px;line-height:1.7; }
.roofing-scope-list { padding-left:20px;color:#555;font-size:17px; }
.roofing-scope-list>li { padding-left:4px;margin:13px 0; }
.roofing-process { padding:0;list-style:none;margin:0; }
.roofing-process>li { display:grid;grid-template-columns:30px minmax(0,1fr);gap:17px;margin:20px 0; }
.roofing-step-number { font:400 11px/2 Unbounded,sans-serif;color:#9a3717; }
.roofing-copy .roofing-specific-note { border-left:3px solid var(--orange);padding-left:20px;font-size:15px;line-height:1.7;margin:15px 0 20px; }
.roofing-copy .roofing-reference { font-size:12px;margin:15px 0; }
.roofing-reference a { text-decoration:underline;text-underline-offset:4px; }
.roofing-copy .roofing-capacity-note { font-size:13px;border-top:1px solid #ccc;margin-top:30px;padding-top:22px; }
.roofing-copy>.text-link { font-size:14px;margin-top:20px; }
.roofing-enquiry { position:sticky;top:110px;background:var(--orange);padding:30px; }
.roofing-enquiry h2 { font-size:24px;line-height:1.45;letter-spacing:-.04em; }
.roofing-enquiry ul { font-size:15px;padding-left:19px;margin:22px 0; }
.roofing-enquiry li { margin:15px 0; }
.roofing-enquiry p { color:var(--ink);font-size:13px;line-height:1.7;border-top:1px solid #1d1d1d66;padding-top:22px; }
.roofing-enquiry .button.primary { display:flex;justify-content:space-between;background:var(--ink);border-color:var(--ink);color:#fff;gap:12px;font-size:13px;margin-top:24px; }
.roofing-enquiry .text-link { font-size:12px;line-height:1.6;min-height:44px;gap:10px;margin-top:14px; }
.roofing-enquiry .roofing-whatsapp-note { border:0;padding:0;margin-top:12px;font-size:11px; }
.roofing-related { background:#e5e5e5;padding:45px 0; }
.roofing-related h2 { font-size:29px;line-height:1.4; }
.roofing-related p { font-size:15px;max-width:720px;margin:17px 0; }
.roofing-related>.wrap>div { display:flex;flex-wrap:wrap;gap:10px 35px; }
.roofing-related a { font-size:14px;font-weight:800;display:inline-flex;align-items:center;min-height:44px; }
.roofing-next { padding:55px 0;background:#fff; }
.roofing-next>.wrap { display:flex;justify-content:space-between;align-items:center;gap:60px; }
.roofing-next h2 { font-size:35px;margin:20px 0 15px; }
.roofing-next p { font-size:16px;max-width:680px; }
.roofing-next .button { flex-shrink:0; }
@keyframes roofing-rise { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none} }
@media(max-width:1100px) { .roofing-hub-intro>.wrap{gap:50px}.roofing-detail-heading{gap:40px}.roofing-detail-heading h1{font-size:44px}.roofing-detail-layout{gap:40px;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}.roofing-enquiry{padding:23px}.roofing-enquiry h2{font-size:21px}.roofing-card-heading h2{font-size:21px}.roofing-hub-process ol{gap:30px} }
@media(max-width:850px) { .roofing-hub-intro>.wrap{grid-template-columns:minmax(0,1fr);gap:30px}.roofing-detail-heading{grid-template-columns:minmax(0,1fr);gap:35px}.roofing-detail-heading h1{max-width:700px}.roofing-detail-heading p{max-width:650px}.roofing-detail-heading figure>img{height:420px}.roofing-detail-layout{grid-template-columns:minmax(0,1fr);gap:35px}.roofing-enquiry{position:static;padding:30px}.roofing-enquiry .button{width:fit-content}.roofing-next>.wrap{display:block}.roofing-next .button{margin-top:25px}.roofing-hub-process ol{grid-template-columns:minmax(0,1fr);gap:25px}.roofing-hub-process li{display:grid;grid-template-columns:25px minmax(0,1fr);gap:8px 20px}.roofing-hub-process li>b{grid-row:1 / span 2}.roofing-hub-process h3{margin:0 0 5px}.roofing-hub-process li>p{grid-column:2}.roofing-hub-process h2{font-size:32px}.roofing-service-item>p{padding-left:0}.roofing-filter-bar{align-items:flex-start} }
@media(max-width:640px) {
  .roofing-hub-hero{min-height:570px;padding:45px 0}.roofing-hub-hero:after{background:linear-gradient(90deg,#1d1d1de8,#1d1d1da6)}.roofing-hub-hero>img{object-position:65% 50%}.roofing-hub-hero h1{font-size:43px;letter-spacing:-.06em}.roofing-hub-hero p{font-size:16px}.roofing-hub-hero .button{font-size:13px;gap:16px;max-width:100%}.roofing-hub-intro{padding:40px 0}.roofing-hub-intro h2{font-size:28px}.roofing-hub-intro p{font-size:15px}
  .roofing-filter-bar{display:block;padding:22px 0 27px}.roofing-filters{gap:7px}.roofing-filters button{font-size:12px;padding:10px 12px}.roofing-filter-bar>span{display:block;margin-top:17px}.roofing-service-grid{grid-template-columns:minmax(0,1fr);gap:35px}.roofing-card-heading{margin-top:19px;grid-template-columns:24px minmax(0,1fr);gap:12px}.roofing-card-heading h2{font-size:22px;overflow-wrap:anywhere}.roofing-card-number{font-size:10px}.roofing-service-item>p{font-size:15px;margin-top:12px}.roofing-service-section{padding-bottom:45px}.roofing-service-image{aspect-ratio:4/3}
  .roofing-hub-process{padding:40px 0}.roofing-hub-process h2{font-size:29px}.roofing-hub-process h3{font-size:18px}.roofing-hub-process p{font-size:14px}.roofing-hub-process ol{margin-top:30px}
  .roofing-detail-hero{padding:10px 0 35px}.roofing-breadcrumb{font-size:11px;gap:3px 11px;margin-bottom:17px}.roofing-detail-heading{gap:28px}.roofing-detail-heading .eyebrow{font-size:9px}.roofing-detail-heading h1{font-size:35px;line-height:1.3;margin:20px 0}.roofing-detail-heading p{font-size:16px}.roofing-detail-heading .button{font-size:13px;margin-top:23px}.roofing-detail-heading figure>img{height:290px}.roofing-detail-layout{padding-top:40px;padding-bottom:40px}.roofing-copy>section{padding-top:22px;margin-bottom:30px}.roofing-copy h2{font-size:25px;line-height:1.45;margin:15px 0 18px}.roofing-copy p,.roofing-scope-list{font-size:16px}.roofing-copy .roofing-specific-note{font-size:14px;padding-left:16px}.roofing-process>li{gap:12px;grid-template-columns:24px minmax(0,1fr)}.roofing-enquiry{padding:25px 22px}.roofing-enquiry h2{font-size:24px}.roofing-enquiry .button{width:100%}.roofing-enquiry .text-link{font-size:13px}.roofing-related{padding:35px 0}.roofing-related h2{font-size:25px}.roofing-related p{font-size:14px}.roofing-related>.wrap>div{display:block}.roofing-related a{display:flex;font-size:13px}.roofing-next{padding:40px 0}.roofing-next h2{font-size:29px}.roofing-next p{font-size:15px}.roofing-next .button{width:100%;justify-content:space-between;font-size:13px}
}
@media(prefers-reduced-motion:reduce) { .roofing-page *,.roofing-page *:before,.roofing-page *:after{animation:none!important;transition:none!important} }