/**
 * Everyday Luxury Vacation Rentals
 * Page: About Everyday Luxury
 * Design: V2.C Stacked Counterpoint, applied to people
 * Design system: Gilded Hours
 *
 * Depends on: hsc-el-design-tokens (provides --el-* properties).
 * Local --el-* fallbacks are declared on .haven-ab-page so the page still
 * renders correctly if the tokens stylesheet is unavailable.
 *
 * Layout contract:
 *   The page caps its outer canvas at 1920px on very wide displays so the
 *   hero never stretches to landscape. Below that, every band is fluid.
 *
 * Voice:
 *   No em dashes anywhere in copy or comments. No banned phrases.
 *
 * Table of contents
 *   0. Page reset and page-level fallbacks
 *   1. Hero  ·  destinations-style full-bleed
 *   2. Linen and cream bands
 *   3. Pair section  ·  founders, management
 *   4. Timeline
 *   5. Earth band  ·  investor-operator hinge
 *   6. CTA closer  ·  two-card decision panel with side-by-side actions
 *   7. Buttons
 *   8. Responsive
 *   9. Reduced motion
 */


/* ==========================================================================
   0. Page reset and page-level fallbacks
   ========================================================================== */

.haven-ab-page {
	/* Defaults overridden where the design tokens stylesheet is enqueued. */
	--ab-earth:      var(--el-earth, #1E1A14);
	--ab-earth-2:    var(--el-earth-2, #2A241B);
	--ab-sand:       var(--el-sand, #C4A078);
	--ab-sand-contrast: var(--el-sand-contrast, #8A6538);
	--ab-sand-soft:  var(--el-sand-soft, #E5D2B8);
	--ab-terra:      var(--el-terra, #B5614A);
	--ab-terra-contrast: var(--el-terra-contrast, #9B4B3B);
	--ab-linen:      var(--el-linen, #FAF7F1);
	--ab-cream:      var(--el-cream, #F4EDE2);
	--ab-paper:      var(--el-paper, #F6EFE5);
	--ab-sky:        var(--el-sky, #6B8C7A);
	--ab-sky-contrast: var(--el-sky-contrast, #4E6B5A);
	--ab-rule:       rgba(196, 160, 120, 0.4);
	--ab-ink-72:     rgba(30, 26, 20, 0.72);
	--ab-ink-86:     rgba(30, 26, 20, 0.86);
	--ab-display:    var(--el-font-display, "Cormorant Garamond", "IM Fell English", Georgia, serif);
	--ab-body:       var(--el-font-body, "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	--ab-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* The outer canvas. Bands inside still go edge-to-edge. */
	max-width: 1920px;
	margin-left:  auto;
	margin-right: auto;

	font-family: var(--ab-body);
	color: var(--ab-earth);
	background: var(--ab-linen);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* Hide the WordPress page title on this page only. The hero supplies the H1. */
body.page-template-page-about-everyday-luxury .entry-title,
body.page-template-page-about-everyday-luxury h1.page-title,
body.page-template-page-about-everyday-luxury .wp-block-post-title,
body.page-template-page-about-everyday-luxury .page-title,
body.haven-about .entry-title,
body.haven-about h1.page-title,
body.haven-about .wp-block-post-title,
body.haven-about .page-title {
	display: none !important;
}

/* Drop any inherited content padding so the hero sits flush under the header. */
body.page-template-page-about-everyday-luxury #content.site-content,
body.haven-about #content.site-content {
	padding-top:    0;
	padding-bottom: 0;
}

/* The WordPress content area can wrap our main in .entry-content with its
   own padding and max-width. Neutralise it on this page only. */
body.page-template-page-about-everyday-luxury .content-area,
body.page-template-page-about-everyday-luxury .site-main,
body.page-template-page-about-everyday-luxury .entry-content,
body.haven-about .content-area,
body.haven-about .site-main,
body.haven-about .entry-content {
	padding:   0;
	margin:    0;
	max-width: none;
}

.haven-ab-page *,
.haven-ab-page *::before,
.haven-ab-page *::after {
	box-sizing: border-box;
}

.haven-ab-page img {
	max-width: 100%;
	display:   block;
}

.haven-ab-page a {
	color: inherit;
	text-decoration: none;
}

/* Shared atoms ───────────────────────────────────────────────────── */

/* Section eyebrow.
   Default treatment: a short hairline rule sits to the LEFT of the label
   (used in the hero where the copy is left-aligned).
   Centered treatment: rules FLANK the label on both sides, like a small
   typographic clasp. The line color reads as a quiet brand highlight at
   the start of every section. */
.haven-ab-eyebrow {
	font-family: var(--ab-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ab-sand-contrast);
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.haven-ab-eyebrow::before {
	content: "";
	width: 36px;
	height: 1.5px;
	background: var(--ab-sand-contrast);
	flex: none;
}

.haven-ab-eyebrow--center {
	justify-content: center;
}

/* Re-enable the inherited rule and add a matching rule on the trailing
   side so centered eyebrows read as · 36px line · LABEL · 36px line · */
.haven-ab-eyebrow--center::before {
	display: block;
}

.haven-ab-eyebrow--center::after {
	content: "";
	width: 36px;
	height: 1.5px;
	background: var(--ab-sand-contrast);
	flex: none;
}

/* On dark backgrounds (hero, earth band) the eyebrow holds the same color
   relationship; the rule reads brighter against the deeper canvas. */
.haven-ab-hero .haven-ab-eyebrow::before,
.haven-ab-hero .haven-ab-eyebrow::after,
.haven-ab-earth .haven-ab-eyebrow::before,
.haven-ab-earth .haven-ab-eyebrow::after {
	background: var(--ab-sand);
	opacity: 0.9;
}

.haven-ab-hero .haven-ab-eyebrow,
.haven-ab-earth .haven-ab-eyebrow {
	color: var(--ab-sand);
}

.haven-ab-section-title {
	font-family: var(--ab-display);
	font-weight: 500;
	font-size: clamp(2rem, 3.6vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 22px;
	color: var(--ab-earth);
}

.haven-ab-section-title em {
	font-style: italic;
	color: var(--ab-terra-contrast);
}

.haven-ab-divider {
	width: 48px;
	height: 1px;
	background: var(--ab-sand);
	margin: 0 auto 28px;
}

.haven-ab-lede {
	font-size: 1.06rem;
	color: var(--ab-ink-86);
	line-height: 1.78;
	margin: 0 0 18px;
}


/* ==========================================================================
   1. Hero  ·  destinations-style full-bleed with overlay copy
   ========================================================================== */

.haven-ab-hero {
	position: relative;
	min-height: 600px;
	color: var(--ab-linen);
	overflow: hidden;
	display: flex;
	align-items: center;
}

.haven-ab-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.haven-ab-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}

.haven-ab-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		110deg,
		rgba(30, 26, 20, 0.92) 0%,
		rgba(30, 26, 20, 0.62) 55%,
		rgba(30, 26, 20, 0.30) 100%
	);
}

.haven-ab-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	width: 100%;
	margin: 0 auto;
	padding: 96px 32px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: end;
}

.haven-ab-hero__copy {
	max-width: 56ch;
}

.haven-ab-hero__title {
	font-family: var(--ab-display);
	font-weight: 500;
	font-size: clamp(2.4rem, 5vw, 4.6rem);
	line-height: 0.98;
	letter-spacing: -0.01em;
	margin: 0 0 22px;
	color: var(--ab-linen);
}

.haven-ab-hero__title em {
	font-style: italic;
	color: var(--ab-sand);
}

.haven-ab-hero__lede {
	font-size: 1.05rem;
	color: rgba(250, 247, 241, 0.86);
	max-width: 56ch;
	margin: 0;
}

.haven-ab-hero__counter {
	border-left: 1px solid rgba(196, 160, 120, 0.35);
	padding: 4px 0 4px 28px;
	display: grid;
	gap: 16px;
	font-family: var(--ab-display);
	font-size: 1.05rem;
	font-style: italic;
	color: rgba(250, 247, 241, 0.92);
}

.haven-ab-hero__counter p {
	margin: 0;
}

.haven-ab-hero__counter strong {
	display: block;
	font-family: var(--ab-body);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ab-sand);
	font-weight: 500;
	font-style: normal;
	margin-bottom: 4px;
}


/* ==========================================================================
   2. Linen band (centered why section)
   ========================================================================== */

.haven-ab-band {
	background: var(--ab-linen);
	padding: 110px 32px;
}

.haven-ab-band__inner {
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
}


/* ==========================================================================
   3. Pair section  ·  founders, management
   ========================================================================== */

.haven-ab-pair {
	background: var(--ab-cream);
	padding: 110px 32px;
}

.haven-ab-pair--linen {
	background: var(--ab-linen);
}

.haven-ab-pair__head {
	max-width: 880px;
	margin: 0 auto 60px;
	text-align: center;
}

.haven-ab-pair__grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.haven-ab-pair__card {
	display: flex;
	flex-direction: column;
}

.haven-ab-pair__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--ab-paper);
	border-radius: 2px;
}

.haven-ab-pair__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ab-ease);
}

.haven-ab-pair__card:hover .haven-ab-pair__media img {
	transform: scale(1.04);
}

.haven-ab-pair__media--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ab-display);
	font-size: 4rem;
	font-style: italic;
	color: var(--ab-sand);
	background: linear-gradient(160deg, var(--ab-cream) 0%, var(--ab-paper) 100%);
}

.haven-ab-pair__body {
	padding: 26px 4px 0;
}

.haven-ab-pair__role {
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ab-sand-contrast);
	margin: 0 0 8px;
}

.haven-ab-pair__role--owner {
	color: var(--ab-sky-contrast);
}

.haven-ab-pair__name {
	font-family: var(--ab-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
	color: var(--ab-earth);
}

.haven-ab-pair__bio {
	font-size: 0.98rem;
	line-height: 1.72;
	color: var(--ab-ink-86);
	margin: 0;
}


/* ==========================================================================
   4. Timeline
   ========================================================================== */

.haven-ab-timeline {
	background: var(--ab-linen);
	padding: 110px 32px;
}

.haven-ab-timeline__head {
	max-width: 880px;
	margin: 0 auto 60px;
	text-align: center;
}

.haven-ab-timeline__list {
	max-width: 880px;
	margin: 0 auto;
	position: relative;
	list-style: none;
	padding: 0;
}

.haven-ab-timeline__list::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--ab-rule);
}

.haven-ab-timeline__item {
	position: relative;
	padding: 0 0 32px 44px;
}

.haven-ab-timeline__item:last-child {
	padding-bottom: 0;
}

.haven-ab-timeline__item::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 12px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ab-sand);
	box-shadow: 0 0 0 4px var(--ab-linen);
}

.haven-ab-timeline__year {
	font-family: var(--ab-display);
	font-size: 1.4rem;
	color: var(--ab-terra);
	font-style: italic;
	margin: 0 0 4px;
}

.haven-ab-timeline__what {
	font-family: var(--ab-body);
	font-size: 1rem;
	color: var(--ab-ink-86);
	line-height: 1.7;
	margin: 0;
}


/* ==========================================================================
   5. Earth band  ·  investor-operator hinge
   ----------------------------------------------------------------------------
   The dark canvas is built up from three layers, painted bottom-up:
     1. A solid earth fill so the section never reads gray on first paint.
     2. A diagonal shade that leans light at the top-left and deeper at the
        bottom-right, giving the band shape under the type.
     3. Two soft radial pools (sand and terra) that warm the corners.
   The result is a richer, more atmospheric panel than a flat fill, while
   keeping plenty of contrast for the white type.
   ========================================================================== */

.haven-ab-earth {
	color: var(--ab-linen);
	padding: 110px 32px;
	text-align: center;
	position: relative;
	overflow: hidden;
	background-color: var(--ab-earth);
	background-image:
		radial-gradient(ellipse at 18% 22%, rgba(196, 160, 120, 0.18) 0%, transparent 48%),
		radial-gradient(ellipse at 82% 78%, rgba(181, 97, 74, 0.16) 0%, transparent 50%),
		linear-gradient(155deg, #2A241B 0%, #1E1A14 45%, #15110C 100%);
}

/* A faint, deterministic noise overlay so the band feels like surface, not
   a CSS gradient. Inline SVG keeps it weightless. */
.haven-ab-earth::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.18;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.77 0 0 0 0 0.63 0 0 0 0 0.47 0 0 0 0.65 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* A hairline rule across the top of the band so it lands cleanly against
   the linen timeline section above it. */
.haven-ab-earth::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(196, 160, 120, 0.4) 50%, transparent 100%);
	z-index: 1;
}

.haven-ab-earth__inner {
	position: relative;
	z-index: 2;
	max-width: 880px;
	margin: 0 auto;
}

.haven-ab-earth__title {
	font-family: var(--ab-display);
	font-weight: 500;
	font-size: clamp(2.1rem, 4.2vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 22px;
	color: var(--ab-linen);
}

.haven-ab-earth__title em {
	font-style: italic;
	color: var(--ab-sand-soft);
}

.haven-ab-earth__lede {
	font-size: 1.05rem;
	color: rgba(250, 247, 241, 0.86);
	max-width: 60ch;
	margin: 0 auto 36px;
	line-height: 1.7;
}

/* Pull quote.
   Hard-reset every <blockquote> property the parent theme or WordPress core
   may have set (background, border, padding, quotes, margin) so the quote
   sits cleanly on the earth canvas with only our top hairline rule. */
.haven-ab-page .haven-ab-pull,
.haven-ab-page blockquote.haven-ab-pull {
	background: transparent !important;
	border: 0 !important;
	border-top: 1px solid rgba(196, 160, 120, 0.32) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	quotes: none;

	font-family: var(--ab-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.25rem, 1.9vw, 1.7rem);
	line-height: 1.45;
	color: var(--ab-sand-soft);

	max-width: 60ch;
	margin: 30px auto 0;
	padding: 30px 0 0 0;

	text-align: center;
}

.haven-ab-page .haven-ab-pull::before,
.haven-ab-page .haven-ab-pull::after {
	content: none;
}

.haven-ab-page .haven-ab-pull p {
	margin: 0;
	color: var(--ab-sand-soft);
}

.haven-ab-page .haven-ab-pull cite {
	display: block;
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ab-sand);
	margin-top: 18px;
	font-family: var(--ab-body);
}

.haven-ab-page .haven-ab-pull cite::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 1px;
	background: var(--ab-sand);
	vertical-align: middle;
	margin-right: 10px;
	transform: translateY(-2px);
}


/* ==========================================================================
   6. CTA closer  ·  two-card decision panel + concierge
   ========================================================================== */

.haven-ab-cta {
	background: var(--ab-paper);
	color: var(--ab-earth);
	padding: 120px 32px;
	text-align: center;
}

.haven-ab-cta__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.haven-ab-cta__top {
	max-width: 760px;
	margin: 0 auto 48px;
}

.haven-ab-cta__title {
	font-family: var(--ab-display);
	font-weight: 500;
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 22px;
	color: var(--ab-earth);
}

.haven-ab-cta__title em {
	font-style: italic;
	color: var(--ab-terra-contrast);
}

.haven-ab-cta__lede {
	font-size: 1.06rem;
	color: var(--ab-ink-86);
	max-width: 56ch;
	margin: 0 auto 0;
	line-height: 1.7;
}

.haven-ab-cta__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 1000px;
	margin: 0 auto 36px;
	text-align: left;
}

.haven-ab-cta__card {
	background: var(--ab-linen);
	border: 1px solid var(--ab-rule);
	border-radius: 4px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
}

.haven-ab-cta__card--owner {
	background: var(--ab-cream);
}

.haven-ab-cta__card-title {
	font-family: var(--ab-display);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.15;
	margin: 0 0 12px;
	color: var(--ab-earth);
}

.haven-ab-cta__card p {
	margin: 0 0 22px;
	font-size: 0.98rem;
	color: var(--ab-ink-86);
	line-height: 1.65;
	flex: 1;
}

/* The button pair sits side by side at every viewport. Each button is a
   flex item that shares the row equally, so the two CTAs never wrap and
   never stack on top of each other. */
.haven-ab-cta__pair {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 10px;
	width: 100%;
}

.haven-ab-cta__pair .haven-ab-btn {
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
	padding-left: 14px;
	padding-right: 14px;
	white-space: nowrap;
}

.haven-ab-cta__concierge {
	font-family: var(--ab-display);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--ab-ink-72);
	margin: 0 auto;
	max-width: 60ch;
}

.haven-ab-cta__concierge a {
	display: inline-block;
	font-family: var(--ab-body);
	font-style: normal;
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ab-earth);
	border-bottom: 1px solid var(--ab-sand);
	padding-bottom: 1px;
	margin-left: 6px;
	transition: color 0.3s var(--ab-ease);
}

.haven-ab-cta__concierge a:hover,
.haven-ab-cta__concierge a:focus-visible {
	color: var(--ab-terra-contrast);
}


/* ==========================================================================
   7. Buttons
   ========================================================================== */

.haven-ab-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	font-family: var(--ab-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.3s var(--ab-ease),
	            color 0.3s var(--ab-ease),
	            border-color 0.3s var(--ab-ease),
	            transform 0.3s var(--ab-ease);
}

.haven-ab-btn--primary {
	background: var(--ab-earth);
	color: var(--ab-linen);
	border-color: var(--ab-earth);
}

.haven-ab-btn--primary:hover,
.haven-ab-btn--primary:focus-visible {
	background: var(--ab-terra-contrast);
	border-color: var(--ab-terra-contrast);
	transform: translateY(-2px);
}

.haven-ab-btn--ghost {
	background: transparent;
	color: var(--ab-earth);
	border-color: var(--ab-earth);
}

.haven-ab-btn--ghost:hover,
.haven-ab-btn--ghost:focus-visible {
	background: var(--ab-earth);
	color: var(--ab-linen);
	transform: translateY(-2px);
}


/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width: 980px) {
	.haven-ab-hero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.haven-ab-pair__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.haven-ab-cta__cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.haven-ab-hero {
		min-height: auto;
	}

	.haven-ab-hero__inner {
		padding: 60px 22px;
	}

	.haven-ab-band,
	.haven-ab-pair,
	.haven-ab-timeline,
	.haven-ab-earth,
	.haven-ab-cta {
		padding: 70px 22px;
	}
}

/* The CTA button labels are short ("View all rentals", "Contact us",
   "Property management"). They hold side by side down to phone widths.
   Below 380 px, allow them to wrap as a final defensive break. */
@media (max-width: 380px) {
	.haven-ab-cta__pair {
		flex-wrap: wrap;
	}

	.haven-ab-cta__pair .haven-ab-btn {
		flex: 1 1 100%;
	}
}


/* ==========================================================================
   9. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.haven-ab-page *,
	.haven-ab-page *::before,
	.haven-ab-page *::after {
		transition-duration: 0.01ms !important;
		animation-duration:  0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}