/*! Cikret Industry Landing Pages | Halverstone Roofing sample (fictional) | scoped to .ilp-demo--roofing */

@font-face {
	font-family: "ILP Archivo";
	src: url("../fonts/archivo-var.woff2") format("woff2");
	font-weight: 400 850;
	font-stretch: 75% 100%;
	font-display: swap;
}

.ilp-demo--roofing {
	--rf-char: #1d2226;
	--rf-char-2: #262c31;
	--rf-steel: #4a5862;
	--rf-steel-2: #6b7983;
	--rf-copper: #a95b29;
	--rf-copper-deep: #8c4a1f;
	--rf-copper-soft: #e8b48d;
	--rf-fog: #eceff0;
	--rf-line: #d3d9dc;
	--rf-display: "ILP Archivo", "Arial Narrow", Arial, sans-serif;
	background: var(--rf-fog);
	color: var(--rf-char);
	font-family: "ILP Archivo", Arial, sans-serif;
	font-stretch: 100%;
}

.rf { font-size: 1.0625rem; line-height: 1.6; }
.rf-wrap { width: min(100% - 2 * var(--ilp-gutter), 1200px); margin-inline: auto; }
.rf-h3 {
	font: 800 clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem)/1 var(--rf-display);
	font-stretch: 78%;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Buttons */
.rf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 12px 22px;
	border: 2px solid transparent;
	border-radius: 4px;
	font: 700 1rem/1.15 var(--rf-display);
	font-stretch: 92%;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.rf-btn--copper { background: var(--rf-copper); color: #fff; }
.rf-btn--copper:hover { background: var(--rf-copper-deep); }
.rf-btn--dark { background: var(--rf-char); color: #fff; }
.rf-btn--dark:hover { background: #000; }
.rf-btn--line { color: #fff; border-color: rgba(255, 255, 255, .55); }
.rf-btn--line:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.rf-btn--sm { min-height: 42px; padding: 8px 16px; font-size: .9375rem; }

/* Header */
.rf-head { background: var(--rf-char); color: #fff; border-bottom: 3px solid var(--rf-copper); }
.rf-head__row {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 10px 24px;
	padding-block: 14px;
}
.rf-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.rf-brand__mark { color: var(--rf-copper-soft); }
.rf-brand__text { display: grid; line-height: 1; }
.rf-brand__name { font: 850 1.5rem/1 var(--rf-display); font-stretch: 75%; letter-spacing: .01em; }
.rf-brand__sub { margin-top: 3px; font: 600 .75rem/1 var(--rf-display); font-stretch: 100%; letter-spacing: .14em; color: #b9c2c8; }
.rf-nav {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	gap: 22px;
	overflow-x: auto;
	padding-block: 4px;
	scrollbar-width: none;
	font-weight: 600;
	font-size: .9375rem;
	white-space: nowrap;
}
.rf-nav::-webkit-scrollbar { display: none; }
@media (max-width: 979px) {
	.rf-nav { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 32px; }
}
.rf-nav a { color: #d7dde1; text-decoration: none; }
.rf-nav a:hover { color: #fff; text-decoration: underline; }
.rf-head__cta { justify-self: end; display: flex; align-items: center; gap: 16px; }
.rf-phone { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.rf-phone:hover { text-decoration: underline; }
@media (max-width: 520px) {
	.rf-phone { display: none; }
}
@media (min-width: 980px) {
	.rf-head__row { grid-template-columns: auto 1fr auto; }
	.rf-nav { grid-column: auto; grid-row: auto; justify-content: center; }
}

/* Hero */
.rf-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(560px, 86vh, 780px);
	color: #fff;
	background: var(--rf-char);
	isolation: isolate;
}
.rf-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.rf-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.rf-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(20, 24, 27, .94) 0%, rgba(20, 24, 27, .78) 34%, rgba(20, 24, 27, .2) 68%, rgba(20, 24, 27, .05) 100%),
		linear-gradient(to right, rgba(20, 24, 27, .55), rgba(20, 24, 27, 0) 60%);
}
.rf-hero__inner { padding-block: 120px clamp(36px, 6vw, 72px); }
.rf-hero__kicker {
	display: inline-block;
	margin-bottom: 14px;
	padding-left: 14px;
	border-left: 4px solid var(--rf-copper);
	font-weight: 700;
	font-stretch: 90%;
	color: var(--rf-copper-soft);
}
.rf-hero__title {
	max-width: 15ch;
	font: 850 clamp(2.6rem, 1.4rem + 5.2vw, 5.6rem)/.93 var(--rf-display);
	font-stretch: 75%;
	letter-spacing: -0.005em;
	text-wrap: balance;
}
.rf-hero__lead { margin-top: 20px; max-width: 54ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: #e4e8ea; }
.rf-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rf-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .2);
	list-style: none;
	font-weight: 600;
	font-size: .9688rem;
	color: #e4e8ea;
}
.rf-proof li { display: inline-flex; align-items: center; gap: 10px; }
.rf-proof li::before { content: ""; width: 9px; height: 9px; background: var(--rf-copper); transform: rotate(45deg); }
@media (max-width: 699px) {
	.rf-hero { display: block; min-height: 0; }
	.rf-hero__media { position: relative; height: 66vw; max-height: 420px; }
	.rf-hero__media::after { background: linear-gradient(to top, var(--rf-char) 0%, rgba(29, 34, 38, 0) 55%); }
	.rf-hero__img { object-position: 64% 40%; }
	.rf-hero__inner { position: relative; margin-top: -36px; padding-top: 0; }
	.rf-hero__actions .rf-btn { flex: 1 1 100%; }
}

/* Services */
.rf-services { padding-block: clamp(64px, 9vw, 120px); }
.rf-services__grid { display: grid; gap: 36px; }
.rf-services__head p { margin: 16px 0 24px; max-width: 40ch; color: var(--rf-steel); font-size: 1.125rem; }
.rf-services__list { list-style: none; display: grid; gap: 0; border-top: 2px solid var(--rf-char); }
.rf-services__list li { padding: 22px 0; border-bottom: 1px solid var(--rf-line); }
.rf-services__list h4 { font: 800 1.45rem/1.1 var(--rf-display); font-stretch: 82%; margin-bottom: 6px; }
.rf-services__list p { color: var(--rf-steel); max-width: 60ch; }
@media (min-width: 900px) {
	.rf-services__grid { grid-template-columns: 4fr 7fr; gap: 64px; }
	.rf-services__head { position: sticky; top: 24px; align-self: start; }
	.rf-services__list li { display: grid; grid-template-columns: 15ch 1fr; gap: 24px; align-items: baseline; }
	.rf-services__list h4 { margin: 0; }
}

/* Roof system */
.rf-system { background: var(--rf-char); color: #fff; padding-block: clamp(64px, 9vw, 120px); }
.rf-system__grid { display: grid; gap: 40px; align-items: center; }
.rf-system__lead { margin: 16px 0 26px; color: #c9d1d6; font-size: 1.125rem; max-width: 46ch; }
.rf-layers { list-style: none; counter-reset: rf-layer; display: grid; gap: 14px; }
.rf-layers li {
	counter-increment: rf-layer;
	position: relative;
	padding-left: 48px;
	color: #c9d1d6;
}
.rf-layers li::before {
	content: counter(rf-layer);
	position: absolute;
	left: 0;
	top: 1px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1.5px solid var(--rf-copper-soft);
	color: var(--rf-copper-soft);
	font: 800 .9375rem/1 var(--rf-display);
}
.rf-layers strong { color: #fff; font-weight: 700; }
.rf-system__fig { margin: 0; }
.rf-system__fig figcaption { margin-top: 10px; font-size: .875rem; color: #9eabb3; }
.rf-diagram { width: 100%; height: auto; overflow: visible; }
.rf-diagram .l-deck { fill: #a07a55; }
.rf-diagram .l-deck-lines path { stroke: #7f5e3f; stroke-width: 1.5; fill: none; }
.rf-diagram .l-ice { fill: #11161a; stroke: #3a454d; }
.rf-diagram .l-under { fill: #9aa7af; }
.rf-diagram .l-metal { fill: var(--rf-copper); }
.rf-diagram .l-shingle { fill: #3c444b; }
.rf-diagram .l-shingle-lines path { stroke: #22282d; stroke-width: 1.5; fill: none; }
.rf-diagram .l-ridge { fill: #59666f; }
.rf-diagram__labels path { stroke: var(--rf-copper-soft); stroke-width: 1.5; fill: none; }
.rf-diagram__labels circle { fill: var(--rf-char); stroke: var(--rf-copper-soft); stroke-width: 1.5; }
.rf-diagram__num { fill: var(--rf-copper-soft); font: 800 16px/1 "ILP Archivo", Arial, sans-serif; text-anchor: middle; }
.rf-diagram__name { fill: #e6eaec; font: 600 16px/1 "ILP Archivo", Arial, sans-serif; font-stretch: 90%; }
@media (max-width: 699px) {
	.rf-diagram__name { display: none; }
	.rf-diagram__labels circle { transform-box: fill-box; transform-origin: center; transform: scale(1.5); }
	.rf-diagram__num { font-size: 25px; transform: translateY(3px); }
}
@media (min-width: 960px) {
	.rf-system__grid { grid-template-columns: 5fr 6fr; gap: 64px; }
}

/* Projects */
.rf-projects { padding-block: clamp(64px, 9vw, 120px); }
.rf-projects__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 32px; margin-bottom: 32px; }
.rf-projects__head p { color: var(--rf-steel); max-width: 44ch; }
.rf-gallery { display: grid; gap: 18px; }
.rf-gallery__item { margin: 0; }
.rf-gallery__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; background: #cfd5d8; }
.rf-gallery__item figcaption { margin-top: 10px; font-size: .9375rem; color: var(--rf-steel); }
.rf-tag {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 8px;
	border-radius: 3px;
	background: var(--rf-char);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	vertical-align: 1px;
}
@media (min-width: 900px) {
	.rf-gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
	.rf-gallery__item { grid-column: span 5; }
	.rf-gallery__item--wide { grid-column: span 7; }
	.rf-gallery__item img { aspect-ratio: auto; height: clamp(300px, 30vw, 430px); }
}

/* Process */
.rf-process { background: #fff; padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--rf-line); }
.rf-steps { list-style: none; counter-reset: rf-step; display: grid; gap: 26px; margin-top: 36px; }
.rf-steps li { counter-increment: rf-step; position: relative; padding-top: 22px; border-top: 3px solid var(--rf-char); }
.rf-steps li::before {
	content: counter(rf-step, decimal-leading-zero);
	display: block;
	margin-bottom: 8px;
	font: 850 2.25rem/1 var(--rf-display);
	font-stretch: 75%;
	color: var(--rf-copper);
}
.rf-steps h4 { font: 800 1.3rem/1.15 var(--rf-display); font-stretch: 85%; margin-bottom: 6px; }
.rf-steps p { color: var(--rf-steel); font-size: 1rem; }
@media (min-width: 700px) { .rf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rf-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; } }

/* CTA + footer */
.rf-cta { background: var(--rf-copper); color: #fff; padding-block: clamp(40px, 6vw, 64px); }
.rf-cta__row { display: grid; gap: 22px; align-items: center; }
.rf-cta__title { font: 850 clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem)/1.02 var(--rf-display); font-stretch: 78%; max-width: 24ch; }
@media (min-width: 900px) { .rf-cta__row { grid-template-columns: 1fr auto; } }

.rf-foot { background: #14181b; color: #b9c2c8; padding-block: 28px; font-size: .9375rem; }
.rf-foot__row { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; }
.rf-foot__brand { font: 850 1.125rem/1 var(--rf-display); font-stretch: 78%; color: #fff; }
.rf-foot__phone { color: #fff; font-weight: 700; }
.rf-foot__note { flex-basis: 100%; font-size: .8438rem; color: #8b979e; }