pg-landing {font-family: Montserrat, sans-serif; --maroon: #632240; --lightgray: #F0EDE5;}
pg-landing button {padding: 0; border-width: 0; font: inherit; color: inherit; background-color: transparent; cursor: pointer;}
pg-landing button:focus {outline: thin dotted;}
pg-landing h2 {margin: 0; font-size: clamp(2.25rem, -1.179rem + 17.143vw, 3rem); line-height: .9; font-family: Montserrat-Light, sans-serif; text-align: inherit; text-transform: uppercase; color: inherit;}
pg-landing :is(img, video) {height: auto; max-width: 100%;}
pg-landing p {margin: 0; letter-spacing: unset;}
pg-landing .cta {display: inline-flex; gap: 1rem; align-items: center; line-height: 1.25; text-transform: uppercase; color: inherit;}
pg-landing .cta:hover {text-decoration: underline;}

video-wrap > * {grid-area: 1 / 1;}
video-wrap video {width: 100%; height: 100%; max-width: none; object-fit: cover;}
.playbtn {z-index: 10; place-self: end; margin-right: 1rem; margin-bottom: 1rem; border-radius: 50%;}
.playbtn[aria-pressed="true"] svg:has([href="#shape-play"]), .playbtn:not([aria-pressed="true"]) svg:has([href="#shape-pause"]) {display: none;}

.crftmnshp-grid {display: grid; grid-template: auto auto auto auto / 1fr; gap: .25rem; max-width: 90rem; margin-inline: auto;}
.crftmnshp-grid > *:not(:nth-child(2)) {display: grid; aspect-ratio: 1; width: 100%; overflow: hidden;}
.crftmnshp-grid > *:not(:nth-child(2)) :is(img, video) {aspect-ratio: 1; width: 100%; height: 100%; max-width: none; object-fit: cover;}
.crftmnshp-grid > *:nth-child(2) {display: grid; gap: 2.5rem; padding: 3.125rem 1.5rem;}
.crftmnshp-grid > *:nth-child(2) a {color: var(--maroon);}

.crftmnshp-fma {display: grid; position: relative; grid-template: 60px auto 1fr auto 70px / 1.25rem 1fr 1.25rem; color: #fff; background-color: #000;}
.crftmnshp-fma video-wrap {display: grid; z-index: 1; grid-area: 1 / 1 / -1 / -1;}
.crftmnshp-fma video-wrap::before {display: block; z-index: 2; grid-area: 1 / 1 / -1 / -1; background-color: rgb(0 0 0 / .5); content: '';}
.crftmnshp-fma video-wrap > * {grid-area: 1 / 1;}
.crftmnshp-fma .playbtn {margin-right: 1.25rem; margin-bottom: 1.5rem;}
.crftmnshp-fma-div1 {display: grid; z-index: 3; grid-area: 2 / 2; gap: 2.5rem; margin-bottom: 2rem;}
/* .crftmnshp-fma-div1 {padding: 2.5rem; background-color: rgb(255 255 255 / .1); -webkit-backdrop-filter: blur(1.5rem); backdrop-filter: blur(1.5rem);} */
.crftmnshp-fma-div1 p {font-size: 1.125rem; line-height: 1.25; text-transform: uppercase;}
.crftmnshp-fma-div1 h1 {margin: 0; padding: 0; font: clamp(2.375rem, -.214rem + 12.946vw, 6rem)/.9 Montserrat-Thin, sans-serif; letter-spacing: 0; color: #fff; background: none;}
/* .crftmnshp-fma-div1 h1 {font-size: clamp(1.75rem, -1.083rem + 14.167vw, 6rem);} */
.crftmnshp-fma-div2 {display: grid; z-index: 3; grid-area: 4 / 2; gap: 1.875rem; padding: 2.5rem; font-family: Montserrat-Light, sans-serif; background-color: rgb(255 255 255 / .1); -webkit-backdrop-filter: blur(1.5rem); backdrop-filter: blur(1.5rem);}

.crftmnshp-iconlinks {padding: 5rem clamp(1.875rem, -6.696rem + 42.857vw, 3.75rem); line-height: 1.25; text-transform: uppercase; color: var(--maroon); background-color: var(--lightgray);}
.crftmnshp-iconlinks ul {display: grid; gap: 3.125rem 9.375rem; align-items: center; max-width: 73.125rem; margin: 0 auto; padding: 0; list-style: none;}
.crftmnshp-iconlinks li {margin: 0;}
.crftmnshp-iconlinks a {display: flex; gap: 1.25rem; align-items: center; color: inherit;}
.crftmnshp-iconlinks a:hover {text-decoration: underline;}
.crftmnshp-iconlinks a img {height: auto; max-width: 7.5vw;}

.crftmnshp1 {margin-bottom: 6.25rem;}
.crftmnshp-interactive {position: relative;}
.popup {display: none;}

.crftmnshp2 {display: grid; grid-template: 7.5rem 1fr 7.5rem / 1fr; margin-inline: 1.25rem;}
.crftmnshp2 > :first-child {grid-area: 1 / 1 / -1 / -1;}
.crftmnshp2 > :first-child img {width: 100%; height: 100%; object-fit: cover;}
.crftmnshp2 > div {display: flex; grid-area: 2 / 1; flex-wrap: wrap; gap: 3.75rem; place-self: center; width: 100%; max-width: 73.125rem; padding: 2.5rem 1.875rem; color: #fff; background-color: rgb(0 0 0 / .18); -webkit-backdrop-filter: blur(.625rem); backdrop-filter: blur(.625rem);}
.crftmnshp2 > div > div {display: grid; gap: 2.5rem;}

.crftmnshp3 {margin-top: 6.25rem;}

.crftmnshp4 {display: grid; gap: 3.75rem; margin-inline: max(1.25rem, ((100% - 40.625rem) / 2)); margin-top: 6.25rem; text-align: center;}

.crftmnshp-marquee {display: grid; padding-block: calc(5.625rem - 1.5rem);}
.crftmnshp-marquee > * {grid-area: 1 / 1; overflow-x: hidden;}
.crftmnshp-marquee .imgwrap {display: inline-block; height: clamp(8.438rem, 4.464rem + 19.866vw, 14rem); padding: 1.5rem calc(clamp(1.875rem, .982rem + 4.464vw, 3.125rem) / 2); filter: drop-shadow(.625rem .625rem .5rem rgb(0 0 0 / .25));}
.crftmnshp-marquee .imgwrap img {width: auto; height: 100%;}
.marquee-btn {z-index: 1; place-self: center end; margin-right: calc(1.25rem); border-radius: 50%;}
.marquee-btn[aria-pressed="true"] svg:has([href="#shape-pause"]), .marquee-btn:not([aria-pressed="true"]) svg:has([href="#shape-play"]) {display: none;}

.crftmnshp5 {display: grid; grid-template: 8.75rem 1fr 8.75rem / 1.25rem 1fr 1.25rem;}
.crftmnshp5 > :first-child {grid-area: 1 / 1 / -1 / -1;}
.crftmnshp5 > :first-child img {width: 100%; height: 100%; object-fit: cover;}
.crftmnshp5 > div {display: flex; grid-area: 2 / 2; flex-wrap: wrap; gap: 3.125rem; justify-content: center; place-self: center; padding: 6.25rem 1.5rem; text-align: center; color: #fff; background-color: rgb(255 255 255 / .1); -webkit-backdrop-filter: blur(1.75rem); backdrop-filter: blur(1.75rem);}
.crftmnshp5 > div h2 {text-transform: none;}

.crftmnshp6 {display: grid; gap: 3.125rem; margin-inline: max(1.25rem, ((100% - 90rem) / 2)); margin-top: 3.75rem;}
.crftmnshp6 > div:first-child {display: grid; gap: 2.5rem;}
.crftmnshp6 > div:first-child div {font-weight: 300; font-size: 1.125rem; line-height: 1.222; text-transform: uppercase; color: #012332;}
.crftmnshp6 > div:first-child h1 {margin: 0; padding: 0; font-weight: 250; font-size: 2.8125rem; line-height: .9; color: #012332; background: transparent;}
.crftmnshp6 > div:last-child {font-weight: 300; color: #012332;}

.crftmnshp7 {margin-top: 3.75rem;}
.crftmnshp-interactive2 {display: grid; position: relative;}
.crftmnshp-interactive2 picture-wrap {grid-area: 1 / 1 / -1 / -1;}
.crftmnshp7-overlay {display: grid; grid-area: 1 / 1; gap: 2.5rem; align-self: end; padding: 2.5rem 1.25rem; color: #fff; background: rgb(0 0 0 / .3); -webkit-backdrop-filter: blur(.625rem); backdrop-filter: blur(.625rem);}
.crftmnshp7-overlay h2 {font-size: 2.8125rem; line-height: .9; text-transform: uppercase;}
.crftmnshp7-overlay p {font-weight: 300; line-height: 1.5;}

.crftmnshp8 {margin-inline: max(1.25rem, ((100% - 90rem) / 2)); margin-top: 6.25rem;}
.crftmnshp8 > div:first-child {max-width: 44.375rem; margin-inline: auto;}
.crftmnshp8 h2 {font-size: 2.8125rem; font-weight: 300; line-height: .9; text-align: center; color: #012332;}
.crftmnshp8 h2 + p {margin-top: 3.75rem; font-weight: 300; line-height: 1.5; text-align: center; color: #012332;}
.crftmnshp8-buckets {display: flex; flex-wrap: wrap; gap: 3.4375rem 1.5625rem; justify-content: center; margin-top: 3.75rem;}
.crftmnshp8-buckets > * {display: grid; grid-template-rows: auto auto 1fr; gap: 1.875rem; flex-basis: 21.25rem;}
.crftmnshp8 h3 {padding-inline: 1.875rem;margin: 0;line-height: 1.5;text-transform: uppercase;color: #012332;}
.crftmnshp8 h3 + p {margin: 0; padding-inline: 1.875rem; font-weight: 300; line-height: 1.5; color: #012332;}

.crftmnshp9 {margin-inline: max(1.25rem, ((100% - var(--mw)) / 2)); margin-top: 5.625rem; color: #fff; background-color: #632240; --mw: 45rem;}
.crftmnshp9 video-wrap {display: grid; z-index: 1; aspect-ratio: 1;}
.crftmnshp9 video-wrap > * {grid-area: 1 / 1;}
.crftmnshp9 > div {display: grid; gap: 2.5rem; padding: 6.25rem 1.5rem;}
.crftmnshp9 > div h2 {font-size: 1.875rem; line-height: .9;}
.crftmnshp9 > div p {font-weight: 300;}
.crftmnshp9 > div ul {display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none;}
.crftmnshp9 > div li {margin: 0;}
.crftmnshp9 > div a {display: inline-flex; gap: 1rem; align-items: center; font-weight: 300; line-height: normal; text-decoration: underline; text-transform: uppercase; color: #fff;}
.crftmnshp9 > div a::before {width: 2.5rem; height: 2.5rem; background-image: url('https://medallioncabinetry.com/wp-content/themes/medallioncabinetry/images/cta2.svg'); content: '';}

.crftmnshp9 + .crftmnshp5 {margin-top: 6.25rem;}

@media (min-width: 48em) { /* 768px */

	.crftmnshp-grid {grid-template: auto auto auto / 1fr 1fr; gap: 1.5625rem;}
	.crftmnshp-grid > :nth-child(1) {grid-area: 1 / 1 / 2 / -1; aspect-ratio: auto;}
	.crftmnshp-grid > :nth-child(1) img {aspect-ratio: auto;}
	.crftmnshp-grid > :nth-child(2) {grid-area: 2 / 1 / 3 / -1;}
	.crftmnshp-grid > :nth-child(3) {grid-area: 3 / 1;}
	.crftmnshp-grid > :nth-child(4) {grid-area: 3 / 2;}

	.crftmnshp-fma-div1 {max-width: 56.125rem;}
	.crftmnshp-fma-div2 {grid-template-columns: auto 1fr; justify-self: end; max-width: 32rem;}

	.crftmnshp2 {margin-inline: 0;}
	.crftmnshp2 > div {display: grid; grid-template-columns: 1fr 1fr; padding-block: 6.25rem;}
	.crftmnshp2 > div h2 {max-width: 23.125rem; margin-left: auto;}
	.crftmnshp2 > div div p {max-width: 20rem;}

	.crftmnshp5 > div {padding: 6.25rem;}

	.crftmnshp6 {grid-template-columns: 49fr 90fr; align-items: end;}
	.crftmnshp6 > div:first-child h1 {font-size: 6rem;}
	.crftmnshp6 > div:last-child {max-width: 36.5625rem;}

	.crftmnshp8 {margin-top: 9.375rem;}

	.crftmnshp9 + .crftmnshp5 {margin-top: 9.375rem;}

}

@media (min-width: 64em) { /* 1024px */

	pg-landing h2 {font-size: clamp(2.25rem, -2.114rem + 6.818vw, 3rem);}

	.crftmnshp-grid {grid-template: auto 500px / 464fr 340fr 586fr; gap: 1.5625rem;}
	.crftmnshp-grid > *:not(:nth-child(2)) {aspect-ratio: auto;}
	.crftmnshp-grid > *:not(:nth-child(2)) :is(img, video) {aspect-ratio: auto;}
	.crftmnshp-grid > :nth-child(1) {grid-column: 1 / 3;}
	.crftmnshp-grid > :nth-child(2) {grid-area: 1 / 3 / 2 / -1; width: 21.25rem; margin-left: 5.9375rem;}
	.crftmnshp-grid > :nth-child(3) {grid-area: 2 / 1;}
	.crftmnshp-grid > :nth-child(4) {grid-area: 2 / 2 / 3 / 4;}

	.crftmnshp1 {margin-block: 9.375rem;}
	.crftmnshp-interactive > img {display: none;}

	.crftmnshp3 {margin-top: 9.375rem;}
	.crftmnshp4 {margin-top: 9.375rem;}
	.crftmnshp-marquee {padding-block: calc(9.375rem - 1.5rem);}

	.crftmnshp7-overlay {align-self: center; max-width: 28.75rem; padding: 6.25rem 3.125rem;}

}

@media (min-width: 75em) { /* 1200px */

	.crftmnshp-iconlinks ul {display: flex; flex-wrap: nowrap;}

	.crftmnshp9 {display: grid; grid-template-columns: 1fr 1fr; --mw: 90rem;}
	.crftmnshp9 > div {align-self: center; padding: 0 7.5rem;}

}

@media (min-width: 90em) { /* 1440px */

	.crftmnshp-fma {grid-template: 8.125rem 1fr 7.1875rem / 1fr auto auto 1fr; column-gap: 2rem; max-height: 67.5rem; overflow: hidden;}
	.crftmnshp-fma video-wrap {grid-area: 1 / 1 / -1 / -1; grid-template: 67.5rem / subgrid; align-self: center;}
	.crftmnshp-fma video-wrap video {grid-area: 1 / 1 / -1 / -1;}
	.crftmnshp-fma .playbtn {grid-area: 1 / 3; margin-right: 0; margin-bottom: 1.875rem;}
	.crftmnshp-fma-div1 {grid-area: 2 / 2; align-self: start;}
	.crftmnshp-fma-div2 {grid-area: 2 / 3; align-self: end;}

	.popup {display: grid; position: absolute; z-index: 1; grid-template-rows: auto auto; gap: .3125rem; justify-items: start;}
	.popup button {grid-row: 2; border-radius: 50%;}
	.popup div {display: block; grid-row: 1; width: 20rem; padding: 1.25rem 1.875rem; color: #fff; background-color: rgb(255 255 255 / .2); -webkit-backdrop-filter: blur(1.375rem); backdrop-filter: blur(1.375rem);}
	.popup button:not([aria-pressed="true"]):not(:hover) + div {display: none;}
	.crftmnshp1 .popup1 {bottom: 66.2%; left: 61.6%;}
	.crftmnshp1 .popup2 {bottom: 49%; left: 26.8%;}
	.crftmnshp1 .popup3 {bottom: 9.6%; left: 52%;}

	.marquee-btn {margin-right: calc(((100vw - 90em) / 2) + 1.25rem);}

	.crftmnshp-interactive2 {grid-template-columns: 1fr 90rem 1fr;}
	.crftmnshp7-overlay {grid-column: 2;}
	.crftmnshp7 .popup div {background-color: rgb(0 0 0 / .2);}
	.crftmnshp7 .popup1 {bottom: 72.3%; left: 52.8%;}
	.crftmnshp7 .popup2 {bottom: 64.5%; left: 73.1%;}
	.crftmnshp7 .popup3 {bottom: 32%; left: 59.2%;}

	.crftmnshp9 > div h2 {font-size: 3rem;}

}