/* =========================================================================
   Homepage blocks and shared small parts.

   Loaded after style.css. Nothing here knows what is being sold: every
   block is a layout, and the words inside it come from the database.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Block shell
   ---------------------------------------------------------------------- */

.hg-block {
	padding: 88px 0;
	position: relative;
	overflow-x: clip;
}

.hg-usp { background: var(--hg-paper-2); padding: 64px 0; }
.hg-compare { background: var(--hg-paper-2); }
.hg-steps { background: var(--hg-graphite); color: #e8e0d3; }
.hg-quotes { background: var(--hg-paper-2); }

.hg-steps .hg-head__title { color: #f4ede0; }
.hg-steps .hg-head__lead { color: rgba(232, 224, 211, 0.74); }
.hg-steps .hg-eyebrow { color: var(--hg-accent); }

/* A tile that stands in for a missing photograph. */
.hg-noimg {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background:
		linear-gradient(135deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%) 0 0/22px 22px,
		var(--hg-paper-2);
	border-radius: var(--hg-radius);
}

/* -------------------------------------------------------------------------
   2. Chips — the scale buttons above the comparison chart
   ---------------------------------------------------------------------- */

.hg-chip {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid var(--hg-line);
	border-radius: 999px;
	background: transparent;
	color: var(--hg-ink-2);
	font-family: var(--hg-sans);
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 0.015em;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.28s var(--hg-ease), color 0.28s var(--hg-ease), border-color 0.28s var(--hg-ease);
}
.hg-chip:hover { border-color: var(--hg-brass); color: var(--hg-ink); }
.hg-chip.is-on {
	background: var(--hg-ink);
	border-color: var(--hg-ink);
	color: var(--hg-paper);
}

/* -------------------------------------------------------------------------
   3. Specification table
   ---------------------------------------------------------------------- */

.hg-spec {
	margin: 0;
	border-top: 1px solid var(--hg-line);
}
.hg-spec__row {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--hg-line-2);
}
.hg-spec__k {
	margin: 0;
	min-width: 0;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hg-muted);
	padding-top: 2px;
}
.hg-spec__v {
	margin: 0;
	min-width: 0;
	font-size: 15px;
	color: var(--hg-ink);
}

.hg-specblock {
	margin: 62px 0 0;
	padding: 34px 0 0;
	border-top: 1px solid var(--hg-line);
}
.hg-specblock__title {
	font-size: 24px;
	margin: 0 0 22px;
}
/* -------------------------------------------------------------------------
   4. Selling points
   ---------------------------------------------------------------------- */

.hg-usp__heading {
	font-family: var(--hg-serif);
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
	margin: 0 0 34px;
	max-width: 28ch;
}

.hg-usp__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}
.hg-usp__grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hg-usp__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hg-usp__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }

.hg-usp__item {
	min-width: 0;
	padding: 6px 30px 6px 0;
	border-left: 1px solid var(--hg-line);
	padding-left: 26px;
}
.hg-usp__item:first-child { border-left: 0; padding-left: 0; }

.hg-usp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--hg-line);
	color: var(--hg-brass);
	margin-bottom: 16px;
}
.hg-usp__svg { display: block; }

.hg-usp__title {
	font-family: var(--hg-serif);
	font-size: 18px;
	line-height: 1.25;
	margin: 0 0 8px;
}
.hg-usp__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--hg-muted);
}

/* -------------------------------------------------------------------------
   5. Image + text
   ---------------------------------------------------------------------- */

.hg-split { padding: 74px 0; }
.hg-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 76px);
	align-items: center;
}
.hg-split--rev .hg-split__media { order: 2; }

.hg-split__media { position: relative; min-width: 0; }
.hg-split__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--hg-radius);
	display: block;
}
.hg-split__text { min-width: 0; }
.hg-split__title {
	font-size: clamp(1.65rem, 2.9vw, 2.4rem);
	line-height: 1.16;
	margin: 0 0 20px;
	max-width: 22ch;
}
.hg-split__text p { color: var(--hg-ink-2); font-size: 15.5px; }
.hg-split__links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 26px; }

/* -------------------------------------------------------------------------
   6. Numbered steps
   ---------------------------------------------------------------------- */

.hg-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	counter-reset: hgstep;
}
.hg-steps__list[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hg-steps__list[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hg-steps__list[data-count="1"] { grid-template-columns: minmax(0, 1fr); }

.hg-steps__item {
	min-width: 0;
	padding-top: 22px;
	border-top: 1px solid rgba(232, 224, 211, 0.22);
}
.hg-steps__num {
	display: block;
	font-family: var(--hg-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--hg-accent);
	margin-bottom: 14px;
}
.hg-steps__title {
	font-family: var(--hg-serif);
	font-size: 20px;
	line-height: 1.24;
	margin: 0 0 10px;
	color: #f4ede0;
}
.hg-steps__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.62;
	color: rgba(232, 224, 211, 0.7);
}
/* -------------------------------------------------------------------------
   7. Customer quotes
   ---------------------------------------------------------------------- */

.hg-quotes__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}
.hg-quotes__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hg-quotes__grid[data-count="1"] { grid-template-columns: minmax(0, 46rem); }

.hg-quotes__item { min-width: 0; }
.hg-quotes__fig {
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 32px 30px;
	background: var(--hg-paper);
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius);
}
.hg-quotes__text {
	margin: 0;
	flex: 1 1 auto;
	position: relative;
	padding-top: 24px;
}
.hg-quotes__text::before {
	content: "\201C";
	position: absolute;
	top: -6px;
	left: -2px;
	font-family: var(--hg-serif);
	font-size: 46px;
	line-height: 1;
	color: var(--hg-brass);
}
.hg-quotes__text p {
	margin: 0;
	font-family: var(--hg-serif);
	font-size: 17.5px;
	line-height: 1.5;
	color: var(--hg-ink);
}
.hg-quotes__by {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.hg-quotes__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}
.hg-quotes__who { display: flex; flex-direction: column; min-width: 0; }
.hg-quotes__name { font-size: 14px; color: var(--hg-ink); }
.hg-quotes__role {
	font-family: var(--hg-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--hg-muted);
}

/* -------------------------------------------------------------------------
   8. Comparison chart
   ---------------------------------------------------------------------- */

.hg-compare__panel {
	background: var(--hg-paper);
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius);
	padding: 30px 32px 26px;
}
.hg-compare__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
}
.hg-compare__chart { display: grid; gap: 14px; }

.hg-compare__row {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 7rem);
	align-items: center;
	gap: 18px;
}
.hg-compare__name {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-size: 14.5px;
	color: var(--hg-ink);
}
.hg-compare__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: none;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
.hg-compare__track {
	display: block;
	height: 12px;
	border-radius: 999px;
	background: var(--hg-paper-2);
	box-shadow: inset 0 0 0 1px var(--hg-line-2);
	overflow: hidden;
	min-width: 0;
}
.hg-compare__bar {
	display: block;
	height: 100%;
	border-radius: 999px;
	transition: width 0.7s var(--hg-ease);
}
.hg-static .hg-compare__bar { transition: none; }
.hg-compare__value {
	font-family: var(--hg-mono);
	font-size: 12.5px;
	color: var(--hg-ink-2);
	text-align: right;
	min-width: 0;
	overflow-wrap: anywhere;
}
.hg-compare__note {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--hg-line-2);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--hg-muted);
}
.hg-compare__note:empty { display: none; }

.hg-compare__foot {
	margin: 22px 0 0;
	font-size: 13px;
	color: var(--hg-muted);
	max-width: 66ch;
}

.hg-compare__cards {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}
.hg-compare__card {
	display: grid;
	grid-template-columns: 8px minmax(0, 1fr);
	gap: 16px;
	padding: 20px 22px;
	background: var(--hg-paper);
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius);
}
.hg-compare__swatch { display: block; border-radius: 999px; }
.hg-compare__cardbody { min-width: 0; }
.hg-compare__cardtitle {
	display: block;
	font-family: var(--hg-serif);
	font-size: 18px;
	margin-bottom: 5px;
}
.hg-compare__cardnote {
	display: block;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--hg-muted);
}

/* -------------------------------------------------------------------------
   9. Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.hg-usp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
	.hg-usp__item:nth-child(odd) { border-left: 0; padding-left: 0; }
	.hg-steps__list,
	.hg-steps__list[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hg-split__grid { grid-template-columns: minmax(0, 1fr); }
	.hg-split--rev .hg-split__media { order: 0; }
	.hg-quotes__grid,
	.hg-quotes__grid[data-count="2"] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.hg-block { padding: 62px 0; }
	.hg-specblock { margin-top: 44px; }
	.hg-compare__panel { padding: 24px 22px 20px; }
}

@media (max-width: 720px) {
	.hg-usp__grid { grid-template-columns: minmax(0, 1fr); }
	.hg-usp__item { border-left: 0; padding-left: 0; }
	.hg-steps__list,
	.hg-steps__list[data-count="3"] { grid-template-columns: minmax(0, 1fr); }
	.hg-spec__row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
	.hg-compare__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 6rem);
		grid-template-areas: "name value" "track track";
		gap: 8px 12px;
	}
	.hg-compare__name { grid-area: name; }
	.hg-compare__value { grid-area: value; }
	.hg-compare__track { grid-area: track; }
}

@media (max-width: 480px) {
	.hg-chip { padding: 9px 14px; font-size: 12.5px; }
	.hg-quotes__fig { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.hg-compare__bar,
	.hg-chip { transition: none; }
}