/**
 * Supreme Companies — site foundation.
 *
 * Everything components share: type families, the page container, section
 * rhythm, eyebrow/heading/lead styles, buttons, motion. Colours always come
 * from the colorway variables (tokens.json), so a section's data-colorway
 * re-themes everything inside it. Component-specific CSS lives with each
 * component in components/<slug>/styles/.
 *
 * Breakpoints mirror the Lovable source: 640 / 768 / 1024 / 1280.
 */

:root {
	--sc-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
	--sc-font-display: "Playfair Display", ui-serif, Georgia, serif;
	--sc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sc-container: 80rem;
	--sc-gutter: 1.5rem;
	--sc-section-y: 6rem;
	--sc-header-h: 5rem;
	--sc-hero-accent: var(--tertiary, #ada48c);
	--sc-shadow-card: 0 10px 30px -15px rgb(14 34 57 / 0.18);
	--sc-shadow-elevated: 0 30px 60px -25px rgb(14 34 57 / 0.35);
	--sc-gradient-hero: linear-gradient(180deg, rgb(8 20 33 / 0.15) 0%, rgb(8 20 33 / 0.55) 60%, rgb(8 20 33 / 0.8) 100%);
}

@media (min-width: 1024px) {
	:root {
		--sc-gutter: 2.5rem;
		--sc-section-y: 8rem;
	}
}

/* ---------------------------------------------------------------- base */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--colorway-base, #f8f6f1);
	color: var(--colorway-hard-contrast, #0e2239);
	font-family: var(--sc-font-sans);
	font-size: 1rem;
	line-height: 1.5;
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--sc-font-display);
	font-weight: 400;
	letter-spacing: -0.025em;
	color: var(--colorway-hard-contrast);
}

p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

em { font-style: italic; }

:focus-visible {
	outline: 2px solid var(--colorway-accent);
	outline-offset: 3px;
}

.sc-skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--primary);
	color: #faf6f0;
}
.sc-skip-link:focus { top: 1rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ------------------------------------------------------------ layout */

.sc-container {
	width: 100%;
	max-width: var(--sc-container);
	margin-inline: auto;
	padding-inline: var(--sc-gutter);
}

.sc-section {
	padding-block: var(--sc-section-y);
	background: var(--colorway-base);
	color: var(--colorway-hard-contrast);
}
.sc-section[data-pad-top="none"] { padding-top: 0; }
.sc-section[data-pad-bottom="none"] { padding-bottom: 0; }

/* 12-column split used by most "eyebrow + heading | body" sections. */
.sc-split {
	display: grid;
	gap: 4rem;
}
@media (min-width: 1024px) {
	.sc-split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6rem; }
	.sc-split--narrow-gap { gap: 5rem; }
	.sc-split__aside { grid-column: span 5; }
	.sc-split__aside--4 { grid-column: span 4; }
	.sc-split__main { grid-column: span 7; }
	.sc-split__main--8 { grid-column: span 8; }
}

/* ------------------------------------------------------------ type */

.sc-eyebrow {
	font-family: var(--sc-font-sans);
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--colorway-accent);
}

.sc-heading {
	font-size: 2.25rem;
	line-height: 1.25;
}
@media (min-width: 640px) { .sc-heading { font-size: 3rem; line-height: 1; } }

.sc-heading--m { font-size: 1.875rem; line-height: 1.25; }
@media (min-width: 640px) { .sc-heading--m { font-size: 2.25rem; line-height: 2.5rem; } }
@media (min-width: 1024px) { .sc-heading--m { font-size: 3rem; line-height: 1; } }

.sc-heading--s { font-size: 1.875rem; line-height: 1.2; }

.sc-eyebrow + .sc-heading,
.sc-eyebrow + .sc-heading--m { margin-top: 1.25rem; }

.sc-lead {
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--colorway-contrast);
}

.sc-body {
	font-size: 1rem;
	line-height: 1.625;
	color: var(--colorway-contrast);
}

.sc-prose > * + * { margin-top: 1.5rem; }

.sc-meta {
	font-size: 0.75rem;
	line-height: 1rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--colorway-contrast);
}

/* ------------------------------------------------------------ actions */

/* Gravity Forms' submit button shares the primary button style. */
.sc-btn,
.sc-gform .gform_button {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 2rem;
	border: 1px solid transparent;
	background: var(--primary);
	color: #faf6f0;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: background-color 0.3s var(--sc-ease), color 0.3s var(--sc-ease);
}
.sc-btn:hover,
.sc-gform .gform_button:hover { background: var(--primary-hover, #14345d); }

.sc-btn--outline {
	padding: 1rem 1.75rem;
	border-color: var(--colorway-hard-contrast);
	background: transparent;
	color: var(--colorway-hard-contrast);
}
.sc-btn--outline:hover {
	background: var(--colorway-hard-contrast);
	color: var(--colorway-base);
}
.sc-btn .sc-icon { transition: transform 0.3s var(--sc-ease); }
.sc-btn--outline:hover .sc-icon { transform: translateX(0.25rem); }

.sc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--colorway-accent);
}
.sc-link--s { font-size: 0.875rem; line-height: 1.25rem; }

/* Underline that grows from the left on hover (Lovable .link-underline). */
.sc-underline { position: relative; }
.sc-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.25rem;
	width: 0;
	height: 1px;
	background: var(--colorway-accent);
	transition: width 0.3s var(--sc-ease);
}
.sc-underline:hover::after { width: 100%; }

/* ------------------------------------------------------------ media */

.sc-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-zoom { overflow: hidden; }
.sc-zoom img { transition: transform 0.7s var(--sc-ease); }
.sc-zoom:hover img,
a:hover > .sc-zoom img,
a:hover .sc-zoom img { transform: scale(1.05); }

/* ------------------------------------------------------------ motion */

@keyframes sc-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes sc-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes sc-ken-burns {
	0% { transform: scale(1) translate(0, 0); }
	100% { transform: scale(1.08) translate(-1%, -1%); }
}
@keyframes sc-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.sc-fade-up { animation: sc-fade-up 0.8s var(--sc-ease) both; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}