/* ==========================================================================
   Page sections shared by the home, service, contact, portfolio and blog pages
   ========================================================================== */

.container--narrow {
	width: min(100% - 2.5rem, 52rem);
}

.section--tight {
	padding-bottom: 0;
}

.section__head {
	max-width: 46rem;
	margin-bottom: var(--sp-6);
}

.section__head .lead {
	margin-bottom: 0;
}

.section__more {
	margin: var(--sp-6) 0 0;
}

.section__head--row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4) var(--sp-6);
	max-width: none;
}

.section__head--row > div {
	max-width: 46rem;
}

/* Tiles: picture with the text over it */
.bento {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.bento {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.bento {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: minmax(15.5rem, auto);
	}

	.bento--1 > .tile { grid-column: 1 / -1; min-height: 24rem; }
	.bento--2 > .tile { grid-column: span 2; min-height: 22rem; }
	.bento--3 > .tile:first-child { grid-column: span 2; grid-row: span 2; }
	.bento--3 > .tile:not(:first-child) { grid-column: span 2; }
	.bento--4 > .tile:first-child,
	.bento--5 > .tile:first-child { grid-column: span 2; grid-row: span 2; }
	.bento--4 > .tile:nth-child(2) { grid-column: span 2; }

	.bento--3:not(.bento--grid) > .tile:first-child .tile__title,
	.bento--4:not(.bento--grid) > .tile:first-child .tile__title,
	.bento--5:not(.bento--grid) > .tile:first-child .tile__title {
		font-size: var(--fs-xl);
	}
}

.bento.bento--grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	grid-auto-rows: auto;
}

.bento.bento--grid > .tile:nth-child(n) {
	grid-column: auto;
	grid-row: auto;
	min-height: 0;
	aspect-ratio: 4 / 3.4;
}

.tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 17rem;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--es-charcoal);
	color: var(--es-white);
	transition: box-shadow 0.25s, transform 0.25s;
}

.tile__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.tile__media img,
.tile__media svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: auto;
	transition: transform 0.6s ease;
}

.tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(20, 21, 24, 0.94) 0%, rgba(20, 21, 24, 0.55) 45%, rgba(20, 21, 24, 0.05) 100%);
}

.tile__body {
	padding: var(--sp-5);
}

.tile__title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-md);
	color: var(--es-white);
}

.tile__title a {
	color: inherit;
	text-decoration: none;
}

.tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tile__text {
	max-width: 32rem;
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-sm);
	color: #d7dae0;
}

.tile__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--es-amber);
}

.tile__more::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-top: 2px solid currentcolor;
	border-right: 2px solid currentcolor;
	transform: rotate(45deg);
}

.tile .chip {
	align-self: flex-start;
	margin-bottom: var(--sp-2);
}

.tile:hover,
.tile:focus-within {
	box-shadow: 0 0 0 2px var(--es-amber), var(--glow);
	transform: translateY(-3px);
}

.tile:hover .tile__media > *,
.tile:focus-within .tile__media > * {
	transform: scale(1.05);
}

.tile :focus-visible {
	outline-color: var(--es-amber);
}

.btn--outline-light {
	border-color: rgba(255, 255, 255, 0.7);
	background: transparent;
	color: var(--es-white);
}

.btn--outline-light:hover {
	background: var(--es-white);
	border-color: var(--es-white);
	color: var(--es-charcoal);
}

/* Cards: whole card is the link */
.card--link {
	position: relative;
}

.card--link .card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.card--link:hover .card__title a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.card__media {
	display: block;
	overflow: hidden;
	background: var(--es-amber-tint);
}

.card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.card__body > .chip {
	margin-bottom: var(--sp-3);
}

.card__body > :last-child {
	margin-bottom: 0;
}

.card--feature .card__title {
	font-size: var(--fs-lg);
}

.grid--after-feature {
	margin-top: var(--sp-5);
}

@media (min-width: 56rem) {
	.card--feature {
		flex-direction: row;
	}

	.card--feature .card__media {
		flex: 1.2;
	}

	.card--feature .card__body {
		flex: 1;
		align-self: center;
		padding: var(--sp-6);
	}
}

/* Page top band */
.page-hero {
	padding-block: clamp(3rem, 2rem + 4vw, 5rem);
	background: var(--es-charcoal);
	color: var(--es-white);
}

.page-hero h1 {
	max-width: 22ch;
	font-size: clamp(2.2rem, 1.4rem + 3vw, 3.75rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.page-hero__lead {
	max-width: 42rem;
	font-size: var(--fs-md);
	color: #d7dae0;
}

.page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: 0;
	color: #d7dae0;
}

.page-hero .cluster {
	margin-top: var(--sp-5);
}

.page-hero--image {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(26rem, 60vh, 36rem);
	padding-block: clamp(4rem, 3rem + 6vw, 7rem) clamp(4rem, 3rem + 4vw, 5.5rem);
	overflow: hidden;
	background: var(--es-charcoal-deep);
}

.page-hero--image > .page-hero__inner {
	width: min(100% - 2.5rem, var(--container));
}

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.page-hero__bg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero__media .ph {
	aspect-ratio: auto;
}

.page-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		var(--grid-lines),
		linear-gradient(90deg, rgba(31, 33, 37, 0.96) 0%, rgba(31, 33, 37, 0.78) 50%, rgba(31, 33, 37, 0.35) 100%),
		linear-gradient(0deg, rgba(31, 33, 37, 0.85) 0%, rgba(31, 33, 37, 0) 50%);
	background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto, auto;
}

/* Breadcrumbs (own trail, or Rank Math's) */
.breadcrumbs ol,
.rank-math-breadcrumb p {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 var(--sp-4);
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
	color: #d7dae0;
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.25rem;
	opacity: 0.6;
}

.breadcrumbs a,
.rank-math-breadcrumb a {
	color: var(--es-white);
	text-decoration: none;
}

.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover {
	color: var(--es-amber);
	text-decoration: underline;
}

/* Quick facts */
.facts {
	background: var(--es-surface);
	border-bottom: 1px solid var(--es-line);
}

.facts__list {
	display: grid;
	gap: var(--sp-4) var(--sp-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	margin-block: 0;
	padding-block: var(--sp-5);
}

.facts dt {
	font-size: var(--fs-sm);
	color: var(--es-muted);
}

.facts dd {
	margin: 0;
	font-weight: 600;
}

.facts--float {
	position: relative;
	z-index: 2;
	margin-top: -2.75rem;
	background: transparent;
	border: 0;
}

.facts--float .facts__list {
	padding: var(--sp-5) var(--sp-6);
	border-top: 3px solid var(--es-amber);
	border-radius: var(--r-md);
	background: var(--es-white);
	box-shadow: 0 24px 50px -28px rgba(31, 33, 37, 0.5);
}

.facts--float dt {
	margin-bottom: var(--sp-1);
}

/* Service page body and quotation card */
.service-layout {
	display: grid;
	gap: var(--sp-7);
}

@media (min-width: 64rem) {
	.service-layout {
		grid-template-columns: minmax(0, 1fr) 20rem;
		align-items: start;
	}
}

.quote-card {
	padding: var(--sp-5);
	border-radius: var(--r-md);
	background: var(--es-charcoal);
	color: var(--es-white);
}

.quote-card :focus-visible {
	outline-color: var(--es-amber);
}

.quote-card h2 {
	font-size: var(--fs-lg);
}

.quote-card .btn {
	width: 100%;
}

.quote-card a:not(.btn) {
	color: var(--es-white);
}

.quote-card__line {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: var(--sp-3) 0 0;
}

.quote-card__line .icon {
	color: var(--es-amber);
}

@media (min-width: 64rem) {
	.quote-card:not(.quote-card--inline) {
		position: sticky;
		top: calc(var(--header-h) + 2rem);
	}
}

.quote-card--inline {
	max-width: 44rem;
	margin-top: var(--sp-7);
}

/* How it works: connected steps with icons, arrows and a travelling light */
.process {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--es-surface);
	background-image: radial-gradient(rgba(43, 46, 51, 0.09) 1px, transparent 1.4px);
	background-size: 22px 22px;
}

.process::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(60% 55% at 50% 0%, rgba(247, 169, 54, 0.14), transparent 70%), linear-gradient(180deg, transparent 70%, var(--es-surface));
}

.section__head--center {
	margin-inline: auto;
	text-align: center;
}

.section__head--center h2::after {
	margin-inline: auto;
}

.flow {
	position: relative;
	display: grid;
	gap: var(--sp-7);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.flow {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-6);
	}
}

@media (min-width: 64rem) {
	.flow {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--sp-6);
	}

	/* The line that joins the steps, with a light running along it */
	.flow::before,
	.flow::after {
		content: "";
		position: absolute;
		top: 3.25rem;
		left: 12%;
		right: 12%;
		height: 2px;
		border-radius: 2px;
	}

	.flow::before {
		background: repeating-linear-gradient(90deg, rgba(247, 169, 54, 0.55) 0 10px, transparent 10px 18px);
	}

	.flow::after {
		background: linear-gradient(90deg, transparent, var(--es-amber), transparent);
		background-size: 30% 100%;
		background-repeat: no-repeat;
		box-shadow: 0 0 12px rgba(247, 169, 54, 0.6);
		animation: flow-light 4.5s linear infinite;
	}
}

@keyframes flow-light {
	from { background-position: -40% 0; }
	to { background-position: 140% 0; }
}

.flow__step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: var(--sp-6) var(--sp-5) var(--sp-5);
	border: 1px solid transparent;
	border-radius: var(--r-lg);
	background:
		linear-gradient(var(--es-white), var(--es-white)) padding-box,
		linear-gradient(150deg, rgba(247, 169, 54, 0.7), var(--es-line) 45%, var(--es-line)) border-box;
	box-shadow: 0 30px 60px -40px rgba(31, 33, 37, 0.45);
	transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}

.flow__step:hover {
	background:
		linear-gradient(var(--es-white), var(--es-white)) padding-box,
		linear-gradient(150deg, var(--es-amber), rgba(247, 169, 54, 0.4)) border-box;
	box-shadow: 0 30px 60px -32px rgba(247, 169, 54, 0.55);
	transform: translateY(-6px);
}

.flow__num {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	color: rgba(43, 46, 51, 0.07);
	font: 800 4rem/1 var(--font-display);
	letter-spacing: -0.04em;
	transition: color 0.3s;
}

.flow__step:hover .flow__num {
	color: rgba(247, 169, 54, 0.22);
}

.flow__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: var(--sp-5);
	border-radius: 16px;
	background: var(--es-charcoal);
	background-image: var(--grid-lines);
	background-size: 14px 14px;
	color: var(--es-amber);
	box-shadow: 0 0 0 6px var(--es-surface), 0 0 24px -4px rgba(247, 169, 54, 0.55);
}

.flow__icon .icon {
	width: 1.6rem;
	height: 1.6rem;
}

.flow__step h3 {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-md);
}

.flow__step p {
	margin: 0;
	color: var(--es-muted);
}

/* Arrow between steps: down on phones, right on wide screens */
.flow__arrow {
	position: absolute;
	left: 50%;
	bottom: calc(-1 * var(--sp-7) / 2 - 1.1rem);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: var(--es-amber);
	color: var(--es-charcoal);
	box-shadow: 0 0 0 5px var(--es-surface), var(--glow-soft);
	transform: translateX(-50%) rotate(90deg);
}

.flow__arrow .icon {
	width: 1.1rem;
	height: 1.1rem;
}

@media (min-width: 48rem) {
	.flow__arrow {
		display: none;
	}
}

@media (min-width: 64rem) {
	.flow__arrow {
		display: grid;
		top: 2.15rem;
		bottom: auto;
		left: auto;
		right: calc(-1 * var(--sp-6) / 2 - 1.1rem);
		transform: none;
		animation: arrow-nudge 2.4s ease-in-out infinite;
		animation-delay: calc(var(--i) * 0.3s);
	}
}

@keyframes arrow-nudge {
	0%, 100% { translate: 0 0; }
	50% { translate: 4px 0; }
}

.flow__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3) var(--sp-5);
	margin-top: var(--sp-7);
	padding: var(--sp-4) var(--sp-5);
	border: 1px dashed rgba(247, 169, 54, 0.6);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.7);
	text-align: center;
}

.flow__cta p {
	margin: 0;
	font-weight: 600;
}

/* Questions and answers */
.faq {
	display: grid;
	gap: var(--sp-3);
}

.faq__item {
	border: 1px solid var(--es-line);
	border-radius: var(--r-sm);
	background: var(--es-white);
}

.faq__item[open] {
	border-color: var(--es-amber);
}

.faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__item summary::after {
	content: "";
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: rotate(45deg);
	transition: transform 0.2s;
}

.faq__item[open] summary::after {
	transform: rotate(-135deg);
}

.faq__answer {
	padding: 0 var(--sp-5) var(--sp-4);
}

.faq__answer > :last-child {
	margin-bottom: 0;
}

/* Google reviews */
.stars {
	display: inline-flex;
	gap: 2px;
}

.star {
	width: 1.1rem;
	height: 1.1rem;
	color: #9ca1ab;
}

.star.is-on {
	fill: var(--es-amber);
	color: var(--es-amber-deep);
}

.reviews__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin: 0;
}

.reviews__score {
	font: 700 var(--fs-xl)/1 var(--font-display);
}

.review {
	margin: 0;
}

.review blockquote {
	margin: var(--sp-3) 0;
}

.review blockquote p {
	margin: 0;
}

.review figcaption {
	font-size: var(--fs-sm);
	font-weight: 600;
}

.review__when {
	display: block;
	font-weight: 400;
	color: var(--es-muted);
}

.reviews__source {
	font-size: var(--fs-sm);
}

/* Filter chips (portfolio types, blog topics) */
.filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-6);
	padding: 0;
	list-style: none;
}

.filter a {
	display: inline-block;
	padding: 0.35rem 1rem;
	border: 1.5px solid var(--es-line);
	border-radius: var(--r-pill);
	color: var(--es-charcoal);
	font-weight: 600;
	text-decoration: none;
}

.filter a:hover {
	border-color: var(--es-amber);
}

.filter a[aria-current="true"] {
	background: var(--es-charcoal);
	border-color: var(--es-charcoal);
	color: var(--es-white);
}

/* Table of contents in blog posts */
.toc {
	max-width: 44rem;
	margin-bottom: var(--sp-6);
	padding: var(--sp-5);
	border-radius: var(--r-md);
	background: var(--es-surface);
}

.toc h2 {
	font-size: var(--fs-md);
}

.toc ol {
	margin: 0;
	padding-left: 1.25rem;
}

.toc li + li {
	margin-top: var(--sp-2);
}

.prose h2 {
	scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* Contact page */
.contact-layout {
	display: grid;
	gap: var(--sp-7);
}

@media (min-width: 64rem) {
	.contact-layout {
		grid-template-columns: 1.4fr 1fr;
		align-items: start;
	}
}

.contact-list--light a {
	color: var(--es-navy);
}

.contact-list--light .icon {
	color: var(--es-amber-deep);
}

.contact-form {
	scroll-margin-top: calc(var(--header-h) + 1rem);
}

.form p {
	margin: 0 0 var(--sp-4);
}

.form .grid {
	gap: 0 var(--sp-4);
}

.form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.notice {
	margin: 0 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border-left: 4px solid;
	border-radius: var(--r-sm);
}

.notice--success {
	background: #e8f6ee;
	border-color: var(--es-wa);
}

.notice--error {
	background: #fdecea;
	border-color: #b3261e;
}

.map iframe {
	display: block;
	width: 100%;
	height: 24rem;
	border: 0;
}

/* Questions next to a WhatsApp prompt */
.faq-layout {
	display: grid;
	gap: var(--sp-6) var(--sp-8);
	align-items: start;
}

@media (min-width: 60rem) {
	.faq-layout {
		grid-template-columns: 1fr 1.5fr;
	}

	.faq-layout__aside {
		position: sticky;
		top: calc(var(--header-h) + 2rem);
	}
}

.faq-layout__aside .lead {
	margin-bottom: var(--sp-5);
}

/* Contact methods, overlapping the page top */
.methods {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	margin-top: -2.5rem;
}

.method {
	display: grid;
	gap: 0.15rem;
	padding: var(--sp-5);
	border: 1px solid var(--es-line);
	border-radius: var(--r-md);
	background: var(--es-white);
	color: var(--es-charcoal);
	text-decoration: none;
	box-shadow: 0 24px 50px -30px rgba(31, 33, 37, 0.5);
	transition: box-shadow 0.2s, transform 0.2s;
}

.method .icon {
	width: 2rem;
	height: 2rem;
	margin-bottom: var(--sp-2);
	color: var(--es-amber-deep);
}

.method strong {
	font: 700 var(--fs-md)/1.2 var(--font-display);
}

.method span {
	color: var(--es-muted);
	overflow-wrap: anywhere;
}

.method--main {
	border-color: var(--es-amber);
	background: var(--es-amber);
}

.method--main .icon,
.method--main span {
	color: var(--es-charcoal);
}

.method:hover {
	color: var(--es-charcoal);
	box-shadow: var(--glow);
	transform: translateY(-3px);
}

/* Shop details card (About and Contact) */
.visit__grid {
	display: grid;
	gap: var(--sp-5);
	align-items: stretch;
}

@media (min-width: 60rem) {
	.visit__grid {
		grid-template-columns: 1fr 1.3fr;
	}
}

.visit__card {
	padding: var(--sp-6);
	border-radius: var(--r-lg);
	background: var(--es-charcoal);
	color: #d7dae0;
}

.visit__card h2 {
	color: var(--es-white);
	font-size: var(--fs-lg);
}

.visit__card .contact-list {
	margin-bottom: var(--sp-5);
}

.visit__card a:not(.btn) {
	color: var(--es-white);
}

.visit__map {
	min-height: 22rem;
	overflow: hidden;
	border-radius: var(--r-lg);
}

.visit__map iframe,
.visit__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 22rem;
	border: 0;
}

.about-layout {
	display: grid;
	gap: var(--sp-7);
	align-items: start;
}

@media (min-width: 64rem) {
	.about-layout {
		grid-template-columns: minmax(0, 1.2fr) 1fr;
	}

	.about-layout__media {
		position: sticky;
		top: calc(var(--header-h) + 2rem);
	}
}

.why__frame {
	overflow: hidden;
	border-radius: var(--r-lg);
	box-shadow: 0 0 0 1px rgba(247, 169, 54, 0.4), 0 30px 60px -30px rgba(0, 0, 0, 0.7), 0 0 44px -12px rgba(247, 169, 54, 0.4);
}

.why__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.services-note {
	margin-top: var(--sp-7);
}

/* Grid lines on the dark parts defined in this file */
.page-hero:not(.page-hero--image),
.quote-card,
.visit__card {
	background-image: var(--grid-lines);
	background-size: var(--grid-size) var(--grid-size);
}

/* Why choose this sign: numbered cards on a dark grid */
.benefits__grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: benefit;
}

.benefit {
	position: relative;
	padding: var(--sp-6) var(--sp-5) var(--sp-5);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--r-lg);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
	counter-increment: benefit;
	transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.benefit::before {
	content: counter(benefit, decimal-leading-zero);
	display: block;
	margin-bottom: var(--sp-4);
	color: var(--es-amber);
	font: 800 var(--fs-xl)/1 var(--font-display);
	letter-spacing: -0.02em;
	text-shadow: 0 0 18px rgba(247, 169, 54, 0.45);
}

.benefit h3 {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-md);
	color: var(--es-white);
}

.benefit p {
	margin: 0;
	color: #c9ccd3;
}

.benefit:hover {
	border-color: rgba(247, 169, 54, 0.6);
	box-shadow: var(--glow-soft);
	transform: translateY(-3px);
}

/* Options table, uses and care */
.details__grid {
	display: grid;
	gap: var(--sp-6);
	align-items: start;
}

@media (min-width: 64rem) {
	.details__grid {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

.details__main h2,
.detail-card h2 {
	font-size: var(--fs-lg);
}

.table-wrap {
	overflow-x: auto;
	border: 1px solid var(--es-line);
	border-radius: var(--r-lg);
	box-shadow: 0 24px 50px -36px rgba(31, 33, 37, 0.5);
}

.options-table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.options-table thead th {
	padding: var(--sp-4) var(--sp-5);
	background: var(--es-charcoal);
	background-image: var(--grid-lines);
	background-size: var(--grid-size) var(--grid-size);
	color: var(--es-white);
	font: 700 var(--fs-sm)/1.3 var(--font-display);
	text-align: left;
}

.options-table thead th:first-child {
	color: var(--es-amber);
}

.options-table tbody th,
.options-table td {
	padding: var(--sp-4) var(--sp-5);
	border-top: 1px solid var(--es-line);
	text-align: left;
	vertical-align: top;
}

.options-table tbody th {
	font-weight: 700;
	color: var(--es-charcoal);
}

.options-table td {
	color: var(--es-muted);
}

.options-table tbody tr:nth-child(even) {
	background: var(--es-surface);
}

.options-table tbody tr:hover {
	background: var(--es-amber-tint);
}

.details__aside {
	display: grid;
	gap: var(--sp-4);
}

.detail-card {
	padding: var(--sp-5);
	border: 1px solid var(--es-line);
	border-radius: var(--r-lg);
	background: var(--es-white);
}

.detail-card--care {
	border-color: rgba(247, 169, 54, 0.5);
	background: linear-gradient(160deg, var(--es-amber-tint), var(--es-white) 70%);
}

.detail-card--care p {
	margin: 0;
}

.use-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.use-chips li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--es-line);
	border-radius: var(--r-pill);
	background: var(--es-surface);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.use-chips li::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--es-amber);
	box-shadow: 0 0 6px rgba(247, 169, 54, 0.8);
}

/* A short neon line under every section heading, echoing the hero */
.section__head h2::after,
.faq-layout__aside h2::after,
.details__main h2::after {
	content: "";
	display: block;
	width: 3rem;
	height: 4px;
	margin-top: var(--sp-4);
	border-radius: 4px;
	background: var(--es-amber);
	box-shadow: 0 0 12px rgba(247, 169, 54, 0.6);
}

/* Let wide content (the options table) scroll inside its box instead of widening the page */
.details__grid > *,
.service-layout > *,
.faq-layout > *,
.contact-layout > *,
.about-layout > * {
	min-width: 0;
}