/* Sitecraft Blocks — front-end styles.
   Loaded on the front end and in the editor, so what you edit is what ships.
   Everything is driven by the tokens below: change them in one place per site
   and every block follows. */

:root {
	--sc-ink:    #1d2321;
	--sc-deep:   #143421;
	--sc-accent: #c9a227;
	--sc-muted:  #6b7266;
	--sc-paper:  #faf8f2;
	--sc-line:   rgba(29, 35, 33, .12);
	--sc-wrap:   1180px;
	--sc-gap:    clamp(1.1rem, 2.4vw, 2rem);
	--sc-pad:    clamp(2.6rem, 6vw, 5.5rem);
	--sc-r:      14px;
	--sc-ease:   cubic-bezier(.16, .84, .44, 1);
}

/* Do not inherit the theme's reset — most set border-box, some do not, and under
   content-box every `width: 100%` element with padding overflows the viewport
   and drags a horizontal scrollbar across the whole page. Scoped to our own
   sections so nothing else on the site is touched. */
.sc-hero, .sc-head, .sc-cards, .sc-cta, .sc-faq, .sc-stats,
.sc-hero *, .sc-head *, .sc-cards *, .sc-cta *, .sc-faq *, .sc-stats * {
	box-sizing: border-box;
}

.sc-wrap {
	width: 100%;
	max-width: var(--sc-wrap);
	margin-inline: auto;
	padding-inline: clamp(1.1rem, 4vw, 2rem);
}

/* tones ------------------------------------------------------------------- */

.sc-tone-light { background: #fff;            color: var(--sc-ink); }
.sc-tone-paper { background: var(--sc-paper); color: var(--sc-ink); }
.sc-tone-dark  { background: var(--sc-deep);  color: #fff; }

.sc-tone-dark .sc-eyebrow,
.sc-tone-dark .sc-card__text,
.sc-tone-dark .sc-stat__l { color: rgba(255, 255, 255, .72); }

.sc-al-center { text-align: center; }
.sc-al-center .sc-head__intro,
.sc-al-center .sc-hero__sub { margin-inline: auto; }

.sc-w-wide .sc-wrap { max-width: 1480px; }
.sc-w-full .sc-wrap { max-width: none; }

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

.sc-eyebrow {
	margin: 0 0 .7rem;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sc-muted);
}

.sc-btn {
	display: inline-block;
	padding: .86rem 1.9rem;
	border: 1px solid var(--sc-accent);
	border-radius: 999px;
	background: var(--sc-accent);
	color: #1a1a1a;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;
	text-decoration: none;
	transition: transform .35s var(--sc-ease), background .35s var(--sc-ease), color .35s var(--sc-ease);
}
.sc-btn:hover { transform: translateY(-2px); background: #d8b231; color: #1a1a1a; }

.sc-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.sc-btn--ghost:hover { background: currentColor; color: var(--sc-deep); }

.sc-empty {
	margin: 0;
	padding: 2rem;
	border: 1px dashed var(--sc-line);
	border-radius: var(--sc-r);
	color: var(--sc-muted);
	text-align: center;
	font-style: italic;
}

/* hero -------------------------------------------------------------------- */

.sc-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(360px, 52vh, 560px);
	padding-block: var(--sc-pad);
	overflow: hidden;
	background-size: cover;
	background-position: center;
}
.sc-hero--tall { min-height: clamp(460px, 76vh, 820px); }

.sc-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 18, 14, .32), rgba(10, 18, 14, .68));
}
/* on a light-toned hero the image needs lifting, not darkening */
.sc-hero--img.sc-tone-light .sc-hero__veil,
.sc-hero--img.sc-tone-paper .sc-hero__veil {
	background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .86));
}

.sc-hero__inner { position: relative; max-width: 54rem; }
.sc-al-center .sc-hero__inner { margin-inline: auto; }

.sc-hero__title {
	margin: 0 0 1rem;
	font-size: clamp(2.1rem, 5.4vw, 4rem);
	line-height: 1.04;
	letter-spacing: -.02em;
}
.sc-hero__sub {
	max-width: 42rem;
	margin: 0;
	font-size: clamp(1.02rem, 1.6vw, 1.22rem);
	line-height: 1.62;
	opacity: .92;
}
.sc-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: 1.9rem;
}
.sc-al-center .sc-hero__cta { justify-content: center; }

/* section heading --------------------------------------------------------- */

.sc-head { margin: 0 0 2.2rem; }
.sc-head__title {
	margin: 0 0 .8rem;
	font-size: clamp(1.6rem, 3.2vw, 2.5rem);
	line-height: 1.14;
	letter-spacing: -.015em;
}
.sc-head__intro {
	max-width: 46rem;
	margin: 0;
	color: var(--sc-muted);
	font-size: 1.04rem;
	line-height: 1.68;
}

/* card grid -------------------------------------------------------------- */

.sc-cards { padding-block: var(--sc-pad); }

.sc-grid {
	display: grid;
	gap: var(--sc-gap);
	/* auto-fit collapses empty tracks, so a 3-up grid holding 2 cards does not
	   leave a dead column on the right */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
@media (min-width: 900px) {
	.sc-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.sc-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.sc-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.sc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-r);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform .45s var(--sc-ease), box-shadow .45s var(--sc-ease);
}
.sc-tone-dark .sc-card {
	border-color: rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .05);
}

.sc-card--link:hover { transform: translateY(-5px); box-shadow: 0 16px 42px rgba(14, 22, 18, .14); }

.sc-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sc-paper); }
.sc-card__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	/* stops the 1px shimmer the scale transform otherwise causes */
	backface-visibility: hidden;
	transition: transform .7s var(--sc-ease);
}
.sc-card--link:hover .sc-card__media img { transform: scale(1.07); }

.sc-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.3rem 1.4rem 1.5rem; }
.sc-card__title { margin: 0; font-size: 1.1rem; line-height: 1.32; }
.sc-card__text  { margin: 0; color: var(--sc-muted); font-size: .95rem; line-height: 1.6; }
.sc-card__link {
	margin-top: auto;
	padding-top: .5rem;
	color: var(--sc-accent);
	font-weight: 600;
	font-size: .9rem;
}
.sc-card__link::after { content: " \2192"; }

/* cta band --------------------------------------------------------------- */

.sc-cta { padding-block: clamp(2.2rem, 4.6vw, 3.8rem); }
.sc-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
}
.sc-cta__copy { flex: 1 1 24rem; }
.sc-cta__title { margin: 0 0 .4rem; font-size: clamp(1.4rem, 2.6vw, 2.05rem); line-height: 1.2; }
.sc-cta__text  { margin: 0; opacity: .82; line-height: 1.6; }

/* faq -------------------------------------------------------------------- */

.sc-faq { padding-block: clamp(1.6rem, 3vw, 2.6rem); }

.sc-faq__item { border-bottom: 1px solid var(--sc-line); }
.sc-faq__q {
	margin: 0;
	padding: 1.15rem 2.4rem 1.15rem 0;
	position: relative;
	cursor: pointer;
	font-weight: 600;
	font-size: 1.04rem;
	line-height: 1.45;
	list-style: none;
}
.sc-faq__q::-webkit-details-marker { display: none; }
.sc-faq__q::after {
	content: "+";
	position: absolute;
	right: .2rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--sc-accent);
	transition: transform .3s var(--sc-ease);
}
.sc-faq__item[open] .sc-faq__q::after { transform: translateY(-50%) rotate(45deg); }
.sc-faq__a { padding: 0 2.4rem 1.3rem 0; color: var(--sc-muted); line-height: 1.68; }
.sc-faq__a p { margin: 0; }

/* stat row --------------------------------------------------------------- */

.sc-stats { padding-block: clamp(2rem, 4vw, 3.2rem); }
.sc-stats__row {
	display: grid;
	gap: var(--sc-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	text-align: center;
}
.sc-stat { display: flex; flex-direction: column; gap: .3rem; }
.sc-stat__v {
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--sc-deep);
}
.sc-tone-dark .sc-stat__v { color: var(--sc-accent); }
.sc-stat__l {
	font-size: .84rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--sc-muted);
}

/* internal linking ------------------------------------------------------- */

/* Automatic links are underlined like any other link rather than styled to
   stand out. They are editorial links, not adverts, and a reader should not be
   able to tell which were placed by hand. */
.sc-autolink { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 2px; }
.sc-autolink:hover { text-decoration-thickness: 2px; }

.sc-related {
	margin-top: 3rem;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-r);
	background: var(--sc-paper);
}
.sc-related__title {
	margin: 0 0 .7rem;
	font-size: 1.05rem;
	line-height: 1.3;
}
.sc-related__list { margin: 0; padding-left: 1.1rem; }
.sc-related__list li + li { margin-top: .4rem; }
.sc-related__list a { color: inherit; }

/* respect the OS setting rather than animating regardless ----------------- */

@media (prefers-reduced-motion: reduce) {
	.sc-btn, .sc-card, .sc-card__media img, .sc-faq__q::after { transition: none; }
	.sc-btn:hover, .sc-card--link:hover { transform: none; }
	.sc-card--link:hover .sc-card__media img { transform: none; }
}