/**
 * Arusa – custom theme design layer
 *
 * Brand palette and base typography.
 * Colors are the exact design tokens pulled from the Figma brand variables.
 *
 * @package Arusa
 */

:root {
	/* Brand palette (exact Figma tokens) */
	--arusa-green-dark: #071a01;   /* GREEN BLACK – deep green / text */
	--arusa-green: #6f7c6c;        /* ESPRESSO BROWN – sage / olive (primary) */
	--arusa-green-light: #9ba998;  /* SOFT IVORY – light sage */
	--arusa-gold: #9a7b45;         /* DUSTY ROSE – gold / bronze (accent) */
	--arusa-tan: #d3ba9b;          /* BLUSH NUDE – tan / beige */
	--arusa-cream: #f4f1ec;        /* CHAMPAGNE BLUSH – cream (background) */
	--arusa-white: #ffffff;
	--arusa-black: #071a01;

	/* UI tokens (calendar / forms) */
	--arusa-stroke: #d5d4df;
	--arusa-active: #45539d;
	--arusa-inactive: #f2f3f7;

	/* Semantic tokens */
	--arusa-bg: var(--arusa-cream);
	--arusa-text: var(--arusa-green-dark);
	--arusa-accent: var(--arusa-gold);
	--arusa-muted: var(--arusa-green);

	/* Typography */
	--arusa-font-base: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--arusa-fs-base: 1.125rem;   /* 18px */
	--arusa-lh-base: 1.7;

	/* Layout */
	--arusa-container: 1200px;
	--arusa-gutter: clamp(1rem, 4vw, 3rem);
	--arusa-radius: 14px;

	/* Visible viewport. 100vh ignores the mobile browser bar; 100dvh
	   does not. JS replaces this with the measured visible height. */
	--arusa-screen: 100vh;
	--arusa-screen: 100dvh;
}

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

html {
	scroll-behavior: smooth;
}
#wpadminbar {
	opacity: .05;
	transition: opacity .3s ease;
}
#wpadminbar:hover {
	opacity: 1;
}
body {
	font-family: var(--arusa-font-base);
	font-size: var(--arusa-fs-base);
	line-height: var(--arusa-lh-base);
	color: var(--arusa-text);
	background-color: var(--arusa-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--arusa-font-base);
	font-weight: 600;
	line-height: 1.2;
	color: var(--arusa-green-dark);
}

a {
	color: var(--arusa-gold);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--arusa-green-dark);
}

/* ------------------------------------------------------------------ *
 * Layout helpers
 * ------------------------------------------------------------------ */

.arusa-container {
	width: 100%;
	max-width: var(--arusa-container);
	margin-inline: auto;
	padding-inline: var(--arusa-gutter);
}

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */

.arusa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9rem 2.5rem;
	border-radius: 999px;
	background-color: var(--arusa-green);
	color: var(--arusa-white);
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.arusa-btn:hover,
.arusa-btn:focus {
	background-color: var(--arusa-green-dark);
	color: var(--arusa-white);
}

/* ------------------------------------------------------------------ *
 * Sections (shared)
 * ------------------------------------------------------------------ */

.section {
	padding-block: clamp(3.5rem, 8vw, 7rem);
}

.section--about { background: var(--arusa-cream); }
.section--complex { background: var(--arusa-white); padding-block-end: 20vh; padding-block-start: 12.5vh; }
/* Features share the background of the complex section above, and sit
   right under it (no top padding), with a larger gap before the icons. */
.section--features { background: var(--arusa-white); padding-block-start: 1px; }
.section--pricing { display: none; } /* prices hidden for now */
.section--booking { background: var(--arusa-cream); }
.section--faq { background: var(--arusa-white); }
.section--contact { background: var(--arusa-white); }

.section__title {
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	font-weight: 700;
	margin-bottom: 1rem;
}

.section__title--center { text-align: center; }

.section__subtitle {
	text-align: center;
	max-width: 55ch;
	margin: 0 auto 2.5rem;
	color: #4a553f;
}

/* ------------------------------------------------------------------ *
 * Header / navigation (fixed, transparent over hero)
 * ------------------------------------------------------------------ */

.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	padding-block: 1rem;
	background: transparent;
	transition: padding .3s ease;
}

/* The visible bar is constrained to the content container width. */
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: .5rem;
	border-radius: 100px;
	transition: background-color .3s ease, box-shadow .3s ease;
}

.site-logo { display: inline-flex; align-items: center; line-height: 0; }
/* Set color on the SVG itself so currentColor is used, bypassing a:visited on the link. */
.site-logo svg,
.site-logo img { height: 72px; width: auto; display: block; color: var(--arusa-white); transition: height .3s ease, color .3s ease; }
.site-logo svg path { fill: currentColor; }
.site-header.is-scrolled .site-logo svg,
.site-header.is-scrolled .site-logo img { height: 48px; }
.site-header.is-scrolled .site-logo svg,
.site-header.is-scrolled .site-logo img,
.site-header[data-transparent="false"] .site-logo svg,
.site-header[data-transparent="false"] .site-logo img { color: var(--arusa-green-dark); }

.nav-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.35rem;
	margin: 0;
	padding: 0;
}

.nav-menu a {
	color: var(--arusa-white);
	font-weight: 500;
	font-size: 1.05rem;
	position: relative;
	padding-block: .25rem;
	white-space: nowrap;
}

.nav-menu a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transition: transform .25s ease;
}

.nav-menu a:hover::after,
.nav-menu a.is-active::after { transform: scaleX(1); }

/* Booking is already a button, so it does not get the nav underline. */
.nav-menu a.nav-menu__cta {
	background: var(--arusa-green);
	color: var(--arusa-white);
	border-radius: 999px;
	padding: .5rem 1.05rem;
	font-weight: 600;
	border: .5px solid var(--arusa-white);
}
.nav-menu a.nav-menu__cta::after,
.nav-menu a.nav-menu__cta:hover::after,
.nav-menu a.nav-menu__cta.is-active::after { content: none; }
.site-header.is-scrolled .nav-menu a.nav-menu__cta,
.site-header[data-transparent="false"] .nav-menu a.nav-menu__cta {
	background: var(--arusa-green-dark);
	color: var(--arusa-white);
}

.nav-menu__tools {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-inline-start: .35rem;
}
.nav-menu__tools a { display: inline-flex; line-height: 0; padding: 0; }
.nav-menu__tools a::after { content: none; }
.nav-menu__tools svg {
	width: 24px;
	height: 24px;
	display: block;
	color: var(--arusa-white);
}
.site-header.is-scrolled .nav-menu__tools svg,
.site-header[data-transparent="false"] .nav-menu__tools svg { color: var(--arusa-green-dark); }

/* Scrolled state */
.site-header.is-scrolled { padding-block: .5rem; }
.site-header.is-scrolled .header-inner {
	background: rgba(255, 255, 255, .8);
    box-shadow: 0 6px 24px rgba(7, 26, 1, .08);
    padding-inline: 20px;
    backdrop-filter: blur(10px);
}
.site-header.is-scrolled .nav-menu a { color: var(--arusa-green-dark); }

/* Non-transparent header (inner pages) */
.site-header[data-transparent="false"] { position: sticky; }
.site-header[data-transparent="false"] .header-inner {
	background: var(--arusa-cream);
	box-shadow: 0 6px 24px rgba(7, 26, 1, .08);
}
.site-header[data-transparent="false"] .nav-menu a { color: var(--arusa-green-dark); }

/* Hamburger */
.nav-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	position: absolute;
	inset-inline: 10px;
	height: 2px;
	background: var(--arusa-white);
	transition: transform .3s ease, opacity .3s ease, background-color .3s ease;
}
.nav-toggle__bar { inset-block-start: 21px; }
/* The shared inset would shrink these inside the bar until a rotation looks like a dot. */
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	inset-inline: 0;
	width: 100%;
	transform-origin: center;
}
.nav-toggle__bar::before { inset-block-start: -7px; }
.nav-toggle__bar::after { inset-block-start: 7px; }

/* Open state: the three lines fold into an X. On the hero the icon is
   white, so it turns dark once it sits on the cream drawer. */
.nav-open .nav-toggle__bar,
.site-header.is-scrolled.nav-open .nav-toggle__bar,
.site-header[data-transparent="false"].nav-open .nav-toggle__bar {
	background: transparent;
}
.nav-open .nav-toggle__bar::before,
.nav-open .nav-toggle__bar::after {
	inset-block-start: 0;
	background: var(--arusa-green-dark);
}
.nav-open .nav-toggle__bar::before { transform: rotate(45deg); }
.nav-open .nav-toggle__bar::after { transform: rotate(-45deg); }

.nav-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.site-header.is-scrolled .nav-toggle__bar,
.site-header.is-scrolled .nav-toggle__bar::before,
.site-header.is-scrolled .nav-toggle__bar::after,
.site-header[data-transparent="false"] .nav-toggle__bar,
.site-header[data-transparent="false"] .nav-toggle__bar::before,
.site-header[data-transparent="false"] .nav-toggle__bar::after {
	background: var(--arusa-green-dark);
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

.hero {
	position: relative;
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	color: var(--arusa-white);
}
.hero__video {
	position: absolute;
	inset: 0;
	width: 102%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	right: -1%;
}
.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(7,26,1,.45) 0%, rgba(7,26,1,.25) 45%, rgba(7,26,1,.55) 100%);
}
.hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-inline: clamp(1rem, 4vw, 3.5rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3rem);
}

/* One horizontal row: [text] —rule— [logo + tagline] —rule— [text] */
.hero__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(.75rem, 2vw, 2rem);
	width: 100%;
	margin: 0;
	font-weight: 500;
}

.hero__line {
	flex: 0 0 auto;
	white-space: nowrap;
	color: var(--arusa-white);
	font-size: 3.25vw;
	font-weight: 500;
	text-shadow: 0 2px 18px rgba(7, 26, 1, .4);
}

/* Dynamic divider: fills the space left after logo + texts + gaps. */
.hero__rule {
	flex: 1 1 0;
	min-width: 24px;
	height: 1px;
	background: rgba(255, 255, 255, .75);
}

.hero__brand {
	flex: 0 0 30vw;
	width: 30vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .9rem;
}
.hero__logo { display: block; width: 100%; color: var(--arusa-white); line-height: 0; }
.hero__logo svg,
.hero__logo img { display: block; width: 100%; height: auto; }

.hero__tagline {
	font-size: clamp(.7rem, 1vw, .95rem);
	letter-spacing: .4em;
	text-transform: uppercase;
	direction: ltr;
	color: rgba(255, 255, 255, .9);
}
.hero__cta,
.about__cta {
	position: absolute;
	z-index: 2;
	inset-block-end: clamp(1.75rem, 4vh, 3.5rem);
	inset-inline: 0;
	margin-inline: auto;
	width: fit-content;
}

/* ------------------------------------------------------------------ *
 * About
 * ------------------------------------------------------------------ */

.section--about {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.section--about__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--about-bg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	filter: grayscale(1);
}
/* Light wash over the B&W photo so the text stays readable. */
.section--about__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(245, 245, 245, .75);
}
.section--about__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-inline: 7%; /* side margins instead of a fixed-width wrapper */
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lead {
	font-size: 3vw;
	line-height: 1.2;
	margin-bottom: 1.5rem;
}
/* Match the paragraph above it (same size and color). */
.lead--muted { color: inherit; }
.section--about__divider {
	display: block;
	width: 1px;
	height: 90px;
	background: var(--arusa-gold);
	margin-block: 1.5rem 2rem;
}

/* ------------------------------------------------------------------ *
 * Hero → About circular clip-path reveal (scroll-driven).
 * Progressive enhancement: only engages once JS adds .reveal-ready.
 * ------------------------------------------------------------------ */
.reveal-stage.reveal-ready {
	position: relative;
	/* One screen of the hero, one screen for the circle to close, then 5%
	   of the visible height so a fast scroller still pauses on About. */
	height: calc(var(--arusa-screen) * 2.35);
}
.reveal-ready .reveal__hero {
	position: sticky;
	top: 0;
	height: var(--arusa-screen);
	min-height: var(--arusa-screen);
	z-index: 2;
	clip-path: circle(150% at 50% 50%);
	will-change: clip-path;
}
.reveal-ready .reveal__about {
	position: sticky;
	top: 0;
	height: var(--arusa-screen);
	min-height: var(--arusa-screen);
	margin-top: calc(var(--arusa-screen) * -1); /* sits directly behind the hero */
	z-index: 1;
}

/* ------------------------------------------------------------------ *
 * Complex / venue
 * ------------------------------------------------------------------ */

.section--complex { overflow: hidden; }
.complex {
	position: relative;
	direction: ltr; /* layout only; the card text stays RTL */
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 4%;
	/* The container tracks the card's height so the images are offset
	   relative to the card edges (not the section). */
	display: flex;
	justify-content: center;
	align-items: center;
}
/* Centered text card with a faint monogram behind the text. */
.complex__card {
	position: relative;
	z-index: 2;
	direction: rtl;
	width: 46%;
	background: var(--arusa-cream);
	border-radius: var(--arusa-radius);
	padding: clamp(2rem, 4.5vw, 4rem) clamp(1.75rem, 4.5vw, 4.5rem);
	text-align: center;
	overflow: hidden;
}
.complex__mono {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 72%;
	transform: translate(-50%, -50%);
	z-index: 0;
	color: rgba(42, 61, 33, .05);
	pointer-events: none;
}
.complex__mono svg { width: 100%; height: auto; display: block; }
.complex__card .section__title,
.complex__lead,
.complex__body { position: relative; z-index: 1; }
.complex__card .section__title { margin-bottom: 1.25rem; }
.complex__lead { font-size: clamp(1rem, 1.3vw, 1.25rem); font-weight: 600; margin-bottom: 1.25rem; }
.complex__body { font-size: clamp(1rem, 1.05vw, 1.05rem); line-height: 1.9; }
/* Flanking images: negative offsets vs the card – sides, one above, one below. */
.complex__img {
	position: absolute;
	z-index: 3;
	object-fit: cover;
	border-radius: var(--arusa-radius);
	box-shadow: 0 24px 60px rgba(7, 26, 1, .18);
}
.complex__img--right {
	right: 4%;
	bottom: 6vh;
	width: 28%;
	aspect-ratio: 3 / 4;
}
.complex__img--left {
	left: 4%;
	bottom: -6vh;
	width: 28%;
	aspect-ratio: 4 / 3;
	z-index:2;
}

/* ------------------------------------------------------------------ *
 * Features
 * ------------------------------------------------------------------ */

.section--features .section__title { margin-bottom: clamp(3rem, 6vw, 5rem); }
.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
}
.feature-card {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
}
.feature-card__icon {
	width: 96px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--arusa-green);
}
.feature-card__icon .lottie-icon,
.feature-card__icon svg,
.feature-card__icon img { width: 96px; height: 96px; }
.feature-card__title { font-size: 1.25rem; font-weight: 600; }
.feature-card__text { font-size: 1rem; line-height: 1.6; color: #4a553f; }

/* ------------------------------------------------------------------ *
 * Gallery reel (between the room features and booking)
 * Fixed 30vh height. Each photo keeps its own aspect ratio, so as
 * many as fit are visible. Gap between photos is 30px.
 * ------------------------------------------------------------------ */

.reel {
	--reel-gap: 30px;
	position: relative;
	z-index: 2;
	height: 30vh;
	/* Clip the sideways track, but let a hovered photo grow out of the strip. */
	overflow-x: clip;
	overflow-y: visible;
	background: var(--arusa-white);
	direction: ltr;
}

.reel__viewport,
.reel__track {
	height: 100%;
}

.reel__viewport {
	box-sizing: border-box;
	padding-block: 12px;
	touch-action: pan-y;
}

.reel__track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
}

.reel__track.is-animated {
	animation-name: arusa-reel;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.reel__slide {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	height: 100%;
	margin: 0;
	margin-inline-end: var(--reel-gap);
	display: flex;
	align-items: center;
}

.reel__slide img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	border-radius: 18px;
	transform-origin: center center;
	transition: transform .65s cubic-bezier(.22, .61, .36, 1), opacity .45s ease;
	user-select: none;
	-webkit-user-drag: none;
}

@media (hover: hover) and (pointer: fine) {
	.reel:has(.reel__slide:hover) .reel__track.is-animated {
		animation-play-state: paused;
	}

	.reel:has(.reel__slide:hover) .reel__slide:not(:hover) img {
		opacity: .62;
	}

	.reel__slide:hover {
		z-index: 3;
	}

	.reel__slide:hover img {
		transform: scale(1.2) rotate(var(--reel-tilt, 1.6deg));
	}
}

@keyframes arusa-reel {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* ------------------------------------------------------------------ *
 * Marquee
 * ------------------------------------------------------------------ */

.marquee {
	position: relative;
	z-index: 1;
	background: var(--arusa-green-dark);
	color: var(--arusa-cream);
	overflow: hidden;
	padding-block: 1rem;
	white-space: nowrap;
}
.marquee__track {
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
	will-change: transform;
}
.marquee__track.is-animated {
	animation: arusa-marquee 40s linear infinite;
}
.marquee:hover .marquee__track.is-animated { animation-play-state: paused; }
.marquee__item {
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: .02em;
}
.marquee__sep { color: var(--arusa-gold); }

@keyframes arusa-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(50%); } /* RTL: content flows the other way */
}

/* ------------------------------------------------------------------ *
 * Pricing
 * ------------------------------------------------------------------ */

.pricing-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}
.price-card {
	background: var(--arusa-cream);
	border: 1px solid rgba(154,123,69,.3);
	border-radius: var(--arusa-radius);
	padding: 2rem 2.5rem;
	text-align: center;
	min-width: 240px;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.price-card__label { color: var(--arusa-green); font-weight: 600; }
.price-card__value { font-size: 2rem; font-weight: 700; color: var(--arusa-gold); }
.pricing-note { text-align: center; color: #4a553f; font-size: .95rem; }

/* ------------------------------------------------------------------ *
 * Booking placeholder
 * ------------------------------------------------------------------ */

.booking-placeholder {
	border: 1px dashed rgba(154,123,69,.5);
	border-radius: var(--arusa-radius);
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--arusa-green);
	background: var(--arusa-white);
	max-width: 760px;
	margin-inline: auto;
}

/* ------------------------------------------------------------------ *
 * FAQ
 * ------------------------------------------------------------------ */

.faq-list { max-width: 820px; margin-inline: auto; }
.faq-item {
	border-bottom: 1px solid rgba(7,26,1,.12);
}
.faq-item__q {
	cursor: pointer;
	list-style: none;
	padding-block: 1.25rem;
	font-size: 1.2rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
	content: "+";
	color: var(--arusa-gold);
	font-size: 1.6rem;
	line-height: 1;
	transition: transform .25s ease;
}
.faq-item[open] .faq-item__q::after { transform: rotate(45deg); }
.faq-item__a {
	padding-block: 0 1.4rem;
	color: #4a553f;
	line-height: 1.7;
}

/* ------------------------------------------------------------------ *
 * Contact form
 * ------------------------------------------------------------------ */

/* Image (30%) on the right, form filling the left space, text RTL. */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 30%;
	direction: ltr;
	align-items: stretch;
	gap: clamp(2rem, 4vw, 4.5rem);
	padding-inline-start: clamp(1.5rem, 6vw, 7rem);
	padding-inline-end: var(--arusa-gutter);
}
.contact-grid__content {
	direction: rtl;
	text-align: right;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.contact-grid__content .section__title { text-align: center; color: var(--arusa-green); }
.contact-grid__content .section__subtitle {
	text-align: center;
	margin-inline: auto;
	max-width: 48ch;
}
.contact-grid__media img {
	width: 100%;
	height: 100%;
	min-height: 460px;
	object-fit: cover;
	display: block;
	border-radius: var(--arusa-radius);
}

.contact-form { width: 100%; max-width: none; margin-inline: 0; }
.contact-form__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field input,
.field textarea {
	border: 0;
	border-bottom: 1px solid rgba(7,26,1,.25);
	background: transparent;
	padding: .6rem .25rem;
	font: inherit;
	color: var(--arusa-green-dark);
}
.contact-form .field input,
.contact-form .field textarea {
	border: 1px solid rgba(154, 123, 69, .45);
	border-radius: 10px;
	background: var(--arusa-white);
	padding: .85rem 1rem;
}
.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--arusa-gold);
}
.contact-form .arusa-btn { width: 100%; margin-top: 1.5rem; border-radius: 10px; }
.contact-form__note { font-size: .85rem; color: var(--arusa-green); margin-top: .75rem; }
.arusa-btn:visited { color: var(--arusa-white); }
/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.site-footer {
	background: var(--arusa-cream);
	border-top: 1px solid rgba(154,123,69,.25);
	padding-block: 3rem 0;
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 1.3fr .8fr 1fr auto;
	gap: 2rem;
	align-items: start;
}
.site-footer__logo { height: 64px; width: auto; margin-bottom: 1rem; }
.site-footer__text { color: #4a553f; max-width: 36ch; }
.site-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.site-footer__nav a,
.site-footer__nav a:visited { color: var(--arusa-green-dark); font-weight: 500; }
.site-footer__nav a:hover { color: var(--arusa-green); }
.site-footer__contact { display: flex; flex-direction: column; gap: .5rem; }
.site-footer__contact a { color: var(--arusa-green-dark); }
.site-footer__social { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
a.footer-btn,
a.footer-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .6rem 1.05rem;
	border: 1px solid rgba(7, 26, 1, .18);
	border-radius: 999px;
	color: var(--arusa-green-dark);
	font-weight: 600;
	line-height: 1;
}
.footer-btn svg { width: 18px; height: 18px; display: block; color: currentColor; }
a.footer-btn:hover,
a.footer-btn:focus {
	background: var(--arusa-green-dark);
	color: var(--arusa-white);
}
.site-footer__bar {
	margin-top: 2.5rem;
	border-top: 1px solid rgba(7,26,1,.1);
	padding-block: 1.25rem;
	text-align: center;
	font-size: .85rem;
	color: var(--arusa-green);
}
.site-footer__credit {
	margin: .65rem 0 0;
	font-size: .75rem;
	color: var(--arusa-green);
}
.site-footer__credit a,
.site-footer__credit a:visited {
	color: var(--arusa-green-dark);
	font-weight: 600;
}
.site-footer__credit a:hover { color: var(--arusa-gold); }

/* ------------------------------------------------------------------ *
 * Inner content pages (terms, posts, 404) — no sidebar or search
 * ------------------------------------------------------------------ */

.content-page {
	background: var(--arusa-white);
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.content-page__inner {
	width: min(760px, 100%);
	margin-inline: auto;
	padding-inline: var(--arusa-gutter);
}
.content-page__inner--center { text-align: center; }
.content-page .entry-title,
.content-page .page-title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	color: var(--arusa-green-dark);
	text-align: center;
	margin: 0 0 1.75rem;
}
.content-page .entry-meta,
.content-page .entry-footer { display: none; }
.content-page .entry-content,
.content-page__lead {
	color: #3d4a36;
	font-size: 1.05rem;
	line-height: 1.9;
}
.content-page__lead { margin: 0 0 1.75rem; }
.content-page .entry-content > *:first-child { margin-top: 0; }
.content-page .entry-content h2,
.content-page .entry-content h3 {
	color: var(--arusa-green-dark);
	font-weight: 700;
	margin: 2rem 0 .75rem;
}
.content-page .entry-content p { margin: 0 0 1rem; }
.content-page .entry-content ul,
.content-page .entry-content ol {
	margin: 0 0 1rem;
	padding-inline-start: 1.25rem;
}
.content-page .entry-content a,
.content-page .entry-content a:visited {
	color: var(--arusa-green-dark);
	text-decoration: underline;
	text-underline-offset: .15em;
}
.content-page .entry-content a:hover { color: var(--arusa-gold); }

/* Gentle entrance. Hidden only after JS opts in, so the page stays
   visible without JavaScript. */
html.enter-ready .enter {
	opacity: 0;
	transform: translateY(18px);
}
html.enter-ready .enter.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .8s ease, transform .8s ease;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
 @media (max-width: 1280px) { 
	.arusa-container.header-inner {
		max-width: calc(100% - 20px);
	}

 }
@media (max-width: 900px) {
	.features-grid { grid-template-columns: repeat(2, 1fr); justify-items: center; }
	.feature-card { width: 100%; max-width: 320px; }
	.section--complex { padding-block-end: 40px; padding-block-start: 40px; }
	.section--features { padding-block-start: 40px; }
	/* Complex: stack the card between the two images. */
	.complex { flex-direction: column; gap: 1.5rem; padding-block: 1rem; }
	.complex__card { width: 100%; order: 2; }
	.complex__img { position: static; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
	.complex__img--right { order: 1; }
	.complex__img--left { order: 3; }

	.contact-grid { grid-template-columns: 1fr; direction: rtl; padding-inline: var(--arusa-gutter); }
	.contact-grid__media { order: -1; }
	.contact-grid__media img { height: 46vh; min-height: 240px; }
	.contact-form__row { grid-template-columns: 1fr; }
	.site-footer__inner { grid-template-columns: 1fr; text-align: center; }
	.site-footer__nav ul,
	.site-footer__contact,
	.site-footer__social { align-items: center; }
	.lead { font-size: 5vw; }

	/* Hero stacks in source order: line, rule, logo, rule, line. */
	.hero__row { flex-direction: column; gap: .85rem; }
	.hero__brand { flex: 0 0 auto; width: 64vw; }
	.hero__rule { flex: 0 0 auto; width: 22vw; min-width: 0; }
	.hero__line { font-size: 6vw; white-space: normal; text-align: center; }
}

/* The full bar (logo + links + icons) no longer fits below this width,
   and the link text starts wrapping. Switch to the drawer earlier. */
@media (max-width: 1100px) {
	.nav-toggle { display: block; z-index: 3; }
	.nav-open .nav-backdrop { display: block; }
	.nav-menu {
		position: fixed;
		inset-block-start: 0;
		inset-inline-end: 0;
		z-index: 2;
		height: 100vh;
		height: 100dvh;
		width: min(320px, 85vw);
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 1.5rem;
		padding: 2rem 2.5rem;
		background: var(--arusa-cream);
		box-shadow: 0 0 40px rgba(7, 26, 1, .18);
		/* RTL anchors this panel to the left; slide it off that edge. */
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform .3s ease, visibility .3s ease;
	}
	.nav-open .nav-menu { transform: translateX(0); visibility: visible; }
	.nav-menu a,
	.site-header.is-scrolled .nav-menu a { color: var(--arusa-green-dark); font-size: 1.2rem; }
	.nav-menu a.nav-menu__cta,
	.nav-open .nav-menu a.nav-menu__cta { color: var(--arusa-white); background: var(--arusa-green-dark); font-size: 1.05rem; }
	.nav-menu__tools { margin-inline-start: 0; }
	.nav-menu__tools svg { color: var(--arusa-green-dark); }
}

@media (max-width: 560px) {
	.site-header.is-scrolled {margin-top:0px;}
	.features-grid { grid-template-columns: 1fr; }
	.lead { font-size: 6.5vw; }
	.hero__line { font-size: 9vw; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.marquee__track.is-animated,
	.reel__track.is-animated { animation: none; }
	.reel__slide img { transition: none; }
	html.enter-ready .enter,
	html.enter-ready .enter.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}