@font-face {
font-family: "Archivo Narrow";
src: url("/media/fonts/archivo-narrow-var-latin.woff2") format("woff2");
font-weight: 400 700;
font-display: swap;
}
@font-face {
font-family: "Public Sans";
src: url("/media/fonts/public-sans-var-latin.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
}
:root {
--zinc: #dde1de;
--sheet: #e8ebe8;
--ink: #1c2226;
--muted: #4b575b;
--line: #2b5585;
--line-soft: #9fb0bf;
--rule: #b7c0c0;
--amber: #f0a20b;
--amber-deep: #b87500;
--block: #232b2f;
--block-2: #2e383d;
--block-ink: #e6ebe9;
--block-muted: #b3c0c2;
--f-head: "Archivo Narrow", "Arial Narrow", sans-serif;
--f-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
--gutter: clamp(1rem, 4vw, 2.5rem);
--wide: 1240px;
--measure: 66ch;
--d-ink: var(--line);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--zinc);
color: var(--ink);
font-family: var(--f-body);
font-size: 1.0625rem;
line-height: 1.6;
}
img, svg { max-width: 100%; }
a { color: var(--line); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 2px; }
h1, h2, h3 {
font-family: var(--f-head);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.005em;
margin: 0 0 0.5em;
text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); }
p, ul, ol { margin: 0 0 1em; }
.shell { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--amber); color: var(--ink); padding: 0.6rem 1rem; }
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 48px;
padding: 0.7rem 1.25rem;
border: 2px solid var(--ink);
border-radius: 2px;
background: transparent;
color: var(--ink);
font-family: var(--f-head);
font-size: 1.12rem;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--zinc); }
.btn--go { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.btn--go:hover { background: var(--ink); border-color: var(--ink); color: var(--amber); }
.site-header { border-bottom: 2px solid var(--ink); background: var(--zinc); }
.site-header .shell { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding-block: 0.9rem 0; }
.brand { display: block; width: clamp(170px, 42vw, 230px); line-height: 0; color: var(--ink); }
.brand svg { width: 100%; height: auto; }
.brand .lg-ink { fill: var(--ink); }
.brand .lg-blue { fill: var(--line); }
.hdr-cta { order: 1; margin-left: auto; }
.nav-toggle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nav-burger { display: none; }
.nav { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.9rem; font-size: 0.98rem; border-top: 1px solid var(--rule); padding-block: 0.45rem 0.55rem; }
.nav-group { display: flex; align-items: baseline; gap: 0.55rem; }
.nav-group b { font-family: var(--f-head); font-size: 0.9rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.nav a { color: var(--ink); text-decoration: none; padding-block: 0.3rem; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--line); }
.nav a[aria-current="page"] { border-bottom-color: var(--amber); }
.nav-group a + a::before { content: "/"; color: var(--rule); margin-right: 0.55rem; }
@media (max-width: 860px) {
.hdr-cta { order: 1; margin-left: auto; }
.nav-burger { order: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 2px; cursor: pointer; color: var(--ink); }
.nav-burger span, .nav-burger span::before, .nav-burger span::after { content: ""; display: block; width: 20px; height: 2px; background: currentColor; transition: transform 0.2s ease, background 0.2s ease; }
.nav-burger span { position: relative; }
.nav-burger span::before { position: absolute; top: -6px; }
.nav-burger span::after { position: absolute; top: 6px; }
.nav-toggle:checked ~ .nav-burger span { background: transparent; }
.nav-toggle:checked ~ .nav-burger span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span::after { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle:focus-visible ~ .nav-burger { outline: 3px solid var(--amber-deep); outline-offset: 2px; }
.site-header .shell { padding-block: 0.75rem; }
.nav { order: 3; display: none; flex-basis: 100%; flex-direction: column; gap: 0; margin-left: 0; padding: 0.25rem 0 0.75rem; border-top: 0; }
.nav-toggle:checked ~ .nav { display: flex; }
.nav-group { flex-wrap: wrap; gap: 0 0.9rem; padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.nav-group b { flex-basis: 100%; }
.nav-group a + a::before { content: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.05rem; }
}
@media (max-width: 520px) {
.site-header .shell { gap: 0.6rem; }
.brand { width: 150px; }
.hdr-cta { padding-inline: 0.8rem; font-size: 1rem; min-height: 44px; }
}
.hero { padding-block: clamp(1.75rem, 4vw, 3.5rem) clamp(1rem, 2vw, 1.75rem); }
.hero .shell { display: grid; gap: 1rem 3rem; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; }
.hero h1 { margin: 0; max-width: 15ch; }
.hero-lede p { margin-bottom: 1rem; color: var(--ink); }
.hero-acts { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 820px) { .hero .shell { grid-template-columns: 1fr; } }
.sheet { padding-bottom: clamp(2rem, 5vw, 4rem); }
.sheet-frame {
display: grid;
grid-template-columns: minmax(0, 1fr);
border: 2px solid var(--ink);
background: var(--sheet);
position: relative;
}
.sheet-frame::before {
content: "";
position: absolute; inset: 6px;
border: 1px solid var(--rule);
pointer-events: none;
}
.sheet-draw { padding: 1rem 0.5rem 0.5rem 1rem; position: relative; }
.roof-drawing { display: block; width: 100%; height: auto; overflow: visible; }
.sheet-notes {
border-top: 2px solid var(--ink);
padding: 1.25rem 1.5rem 1.5rem;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.9rem 3rem;
align-items: start;
position: relative; z-index: 1;
}
.sheet-notes h2 { grid-column: 1 / -1; }
.sheet-notes h2 { font-size: 1.05rem; letter-spacing: 0.05em; margin: 0; color: var(--muted); }
.part-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.part-list button {
font: inherit; font-size: 0.92rem;
min-height: 44px; padding: 0.35rem 0.7rem;
border: 1px solid var(--line-soft); border-radius: 2px;
background: transparent; color: var(--ink); cursor: pointer;
}
.part-list button:hover { border-color: var(--line); }
.part-list button[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); font-weight: 600; }
.part-note { min-height: 9.5rem; border-left: 1px solid var(--rule); padding-left: 1.5rem; }
.part-note h3 { margin-bottom: 0.35rem; }
.part-note p { font-size: 0.98rem; margin-bottom: 0.75rem; }
.part-note .part-more { font-size: 0.95rem; }
.part-note [hidden] { display: none; }
.pan-hint { display: none; margin: 0; padding: 0.35rem 0.6rem 0; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 900px) {
.sheet-frame { grid-template-columns: 1fr; }
.sheet-notes { grid-template-columns: 1fr; padding: 1rem; }
.part-note { border-left: 0; padding-left: 0; }
.sheet-draw { padding: 0.6rem 0.4rem 0.2rem; }
}
@media (max-width: 600px) {
.sheet-draw { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.sheet-draw .roof-drawing { width: 760px; max-width: none; }
.pan-hint { display: block; }
.d-labels, .d-titleblock { display: none; }
.part-note { min-height: 0; }
}
.roof-drawing line, .roof-drawing polygon, .roof-drawing path { vector-effect: non-scaling-stroke; }
.d-escarp { fill: none; stroke: var(--line-soft); stroke-width: 1.2; }
.d-escarp--cap { stroke-dasharray: 5 4; }
.d-row { stroke: var(--line-soft); stroke-width: 1; }
.d-post { stroke: var(--line-soft); stroke-width: 1; }
.d-vine { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.d-ground { stroke: var(--ink); stroke-width: 2; }
.d-wall { fill: var(--sheet); stroke: var(--d-ink); stroke-width: 1.4; }
.d-wall--side { fill: #d9dedd; }
.d-win { fill: #cfd8dd; stroke: var(--d-ink); stroke-width: 1.1; }
.d-thin { stroke: var(--d-ink); stroke-width: 0.8; }
.d-brick { stroke: var(--line-soft); stroke-width: 0.6; }
.d-plane { fill: var(--sheet); stroke: var(--d-ink); stroke-width: 1.6; }
.d-plane--side { fill: #dfe3e1; }
.d-plane--iron { fill: #e1e5e4; }
.d-course line { stroke: var(--d-ink); stroke-width: 0.7; opacity: 0.75; }
.d-corr line { stroke: var(--d-ink); stroke-width: 0.6; opacity: 0.7; }
.d-rib { stroke: var(--line-soft); stroke-width: 0.6; }
.d-screws { stroke: var(--d-ink); stroke-width: 1; stroke-dasharray: 1 5; }
.d-ridge-iron { stroke: var(--d-ink); stroke-width: 2.2; }
.d-sark { fill: #c9d6e2; stroke: var(--d-ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.d-batten { stroke: var(--d-ink); stroke-width: 1.2; }
.d-rafter { stroke: var(--d-ink); stroke-width: 0.6; opacity: 0.6; }
.d-ridge line { stroke: var(--d-ink); stroke-width: 3; stroke-linecap: round; }
.d-valley { stroke: var(--d-ink); stroke-width: 3; stroke-linecap: round; }
.d-cap { fill: var(--sheet); stroke: var(--d-ink); stroke-width: 1.2; }
.d-flash { fill: #c9d6e2; stroke: var(--d-ink); stroke-width: 1.2; }
.d-gutter { fill: #cfd8dd; stroke: var(--d-ink); stroke-width: 1.3; }
.d-fascia { fill: var(--sheet); stroke: var(--d-ink); stroke-width: 1; }
.d-mesh { stroke: var(--d-ink); stroke-width: 0.7; opacity: 0.8; }
.d-downpipe { fill: #cfd8dd; stroke: var(--d-ink); stroke-width: 1.2; }
.d-rain line { stroke: var(--line-soft); stroke-width: 1.2; stroke-linecap: round; }
.d-water { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 4; }
.d-water-head { fill: none; stroke: var(--line); stroke-width: 2; }
.d-leader { stroke: var(--ink); stroke-width: 1; }
.d-dot { fill: var(--ink); }
.d-label rect { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.2; }
.d-label text { font-family: var(--f-head); font-size: 18px; font-weight: 700; fill: var(--ink); text-anchor: middle; letter-spacing: 0.02em; }
.d-label { cursor: pointer; }
.d-label:focus { outline: none; }
.d-titleblock rect, .d-titleblock line { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.d-titleblock text { font-family: var(--f-body); font-size: 11px; fill: var(--muted); }
.d-titleblock .d-tb-h { font-family: var(--f-head); font-size: 14px; font-weight: 700; fill: var(--ink); letter-spacing: 0.06em; }
.d-part { cursor: pointer; }
.roof-drawing .is-on .d-plane, .roof-drawing .is-on.d-part polygon { fill: #f6d58b; }
.roof-drawing .is-on line, .roof-drawing .is-on .d-valley, .roof-drawing .is-on .d-ridge line { stroke: var(--amber-deep); }
.roof-drawing .is-on .d-valley, .roof-drawing .is-on .d-ridge line { stroke-width: 5; }
.roof-drawing .d-label.is-on rect { fill: var(--amber); stroke: var(--ink); }
.roof-drawing .d-label.is-on .d-leader { stroke: var(--ink); stroke-width: 2; }
.d-trace { fill: none; stroke: var(--line); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.d-rain line { animation: rain 1.3s cubic-bezier(.4,.1,.7,1) 0.2s 2 both; }
.d-rain line:nth-child(3n) { animation-delay: 0.45s; }
.d-rain line:nth-child(3n+1) { animation-delay: 0.7s; }
.d-trace { animation: trace 2.2s ease-in-out 1.4s 1 forwards; }
}
@keyframes rain {
0% { transform: translate(6px, -24px); opacity: 0; }
30% { opacity: 1; }
100% { transform: translate(-6px, 18px); opacity: 0.9; }
}
@keyframes trace {
0% { opacity: 1; stroke-dashoffset: 100; }
80% { opacity: 1; stroke-dashoffset: 0; }
100% { opacity: 0; stroke-dashoffset: 0; }
}
.spec { padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 2px solid var(--ink); }
.spec .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; }
.spec-text { max-width: var(--measure); }
.spec-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.spec-list li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.spec-list li::before { content: ""; width: 1.4rem; height: 0.9rem; margin-top: 0.35rem; background:
linear-gradient(135deg, transparent 45%, var(--line) 45% 55%, transparent 55%) left / 50% 100% no-repeat,
linear-gradient(45deg, transparent 45%, var(--line) 45% 55%, transparent 55%) right / 50% 100% no-repeat; }
.spec-list h2 { font-size: 1.35rem; margin-bottom: 0.9rem; }
@media (max-width: 820px) { .spec .shell { grid-template-columns: 1fr; } }
.register { padding-block: clamp(2.5rem, 6vw, 5rem); background: var(--sheet); border-block: 2px solid var(--ink); }
.register h2 { margin-bottom: 1.25rem; }
.reg-table { width: 100%; border-collapse: collapse; }
.reg-table th, .reg-table td { text-align: left; vertical-align: top; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--rule); }
.reg-table thead th { font-family: var(--f-head); font-size: 0.95rem; color: var(--muted); letter-spacing: 0.04em; border-bottom: 2px solid var(--ink); }
.reg-table tbody th { font-family: var(--f-head); font-size: 1.2rem; white-space: nowrap; }
.reg-table tbody th a { color: var(--ink); text-decoration-color: var(--line-soft); }
.reg-table tbody th a:hover { text-decoration-color: var(--amber-deep); }
.reg-table .reg-group { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
@media (max-width: 700px) {
.reg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.reg-table, .reg-table tbody, .reg-table tr, .reg-table th, .reg-table td { display: block; width: 100%; }
.reg-table tr { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.reg-table th, .reg-table td { border: 0; padding: 0; }
.reg-table tbody th { white-space: normal; margin-bottom: 0.2rem; }
.reg-table .reg-group { margin-top: 0.3rem; }
}
.quote { background: var(--block); color: var(--block-ink); padding-block: clamp(2.5rem, 6vw, 5rem); scroll-margin-top: 1rem; }
.quote a { color: #cfe0f2; }
.quote .shell { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem 4rem; }
.quote h2 { color: #fff; }
.quote-side p { color: var(--block-ink); max-width: 44ch; }
.quote-side .small { color: var(--block-muted); font-size: 0.95rem; }
.tb { border: 2px solid var(--block-ink); }
.tb-head { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--block-muted); }
.tb-head span { padding: 0.55rem 0.9rem; font-family: var(--f-head); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--block-muted); }
.tb-head span + span { border-left: 1px solid var(--block-muted); }
.fp-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: none; }
.fp-lead label { display: grid; gap: 0.25rem; padding: 0.7rem 0.9rem 0.9rem; font-family: var(--f-head); font-size: 0.95rem; letter-spacing: 0.04em; color: var(--block-muted); border-bottom: 1px solid var(--block-muted); }
.fp-lead label:nth-of-type(odd):not(.wide) { border-right: 1px solid var(--block-muted); }
.fp-lead .wide { grid-column: 1 / -1; }
.fp-lead input, .fp-lead textarea, .fp-lead select {
font: inherit; font-family: var(--f-body); font-size: 1.05rem; letter-spacing: 0;
width: 100%; padding: 0.55rem 0.1rem; color: #fff;
background: transparent; border: 0; border-bottom: 2px solid #5d6b70; border-radius: 0;
}
.fp-lead select { background: var(--block); -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--block-muted) 50%), linear-gradient(135deg, var(--block-muted) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.fp-lead input:focus, .fp-lead textarea:focus, .fp-lead select:focus { outline: none; border-bottom-color: var(--amber); }
.fp-lead textarea { resize: vertical; min-height: 6rem; }
.fp-lead .fp-hp { position: absolute; left: -9999px; }
.fp-lead .tb-send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 0.9rem; }
.fp-lead button { font-family: var(--f-head); font-size: 1.15rem; font-weight: 700; min-height: 50px; padding: 0.7rem 1.6rem; border: 2px solid var(--amber); border-radius: 2px; background: var(--amber); color: var(--ink); cursor: pointer; }
.fp-lead button:hover { background: transparent; color: var(--amber); }
.fp-lead [data-lead-success], .fp-lead [data-lead-error] { grid-column: 1 / -1; margin: 0; padding: 0 0.9rem 0.9rem; }
.fp-lead [data-lead-success] { color: var(--ink); background: var(--amber); font-family: var(--f-head); font-size: 1.25rem; font-weight: 700; padding: 0.9rem; margin: 0 0.9rem 0.9rem; }
.fp-lead [data-lead-error] { color: #ffc9b8; }
@media (max-width: 820px) {
.quote .shell { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.fp-lead { grid-template-columns: 1fr; }
.fp-lead label:nth-of-type(odd):not(.wide) { border-right: 0; }
}
.from-guides { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.from-guides .shell { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: 1rem 3rem; align-items: start; }
.guide-link { display: block; border-top: 2px solid var(--ink); padding-top: 1rem; color: var(--ink); text-decoration: none; }
.guide-link h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); text-decoration: underline; text-decoration-color: var(--line-soft); text-underline-offset: 0.15em; }
.guide-link:hover h3 { text-decoration-color: var(--amber-deep); }
.guide-link p { color: var(--muted); max-width: 60ch; }
@media (max-width: 820px) { .from-guides .shell { grid-template-columns: 1fr; } }
.page-head { padding-block: clamp(1.75rem, 4vw, 3.25rem) 0; }
.page-head .shell { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: end; }
.crumbs { font-size: 0.92rem; color: var(--muted); margin-bottom: 0.9rem; }
.crumbs a { color: var(--muted); }
.page-head--contact .lede { font-size: 1.15rem; line-height: 1.5; margin: 0; max-width: 56ch; }
.page-head--contact { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); margin: 0; max-width: 20ch; }
.detail { margin: 0; border: 2px solid var(--ink); background: var(--sheet); padding: 0.75rem; position: relative; }
.detail::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--rule); pointer-events: none; }
.detail svg { display: block; width: 100%; height: auto; }
.detail figcaption { font-family: var(--f-head); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--muted); padding: 0.4rem 0.25rem 0; }
@media (max-width: 820px) { .page-head .shell { grid-template-columns: 1fr; } }
.page-body { padding-block: clamp(2rem, 5vw, 3.5rem); }
.page-body .shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem 4rem; align-items: start; }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.35rem; }
.prose .lede { font-size: 1.2rem; line-height: 1.5; }
.aside { position: sticky; top: 1rem; border: 2px solid var(--ink); background: var(--sheet); padding: 1.1rem 1.1rem 1.25rem; }
.aside h2 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.aside p { font-size: 0.97rem; }
.aside ul { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--rule); }
.aside li { border-bottom: 1px solid var(--rule); }
.aside li a { display: flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.aside li a:hover { color: var(--line); }
.aside li a[aria-current="page"] { font-weight: 600; box-shadow: inset 4px 0 0 var(--amber); padding-left: 0.6rem; }
@media (max-width: 900px) { .page-body .shell { grid-template-columns: 1fr; } .aside { position: static; } }
.schedule { list-style: none; padding: 0; margin: 1rem 0 1.5rem; border-top: 2px solid var(--ink); }
.schedule li { display: grid; grid-template-columns: minmax(9rem, 0.4fr) minmax(0, 1fr); gap: 0.25rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.schedule h3 { font-size: 1.2rem; margin: 0; }
.schedule p { margin: 0; }
@media (max-width: 560px) { .schedule li { grid-template-columns: 1fr; } }
.steps { list-style: none; padding: 0; margin: 1rem 0 1.5rem; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; padding: 0.9rem 0; border-top: 1px solid var(--rule); margin: 0; }
.steps li::before { content: counter(step); font-family: var(--f-head); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--line); }
.steps h3 { font-size: 1.2rem; margin: 0 0 0.25rem; }
.steps p { margin: 0; }
.closing { border-top: 2px solid var(--ink); padding-top: 1.25rem; margin-top: 2rem; }
.site-footer { background: var(--block-2); color: var(--block-muted); padding-block: 2rem; font-size: 0.95rem; }
.site-footer .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.site-footer a { color: var(--block-ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
body .sr-article, body .sr-index {
--sr-ink: var(--ink);
--sr-accent: var(--line);
--sr-text: #2f3a3e;
--sr-paper: var(--sheet);
--sr-rule: var(--rule);
--sr-tint: var(--sheet);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--rule); }
.schedule .profile { display: block; width: 96px; height: auto; margin-bottom: 0.4rem; }
.prose .note { font-size: 0.9rem; color: var(--muted); }
.steps li > div > p { margin: 0; }
.contact-lede { max-width: 60ch; }
body[data-page="metal-roof"] .nav a[href="/metal-roof/"],
body[data-page="colorbond-roofing"] .nav a[href="/colorbond-roofing/"],
body[data-page="tile-roofs"] .nav a[href="/tile-roofs/"],
body[data-page="rural-roof"] .nav a[href="/rural-roof/"],
body[data-page="fibro"] .nav a[href="/fibro/"],
body[data-page="guttering"] .nav a[href="/guttering/"],
body[data-page="leaf-screener"] .nav a[href="/leaf-screener/"],
body[data-page="roof-services"] .nav a[href="/roof-services/"],
body[data-page="roof-restoration"] .nav a[href="/roof-restoration/"],
body[data-page="guides"] .nav a[href="/guides/"],
body[data-page="about"] .nav a[href="/about/"],
body[data-page="contact"] .nav a[href="/contact/"] { border-bottom-color: var(--amber); }
.prose .schedule, .prose .steps { padding-left: 0; }