.roof-system-page{background:var(--warm-cream);padding-bottom:80px}.roof-system-intro{padding-block:26px 36px}.roof-system-intro .breadcrumbs{margin-bottom:24px;padding-top:0;color:#526575}.roof-system-intro .breadcrumbs a{color:var(--shield-navy);text-decoration-color:rgb(11 47 82/38%)}.roof-system-eyebrow{margin-bottom:12px;color:var(--action-red);font-size:var(--type-label);font-weight:750;letter-spacing:.12em;text-transform:uppercase}.roof-system-intro h1{max-width:900px;margin-bottom:18px;font-size:clamp(2.75rem,5.5vw,5rem);line-height:1}.roof-system-intro>p:last-child{max-width:760px;font-size:1.125rem;line-height:1.6}.roof-system-model-note{max-width:840px;margin-top:18px;font-size:.875rem;line-height:1.6;color:#475569}.roof-system-reference{display:grid;grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr);gap:clamp(42px,7vw,104px);margin-top:clamp(64px,8vw,112px);border-top:1px solid #bac3c9;padding-top:clamp(42px,6vw,72px)}.roof-system-reference-heading{align-self:start;position:sticky;top:126px}.roof-system-reference-heading h2{max-width:580px;font-size:clamp(2.45rem,4vw,4.5rem);line-height:.98}.roof-system-reference-heading>p:last-child{max-width:520px;margin-top:20px;color:#475569;line-height:1.65}.roof-system-reference-list{margin:0;padding:0;list-style:none}.roof-system-reference-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;border-top:1px solid #bac3c9;padding:26px 0 30px}.roof-system-reference-list li:last-child{border-bottom:1px solid #bac3c9}.roof-system-reference-list>li>span{color:var(--action-red);font-size:var(--type-micro);font-weight:750;letter-spacing:.12em}.roof-system-reference-list h3{font-size:clamp(1.65rem,2.6vw,2.5rem);line-height:1}.roof-system-reference-list strong{display:block;margin-top:7px;color:#385269}.roof-system-reference-list p{margin-top:10px;color:#475569;line-height:1.6}.roof-system-next{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:48px;padding-top:36px;border-top:1px solid #bac3c9}.roof-system-next h2{margin-bottom:12px;font-size:clamp(2rem,3vw,3rem);line-height:1.1}.roof-system-next-actions{display:flex;flex-direction:column;gap:16px;align-items:flex-start}@media (max-width:700px){.roof-system-page{padding-bottom:104px}.roof-system-intro{padding-block:16px 28px}.roof-system-intro .breadcrumbs{margin-bottom:12px}.roof-system-reference{grid-template-columns:1fr;gap:32px;margin-top:54px;padding-top:38px}.roof-system-reference-heading{position:static}.roof-system-reference-list li{grid-template-columns:36px minmax(0,1fr);gap:14px}.roof-system-next{flex-direction:column;align-items:flex-start;gap:24px;margin-top:32px}}.roof-system{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start;border:1px solid var(--warm-border);background:var(--white);color:var(--shield-navy)}.roof-system noscript{grid-column:1/-1;padding:1.5rem;border-top:1px solid var(--warm-border)}.roof-system-text-guide{padding-left:1.5rem}.roof-system-text-guide li{padding:1rem 0}.roof-system-text-guide h2{font-size:1.25rem}.roof-system-stage{min-width:0;background:var(--warm-cream)}.roof-system-stage-top{display:flex;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--warm-border);font-size:var(--type-label);font-weight:700}.roof-system-stage-top>span:first-child{display:flex;align-items:center;gap:.5rem}.roof-system-stage-top>span:last-child{font-weight:400}.roof-system-canvas-wrap{position:relative;height:520px;overflow:hidden}.roof-system-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}.roof-system-canvas:active{cursor:grabbing}.roof-system-static{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.roof-system-view-caption{position:absolute;left:1.5rem;bottom:.5rem;display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem .5rem .5rem;background:var(--warm-cream);font-size:var(--type-label);font-weight:700;pointer-events:none}.roof-system-view-caption>span{display:grid;place-items:center;width:32px;height:32px;background:var(--action-red);color:var(--white)}.roof-system-status{display:block;margin:0;padding:.5rem 1.5rem 1rem;font-size:var(--type-label);color:var(--slate)}.roof-system-toolbar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding:1rem 1.5rem 1.25rem;border-top:1px solid var(--warm-border)}.roof-system button{min-height:44px;border:1px solid var(--warm-border);border-radius:2px;cursor:pointer;font:inherit;font-size:var(--type-label);font-weight:600;color:var(--shield-navy);background:var(--white);transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out}.roof-system button:focus-visible,.roof-system input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.roof-system button:active:not(:disabled){transform:translateY(1px)}.roof-system button:disabled{opacity:.5;cursor:not-allowed}.roof-system-rotate-buttons,.roof-system-view-buttons{display:flex;gap:.25rem}.roof-system-view-buttons>button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem .75rem}.roof-system-view-buttons>button[aria-pressed=true]{border-color:var(--shield-navy);background:var(--shield-navy);color:var(--white)}.roof-system-rotate-buttons>button{display:grid;place-items:center;min-width:44px;padding:.5rem .75rem}.roof-system-separation{flex-basis:100%;display:grid;grid-template-columns:auto minmax(0,1fr) 36px;gap:.75rem;align-items:center;font-size:var(--type-label)}.roof-system-separation input{width:100%;min-width:0;min-height:44px;margin:0;accent-color:var(--action-red);cursor:pointer}.roof-system-separation output{text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.roof-system-guide{border-left:1px solid var(--warm-border)}.roof-system-guide-heading{padding:1.25rem 1.5rem;border-bottom:1px solid var(--warm-border)}.roof-system-guide-heading p{margin:0;font-weight:700}.roof-system-guide-heading>span{font-size:var(--type-label);color:var(--slate)}.roof-system-layer-list{display:grid;grid-template-columns:1fr;margin:0;padding:0;list-style:none}.roof-system-layer-list li{min-width:0}.roof-system-layer-list button{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;align-items:center;gap:.75rem;width:100%;min-height:62px;border:0;border-bottom:1px solid var(--warm-border);border-radius:0;padding:.625rem 1.25rem;text-align:left}.roof-system-layer-list button[aria-pressed=true]{background:var(--shield-navy);color:var(--white)}.roof-system-layer-number{font-size:var(--type-label);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;opacity:.8}.roof-system-layer-list strong{display:block;font-weight:700;line-height:1.3}.roof-system-layer-list button>span:nth-child(2)>span{display:block;margin-top:.125rem;font-size:var(--type-micro);font-weight:400;line-height:1.3}.roof-system-detail{padding:1.25rem 1.5rem;background:var(--light-cream)}.roof-system-detail>p:first-child{margin:0 0 .5rem;color:var(--action-red);font-size:var(--type-label);font-weight:700}.roof-system-detail h2{margin:0 0 .75rem;font-family:var(--font-display),Arial,sans-serif;font-size:1.75rem;line-height:1.1}.roof-system-detail>strong{display:block;font-size:1rem;font-weight:600;line-height:1.45}.roof-system-detail>p:last-child{margin:.75rem 0 0;font-size:var(--type-label);line-height:1.65;color:var(--slate)}@media (hover:hover){.roof-system button:hover:not(:disabled):not([aria-pressed=true]){background:var(--light-cream);border-color:var(--shield-navy)}}@media (max-width:1100px){.roof-system{grid-template-columns:minmax(0,1fr) 300px}.roof-system-canvas-wrap{height:500px}.roof-system-toolbar{gap:.75rem}}@media (max-width:850px){.roof-system{grid-template-columns:minmax(0,1fr)}.roof-system-canvas-wrap{height:460px}.roof-system-guide{border-left:0;border-top:1px solid var(--warm-border)}.roof-system-layer-list{grid-template-columns:1fr 1fr}.roof-system-layer-list li:nth-child(odd){border-right:1px solid var(--warm-border)}.roof-system-layer-list button{padding:.75rem 1rem}.roof-system-detail{padding:1.5rem}}@media (max-width:480px){.roof-system-stage-top{padding:1rem;gap:.5rem}.roof-system-stage-top>span:last-child{display:none}.roof-system-canvas-wrap{height:370px}.roof-system-view-caption{left:.75rem;bottom:0}.roof-system-status,.roof-system-toolbar{padding:.75rem 1rem}.roof-system-rotate-buttons,.roof-system-view-buttons{flex:1 1 auto}.roof-system-rotate-buttons>button:last-child,.roof-system-view-buttons>button{flex:1 1}.roof-system-separation{grid-template-columns:auto minmax(0,1fr) 32px;gap:.5rem}.roof-system-layer-list button{grid-template-columns:22px minmax(0,1fr);gap:.5rem;min-height:76px;padding:.75rem}.roof-system-layer-check{display:none}.roof-system-detail,.roof-system-guide-heading{padding:1rem}}@media (prefers-reduced-motion:reduce){.roof-system button{transition:none}.roof-system button:active:not(:disabled){transform:none}}