@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;}

.gold, .platinum { margin: 0; padding: 0; text-transform: none !important; background-image: none; }

.pg-pl26 {

	--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;}
	*, ::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 6.8125rem/.8 '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;}
  .btnB:hover { color: white !important; }
	.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));}

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

	@media (width >= 90em) {

		.plines-hero::before, .plines-hero::after {position: absolute; background-size: cover; content: '';}
		.plines-hero::before {top: var(--img1pos); left: 0; width: 230px; height: var(--img1h); background-image: var(--img1);}
		.plines-hero::after {right: 0; bottom: var(--img2pos); width: 250px; height: var(--img2h); background-image: var(--img2); }

	}

	/* product line blocks */
	.plines-blocks {display: grid; gap: 3.125rem; padding-block: 3.125rem;}
	.plines-blocks h2 {padding-inline: 1.875rem; text-align: center;}
	.plines-blocks section {display: grid; gap: 3.625rem 3.125rem; justify-items: center; --mw: 71.5625rem; --hs: 0px;}
	.plines-blocks section > div {display: grid; gap: 1.25rem; align-items: start; padding-inline: 1.5625rem; text-align: center;}
	.plines-blocks section > div > div:last-child {margin-top: 2rem;}
	.plines-blocks section > div > div:last-child img {width: 100%; height: 100%; max-width: none; object-fit: cover;}

	@media (width >= 48em) {

		.plines-blocks {gap: 6.25rem;}
		.plines-blocks section {grid-template-columns: 60fr 47fr; justify-items: start;}
		.plines-blocks section:nth-of-type(2n) {grid-template-columns: 47fr 60fr;}
		.plines-blocks section > div {justify-items: start; text-align: initial;}
		.plines-blocks section:nth-of-type(2n) > img {grid-area: 1 / 2;}
		.plines-blocks section:nth-of-type(2n) > div {grid-area: 1 / 1; text-align: initial;}

	}

	@media (width >= 64em) {

		.plines-blocks section {column-gap: 4.6875rem;}
		.plines-blocks section > div {padding-inline: 0;}

	}

	/* product line hero */
	.pline-hero {background-color: var(--offwhite);}
	.pline-hero > .wrap {display: grid; --hs: 0px;}
	.pline-hero-img img {width: 100%; height: 100%; max-width: none; object-fit: cover;}
	.pline-hero .pline-hero-wrap {display: grid; gap: 1.625rem; align-self: center; padding-block: 3rem; text-align: center; --hs: 1.5625rem;}
	.pline-hero .tag {color: var(--terracotta);}
	.pline-hero h1 {text-align: center;}

	@media (width >= 48em) {

		.pline-hero {grid-template-columns: 48fr 60fr; align-items: center;}
		.pline-hero-img {grid-area: 1 / 2; justify-self: end; height: 100%; max-width: 37.5rem;}
		.pline-hero .pline-hero-wrap {max-width: 30rem; text-align: initial;}
		.pline-hero h1 {text-align: initial;}

	}

	/* product line carousel */
	.pline-carousel {background-color: var(--offwhite);}
	.pline-carousel .wrap {display: grid; grid-template: auto auto auto auto / .125rem 1fr auto 1fr .125rem; gap: 1.25rem; padding-block: 0 3.125rem; background-color: var(--offwhite); --hs: 0px;}
	.pline-carousel pg-carousel {display: grid; grid-area: 1 / 1 / 4 / -1; grid-template: subgrid / subgrid;}
	.pline-carousel pg-carousel > [role="group"] {display: grid; z-index: 2; grid-area: 3 / 2 / 4 / -2; grid-template: subgrid / subgrid;}
	.pline-carousel pg-carousel > [role="group"] .prevbtn {grid-column: 1; justify-self: end;}
	.pline-carousel pg-carousel > [role="group"] .nextbtn {grid-column: 3; justify-self: start;}
	.pline-carousel pg-carousel:defined .slide-wrap {display: grid; grid-area: 1 / 1 / 3 / -1; grid-template: subgrid / subgrid;}
	.pline-carousel pg-carousel:defined .slide-wrap figure {display: grid; grid-area: 1 / 1 / 3 / -1; grid-template: subgrid / subgrid; background-color: var(--offwhite);}
	.pline-carousel pg-carousel:defined .slide-wrap figure img {grid-column: 1 / -1;}
	.pline-carousel pg-carousel:defined .slide-wrap figure figcaption {grid-area: 2 / 2 / 3 / -2; text-align: center;}
	.pline-carousel pg-carousel:defined .slide-wrap [aria-hidden="false"] {z-index: 1;}
	.pline-carousel .status {grid-area: 3 / 3; align-self: center; font: 500 .875rem/1.4 sans-serif; font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; letter-spacing: .35em; color: var(--terracotta);}
	.pline-carousel .btn {grid-area: 4 / 2 / 5 / -2;}

	@media (width >= 48em) {

		.pline-carousel .wrap {grid-template: auto auto / 1fr auto; row-gap: 1.75rem; padding-block: 6.25rem 4.6875rem;}
		.pline-carousel pg-carousel {grid-area: 1 / 1 / -1 / -1;}
		.pline-carousel pg-carousel > [role="group"] {grid-area: 1 / 1 / 2 / -1;}
		.pline-carousel pg-carousel > [role="group"] .prevbtn {grid-area: 1 / 1; justify-self: start; margin: 2.25rem;}
		.pline-carousel pg-carousel > [role="group"] .nextbtn {grid-area: 1 / 2; justify-self: end; margin: 2.25rem;}
		.pline-carousel pg-carousel:defined .slide-wrap {grid-area: 1 / 1 / 3 / -1;}
		.pline-carousel pg-carousel:defined .slide-wrap figure {grid-area: 1 / 1 / 3 / -1;}
		.pline-carousel pg-carousel:defined .slide-wrap figure img {grid-area: 1 / 1 / 2 / -1;}
		.pline-carousel pg-carousel:defined .slide-wrap figure figcaption {grid-area: 2 / 1 / 3 / 2; padding-left: 1.5625rem; text-align: initial;}
		.pline-carousel .status {display: none;}
		.pline-carousel .btn {z-index: 3; grid-area: 2 / 2 / 3 / -1; margin-right: 1.5625rem;}

	}

	@media (width >= 76.25em) {

		.pline-carousel pg-carousel:defined .slide-wrap figure figcaption {padding-left: 0;}
		.pline-carousel .btn {margin-right: 0;}

	}

	/* product line at a glance */
	.pline-aag {display: grid; row-gap: 3.125rem; padding-bottom: 3.125rem; --mw: 90rem; --hs: 0px;}
	.aag-img img {width: 100%; height: 100%; max-width: none; object-fit: cover;}
	.pline-aag .wrap {--hs: 1.5625rem;}
	.pline-aag h2 + p {margin-top: 1.25rem;}
	.pline-aag section {margin-top: 1rem; padding-top: 1rem; border-top: var(--border);}
	.pline-aag section:last-child {margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: var(--border);}
	.aag-section-head {display: flex; flex-wrap: wrap; gap: .625rem; justify-content: space-between; align-items: end;}
	.aag-section-head h3 {color: var(--navy);}
	.aag-flex {display: flex; gap: clamp(.5rem, -.068rem + 2.841vw, 1.75rem); margin-top: 1.5rem; list-style: none; text-align: center;}
	.aag-flex li {display: grid; grid-template-rows: 1fr auto; gap: 1rem;}

	@media (width >= 48em) {

		.aag-flex {margin-top: 1.875rem;}
		.aag-flex li:not(:last-child) {flex-basis: 6.4375rem;}

	}

	@media (width >= 64em) {

		.pline-aag {grid-template-columns: 65fr 79fr; padding-top: 4.75rem;}
		.pline-aag .wrap {--hs: clamp(1.563rem, -13.053rem + 22.837vw, 7.5rem);}

	}

	/* product line construction */
	.pline-construction {display: grid; align-items: center; --mw: 82.5rem; --hs: 0px; --spacer: 1rem;}
	.pline-construction .wrap {padding-block: 3.125rem; --hs: 1.5625rem;}
	.pline-construction h2 {margin-bottom: calc(1 * var(--spacer)); padding-bottom: calc(1 * var(--spacer)); border-bottom: var(--border);}
	.pline-construction .tag {margin-top: calc(1.5 * var(--spacer));}
	.pline-construction h2 ~ ul {margin-bottom: calc(1.5 * var(--spacer)); padding-bottom: calc(1.5 * var(--spacer)); border-bottom: var(--border);}
	.pline-construction ul {display: grid; gap: calc(1.5 * var(--spacer)); margin-top: calc(1.5 * var(--spacer)); list-style: none; color: var(--navy);}
	.pline-construction ul ul {margin-top: calc(.5 * var(--spacer));}
	.pline-construction ul ul li {padding-left: 3.75rem; background-image: url('images/liarrow.svg'); background-position: top .5em left; background-repeat: no-repeat;}

	@media (width >= 64em) {

		.pline-construction {grid-template-columns: 1fr 1fr; padding-block: 8.125rem; --spacer: 1.5rem;}
		.pline-construction .wrap {grid-area: 1 / 1; max-width: 35rem;}
		.pline-construction pg-videowrap {grid-area: 1 / 2;}

	}

	/* product line others */
	.pline-others {display: grid; position: relative; grid-template: 1fr calc(100dvw * 500 / 720) / 1fr; align-items: center; background-color: var(--terracotta); --mw: 90rem; --hs: 0px;}
	.pline-others .wrapper {display: grid; grid-area: 1 / 1 / 2 / -1; padding: 3.125rem 1.875rem;}
	.pline-others h2 {color: var(--white);}
	.pline-others ul {margin-top: .625rem;}
	.pline-others a {display: flex; justify-content: space-between; padding-block: .625rem; color: var(--white);}
	.pline-others a span {display: flex; gap: 1.25rem; align-items: center; color: var(--white);}
	.pline-others a:not(:focus-within, :hover) svg {opacity: .3;}
	.pline-others ul:not(:has(a:where(:focus-within, :hover))) li:first-child a svg {opacity: 1;}
	.pline-others .wrapper div:has(img) {position: absolute; bottom: 0; left: 0; z-index: 1;}
	.pline-others .wrapper div:has(img) img {width: 100%; height: 100%; max-width: none; object-fit: cover;}
	.pline-others .wrapper li:not(:has(a:where(:focus-within, :hover))) div:has(img) {z-index: 0;}
	.pline-others .wrapper ul:not(:has(a:where(:focus-within, :hover))) li:first-child div:has(img) {z-index: 1;}

	@media (width >= 64em) {

		.pline-others {grid-template: min(500px, calc(100dvw * 500 / 720)) / 1fr 1fr;}
		.pline-others .wrapper {grid-area: 1 / 1; padding: 6.25rem;}
		.pline-others .wrapper div:has(img) {inset: auto; top: 0; right: 0; height: 100%; max-width: 50%;}

	}

	/* 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;}

	}

}
