/*
 * Section backgrounds for Elementor containers. Add the class in the container's
 * Advanced → CSS Classes, for example "ah-paper ah-marks" or "ah-navy ah-marks".
 *   ah-paper  ivory paper with grain     ah-sand   sand paper with grain
 *   ah-navy   navy                       ah-deep   deep navy
 *   ah-marks  print crop marks in two corners
 * Loaded site-wide (small); any AH widget inside picks its colours with its own "Background" control.
 */
.ah-paper, .ah-sand, .ah-navy, .ah-deep { position: relative; }
.ah-paper { background-color: var(--ah-ivory); background-image: var(--ah-grain); color: var(--ah-ink); }
.ah-sand { background-color: var(--ah-sand); background-image: var(--ah-grain); color: var(--ah-ink); }
.ah-navy { background-color: var(--ah-navy); color: var(--ah-on-navy); }
.ah-deep { background-color: var(--ah-deep); color: var(--ah-on-navy); }

.ah-marks::before,
.ah-marks::after {
	content: "";
	position: absolute;
	z-index: 0;
	width: 22px;
	height: 22px;
	opacity: .55;
	pointer-events: none;
}
.ah-marks::before { top: 22px; inset-inline-start: max(10px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--ah-soft); border-inline-start: 1px solid var(--ah-soft); }
.ah-marks::after { bottom: 22px; inset-inline-end: max(10px, env(safe-area-inset-right, 0px)); border-bottom: 1px solid var(--ah-soft); border-inline-end: 1px solid var(--ah-soft); }
.ah-navy.ah-marks::before, .ah-navy.ah-marks::after,
.ah-deep.ah-marks::before, .ah-deep.ah-marks::after { border-color: rgba(226, 197, 143, .45); }

/* anchors land below the floating header */
.ah-paper[id], .ah-sand[id], .ah-navy[id], .ah-deep[id], .ah-band[id] { scroll-margin-top: 96px; }