/**
 * Everyday Luxury Inc.
 * Page: Contact Us  ·  /contact-us/
 * Design: Atelier Letter (V1)
 * Design system: Gilded Hours
 *
 * Depends on: hsc-el-design-tokens (provides --el-* properties).
 * Local --el-* fallbacks are declared on .haven-cu-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. Shared atoms (eyebrow, divider, buttons)
 *   2. Hero        ·  split frame
 *   3. Earth band  ·  trust hinge with leader signatures
 *   4. Reach band  ·  three numbered cards on linen
 *   5. Write band  ·  sticky rail + form panel
 *   6. Form panel  ·  [el_contact_form] shortcode overrides
 *   7. CTA         ·  image-bg with quote + offset light card
 *   8. Responsive
 *   9. Reduced motion / print
 */


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

.haven-cu-page {
	--cu-earth:      var(--el-earth, #1E1A14);
	--cu-earth-2:    var(--el-earth-2, #2A241B);
	--cu-sand:       var(--el-sand, #C4A078);
	--cu-sand-soft:  var(--el-sand-soft, #E5D2B8);
	--cu-terra:      var(--el-terra, #B5614A);
	--cu-linen:      var(--el-linen, #FAF7F1);
	--cu-cream:      var(--el-cream, #F4EDE2);
	--cu-paper:      var(--el-paper, #F6EFE5);
	--cu-sky:        var(--el-sky, #6B8C7A);
	--cu-rule:       rgba(196, 160, 120, 0.4);
	--cu-ink-72:     rgba(30, 26, 20, 0.72);
	--cu-ink-86:     rgba(30, 26, 20, 0.86);
	--cu-display:    var(--el-font-display, "Cormorant Garamond", "IM Fell English", Georgia, serif);
	--cu-body:       var(--el-font-body, "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	--cu-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);

	max-width: 1920px;
	margin-left:  auto;
	margin-right: auto;
	font-family: var(--cu-body);
	color: var(--cu-earth);
	background: var(--cu-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-contact-us .entry-title,
body.page-template-page-contact-us h1.page-title,
body.page-template-page-contact-us .wp-block-post-title,
body.page-template-page-contact-us .page-title,
body.haven-contact-us .entry-title,
body.haven-contact-us h1.page-title,
body.haven-contact-us .wp-block-post-title,
body.haven-contact-us .page-title {
	display: none !important;
}

/* Hero sits flush under the site header. */
body.page-template-page-contact-us #content.site-content,
body.haven-contact-us #content.site-content {
	padding-top:    0;
	padding-bottom: 0;
}

/* The WP 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-contact-us .content-area,
body.page-template-page-contact-us .site-main,
body.page-template-page-contact-us .entry-content,
body.haven-contact-us .content-area,
body.haven-contact-us .site-main,
body.haven-contact-us .entry-content {
	padding:   0;
	margin:    0;
	max-width: none;
}

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

.haven-cu-page img { max-width: 100%; display: block; }
.haven-cu-page a { color: inherit; text-decoration: none; }


/* ==========================================================================
   1. Shared atoms
   ========================================================================== */

.haven-cu-eyebrow {
	font-family: var(--cu-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--cu-sand);
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.haven-cu-eyebrow::before {
	content: "";
	width: 36px;
	height: 1.5px;
	background: var(--cu-sand);
	flex: none;
}
.haven-cu-eyebrow--center { justify-content: center; }
.haven-cu-eyebrow--center::after {
	content: "";
	width: 36px;
	height: 1.5px;
	background: var(--cu-sand);
	flex: none;
}

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

/* Buttons */
.haven-cu-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	font-family: var(--cu-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(--cu-ease),
	            color 0.3s var(--cu-ease),
	            border-color 0.3s var(--cu-ease),
	            transform 0.3s var(--cu-ease);
}
.haven-cu-btn--dark {
	background: var(--cu-earth);
	color: var(--cu-linen);
	border-color: var(--cu-earth);
}
.haven-cu-btn--dark:hover,
.haven-cu-btn--dark:focus-visible {
	background: var(--cu-terra);
	border-color: var(--cu-terra);
	transform: translateY(-2px);
}
.haven-cu-btn--ghost-d {
	background: transparent;
	color: var(--cu-earth);
	border-color: var(--cu-earth);
}
.haven-cu-btn--ghost-d:hover,
.haven-cu-btn--ghost-d:focus-visible {
	background: var(--cu-earth);
	color: var(--cu-linen);
}


/* ==========================================================================
   2. Hero  ·  split frame (image left, ribbon letter right)
   ========================================================================== */

.haven-cu-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 660px;
	background: var(--cu-cream);
	overflow: hidden;
}

.haven-cu-hero__img {
	position: relative;
	overflow: hidden;
}
.haven-cu-hero__img img,
.haven-cu-hero__img picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 56%;
}
.haven-cu-hero__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg,
		rgba(30, 26, 20, 0.18) 0%,
		rgba(30, 26, 20, 0.45) 100%);
}
.haven-cu-hero__caption {
	position: absolute;
	left: 32px;
	bottom: 28px;
	z-index: 1;
	color: var(--cu-linen);
	font-family: var(--cu-display);
	font-style: italic;
	font-size: 1rem;
	letter-spacing: 0.04em;
	margin: 0;
}
.haven-cu-hero__caption::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background: var(--cu-sand);
	vertical-align: middle;
	margin-right: 10px;
	transform: translateY(-3px);
}

.haven-cu-hero__letter {
	position: relative;
	padding: 96px clamp(28px, 5vw, 72px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background:
		radial-gradient(ellipse at 12% 10%, rgba(196, 160, 120, 0.18) 0%, transparent 55%),
		radial-gradient(ellipse at 90% 90%, rgba(181, 97, 74, 0.10) 0%, transparent 60%),
		var(--cu-cream);
}
.haven-cu-hero__letter::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(196, 160, 120, 0.45) 25%,
		rgba(196, 160, 120, 0.45) 75%,
		transparent 100%);
}
.haven-cu-hero__letter::after {
	content: "";
	position: absolute;
	right: 36px;
	top: 36px;
	bottom: 36px;
	width: 1px;
	background: rgba(196, 160, 120, 0.18);
	pointer-events: none;
}

.haven-cu-hero__ribbon {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px;
	align-self: flex-start;
	margin-bottom: 30px;
	background: var(--cu-earth);
	color: var(--cu-linen);
	font-family: var(--cu-body);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-weight: 700;
	position: relative;
}
.haven-cu-hero__ribbon::after {
	content: "";
	position: absolute;
	right: -12px;
	top: 0;
	border: 18px solid transparent;
	border-left-color: var(--cu-earth);
	border-bottom: 0;
	border-right: 0;
	height: 0;
	width: 0;
}
.haven-cu-hero__ribbon-dot {
	width: 6px;
	height: 6px;
	background: var(--cu-sand);
	border-radius: 50%;
	display: inline-block;
}

.haven-cu-hero__title {
	font-family: var(--cu-display);
	font-weight: 500;
	font-size: clamp(2.4rem, 4.6vw, 4rem);
	line-height: 1.02;
	letter-spacing: -0.012em;
	margin: 0 0 22px;
	color: var(--cu-earth);
}
.haven-cu-hero__title em { font-style: italic; color: var(--cu-terra); }

.haven-cu-hero__lede {
	font-size: 1.06rem;
	color: var(--cu-ink-86);
	max-width: 54ch;
	margin: 0 0 28px;
	line-height: 1.78;
}

.haven-cu-hero__call {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 28px;
}
.haven-cu-hero__call span {
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--cu-ink-72);
	font-weight: 600;
}
.haven-cu-hero__call a {
	font-family: var(--cu-display);
	font-size: 1.6rem;
	font-style: italic;
	color: var(--cu-earth);
	border-bottom: 1px solid var(--cu-sand);
	padding-bottom: 2px;
	transition: color 0.3s var(--cu-ease), border-color 0.3s var(--cu-ease);
}
.haven-cu-hero__call a:hover,
.haven-cu-hero__call a:focus-visible {
	color: var(--cu-terra);
	border-color: var(--cu-terra);
}

.haven-cu-hero__lines {
	margin: 18px 0 0;
	border-top: 1px solid var(--cu-rule);
	padding-top: 18px;
	display: grid;
	gap: 12px;
}
.haven-cu-hero__line {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 18px;
	font-size: 0.94rem;
	color: var(--cu-ink-86);
}
.haven-cu-hero__line dt {
	font-family: var(--cu-body);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--cu-sand);
	font-weight: 700;
	align-self: center;
	margin: 0;
}
.haven-cu-hero__line dd {
	margin: 0;
	align-self: center;
	line-height: 1.6;
}


/* ==========================================================================
   3. Earth band  ·  trust hinge with leader signatures
   ========================================================================== */

.haven-cu-earth {
	color: var(--cu-linen);
	padding: 110px 32px;
	text-align: center;
	position: relative;
	overflow: hidden;
	background-color: var(--cu-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%);
}
.haven-cu-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>");
}
.haven-cu-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-cu-earth__inner {
	position: relative;
	z-index: 2;
	max-width: 880px;
	margin: 0 auto;
}
.haven-cu-earth__title {
	font-family: var(--cu-display);
	font-weight: 500;
	font-size: clamp(2.1rem, 4.2vw, 3.2rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 22px;
	color: var(--cu-linen);
}
.haven-cu-earth__title em {
	font-style: italic;
	color: var(--cu-sand-soft);
}
.haven-cu-earth__lede {
	font-size: 1.05rem;
	color: rgba(250, 247, 241, 0.86);
	max-width: 60ch;
	margin: 0 auto 36px;
	line-height: 1.7;
}
.haven-cu-earth__sigs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 760px;
	margin: 30px auto 0;
	gap: 20px;
	text-align: center;
}
.haven-cu-earth__sig {
	padding: 14px 8px;
	border-top: 1px solid rgba(196, 160, 120, 0.22);
}
.haven-cu-earth__sig-name {
	font-family: var(--cu-display);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--cu-sand-soft);
	margin: 0 0 4px;
}
.haven-cu-earth__sig-role {
	font-family: var(--cu-body);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--cu-sand);
	font-weight: 600;
	margin: 0;
}

.haven-cu-earth__about {
	margin: 36px auto 0;
	font-size: 0.86rem;
}
.haven-cu-earth__about a {
	display: inline-block;
	font-family: var(--cu-body);
	font-size: 11px;
	line-height: 1.4;
	min-height: 28px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--cu-sand-soft);
	border-bottom: 1px solid rgba(196, 160, 120, 0.55);
	padding: 4px 0 6px;
	transition: color 0.3s var(--cu-ease), border-color 0.3s var(--cu-ease);
}
.haven-cu-earth__about a:hover,
.haven-cu-earth__about a:focus-visible {
	color: var(--cu-linen);
	border-color: var(--cu-linen);
}


/* ==========================================================================
   4. Reach band  ·  three numbered cards on linen
   ========================================================================== */

.haven-cu-reach {
	background: var(--cu-linen);
	padding: 120px 32px;
}
.haven-cu-reach__head {
	max-width: 880px;
	margin: 0 auto 56px;
	text-align: center;
}
.haven-cu-reach__head h2 {
	font-family: var(--cu-display);
	font-weight: 500;
	font-size: clamp(2rem, 3.5vw, 2.8rem);
	line-height: 1.08;
	margin: 0 0 22px;
	color: var(--cu-earth);
	letter-spacing: -0.01em;
}
.haven-cu-reach__head h2 em { font-style: italic; color: var(--cu-terra); }
.haven-cu-reach__head p {
	font-size: 1.04rem;
	color: var(--cu-ink-86);
	line-height: 1.78;
	margin: 0 auto;
	max-width: 60ch;
}

.haven-cu-reach__grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.haven-cu-rcard {
	background: var(--cu-cream);
	padding: 38px 32px;
	border: 1px solid var(--cu-rule);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.3s var(--cu-ease),
	            border-color 0.3s var(--cu-ease),
	            box-shadow 0.3s var(--cu-ease);
}
.haven-cu-rcard:hover,
.haven-cu-rcard:focus-within {
	transform: translateY(-3px);
	border-color: var(--cu-sand);
	box-shadow: 0 24px 48px -32px rgba(30, 26, 20, 0.25);
}
.haven-cu-rcard__num {
	font-family: var(--cu-display);
	font-style: italic;
	font-size: 2.4rem;
	color: var(--cu-sand);
	line-height: 1;
	margin: 0 0 6px;
}
.haven-cu-rcard__title {
	font-family: var(--cu-display);
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--cu-earth);
	margin: 0;
	line-height: 1.15;
}
.haven-cu-rcard__title em { font-style: italic; color: var(--cu-terra); }
.haven-cu-rcard__copy {
	font-size: 0.95rem;
	color: var(--cu-ink-86);
	line-height: 1.7;
	margin: 0;
	flex: 1;
}
.haven-cu-rcard__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	font-family: var(--cu-body);
	font-size: 11px;
	line-height: 1.4;
	min-height: 28px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--cu-earth);
	padding: 4px 0 6px;
	border-bottom: 1px solid var(--cu-sand);
	margin-top: 6px;
	transition: color 0.3s var(--cu-ease), border-color 0.3s var(--cu-ease);
}
.haven-cu-rcard__cta:hover,
.haven-cu-rcard__cta:focus-visible {
	color: var(--cu-terra);
	border-color: var(--cu-terra);
}


/* ==========================================================================
   5. Write band  ·  sticky rail + form panel
   ========================================================================== */

.haven-cu-write {
	background: var(--cu-cream);
	padding: 120px 32px;
}
.haven-cu-write__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.95fr 1fr;
	gap: 80px;
	align-items: start;
}

.haven-cu-write__rail {
	position: sticky;
	top: 96px;
	display: grid;
	gap: 22px;
}
.haven-cu-write__rail h2 {
	font-family: var(--cu-display);
	font-weight: 500;
	font-size: clamp(1.8rem, 2.8vw, 2.4rem);
	line-height: 1.1;
	margin: 0 0 14px;
	color: var(--cu-earth);
	letter-spacing: -0.01em;
}
.haven-cu-write__rail h2 em { font-style: italic; color: var(--cu-terra); }
.haven-cu-write__rail p {
	color: var(--cu-ink-86);
	line-height: 1.78;
	font-size: 1rem;
	margin: 0 0 14px;
}

.haven-cu-rail__steps {
	display: grid;
	gap: 0;
	border-left: 1px solid var(--cu-rule);
	margin: 8px 0 0 6px;
	padding: 0;
	list-style: none;
}
.haven-cu-rail__step {
	position: relative;
	padding: 14px 0 14px 28px;
}
.haven-cu-rail__step::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 18px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cu-sand);
	box-shadow: 0 0 0 4px var(--cu-cream);
}
.haven-cu-rail__step h4 {
	font-family: var(--cu-display);
	font-style: italic;
	font-size: 1.15rem;
	margin: 0 0 4px;
	color: var(--cu-earth);
	font-weight: 500;
}
.haven-cu-rail__step p {
	font-size: 0.92rem;
	color: var(--cu-ink-72);
	margin: 0;
	line-height: 1.7;
}

.haven-cu-rail__quick {
	margin-top: 12px;
	padding: 22px 24px;
	background: var(--cu-paper);
	border: 1px solid var(--cu-rule);
	display: grid;
	gap: 6px;
}
.haven-cu-rail__quick-label {
	font-family: var(--cu-body);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--cu-ink-72);
	font-weight: 600;
	margin: 0 0 4px;
}
.haven-cu-rail__quick a {
	font-family: var(--cu-display);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--cu-earth);
	transition: color 0.3s var(--cu-ease);
}
.haven-cu-rail__quick a:hover,
.haven-cu-rail__quick a:focus-visible { color: var(--cu-terra); }


/* ==========================================================================
   6. Form panel  ·  [el_contact_form] shortcode overrides
   The shortcode emits its own inline styles, so the rules below use a higher
   specificity (.haven-cu-formpanel descendant) plus !important where
   inline styles must be defeated. The goal is to make the shortcode look
   like part of the Atelier Letter design without modifying the shortcode
   itself.
   ========================================================================== */

.haven-cu-formpanel {
	background: var(--cu-linen);
	border: 1px solid var(--cu-rule);
	padding: 0;
	position: relative;
	box-shadow: 0 30px 80px -50px rgba(30, 26, 20, 0.30);
}
.haven-cu-formpanel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--cu-sand), var(--cu-terra), var(--cu-sand));
}

/* Reset shortcode wrapper inline styles. */
.haven-cu-formpanel .el-contact-wrap {
	background: transparent !important;
	max-width: 100% !important;
	padding: 48px clamp(24px, 4vw, 44px) !important;
	font-family: var(--cu-body) !important;
}
.haven-cu-formpanel .el-contact-wrap * { box-sizing: border-box; }

/* Intro block. */
.haven-cu-formpanel .el-contact-intro { margin-bottom: 18px !important; }
.haven-cu-formpanel .el-contact-intro-eyebrow {
	font-family: var(--cu-body) !important;
	font-size: 11px !important;
	letter-spacing: 0.32em !important;
	text-transform: uppercase !important;
	color: var(--cu-sand) !important;
	font-weight: 600 !important;
	margin: 0 0 12px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px;
}
.haven-cu-formpanel .el-contact-intro-eyebrow::before {
	content: "";
	width: 28px;
	height: 1.5px;
	background: var(--cu-sand);
	display: inline-block;
}
.haven-cu-formpanel .el-contact-intro-title {
	font-family: var(--cu-display) !important;
	font-weight: 500 !important;
	font-size: clamp(1.55rem, 2.4vw, 1.9rem) !important;
	line-height: 1.12 !important;
	color: var(--cu-earth) !important;
	margin: 0 0 10px !important;
	letter-spacing: -0.01em;
}
.haven-cu-formpanel .el-contact-intro-copy {
	font-family: var(--cu-body) !important;
	font-size: 0.96rem !important;
	color: var(--cu-ink-72) !important;
	line-height: 1.78 !important;
	margin: 0 0 28px !important;
	font-weight: 400 !important;
}

/* Inquiry-type tabs become a segmented control. */
.haven-cu-formpanel .el-type-tabs {
	display: flex !important;
	gap: 0 !important;
	margin: 0 0 28px !important;
	border: 1px solid var(--cu-rule) !important;
	background: var(--cu-cream);
}
.haven-cu-formpanel .el-type-tab {
	flex: 1 !important;
	padding: 12px 8px !important;
	font-family: var(--cu-body) !important;
	font-size: 10px !important;
	letter-spacing: 0.28em !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	color: var(--cu-ink-72) !important;
	background: transparent !important;
	border: 0 !important;
	border-right: 1px solid var(--cu-rule) !important;
	cursor: pointer !important;
	transition: background 0.2s var(--cu-ease), color 0.2s var(--cu-ease) !important;
}
.haven-cu-formpanel .el-type-tab:last-child { border-right: 0 !important; }
.haven-cu-formpanel .el-type-tab:hover:not(.active) {
	background: var(--cu-paper) !important;
	color: var(--cu-earth) !important;
}
.haven-cu-formpanel .el-type-tab.active {
	background: var(--cu-earth) !important;
	color: var(--cu-linen) !important;
}

/* Field rows. The shortcode uses inline grid templates; we keep the layout
   but normalize spacing and typography. */
.haven-cu-formpanel .el-row-2 {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px !important;
	margin-bottom: 16px !important;
}

.haven-cu-formpanel .el-contact-form label {
	display: block;
	font-family: var(--cu-body) !important;
	font-size: 10px !important;
	letter-spacing: 0.28em !important;
	text-transform: uppercase !important;
	color: var(--cu-ink-72) !important;
	font-weight: 600 !important;
	margin-bottom: 6px !important;
}

.haven-cu-formpanel .el-contact-form input[type="text"],
.haven-cu-formpanel .el-contact-form input[type="email"],
.haven-cu-formpanel .el-contact-form input[type="tel"],
.haven-cu-formpanel .el-contact-form input[type="number"],
.haven-cu-formpanel .el-contact-form select,
.haven-cu-formpanel .el-contact-form textarea {
	background: var(--cu-cream) !important;
	border: 1px solid var(--cu-rule) !important;
	border-radius: 0 !important;
	color: var(--cu-earth) !important;
	font-family: var(--cu-body) !important;
	font-size: 0.95rem !important;
	font-weight: 400 !important;
	padding: 13px 14px !important;
	width: 100% !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	transition: border-color 0.2s var(--cu-ease), background 0.2s var(--cu-ease) !important;
	box-shadow: none !important;
}
.haven-cu-formpanel .el-contact-form input:focus,
.haven-cu-formpanel .el-contact-form select:focus,
.haven-cu-formpanel .el-contact-form textarea:focus {
	border-color: var(--cu-sand) !important;
	background: var(--cu-linen) !important;
	box-shadow: 0 0 0 3px rgba(196, 160, 120, 0.15) !important;
}
.haven-cu-formpanel .el-contact-form textarea {
	min-height: 130px !important;
	resize: vertical !important;
	line-height: 1.6 !important;
}
.haven-cu-formpanel .el-contact-form input::placeholder,
.haven-cu-formpanel .el-contact-form textarea::placeholder {
	color: rgba(30, 26, 20, 0.35) !important;
}

/* Owner extras: keep card layout but match design. */
.haven-cu-formpanel .el-contact-owner-fields { margin-bottom: 6px; }

/* Field note (small italic helper). */
.haven-cu-formpanel .el-contact-field-note {
	font-family: var(--cu-display) !important;
	font-style: italic !important;
	font-size: 0.84rem !important;
	color: var(--cu-ink-72) !important;
	margin: 6px 0 14px !important;
	line-height: 1.6 !important;
	font-weight: 400 !important;
}

/* Consent block. */
.haven-cu-formpanel .el-contact-consent {
	background: var(--cu-paper) !important;
	border: 1px solid var(--cu-rule) !important;
	border-left: 3px solid var(--cu-sand) !important;
	padding: 16px 18px !important;
	margin: 18px 0 18px !important;
}
.haven-cu-formpanel .el-contact-consent-label {
	display: flex !important;
	gap: 12px !important;
	align-items: flex-start !important;
	cursor: pointer !important;
}
.haven-cu-formpanel .el-contact-consent input[type="checkbox"] {
	margin-top: 4px;
	accent-color: var(--cu-terra);
}
.haven-cu-formpanel .el-contact-consent-copy {
	font-family: var(--cu-body) !important;
	font-size: 0.84rem !important;
	color: var(--cu-ink-72) !important;
	line-height: 1.7 !important;
}
.haven-cu-formpanel .el-contact-consent-copy a {
	color: var(--cu-accent, var(--cu-terra)) !important;
	text-decoration-color: currentColor !important;
}
.haven-cu-formpanel .el-contact-consent-copy a:hover,
.haven-cu-formpanel .el-contact-consent-copy a:focus-visible {
	color: var(--cu-accent-strong, var(--cu-earth)) !important;
}

/* Submit button. The shortcode sets its own inline styles which we must
   defeat so the button reads as our primary CTA. */
.haven-cu-formpanel .el-contact-form button[type="submit"],
.haven-cu-formpanel .el-contact-submit,
.haven-cu-formpanel .el-contact-form .el-contact-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 16px 26px !important;
	background: var(--cu-earth) !important;
	color: var(--cu-linen) !important;
	font-family: var(--cu-body) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	border: 1px solid var(--cu-earth) !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	transition: background 0.3s var(--cu-ease), border-color 0.3s var(--cu-ease), transform 0.3s var(--cu-ease) !important;
	box-shadow: none !important;
}
.haven-cu-formpanel .el-contact-form button[type="submit"]:hover,
.haven-cu-formpanel .el-contact-submit:hover {
	background: var(--cu-terra) !important;
	border-color: var(--cu-terra) !important;
	transform: translateY(-1px) !important;
}

.haven-cu-formpanel .el-contact-privacy-note {
	font-family: var(--cu-body) !important;
	font-size: 0.78rem !important;
	color: var(--cu-ink-72) !important;
	text-align: center !important;
	margin: 14px 0 0 !important;
	line-height: 1.7 !important;
}

/* Direct link strip at the bottom of the shortcode. */
.haven-cu-formpanel .el-contact-direct {
	margin-top: 28px !important;
	padding-top: 24px !important;
	border-top: 1px solid var(--cu-rule) !important;
	text-align: center;
}
.haven-cu-formpanel .el-contact-direct-label {
	font-family: var(--cu-body) !important;
	font-size: 0.84rem !important;
	color: var(--cu-ink-72) !important;
	margin: 0 0 12px !important;
}
.haven-cu-formpanel .el-contact-direct-links {
	display: flex !important;
	justify-content: center !important;
	gap: 24px !important;
	flex-wrap: wrap !important;
}
.haven-cu-formpanel .el-contact-direct-link {
	font-family: var(--cu-body) !important;
	font-size: 11px !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	color: var(--cu-earth) !important;
	border-bottom: 1px solid var(--cu-sand);
	padding-bottom: 2px;
	text-decoration: none !important;
}
.haven-cu-formpanel .el-contact-direct-link:hover { color: var(--cu-terra); border-color: var(--cu-terra); }

/* Success and error banners. */
.haven-cu-formpanel .el-contact-success {
	background: var(--cu-paper) !important;
	border: 1px solid var(--cu-rule) !important;
	padding: 36px 28px !important;
	text-align: center !important;
}
.haven-cu-formpanel .el-contact-error {
	background: rgba(181, 97, 74, 0.08) !important;
	border-left: 3px solid var(--cu-terra) !important;
	padding: 18px 22px !important;
	margin-bottom: 24px !important;
	color: var(--cu-earth) !important;
}

/* Fallback when shortcode is not registered. */
.haven-cu-formpanel__missing {
	padding: 48px 32px;
	text-align: center;
	color: var(--cu-ink-72);
	font-size: 0.96rem;
}
.haven-cu-formpanel__missing a { color: var(--cu-terra); border-bottom: 1px solid var(--cu-terra); }


/* ==========================================================================
   6.b Inquiry-type theming
   The shortcode wrapper [el-contact-wrap] gets a data-inquiry-type attribute
   that mirrors the active segmented-control tab. The form panel itself also
   receives the same attribute via JS. We expose a single set of accent
   custom properties per type and let the existing rules read from them, so
   the entire form panel re-tints in one place when the user switches desk.

   Type    Palette          Mood
   ------  ---------------  -------------------------------------------
   owner   Sand / bronze    Editorial, trusted partner (default)
   guest   Sky / lagoon     Welcoming, hospitality-forward
   general Terra / clay     Warm, conversational
   ========================================================================== */

.haven-cu-formpanel,
.haven-cu-formpanel .el-contact-wrap {
	transition: background 0.45s var(--cu-ease), border-color 0.45s var(--cu-ease);
}

/* Default (also covers explicit data-inquiry-type="owner"). */
.haven-cu-formpanel,
.haven-cu-formpanel[data-inquiry-type="owner"],
.haven-cu-formpanel .el-contact-wrap[data-inquiry-type="owner"] {
	--cu-accent:        var(--cu-sand, #c4a078);
	--cu-accent-strong: #8b6f4a;
	--cu-accent-wash:   rgba(196, 160, 120, 0.10);
	--cu-accent-tint:   #f4ecde;
	--cu-accent-ring:   rgba(196, 160, 120, 0.18);
}

/* Guest = coastal sage. */
.haven-cu-formpanel[data-inquiry-type="guest"],
.haven-cu-formpanel .el-contact-wrap[data-inquiry-type="guest"] {
	--cu-accent:        var(--cu-sky, #6B8C7A);
	--cu-accent-strong: #4E6B5A;
	--cu-accent-wash:   rgba(107, 140, 122, 0.10);
	--cu-accent-tint:   #EEF3EE;
	--cu-accent-ring:   rgba(107, 140, 122, 0.20);
}

/* General = terra / clay. */
.haven-cu-formpanel[data-inquiry-type="general"],
.haven-cu-formpanel .el-contact-wrap[data-inquiry-type="general"] {
	--cu-accent:        var(--cu-terra, #b5614a);
	--cu-accent-strong: #8c4736;
	--cu-accent-wash:   rgba(181, 97, 74, 0.10);
	--cu-accent-tint:   #f6ebe6;
	--cu-accent-ring:   rgba(181, 97, 74, 0.18);
}

/* Soften the panel background to the active wash so the eye registers the
   shift before reading any copy. The base panel keeps its linen ground; the
   wash sits on top as a 100% subtle wrapper tint. */
.haven-cu-formpanel[data-inquiry-type] .el-contact-wrap {
	background: linear-gradient(180deg, var(--cu-accent-wash) 0%, transparent 220px) !important;
}

/* Eyebrow + the gold dot above the form heading pick up the accent. */
.haven-cu-formpanel[data-inquiry-type] .el-contact-intro-eyebrow {
	color: var(--cu-accent-strong) !important;
}
.haven-cu-formpanel[data-inquiry-type] .el-contact-intro-eyebrow::before {
	background: var(--cu-accent) !important;
}

/* Segmented control: active tab matches the chosen desk. The hover state of
   inactive tabs uses the same accent so the user always sees a single hue. */
.haven-cu-formpanel[data-inquiry-type] .el-type-tabs {
	border-color: var(--cu-accent) !important;
}
.haven-cu-formpanel[data-inquiry-type] .el-type-tab.active {
	background: var(--cu-accent) !important;
	color: #fff !important;
}
.haven-cu-formpanel[data-inquiry-type] .el-type-tab:hover:not(.active) {
	color: var(--cu-accent-strong) !important;
	background: var(--cu-accent-tint) !important;
}

/* Inputs: focus ring picks up the accent so each desk has its own focus tone. */
.haven-cu-formpanel[data-inquiry-type] .el-contact-form input:focus,
.haven-cu-formpanel[data-inquiry-type] .el-contact-form select:focus,
.haven-cu-formpanel[data-inquiry-type] .el-contact-form textarea:focus {
	border-color: var(--cu-accent) !important;
	box-shadow: 0 0 0 3px var(--cu-accent-ring) !important;
}

/* Required-marker asterisks. */
.haven-cu-formpanel[data-inquiry-type] .el-contact-form label span[style*="b5614a"] {
	color: var(--cu-accent-strong) !important;
}

/* Consent block: the left bar + the strong wordmark inside both follow the
   active desk so the consent paragraph reads as part of the same statement. */
.haven-cu-formpanel[data-inquiry-type] .el-contact-consent {
	border-left-color: var(--cu-accent) !important;
	background: var(--cu-accent-tint) !important;
}
.haven-cu-formpanel[data-inquiry-type] .el-contact-consent-copy strong {
	color: var(--cu-accent-strong) !important;
}

/* Submit button switches to the accent. The hover state stays the dark earth
   so the user has a clear interaction signal. */
.haven-cu-formpanel[data-inquiry-type="guest"] .el-contact-form button[type="submit"],
.haven-cu-formpanel[data-inquiry-type="general"] .el-contact-form button[type="submit"] {
	background: var(--cu-accent) !important;
	border-color: var(--cu-accent) !important;
	color: #fff !important;
}
.haven-cu-formpanel[data-inquiry-type="guest"] .el-contact-form button[type="submit"]:hover,
.haven-cu-formpanel[data-inquiry-type="general"] .el-contact-form button[type="submit"]:hover {
	background: var(--cu-earth) !important;
	border-color: var(--cu-earth) !important;
}

/* Direct-line links beneath the form follow the accent as a final flourish. */
.haven-cu-formpanel[data-inquiry-type] .el-contact-direct {
	border-top-color: var(--cu-accent) !important;
}
.haven-cu-formpanel[data-inquiry-type] .el-contact-direct-link:hover {
	color: var(--cu-accent-strong) !important;
	border-color: var(--cu-accent) !important;
}

/* Hero ribbon: the dot beside "Write to us" mirrors the active desk so the
   visual link from the top of the page to the form is intentional. */
.haven-cu-page .haven-cu-hero__ribbon[data-active-desk="guest"] .haven-cu-hero__ribbon-dot {
	background: var(--cu-sky, #6B8C7A) !important;
}
.haven-cu-page .haven-cu-hero__ribbon[data-active-desk="general"] .haven-cu-hero__ribbon-dot {
	background: var(--cu-terra, #b5614a) !important;
}

/* Honor reduced-motion: kill the panel transition for users who opt out. */
@media (prefers-reduced-motion: reduce) {
	.haven-cu-formpanel,
	.haven-cu-formpanel .el-contact-wrap {
		transition: none !important;
	}
}


/* ==========================================================================
   7. CTA  ·  image-bg with quote + offset light card
   ========================================================================== */

.haven-cu-cta {
	position: relative;
	color: var(--cu-linen);
	overflow: hidden;
	min-height: 600px;
	display: flex;
	align-items: center;
}
.haven-cu-cta__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.haven-cu-cta__bg img,
.haven-cu-cta__bg picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 50%;
}
.haven-cu-cta__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(30, 26, 20, 0.15) 0%,
		rgba(30, 26, 20, 0.55) 50%,
		rgba(30, 26, 20, 0.85) 100%);
}

.haven-cu-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin: 0 auto;
	width: 100%;
	padding: 120px 32px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

/* Pull quote on the left. Reset every blockquote default that the parent theme
   or core may have applied (background, border, padding, quotes) so the quote
   sits cleanly on the dark image. */
.haven-cu-page .haven-cu-cta__quote,
.haven-cu-page blockquote.haven-cu-cta__quote {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	quotes: none;
	max-width: 48ch;
	margin: 0;
	padding: 0;
	font-family: var(--cu-display);
	font-style: italic;
	font-weight: 400;
}
.haven-cu-page .haven-cu-cta__quote::before,
.haven-cu-page .haven-cu-cta__quote::after { content: none; }

.haven-cu-cta__quote p {
	font-family: var(--cu-display);
	font-style: italic;
	font-size: clamp(1.4rem, 2.4vw, 2.1rem);
	line-height: 1.36;
	color: var(--cu-linen);
	margin: 0 0 22px;
}
.haven-cu-cta__quote cite {
	display: block;
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--cu-sand);
	font-weight: 600;
	font-family: var(--cu-body);
}
.haven-cu-cta__quote cite::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 1px;
	background: var(--cu-sand);
	vertical-align: middle;
	margin-right: 10px;
	transform: translateY(-2px);
}

.haven-cu-cta__card {
	background: var(--cu-linen);
	color: var(--cu-earth);
	padding: 54px 48px;
	border: 1px solid var(--cu-rule);
	position: relative;
	box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.55);
}
.haven-cu-cta__card::before {
	content: "";
	position: absolute;
	left: -1px;
	right: -1px;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--cu-sand), var(--cu-terra), var(--cu-sand));
}
.haven-cu-cta__card-eyebrow {
	font-family: var(--cu-body);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--cu-sand);
	font-weight: 600;
	margin: 0 0 16px;
}
.haven-cu-cta__card h2 {
	font-family: var(--cu-display);
	font-weight: 500;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	line-height: 1.06;
	margin: 0 0 16px;
	letter-spacing: -0.01em;
	color: var(--cu-earth);
}
.haven-cu-cta__card h2 em { font-style: italic; color: var(--cu-terra); }
.haven-cu-cta__card p {
	margin: 0 0 24px;
	color: var(--cu-ink-86);
	line-height: 1.7;
	font-size: 1rem;
}
.haven-cu-cta__row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}
.haven-cu-cta__row .haven-cu-btn {
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
	padding-left: 14px;
	padding-right: 14px;
	white-space: nowrap;
}
.haven-cu-cta__concierge {
	margin: 24px 0 0;
	font-family: var(--cu-display);
	font-style: italic;
	font-size: 1.02rem;
	color: var(--cu-ink-72);
}
.haven-cu-cta__concierge a {
	display: inline-block;
	font-family: var(--cu-body);
	font-style: normal;
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--cu-earth);
	border-bottom: 1px solid var(--cu-sand);
	padding-bottom: 1px;
	margin-left: 6px;
	transition: color 0.3s var(--cu-ease), border-color 0.3s var(--cu-ease);
}
.haven-cu-cta__concierge a:hover,
.haven-cu-cta__concierge a:focus-visible {
	color: var(--cu-terra);
	border-color: var(--cu-terra);
}


/* ==========================================================================
   8. Reveal animation (gently surfaces sections on first paint)
   ========================================================================== */

.haven-cu-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s var(--cu-ease), transform 0.7s var(--cu-ease);
}
.haven-cu-reveal.is-visible {
	opacity: 1;
	transform: none;
}


/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
	.haven-cu-hero { grid-template-columns: 1fr; min-height: auto; }
	.haven-cu-hero__img { min-height: 380px; }
	.haven-cu-hero__letter { padding: 64px 32px; }
	.haven-cu-hero__letter::before,
	.haven-cu-hero__letter::after { display: none; }

	.haven-cu-reach__grid { grid-template-columns: 1fr; gap: 14px; }
	.haven-cu-write__inner { grid-template-columns: 1fr; gap: 48px; }
	.haven-cu-write__rail { position: static; }

	.haven-cu-cta__inner { grid-template-columns: 1fr; gap: 36px; }

	.haven-cu-earth__sigs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.haven-cu-earth,
	.haven-cu-reach,
	.haven-cu-write,
	.haven-cu-cta__inner { padding: 70px 22px; }

	.haven-cu-hero__line { grid-template-columns: 1fr; gap: 4px; }
	.haven-cu-hero__line dt { font-size: 11px; }

	.haven-cu-formpanel .el-row-2,
	.haven-cu-formpanel .el-contact-form .el-row-2 { grid-template-columns: 1fr !important; }

	.haven-cu-cta__card { padding: 36px 28px; }
	.haven-cu-cta__row { flex-direction: column; }
	.haven-cu-cta__row .haven-cu-btn { flex: 1 1 100%; }
}


/* ==========================================================================
   10. Reduced motion / print
   ========================================================================== */

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

@media print {
	.haven-cu-hero,
	.haven-cu-earth,
	.haven-cu-cta { background: #fff !important; color: #000 !important; }
	.haven-cu-hero__img,
	.haven-cu-cta__bg { display: none; }
	.haven-cu-hero__title em,
	.haven-cu-earth__title em,
	.haven-cu-cta__card h2 em { color: #000; }
}