:root{--paper:#fff;--ink:#22251e;--yellow:#e9f45b;--wash:#f3f5e8;--muted:#535a49;--rule:#c6ccb8;--boundary:#737c65;--display:'Zilla Slab',Georgia,serif;--body:'Archivo',Arial,sans-serif;--page:1260px}
*{box-sizing:border-box}html{scroll-padding-top:24px;scrollbar-color:var(--ink) var(--yellow)}body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--body);-webkit-font-smoothing:antialiased}::selection{background:var(--yellow);color:var(--ink)}h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}p{margin:0 0 1.1em}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}a:hover{text-decoration-thickness:2px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:4px}img{display:block;max-width:100%;height:auto}header,footer,main>section,main>article>section,.article-breadcrumb,.article-next,.guide-layout{width:min(var(--page),calc(100% - 96px));margin-inline:auto}header{background:var(--yellow);width:100%;max-width:none;padding:24px max(48px,calc((100vw - var(--page))/2));display:flex;align-items:center;justify-content:space-between;gap:36px;border-bottom:1px solid var(--ink)}.wordmark{font:700 clamp(34px,4.6vw,68px)/.95 var(--display);letter-spacing:-.035em;text-decoration:none;color:var(--ink)}.wordmark span{display:block;font:400 13px/1.4 var(--body);letter-spacing:0;margin-top:14px}header nav{display:grid;grid-template-columns:1fr 1fr;gap:7px 32px;font-size:14px}header nav a{text-decoration:none}header nav a:hover{text-decoration:underline}.skip{position:absolute;left:16px;top:-100px;padding:12px 20px;background:var(--ink);color:var(--yellow);z-index:20}.skip:focus{top:12px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;padding-block:46px 38px;align-items:center}.hero h1{font-size:clamp(40px,4.5vw,66px);margin:0 0 24px;max-width:20ch}.hero .intro{font-size:17px;line-height:1.65;max-width:62ch}.hero figure{margin:0}.hero img{width:100%;aspect-ratio:1.25;object-fit:cover}.hero figcaption{font-size:12px;line-height:1.5;color:var(--muted);margin-top:10px}.review-note{font-size:12px;color:var(--muted);max-width:60ch}.button{display:inline-block;border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:0;padding:12px 19px;font:500 14px/1.4 var(--body);text-decoration:none;cursor:pointer;min-height:46px}.button:hover{background:var(--yellow);color:var(--ink)}.hero .button{margin:8px 8px 0 0}.hero .button+.button{background:#fff;color:var(--ink)}.hero .button+.button:hover{background:var(--yellow)}.essential-answer{padding:26px 30px;background:var(--wash);border-block:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;column-gap:40px}.essential-answer h2{font-size:30px;margin:0 0 18px;grid-column:1/-1;max-width:40ch}.essential-answer p{font-size:14px;line-height:1.65}.essential-answer .useful-links{grid-column:1/-1;margin:0;border:0;padding:0;font-size:13px}.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:24px 0 30px;margin-top:20px;border-bottom:1px solid var(--ink)}.facts span{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}.facts strong{font-size:16px;font-weight:600;line-height:1.4;display:block}.home-articles{padding-block:42px 30px}.home-articles>h2,.article-index>h1{font-size:44px;margin:0 0 28px}.home-articles>.article-cards{display:grid;grid-template-columns:1.25fr 1fr;gap:40px}.article-card{min-width:0}.article-card img{width:100%;height:auto;aspect-ratio:1.65;object-fit:cover}.article-card h3,.article-card h2{font-size:30px;line-height:1.12;margin:20px 0 14px}.article-card h3 a,.article-card>a{text-decoration:none}.article-card a:hover h2,.article-card h3 a:hover{text-decoration:underline}.article-card p{font-size:15px;line-height:1.65;margin-bottom:12px;max-width:65ch}.article-card small{font-size:12px;color:var(--muted)}.home-articles>.article-cards>.article-card:nth-child(2){display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-self:start;border-top:1px solid var(--ink);padding-top:20px}.home-articles>.article-cards>.article-card:nth-child(2) img{aspect-ratio:1;object-fit:cover}.home-articles>.article-cards>.article-card:nth-child(2) h3{font-size:26px;margin-top:0}.home-articles>.button{background:#fff;color:var(--ink);margin-top:25px}.home-articles>.button:hover{background:var(--yellow)}.roofing-tools{padding-block:42px 50px;border-block:1px solid var(--ink)}.roofing-tools>h2{font-size:42px;margin:0 0 20px;max-width:25ch}.roofing-tools>p{max-width:76ch;font-size:15px}.roofing-table-wrap{overflow-x:auto;margin:30px 0 12px}.roofing-tools table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}.roofing-tools caption{text-align:left;font:600 23px/1.3 var(--display);padding:16px 18px;background:var(--yellow)}.roofing-tools th,.roofing-tools td{text-align:left;padding:12px 18px;border-bottom:1px solid var(--rule);vertical-align:top}.roofing-tools td:last-child{white-space:nowrap}.roofing-tools thead{background:var(--wash);font-size:12px}.roofing-small{font-size:12px;line-height:1.65;color:var(--muted)}.roofing-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:36px}.roofing-calculator{min-width:0;background:var(--wash);padding:28px}.roofing-calculator h3{font-size:30px;margin:0 0 24px}.roofing-calculator label{display:block;margin:16px 0 7px;font-size:13px;font-weight:500}.roofing-input-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.roofing-calculator .button{margin-top:16px}.roofing-result{display:block;white-space:pre-line;overflow-wrap:anywhere;font:500 14px/1.8 var(--body);font-variant-numeric:tabular-nums;margin-top:24px}.roofing-result:not(:empty){background:var(--yellow);padding:18px}.roofing-calculator>.roofing-small:last-child{margin-top:18px}.guide-layout{display:grid;grid-template-columns:260px minmax(0,76ch);gap:clamp(48px,7vw,110px);padding-block:54px 70px;justify-content:space-between;align-items:start}.guide-layout aside{font-size:14px;line-height:1.5;min-width:0}.guide-layout aside h2,.contents summary{font:600 25px/1.15 var(--display);margin:0 0 20px}.contents summary{cursor:pointer}.contents ol,aside ol{padding-left:20px;margin:24px 0}.contents li,aside li{margin-bottom:13px;padding-left:2px;font-size:13px;break-inside:avoid}aside small{display:block;font-size:12px;color:var(--muted);margin-top:25px}.sections{min-width:0}.guide-section{margin-bottom:46px;scroll-margin-top:24px}.guide-section:last-child{margin-bottom:0}.guide-section h2{font-size:34px;margin:0 0 20px;max-width:35ch}.guide-section p{max-width:72ch}.useful-links{list-style:none;padding:16px 0 0;margin:24px 0 0;border-top:1px solid var(--rule);font-size:13px;line-height:1.6}.useful-links li+li{margin-top:8px}.answer-faq{border-top:1px solid var(--rule);padding-top:20px;margin-bottom:20px}.answer-faq summary{cursor:pointer;list-style-position:outside;margin-left:18px}.answer-faq h2{display:inline;font-size:27px}.answer-faq[open] summary{margin-bottom:20px}.answer-faq p{font-size:16px}.related-sites{padding:30px 0;border-top:1px solid var(--ink)}.related-sites h2{font-size:30px;margin:0 0 20px}.related-sites ul{display:flex;flex-wrap:wrap;gap:9px 24px;list-style:none;padding:0;margin:0;font-size:13px}.editorial-note{padding-block:32px 42px;border-top:1px solid var(--ink);max-width:900px}.editorial-note h2{font-size:32px;margin:0 0 20px}.editorial-note p{font-size:15px}.editorial-note details{font-size:13px;margin-top:24px}.editorial-note summary{cursor:pointer;font-weight:600}.editorial-note li{margin-block:10px}.contact{background:var(--yellow);width:100%;max-width:none;padding:48px max(48px,calc((100vw - var(--page))/2));display:grid;grid-template-columns:1fr 1fr;gap:80px}.contact h2{font-size:52px;max-width:12ch;margin:0 0 25px}.contact p{font-size:15px;max-width:40ch}form{min-width:0}label{display:block;font-size:13px;margin-bottom:8px}input,select,textarea{width:100%;min-width:0;min-height:46px;font:400 16px/1.4 var(--body);border:1px solid var(--boundary);border-radius:0;background:#fff;color:var(--ink);padding:11px;caret-color:var(--ink)}#enquiry-form input,#enquiry-form select,#enquiry-form textarea{margin-bottom:18px}textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.consent{display:flex;align-items:start;gap:12px;font-size:12px;line-height:1.6;margin-bottom:18px}.consent input{width:20px;min-width:20px;height:20px;min-height:20px;margin-top:0;accent-color:var(--ink)}.button:disabled{opacity:.65;cursor:wait}#form-status{margin:18px 0 0;max-width:none;font-size:14px}#form-status:empty{display:none}.privacy{padding-block:30px 40px;display:grid;grid-template-columns:1fr 1fr;gap:0 80px}.privacy h2{font-size:30px;margin:0;grid-row:span 2}.privacy p{font-size:13px}footer{border-top:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:26px 34px;font-size:12px}footer .wordmark{font-size:25px;letter-spacing:-.02em}.article-breadcrumb{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;padding-top:25px}.article-index{padding-block:30px 60px}.article-index>.intro{max-width:70ch;font-size:17px;margin-bottom:36px}.article-index>.article-cards{display:block}.article-index .article-card{display:grid;grid-template-columns:1.1fr 1fr;column-gap:50px;padding:30px 0;border-top:1px solid var(--ink)}.article-index .article-card>a:first-child{grid-row:span 4}.article-index .article-card h2{margin-bottom:0}.article-index .article-card>p{font-size:16px}.article-index .article-card .article-read{font-size:14px;justify-self:start;margin-top:18px;text-decoration:underline}.roof-article-hero h1{font-size:clamp(40px,4.4vw,64px)}.roof-article-byline{font-size:12px;color:var(--muted);margin-top:24px}.article-summary-box{background:var(--wash);padding:26px 30px}.article-summary-box h2{font-size:28px;margin:0 0 16px}.article-summary-box p{max-width:90ch;font-size:15px;margin:0}.article-sources{padding:28px 0 35px;border-top:1px solid var(--ink);max-width:900px}.article-sources h2{font-size:30px;margin:0 0 20px}.article-sources p,.article-sources li{font-size:13px}.article-sources li{margin-block:8px}.article-next{display:flex;gap:20px 35px;flex-wrap:wrap;padding-block:20px 40px;font-size:14px}
@media(max-width:1080px){header,footer,main>section,main>article>section,.article-breadcrumb,.article-next,.guide-layout{width:calc(100% - 64px)}header,.contact{width:100%;padding-inline:32px}.hero{gap:32px}.hero h1{font-size:52px}.hero .intro{font-size:16px}.guide-layout{grid-template-columns:210px minmax(0,1fr);gap:44px}.home-articles>.article-cards{gap:28px}.home-articles>.article-cards>.article-card:nth-child(2){grid-template-columns:110px minmax(0,1fr);gap:20px}.home-articles>.article-cards>.article-card:nth-child(2) h3{font-size:24px}.roofing-tool-grid{gap:24px}.roofing-calculator{padding:22px}.contact{gap:48px}.article-index .article-card{gap:32px}.contact h2{font-size:46px}}
@media(max-width:760px){header,footer,main>section,main>article>section,.article-breadcrumb,.article-next,.guide-layout{width:calc(100% - 40px)}header{width:100%;padding:22px 20px;align-items:start;gap:20px}.wordmark{font-size:38px;max-width:220px}.wordmark span{font-size:12px;line-height:1.4;margin-top:10px}header nav{display:flex;flex-direction:column;align-items:end;gap:5px;font-size:12px;white-space:nowrap}.hero{display:block;padding-block:28px}.hero h1{font-size:clamp(40px,8vw,58px);max-width:18ch}.hero .intro{font-size:16px}.hero figure{margin-top:24px}.hero img{aspect-ratio:1.5}.essential-answer{display:block;padding:22px}.essential-answer h2{font-size:28px}.essential-answer p{font-size:14px}.home-articles{padding-top:32px}.home-articles>h2,.article-index>h1{font-size:36px}.home-articles>.article-cards{display:block}.home-articles>.article-cards>.article-card:nth-child(2){grid-template-columns:110px minmax(0,1fr);margin-top:28px}.article-card h3{font-size:28px}.home-articles>.article-cards>.article-card:nth-child(2) h3{font-size:24px}.home-articles>.article-cards>.article-card:nth-child(2) p{font-size:13px}.facts{grid-template-columns:1fr 1fr;padding-block:18px 24px;gap:18px}.facts strong{font-size:14px}.facts span{font-size:12px}.roofing-tools{padding-block:30px}.roofing-tools>h2{font-size:34px}.roofing-tool-grid{grid-template-columns:1fr;gap:28px}.roofing-tools caption{font-size:21px}.roofing-tools th,.roofing-tools td{padding:10px;font-size:12px}.roofing-tools th:first-child,.roofing-tools td:first-child{min-width:110px}.roofing-tools th:nth-child(2),.roofing-tools td:nth-child(2){min-width:58px}.roofing-calculator h3{font-size:28px}.roofing-calculator label{font-size:12px}.guide-layout{display:block;padding-block:32px 42px}.guide-layout aside{border-block:1px solid var(--ink);padding:20px 0;margin-bottom:35px}.contents summary{margin:0}.contents ol{columns:2;column-gap:36px}.contents li{font-size:12px}aside small{margin-top:18px}.guide-section{margin-bottom:38px}.guide-section h2{font-size:30px}.guide-section p{font-size:16px}.answer-faq h2{font-size:25px}.contact{width:100%;display:block;padding:32px 20px}.contact h2{font-size:42px;max-width:15ch}.contact>div>p{margin-bottom:28px;max-width:50ch}.privacy{display:block;padding-block:28px}.privacy h2{margin-bottom:18px}footer{flex-wrap:wrap;gap:18px}footer>span{order:3;width:100%}.editorial-note h2{font-size:30px}.article-index{padding-block:25px 40px}.article-index .article-card{display:block;padding:28px 0}.article-index .article-card>p{margin-top:20px;font-size:15px}.article-index .article-card .article-read{display:block}.roof-article-hero h1{font-size:40px}.article-summary-box{padding:22px}.article-summary-box h2{font-size:26px}.roof-article-layout aside ol{columns:2;column-gap:36px}.article-sources{padding-block:26px 30px}.article-next{font-size:13px;padding-bottom:32px}}
@media(max-width:420px){.wordmark{font-size:34px}.wordmark span{max-width:150px}.form-row,.roofing-input-pair{grid-template-columns:1fr;gap:0}.contents ol,.roof-article-layout aside ol{columns:1}.home-articles>.article-cards>.article-card:nth-child(2){grid-template-columns:90px minmax(0,1fr);gap:18px}.roofing-tools td:last-child{white-space:normal}.roofing-tools table{min-width:270px}.roofing-calculator{padding:18px}.hero .button{padding:11px 14px;font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
