/* ==========================================================================
   Ara Retreat — brand styles for the Elementor home page
   Classes prefixed .ara- are set on Elementor containers/widgets
   (Advanced → CSS Classes), so content stays editable in Elementor.
   ========================================================================== */

/*
 * Brand tokens. Colours and font families come from Elementor → Site Settings
 * (Global Colors / Global Fonts), so they can be changed there without code.
 * The values after the comma are fallbacks if a global is ever deleted.
 * @font-face rules are generated from inc/fonts.php.
 */
body {
	--ara-green: var(--e-global-color-primary, #28320f);
	--ara-gold: var(--e-global-color-secondary, #cfa676);
	--ara-body: var(--e-global-color-text, #5b4b45);
	--ara-olive: var(--e-global-color-accent, #4b5a1f);
	--ara-cream: var(--e-global-color-aracream, #fcf8ee);
	--ara-card: var(--e-global-color-aracard, #fbf5e9);
	--ara-sage: var(--e-global-color-arasage, #ecebe0);
	--ara-brown: var(--e-global-color-arabrown, #3a1d1a);
	--ara-maroon: var(--e-global-color-aramaroon, #8a2f2a);
	--ara-line: var(--e-global-color-araline, #e3dac8);
	--ara-display: var(--e-global-typography-primary-font-family, "Fraunces"), "Times New Roman", serif;
	--ara-sans: var(--e-global-typography-text-font-family, "Atlas Grotesk"), "Helvetica Neue", Arial, sans-serif;
	--ara-accent: var(--e-global-typography-secondary-font-family, "Fraunces"), Georgia, serif;
	--ara-alt: var(--e-global-typography-accent-font-family, "Fraunces"), Georgia, serif;
	/* Fraunces' SOFT axis rounds the letters where the design used Canela Round. */
	--ara-soft: "SOFT" 100, "WONK" 0;
}
:root { --ara-gutter: max(24px, calc((100% - 1296px) / 2)); }

body.ara-site {
	background: var(--ara-cream);
	color: var(--ara-body);
	font-family: var(--ara-sans);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; }
/* Atlas Grotesk is installed in 300/400/500 only; keep emphasis on Medium instead of a faked bold. */
body.ara-site :where(strong, b) { font-weight: 500; }

/* ---------- Reset Elementor container defaults inside Ara sections ---------- */
.e-con.ara-s,
.ara-s :where(.e-con) {
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
	--widgets-spacing: 0px;
	--widgets-spacing-row: 0px;
	--widgets-spacing-column: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}
.e-con.ara-s {
	--padding-left: var(--ara-gutter);
	--padding-right: var(--ara-gutter);
	scroll-margin-top: 20px;
}
.e-con.ara-s .elementor-widget { width: 100%; }
.e-con.ara-s p:last-child { margin-bottom: 0; }

/* Elementor zeroes widget margins inside containers (.e-con .elementor-widget.elementor-widget);
   widgets opt back in by setting --ara-mb. */
.e-con.ara-s .elementor-widget.elementor-widget { margin-block-end: var(--ara-mb, 0px); }

/* ---------- Typography helpers ---------- */
.e-con.ara-s .elementor-heading-title { font-weight: 400; }
.ara-gold { color: var(--ara-gold); }

.ara-eyebrow .elementor-heading-title {
	font-family: var(--ara-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ara-brown);
}
.ara-eyebrow { --ara-mb: 22px; }

.ara-h2 .elementor-heading-title {
	font-family: var(--ara-display);
	font-size: clamp(40px, 4.2vw, 60px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--ara-brown);
}
.ara-text,
.ara-text p {
	font-family: var(--ara-sans);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.75;
	color: var(--ara-body);
}
.ara-text p { margin: 0 0 14px; }
.ara-text strong { font-weight: 400; color: var(--ara-brown); }

/* ---------- Buttons ---------- */
.e-con.ara-s .elementor-button {
	font-family: var(--ara-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 18px 38px;
	line-height: 1;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.e-con.ara-s .ara-btn-olive .elementor-button { background: var(--ara-olive); color: var(--ara-cream); border: 1px solid var(--ara-olive); }
.e-con.ara-s .ara-btn-olive .elementor-button:hover { background: #3b4718; border-color: #3b4718; color: #fff; }
.e-con.ara-s .ara-btn-maroon .elementor-button { background: var(--ara-maroon); color: var(--ara-cream); border: 1px solid var(--ara-maroon); }
.e-con.ara-s .ara-btn-maroon .elementor-button:hover { background: #71231f; border-color: #71231f; color: #fff; }
.e-con.ara-s .ara-btn-outline .elementor-button { background: transparent; color: var(--ara-brown); border: 1px solid var(--ara-brown); padding: 15px 30px; }
.e-con.ara-s .ara-btn-outline .elementor-button:hover { background: var(--ara-brown); color: var(--ara-cream); }
.e-con.ara-s .ara-btn-ghost .elementor-button { background: transparent; color: var(--ara-cream); border: 1px solid rgba(252, 248, 238, .7); padding: 13px 22px; font-size: 10px; letter-spacing: .24em; }
.e-con.ara-s .ara-btn-ghost .elementor-button:hover { background: var(--ara-cream); color: var(--ara-brown); }

.e-con.ara-s .ara-link .elementor-button {
	background: none;
	padding: 0 0 4px;
	border-radius: 0;
	border-bottom: 1px solid currentColor;
	color: var(--ara-green);
	font-size: 11px;
	letter-spacing: .22em;
	font-weight: 400;
}
.e-con.ara-s .ara-link .elementor-button:hover { color: var(--ara-maroon); background: none; }

/* ==========================================================================
   Hero + header
   ========================================================================== */
.e-con.ara-hero {
	--min-height: 100vh;
	min-height: max(720px, min(100vh, 960px));
	--justify-content: space-between;
	--padding-top: 34px;
	--padding-bottom: 56px;
	background-position: center center;
	background-size: cover;
	color: var(--ara-cream);
	isolation: isolate;
}
.e-con.ara-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(20, 16, 10, .45) 0%, rgba(20, 16, 10, 0) 22%),
		linear-gradient(90deg, rgba(20, 16, 10, .55) 0%, rgba(20, 16, 10, .15) 55%, rgba(20, 16, 10, 0) 100%),
		linear-gradient(0deg, rgba(20, 16, 10, .5) 0%, rgba(20, 16, 10, 0) 40%);
	pointer-events: none;
}
.e-con.ara-header {
	--flex-direction: row;
	--align-items: center;
	--justify-content: space-between;
	--column-gap: 32px;
	position: relative;
	z-index: 5;
}
.e-con.ara-header .ara-logo { width: auto; }
.e-con.ara-header .ara-logo img { width: 64px; height: auto; display: block; }
.e-con.ara-header .ara-nav { width: auto; }
.ara-nav ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.ara-nav a {
	font-family: var(--ara-sans);
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ara-cream);
	text-decoration: none;
	opacity: .92;
	transition: opacity .2s;
}
.ara-nav a:hover { opacity: 1; color: var(--ara-gold); }
.e-con.ara-header .ara-btn-ghost { width: auto; }
.e-con.ara-nav-right { --flex-direction: row; --align-items: center; --column-gap: 28px; gap: 28px; width: auto; }
.e-con.ara-header .ara-burger { display: none; width: auto; }

.e-con.ara-hero-body {
	--flex-direction: row;
	--align-items: flex-end;
	--justify-content: space-between;
	--column-gap: 40px;
	position: relative;
	z-index: 2;
}
.e-con.ara-hero-copy { width: auto; max-width: 820px; }
.e-con.ara-hero .ara-eyebrow .elementor-heading-title { color: rgba(252, 248, 238, .85); }
.ara-hero-title .elementor-heading-title {
	font-family: var(--ara-display);
	font-size: clamp(56px, 7.4vw, 108px);
	line-height: .98;
	letter-spacing: -0.015em;
	color: var(--ara-cream);
}
.ara-hero-title { --ara-mb: 26px; }
.ara-hero-sub,
.ara-hero-sub p {
	font-family: var(--ara-sans);
	font-size: 18px;
	line-height: 1.5;
	font-weight: 300;
	color: var(--ara-cream);
	max-width: 460px;
}
.ara-hero-sub strong { font-weight: 500; color: var(--ara-cream); }
.e-con.ara-hero-body .ara-btn-olive { width: auto; }

/* ==========================================================================
   Pillars strip
   ========================================================================== */
.e-con.ara-pillars {
	background: var(--ara-sage);
	--flex-direction: row;
	--column-gap: 48px;
	--padding-top: 50px;
	--padding-bottom: 50px;
	border-bottom: 1px solid var(--ara-line);
}
.e-con.ara-pillar { flex: 1 1 0; }
.e-con.ara-pillar .ara-eyebrow { --ara-mb: 10px; }
.e-con.ara-pillar .ara-eyebrow .elementor-heading-title { font-size: 10px; letter-spacing: .26em; }
.ara-pillar-title .elementor-heading-title { font-family: var(--ara-accent); font-size: 22px; font-weight: 700 !important; letter-spacing: -0.01em; color: var(--ara-brown); line-height: 1.3; }
.ara-pillar-title { --ara-mb: 12px; }
.e-con.ara-pillar .ara-text, .e-con.ara-pillar .ara-text p { font-size: 14px; line-height: 1.6; max-width: 320px; }

/* ==========================================================================
   Our story
   ========================================================================== */
.e-con.ara-story {
	--flex-direction: row;
	--align-items: center;
	--justify-content: space-between;
	--column-gap: 64px;
	--padding-top: 160px;
	--padding-bottom: 150px;
}
.e-con.ara-story-copy { max-width: 520px; flex: 1 1 0; }
.e-con.ara-story-copy .ara-h2 { --ara-mb: 36px; }
.e-con.ara-story-copy .ara-text { --ara-mb: 34px; }
.e-con.ara-story-copy .ara-btn-outline { width: auto; }
.ara-story-media { flex: 0 1 560px; }
.ara-story-media img { width: 100%; aspect-ratio: 560 / 520; object-fit: cover; display: block; }

/* ---------- Marquee ---------- */
.e-con.ara-marquee-wrap { --padding-left: 0px; --padding-right: 0px; overflow: hidden; border-top: 1px solid var(--ara-line); border-bottom: 1px solid var(--ara-line); }
.ara-marquee { overflow: hidden; padding: 16px 0; }
.ara-marquee__track { display: flex; width: max-content; animation: ara-marquee 60s linear infinite; }
.ara-marquee__track span {
	font-family: var(--ara-accent);
	font-size: 22px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ara-green);
	white-space: nowrap;
	padding-right: .45em;
}
@keyframes ara-marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   About (dark green)
   ========================================================================== */
.e-con.ara-about {
	background: var(--ara-green);
	--flex-direction: row;
	--align-items: center;
	--column-gap: 110px;
	--padding-top: 140px;
	--padding-bottom: 140px;
}
.ara-about-media { flex: 0 1 560px; }
.ara-about-media img { width: 100%; aspect-ratio: 560 / 520; object-fit: cover; display: block; }
.e-con.ara-about-copy { flex: 1 1 0; max-width: 520px; }
.e-con.ara-about .ara-eyebrow .elementor-heading-title { color: var(--ara-gold); }
.e-con.ara-about .ara-h2 .elementor-heading-title { color: var(--ara-cream); font-size: clamp(38px, 3.6vw, 52px); }
.e-con.ara-about .ara-h2 { --ara-mb: 48px; }
.ara-rule { width: 64px !important; --ara-mb: 44px; }
.ara-rule .elementor-divider-separator { border-top: 1px solid rgba(207, 166, 118, .6) !important; width: 64px !important; }
.ara-rule .elementor-divider { padding: 0 !important; }
.e-con.ara-about .ara-text, .e-con.ara-about .ara-text p { color: rgba(252, 248, 238, .88); font-size: 17px; line-height: 1.7; }
.e-con.ara-about .ara-text p { margin-bottom: 20px; }

/* ==========================================================================
   A softer expression
   ========================================================================== */
.e-con.ara-softer { --align-items: center; text-align: center; --padding-top: 130px; --padding-bottom: 60px; }
.e-con.ara-softer .ara-eyebrow .elementor-heading-title { font-size: 11px; }
.e-con.ara-softer .ara-h2 .elementor-heading-title { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.2; }
.e-con.ara-softer .ara-h2 { --ara-mb: 22px; max-width: 900px; }
.e-con.ara-softer .ara-text, .e-con.ara-softer .ara-text p { font-size: 15px; }

/* ==========================================================================
   The land
   ========================================================================== */
.e-con.ara-land { --padding-top: 90px; --padding-bottom: 140px; }
.e-con.ara-sec-head {
	--flex-direction: row;
	--align-items: flex-end;
	--justify-content: space-between;
	--column-gap: 48px;
	margin-bottom: 64px;
}
.e-con.ara-sec-head > .e-con:first-child { width: auto; flex: 1 1 auto; }
.e-con.ara-sec-head .ara-aside { max-width: 400px; width: auto; flex: 0 1 400px; }
.e-con.ara-sec-head .ara-aside, .e-con.ara-sec-head .ara-aside p { font-size: 16px; line-height: 1.6; }
.e-con.ara-cards3 { --flex-direction: row; --column-gap: 26px; }
.e-con.ara-land-card {
	flex-wrap: nowrap;
	flex: 1 1 0;
	aspect-ratio: 410 / 480;
	--justify-content: flex-end;
	--padding-left: 30px;
	--padding-right: 30px;
	--padding-bottom: 36px;
	background-size: cover;
	background-position: center;
	isolation: isolate;
	overflow: hidden;
}
.e-con.ara-land-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(20, 16, 10, .7) 0%, rgba(20, 16, 10, 0) 45%);
}
.e-con.ara-s .ara-land-card .ara-card-title .elementor-heading-title { font-family: var(--ara-alt); font-variation-settings: var(--ara-soft); font-size: 30px; font-weight: 400; letter-spacing: -0.01em; color: #fff; margin-bottom: 6px; }
.e-con.ara-land-card .ara-text, .e-con.ara-land-card .ara-text p { font-size: 14px; color: rgba(255, 255, 255, .88); line-height: 1.5; }

/* ==========================================================================
   Six ways (offerings)
   ========================================================================== */
.e-con.ara-six { --padding-top: 30px; --padding-bottom: 140px; --padding-left: max(24px, calc((100% - 1176px) / 2)); --padding-right: max(24px, calc((100% - 1176px) / 2)); }
.e-con.ara-six .ara-h2 .elementor-heading-title { font-size: clamp(40px, 4.4vw, 64px); }
.e-con.ara-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px 26px;
}
.e-con.ara-offer {
	background: var(--ara-card);
	border: 1px solid var(--ara-line);
	--padding-bottom: 38px;
}
.e-con.ara-offer .elementor-widget-image { --ara-mb: 30px; }
.e-con.ara-offer img { width: 100%; aspect-ratio: 376 / 276; object-fit: cover; display: block; }
.e-con.ara-offer > .elementor-widget:not(.elementor-widget-image) { padding-left: 28px; padding-right: 28px; }
.e-con.ara-offer .ara-eyebrow { --ara-mb: 12px; }
.e-con.ara-offer .ara-eyebrow .elementor-heading-title { font-size: 10.5px; letter-spacing: .24em; }
.e-con.ara-offer .ara-card-title .elementor-heading-title { font-family: var(--ara-display); font-size: 36px; line-height: 1.1; color: var(--ara-brown); }
.e-con.ara-offer .ara-card-title { --ara-mb: 14px; }
.e-con.ara-offer .ara-text, .e-con.ara-offer .ara-text p { font-size: 15px; line-height: 1.6; }
.e-con.ara-offer .ara-text { --ara-mb: 34px; flex-grow: 1; }
.e-con.ara-offer .ara-link { margin-top: auto; }

/* ==========================================================================
   Gallery + testimonial
   ========================================================================== */
.e-con.ara-gallery { --flex-direction: row; --align-items: stretch; --column-gap: 26px; --padding-top: 40px; }
.e-con.ara-gallery > .elementor-widget { flex: 0 0 auto; }
.e-con.ara-gallery > .elementor-widget:nth-child(1), .e-con.ara-gallery > .elementor-widget:nth-child(3) { width: 28.5%; }
.e-con.ara-gallery > .elementor-widget:nth-child(2) { width: 38%; flex: 1 1 auto; }
.e-con.ara-gallery .elementor-widget-container, .e-con.ara-gallery .elementor-image { height: 100%; }
.e-con.ara-gallery img { width: 100%; height: 100%; aspect-ratio: 370 / 545; object-fit: cover; display: block; }
.e-con.ara-gallery > .elementor-widget:nth-child(2) img { aspect-ratio: auto; }

.e-con.ara-quote { --align-items: center; text-align: center; --padding-top: 56px; --padding-bottom: 80px; }
.e-con.ara-quote .ara-mark img { width: 30px; height: auto; margin: 0 auto 26px; display: block; }
.e-con.ara-s .ara-quote-text .elementor-heading-title {
	font-family: var(--ara-sans);
	font-weight: 300;
	font-size: clamp(26px, 2.8vw, 40px);
	line-height: 1.42;
	color: var(--ara-brown);
	max-width: 610px;
	margin: 0 auto;
}
.ara-quote-text { --ara-mb: 30px; }
.e-con.ara-quote .ara-eyebrow .elementor-heading-title { color: var(--ara-maroon); font-size: 10.5px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.e-con.ara-faq {
	background: var(--ara-sage);
	--flex-direction: row;
	--column-gap: 80px;
	--padding-top: 110px;
	--padding-bottom: 200px;
	--padding-left: max(24px, calc((100% - 1176px) / 2));
	--padding-right: max(24px, calc((100% - 1176px) / 2));
}
.e-con.ara-faq-head { flex: 0 0 340px; }
.e-con.ara-faq-list { flex: 1 1 0; }
.e-con.ara-faq :is(.elementor-toggle-item, .elementor-accordion-item) { border: 0; border-top: 1px solid rgba(58, 29, 26, .2); }
.e-con.ara-faq :is(.elementor-toggle-item, .elementor-accordion-item):last-child { border-bottom: 1px solid rgba(58, 29, 26, .2); }
.e-con.ara-faq :is(.elementor-toggle, .elementor-accordion) .elementor-tab-title {
	border: 0 !important;
	padding: 16px 0 !important;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}
.e-con.ara-faq :is(.elementor-toggle, .elementor-accordion) .elementor-tab-title a,
.e-con.ara-faq :is(.elementor-toggle-title, .elementor-accordion-title) {
	font-family: var(--ara-accent);
	font-weight: 400;
	font-size: 22px;
	color: var(--ara-brown) !important;
}
.e-con.ara-faq :is(.elementor-toggle-icon, .elementor-accordion-icon) { color: var(--ara-olive); font-size: 12px; width: auto !important; }
.e-con.ara-faq :is(.elementor-toggle-icon, .elementor-accordion-icon) svg { fill: var(--ara-olive); width: 12px; height: 12px; }
.e-con.ara-faq :is(.elementor-toggle, .elementor-accordion) .elementor-tab-content {
	border: 0 !important;
	margin-top: -4px;
	padding: 0 0 18px !important;
	font-family: var(--ara-sans);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ara-body);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.e-con.ara-cta {
	--align-items: center;
	--justify-content: center;
	text-align: center;
	min-height: 620px;
	--padding-top: 110px;
	--padding-bottom: 110px;
	background-size: cover;
	background-position: center;
	isolation: isolate;
}
.e-con.ara-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(45, 22, 14, .72); }
.e-con.ara-cta .ara-eyebrow .elementor-heading-title { color: var(--ara-gold); font-size: 10.5px; }
.e-con.ara-cta .ara-h2 .elementor-heading-title { color: var(--ara-cream); font-size: clamp(44px, 5vw, 72px); line-height: 1.05; }
.e-con.ara-cta .ara-h2 { --ara-mb: 26px; }
.e-con.ara-cta .ara-text, .e-con.ara-cta .ara-text p { color: rgba(252, 248, 238, .85); font-size: 16px; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; }
.e-con.ara-cta .ara-text { --ara-mb: 40px; }
.e-con.ara-cta .ara-btn-maroon { width: auto; }

/* ==========================================================================
   Footer
   ========================================================================== */
.e-con.ara-footer { background: var(--ara-green); --align-items: center; text-align: center; --padding-top: 90px; overflow: hidden; color: rgba(252, 248, 238, .75); }
.e-con.ara-footer .ara-logo img { width: 76px; height: auto; margin: 0 auto 26px; display: block; }
.e-con.ara-footer .ara-text, .e-con.ara-footer .ara-text p { color: rgba(252, 248, 238, .8); font-size: 15px; line-height: 1.6; }
.e-con.ara-footer .ara-text { --ara-mb: 26px; }
.e-con.ara-footer .elementor-social-icons-wrapper { display: flex; gap: 12px; justify-content: center; }
.e-con.ara-footer .elementor-social-icon { background: transparent !important; font-size: 13px; padding: 4px; }
.e-con.ara-footer .elementor-social-icon i, .e-con.ara-footer .elementor-social-icon svg { color: var(--ara-cream); fill: var(--ara-cream); }
.e-con.ara-footer .elementor-social-icon:hover { opacity: .7; }
.ara-footer-social { --ara-mb: 36px; }
.ara-footer-divider { width: 300px !important; --ara-mb: 36px; }
.ara-footer-divider .elementor-divider { padding: 0 !important; }
.ara-footer-divider .elementor-divider-separator { border-top: 1px solid rgba(252, 248, 238, .18) !important; }
.e-con.ara-footer-bottom { --flex-direction: row; --justify-content: space-between; --align-items: center; max-width: 1256px; margin-bottom: 26px; }
.e-con.ara-footer-bottom .elementor-widget { width: auto; }
.e-con.ara-footer .ara-footer-bottom .ara-text,
.e-con.ara-footer .ara-footer-bottom .ara-text p,
.e-con.ara-footer .ara-footer-bottom a {
	font-family: var(--ara-sans);
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(252, 248, 238, .6);
	text-decoration: none;
}
.e-con.ara-footer-bottom a { margin: 0 10px; }
.e-con.ara-footer-bottom a:hover { color: var(--ara-cream); }
.ara-footer-giant { width: min(1000px, 78%) !important; --ara-mb: -9%; }
.ara-footer-giant img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   Motion (only when <html> has .ara-motion — see functions.php / ara.js)
   ========================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.ara-motion { scroll-behavior: auto; }

/* "Before" states — set before first paint, animated in by GSAP. */
.ara-motion .ara-hero-title .elementor-heading-title,
.ara-motion .ara-h2 .elementor-heading-title { visibility: hidden; }

.ara-motion .ara-hero .ara-eyebrow,
.ara-motion .ara-hero-sub,
.ara-motion .ara-hero-body .ara-btn-olive,
.ara-motion .ara-header,
.ara-motion .ara-s:not(.ara-hero) .ara-eyebrow,
.ara-motion .ara-s:not(.ara-hero) .ara-text,
.ara-motion .ara-s:not(.ara-hero) .elementor-widget-button,
.ara-motion .ara-rule,
.ara-motion .ara-pillar,
.ara-motion .ara-faq-list,
.ara-motion .ara-footer .elementor-widget {
	opacity: 0;
	visibility: hidden;
	transform: translateY(28px);
}
.ara-motion .ara-cards3 .ara-land-card,
.ara-motion .ara-grid .ara-offer {
	opacity: 0;
	visibility: hidden;
	transform: translateY(70px);
}
.ara-motion .ara-story-media,
.ara-motion .ara-about-media,
.ara-motion .ara-gallery > .elementor-widget,
.ara-motion .ara-offer .elementor-widget-image { clip-path: inset(100% 0 0 0); }

/* Word masks for split headings. */
.ara-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.ara-wi { display: inline-block; will-change: transform; }
.ara-quote-text .ara-wi { display: inline; will-change: opacity; }

/* Background layers lifted out of containers for parallax / zoom. */
.ara-has-bg { overflow: hidden; }
.ara-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	will-change: transform;
	pointer-events: none;
}
.ara-reveal-img { overflow: hidden; }
.ara-reveal-img img { will-change: transform; transform-origin: center; }

/* Hero fades up from darkness when the intro has already been seen. */
.ara-motion .e-con.ara-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #15120c;
	pointer-events: none;
	transition: opacity 1.6s ease;
}
.ara-motion:not(.ara-intro-seen) .e-con.ara-hero::before { transition-duration: .01s; }
.ara-motion .e-con.ara-hero.is-ready::before { opacity: 0; }

/* ---------- Intro screen ---------- */
.ara-intro { display: none; }
.ara-motion:not(.ara-intro-seen) .ara-intro {
	display: grid;
	place-items: center;
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: var(--ara-cream);
	clip-path: inset(0 0 0 0);
}
.ara-intro__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ara-intro__mark { width: 46px; height: auto; }
.ara-intro__logo { width: 150px; height: auto; }

/* ---------- Sticky header ---------- */
.ara-sticky.e-con.ara-s {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	padding: 14px var(--ara-gutter) !important;
	background: rgba(252, 248, 238, .9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--ara-line);
	transform: translateY(-101%);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.ara-sticky.e-con.ara-s.is-visible { transform: none; }
.ara-motion .ara-sticky .ara-header,
.ara-motion .ara-sticky .elementor-widget { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.ara-sticky .ara-header .ara-logo img { width: 54px; }
.ara-sticky .ara-nav a { color: var(--ara-brown); }
.ara-sticky .ara-nav a:hover { color: var(--ara-maroon); }
.e-con.ara-s.ara-sticky .ara-btn-ghost .elementor-button { color: var(--ara-brown); border-color: rgba(58, 29, 26, .45); }
.e-con.ara-s.ara-sticky .ara-btn-ghost .elementor-button:hover { background: var(--ara-olive); border-color: var(--ara-olive); color: var(--ara-cream); }
.ara-sticky .ara-burger button { color: var(--ara-brown); border-color: rgba(58, 29, 26, .45); }

/* ---------- Cursor ---------- */
.ara-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--ara-gold);
	pointer-events: none;
	opacity: 0;
	display: grid;
	place-items: center;
	transition: width .45s cubic-bezier(.2, .7, .2, 1), height .45s cubic-bezier(.2, .7, .2, 1), margin .45s cubic-bezier(.2, .7, .2, 1), background-color .4s, opacity .3s;
}
.ara-cursor.is-on { opacity: 1; }
.ara-cursor.is-link { width: 38px; height: 38px; margin: -19px 0 0 -19px; background: rgba(207, 166, 118, .28); }
.ara-cursor.is-big { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--ara-cream); box-shadow: 0 10px 40px rgba(20, 16, 10, .18); }
.ara-cursor__label {
	font-family: var(--ara-sans);
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ara-brown);
	white-space: nowrap;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .3s, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.ara-cursor.is-big .ara-cursor__label { opacity: 1; transform: none; }

/* ---------- Hover details ---------- */
.e-con.ara-offer { transition: transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .7s cubic-bezier(.2, .7, .2, 1), border-color .5s; }
.e-con.ara-offer:hover { transform: translateY(-8px); box-shadow: 0 24px 50px -24px rgba(40, 30, 15, .35); border-color: #d6c7a8; }
.ara-offer .elementor-widget-image .elementor-widget-container { overflow: hidden; }
.ara-offer .elementor-widget-image .elementor-widget-container,
.ara-gallery .elementor-widget-container,
.ara-story-media .elementor-widget-container,
.ara-about-media .elementor-widget-container { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.e-con.ara-offer:hover .elementor-widget-image .elementor-widget-container,
.ara-gallery > .elementor-widget:hover .elementor-widget-container,
.ara-story-media:hover .elementor-widget-container,
.ara-about-media:hover .elementor-widget-container { transform: scale(1.04); }
.e-con.ara-land-card .ara-bg { transition: filter .8s ease; }
.e-con.ara-land-card:hover .ara-bg { filter: brightness(1.08) saturate(1.08); }

/* Link buttons: underline wipes out and back in. */
.e-con.ara-s .ara-link .elementor-button {
	border-bottom: 0;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
}
.e-con.ara-s .ara-link .elementor-button:hover,
.e-con.ara-offer:hover .ara-link .elementor-button { animation: ara-underline .9s cubic-bezier(.7, 0, .2, 1); color: var(--ara-maroon); }
@keyframes ara-underline {
	0% { background-size: 100% 1px; background-position: 100% 100%; }
	45% { background-size: 0 1px; background-position: 100% 100%; }
	46% { background-size: 0 1px; background-position: 0 100%; }
	100% { background-size: 100% 1px; background-position: 0 100%; }
}

/* Nav links: underline draws in. */
.ara-nav a { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; padding-bottom: 3px; transition: background-size .5s cubic-bezier(.7, 0, .2, 1), color .3s; }
.ara-nav a:hover { background-size: 100% 1px; background-position: 0 100%; }

/* Filled buttons: colour sweeps up from the bottom. */
.e-con.ara-s .ara-btn-olive .elementor-button,
.e-con.ara-s .ara-btn-maroon .elementor-button,
.e-con.ara-s .ara-btn-outline .elementor-button { position: relative; overflow: hidden; isolation: isolate; }
.e-con.ara-s .ara-btn-olive .elementor-button::before,
.e-con.ara-s .ara-btn-maroon .elementor-button::before,
.e-con.ara-s .ara-btn-outline .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ara-cream);
	border-radius: inherit;
	transform: translateY(101%);
	transition: transform .6s cubic-bezier(.7, 0, .2, 1);
}
.e-con.ara-s .ara-btn-outline .elementor-button::before { background: var(--ara-brown); }
.e-con.ara-s .ara-btn-olive .elementor-button:hover,
.e-con.ara-s .ara-btn-maroon .elementor-button:hover { background: transparent; border-color: var(--ara-cream); color: var(--ara-brown); }
.e-con.ara-s .ara-btn-outline .elementor-button:hover { background: transparent; color: var(--ara-cream); }
.e-con.ara-s .ara-btn-olive .elementor-button:hover::before,
.e-con.ara-s .ara-btn-maroon .elementor-button:hover::before,
.e-con.ara-s .ara-btn-outline .elementor-button:hover::before { transform: none; }

/* ---------- Side menu drawer (inc/menu.php, toggled by ara.js) ---------- */
.ara-menu {
	position: fixed;
	inset: 0;
	z-index: 9000;
	visibility: hidden;
	transition: visibility 0s linear .7s;
}
.ara-menu-open .ara-menu { visibility: visible; transition: none; }
html.ara-menu-open, html.ara-menu-open body { overflow: hidden; }
.ara-menu__scrim {
	position: absolute;
	inset: 0;
	background: rgba(20, 16, 10, .55);
	opacity: 0;
	transition: opacity .6s ease;
	cursor: pointer;
}
.ara-menu-open .ara-menu__scrim { opacity: 1; }
.ara-menu__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(360px, 86vw);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 34px 40px 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--ara-cream);
	color: var(--ara-brown);
	transform: translateX(-100%);
	transition: transform .7s cubic-bezier(.7, 0, .2, 1);
}
.ara-menu-open .ara-menu__panel { transform: none; }
.ara-menu__close {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--ara-brown);
	font-family: var(--ara-sans);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* Hello Elementor paints hovered/focused buttons pink (#c36). */
.ara-menu__close:hover, .ara-menu__close:focus, .ara-menu__close:active { background: none; color: var(--ara-maroon); }
.ara-menu__close:focus:not(:focus-visible) { outline: none; }
.ara-menu__close span, .ara-menu__close span::before { content: ""; display: block; width: 12px; height: 1px; background: currentColor; transform: rotate(45deg); }
.ara-menu__close span::before { transform: rotate(90deg); }
.ara-menu__nav { display: flex; flex-direction: column; gap: 26px; }
.ara-menu ul { display: flex; flex-direction: column; gap: 16px; list-style: none; margin: 0; padding: 0; }
.ara-menu ul.ara-menu__sub { gap: 9px; margin-top: -16px; }
.ara-menu a {
	font-family: var(--ara-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ara-brown);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
	padding-bottom: 2px;
	transition: background-size .5s cubic-bezier(.7, 0, .2, 1), color .3s;
}
.ara-menu a:hover, .ara-menu a:focus-visible { color: var(--ara-maroon); background-size: 100% 1px; background-position: 0 100%; }
.ara-menu__label {
	margin: 0;
	font-family: var(--ara-sans);
	font-size: 9px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ara-body);
	opacity: .7;
}
.ara-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.ara-menu__tag {
	margin: 0;
	font-family: var(--ara-display);
	font-size: 26px;
	line-height: 1.15;
	color: var(--ara-brown);
}

/* Links drift in after the panel opens. */
.ara-menu__nav li, .ara-menu__nav .ara-menu__label, .ara-menu__foot {
	opacity: 0;
	transform: translateX(-14px);
	transition: opacity .3s ease, transform .3s ease;
}
.ara-menu-open .ara-menu__nav li,
.ara-menu-open .ara-menu__nav .ara-menu__label,
.ara-menu-open .ara-menu__foot {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease .35s, transform .8s cubic-bezier(.2, .7, .2, 1) .35s;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	/* The marquee is part of the design, so keep it drifting, just slower. */
	.ara-marquee__track { animation-duration: 120s !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.ara-nav ul { gap: 18px; }
	.ara-nav a { font-size: 9.5px; letter-spacing: .16em; }
	.e-con.ara-about { --column-gap: 60px; }
}

@media (max-width: 1024px) {
	.e-con.ara-header .ara-nav { display: none; }
	.e-con.ara-header .ara-burger { display: block; }
	.ara-burger button { background: none; border: 1px solid rgba(252, 248, 238, .7); border-radius: 999px; color: var(--ara-cream); width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
	/* Hello Elementor paints every hovered/focused button pink (#c36); on iPhone a tap leaves :hover stuck. */
	.ara-burger button:hover, .ara-burger button:focus, .ara-burger button:active { background: none; color: var(--ara-cream); }
	.ara-sticky .ara-burger button:hover, .ara-sticky .ara-burger button:focus, .ara-sticky .ara-burger button:active { color: var(--ara-brown); }
	.ara-burger button span, .ara-burger button span::before, .ara-burger button span::after { content: ""; display: block; width: 16px; height: 1px; background: currentColor; position: relative; }
	.ara-burger button span::before { position: absolute; top: -5px; }
	.ara-burger button span::after { position: absolute; top: 5px; }

	.e-con.ara-grid { grid-template-columns: repeat(2, 1fr); }
	.e-con.ara-story, .e-con.ara-about { --column-gap: 48px; }
}

@media (max-width: 767px) {
	.e-con.ara-header .ara-btn-ghost { display: none; }
	.e-con.ara-hero { min-height: 640px; --padding-bottom: 40px; }
	.e-con.ara-hero-body { --flex-direction: column; --align-items: flex-start; --row-gap: 28px; }
	.ara-hero-sub, .ara-hero-sub p { font-size: 16px; }

	.e-con.ara-pillars { --flex-direction: column; --row-gap: 30px; --padding-top: 40px; --padding-bottom: 40px; }
	/* flex-basis 0 inside a column makes Safari treat the height as fixed, and the wrapping column spills sideways. */
	.e-con.ara-pillar, .e-con.ara-story-copy, .e-con.ara-about-copy, .e-con.ara-faq-list { flex: 0 0 auto; --flex-wrap: nowrap; }

	.e-con.ara-story, .e-con.ara-about { --flex-direction: column; --row-gap: 48px; --padding-top: 90px; --padding-bottom: 90px; --align-items: stretch; }
	.ara-story-media, .ara-about-media { flex: 1 1 auto; }
	.ara-about-media { order: 0; }

	.ara-marquee__track span { font-size: 16px; }

	.e-con.ara-softer { --padding-top: 90px; }
	.e-con.ara-land { --padding-top: 60px; --padding-bottom: 90px; }
	.e-con.ara-sec-head { --flex-direction: column; --align-items: flex-start; --row-gap: 20px; margin-bottom: 40px; }
	.e-con.ara-sec-head .ara-aside { flex: 1 1 auto; }
	.e-con.ara-cards3 { --flex-direction: column; --row-gap: 18px; }
	.e-con.ara-land-card { aspect-ratio: 4 / 4.2; flex: 0 0 auto; }

	.e-con.ara-six { --padding-bottom: 90px; }
	.e-con.ara-grid { grid-template-columns: 1fr; gap: 20px; }

	.e-con.ara-gallery { --flex-direction: column; --row-gap: 16px; }
	.e-con.ara-gallery > .elementor-widget:nth-child(n) { width: 100%; }
	.e-con.ara-gallery img, .e-con.ara-gallery > .elementor-widget:nth-child(2) img { aspect-ratio: 4 / 5; height: auto; }

	.e-con.ara-faq { --flex-direction: column; --row-gap: 36px; --padding-top: 80px; --padding-bottom: 100px; }
	.e-con.ara-faq-head { flex: 1 1 auto; }

	.e-con.ara-cta { min-height: 520px; --padding-top: 90px; --padding-bottom: 90px; }

	.e-con.ara-footer-bottom { --flex-direction: column; --row-gap: 16px; }
	.ara-footer-giant { width: 92% !important; }
}