/**
 * TEJTHAKOR.CA — Brand System (single source of truth)
 *
 * Light-blue + white luxury palette aligned with Royal LePage corporate blue.
 * Imported site-wide via functions.php → wp_enqueue_style.
 *
 * If a page-specific CSS variable needs to be added later, add it here first
 * so every template sees it. Never hardcode hex colors in templates.
 *
 * @package realhomes-child
 * @version 1.0.0  (2026-06-02)
 */

:root {
	/* ====== Primary palette ====== */
	--tej-blue:        #1976d2;   /* Primary CTAs, links, accents */
	--tej-blue-dark:   #0d5aa7;   /* Hover, depth, headlines accent */
	--tej-blue-light:  #e3f2fd;   /* Card backgrounds, tints */
	--tej-blue-bg:     #f5fbff;   /* Page section bands */
	--tej-blue-deep:   #064085;   /* Footer, deep accents */
	--tej-blue-hero:   #b5d4ea;   /* Hero / nav background — more saturated than blue-light, premium feel */

	/* ====== Neutrals ====== */
	--tej-ink:         #1a2433;   /* Body text */
	--tej-ink-muted:   #6b7886;   /* Secondary text, captions */
	--tej-ink-soft:    #92a0b1;   /* Placeholder, tertiary */
	--tej-white:       #ffffff;
	--tej-off-white:   #fafcff;
	--tej-line:        #dbe5f0;   /* Borders, dividers */
	--tej-line-soft:   #ecf2f9;

	/* ====== Accent — used SPARINGLY (awards, credentials, MLS badges only) ====== */
	--tej-gold:        #c9a86a;
	--tej-gold-dark:   #a3884e;

	/* ====== Status colors ====== */
	--tej-green:       #1f7a1f;   /* Success, positive numbers, "available" */
	--tej-green-bg:    #e8f5e9;
	--tej-red:         #d32f2f;   /* Errors, negative net */
	--tej-red-bg:      #ffebee;
	--tej-amber:       #d4a017;   /* Warnings, disclaimers */
	--tej-amber-bg:    #fffbe9;

	/* ====== Type system ====== */
	--tej-font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--tej-font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tej-font-mono:    "SF Mono", Menlo, Consolas, monospace;

	/* ====== Spacing scale (use these, not arbitrary px) ====== */
	--tej-space-1:  4px;
	--tej-space-2:  8px;
	--tej-space-3:  12px;
	--tej-space-4:  16px;
	--tej-space-5:  22px;
	--tej-space-6:  32px;
	--tej-space-7:  48px;
	--tej-space-8:  72px;

	/* ====== Radius ====== */
	--tej-radius-sm: 6px;
	--tej-radius-md: 10px;
	--tej-radius-lg: 16px;
	--tej-radius-xl: 22px;
	--tej-radius-pill: 999px;

	/* ====== Shadow ladder ====== */
	--tej-shadow-sm: 0 1px 2px rgba(13, 90, 167, .06), 0 1px 1px rgba(13, 90, 167, .04);
	--tej-shadow-md: 0 6px 16px -4px rgba(13, 90, 167, .12), 0 2px 6px -1px rgba(13, 90, 167, .08);
	--tej-shadow-lg: 0 16px 40px -10px rgba(13, 90, 167, .18), 0 4px 12px -2px rgba(13, 90, 167, .08);
	--tej-shadow-xl: 0 30px 80px -20px rgba(13, 90, 167, .32), 0 4px 12px -2px rgba(13, 90, 167, .08);

	/* ====== Transition ====== */
	--tej-ease: cubic-bezier(.2, .8, .2, 1);
	--tej-t:    .18s var(--tej-ease);
}

/* ====================================================================== *
 * Utility primitives — small set, opt-in by adding the class.
 * Avoid creating big component CSS here; keep it minimal.
 * Templates can still override anything inline.
 * ====================================================================== */

.tej-container {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--tej-space-5);
}

.tej-eyebrow {
	display: inline-block;
	padding: 6px 14px;
	background: var(--tej-blue);
	color: var(--tej-white);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	border-radius: var(--tej-radius-pill);
}
.tej-eyebrow--soft {
	background: var(--tej-blue-light);
	color: var(--tej-blue-dark);
}

.tej-credential {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tej-gold);
}

/* Headline accent — gradient blue swatch for keyword highlight */
.tej-accent {
	background: linear-gradient(120deg, var(--tej-blue) 0%, var(--tej-blue-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Buttons — primary / secondary / ghost */
.tej-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	font-family: var(--tej-font-display);
	font-weight: 800;
	font-size: 14.5px;
	letter-spacing: .01em;
	border-radius: var(--tej-radius-pill);
	cursor: pointer;
	border: 0;
	text-decoration: none;
	transition: transform var(--tej-t), box-shadow var(--tej-t), background var(--tej-t);
	white-space: nowrap;
}
.tej-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.tej-btn:hover { transform: translateY(-2px); }
.tej-btn:active { transform: translateY(0); }
.tej-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.tej-btn--primary {
	background: linear-gradient(135deg, var(--tej-blue) 0%, var(--tej-blue-dark) 100%);
	color: var(--tej-white);
}
.tej-btn--primary:hover { box-shadow: 0 14px 28px -8px rgba(25,118,210,.55); }

.tej-btn--secondary {
	background: var(--tej-white);
	color: var(--tej-blue-dark);
	border: 2px solid var(--tej-blue);
}
.tej-btn--secondary:hover { background: var(--tej-blue-bg); }

.tej-btn--whatsapp {
	background: #25d366;
	color: var(--tej-white);
}
.tej-btn--whatsapp:hover { box-shadow: 0 14px 28px -8px rgba(37,211,102,.55); }

.tej-btn--ghost {
	background: transparent;
	color: var(--tej-blue-dark);
	border: 1px solid var(--tej-line);
}
.tej-btn--ghost:hover { background: var(--tej-blue-bg); border-color: var(--tej-blue); }

/* Cards */
.tej-card {
	background: var(--tej-white);
	border: 1px solid var(--tej-line);
	border-radius: var(--tej-radius-lg);
	padding: var(--tej-space-5);
	box-shadow: var(--tej-shadow-sm);
	transition: transform var(--tej-t), box-shadow var(--tej-t);
}
.tej-card--lifted { box-shadow: var(--tej-shadow-lg); }
.tej-card:hover { transform: translateY(-3px); box-shadow: var(--tej-shadow-md); }

/* Section padding rhythm — use these on every <section> */
.tej-section { padding-block: var(--tej-space-8); }
.tej-section--tight { padding-block: var(--tej-space-7); }

/* Disclaimer band */
.tej-disclaimer {
	padding: var(--tej-space-5);
	background: var(--tej-amber-bg);
	border: 1px solid #f3e5a2;
	border-left: 5px solid var(--tej-amber);
	border-radius: var(--tej-radius-md);
	font-size: 12.5px;
	line-height: 1.6;
	color: #5c4a08;
}

/* Form input baseline (opt-in) */
.tej-input {
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	border: 1px solid var(--tej-line);
	border-radius: var(--tej-radius-md);
	background: var(--tej-white);
	color: var(--tej-ink);
	transition: border-color var(--tej-t), box-shadow var(--tej-t);
}
.tej-input:focus {
	outline: none;
	border-color: var(--tej-blue);
	box-shadow: 0 0 0 3px rgba(25, 118, 210, .18);
}

/* Subtle scroll reveal helper — JS in home.js adds .is-visible via IntersectionObserver.
 * Supports BOTH .is-visible (current home.js) and .is-in (alternate naming) so templates
 * are forward-compatible if the JS contract changes.
 */
.tej-reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--tej-ease), transform .5s var(--tej-ease); }
.tej-reveal.is-visible, .tej-reveal.is-in { opacity: 1; transform: none; }

/* Honeypot field — site-wide consistency */
.tej-hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none; }

/* ====================================================================== *
 * OVERRIDES — older home.css used a gold accent. The 2026 brand is blue.
 * These rules override the legacy gold so the entire site uses one palette.
 * (Gold is preserved as a small credentials accent only — see .tej-credential)
 * ====================================================================== */

/* Sticky nav phone CTA — was gold, now blue */
.tej-nav__cta {
	background: linear-gradient(135deg, var(--tej-blue) 0%, var(--tej-blue-dark) 100%) !important;
	color: var(--tej-white) !important;
	border: 0 !important;
}
.tej-nav__cta:hover {
	background: var(--tej-blue-dark) !important;
	transform: translateY(-1px);
}

/* === Nav background — matches the hero so they look like ONE panel ===
 * Also nukes the legacy `::before` dark gradient (from home.css) that was
 * painting a black-to-transparent overlay across the top of the nav on
 * load — that's what made the menu look "black + blue muddy" before
 * scrolling. We force it transparent at all times so the nav is the
 * SAME solid light-blue from load through scroll.
 */
.tej-nav,
.tej-nav.scrolled,
.tej-nav.tej-nav--solid {
	background: var(--tej-blue-hero) !important;
	box-shadow: none !important;
	border-bottom: 1px solid rgba(13, 90, 167, .12);
}
.tej-nav::before,
.tej-nav.scrolled::before,
.tej-nav.tej-nav--solid::before {
	background: transparent !important;
	opacity: 0 !important;
	display: none !important;
}
.tej-nav .tej-nav__brand-name,
.tej-nav .tej-nav__menu a,
.tej-nav .tej-drop-toggle {
	color: var(--tej-ink) !important;
}
.tej-nav .tej-nav__brand-sub { color: var(--tej-blue-dark) !important; }
.tej-nav .tej-nav__menu a:hover,
.tej-nav .tej-drop-toggle:hover { color: var(--tej-blue-dark) !important; }

/* === Brand-mark (top-left logo) — premium upgrade ============================
 * "TEJ THAKOR" — bigger, bold, UPPERCASE, branded blue.
 * "Broker of Record / Owner" — smaller, centered under the name.
 * The .tej-nav__brand container is changed to align-items: center so both
 * lines are horizontally centered as a stacked pair.
 * ============================================================================ */
.tej-nav .tej-nav__brand {
	align-items: center !important;
	text-align: center;
	gap: 4px;
	line-height: 1.1;
}
.tej-nav .tej-nav__brand-name {
	font-family: var(--tej-font-display) !important;
	font-weight: 900 !important;
	font-size: clamp(22px, 2.3vw, 30px) !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	color: var(--tej-blue-dark) !important;
}
.tej-nav .tej-nav__brand-sub {
	font-family: var(--tej-font-display) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .04em !important;
	text-transform: none !important;          /* override legacy uppercase */
	color: var(--tej-ink-muted) !important;
}
.tej-nav.scrolled .tej-nav__brand-name { color: var(--tej-blue-dark) !important; }
.tej-nav.scrolled .tej-nav__brand-sub  { color: var(--tej-ink-muted)  !important; }
@media (max-width: 540px) {
	.tej-nav .tej-nav__brand-name { font-size: 19px !important; }
	.tej-nav .tej-nav__brand-sub  { font-size: 10.5px !important; }
}

/* === HERO H1 — sized to fit the right column, not blow it out =================
 * Right column is ~50% of viewport (grid 0.95fr / 1.05fr).
 * Sizing rule: max line ("Make Real Estate Decisions" = 25 chars) must fit
 * on ONE line at all breakpoints from 600px up to ultra-wide.
 *   - 980px viewport → ~480px column → 36-40px font works
 *   - 1440px viewport → ~700px column → 48-52px font works
 *   - 1920px+ viewport → ~960px column → 56-62px font works
 * clamp(min, vw, max) — minimum 30px so mobile is readable, max 60px so it
 * never gets absurd on ultra-wide.
 * ============================================================================ */
.tej-hero26 .tej-hero26__h1 {
	font-size: clamp(28px, 3.1vw, 52px) !important;
	line-height: 1.06 !important;
	letter-spacing: -1.3px !important;        /* tighter to absorb the text-stroke widening */
	max-width: 100%;
	overflow-wrap: break-word;
}
/* Each .tej-h1-line span = a forced line in the headline.
 * Line 1: "Helping Real Families"
 * Line 2: "Make Real Estate Decisions"
 * Line 3 (em, italic, blue): "with Confidence."
 *
 * EXTRA-BOLD weight: Plus Jakarta Sans tops out at 800, so we pair font-weight
 * with a subtle text-stroke (currentColor, sub-pixel) to push the visual
 * heaviness further without changing the typeface. Result reads as "Black /
 * Heavy" weight while staying crisp.
 */
.tej-hero26 .tej-hero26__h1 .tej-h1-line {
	display: block;
	white-space: nowrap;            /* Each line stays on a single visual line */
	font-weight: 900;
	-webkit-text-stroke: 0.6px currentColor;
	text-shadow: 0 0 0.4px currentColor;   /* Firefox fallback for text-stroke */
}
.tej-hero26 .tej-hero26__h1 em {
	font-size: 1em !important;
	display: block;
	margin-top: 6px;
	white-space: nowrap;
}
.tej-hero26 .tej-hero26__tagline {
	font-size: clamp(17px, 1.6vw, 22px) !important;
	line-height: 1.4 !important;
}
/* Phone-narrow: switch back to wrap so it never overflows the screen. */
@media (max-width: 600px) {
	.tej-hero26 .tej-hero26__h1 { font-size: clamp(26px, 6.8vw, 36px) !important; letter-spacing: -.5px !important; }
	.tej-hero26 .tej-hero26__h1 .tej-h1-line,
	.tej-hero26 .tej-hero26__h1 em { white-space: normal; }
}

/* === Hero CTA buttons — override the legacy home.css gold/black hover ======
 * home.css has `.tej-btn--primary:hover { background:#141414; color: gold; }`
 * which makes the button flash dark on hover. Override per hero scope so the
 * hover stays in the premium blue family for BOTH primary + secondary.
 * ============================================================================ */
/* === UNIFIED BUTTONS — Trust & Authority palette ===
   These overrides redirect any section-scoped button rule back to the
   global navy/white system. Keep !important so legacy section overrides
   in home.css can't pull buttons back to gold. */
.tej-hero26__actions .tej-btn--primary,
.tej-mortgage       .tej-btn--primary,
.tej-buyers         .tej-btn--primary,
.tej-sellers        .tej-btn--primary,
.tej-blog           .tej-btn--primary,
.tej-about          .tej-btn--primary,
.tej-story          .tej-btn--primary {
	background: #0a3a7a !important;
	color: #fff !important;
	border: 2px solid #0a3a7a !important;
	box-shadow: 0 4px 12px -4px rgba(10, 58, 122, .28) !important;
}
.tej-hero26__actions .tej-btn--primary:hover,
.tej-mortgage       .tej-btn--primary:hover,
.tej-buyers         .tej-btn--primary:hover,
.tej-sellers        .tej-btn--primary:hover,
.tej-blog           .tej-btn--primary:hover,
.tej-about          .tej-btn--primary:hover,
.tej-story          .tej-btn--primary:hover {
	background: #072a5e !important;
	border-color: #072a5e !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -8px rgba(10, 58, 122, .45) !important;
}

.tej-hero26__actions .tej-btn--secondary,
.tej-story          .tej-btn--secondary,
.tej-buyers         .tej-btn--secondary,
.tej-sellers        .tej-btn--secondary {
	background: #fff !important;
	color: #0a3a7a !important;
	border: 2px solid #0a3a7a !important;
	box-shadow: none !important;
}
.tej-hero26__actions .tej-btn--secondary:hover,
.tej-story          .tej-btn--secondary:hover,
.tej-buyers         .tej-btn--secondary:hover,
.tej-sellers        .tej-btn--secondary:hover {
	background: #eaf2ff !important;
	color: #0a3a7a !important;
	border-color: #0a3a7a !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -6px rgba(10, 58, 122, .25) !important;
}
.tej-hero26__actions .tej-btn--secondary svg { transition: stroke .1s ease; }
.tej-hero26__actions .tej-btn--secondary:hover svg { stroke: #0a3a7a; }

/* Tej-foot credit link colour was gold — keep gold but only for "MCNE · CNE..." line */
/* (No change needed — credentials use --gold intentionally) */

/* ====================================================================== *
 * SOCIAL RAIL — fixed to LEFT side (vertical column of 7 icons).
 * Restyled blue/white. Overrides the legacy home.css gold styling.
 * ====================================================================== */
.tej-social-rail {
	position: fixed !important;
	left: 18px !important;
	right: auto !important;
	top: 50% !important;
	transform: translateY(-50%);
	z-index: 990;
	display: flex !important;
	flex-direction: column;
	gap: 10px;
}
.tej-social-rail a {
	width: 52px; height: 52px;          /* bumped 42 → 52 for prominence */
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--tej-white) !important;
	color: var(--tej-blue-dark) !important;
	border: 1px solid var(--tej-line);
	box-shadow: 0 8px 22px -6px rgba(13, 90, 167, .22);
	transition: transform .18s var(--tej-ease), background .18s var(--tej-ease), color .18s var(--tej-ease), border-color .18s var(--tej-ease), box-shadow .18s var(--tej-ease);
}
.tej-social-rail a:hover {
	transform: translateY(-3px) scale(1.06);
	background: var(--tej-blue) !important;
	color: var(--tej-white) !important;
	border-color: var(--tej-blue);
	box-shadow: 0 12px 28px -6px rgba(13, 90, 167, .42);
}
.tej-social-rail svg {
	width: 22px; height: 22px;          /* bumped 18 → 22 to match circle */
	fill: currentColor;
}

/* Per-platform brand-color hover (subtle accent on hover only) */
.tej-social-rail a[data-platform="instagram"]:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) !important; border-color: transparent; }
.tej-social-rail a[data-platform="facebook"]:hover  { background: #1877f2 !important; border-color: #1877f2; }
.tej-social-rail a[data-platform="linkedin"]:hover  { background: #0a66c2 !important; border-color: #0a66c2; }
.tej-social-rail a[data-platform="tiktok"]:hover    { background: #000 !important; border-color: #000; }
.tej-social-rail a[data-platform="google"]:hover    { background: #4285f4 !important; border-color: #4285f4; }
.tej-social-rail a[data-platform="whatsapp"]:hover  { background: #25d366 !important; border-color: #25d366; }
.tej-social-rail a[data-platform="email"]:hover     { background: var(--tej-blue-dark) !important; border-color: var(--tej-blue-dark); }

/* Hide vertical rail on mobile — hero page renders a horizontal strip instead */
@media (max-width: 900px) {
	.tej-social-rail { display: none !important; }
}

/* ====================================================================== *
 * Mobile horizontal social strip — opt-in via .tej-social-strip class.
 * Used on the homepage hero so phone users still see icons after the CTAs.
 * ====================================================================== */
.tej-social-strip {
	display: none;  /* hidden on desktop — the fixed rail handles it */
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 18px auto 0;
}
.tej-social-strip a {
	width: 40px; height: 40px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--tej-white);
	color: var(--tej-blue-dark);
	border: 1px solid var(--tej-line);
	transition: all .18s var(--tej-ease);
}
.tej-social-strip a:hover { background: var(--tej-blue); color: #fff; border-color: var(--tej-blue); transform: translateY(-2px); }
.tej-social-strip svg { width: 17px; height: 17px; fill: currentColor; }

@media (max-width: 900px) {
	.tej-social-strip { display: flex; }
}

/* ====================================================================== *
 * HOMEPAGE SECTION PALETTE OVERHAUL (2026-06-04)
 *
 * Goal: kill the legacy cream/gold styling from home.css and replace with
 * a clean, alternating white ↔ light-blue rhythm that feels natural with
 * the Royal LePage blue brand.
 *
 * Pattern after hero:
 *   Buyers   → WHITE          (#ffffff)
 *   Sellers  → LIGHT BLUE     (var(--tej-blue-bg) = #f5fbff)
 *   Mortgage → WHITE
 *   Reviews  → LIGHT BLUE
 *   Blog     → WHITE
 *   Reels    → LIGHT BLUE
 *   About    → WHITE
 *
 * Typography rule per user: titles are dark INK (--tej-ink) not pure black,
 * weight 600 (not heavy 800), so they read clean & natural without shouting.
 * ====================================================================== */

/* --- Alternating section backgrounds -----------------------------------
 * NOTE: real class names captured from rendered DOM (some sections use
 * abbreviated names — .tej-rev not .tej-reviews — so we list both forms). */
body.tej-luxe .tej-buyers,
body.tej-luxe .tej-mortgage,
body.tej-luxe .tej-blog,
body.tej-luxe .tej-about {
	background: var(--tej-white) !important;
}
body.tej-luxe .tej-sellers,
body.tej-luxe .tej-reviews,
body.tej-luxe .tej-rev,
body.tej-luxe .tej-reels {
	background: var(--tej-blue-bg) !important;
}
/* Ensure parent body doesn't bleed any legacy cream into transparent sections */
body.tej-luxe { background: var(--tej-blue-hero) !important; }

/* --- Section heading typography — dark ink, not heavy black ------------ */
body.tej-luxe .tej-sec__title {
	color: var(--tej-ink) !important;
	font-weight: 700 !important;             /* down from 800; firm but not heavy */
	letter-spacing: -0.6px;
}
body.tej-luxe .tej-sec__lead {
	color: var(--tej-ink-muted) !important;
	font-weight: 400 !important;
}

/* --- KICKER — the small "FOR BUYERS / FOR SELLERS" label ---------------
 * Was: yellow 3px dash + gold text. Now: blue dash + blue-dark text. */
body.tej-luxe .tej-kicker {
	color: var(--tej-blue-dark) !important;
	font-weight: 700;
}
body.tej-luxe .tej-kicker::before {
	background: var(--tej-blue) !important;
	width: 32px;
	height: 3px;
}

/* --- BUYER STEP CARDS — replace black/gold number circles --------------
 * Was: black circle with gold "01,02,03" digits. Now: blue gradient circle,
 * white digits. Card title softened from extra-bold to semi-bold. */
body.tej-luxe .tej-step {
	background: var(--tej-white) !important;
	border: 1px solid var(--tej-line) !important;
	box-shadow: 0 6px 20px -10px rgba(13, 90, 167, .15) !important;
}
body.tej-luxe .tej-step:hover {
	box-shadow: 0 14px 28px -10px rgba(13, 90, 167, .28) !important;
	border-color: rgba(25, 118, 210, .25) !important;
}
body.tej-luxe .tej-step__num {
	background: linear-gradient(135deg, var(--tej-blue) 0%, var(--tej-blue-dark) 100%) !important;
	color: var(--tej-white) !important;
}
body.tej-luxe .tej-step__title {
	color: var(--tej-ink) !important;
	font-weight: 700 !important;
	font-family: var(--tej-font-display);
}
body.tej-luxe .tej-step__text {
	color: var(--tej-ink-muted) !important;
}

/* --- SELLERS section — stat number underlines ------------------------- */
body.tej-luxe .tej-sellers__stats strong {
	color: var(--tej-ink) !important;
	font-weight: 800 !important;            /* numbers can stay bold for emphasis */
}
body.tej-luxe .tej-sellers__stats strong::after {
	background: var(--tej-blue) !important;
}
body.tej-luxe .tej-sellers__stats span {
	color: var(--tej-ink-muted) !important;
}

/* --- ABOUT section counters underlines -------------------------------- */
body.tej-luxe .tej-about__counters strong::after {
	background: var(--tej-blue) !important;
}

/* --- MORTGAGE input focus ring & amount color ------------------------ */
body.tej-luxe .tej-input:focus-within {
	border-color: var(--tej-blue) !important;
	box-shadow: 0 0 0 4px rgba(25, 118, 210, .15) !important;
}
body.tej-luxe .tej-mortgage__amount { color: #ffffff !important; }

/* --- LINKS — the "Learn More →" style underlines ---------------------- */
body.tej-luxe .tej-link {
	color: var(--tej-blue-dark) !important;
	border-bottom-color: var(--tej-blue) !important;
}
body.tej-luxe .tej-link:hover {
	color: var(--tej-blue) !important;
}

/* --- REELS / REVIEWS — replace black/gold eyebrows & play buttons ---- */
body.tej-luxe .tej-reels__eyebrow {
	background: var(--tej-blue) !important;
	color: var(--tej-white) !important;
}
body.tej-luxe .tej-reel:hover .tej-reel__play {
	background: var(--tej-blue) !important;
	color: var(--tej-white) !important;
}
body.tej-luxe .tej-reel__badge {
	background: rgba(13, 90, 167, .92) !important;
	color: var(--tej-white) !important;
}

/* --- FOOTER kicker labels (Newsletter, Contact, Quick Links) --------- */
body.tej-luxe .tej-foot__sub,
body.tej-luxe .tej-foot__contact span {
	color: var(--tej-blue-light) !important;
}
body.tej-luxe .tej-foot__links a:hover {
	color: var(--tej-blue-light) !important;
}
body.tej-luxe .tej-cform input:focus,
body.tej-luxe .tej-cform textarea:focus {
	border-color: var(--tej-blue) !important;
}

/* --- Community cards (if shown) — gold pill → blue pill -------------- */
body.tej-luxe .tej-comm-card__region {
	background: var(--tej-blue) !important;
	color: var(--tej-white) !important;
}
body.tej-luxe .tej-comm-card__link {
	color: var(--tej-blue-dark) !important;
	border-bottom-color: var(--tej-blue) !important;
}

/* --- SELLERS "Pro Photography / Social Media / Pricing / Negotiation" mini
 * cards: replace cream icon tile + cream border with blue-tinted versions. */
body.tej-luxe .tej-mini {
	background: var(--tej-white) !important;
	border: 1px solid var(--tej-line) !important;
	box-shadow: 0 6px 20px -10px rgba(13, 90, 167, .15) !important;
}
body.tej-luxe .tej-mini:hover {
	box-shadow: 0 14px 28px -10px rgba(13, 90, 167, .28) !important;
	border-color: rgba(25, 118, 210, .25) !important;
}
body.tej-luxe .tej-mini__icon {
	background: var(--tej-blue-light) !important;      /* was cream — now soft brand blue */
	border-radius: 12px;
}
body.tej-luxe .tej-mini__title {
	color: var(--tej-ink) !important;
	font-weight: 700 !important;
}
body.tej-luxe .tej-mini p,
body.tej-luxe .tej-mini__text {
	color: var(--tej-ink-muted) !important;
}

/* --- REVIEWS section ("What Clients Say...") ------------------------- *
 * Section uses class `.tej-rev` (not .tej-reviews). Also the "Write a
 * Google review" CTA was black bg with dark text. Re-skin both CTAs. */
body.tej-luxe .tej-rev__rating {
	background: var(--tej-white) !important;
	border: 1px solid var(--tej-line);
	box-shadow: 0 6px 18px -8px rgba(13, 90, 167, .18);
}
body.tej-luxe .tej-rev__cta--g {
	background: var(--tej-white) !important;
	color: var(--tej-ink) !important;
	border: 1px solid var(--tej-line) !important;
}
body.tej-luxe .tej-rev__cta--g:hover {
	border-color: var(--tej-blue) !important;
	box-shadow: 0 8px 22px -10px rgba(13, 90, 167, .35);
}
body.tej-luxe .tej-rev__cta--write {
	background: linear-gradient(135deg, var(--tej-blue) 0%, var(--tej-blue-dark) 100%) !important;
	color: var(--tej-white) !important;
	border: none !important;
}
body.tej-luxe .tej-rev__cta--write:hover {
	background: var(--tej-blue-dark) !important;
	color: var(--tej-white) !important;
	box-shadow: 0 12px 26px -10px rgba(13, 90, 167, .55);
}
body.tej-luxe .tej-rev__btn {
	background: var(--tej-white) !important;
	color: var(--tej-blue-dark) !important;
	border: 1px solid var(--tej-line) !important;
}
body.tej-luxe .tej-rev__btn:hover {
	background: var(--tej-blue) !important;
	color: var(--tej-white) !important;
	border-color: var(--tej-blue) !important;
}

/* --- Smooth visual transition between bands ------------------------- */
body.tej-luxe .tej-sec {
	position: relative;
}

/* ============================================================
   REELS / VIDEO CARDS — global fit + elegant fallback (site-wide)
   One source of truth for every reel system on the site:
     .tej-reel   (shared renderer / homepage / buyer resources)
     .tej-ts-card (testimonials page)
     .tas-reels  (thinking-about-selling page)
   Goals: portrait videos sit at an elegant size, fill their frame,
   and a missing thumbnail shows a branded card — never a black void.
   ============================================================ */

/* 1) Cap card width so 9:16 vertical reels look right, and center the row. */
.tej-reels__grid,
.tej-ts-grid,
.tas-reels__grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 280px)) !important;
	justify-content: center !important;
}

/* 2) Consistent portrait frame + branded (not flat-black) backdrop. */
.tej-reel__media,
.tej-reel__media--video,
.tej-ts-card__media,
.tej-ts-card__media--video,
.tas-reels__media {
	aspect-ratio: 9 / 16 !important;
	max-height: 520px !important;
	background: linear-gradient(150deg, #0d4f4f 0%, #0a3535 55%, #082a2a 100%) !important;
}

/* 3) Make every cover / photo fill the frame cleanly (no letterboxing). */
.tej-reel__media img, .tej-reel__cover,
.tej-ts-card__media img, .tej-ts-card__cover,
.tas-reels__media img, .tas-reels__cover {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* 4) Branded play badge ONLY for cards that have no media at all
      (text-only reels). :not(:has(svg)) skips cards that already
      render a play button; :not(:has(img/iframe)) skips real videos. */
.tej-reel__media:not(:has(img)):not(:has(iframe)):not(:has(svg))::after,
.tej-ts-card__media:not(:has(img)):not(:has(iframe)):not(:has(svg))::after,
.tas-reels__media:not(:has(img)):not(:has(iframe)):not(:has(svg))::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: rgba(255,255,255,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d4f4f'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 28px no-repeat;
	box-shadow: 0 10px 26px -8px rgba(0,0,0,.55);
}

/* ============================================================
   MARKER GALLERIES — reusable auto-scroll photo marquee (site-wide)
   Rendered by tej_render_marquee_gallery(). Matches the About Tej
   "Life Beyond the Listings" look. Photos tagged via Media → Description.
   ============================================================ */
.tej-mq-sec { padding: 72px 0; overflow: hidden; background: #fff; }
.tej-mq-sec--cream { background: #f7f4ee; }
.tej-mq-kicker { text-align:center; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#d8632f; margin:0 0 12px; }
.tej-mq-h2 { font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:34px; line-height:1.15; color:#0d4f4f; text-align:center; margin:0 0 14px; letter-spacing:-.01em; }
.tej-mq-sub { text-align:center; font-size:17px; line-height:1.6; color:#5d6b6a; max-width:640px; margin:0 auto 44px; padding:0 22px; }
.tej-mq-empty { text-align:center; color:#5d6b6a; font-size:14px; max-width:620px; margin:0 auto; padding:0 22px; }

.tej-mq { position:relative; width:100%; 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); }
.tej-mq__track { display:flex; gap:20px; width:max-content; align-items:center; animation: tejMqScroll linear infinite; }
.tej-mq:hover .tej-mq__track { animation-play-state:paused; }
/* Fixed height, width follows each image's natural shape → every photo fills
   its frame edge-to-edge (no empty bars); portrait & landscape sit side by side. */
.tej-mq__photo { flex:0 0 auto; height:440px; border-radius:18px; overflow:hidden; background:#0d4f4f; box-shadow:0 20px 44px -22px rgba(13,79,79,.5); }
.tej-mq__photo img { height:100%; width:auto; max-width:none; display:block; object-fit:cover; transition:transform .6s ease; }
.tej-mq__photo:hover img { transform:scale(1.04); }
@keyframes tejMqScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tej-mq__track { animation:none; overflow-x:auto; } }
@media (max-width:600px) { .tej-mq-h2 { font-size:26px; } .tej-mq__photo { height:300px; } }

/* ----------------------------------------------------------------------
   Site-wide dropdown arrow — ensures every <select> shows a caret.
   Low specificity (bare element selector) so any component that already
   draws its own arrow via a class selector keeps winning (no double arrow).
   Excludes multi-select / list boxes.
   ---------------------------------------------------------------------- */
select:not([multiple]):not([size]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230d4f4f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 14px;
	padding-right: 38px;
}

/* ----------------------------------------------------------------------
   Awards & Recognition — auto-scrolling logo marquee (homepage hero)
   ---------------------------------------------------------------------- */
.tej-awmq { overflow: hidden; max-width: 100%; margin: 0; padding: 22px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tej-awmq__track { display: flex; align-items: center; gap: 48px; width: max-content; animation: tejAwmqScroll 30s linear infinite; }
.tej-awmq:hover .tej-awmq__track { animation-play-state: paused; }
.tej-awmq__logo { height: 140px; width: auto; flex: 0 0 auto; display: block; }
@keyframes tejAwmqScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tej-awmq__track { animation: none; overflow-x: auto; } }
@media (max-width: 600px) { .tej-awmq__logo { height: 104px; } .tej-awmq__track { gap: 30px; } }
/* MCNE text badge chip inside the awards marquee */
.tej-awmq__chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 66px; padding: 0 22px; background: #fff; border: 1px solid rgba(13,90,167,.15); border-radius: 999px; font-family: var(--tej-font-display, "Plus Jakarta Sans", sans-serif); font-weight: 700; font-size: 14px; color: var(--tej-blue-dark, #0a3a7a); white-space: nowrap; box-shadow: 0 4px 14px -8px rgba(10,58,122,.3); }
.tej-awmq__chip-ico { font-size: 18px; line-height: 1; }
@media (max-width: 600px) { .tej-awmq__chip { height: 54px; font-size: 12.5px; padding: 0 16px; } }