/* ==========================================================================
   Singh Realty LLC — design system
   One stylesheet, shared by every page. Palette, type scale, glass, motion.
   ========================================================================== */

:root {
	--canvas: #FFFCFA;
	--ink: #1D1A18;
	--gray: #7A6F69;
	--line: rgba(29, 26, 24, 0.10);
	--accent: #FF671E;
	--accent-2: #FFA366;
	--accent-deep: #D9540F;
	--accent-grad: linear-gradient(135deg, #FF671E 0%, #FFA366 100%);

	--r-sm: 12px;
	--r-md: 18px;
	--r-lg: 28px;
	--r-full: 999px;

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Liquid orange wash — soft, light, always slowly moving. Sits behind all
   content on a warm near-white canvas; never dark, never opaque enough to
   fight text contrast.
   -------------------------------------------------------------------------- */
body::before {
	content: '';
	position: fixed;
	inset: -25%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(36% 40% at 18% 20%, rgba(255, 103, 30, 0.20), transparent 66%),
		radial-gradient(32% 36% at 84% 16%, rgba(255, 163, 102, 0.22), transparent 66%),
		radial-gradient(40% 42% at 70% 74%, rgba(255, 138, 76, 0.16), transparent 66%),
		radial-gradient(34% 38% at 24% 84%, rgba(255, 190, 150, 0.20), transparent 66%);
	filter: blur(26px);
	animation: liquid-drift 28s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes liquid-drift {
	0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
	50%  { transform: translate3d(2.5%, -2%, 0) scale(1.07) rotate(1.5deg); }
	100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03) rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
	body::before { animation: none; }
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--canvas);
	color: var(--ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-feature-settings: 'cv11', 'ss01';
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	letter-spacing: -0.03em;
	line-height: 1.05;
	font-weight: 700;
	margin: 0;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */
.t-hero    { font-size: clamp(44px, 7vw, 96px); font-weight: 800; letter-spacing: -0.035em; }
.t-section { font-size: clamp(32px, 4.5vw, 60px); font-weight: 700; letter-spacing: -0.03em; }
.t-title   { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.025em; }
.t-lead    { font-size: clamp(17px, 1.6vw, 21px); color: var(--gray); line-height: 1.5; letter-spacing: -0.01em; }
.t-body    { font-size: 16px; color: var(--gray); line-height: 1.6; }
.t-small   { font-size: 13px; color: var(--gray); }
.t-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.t-grad {
	background: var(--accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; }
.section { padding: clamp(64px, 10vw, 140px) 0; }
.stack-sm > * + * { margin-top: 10px; }
.stack > * + * { margin-top: 18px; }
.stack-lg > * + * { margin-top: 32px; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Glass — functional surfaces only (nav, fact panels). Never wallpaper.
   The SVG feTurbulence/feDisplacementMap filter lives in each page's markup
   as #glass-distort; .glass-refract opts a surface into real refraction
   rather than plain blur.
   -------------------------------------------------------------------------- */
.glass {
	background: rgba(255, 252, 250, 0.72);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.7);
}

.glass-panel {
	background: rgba(255, 252, 250, 0.80);
	-webkit-backdrop-filter: blur(28px) saturate(190%);
	backdrop-filter: blur(28px) saturate(190%);
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 12px 40px rgba(160, 80, 30, 0.10);
	border-radius: var(--r-lg);
}

/* Refraction: displaces what's behind the surface, so the edge bends light
   the way real glass does. Skipped on touch/low-power via the media query
   below, since filter+backdrop-filter together is expensive to composite. */
.glass-refract { -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); }
@media (hover: hover) and (min-width: 900px) {
	.glass-refract { backdrop-filter: blur(18px) saturate(180%) url(#glass-distort); }
}

.card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 252, 250, 0.62);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid transparent;
	transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav.is-scrolled {
	background: rgba(255, 252, 250, 0.88);
	border-bottom-color: var(--line);
	box-shadow: 0 1px 20px rgba(160, 80, 30, 0.06);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 14px; color: var(--ink); transition: color 0.25s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--accent); }
@media (max-width: 860px) { .nav-links, .nav-cta { display: none; } }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
@media (max-width: 860px) { .nav-toggle { display: block; } }
.nav-mobile { display: none; padding: 12px 0 20px; border-top: 1px solid var(--line); }
.nav-mobile.is-open { display: block; }
.nav-mobile a { display: block; padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: var(--r-full);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.3s var(--ease), color 0.3s var(--ease),
	            border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
	will-change: transform;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); box-shadow: 0 8px 24px rgba(255, 103, 30, 0.32); }
.btn-ghost { background: rgba(29, 29, 31, 0.05); color: var(--ink); }
.btn-ghost:hover { background: rgba(29, 29, 31, 0.09); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }

/* Visible keyboard focus everywhere — accessibility floor. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { width: 100%; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--ink); }
.field input, .field select, .field textarea {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(255, 103, 30, 0.14);
}
.field textarea { resize: vertical; min-height: 96px; }

/* --------------------------------------------------------------------------
   Pills (county filter)
   -------------------------------------------------------------------------- */
.pill-row {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 0 12px;
}
.pill-row::-webkit-scrollbar { display: none; }

.pill {
	position: relative;
	flex: 0 0 auto;
	padding: 9px 18px;
	border-radius: var(--r-full);
	border: 1px solid var(--line);
	background: #fff;
	color: var(--gray);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* Fill slides in from the left rather than snapping color.
   z-index 0 (not -1) so the gradient paints *over* the pill's own white
   background; -1 would hide it behind and leave white text on white. */
.pill::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--accent-grad);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s var(--ease);
	z-index: 0;
}
.pill > span { position: relative; z-index: 1; }
.pill[aria-pressed='true'] { color: #fff; border-color: transparent; }
.pill[aria-pressed='true']::before { transform: scaleX(1); }
.pill:not([aria-pressed='true']):hover { color: var(--ink); border-color: rgba(29, 29, 31, 0.22); }

/* --------------------------------------------------------------------------
   Listing cards
   -------------------------------------------------------------------------- */
.listing {
	position: relative;
	display: block;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transform-style: preserve-3d;
	transition: box-shadow 0.4s var(--ease);
	will-change: transform;
}

/* Cursor-tracked specular highlight for the 3D tilt. Position comes from
   --mx/--my, set by the motion system on mousemove. */
.tilt-glare {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	z-index: 3;
	background: radial-gradient(
		420px circle at var(--mx, 50%) var(--my, 50%),
		rgba(255, 255, 255, 0.38),
		rgba(255, 255, 255, 0.10) 38%,
		transparent 62%
	);
	mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) { .tilt-glare { display: none; } }
.listing-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #eee; }
.listing-media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.7s var(--ease);
}
.listing:hover .listing-media img { transform: scale(1.04); }
.listing-body { padding: 20px; }
.listing-price { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.listing-facts { display: flex; gap: 16px; font-size: 14px; color: var(--gray); margin-top: 12px; }

.badge {
	position: absolute; top: 12px; left: 12px;
	padding: 5px 11px;
	border-radius: var(--r-full);
	font-size: 12px; font-weight: 600;
	background: rgba(251, 251, 253, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--ink);
}
.badge-active { color: var(--accent); }

/* --------------------------------------------------------------------------
   Motion
   Base state is the *hidden* state; .is-in is added by the motion system.
   Everything is authored so that if JS never runs, content is still visible
   (see the no-js / reduced-motion resets at the bottom).
   -------------------------------------------------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal-blur {
	opacity: 0;
	filter: blur(12px);
	transform: translateY(18px);
	transition: opacity 0.9s var(--ease), filter 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal-blur.is-in { opacity: 1; filter: blur(0); transform: none; }

/* Staggered children — delay is set inline by the motion system so the
   step can vary per grid without a class explosion. */
.stagger > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.stagger.is-in > * { opacity: 1; transform: none; }

/* Filter transition: cards animate out, then the new set animates in. */
.grid-swap { transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
.grid-swap.is-out { opacity: 0; transform: translateY(8px) scale(0.985); }

.parallax { will-change: transform; }

/* Word-split headlines: each word rises and unblurs in sequence. */
.word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.5em) rotateX(-40deg);
	filter: blur(6px);
	transform-origin: 50% 100%;
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease);
	will-change: transform, opacity;
}
.word.is-in { opacity: 1; transform: none; filter: blur(0); }

/* Continuously travelling gradient on accent text.
   Also applied to any .word inside: the splitter moves the text into child
   spans, and background-clip:text on the parent then has no text of its own
   to clip against — the word would render transparent over nothing and
   disappear. Each word carries its own gradient instead. */
.t-grad-anim,
.t-grad-anim .word {
	background: linear-gradient(90deg, #FF671E, #FFA366, #FF7A38, #FF671E);
	background-size: 300% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: grad-travel 4.5s linear infinite;
}
/* The wrapper stops painting once its words paint themselves. */
.t-grad-anim:has(.word) { background: none; animation: none; }
@keyframes grad-travel {
	from { background-position: 0% center; }
	to   { background-position: 300% center; }
}

/* Marquee — the track is duplicated in JS, so -50% is one full cycle. */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track {
	display: flex;
	gap: 10px;
	width: max-content;
	animation: marquee-run 45s linear infinite;
	will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-run {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Slow, continuous push on a photo — the shot never sits perfectly still. */
.kenburns { animation: kenburns 18s ease-out both; }
@keyframes kenburns {
	from { transform: scale(1.001) translate3d(0, 0, 0); }
	to   { transform: scale(1.11) translate3d(-1.2%, -1.4%, 0); }
}

/* Images wipe up into frame instead of fading.
   The clip goes on the inner image, never on the observed element itself:
   IntersectionObserver accounts for CSS clipping, so a fully-clipped
   element reports zero intersection, never fires, and never un-clips. */
.reveal-wipe > img,
.reveal-wipe > picture {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.05s var(--ease);
}
.reveal-wipe.is-in > img,
.reveal-wipe.is-in > picture { clip-path: inset(0 0 0% 0); }

/* Drifting images need room to travel inside their frame. */
[data-drift] { overflow: hidden; }
[data-drift] img { transform: scale(1.14); }

@media (prefers-reduced-motion: reduce) {
	.word { opacity: 1 !important; transform: none !important; filter: none !important; }
	.t-grad-anim { animation: none; background-position: 0 center; }
	.marquee-track { animation: none; }
	.kenburns { animation: none; }
	.reveal-wipe > img, .reveal-wipe > picture { clip-path: none !important; }
	[data-drift] img { transform: none; }
}

/* --------------------------------------------------------------------------
   Floating contact button
   z-index sits above third-party chat widgets (Brevo/Tawk mount fixed
   elements bottom-right at very high z-index), and it's anchored bottom-LEFT
   so it never overlaps them in the first place.
   -------------------------------------------------------------------------- */
.connect {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 2147483000;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	/* The container keeps the closed panel's layout box, so it would otherwise
	   hit-test as an invisible ~270x290px click blocker over page content.
	   Only the toggle and the *open* panel accept pointer events. */
	pointer-events: none;
}
.connect-toggle, .connect-panel.is-open { pointer-events: auto; }
.connect-panel {
	width: 270px;
	padding: 18px;
	border-radius: var(--r-md);
	background: rgba(255, 252, 250, 0.94);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 16px 50px rgba(160, 80, 30, 0.18);
	transform-origin: bottom left;
	opacity: 0;
	transform: scale(0.94) translateY(8px);
	pointer-events: none;
	transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.connect-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.connect-action {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	border-radius: var(--r-sm);
	font-size: 14px;
	font-weight: 500;
	background: rgba(29, 29, 31, 0.04);
	transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.connect-action:hover { background: var(--accent); color: #fff; }
.connect-action svg { width: 17px; height: 17px; flex: 0 0 auto; }
.connect-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 20px;
	border: 0;
	border-radius: var(--r-full);
	background: var(--accent-grad);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 8px 28px rgba(255, 103, 30, 0.34);
	transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.connect-toggle:hover { box-shadow: 0 12px 34px rgba(255, 103, 30, 0.44); }
.connect-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0.9; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Contact fallback toast
   tel:/mailto: links do nothing on a desktop with no dialer or mail client
   registered — the browser fires the navigation and the OS discards it.
   This surfaces the actual number/address so the click is never a dead end.
   -------------------------------------------------------------------------- */
.copy-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%) translateY(12px);
	z-index: 2147483001;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 14px 13px 20px;
	border-radius: var(--r-full);
	background: rgba(255, 252, 250, 0.96);
	-webkit-backdrop-filter: blur(20px) saturate(190%);
	backdrop-filter: blur(20px) saturate(190%);
	color: var(--ink);
	border: 1px solid rgba(255, 103, 30, 0.22);
	box-shadow: 0 16px 44px rgba(160, 80, 30, 0.22);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
	max-width: calc(100vw - 32px);
}
.copy-toast.is-open { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.copy-toast-label { font-size: 12px; color: var(--gray); }
.copy-toast-value { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copy-toast-btn {
	flex: 0 0 auto;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--r-full);
	background: var(--accent);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.25s var(--ease);
}
.copy-toast-btn:hover { background: var(--accent-deep); }
.copy-toast-close {
	flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
	border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(29, 26, 24, 0.07); color: var(--ink); font-size: 15px; line-height: 1;
}
@media (max-width: 520px) {
	.copy-toast { flex-wrap: wrap; border-radius: var(--r-md); left: 16px; right: 16px; transform: translateY(12px); }
	.copy-toast.is-open { transform: none; }
}

.footer { border-top: 1px solid var(--line); padding: 64px 0 40px; }
.footer a { color: var(--gray); font-size: 14px; transition: color 0.25s var(--ease); }
.footer a:hover { color: var(--accent); }
.footer-bottom {
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
	margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
	font-size: 13px; color: var(--gray);
}

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Reduced motion — everything resolves to its final state, no transitions.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.reveal, .reveal-blur, .stagger > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
	.listing:hover { transform: none !important; }
	.glass-refract { backdrop-filter: blur(18px) saturate(180%); }
}