/* ==========================================================================
   Diamond Elite Team — design system
   Black / ivory / gold editorial. Tokens match the Claude Design export.
   Layout is driven by native Elementor containers; this file supplies
   typography, ornament, and the responsive rules Elementor free can't express.
   ========================================================================== */

:root {
	--det-ink: #0a0a0a;
	--det-panel: #151412;
	--det-ivory: #f6f2e8;
	--det-stone: #d9d0bd;
	--det-gold: #c9a15f;
	--det-gold-soft: #e2c46b;
	--det-rule: rgba(201, 161, 95, .35);
	--det-body: #2a2620;
	--det-body-muted: #453f33;
	--det-link-on-light: #9a7830;
	--det-wrap: 1320px;
	--det-gutter: 48px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html.det-noscroll {
	overflow: hidden;
}

/* Page-level typography is scoped to .det-designed, which functions.php adds
   only to pages actually built from these templates. Without that scope the
   body font, ivory background and serif headings would repaint every legacy
   page on the site the moment the theme is activated. The header and footer
   below are deliberately NOT scoped — they are hard-coded on every page and
   carry their own fonts so they look right anywhere. */

body.det-designed {
	font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 300;
	color: var(--det-body);
	background: var(--det-ivory);
	/* Belt-and-braces against the horizontal-scroll requirement: no section
	   may bleed past the viewport at any breakpoint. */
	overflow-x: hidden;
}

.det-designed h1,
.det-designed h2,
.det-designed h3,
.det-designed h4 {
	font-family: 'Cormorant', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	line-height: 1.05;
}

.det-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--det-ink);
	color: var(--det-ivory);
	padding: 14px 22px;
	font-size: 14px;
}

.det-skip-link:focus {
	left: 0;
}

.det-wrap {
	max-width: var(--det-wrap);
	margin: 0 auto;
	padding-left: var(--det-gutter);
	padding-right: var(--det-gutter);
}

/* --------------------------------------------------------------------------
   Shared components (also used inside Elementor widgets via CSS classes)
   -------------------------------------------------------------------------- */

.det-eyebrow,
.det-main .det-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--det-gold);
	line-height: 1.4;
}

.det-eyebrow--ruled::before {
	content: '';
	width: 24px;
	height: 1px;
	background: var(--det-gold);
	flex-shrink: 0;
}

/* Buttons — 44px minimum tap target is enforced here, not left to chance.
   Only the anchor is styled. The bare class must never be used, because on an
   Elementor Button it lands on the widget's full-width wrapper div and paints
   a second, container-wide box around the real button. */
.det-main .elementor-widget-button.det-btn--solid,
.det-main .elementor-widget-button.det-link-arrow {
	display: block;
	background: none;
	border: 0;
	padding: 0;
	min-height: 0;
	width: auto;
}

a.det-btn--solid,
.det-main .elementor-button.det-btn--solid,
.det-main .det-btn--solid .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 44px;
	background: var(--det-ink);
	color: var(--det-ivory);
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 18px 34px;
	border: 1px solid var(--det-gold);
	border-radius: 0;
	text-decoration: none;
	transition: background .3s, color .3s;
}

a.det-btn--solid:hover,
a.det-btn--solid:focus-visible,
.det-main .det-btn--solid .elementor-button:hover,
.det-main .det-btn--solid .elementor-button:focus-visible {
	background: var(--det-gold);
	color: var(--det-ink);
}

a.det-link-arrow,
.det-main .det-link-arrow .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--det-ink);
	border-radius: 0;
	padding: 0 0 9px;
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--det-ink);
	text-decoration: none;
	transition: gap .3s, color .3s, border-color .3s;
}

a.det-link-arrow:hover,
a.det-link-arrow:focus-visible,
.det-main .det-link-arrow .elementor-button:hover,
.det-main .det-link-arrow .elementor-button:focus-visible {
	gap: 20px;
	color: var(--det-gold);
	border-color: var(--det-gold);
}

a.det-link-arrow--on-dark,
.det-main .det-link-arrow--on-dark .elementor-button {
	color: var(--det-gold);
	border-color: var(--det-gold);
}

a.det-link-arrow--on-dark:hover,
a.det-link-arrow--on-dark:focus-visible,
.det-main .det-link-arrow--on-dark .elementor-button:hover {
	color: var(--det-gold-soft);
	border-color: var(--det-gold-soft);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.det-header {
	font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 300;
	position: relative;
	z-index: 20;
	background: var(--det-ink);
	padding: 26px 0;
}

/* On the front page the header floats over the hero. */
.det-header--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	padding: 36px 0;
}

.det-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.det-crest {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
	text-decoration: none;
}

.det-crest__re {
	height: 52px;
	width: auto;
}

.det-crest__de {
	height: 34px;
	width: auto;
}

.det-header--overlay .det-crest__re {
	height: 70px;
}

.det-header--overlay .det-crest__de {
	height: 46px;
}

.det-crest__div {
	width: 1px;
	height: 28px;
	background: var(--det-rule);
}

.det-nav__list {
	display: flex;
	align-items: center;
	gap: 34px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.det-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--det-ivory);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
}

.det-nav__list a:hover,
.det-nav__list a:focus-visible {
	color: var(--det-gold);
}

.det-nav__cta a,
.det-nav__list .det-btn--solid {
	padding: 14px 26px;
	color: var(--det-ivory);
}

.det-nav__tel {
	display: none;
	margin: 0;
}

/* Hamburger — hidden on desktop, 44x44 on mobile. */
.det-navtoggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: none;
	border: 1px solid var(--det-rule);
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
}

.det-navtoggle__bar {
	display: block;
	width: 100%;
	height: 1px;
	background: var(--det-ivory);
	transition: transform .3s, opacity .3s;
}

.is-nav-open .det-navtoggle__bar:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}

.is-nav-open .det-navtoggle__bar:nth-child(2) {
	opacity: 0;
}

.is-nav-open .det-navtoggle__bar:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.det-footer {
	font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 300;
	position: relative;
	background: var(--det-ink);
	color: var(--det-ivory);
	padding: 120px 0 40px;
	border-top: 1px solid var(--det-rule);
}

.det-footer__title {
	font-family: 'Cormorant', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	line-height: 1.05;
	font-size: clamp(38px, 5.4vw, 58px);
	color: var(--det-ivory);
	margin: 26px 0 32px;
	max-width: 700px;
}

.det-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-top: 60px;
	padding-top: 40px;
	border-top: 1px solid var(--det-rule);
	flex-wrap: wrap;
}

.det-contact-info {
	font-size: 14px;
	line-height: 2.4;
	color: var(--det-stone);
	letter-spacing: .02em;
}

.det-contact-info a {
	color: var(--det-ivory);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.det-contact-info a:hover,
.det-contact-info a:focus-visible {
	color: var(--det-gold);
}

/* Site credit — deliberately quiet, the last thing on the page. */
.det-footer__credit {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 30px;
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid rgba(201, 161, 95, .12);
	font-size: 11px;
	letter-spacing: .06em;
	color: rgba(217, 208, 189, .45);
}

.det-footer__credit a {
	color: rgba(217, 208, 189, .6);
	text-decoration: none;
	border-bottom: 1px solid rgba(201, 161, 95, .25);
}

.det-footer__credit a:hover,
.det-footer__credit a:focus-visible {
	color: var(--det-gold);
}

/* ==========================================================================
   Homepage sections
   Layout (widths, gaps, padding, backgrounds) is set natively on the Elementor
   containers. These rules carry typography and ornament only.
   ========================================================================== */

/* HERO ------------------------------------------------------------------ */

.det-hero {
	position: relative;
	overflow: hidden;
}

/* Photo occupies the right 62% and fades into the ink panel on the left, so
   the headline always sits on solid black regardless of the crop. */
.det-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: none;
	z-index: 0;
	pointer-events: none;
}

.det-hero > .e-con-inner,
.det-hero > .elementor-widget-wrap {
	position: relative;
	z-index: 1;
}

.det-hero__title,
.det-hero__title .elementor-heading-title {
	font-size: clamp(56px, 13vw, 180px);
	font-weight: 300;
	letter-spacing: -.01em;
	line-height: .95;
	color: var(--det-ivory);
}

.det-hero__title em,
.det-hero__title .det-line2 {
	display: block;
	margin-left: 8vw;
	font-style: italic;
	color: var(--det-gold-soft);
}

.det-hero__sub p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--det-stone);
	max-width: 460px;
}

.det-hero__sub a {
	color: var(--det-gold);
	border-bottom: 1px solid var(--det-gold);
	text-decoration: none;
}

/* Neighborhood ticker — the animated marquee is simplified to a static,
   wrapping row of links (no free-Elementor marquee widget exists). */
.det-ticker {
	border-top: 1px solid var(--det-rule);
	background: #0b0a09;
}

.det-ticker a {
	color: #f4f1ea;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.det-ticker a:hover,
.det-ticker a:focus-visible {
	color: var(--det-gold);
}

.det-ticker .det-dot {
	color: var(--det-gold);
}

/* TRUST / SERVICES / WHO tiles ------------------------------------------ */

.det-tile,
.det-tile-feature {
	border: 1px solid var(--det-rule);
	background: rgba(10, 10, 10, .55);
}

.det-tile-feature .elementor-icon,
.det-tile .elementor-icon {
	color: var(--det-gold);
}

.det-tile-feature .elementor-icon-box-title,
.det-tile .elementor-icon-box-title {
	font-family: 'Cormorant', Georgia, serif;
	font-weight: 400;
	color: var(--det-ivory);
}

.det-tile-feature .elementor-icon-box-title {
	font-size: 27px;
}

.det-tile .elementor-icon-box-title {
	font-size: 19px;
}

.det-tile-feature .elementor-icon-box-description {
	font-size: 15px;
	line-height: 1.8;
	color: var(--det-stone);
}

.det-tile .elementor-icon-box-description {
	font-size: 13px;
	line-height: 1.7;
	color: var(--det-stone);
}

/* Section headings ------------------------------------------------------ */

.det-h2-lg .elementor-heading-title {
	font-size: clamp(38px, 5.4vw, 64px);
}

.det-h2-md .elementor-heading-title {
	font-size: clamp(34px, 4.6vw, 52px);
}

.det-h2-sm .elementor-heading-title {
	font-size: 34px;
}

.det-h2-xl .elementor-heading-title {
	font-size: clamp(40px, 6.2vw, 84px);
}

.det-on-dark .elementor-heading-title {
	color: var(--det-ivory);
}

.det-italic-gold em,
.det-italic-gold i {
	font-style: italic;
	color: var(--det-gold);
}

/* Body copy ------------------------------------------------------------- */

.det-body p {
	font-size: 17px;
	line-height: 1.9;
	color: var(--det-body-muted);
	margin-bottom: 20px;
}

.det-body a {
	color: var(--det-link-on-light);
}

.det-body-lg p {
	font-size: 20px;
	line-height: 1.75;
	color: var(--det-body-muted);
	margin-bottom: 20px;
}

.det-body-lg a {
	color: var(--det-link-on-light);
}

.det-body-on-dark p,
.det-body-on-dark li {
	font-size: 16px;
	line-height: 1.9;
	color: var(--det-stone);
}

.det-body-on-dark a {
	color: var(--det-gold-soft);
}

/* ABOUT ----------------------------------------------------------------- */

/* Gold frame offset behind the portrait. */
.det-framed-img {
	position: relative;
}

.det-framed-img::after {
	content: '';
	position: absolute;
	top: 22px;
	left: 22px;
	right: -22px;
	bottom: -22px;
	border: 1px solid var(--det-gold);
	z-index: -1;
}

.det-stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 52px;
}

.det-stat b {
	display: block;
	font-family: 'Cormorant', Georgia, serif;
	font-style: italic;
	font-size: 44px;
	color: var(--det-gold);
	font-weight: 400;
	line-height: 1;
}

.det-stat span {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8a7c60;
}

/* AREAS strip ------------------------------------------------------------ */

.det-area-cell .elementor-heading-title {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: .02em;
	color: var(--det-body);
}

.det-area-cell {
	border-bottom: 1px solid var(--det-rule);
	transition: opacity .25s;
}

.det-area-cell:hover {
	opacity: .55;
}

.det-area-cell .det-num {
	font-family: 'Cormorant', Georgia, serif;
	font-style: italic;
	color: var(--det-gold);
	font-size: 26px;
}

.det-area-strip {
	border-top: 1px solid var(--det-rule);
}

/* VALUES ----------------------------------------------------------------- */

.det-values-quote .elementor-heading-title {
	font-family: 'Cormorant', Georgia, serif;
	font-size: clamp(30px, 5.2vw, 58px);
	font-weight: 300;
	line-height: 1.25;
	font-style: italic;
	color: var(--det-ivory);
}

.det-commit p {
	font-size: 12px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--det-gold);
	margin: 0;
}

/* TEAM ------------------------------------------------------------------- */

.det-team-card img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: grayscale(.3);
}

.det-team-card .det-name .elementor-heading-title {
	font-size: 26px;
	font-weight: 400;
}

.det-team-card .det-role .elementor-heading-title {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	color: var(--det-gold);
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* TESTIMONIALS — static grid replaces the animated ticker. --------------- */

.det-tst-rail {
	border-top: 1px solid var(--det-rule);
	border-bottom: 1px solid var(--det-rule);
}

.det-tst-card .det-stars .elementor-heading-title {
	font-family: 'Jost', sans-serif;
	color: var(--det-gold);
	font-size: 13px;
	letter-spacing: .18em;
}

.det-tst-card .det-quote p {
	font-family: 'Cormorant', Georgia, serif;
	font-style: italic;
	font-size: 18px;
	line-height: 1.8;
	color: var(--det-stone);
	margin-bottom: 0;
}

.det-tst-card .det-attrib .elementor-heading-title {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	color: var(--det-gold);
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* FAQ — native Elementor Accordion, restyled to the editorial rule look. -- */

.det-faq .elementor-accordion .elementor-accordion-item {
	border: 0;
	border-top: 1px solid var(--det-rule);
}

.det-faq .elementor-accordion .elementor-accordion-item:last-child {
	border-bottom: 1px solid var(--det-rule);
}

.det-faq .elementor-tab-title {
	font-family: 'Cormorant', Georgia, serif;
	font-size: 23px;
	font-weight: 400;
	color: var(--det-body);
	padding: 32px 0;
	background: none;
	min-height: 44px;
}

.det-faq .elementor-tab-title a {
	color: inherit;
}

.det-faq .elementor-tab-content {
	background: none;
	border: 0;
	padding: 0 0 32px;
	font-size: 15px;
	line-height: 1.85;
	color: var(--det-body-muted);
	max-width: 680px;
}

.det-faq .elementor-accordion-icon {
	color: var(--det-gold);
}

/* FINAL CTA -------------------------------------------------------------- */

.det-final-cta .elementor-heading-title {
	font-size: clamp(42px, 7vw, 96px);
	font-weight: 300;
	color: var(--det-ivory);
	max-width: 820px;
}

.det-final-cta em {
	font-style: italic;
	color: var(--det-gold-soft);
}

/* ==========================================================================
   Neighborhood + hub pages
   ========================================================================== */

.det-crumb .elementor-heading-title {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--det-stone);
}

.det-crumb a {
	color: var(--det-stone);
	text-decoration: none;
}

.det-crumb a:hover {
	color: var(--det-gold);
}

.det-pghero__title .elementor-heading-title {
	font-size: clamp(38px, 5.2vw, 58px);
	font-weight: 300;
	color: var(--det-ivory);
}

.det-lede p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--det-stone);
	max-width: 560px;
}

/* Stat bar --------------------------------------------------------------- */

.det-statbar {
	position: relative;
	overflow: hidden;
}

.det-stat-cell {
	border-left: 1px solid var(--det-rule);
	text-align: center;
}

.det-stat-cell:first-child {
	border-left: 0;
}

.det-stat-cell .det-figure .elementor-heading-title {
	font-family: 'Cormorant', Georgia, serif;
	font-style: italic;
	font-size: 34px;
	color: var(--det-gold-soft);
	font-weight: 400;
}

.det-stat-cell .det-label .elementor-heading-title {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--det-stone);
}

/* "Who Actually Buys Here" bento ----------------------------------------- */

.det-bento-feature {
	background: #161310;
	border: 1px solid #3a3226;
	border-radius: 6px;
}

.det-bento-card {
	background: #141210;
	border: 1px solid #2e2820;
	border-radius: 6px;
}

.det-bento-feature .elementor-icon,
.det-bento-card .elementor-icon {
	color: var(--det-gold);
}

.det-bento-feature .det-bento-title .elementor-heading-title,
.det-bento-card .det-bento-title .elementor-heading-title {
	font-size: 24px;
	font-weight: 400;
	color: var(--det-ivory);
}

.det-bento-feature .det-bento-body p,
.det-bento-feature .det-bento-body li,
.det-bento-card .det-bento-body p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--det-stone);
}

.det-bento-feature .det-bento-body ul {
	padding-left: 20px;
	margin-bottom: 16px;
}

.det-bento-feature .det-bento-body li {
	margin-bottom: 8px;
}

.det-bento-strip {
	background: #141210;
	border: 1px solid #2e2820;
	border-radius: 6px;
}

.det-bento-strip p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--det-stone);
	margin: 0;
}

.det-bento-strip strong {
	color: var(--det-ivory);
	font-weight: 400;
}

/* Resort / amenity rows -------------------------------------------------- */

.det-resort-img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--det-rule);
}

.det-hero-photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 1px solid var(--det-rule);
}

/* "What living here feels like" — right-aligned editorial block. --------- */

.det-feel {
	text-align: right;
}

.det-feel .det-eyebrow {
	justify-content: flex-end;
}

.det-feel .det-eyebrow--ruled::before {
	display: none;
}

.det-feel p {
	margin-left: auto;
	max-width: 760px;
}

/* Eat & drink cards ------------------------------------------------------ */

.det-eat-card {
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--det-rule);
}

.det-eat-card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.det-eat-card .det-eat-name .elementor-heading-title {
	font-size: 16px;
	font-weight: 400;
	color: var(--det-ivory);
}

.det-eat-card .det-eat-desc p {
	font-size: 13px;
	line-height: 1.6;
	color: var(--det-stone);
	margin: 0;
}

/* Areas We Serve hub cards ---------------------------------------------- */

.det-hub-card {
	border: 1px solid var(--det-rule);
	background: rgba(10, 10, 10, .55);
	transition: border-color .3s, transform .3s;
}

.det-hub-card:hover {
	border-color: var(--det-gold);
	transform: translateY(-4px);
}

.det-hub-card .det-hub-name .elementor-heading-title {
	font-size: 30px;
	font-weight: 400;
	color: var(--det-ivory);
}

.det-hub-card .det-hub-line p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--det-stone);
}

.det-hub-stat p {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--det-gold);
	margin: 0;
}

/* ==========================================================================
   Mountain silhouette backdrops
   Exported from the design's inline SVG paths to standalone assets so they can
   be placed as native Elementor container backgrounds.
   ========================================================================== */

.det-mtn-a,
.det-mtn-b {
	position: relative;
	overflow: hidden;
}

.det-mtn-a::after,
.det-mtn-b::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 100%;
	pointer-events: none;
	z-index: 0;
}

.det-mtn-a::after {
	height: 34%;
	opacity: .22;
	background-image: url('../img/mountain-ridge-a.svg');
}

.det-mtn-b::after {
	height: 55%;
	opacity: .08;
	background-image: url('../img/mountain-ridge-b.svg');
}

.det-mtn-a > .e-con-inner,
.det-mtn-b > .e-con-inner,
.det-mtn-a > .elementor-widget-wrap,
.det-mtn-b > .elementor-widget-wrap {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Responsive
   Targets: 1440+ desktop, 1024 small laptop, 768 tablet, 375 small phone.
   Hard rules: no horizontal scroll at any width, no type below 14px on
   mobile, every tap target at least 44x44.
   ========================================================================== */

/* Nothing may exceed the viewport, whatever Elementor emits. */
.det-main img,
.det-main iframe,
.det-main video {
	max-width: 100%;
	height: auto;
}

/* --- Small laptop: 1024px and down ------------------------------------- */

@media (max-width: 1200px) {
	:root {
		--det-gutter: 32px;
	}

	.det-nav__list {
		gap: 22px;
	}

	.det-header--overlay .det-crest__re {
		height: 56px;
	}

	.det-header--overlay .det-crest__de {
		height: 38px;
	}
}

@media (max-width: 1024px) {
	.det-hero__title,
	.det-hero__title .elementor-heading-title {
		font-size: clamp(52px, 10vw, 104px);
	}

	.det-hero__title em,
	.det-hero__title .det-line2 {
		margin-left: 4vw;
	}

	.det-stat-row {
		gap: 36px;
	}

	.det-framed-img::after {
		top: 14px;
		left: 14px;
		right: -14px;
		bottom: -14px;
	}
}

/* --- Tablet and phone: 768px and down ----------------------------------- */

@media (max-width: 768px) {

	/* Nav becomes a drawer. */
	.det-navtoggle {
		display: flex;
	}

	.det-header,
	.det-header--overlay {
		position: relative;
		background: var(--det-ink);
		padding: 18px 0;
	}

	.det-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--det-ink);
		border-top: 1px solid var(--det-rule);
		padding: 12px var(--det-gutter) 28px;
		z-index: 30;
	}

	.is-nav-open .det-nav {
		display: block;
	}

	.det-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.det-nav__list li {
		border-bottom: 1px solid rgba(201, 161, 95, .18);
	}

	.det-nav__list a {
		display: flex;
		align-items: center;
		min-height: 56px;
		font-size: 15px;
		letter-spacing: .1em;
	}

	.det-nav__cta {
		border-bottom: 0;
		margin-top: 18px;
	}

	.det-nav__cta a,
	.det-nav__list .det-btn--solid {
		justify-content: center;
		font-size: 14px;
		padding: 16px 26px;
	}

	.det-nav__tel {
		display: block;
		margin-top: 18px;
	}

	.det-nav__tel a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		color: var(--det-gold);
		font-size: 14px;
		letter-spacing: .12em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.det-header--overlay .det-crest__re,
	.det-crest__re {
		height: 42px;
	}

	.det-header--overlay .det-crest__de,
	.det-crest__de {
		height: 28px;
	}

	.det-crest {
		gap: 12px;
	}

	/* --- Minimum type size: nothing below 14px on mobile. --- */

	.det-eyebrow,
	.det-main .det-eyebrow {
		font-size: 14px;
		letter-spacing: .22em;
	}

	a.det-btn--solid,
	.det-main .det-btn--solid .elementor-button,
	a.det-link-arrow,
	.det-main .det-link-arrow .elementor-button {
		font-size: 14px;
		letter-spacing: .14em;
	}

	a.det-btn--solid,
	.det-main .det-btn--solid .elementor-button {
		padding: 16px 28px;
		width: 100%;
		max-width: 420px;
	}

	.det-ticker p,
	.det-commit p,
	.det-stat span,
	.det-team-card .det-role .elementor-heading-title,
	.det-tst-card .det-stars .elementor-heading-title,
	.det-tst-card .det-attrib .elementor-heading-title,
	.det-crumb .elementor-heading-title,
	.det-stat-cell .det-label .elementor-heading-title,
	.det-tile .elementor-icon-box-description,
	.det-eat-card .det-eat-desc p,
	.det-hub-stat p,
	.det-footer__credit {
		font-size: 14px;
	}

	.det-ticker p,
	.det-commit p,
	.det-stat span,
	.det-crumb .elementor-heading-title,
	.det-stat-cell .det-label .elementor-heading-title,
	.det-hub-stat p {
		letter-spacing: .1em;
	}

	/* --- Layout --- */

	.det-hero__title,
	.det-hero__title .elementor-heading-title {
		font-size: clamp(46px, 14vw, 72px);
	}

	.det-hero__title em,
	.det-hero__title .det-line2 {
		margin-left: 0;
	}

	/* Photo goes full-bleed behind the headline; overlay deepens so the
	   ivory type keeps its contrast over the desert crop. */
	.det-hero::before {
		background: linear-gradient(180deg, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .68) 60%, rgba(10, 10, 10, .88) 100%);
	}

	.det-hero__sub p {
		max-width: none;
	}

	.det-ticker p {
		justify-content: flex-start;
		gap: 8px 18px;
	}

	.det-stat-row {
		gap: 28px 40px;
	}

	.det-stat b {
		font-size: 36px;
	}

	.det-framed-img::after {
		display: none;
	}

	/* Stat cells stack, so the vertical rules become horizontal ones. */
	.det-stat-cell {
		border-left: 0;
		border-top: 1px solid var(--det-rule);
		padding-top: 22px;
		text-align: left;
	}

	.det-stat-cell:first-child {
		border-top: 0;
		padding-top: 0;
	}

	/* Right-aligned editorial block reads badly in a narrow column. */
	.det-feel {
		text-align: left;
	}

	.det-feel .det-eyebrow {
		justify-content: flex-start;
	}

	.det-feel .det-eyebrow--ruled::before {
		display: block;
	}

	.det-feel p {
		margin-left: 0;
	}

	/* Mountain silhouettes: shorter and fainter so they read as texture
	   rather than taking over a 375px-tall viewport. */
	.det-mtn-a::after {
		height: 22%;
		opacity: .16;
		background-size: 160% 100%;
	}

	.det-mtn-b::after {
		height: 30%;
		opacity: .07;
		background-size: 160% 100%;
	}

	.det-faq .elementor-tab-title {
		font-size: 20px;
		padding: 24px 0;
	}

	.det-footer {
		padding: 72px 0 32px;
	}

	.det-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-top: 40px;
	}

	.det-footer__credit {
		flex-direction: column;
		gap: 8px;
	}
}

/* --- Small phone: 375px and down ---------------------------------------- */

@media (max-width: 420px) {
	:root {
		--det-gutter: 20px;
	}

	.det-hero__title,
	.det-hero__title .elementor-heading-title {
		font-size: clamp(40px, 13vw, 56px);
	}

	.det-h2-lg .elementor-heading-title,
	.det-h2-xl .elementor-heading-title {
		font-size: 34px;
	}

	.det-h2-md .elementor-heading-title,
	.det-h2-sm .elementor-heading-title {
		font-size: 28px;
	}

	.det-pghero__title .elementor-heading-title {
		font-size: 32px;
	}

	.det-values-quote .elementor-heading-title {
		font-size: 26px;
	}

	.det-final-cta .elementor-heading-title {
		font-size: 34px;
	}

	.det-footer__title {
		font-size: 32px;
	}

	.det-stat-row {
		gap: 22px 28px;
	}

	.det-stat b {
		font-size: 32px;
	}

	.det-crest__re {
		height: 36px;
	}

	.det-crest__de {
		height: 24px;
	}

	.det-body-lg p {
		font-size: 17px;
	}
}

/* --- Large desktop: 1440px and up --------------------------------------- */

@media (min-width: 1440px) {
	:root {
		--det-gutter: 48px;
	}
}

/* Respect reduced-motion preferences on the few transitions that remain. */
@media (prefers-reduced-motion: reduce) {
	.det-link-arrow,
	.det-btn--solid,
	.det-hub-card,
	.det-navtoggle__bar,
	.det-area-cell {
		transition: none;
	}
}

/* ==========================================================================
   Shipped section photography
   The five photos that came with the design export are painted here from the
   theme's own assets folder, so the site looks finished the moment the
   templates are imported — no media-library round trip required.
   Setting a Background > Image on the same container in Elementor overrides
   any of these, so the client can still swap them from the editor.
   ========================================================================== */

.det-hero {
	background-color: var(--det-ink);
	background-image:
		linear-gradient(90deg, var(--det-ink) 0%, rgba(10, 10, 10, 0) 22%),
		url('../img/hero-granite-gorge.jpg');
	background-repeat: no-repeat, no-repeat;
	background-position: right center, right center;
	background-size: 62% 100%, 62% 100%;
}

.det-trust {
	background-color: var(--det-ink);
	/* The flat layer reproduces the reference's opacity:.4 on the photo:
	   40% photo over black is the same as 60% black over the photo. */
	background-image:
		linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .82) 100%),
		linear-gradient(rgba(10, 10, 10, .6), rgba(10, 10, 10, .6)),
		url('../img/trust-bg-desert-pool.jpg');
	background-size: cover;
	background-position: center;
}

.det-services {
	background-color: var(--det-panel);
	background-image:
		linear-gradient(180deg, rgba(21, 20, 18, .35) 0%, rgba(21, 20, 18, .75) 100%),
		url('../img/final-cta-desert.jpg');
	background-size: cover;
	background-position: center;
}

.det-values {
	position: relative;
	overflow: hidden;
	background-color: var(--det-ink);
}

.det-values::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../img/aerial-neighborhood.jpg');
	background-size: cover;
	background-position: center;
	filter: saturate(.35) contrast(1.1) grayscale(.3) brightness(.7);
	z-index: 0;
}

.det-values::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 5, 4, .2) 0%, rgba(6, 5, 4, .85) 100%);
	z-index: 0;
}

.det-final-cta {
	position: relative;
	overflow: hidden;
	background-color: var(--det-ink);
}

.det-final-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../img/final-cta-desert.jpg');
	background-size: cover;
	background-position: center;
	filter: saturate(.5) grayscale(.3) brightness(.6);
	z-index: 0;
}

.det-final-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(6, 5, 4, .72) 0%, rgba(6, 5, 4, .4) 60%);
	z-index: 0;
}

/* Content must clear both pseudo-element layers. */
.det-values > .elementor-container,
.det-final-cta > .elementor-container,
.det-values > .e-con-inner,
.det-final-cta > .e-con-inner {
	position: relative;
	z-index: 1;
}

@media (max-width: 768px) {
	.det-hero {
		background-size: cover;
		background-position: center;
	}
}

/* ==========================================================================
   Remaining template classes
   ========================================================================== */

/* Services — "I know all about" tag row. */
.det-know .det-know-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 0;
}

.det-know .det-know-tags span {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--det-stone);
	border: 1px solid var(--det-rule);
	padding: 12px 22px;
	background: rgba(10, 10, 10, .55);
}

/* Areas We Serve hub. */
.det-hub-num .elementor-heading-title,
.det-hub-card .det-num {
	font-family: 'Cormorant', Georgia, serif;
	font-style: italic;
	font-size: 26px;
	color: var(--det-gold);
}

.det-hub-hero .det-body-on-dark p {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Simple centred CTA band (neighborhood + hub page feet). */
.det-final-cta-simple .elementor-heading-title {
	color: var(--det-ivory);
	max-width: 700px;
	margin: 0 auto;
}

/* Contact page. */
.det-contact-actions .det-bento-feature {
	justify-content: flex-start;
}

.det-contact-details .det-body p {
	font-size: 16px;
	line-height: 2;
}

.det-contact-details .det-body a {
	color: var(--det-link-on-light);
}

.det-bento-strip-copy p {
	margin: 0;
}

@media (max-width: 768px) {
	.det-know .det-know-tags {
		justify-content: flex-start;
	}

	.det-know .det-know-tags span {
		font-size: 14px;
		letter-spacing: .06em;
		padding: 12px 18px;
	}

	.det-hub-hero .det-body-on-dark p {
		text-align: left;
	}
}

/* ==========================================================================
   Mobile stacking guarantee
   Every generated row carries .det-row. Elementor's own responsive
   flex-direction is set as well, but it follows the site's configured mobile
   breakpoint; this rule is pinned to 768px so the stack happens there no
   matter how the Site Settings breakpoints are later changed.
   ========================================================================== */

@media (max-width: 768px) {
	.det-main .det-row {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
	}

	.det-main .det-row > .e-con,
	.det-main .det-row > .elementor-element {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* The bento's tall feature card no longer needs a forced height once the
	   cards are stacked. */
	.det-main .det-bento-feature,
	.det-main .det-tile-feature {
		min-height: 0;
	}

	/* Photo-first rows read better with the image above the copy. */
	.det-main .det-row > .det-resort-img,
	.det-main .det-row > .e-con:has(> .det-resort-img) {
		order: -1;
	}
}

/* Tablet: keep two-up rather than the desktop three- and four-up grids. */
@media (min-width: 769px) and (max-width: 1024px) {
	.det-main .det-row {
		flex-wrap: wrap;
	}

	.det-main .det-eat-card,
	.det-main .det-hub-card {
		width: 48% !important;
	}

	.det-main .det-team-card {
		width: 31% !important;
	}
}

/* ==========================================================================
   Legacy Section / Column build
   The site's Elementor renders sections rather than containers, so the
   templates ship in that markup too. Same design classes, different wrapper —
   these rules make the section build match the container build.
   ========================================================================== */

/* Column gutters. The section build sets gap:no and spaces columns here, so
   the numbers stay in one place instead of in every template. */
.det-main .det-row > .elementor-container {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.det-main .det-who .det-row > .elementor-container,
.det-main .det-trust .det-row > .elementor-container {
	gap: 16px;
	align-items: stretch;
}

.det-main .det-eat .det-row > .elementor-container,
.det-main .det-hub-grid .det-row > .elementor-container {
	gap: 24px;
	flex-wrap: wrap;
	align-items: stretch;
}

.det-main .det-area-strip > .elementor-container {
	gap: 0;
	flex-wrap: wrap;
}

.det-main .det-tst-rail > .elementor-container {
	gap: 60px;
}

/* Card columns need their box to fill the row height. */
.det-main .elementor-column.det-bento-feature,
.det-main .elementor-column.det-tile-feature,
.det-main .elementor-column.det-eat-card,
.det-main .elementor-column.det-hub-card,
.det-main .elementor-column.det-tile {
	align-self: stretch;
}

/* Icon Box cards — the section build collapses the stacked bento and trust
   cards into single Icon Box widgets, so their type styles live here. */
.det-main .det-bento-card .elementor-icon-box-title,
.det-main .det-bento-card .elementor-icon-box-title a {
	font-family: 'Cormorant', Georgia, serif;
	font-size: 24px;
	font-weight: 400;
	color: var(--det-ivory);
	margin-bottom: 8px;
}

.det-main .det-bento-card .elementor-icon-box-description {
	font-size: 17px;
	line-height: 1.7;
	color: var(--det-stone);
	margin: 0;
}

.det-main .det-bento-card .elementor-icon {
	font-size: 24px;
	color: var(--det-gold);
}

/* Stacked Icon Box cards need the gap the flex column used to provide. */
.det-main .det-bento-card + .det-bento-card,
.det-main .det-tile + .det-tile {
	margin-top: 16px;
}

/* Icon Box cards carry the card box itself in this build. */
.det-main .elementor-widget.det-bento-card {
	background: #141210;
	border: 1px solid #2e2820;
	border-radius: 6px;
	padding: 26px;
}

.det-main .elementor-widget.det-tile {
	border: 1px solid var(--det-rule);
	background: rgba(10, 10, 10, .55);
	padding: 30px 28px;
}

.det-main .elementor-widget.det-tile-feature {
	border: 1px solid var(--det-rule);
	background: rgba(10, 10, 10, .55);
	padding: 54px 44px;
}

/* Legacy widgets sit in .elementor-widget-wrap; kill its default spacing so
   section padding stays the single source of vertical rhythm. */
.det-main .elementor-widget-wrap {
	align-content: flex-start;
}

/* Mobile: guarantee the stack at 768, matching the container build. Elementor
   stacks legacy columns on its own at 767, but the brief pins it at 768. */
@media (max-width: 768px) {
	.det-main .det-row > .elementor-container {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 24px;
		align-items: stretch !important;
	}

	.det-main .det-row > .elementor-container > .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
	}

	.det-main .det-area-strip > .elementor-container {
		gap: 0;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.det-main .det-eat .det-row > .elementor-container > .elementor-column,
	.det-main .det-hub-grid .det-row > .elementor-container > .elementor-column {
		width: 48% !important;
	}
}

/* ==========================================================================
   Marquees — hard-coded markup from the theme's shortcodes
   Values are the reference export's, unchanged: 34s for the neighborhood
   ticker, 46s for the testimonials, both translating to -50% over a
   duplicated run so the loop has no seam.
   ========================================================================== */

@keyframes det-scroll-x {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* --- Neighborhood ticker ------------------------------------------------ */

.det-ticker {
	position: relative;
	z-index: 2;
	border-top: 1px solid var(--det-rule);
	background: #0b0a09;
	padding: 20px 0;
	overflow: hidden;
	white-space: nowrap;
}

.det-ticker__track {
	display: inline-flex;
	gap: 60px;
	animation: det-scroll-x 34s linear infinite;
	will-change: transform;
}

.det-ticker__track span {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #f4f1ea;
}

.det-ticker__track span.det-dot {
	color: var(--det-gold);
}

/* --- Testimonial ticker -------------------------------------------------- */

.det-tst-marquee {
	overflow: hidden;
	white-space: nowrap;
	border-top: 1px solid var(--det-rule);
	border-bottom: 1px solid var(--det-rule);
	padding: 50px 0;
}

.det-tst-track {
	display: inline-flex;
	gap: 100px;
	animation: det-scroll-x 46s linear infinite;
	will-change: transform;
}

.det-tst-card {
	display: inline-flex;
	flex-direction: column;
	white-space: normal;
	width: 420px;
	vertical-align: top;
}

.det-tst-card .det-stars {
	color: var(--det-gold);
	margin-bottom: 20px;
	font-size: 13px;
	letter-spacing: .18em;
}

.det-tst-card p {
	font-size: 18px;
	line-height: 1.8;
	font-family: 'Cormorant', Georgia, serif;
	font-style: italic;
	color: var(--det-stone);
	margin-bottom: 22px;
}

.det-tst-card b {
	font-size: 11px;
	color: var(--det-gold);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-style: normal;
	font-family: 'Jost', sans-serif;
	font-weight: 400;
}

/* The tickers keep running horizontally on mobile — they are the two rows that
   do not collapse. Type sizes rise to the 14px floor. */
@media (max-width: 768px) {
	.det-ticker__track {
		gap: 36px;
	}

	.det-ticker__track span {
		font-size: 14px;
		letter-spacing: .12em;
	}

	.det-tst-track {
		gap: 48px;
	}

	.det-tst-card {
		width: 300px;
	}

	.det-tst-card .det-stars,
	.det-tst-card b {
		font-size: 14px;
	}
}

/* The two tickers keep moving regardless of the OS "reduce motion" setting —
   the client asked for them to run always. The scroll-reveal fade-ups further
   down still honour that preference, since content moving under the reader is
   the part that actually causes trouble. */

/* ==========================================================================
   Anchor navigation
   About, Areas We Serve, My Team and Contact are homepage sections, so the nav
   scrolls rather than navigates. #contact is the footer, which is hard-coded
   and therefore present on every page.
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* The areas strip cells link from inside the heading so the link survives in
   both builds; the anchor has to carry the row layout. */
.det-area-cell .elementor-heading-title a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.det-area-cell .elementor-heading-title a:hover,
.det-area-cell .elementor-heading-title a:focus-visible {
	color: var(--det-gold);
}

/* ==========================================================================
   Tabler icons
   The reference uses the Tabler icon webfont. Elementor free has no custom
   icon library (that is a Pro feature), so the widgets stay native Font
   Awesome Icon Box / Icon widgets — fully editable — and the glyph is
   remapped here. Codepoints are read from @tabler/icons-webfont 3.31.0
   itself, not guessed.
   ========================================================================== */

.det-main .elementor-icon i[class*="fa-"]::before {
	font-family: 'tabler-icons' !important;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.det-main .elementor-icon i.fa-shield-alt::before {
	content: '\eb22'; /* ti-shield-check */
}

.det-main .elementor-icon i.fa-bolt::before {
	content: '\ea38'; /* ti-bolt */
}

.det-main .elementor-icon i.fa-gem::before {
	content: '\eb65'; /* ti-diamond */
}

.det-main .elementor-icon i.fa-home::before {
	content: '\f337'; /* ti-home-check */
}

.det-main .elementor-icon i.fa-dollar-sign::before {
	content: '\f339'; /* ti-home-dollar */
}

.det-main .elementor-icon i.fa-building::before {
	content: '\ec39'; /* ti-building-skyscraper */
}

.det-main .elementor-icon i.fa-graduation-cap::before {
	content: '\ecf7'; /* ti-school */
}

.det-main .elementor-icon i.fa-stethoscope::before {
	content: '\edbe'; /* ti-stethoscope */
}

.det-main .elementor-icon i.fa-briefcase::before {
	content: '\ea46'; /* ti-briefcase */
}

.det-main .elementor-icon i.fa-sun::before {
	content: '\eb30'; /* ti-sun */
}

.det-main .elementor-icon i.fa-golf-ball::before {
	content: '\ed8c'; /* ti-golf */
}

.det-main .elementor-icon i.fa-horse::before {
	content: '\fc46'; /* ti-horse */
}

.det-main .elementor-icon i.fa-key::before {
	content: '\eac7'; /* ti-key */
}

/* ==========================================================================
   Scroll reveal
   The reference fades blocks up as they enter the viewport. The class is added
   by JS, never in the markup, so with JS off every section is simply visible
   rather than stuck at opacity 0.
   ========================================================================== */

.det-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s cubic-bezier(.16, 1, .3, 1),
	            transform .9s cubic-bezier(.16, 1, .3, 1);
}

.det-reveal.is-in {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.det-reveal,
	.det-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   Footer background photo
   The reference footer sits on a photo ("Maxima at a table with coffee") that
   was a placeholder in the export, so no file shipped. Drop the photo into
   assets/img/footer-portrait.jpg and uncomment this block to match the
   reference exactly — the filter and overlay values are already the
   reference's.
   ========================================================================== */

/*
.det-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../img/footer-portrait.jpg');
	background-size: cover;
	background-position: center;
	filter: saturate(.6) grayscale(.2);
	z-index: 0;
}

.det-footer::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(6, 5, 4, .8);
	z-index: 0;
}

.det-footer > .det-wrap {
	position: relative;
	z-index: 1;
}
*/


/* ==========================================================================
   Services tiles — text only, no icons
   ========================================================================== */

.det-main .det-svc-title .elementor-heading-title {
	font-family: 'Cormorant', Georgia, serif;
	font-size: 22px;
	font-weight: 400;
	color: var(--det-ivory);
}

.det-main .det-tile-feature .det-svc-title .elementor-heading-title {
	font-size: 27px;
}

.det-main .det-svc-body p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--det-stone);
	margin: 0;
}

@media (max-width: 768px) {
	.det-main .det-svc-body p {
		font-size: 14px;
	}
}