/* TCS Replica — global system: base, typography scale, buttons, sections, grid, forms, utilities */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 2rem); }

body {
	margin: 0;
	background-color: var(--color-brass-3);
	color: var(--color-soft-black);
	font-family: var(--font-family);
	font-size: 14px;
	font-weight: var(--font-weight-default);
	line-height: var(--line-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
	overflow-x: hidden;
}
@media (min-width: 400px)  { body { font-size: calc(0.16667vw + 13.33333px); } }
@media (min-width: 1600px) { body { font-size: 16px; } }

body.prevent-scroll { overflow: hidden; }

img { display: block; height: auto; max-width: 100%; }

a { color: var(--color-burgundy-2); text-decoration: underline; }
a:hover {
	text-decoration: none;
	transition-property: all;
	transition-duration: var(--transition-time);
	transition-timing-function: var(--transition-easing);
}

/* ------------------------------------------------------------ Headings */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-text, blockquote p {
	font-family: var(--heading-font-family);
	font-weight: var(--font-weight-default);
	letter-spacing: var(--heading-letter-spacing);
	line-height: var(--heading-line-height);
	margin-top: 0;
}

h1, .h1, .display-text { font-size: 34px; margin-bottom: var(--h1-spacing); }
@media (min-width: 400px)  { h1, .h1, .display-text { font-size: calc(4.6vw + 15.6px); } }
@media (min-width: 1400px) { h1, .h1, .display-text { font-size: 80px; } }

h2, .h2 { font-size: 29px; margin-bottom: var(--h2-spacing); }
@media (min-width: 400px)  { h2, .h2 { font-size: calc(2.1vw + 20.6px); } }
@media (min-width: 1400px) { h2, .h2 { font-size: 50px; } }

h3, .h3 { font-size: 26px; margin-bottom: var(--h3-spacing); }
@media (min-width: 400px)  { h3, .h3 { font-size: calc(1.4vw + 20.4px); } }
@media (min-width: 1400px) { h3, .h3 { font-size: 40px; } }

h4, .h4, blockquote p { font-size: 19px; margin-bottom: var(--h4-spacing); }
@media (min-width: 400px)  { h4, .h4, blockquote p { font-size: calc(0.7vw + 16.2px); } }
@media (min-width: 1400px) { h4, .h4, blockquote p { font-size: 26px; } }

h5, .h5 { font-size: 17px; margin-bottom: var(--h5-spacing); }
@media (min-width: 400px)  { h5, .h5 { font-size: calc(0.3vw + 15.8px); } }
@media (min-width: 1400px) { h5, .h5 { font-size: 20px; } }

h6, .h6 { font-size: 16px; margin-bottom: var(--h6-spacing); }
@media (min-width: 400px)  { h6, .h6 { font-size: calc(0.2vw + 15.2px); } }
@media (min-width: 1400px) { h6, .h6 { font-size: 18px; } }

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- Body text utils */

.body-text-standard { font-size: 14px; }
@media (min-width: 400px)  { .body-text-standard { font-size: calc(0.16667vw + 13.33333px); } }
@media (min-width: 1600px) { .body-text-standard { font-size: 16px; } }

.body-text-large { font-size: 16px; }
@media (min-width: 400px)  { .body-text-large { font-size: calc(0.3vw + 14.8px); } }
@media (min-width: 1400px) { .body-text-large { font-size: 19px; } }

.body-text-small, blockquote cite, figcaption { font-size: 14px; }
@media (min-width: 400px)  { .body-text-small, blockquote cite, figcaption { font-size: calc(0.1vw + 13.6px); } }
@media (min-width: 1400px) { .body-text-small, blockquote cite, figcaption { font-size: 15px; } }

.body-text-tiny { font-size: 12px; line-height: 1.3; }
@media (min-width: 1400px) { .body-text-tiny { font-size: 13px; } }

.body-text-ui {
	font-size: 12px;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.8px;
	line-height: 1.2;
	text-transform: uppercase;
}
@media (min-width: 1400px) { .body-text-ui { font-size: 13px; } }

.body-text-ui-large {
	font-size: 13px;
	font-weight: var(--font-weight-medium);
	letter-spacing: 1.3px;
	line-height: 1.2;
	text-transform: uppercase;
}
@media (min-width: 400px)  { .body-text-ui-large { font-size: calc(0.3vw + 11.8px); } }
@media (min-width: 1400px) { .body-text-ui-large { font-size: 16px; } }

.body-text-ui-small {
	font-size: 11px;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.8px;
	line-height: 1.2;
	text-transform: uppercase;
}
@media (min-width: 1400px) { .body-text-ui-small { font-size: 12px; } }

.body-text-ui-tiny {
	font-size: 11px;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.8px;
	line-height: 1.2;
	text-transform: uppercase;
}

/* -------------------------------------------------------------- Flow text */

p, ul, ol, figure, blockquote { margin-top: 0; margin-bottom: var(--typography-spacing); }
p:last-child, ul:last-child, ol:last-child, figure:last-child, blockquote:last-child { margin-bottom: 0; }

figure { margin-left: 0; margin-right: 0; }
figcaption { font-style: italic; margin-top: 0.8em; text-align: center; }

ul, ol { padding-left: 1em; }
ul ::marker { color: var(--color-gray-500); font-size: 12px; }

hr { background-color: var(--color-gray-200); border: none; height: 1px; }

strong { font-weight: var(--font-weight-bold); }

blockquote { border-left: 3px solid var(--color-gray-200); padding: 0.6em 0 0.6em 1em; margin-left: 0; margin-right: 0; }
blockquote cite { font-style: normal; }

/* ------------------------------------------------------------ Layout core */

.main {
	margin-top: var(--grid-section-gutter);
	margin-bottom: var(--grid-section-gutter);
	padding-left: var(--grid-col-gutter);
	padding-right: var(--grid-col-gutter);
}
.main--no-spacing { margin-top: 0; margin-bottom: 0; }
.main > * { margin-left: auto; margin-right: auto; max-width: var(--wrap-width); }
.main--narrow > *, .narrow-wrap { margin-left: auto; margin-right: auto; max-width: var(--wrap-width-narrow); }

.wrap {
	margin-left: auto;
	margin-right: auto;
	max-width: calc(var(--wrap-width) + var(--grid-col-gutter) * 2);
	padding-left: var(--grid-col-gutter);
	padding-right: var(--grid-col-gutter);
	width: 100%;
}

.alignfull, .full-width {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
}

/* Sections: vertical rhythm + full-bleed hairline separators */
.section { margin-top: var(--grid-section-gutter); margin-bottom: var(--grid-section-gutter); }
.section:first-child { margin-top: 0; }
.section:last-child { margin-bottom: 0; }

.section:not(.section--seamless) + .section:not(.section--no-border)::before,
.section--seamless-with-border::before {
	content: "";
	display: block;
	height: 0;
	border-top: 1px solid var(--color-gray-300);
	margin: var(--grid-section-gutter) calc(-50vw + 50%);
	width: 100vw;
	max-width: 100vw;
}
.section--seamless-with-border:first-of-type::before { display: none; }

.section--has-background { background-color: var(--color-soft-white); }
.section--has-background-soft-black { background-color: var(--color-soft-black); color: var(--color-soft-white); }
.section--has-background-soft-white { background-color: var(--color-soft-white); color: var(--color-soft-black); }
.section--has-background-burgundy-2 { background-color: var(--color-burgundy-2); color: var(--color-soft-white); }
.section--has-background-brass-3 { background-color: var(--color-brass-3); color: var(--color-soft-black); }
.section--seamless-with-padding { padding-top: var(--grid-section-gutter); padding-bottom: var(--grid-section-gutter); }

/* Grid */
.grid {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--grid-col-gutter);
	row-gap: var(--grid-row-gutter);
}
.grid > * { min-width: 0; }
@media screen and (min-width: 576px) {
	.grid--cols-2, .grid--cols-3, .grid--cols-4, .grid--cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 1024px) {
	.grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
	.grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* --------------------------------------------------------------- Buttons */

.btn {
	background-color: var(--color-brass-1);
	border: 1px solid transparent;
	border-radius: 0;
	color: var(--color-soft-black);
	cursor: pointer;
	display: inline-block;
	font-size: 12px;
	font-weight: var(--font-weight-default);
	letter-spacing: 0.75px;
	line-height: 1.3;
	padding: 11px 24px;
	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
	transition-property: all;
	transition-duration: var(--transition-time);
	transition-timing-function: var(--transition-easing);
}
@media screen and (min-width: 768px) {
	.btn { font-size: 13px; line-height: 1.7; min-width: 160px; padding: 13px 24px; }
}
@media screen and (min-width: 1024px) {
	.btn { min-width: 200px; }
}
.btn:hover { filter: brightness(0.9) saturate(1.15); }
.btn:disabled { background-color: #d3b68480; cursor: not-allowed; }

.btn--outline, .btn--brass-1-outline {
	background-color: transparent;
	border: 1px solid #d3b68480;
	color: var(--color-brass-1) !important;
}
.btn--outline:hover, .btn--brass-1-outline:hover {
	background-color: var(--color-brass-1);
	border-color: transparent;
	color: var(--color-soft-black) !important;
	filter: none;
}

.btn--navy { background-color: var(--color-navy); color: var(--color-soft-white) !important; }
.btn--navy:hover { background-color: transparent; border-color: #062c46e6; color: var(--color-navy) !important; filter: none; }

.btn--tan { background-color: var(--color-tan); }
.btn--tan:hover { background-color: transparent; border-color: #c0b58de6; color: var(--color-tan) !important; filter: none; }

.btn--white { background-color: var(--color-white); color: var(--color-soft-black) !important; }
.btn--white:hover { background-color: var(--color-gray-300); filter: none; }

.btn--soft-white { background-color: var(--color-soft-white); color: var(--color-soft-black) !important; }
.btn--soft-black { background-color: var(--color-soft-black); color: var(--color-soft-white) !important; }

.btn--burgundy-2 { background-color: var(--color-burgundy-2); color: var(--color-soft-white) !important; }
.btn--burgundy-2:hover { background-color: transparent; border-color: #2d161e80; color: var(--color-burgundy-2) !important; filter: none; }

.btn--white-outline {
	background-color: transparent;
	border: 1px solid #ffffff80;
	color: var(--color-white) !important;
}
.btn--white-outline:hover { background-color: var(--color-white); border-color: transparent; color: var(--color-soft-black) !important; filter: none; }

.btn--soft-white-outline {
	background-color: transparent;
	border: 1px solid #fefefc80;
	color: var(--color-soft-white) !important;
}
.btn--soft-white-outline:hover { background-color: var(--color-soft-white); border-color: transparent; color: var(--color-soft-black) !important; filter: none; }

.btn--unstyled {
	background-color: transparent;
	color: var(--color-soft-black) !important;
	font-size: 14px;
	min-width: 0;
	padding: 0;
	text-transform: none;
}
.btn--unstyled:hover { background-color: transparent; filter: none; }

.btn--has-icon { display: inline-flex; align-items: center; gap: 7px; }
.btn__icon svg { height: auto; max-height: 14px; max-width: 14px; width: auto; }

button { border: 0; cursor: pointer; margin: 0; padding: 0; }
button, input { appearance: none; background: none; border: none; box-shadow: none; outline: 0; }

/* ----------------------------------------------------------------- Forms */

input[type="email"], input[type="number"], input[type="password"], input[type="search"],
input[type="tel"], input[type="text"], select, textarea {
	background-color: var(--color-burgundy-2);
	border: 1px solid var(--forms-border-color);
	border-radius: 0;
	color: var(--color-soft-white);
	font-family: var(--font-family);
	font-size: 14px;
	font-weight: var(--font-weight-default);
	line-height: 1.5715;
	outline: none;
	padding: 7px 10px;
	transition: border var(--transition-time) var(--transition-easing);
	width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--color-brass-3); opacity: 0.75; }
select { cursor: pointer; }
label { display: block; margin-bottom: 6px; }

/* ------------------------------------------------------------- Utilities */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }

/* Card hover convention: image zoom + lift shadow */
.card-hover-media { overflow: hidden; }
.card-hover-media img {
	transition: transform var(--transition-time) var(--transition-easing);
}
a:hover .card-hover-media img, .card-hover:hover .card-hover-media img {
	transform: scale(var(--scale-size));
}