/* Building materials: the index on the home page and the /materials page, drawn as a material schedule
   (sheet numbers M-01 to M-08, ruled rows, navy title plates) in the drawing-set language of the site.
   Photos are National Lumber project archive shots and real Quality Design Cabinet installs. Motion is the
   shared kit in wr-group.js: Scroll Reveal Image on the row photos and the Animated Beam on the pricing steps.
   Loads after wr-group.css and uses its tokens. */

/* ---------- Home: the material index, right under the group band ---------- */
.mt-home{padding:68px 0 20px}
.mt-home-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:22px 64px;align-items:center}
.takeoff-site .mt-home-copy h2{margin:0 0 20px;max-width:12ch}
.takeoff-site .mt-home-copy p:not(.tk-overline){margin:0;max-width:44ch;font-size:18px;line-height:1.6;color:var(--wr-ink)}
.mt-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.takeoff-site .mt-actions .btn{min-height:50px}
.mt-mosaic{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:212px 178px;gap:10px}
.mt-tile{position:relative;display:block;overflow:hidden;background:#d9d3c5;color:#fff;text-decoration:none}
.mt-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .35s ease}
.mt-tile--tall{grid-row:1/3}
.mt-tile--wide{grid-column:2/4;border-radius:0 0 64px 0}
.mt-tile--tall img{object-position:50% 40%}
.mt-tile--wide img{object-position:50% 62%}
.mt-plate{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:5px;padding:10px 14px 11px;background:var(--wr-navy);font:600 15px/1.2 var(--font-body);letter-spacing:.005em;color:#fff}
.mt-code{font:500 10px/1 var(--wr-mono);letter-spacing:.16em;color:var(--wr-gold-l)}
.mt-tile:hover img{filter:brightness(1.07) saturate(1.06)}
.mt-tile:hover .mt-plate{background:#1c3559}
.mt-tile:focus-visible{outline:3px solid var(--wr-gold);outline-offset:3px}
.takeoff-site .mt-also{grid-column:2;margin:0;max-width:none;font-size:15px;line-height:1.55;color:var(--wr-muted)}
.mt-also a{color:var(--wr-navy);font-weight:600;text-underline-offset:4px}

/* ---------- /materials: the schedule ---------- */
.mt-hero .pc-tb .pc-stamp{right:118px}
.mt-sched{padding:36px 0 60px;scroll-margin-top:96px}
.mt-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 80px;align-items:end;margin-bottom:36px}
.takeoff-site .mt-head h2{margin:0;max-width:none}
.takeoff-site .mt-head>p{margin:0;max-width:52ch;font-size:17px;line-height:1.6;color:var(--wr-ink)}
.mt-schedule{border-top:1.5px solid var(--wr-navy)}
.mt-row{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,.95fr) minmax(0,1.27fr);gap:40px;align-items:start;padding:30px 0;border-bottom:1px solid var(--wr-line);scroll-margin-top:110px}
.takeoff-site .mt-row h3{margin:12px 0 8px;font-size:clamp(25px,2.2vw,31px);line-height:1.15}
.takeoff-site .mt-sub{margin:0;max-width:none;font:500 15px/1.45 var(--font-body);color:var(--wr-gold-t)}
.mt-visual{margin:0}
.mt-visual .wr-frame{--wr-r:0 0 44px 0;aspect-ratio:16/10}
.mt-visual figcaption{margin-top:8px;font-size:12px;line-height:1.5;color:var(--wr-muted)}
.mt-items{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 16px;padding:0;list-style:none}
.mt-items li{padding:6px 9px 5px;border:1px solid var(--wr-line);background:#ffffff8c;font:500 11px/1.3 var(--wr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wr-ink)}
.takeoff-site .mt-row-copy p{margin:0 0 12px;font-size:16.5px;line-height:1.6;color:var(--wr-ink)}
.mt-price{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--wr-navy);text-underline-offset:5px}
.mt-price .nl-icon,.mt-more-list a .nl-icon{width:18px;height:18px;flex:none}
.mt-price:hover,.mt-more-list a:hover{color:var(--wr-gold-t)}

.mt-more{margin-top:40px}
.takeoff-site .mt-more-title{margin:0 0 12px;max-width:none;font:600 13px/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--wr-gold-t)}
.mt-more-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0;padding:0;list-style:none;border-top:1.5px solid var(--wr-navy)}
.mt-more-list li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 14px;align-items:start;padding:18px 0 16px;border-bottom:1px solid var(--wr-line);scroll-margin-top:110px}
.mt-more-list .wr-sheet-no{grid-row:1/3;padding-top:5px}
.mt-more-list strong{grid-column:2;font:600 18px/1.3 var(--font-body);color:var(--wr-navy)}
.mt-more-list .mt-more-text{grid-column:2;font-size:15px;line-height:1.5;color:var(--wr-muted)}
.mt-more-list a{grid-column:3;grid-row:1/3;align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:600;color:var(--wr-navy);text-underline-offset:5px;white-space:nowrap}

/* ---------- /materials: contractor pricing, the close ---------- */
.mt-quote{padding:60px 0;background:var(--wr-stone);scroll-margin-top:96px}
.mt-quote-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:32px 72px;align-items:center}
.takeoff-site .mt-quote-copy h2{margin:0 0 26px;max-width:none;font-size:clamp(34px,3.4vw,50px)}
.mt-steps li>span:not(.wr-node){font-size:15px;line-height:1.5;color:var(--wr-ink);text-wrap:pretty}
@media(min-width:701px){
 .mt-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
 .mt-steps::before,.mt-steps::after{right:calc((100% - 48px)/3 - 15px)}
}
/* three nodes: each lights as the beam's bright centre reaches it */
.mo-live .wr-reg.mt-steps.wr-run .wr-node{animation-delay:calc(var(--wr-d)*(.099 + var(--k)*.401))}

/* ---------- /materials: supply partners, for manufacturers ---------- */
.mt-partners{padding:64px 0 76px;scroll-margin-top:96px}
.mt-psheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:36px 72px;padding:54px 56px 50px;background:var(--wr-navy);color:var(--wr-paper);border-radius:0 72px 0 0}
.takeoff-site .mt-pkicker{display:flex;align-items:center;gap:12px;margin:0 0 20px;max-width:none;font:600 13px/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--wr-gold-l)}
.takeoff-site .mt-psheet h2{margin:0 0 20px;max-width:none;font-size:clamp(34px,3.3vw,50px);text-wrap:balance;color:#fff}
.takeoff-site .mt-psheet .mt-pbody{margin:0;max-width:46ch;font-size:17px;line-height:1.6;color:#dbe2ed}
.mt-points{margin:0;border-top:1px solid #ffffff2e}
.mt-points>div{padding:20px 0 19px;border-bottom:1px solid #ffffff2e}
.mt-points dt{font:600 18px/1.3 var(--font-body);color:#fff}
.mt-points dd{margin:6px 0 0;font-size:15.5px;line-height:1.55;color:#c9d3e0}
.mt-points .wr-sheet-no{margin-bottom:8px;color:var(--wr-gold-l)}
.mt-pactions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.takeoff-site .mt-pactions .btn{min-height:50px}
.mt-plink{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:600;text-underline-offset:5px}
.mt-plink:hover{color:var(--wr-gold-l)}
.takeoff-site .mt-fine{margin:22px 0 0;max-width:none;text-wrap:balance;font:500 11px/1.6 var(--wr-mono);letter-spacing:.1em;text-transform:uppercase;color:#e8d3aa}

@media(max-width:1100px){
 .mt-home-grid{grid-template-columns:1fr;gap:30px}
 .takeoff-site .mt-home-copy h2{max-width:none}
 .takeoff-site .mt-also{grid-column:1;margin-top:-14px}
 .mt-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 32px}
 .mt-row-copy{grid-column:1/-1}
 .mt-psheet{padding:44px 40px}
}
@media(max-width:900px){
 .mt-head,.mt-quote-grid,.mt-psheet{grid-template-columns:1fr}
 .mt-head{gap:14px}
 .mt-more-list{grid-template-columns:1fr}
}
@media(max-width:700px){
 .mt-home{padding:40px 0 8px}
 .mt-home-grid{gap:24px}
 .takeoff-site .mt-home-copy h2{margin-bottom:14px}
 .takeoff-site .mt-home-copy p:not(.tk-overline){font-size:16px;line-height:1.55}
 .mt-actions{margin-top:20px;gap:10px 22px}
 .mt-mosaic{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:128px 128px 124px;gap:8px}
 .mt-tile--wide{grid-column:1/3;border-radius:0 0 40px 0}
 .mt-plate{padding:7px 10px 8px;gap:4px;font-size:13.5px}
 .mt-code{font-size:9px}
 .takeoff-site .mt-also{margin-top:-10px;font-size:14.5px}

 .mt-sched{padding:44px 0 30px}
 .mt-head{margin-bottom:22px}
 .takeoff-site .mt-head>p{font-size:16px;line-height:1.55}
 .mt-row{grid-template-columns:minmax(0,1fr) 38%;gap:12px 16px;padding:20px 0 16px}
 .mt-row-id{grid-column:1;grid-row:1}
 .mt-visual{grid-column:2;grid-row:1}
 .mt-visual .wr-frame{aspect-ratio:1/1;--wr-r:0 0 26px 0}
 .mt-visual figcaption{display:none}
 .mt-row-copy{grid-column:1/-1}
 .takeoff-site .mt-row h3{margin-top:8px;font-size:23px}
 .takeoff-site .mt-sub{font-size:14px}
 .takeoff-site .mt-row-copy p{display:none}
 .mt-items{gap:5px 6px;margin-bottom:4px}
 .mt-items li{padding:5px 7px 4px;font-size:10px}
 .mt-more{margin-top:28px}
 .mt-more-list li{grid-template-columns:44px minmax(0,1fr);padding:14px 0 6px}
 .mt-more-list a{grid-column:2;grid-row:auto;justify-self:start}

 .mt-quote{padding:40px 0}
 .mt-quote-grid{gap:24px}
 .takeoff-site .mt-quote-copy h2{margin-bottom:18px;font-size:34px}
 .takeoff-site .mt-psheet h2{font-size:34px}

 .mt-partners{padding:40px 0 48px}
 .mt-psheet{gap:22px;padding:32px 22px 30px;border-radius:0 44px 0 0}
 .takeoff-site .mt-psheet .mt-pbody{font-size:16px;line-height:1.55}
 .mt-points>div{padding:16px 0 15px}
 .mt-points dt{font-size:17px}
 .mt-points dd{font-size:15px}
 .mt-pactions{margin-top:22px}
}
@media(pointer:coarse){.mt-also a{display:inline-block;padding-block:10px;margin-block:-10px}}
@media(prefers-reduced-motion:reduce){.mt-tile img{transition:none}}