:root{--layer-font-family:var(--font-primary);--layer-font-size-label:14px;--layer-font-weight-label:900;--layer-line-height-label:100%;--layer-letter-spacing-label:.14px;--layer-color-label:var(--color-text-primary);--layer-color-bg:var(--color-white);--layer-color-accent:var(--color-orange);--layer-color-surface:var(--color-offwhite);--layer-color-surface-dark:var(--color-dark-bg);--layer-color-text-on-dark:var(--color-text-white);--layer-color-subtitle:var(--color-gray-250);--layer-color-card-bg:var(--color-offwhite);--layer-color-border:var(--color-surface-card-border);--layer-tab-width:54px;--layer-tab-height:460px;--layer-tab-radius:8px;--layer-card-radius:var(--radius-sm);--layer-panel-radius:var(--radius-xl);--layer-panel-padding:var(--spacing-3xl);--layer-gap:var(--spacing-lg);--layer-section-title-size:var(--fs-3xl);--layer-card-title-size:var(--fs-sm);--layer-card-title-weight:var(--fw-bold);--layer-card-subtitle-size:13px;--layer-card-subtitle-weight:var(--fw-medium);--layer-line-height-145:1.45}@theme{--color-layer-label: var(--layer-color-label); --color-layer-bg: var(--layer-color-bg); --color-layer-accent: var(--layer-color-accent); --color-layer-surface: var(--layer-color-surface); --color-layer-surface-dark: var(--layer-color-surface-dark); --color-layer-subtitle: var(--layer-color-subtitle); --color-layer-card-bg: var(--layer-color-card-bg); --color-layer-on-dark: var(--layer-color-text-on-dark); --color-layer-border: var(--layer-color-border); --radius-layer-tab: var(--layer-tab-radius); --radius-layer-card: var(--layer-card-radius); --radius-layer-panel: var(--layer-panel-radius); --spacing-layer: var(--layer-gap); --font-layer: var(--layer-font-family);}.layer-tab-label{font-family:var(--layer-font-family);font-size:var(--layer-font-size-label);font-weight:var(--layer-font-weight-label);line-height:var(--layer-line-height-label);letter-spacing:var(--layer-letter-spacing-label);color:var(--layer-color-label);writing-mode:vertical-rl;text-transform:none;white-space:nowrap;transform:rotate(180deg)}.layer-section-title{font-family:var(--layer-font-family);font-size:var(--layer-section-title-size);color:var(--layer-color-label);letter-spacing:-.01em;font-weight:900;line-height:1.1}.layer-section-title--on-dark{color:var(--layer-color-text-on-dark)}.layer-card-title{font-family:var(--layer-font-family);font-size:var(--layer-card-title-size);font-weight:var(--layer-card-title-weight);line-height:var(--layer-line-height-145);color:var(--layer-color-label)}.layer-card-title--on-dark{color:var(--layer-color-text-on-dark)}.layer-card-subtitle{font-family:var(--layer-font-family);font-size:var(--layer-card-subtitle-size);font-weight:var(--layer-card-subtitle-weight);line-height:var(--layer-line-height-145);color:var(--layer-color-subtitle)}.layer-card-subtitle--on-dark{color:#ffffffb8}.layer-card-learn-more{font-family:var(--layer-font-family);font-size:var(--layer-card-subtitle-size);color:var(--layer-color-accent);font-weight:600;text-decoration:none}.layer-card-learn-more:hover{text-decoration:underline}.layer-card-scroll-row{scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;gap:var(--layer-gap);-webkit-overflow-scrolling:touch;padding-bottom:4px;display:flex;overflow-x:auto}.layer-card-scroll-row::-webkit-scrollbar{display:none}.layer-card-scroll-row>*{scroll-snap-align:start;flex:none;min-width:260px}.layer-tab-pill{width:var(--layer-tab-width);height:var(--layer-tab-height);border-radius:var(--layer-tab-radius);background:var(--layer-color-bg);cursor:pointer;border:1px solid var(--layer-color-border);flex:none;justify-content:center;align-items:flex-end;padding:16px 0;transition:transform .2s,box-shadow .2s;display:flex;position:relative}.layer-tab-pill:hover{transform:translateY(-2px);box-shadow:0 8px 24px -12px #0f172a2e}.layer-tab-pill__arrow{border:1px solid var(--layer-color-accent);width:22px;height:22px;color:var(--layer-color-accent);border-radius:999px;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:10px;right:15px}.layer-accordion-header{background:var(--layer-color-bg);border:1px solid var(--layer-color-border);border-radius:var(--layer-card-radius);cursor:pointer;justify-content:space-between;align-items:center;width:100%;padding:14px 20px;transition:background .2s,border-color .2s,color .2s;display:flex}.layer-accordion-header:not([aria-expanded=true]):hover{background:0 0}.layer-accordion-header[aria-expanded=true]{background:var(--color-orange);border-color:var(--color-orange)}.layer-accordion-header[aria-expanded=true] .layer-accordion-header__title,.layer-accordion-header[aria-expanded=true] .layer-accordion-chevron{color:#fff}.layer-accordion-header__title{font-family:var(--layer-font-family);color:var(--layer-color-label);letter-spacing:.14px;font-size:15px;font-weight:900}.layer-accordion-chevron{width:18px;height:18px;color:var(--layer-color-accent);transition:transform .25s,color .2s}.layer-accordion-chevron--open{transform:rotate(180deg)}.layer-accordion-body{opacity:0;max-height:0;margin-top:0;transition:max-height .35s,opacity .25s,margin-top .25s;overflow:hidden}.layer-accordion-body--open{opacity:1;max-height:1600px;margin-top:12px}.layer-panel-surface{background:var(--layer-color-bg);border-radius:var(--layer-panel-radius);padding:var(--layer-panel-padding);flex-direction:column;flex:auto;min-width:0;display:flex;position:relative}.layer-card-grid{flex:auto;grid-auto-rows:1fr;min-height:0}.layer-card{background:#f8f5f1;border-radius:6px;min-height:220px}.layer-card-title-link{color:inherit;cursor:pointer;text-decoration:none}.layer-card-arrow{color:var(--color-orange);white-space:nowrap;margin-left:6px;font-weight:700}.layer-card-media__img{transform-origin:100% 100%}@media (width>=1024px){.layer-card{min-height:160px}}.layer-panel-surface--dark{background:var(--layer-color-surface-dark)}.layer-sticky-stage{top:calc(50vh - (var(--layer-tab-height) / 2));align-items:stretch;gap:var(--layer-gap);height:var(--layer-tab-height);display:flex;position:sticky}.layer-sticky-stage>*{height:var(--layer-tab-height)}.layer-sticky-stage .layer-panel-surface{height:100%;overflow:hidden}.layer-slot{height:var(--layer-tab-height);will-change:flex-grow, flex-basis;min-width:0;transition:flex-grow .55s cubic-bezier(.22,1,.36,1),flex-basis .55s cubic-bezier(.22,1,.36,1);position:relative}.layer-slot--active{cursor:default;flex:1 1 0}.layer-slot--collapsed{flex:0 0 var(--layer-tab-width);cursor:pointer}.layer-slot__pill,.layer-slot__panel{transition:opacity .35s;position:absolute;inset:0}.layer-slot--active .layer-slot__pill{opacity:0;pointer-events:none;transition-delay:0s}.layer-slot--active .layer-slot__panel,.layer-slot--collapsed .layer-slot__pill{opacity:1;transition-delay:.2s}.layer-slot--collapsed .layer-slot__panel{opacity:0;pointer-events:none;transition-delay:0s}.layer-slot__pill>*,.layer-slot__panel>*{width:100%;height:100%}@media (width<=1023px){.layer-slot,.layer-slot__pill,.layer-slot__panel{height:auto;transition:none;position:static}.layer-sticky-stage{flex-direction:column;height:auto;position:static}.layer-sticky-stage>*,.layer-sticky-stage .layer-panel-surface{height:auto}}.ai-layer-card{flex-direction:column;min-width:0;display:flex}.ai-layer-card__media{border-radius:var(--layer-card-radius);width:100%;overflow:hidden}.ai-layer-card__img{width:100%;height:auto;display:block}.ai-layer-card__title{font-family:var(--layer-font-family);font-size:var(--layer-card-title-size);font-weight:var(--layer-card-title-weight);line-height:var(--layer-line-height-145);color:var(--layer-color-label);margin-top:12px}.ai-layer-card__subtitle{font-family:var(--layer-font-family);font-size:var(--layer-card-subtitle-size);font-weight:var(--layer-card-subtitle-weight);line-height:var(--layer-line-height-145);color:var(--layer-color-subtitle);margin-top:2px}.ai-layer-card__learn-more{font-family:var(--layer-font-family);font-size:var(--layer-card-subtitle-size);color:var(--layer-color-accent);align-self:flex-start;margin-top:4px;font-weight:600;text-decoration:none}.ai-layer-card__learn-more:hover{text-decoration:underline}@media (width<=1023px){.layer-card-grid>.ai-layer-card:first-child{grid-column:1/-1}.ai-layer-card__media{aspect-ratio:4/3}.ai-layer-card__img{object-fit:cover;object-position:top center;width:100%;height:100%}}@media (width>=1024px){.ai-layer-card{height:100%}.ai-layer-card__media{flex:1 1 0;min-height:0}.ai-layer-card__img{object-fit:cover;object-position:left center;width:100%;height:100%}}.bg-image-card{flex-direction:column;min-width:0;height:100%;display:flex}.bg-image-card--link{color:inherit;cursor:pointer;text-decoration:none}.bg-image-card__media{aspect-ratio:4/3;border-radius:var(--layer-card-radius);background-image:url(/images/zuper-for-roofing/sitcky-card-bg.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:flex-end;align-items:flex-start;width:100%;padding:18px 0 0 18px;display:flex;overflow:hidden}.bg-image-card__img{width:100%;height:auto;display:block}.bg-image-card__body{background:#f8f5f1;border-radius:0 0 8px 8px;padding:11px 6px}.bg-image-card__title{font-family:var(--layer-font-family);font-size:var(--layer-card-title-size);font-weight:var(--layer-card-title-weight);line-height:var(--layer-line-height-145);color:var(--layer-color-label);min-height:calc(var(--layer-line-height-145) * 2em)}.bg-image-card__subtitle{font-family:var(--layer-font-family);font-size:var(--layer-card-subtitle-size);font-weight:var(--layer-card-subtitle-weight);line-height:var(--layer-line-height-145);color:var(--layer-color-subtitle);min-height:calc(var(--layer-line-height-145) * 2em);margin-top:2px}@media (width>=1024px){.bg-image-card__media{aspect-ratio:auto;flex:1 1 0;min-height:0}}.layer-ai-banner{background:linear-gradient(90deg, var(--color-maroon-deep,#3a0d0a) 0%, var(--layer-color-accent) 60%);border-radius:var(--layer-card-radius);color:var(--layer-color-text-on-dark);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding:6px 20px;display:flex}.layer-ai-banner__text{font-family:var(--layer-font-family);font-size:16px;font-weight:700}.layer-ai-banner__image{flex-shrink:0;width:auto;height:45px;display:block}
