/* CAL Roofing Process standalone Gutenberg pattern; all styles confined to .cal-roof-flow */
.cal-roof-flow{--rf-gold:#d39849;--rf-ink:#15191d;--rf-paper:#f8f7f5;--rf-muted:#56606a;background:var(--rf-paper);color:var(--rf-ink);padding:clamp(62px,6.5vw,104px) 0 0!important;margin-block:0!important;overflow:hidden}
.cal-roof-flow *, .cal-roof-flow *::before,.cal-roof-flow *::after{box-sizing:border-box}
.cal-roof-flow .cal-roof-container{width:min(100% - 48px,1230px);max-width:1230px!important;margin-inline:auto!important}
.cal-roof-flow .cal-roof-kicker{display:flex;align-items:center;gap:13px;color:#bd7428!important;font-size:13px!important;font-weight:800!important;letter-spacing:.135em!important;text-transform:uppercase!important;margin:0 0 13px!important}
.cal-roof-flow .cal-roof-kicker::after{content:'';display:block;width:75px;height:1px;background:#c48e50}
.cal-roof-flow .cal-roof-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:45px;align-items:end;padding-bottom:16px}
.cal-roof-flow .cal-roof-heading{font:500 clamp(32px,3.75vw,53px)/1.035 Arial,Helvetica,sans-serif!important;letter-spacing:-.034em!important;text-transform:uppercase!important;max-width:740px;margin:0!important;color:#171b1d!important}
.cal-roof-flow .cal-roof-intro{font:400 16px/1.65 Arial,Helvetica,sans-serif!important;color:#525c64!important;max-width:440px;margin:0 0 3px!important}
.cal-roof-flow .cal-roof-track{position:relative;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:23px!important;margin:49px 0 25px!important;padding-top:3px}
.cal-roof-flow .cal-roof-track::before{content:'';height:2px;background:linear-gradient(90deg,#d8b58a 15%,#d39849 70%,#d8b58a);position:absolute;left:45px;right:45px;top:37px;z-index:0}
.cal-roof-flow .cal-roof-track>.wp-block-column{min-width:0;margin:0!important}
.cal-roof-flow .cal-roof-step{position:relative;height:100%;margin:0!important;min-height:207px;padding:0 6px 24px 0}
.cal-roof-flow .cal-roof-icon{position:relative;z-index:2;width:74px;height:74px;background:var(--rf-paper);border:2px solid var(--rf-gold);border-radius:50%;box-shadow:0 0 0 8px var(--rf-paper);display:grid;place-items:center;margin:0 0 24px!important}
.cal-roof-flow .cal-roof-icon::before{content:'';display:block;width:34px;height:34px;background-color:#b87c33;-webkit-mask:var(--cal-roof-icon) center/contain no-repeat;mask:var(--cal-roof-icon) center/contain no-repeat}
.cal-roof-flow .cal-roof-icon-1{--cal-roof-icon:url('search.svg')}.cal-roof-flow .cal-roof-icon-2{--cal-roof-icon:url('clipboard.svg')}.cal-roof-flow .cal-roof-icon-3{--cal-roof-icon:url('hammer.svg')}.cal-roof-flow .cal-roof-icon-4{--cal-roof-icon:url('shield.svg')}
.cal-roof-flow .cal-roof-num{font-size:11px!important;letter-spacing:.16em!important;color:#b9772d!important;font-weight:800!important;margin:0 0 8px!important}
.cal-roof-flow .cal-roof-step-title{font-size:20px!important;line-height:1.2!important;letter-spacing:-.022em!important;font-weight:800!important;text-transform:uppercase!important;margin:0 0 9px!important;color:#171b1d!important}
.cal-roof-flow .cal-roof-step-text{font-size:14px!important;line-height:1.65!important;color:#59626a!important;max-width:255px;margin:0!important}
.cal-roof-flow .cal-roof-note{padding:15px 19px 17px!important;border-left:3px solid var(--rf-gold);background:#efeae3;margin:0 0 clamp(55px,5.5vw,88px)!important;color:#555b61!important;font-size:13px!important;line-height:1.55!important}
.cal-roof-flow .cal-roof-gallery{padding:clamp(50px,5.3vw,80px) 0 clamp(62px,6vw,90px)!important;background:linear-gradient(125deg,#171b1f,#0d1114);color:#fff;position:relative}
.cal-roof-flow .cal-roof-gallery::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(120deg,transparent 0%,rgba(211,152,73,.04) 100%)}
.cal-roof-flow .cal-roof-gallery>.cal-roof-container{position:relative}
.cal-roof-flow .cal-roof-gallery .cal-roof-kicker{color:#dca45c!important}
.cal-roof-flow .cal-roof-gallery .cal-roof-heading{color:#fff!important}
.cal-roof-flow .cal-roof-gallery .cal-roof-intro{color:#d1d3d4!important}
.cal-roof-flow .cal-roof-photo-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px!important;margin:33px 0 0!important;align-items:stretch}
.cal-roof-flow .cal-roof-photo-grid>.wp-block-column{min-width:0;margin:0!important;display:flex;flex-direction:column;gap:0}
.cal-roof-flow figure.cal-roof-photo{aspect-ratio:1.36;position:relative;overflow:hidden;display:block;margin:0!important;border:1px solid #404245;background:#22272b}
.cal-roof-flow figure.cal-roof-photo img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .4s ease}
.cal-roof-flow .cal-roof-photo-grid>.wp-block-column:hover figure.cal-roof-photo img{transform:scale(1.035)}
.cal-roof-flow .cal-roof-photo-body{border:1px solid #3b3d40;border-top:2px solid var(--rf-gold);padding:20px 19px 22px!important;flex:1;background:#1b2024;margin:0!important}
.cal-roof-flow .cal-roof-photo-number{color:#d49b54!important;font-size:11px!important;font-weight:800!important;letter-spacing:.13em!important;margin:0 0 7px!important}
.cal-roof-flow .cal-roof-photo-title{font-size:18px!important;line-height:1.24!important;text-transform:uppercase!important;font-weight:800!important;letter-spacing:-.01em!important;color:#fff!important;margin:0 0 8px!important}
.cal-roof-flow .cal-roof-photo-description{font-size:13px!important;line-height:1.55!important;color:#bfc4c8!important;margin:0!important}
.cal-roof-flow .cal-roof-gallery-footer{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:28px 0 0!important}
.cal-roof-flow .cal-roof-gallery-footer p{margin:0!important;font-size:13px!important;color:#b6b8bb!important;line-height:1.5!important;max-width:540px}
.cal-roof-flow .cal-roof-cta{background:#d39849!important;border:0!important;display:inline-flex!important;align-items:center;justify-content:center;text-transform:uppercase;font-size:12px!important;font-weight:800!important;letter-spacing:.04em!important;color:#11161a!important;text-decoration:none!important;padding:16px 24px!important;border-radius:0!important;min-width:190px;transition:background .2s ease}
.cal-roof-flow .cal-roof-cta:hover{background:#e8b46c!important;color:#11161a!important}
.cal-roof-flow :is(a,button):focus-visible{outline:3px solid #f8ce8b;outline-offset:4px}
@media(max-width:950px){.cal-roof-flow .cal-roof-head{gap:25px}.cal-roof-flow .cal-roof-track{gap:14px!important}.cal-roof-flow .cal-roof-step-title{font-size:17px!important}.cal-roof-flow .cal-roof-photo-grid{gap:13px!important}.cal-roof-flow .cal-roof-photo-body{padding:17px 14px 18px!important}}
@media(max-width:700px){.cal-roof-flow .cal-roof-container{width:min(100% - 38px,1230px)}.cal-roof-flow .cal-roof-head{grid-template-columns:1fr!important;gap:14px}.cal-roof-flow .cal-roof-intro{max-width:650px;font-size:15px!important}.cal-roof-flow .cal-roof-track{grid-template-columns:1fr 1fr!important;gap:20px 18px!important;margin:38px 0 24px!important}.cal-roof-flow .cal-roof-track::before{display:none}.cal-roof-flow .cal-roof-icon{width:60px;height:60px;margin-bottom:18px!important;box-shadow:none}.cal-roof-flow .cal-roof-icon::before{width:28px;height:28px}.cal-roof-flow .cal-roof-step{min-height:210px;border-top:1px solid #dfd6cb;padding-top:15px}.cal-roof-flow .cal-roof-photo-grid{grid-template-columns:1fr!important;gap:20px!important}.cal-roof-flow figure.cal-roof-photo{aspect-ratio:1.55}.cal-roof-flow .cal-roof-gallery-footer{align-items:stretch;flex-direction:column}.cal-roof-flow .cal-roof-cta{width:100%}}
@media(max-width:400px){.cal-roof-flow .cal-roof-track{grid-template-columns:1fr!important;gap:0!important}.cal-roof-flow .cal-roof-step{min-height:0;display:grid;grid-template-columns:64px 1fr;grid-template-rows:22px auto auto;column-gap:12px;padding:14px 0 18px}.cal-roof-flow .cal-roof-icon{grid-row:1/4;grid-column:1;margin:0!important}.cal-roof-flow .cal-roof-num{grid-row:1;grid-column:2;margin:0!important}.cal-roof-flow .cal-roof-step-title{grid-row:2;grid-column:2;margin:0 0 6px!important}.cal-roof-flow .cal-roof-step-text{grid-row:3;grid-column:2}.cal-roof-flow .cal-roof-heading{font-size:clamp(30px,9vw,39px)!important}}
@media(prefers-reduced-motion:reduce){.cal-roof-flow figure.cal-roof-photo img{transition:none}}