@font-face {font-weight: 200; font-style: normal; font-family: 'DM Sans'; src: url('fonts/dm-sans-v16-latin-200.woff2') format('woff2'); font-display: swap;}
@font-face {font-weight: 500; font-style: normal; font-family: 'DM Sans'; src: url('fonts/dm-sans-v16-latin-500.woff2') format('woff2'); font-display: swap;}
@font-face {font-weight: 600; font-style: normal; font-family: 'DM Sans'; src: url('fonts/dm-sans-v16-latin-600.woff2') format('woff2'); font-display: swap;}

@font-face {font-weight: 300; font-style: normal; font-family: 'GT Sectra Display'; src: url('fonts/GT-Sectra-Display-Light.woff2') format('woff2'); font-display: swap;}
@font-face {font-weight: 300; font-style: italic; font-family: 'GT Sectra Display'; src: url('fonts/GT-Sectra-Display-Light-Italic.woff2') format('woff2'); font-display: swap;}
@font-face {font-weight: 400; font-style: normal; font-family: 'GT Sectra Display'; src: url('fonts/GT-Sectra-Display-Regular.woff2') format('woff2'); font-display: swap;}


.b26 {

	--black: #000; --navy: #012332; --offwhite: #f6f4ef; --stone: #f0ede5; --terracotta: #9f6a4c; --white: #fff; --border: 1px solid rgb(from var(--terracotta) r g b / .3);

	* { margin: 0; padding: 0; text-transform: none !important; }
	*, ::before, ::after {box-sizing: border-box;}

	button {border-width: 0; font: inherit; color: inherit; background-color: transparent; cursor: pointer; touch-action: manipulation;}
	h1 {min-height: 0; text-transform: none; background: none;}
	img, picture, svg, video {height: auto; max-width: 100%; vertical-align: middle;}
	pg-videowrap:defined {display: grid;}
	pg-videowrap:defined > * {grid-area: 1 / 1;}
	pg-videowrap video {width: 100%; height: 100%; max-width: none; object-fit: cover;}
	pg-videowrap:defined button {z-index: 1; place-self: end; margin: 1.25rem;}
	svg[width="0"][height="0"] {position: fixed;}
	svg[width="0"][height="0"][aria-hidden="true"] {display: none;}

	.h1m {font: 300 clamp(3.625rem, -1.042rem + 23.333vw, 6.25rem)/1 'GT Sectra Display', serif !important; color: var(--terracotta);}
	.h2m {font: 300 clamp(4rem, 2.286rem + 8.571vw, 4.375rem)/.9 'GT Sectra Display', serif !important; letter-spacing: normal; color: var(--terracotta);}
	.h3m {font: 300 3.125rem/.9 'GT Sectra Display', serif !important; letter-spacing: -.02em; color: var(--terracotta);}
	.h4m {font: 300 2.5rem/1 'GT Sectra Display', serif !important; letter-spacing: -.02em; color: var(--terracotta);}
	.h5m {font: 300 2rem/1.1 'GT Sectra Display', serif !important; letter-spacing: -.02em; color: var(--terracotta);}
	.h6m {font: 300 1.375rem/1.09 'GT Sectra Display', serif !important; letter-spacing: .01em; color: var(--terracotta);}

	.lbc {font: 200 1.125rem/1.7 'DM Sans', sans-serif; letter-spacing: .02em; color: var(--navy);}
	.sbc {font: 200 1rem/1.7 'DM Sans', sans-serif; letter-spacing: .02em; color: var(--navy);}
	.att {font: 200 .875rem/1.3 'DM Sans', sans-serif; letter-spacing: .02em; color: var(--navy);}
	.tag {font: 600 .875rem/1.4 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: .35em; color: var(--navy);}

	@media (width >= 48em) {

		.h1d {font: 300 10.625rem/.94 'GT Sectra Display', serif !important; letter-spacing: normal; color: var(--terracotta);}
		.h2d {font: 300 7.8125rem/.9 'GT Sectra Display', serif !important; letter-spacing: -.02em; color: var(--terracotta);}
		.h3d {font: 300 6.5625rem/.9 'GT Sectra Display', serif !important; letter-spacing: -.02em; color: var(--terracotta);}
		.h4d {font: 300 5rem/1 'GT Sectra Display', serif !important; letter-spacing: -.02em; color: var(--terracotta);}
		.h5d {font: 300 2.9375rem/1.1 'GT Sectra Display', serif !important; letter-spacing: -.02em; color: var(--terracotta);}
		.h6d {font: 300 2rem/1.1 'GT Sectra Display', serif !important; letter-spacing: -.02em; color: var(--terracotta);}

		.lbc {font: 200 1.375rem/1.7 'DM Sans', sans-serif; letter-spacing: .02em; color: var(--navy);}
		.sbc {font: 200 1.125rem/1.7 'DM Sans', sans-serif; letter-spacing: .02em; color: var(--navy);}
		.tag {font: 600 1rem/1.4 'DM Sans', sans-serif; letter-spacing: .35em; color: var(--navy);}

	}

	.btn {padding: 1.5625rem 2.5rem 1.375rem; border: 1px solid var(--terracotta); border-radius: 0; font: 500 .875rem/1 'DM Sans', sans-serif; text-align: center; text-transform: uppercase !important; letter-spacing: .15em; color: var(--white) !important; background-color: var(--terracotta);}
	.btnB {color: var(--terracotta) !important; background-color: transparent;}
	.btn:hover {background-color: #7e4d31;}
	.btn2 {border-color: var(--white); color: var(--navy) !important; background-color: var(--white);}
	.btn2B {color: var(--white) !important; background-color: transparent;}
	.btn2:hover {background-color: #f0ede5;}
	.playbtn {display: flex; gap: .75rem; align-items: center; font: 500 .875rem/1 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: .15em; color: var(--terracotta);}
	.playbtn span {width: 3.5rem;}
	.marquee :is(.playbtn[aria-pressed="true"] .pause, .playbtn:not([aria-pressed="true"]) .play) {display: none;}
	.txtlink {font: 500 .875rem/1.1 'DM Sans', sans-serif; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; text-transform: uppercase; letter-spacing: .2em; color: var(--terracotta);}
	.txtlink:hover {text-decoration: none;}
	.wrap {margin-inline: max(var(--hs, 1.5625rem), ((100% - var(--mw, 75rem)) / 2));}

	/* home intro */
	.home-intro {display: grid; row-gap: 1.875rem; margin-inline: max(0px, (100% - 90rem) / 2); padding-block: 3.125rem;}
	.home-intro > img {justify-self: center;}
	.home-intro .wrap {display: grid; gap: 1.875rem; align-content: start;}
	.home-intro ul {border-bottom: var(--border); list-style: none; color: var(--terracotta);}
	.home-intro li {padding-block: 1.25rem; border-top: var(--border);}

	@media (width >= 64em) {

		.home-intro {grid-template-columns: 62fr 72fr; padding-block: 6.25rem;}
		.home-intro > img {justify-self: start;}
		.home-intro .wrap {--mw: min(42dvw, 600px);}
		.home-intro li {padding-block: 1.875rem;}
		.home-intro .btn {justify-self: start;}

	}

	/* collapsible product line component */
	.cplc {display: grid; position: relative; grid-template-rows: auto auto; color: var(--white); background-color: var(--terracotta); --mw: 90rem; --hs: 0px;}
	.cplc::after {z-index: 1; aspect-ratio: 720 / 845; background-color: rgb(0 0 0 / .55); content: '';}
	.cplc .wrapper {display: grid; gap: 1.25rem; align-content: start; padding: 3.125rem 1.875rem;}
	.cplc * {color: inherit;}
  .cplc p, .cplc a, .cplc h2, .cplc h3 {color: white;} /* edit for combined */
	.cplc summary {display: grid; grid-template-columns: 1fr auto; gap: 1rem; color: white;}
	.cplc :not([open]) > summary svg {opacity: .3;}
	.cplc [open]::details-content {display: grid; gap: 1.25rem; padding-block: 1.25rem;}
	.cplc [open] > div {position: absolute; bottom: 0; left: 0; width: 100%;}
	.cplc [open] div:not(:has(img)) {z-index: 2; padding: var(--pad); padding-bottom: calc(720 / 845 * 100dvw); font: 300 4.5rem/.9 'GT Sectra Display', serif; letter-spacing: -.02em; --pad: 1.875rem;}
	.cplc [open] div img {width: 100%; height: 100%; max-width: none; object-fit: cover;}

	@media (width >= 64em) {

		.cplc .wrapper {padding: 6.25rem;}
		.cplc [open] div:not(:has(img)) {font-size: 7.8125rem; --pad: 6.25rem;}

	}

	@media (width >= 75em) {

		.cplc {grid-template: auto / 1fr 1fr;}
		.cplc [open] > div {position: absolute; inset: auto; top: 0; right: 0; width: 50%;}

	}

	/* doors and finishes carousel */
	.dafc {margin-top: 3.75rem; padding-bottom: 3.75rem; background-color: var(--stone);}
	.dafc-head {background-image: linear-gradient(to bottom, var(--white) 25%, var(--stone) 0);}
	.dafc-head h2 {font-style: italic; font-size: clamp(3.125rem, 4.481rem + -6.78vw, 4.375rem) !important; text-align: center; --mw: 81.875rem;}
	.dafc-head h2 strong {font-style: normal; text-transform: uppercase;}
	.dafc-head + img {display: block; max-width: min(100vw - 4.75rem, 594px); margin-inline: auto;}
	.dafc pg-slider:defined {display: grid; grid-template: auto auto / 1fr;}
	.dafc pg-slider:defined > [role="group"]:not(.slide-wrap) {display: flex; z-index: 10; grid-area: 1 / 1 / 2 / -1; justify-content: space-between; align-self: start; margin-top: calc((min(80vw, 552px) * 444 / 552) / 2); padding-inline: max(1.125rem, ((100% - 73.125rem) / 2)); translate: 0 -50%;}
	.dafc pg-slider:defined .slide-wrap {grid-area: 1 / 1 / -1 / -1; max-width: 100dvw; scroll-behavior: smooth;}
	.dafc .slide-wrap > * {flex-shrink: 0; padding-inline: calc((100dvw - min(72vw, 552px)) / 2);}
	.dafc .slide-wrap figure {display: grid; grid-template: auto / 1fr 1fr; max-width: min(72vw, 552px);}
	.dafc .slide-wrap figcaption {grid-area: 2 / 1 / 3 / -1; margin-block: 1.25rem 2rem; font: 200 1rem/1.3 'DM Sans', sans-serif; text-align: center; letter-spacing: .02em; color: var(--navy);}
	.dafc-foot {display: grid; gap: 1.25rem; align-items: start;}
	.dafc-foot p {max-width: 32.5rem;}

	@media (width >= 48em) {

		.dafc {margin-top: 5rem;}
		.dafc-head h2 {font-size: clamp(8.75rem, 5rem + 7.813vw, 10rem) !important;}
		.dafc .slide-wrap figcaption {margin-block: 1.5rem 2.5rem; text-align: initial;}

	}

	@media (width >= 64em) {

		.dafc {margin-top: 5rem; padding-bottom: 5rem;}
		.dafc .slide-wrap {padding-inline: calc((100% - 552px - (2 * 6.25rem)) / 2);}
		.dafc .slide-wrap > * {padding-inline: 6.25rem; transition: .3s;}
		.dafc .slide-wrap > *:not(.active) {scale: .8;}
		.dafc-foot {grid-template-columns: 1fr auto auto; margin-top: 5rem;}

	}

	/* storage solutions carousel */
	.ssc {padding-block: 2.75rem 1.25rem;}
	.ssc-head {display: grid; gap: 1.25rem 3.125rem; align-items: start; padding-top: 1.5rem;}
	.marquee {overflow-x: clip; padding-block: 2.5rem 1.25rem;}
	.marquee .js-marquee {margin-bottom: 2.5rem;}
	.marquee .js-marquee span {display: inline-flex; gap: var(--gap); margin-right: var(--gap); --gap: clamp(1.5rem, .468rem + 4.233vw, 2.5rem);}
	.marquee figure {display: inline-grid; grid-template-rows: auto 1fr; flex-shrink: 0; gap: .625rem; max-width: min(100%, 90dvw);}
	.marquee figcaption {display: grid; grid-template-rows: auto 1fr; gap: .625rem;}
	.marquee .wrap {--mw: 90rem;}
	.marquee .wrap button {float: right;}

	@media (width >= 48em) {

		.ssc {padding-top: 3.75rem;}
		.ssc-head {grid-template: auto 1fr / 42fr 73fr;}
		.ssc-head h2 {grid-row: 1 / -1; font-size: clamp(4.688rem, -.938rem + 11.719vw, 6.563rem) !important;}
		.ssc-head:not(:has(.btn)) h2 {grid-area: 1 / 1 / -1 / -1;}
		.ssc-head .btn {justify-self: start;}
		.marquee {padding-top: 4.6875rem;}
		.marquee .js-marquee {margin-bottom: 3.75rem;}

	}

	/* cta box */
	.cta-box {padding-block: clamp(6.25rem, 4.911rem + 6.696vw, 8.125rem); background-color: var(--offwhite); background-image: url('images/m-mask.png');}
	.cta-box .wrap {display: grid; gap: 1.875rem; justify-items: center;}

	/* home inspiration two up */
	.hitu {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20.3125rem, 100%), 1fr)); gap: 2rem 3.125rem; margin-block: clamp(3.125rem, .893rem + 11.161vw, 6.25rem); text-align: center;}
	.hitu h2 {grid-column: 1 / -1;}
	.hitu-card {display: grid;}
	.hitu-card-img * {width: 100%; height: 100%; max-width: none; object-fit: cover;}
	.hitu-card h3 {margin-top: 1.875rem;}
	.hitu-card h3 a {color: inherit;}
	.hitu-card a {margin-top: 1.25rem;}

	@media (width >= 70em) {

		.hitu {grid-template: auto auto / 1fr 1fr;}
		.hitu-card {grid-template: 45.3125rem auto / 1fr auto; column-gap: 1.25rem; text-align: initial;}
		.hitu-card-img {grid-column: 1 / -1;}
		.hitu-card .btn {align-self: start;}

	}

	/* why medallion hero */
	.wmh {display: grid; grid-template: 1fr 1fr 100px auto / 1.875rem 1fr 1.875rem; margin-bottom: 1rem; text-align: center; --mw: 90rem; --hs: 0px;}
	.wmh-img {position: relative; grid-area: 1 / 1 / 4 / -1; max-height: 650px;}
	.wmh-img::after {position: absolute; inset: 0; background-image: linear-gradient(0deg, rgb(0 0 0 / .6) 40%, rgb(0 0 0 / 0) 70%); content: '';}
	.wmh-img * {width: 100%; height: 100%; max-width: none; object-fit: cover;}
	.wmh h1 {z-index: 1; grid-area: 1 / 2 / 3 / 3; align-self: end; margin-bottom: clamp(3.125rem, 4.018rem + -4.464vw, 1.875rem); text-align: center; color: var(--white);}
	.wmh-inner-wrap {display: grid; z-index: 1; grid-area: 3 / 2 / 5 / 3; place-items: center; align-self: end; max-width: 64.375rem; min-height: 200px; margin-inline: auto; padding: clamp(1.5rem, -.107rem + 8.036vw, 3.75rem); color: var(--navy); background-color: var(--white);}

	@media (width >= 48em) {

		.wmh-img {height: 650px;}

	}

	/* pillars intro */
	.pillars-intro {display: flex; flex-wrap: wrap; gap: 1.875rem .875rem; margin-block: clamp(1.875rem, .982rem + 4.464vw, 3.125rem) clamp(3.75rem, 1.964rem + 8.929vw, 6.25rem);}
	.pillars-intro > div {flex-grow: 1; flex-basis: 30rem;}
	.pillars-intro h2 {flex-grow: 1; flex-basis: 30rem;}
	.pillars-intro h3:not(:first-child) {margin-top: clamp(1.875rem, 1.429rem + 2.232vw, 2.5rem); padding-top: clamp(1.875rem, 1.429rem + 2.232vw, 2.5rem); border-top: var(--border);}
	.pillars-intro p {margin-top: 1.25rem;}

	/* customization section */
	.customization-section {background-color: var(--offwhite);}
	.custom-header {padding-bottom: 2.5rem; background-image: linear-gradient(to bottom, var(--white) var(--offset), transparent var(--offset)); --offset: 1.75rem;}
	.custom-header h2 {font: 300 normal clamp(2.5rem, -.357rem + 14.286vw, 3.125rem)/1.2 'GT Sectra Display', serif; text-align: center; letter-spacing: -.02em; color: var(--terracotta);}
	.custom-header h2 strong {font-weight: 400; font-style: normal; text-transform: uppercase;}
	.custom-block {padding-bottom: 3.125rem; --mw: 75rem; --hs: 0px;}
	.custom-block-img * {width: 100%; height: 100%; max-width: none; object-fit: cover;}
	.custom-block-img + .custom-block-img {margin-top: 1.875rem; background-color: var(--offwhite);}
	.custom-block .wrap {display: grid; --hs: 1.5625rem;}
	.custom-block h3 {margin-top: 3.125rem;}
	.custom-block p {margin-top: .75rem;}
	.custom-block .btn {margin-top: 1.875rem;}

	@media (width < 48em) {

		.custom-block-b .btn2 {color: var(--white) !important; background-color: var(--terracotta);}

	}

	@media (width >= 48em) {

		.custom-header {--offset: clamp(4.375rem, 1.563rem + 5.859vw, 5.313rem);}
		.customization-section h2 {font-size: clamp(6.25rem, -.417rem + 13.889vw, 10rem) !important;}
		.custom-block {display: grid; padding-bottom: 0;}
		.custom-block + .custom-block {margin-top: 6.25rem;}
		.custom-block-a {grid-template: auto auto / 470fr 656fr; gap: clamp(1.563rem, -3.125rem + 9.766vw, 3.125rem) clamp(1.563rem, -7.813rem + 19.531vw, 4.688rem); --hs: 1.5625rem;}
		.custom-block-a .wrap {justify-items: start; align-self: start; --hs: 0;}
		.custom-block-a .custom-block-img {align-self: end;}
		.custom-block-a-lr .wrap {grid-area: 1 / 1;}
		.custom-block-a-lr .custom-block-img {grid-area: 2 / 1; align-self: stretch;}
		.custom-block-a-lr .custom-block-img + .custom-block-img {grid-area: 1 / 2 / 3 / 3;}
		.custom-block-a-rl {grid-template-columns: 656fr 470fr;}
		.custom-block-a-rl .wrap {grid-area: 1 / 2;}
		.custom-block-a-rl .custom-block-img {grid-area: 2 / 2; align-self: stretch;}
		.custom-block-a-rl .custom-block-img + .custom-block-img {grid-area: 1 / 1 / 3 / 2;}
		.custom-block-b {padding-bottom: 0;}
		.custom-block-b > * {grid-area: 1 / 1;}
		.custom-block-b .wrap {grid-template-columns: 1fr 1fr; column-gap: 1.375rem; place-self: start; max-width: 42.5rem; margin: 1.875rem; padding: 3.125rem; background: rgb(0 0 0 / .55); backdrop-filter: blur(.625rem);}
		.custom-block-b .wrap :is(h3, p) {grid-column: 1 / -1; color: var(--white);}
		.custom-block-b .wrap h3 {margin-top: 0;}
		.custom-block-b .wrap p {margin-top: 1.25rem;}
		.custom-block-b .wrap .btn {margin-top: 3.125rem;}

	}

	/* customization video */
	.customization-video h2 {padding-block: 3.625rem/*1.5rem 3.625rem*/; text-align: center; --mw: 61.25rem;}
	.customization-video .embed {--mw: 75rem; --hs: 0px;}
	.customization-video .embed iframe {aspect-ratio: 16 / 9; width: 100%;}

	@media (width >= 48em) {

		.customization-video, .customization-video .embed {background-image: linear-gradient(var(--offwhite) 50%, var(--white) 0);}
		.customization-video {padding-block: 7.125rem 6.25rem;}

	}

	/* product link accordion */
	.pla {display: grid; gap: 3.125rem; padding-top: 4.375rem; --mw: 90rem; --hs: 0px;}
	.pla .wrap {--hs: 1.5625rem;}
	.pla h2 {font: 300 2rem/1.1 'GT Sectra Display', serif !important; text-align: center; letter-spacing: -.02em; color: var(--terracotta);}
	.pla h3 {margin-top: 1.875rem;}
	.pla-txt {margin-top: .75rem; padding-bottom: 1.25rem; border-bottom: var(--border);}
	.pla-txt p:has(+ a) {margin-bottom: 1.25rem; padding-bottom: 1.875rem; border-bottom: var(--border);}
	.pla-txt a {display: flex; gap: .625rem; justify-content: space-between; color: var(--terracotta);}
	.pla-ctrls {display: none;}

	@media (width >= 64em) {

		.pla {grid-template: 10rem 1fr 2.875rem auto 5.375rem 5rem / 12fr 33.75rem 25fr 26.5625rem 10fr; gap: 0; height: 55rem; padding-top: 0;}
		.pla h2 {z-index: 3; grid-area: 2 / 2 / 3 / -1; margin: 0; font: 600 .875rem/1.4 'DM Sans', sans-serif !important; text-align: initial; text-transform: uppercase; letter-spacing: .35em; color: var(--white);}
		.pla section {display: grid; grid-area: 1 / 1 / -1 / -1; grid-template: subgrid / subgrid;}
		.pla section:nth-of-type(1)::after {z-index: 1; grid-area: 1 / 1 / -1 / -1; background-color: rgb(0 0 0 / .55); content: '';}
		.pla section img {grid-area: 1 / 1 / -1 / -1; width: 100%; height: 100%; max-width: none; object-fit: cover;}
		.pla section:not(.active) img {opacity: 0;}
		.pla section h3 {z-index: 2; grid-area: 4 / 2 / 5 / 3; margin: 0; margin-top: calc(var(--i) * (1lh + 2.5rem)); color: var(--white); cursor: pointer;}
		.pla section:not(.active) h3 {font-style: italic !important; opacity: .2;}
		.pla section .pla-txt {z-index: 2; grid-area: 4 / 4 / 6 / 5; align-self: end; margin: 0; padding-bottom: 1.5625rem; border-color: var(--white);}
		.pla section:not(.active) .pla-txt {display: none;}
		.pla section .pla-txt p {margin-bottom: 1.5625rem; padding-bottom: .875rem; border-color: var(--white); font-size: 1.125rem; color: var(--white);}
		.pla section .pla-txt a {color: var(--white);}
		.pla-ctrls {display: flex; z-index: 3; grid-area: 5 / 2; gap: 1.375rem; align-self: end;}
		.pla-ctrls button {border-radius: 50%;}
		.pla-ctrls button:hover {background: var(--terracotta);}

	}

	/* big quote */
	.bigquote {padding-block: 4.375rem 5rem; text-align: center; color: var(--terracotta); background-color: var(--offwhite); background-image: url('images/bigM.svg'); background-position: right center; background-repeat: no-repeat; background-size: auto 100%;}
	.bigquote blockquote svg {width: clamp(2.813rem, 1.523rem + 5.291vw, 4.063rem); opacity: .2;}
	.bigquote blockquote p {margin-top: 1.25rem;}
	.bigquote blockquote div {margin-top: 2rem;}
	.bigquote blockquote div::before {content: '- ';}
	.bigquote .btn {margin-top: 2.5rem;}

	@media (width >= 64em) {

		.bigquote {padding-block: 8.125rem 11.875rem;}
		.bigquote blockquote p {margin-top: 2rem;}

	}

	/* storage solutions hero */
	.ss-hero {position: relative; padding-block: 7.8125rem; background-color: var(--offwhite); background-image: url('images/m-mask.png');}
	.ss-hero .wrap {display: grid; gap: 2.25rem; text-align: center; --mw: 50rem;}
	.ss-hero h1 {text-align: center;}

	@media (width >= 90em) {

		.ss-hero::before, .ss-hero::after {position: absolute; background-size: cover; content: '';}
		.ss-hero::before {bottom: 8.75rem; left: 0; width: 230px; height: 210px; background-image: var(--img1);}
		.ss-hero::after {top: 0; right: 0; width: 250px; height: 395px; background-image: var(--img2);}

	}

	/* storage solutions categories */
	.ss-cats {padding-block: 3.125rem;}
	.ss-cats-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: 1.875rem; margin-top: 3.125rem;}
	.ss-cat {display: grid; gap: .625rem; align-content: start;}
	.ss-cat h3 {margin-top: .375rem;}
	.ss-cat h3 a {font: 500 1.375rem/1.1 'DM Sans', sans-serif; text-decoration: none; letter-spacing: 1%; color: var(--navy);}

	@media (width >= 48em) {

		.ss-cats {padding-block: 6.25rem;}
		.ss-cats h2 {text-align: center;}
		.ss-cats-grid {grid-template-columns: repeat(var(--cols), 1fr); gap: 3.125rem; margin-top: 4.875rem; --cols: 2;}

	}

	@media (width >= 64em) {

		.ss-cats-grid {--cols: 3;}

	}

	/* storage solutions favorites carousel */
	.ss-favecarousel {padding-block: 3.75rem; background-color: var(--offwhite);}

	@media (width >= 48em) {

		.ss-favecarousel {padding-block: 5rem 1.25rem;}

	}

	/* storage solutions inspiration */
	.ss-inspiration {padding-top: 1.875rem;}
	.ss-inspiration-head {display: flex; flex-wrap: wrap; gap: 1.75rem; justify-content: space-between; align-items: end;}
	.inspiro-interactive {display: grid; position: relative; grid-template: calc(100dvw * 39 / 40) auto / 1fr; margin-top: 3.125rem; --hs: 0px;}
	.inspiro-interactive-img {grid-area: 1 / 1; width: 100%; height: 100%; max-width: none; object-fit: cover;}
	.inpsiro-button-wrap {position: relative; grid-area: 1 / 1;}
	.inspiro-interactive button {display: grid; position: absolute; inset: var(--mtop, auto) var(--mright, auto) var(--mbottom, auto) var(--mleft, auto); place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; letter-spacing: 0; color: var(--terracotta); background-color: var(--white);}
	.inspiro-interactive button:is(:hover, .active) {color: var(--white); background-color: var(--terracotta);}
	.inspiro-interactive :is([popover]:popover-open, .pover) {display: grid; grid-area: 2 / 1; gap: .75rem 2rem; padding: 1.875rem; border: 0; border-radius: 0; background-color: var(--offwhite);}
	.inspiro-interactive .pover {grid-template: auto 1fr / min(159px, 50%) 1fr; width: 100%;}
	.inspiro-interactive :is([popover]:popover-open, .pover) img {grid-area: 1 / 1 / -1 / 2;}
	.inspiro-interactive .pover:not(.active) {display: none;}

	@media (width >= 48em) {

		.ss-inspiration {padding-block: 6.25rem 7.5rem;}
		.inspiro-interactive {grid-template: calc(min(75rem, 100dvw) * 696 / 1200) auto / 1fr; margin-top: 2.5rem;}
		.inspiro-interactive button {inset: var(--dtop, auto) var(--dright, auto) var(--dbottom, auto) var(--dleft, auto);}
		.inspiro-interactive [popover] {grid-template: auto auto auto / 9.9375rem; height: auto; margin: .5rem;}
		.inspiro-interactive [popover]:popover-open {position-area: right center; align-self: center;}

	}

	/* storage solutions quote */
	.ss-quote {display: grid; grid-template: auto .75rem auto .75rem auto / 100%; padding-block: 1.875rem 3.125rem;}
	.ss-quote > * {grid-column: 1;}
	.ss-quote .iwrap1 {grid-row: 1 / 3; justify-self: end; max-width: 50dvw;}
	.ss-quote blockquote {grid-row: 2 / 4; padding-inline: 2.25rem; color: var(--terracotta);}
	.ss-quote blockquote svg {width: clamp(2.813rem, -2.54rem + 21.958vw, 8rem); opacity: .2;}
	.ss-quote blockquote p {margin-top: 1.25rem; font: italic clamp(3.125rem, -2.589rem + 28.571vw, 4.375rem)/1 'GT Sectra Display', serif; text-align: right;}
	.ss-quote blockquote em {font-style: normal; text-transform: uppercase;}
	.ss-quote blockquote div {margin-top: 1rem; text-align: right;}
	.ss-quote blockquote div::before {content: '- ';}
	.ss-quote .iwrap2 {grid-row: 5; max-width: 72dvw;}

	@media (width >= 64em) {

		.ss-quote {grid-template: 1.875rem 1fr 6.25rem auto / min(28%, 26rem) 1fr min(6%, 5.375rem) min(29%, 26.5rem); margin-inline: max(0px, ((100% - 90rem) / 2)); padding-block: 0 8.75rem;}
		.ss-quote .iwrap1 {grid-area: 1 / 4 / -1 / -1;}
		.ss-quote blockquote {grid-area: 2 / 1 / -2 / 3; justify-self: end; padding-inline: 0; text-align: right;}
		.ss-quote blockquote p {margin-top: .875rem; font-size: clamp(4rem, -2.462rem + 10.096vw, 6.625rem); line-height: 1.1;}
		.ss-quote blockquote div {margin-top: 1.875rem;}
		.ss-quote .iwrap2 {grid-area: 3 / 1 / -1 / 2;}

	}

	/* related posts */
	.rel-posts {padding-block: clamp(2.188rem, -1.607rem + 18.973vw, 7.5rem); background-color: var(--offwhite);}
	.relpost-cards {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16.875rem, 100%), 1fr)); gap: 2rem 2.8125rem; margin-top: clamp(1.875rem, -.268rem + 10.714vw, 4.875rem); list-style: none;}
	.relpost-card a {display: grid; gap: .625rem;}
	.relpost-card img {margin-bottom: .25rem;}
	.relpost-card span:not(:last-child) {font: 500 1.125rem/1.33 'DM Sans', sans-serif; letter-spacing: .01em; color: var(--navy);}

}