/**
 * FLRHUB "Concept A — Immersive" homepage.
 * Full-bleed cinematic scenes, side dot-nav, scroll reveals.
 * Warm sand/stone/charcoal. Scoped under .flra (won't leak to header/footer).
 * Content scenes (.flra-flow) flow naturally; image scenes fill the viewport.
 */

.flra {
	--sand:#f3ede3; --cream:#faf6ef; --stone:#e6ddcf;
	--char:#1c1a17; --char-2:#2a2724; --ink:#34302b; --muted:#7a726a;
	--accent:#c1622d; --accent-d:#a84f20; --line:#ddd2c2;
	--maxw:1440px;
	font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
	color:#fff; background:var(--char); line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
.flra *{box-sizing:border-box}
.flra img{display:block;max-width:100%;height:auto}
.flra a{text-decoration:none}
.flra :is(h1,h2,h3){font-family:"Fraunces",Georgia,serif;font-weight:900;line-height:1.04;letter-spacing:-.02em;margin:0 0 .4em}
.flra h1{font-size:clamp(2.8rem,7vw,6rem)}
.flra h2{font-size:clamp(2rem,4.2vw,3.4rem)}
.flra h3{font-size:1.3rem}
.flra p{margin:0 0 1rem}

/* ---- scenes ---- */
.flra-scene{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:110px 0;scroll-margin-top:90px}
.flra-flow{min-height:auto;padding:100px 0}
.flra-scene__bg{position:absolute;inset:0;z-index:0;background:var(--bg) center/cover no-repeat;transform:scale(1.06);will-change:transform}
.flra-scene__tint{position:absolute;inset:0;z-index:1;background:rgba(20,18,15,.6)}
.flra-wrap{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 6vw}
.flra-wrap--narrow{max-width:820px}
.flra-wrap--center{text-align:center}

/* ---- shared bits ---- */
.flra-eyebrow{display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.flra-eyebrow--dark{color:var(--accent-d)}
.flra-dark{color:var(--char)!important}
.flra-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:700;font-size:.98rem;padding:15px 30px;border-radius:2px;border:2px solid transparent;transition:.2s;cursor:pointer}
.flra-btn:hover{background:var(--accent-d);color:#fff;transform:translateY(-2px)}
.flra-btn--ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.flra-btn--ghost:hover{background:#fff;color:var(--char)}
.flra-btn--lg{padding:17px 38px;font-size:1.05rem}

/* ---- dot nav ---- */
.flra-dots{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:13px}
.flra-dots a{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(140,120,100,.7);background:transparent;transition:.3s;cursor:pointer}
.flra-dots a.active,.flra-dots a:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.35)}

/* ---- reveal ---- */
.flra .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.flra .rv.in{opacity:1;transform:none}

/* ---- HERO ---- */
.flra-hero__tint{background:linear-gradient(105deg,rgba(20,18,15,.92),rgba(20,18,15,.5) 60%,rgba(20,18,15,.2))}
.flra-hero h1{max-width:15ch}
.flra-hero p{font-size:clamp(1.1rem,1.6vw,1.35rem);color:#e7ded2;max-width:46ch;margin:24px 0 32px}
.flra-cta{display:flex;gap:16px;flex-wrap:wrap}
.flra-trust{list-style:none;margin:30px 0 0;padding:0;display:flex;gap:22px;flex-wrap:wrap;font-weight:600;font-size:.95rem;color:#f3ede3}
.flra-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#cdbfab;text-align:center}
.flra-cue::before{content:"";display:block;width:1px;height:42px;background:linear-gradient(#cdbfab,transparent);margin:0 auto 9px}

/* ---- STATS ---- */
.flra-stats{background:var(--char-2)}
.flra-stats h2{color:#fff;margin-bottom:50px}
.flra-statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.flra-stat__n{display:block;font-family:"Fraunces",serif;font-weight:900;font-size:clamp(3rem,7vw,5.4rem);color:var(--accent);line-height:1}
.flra-stat__l{color:#cdbfab;font-weight:600;letter-spacing:.04em;margin-top:8px}

/* ---- WORK ---- */
.flra-work__grid{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
.flra-work h2{color:#fff}
.flra-work p{color:#e7ded2;font-size:1.12rem;max-width:38ch;margin-bottom:26px}
.flra-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.flra-thumbs figure{margin:0;aspect-ratio:4/3;background-size:cover;background-position:center;border-radius:4px;transition:transform .4s ease}
.flra-thumbs figure:hover{transform:scale(1.03)}

/* ---- KIOSK EMBED ---- */
.flra-kiosk{background:var(--cream);color:var(--ink)}

/* ---- BENEFITS ---- */
.flra-benefits{background:var(--sand);color:var(--ink)}
.flra-benefits__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:36px;background:var(--line);border:1px solid var(--line)}
.flra-benefit{background:var(--cream);padding:30px}
/* circular icon chip */
.flra-benefit__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(193,98,45,.10);border:1.5px solid rgba(193,98,45,.35);color:var(--accent);transition:background-color .25s ease,color .25s ease,transform .25s ease}
.flra-benefit__icon svg{width:26px;height:26px}
.flra-benefit:hover .flra-benefit__icon{background:var(--accent);color:#fff;transform:translateY(-2px)}
.flra-benefit h3{color:var(--char);margin:16px 0 .35em;font-size:1.15rem}
.flra-benefit p{color:var(--muted);margin:0;font-size:.98rem}

/* ---- PROCESS ---- */
.flra-process{background:var(--char)}
.flra-process h2{color:#fff}
.flra-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px;text-align:left}
.flra-step{border-top:3px solid var(--accent);padding-top:22px}
.flra-step__no{font-family:"Fraunces",serif;font-weight:900;font-size:3rem;color:var(--accent);line-height:1}
.flra-step h3{color:#fff;margin:8px 0 .3em}
.flra-step p{color:#cdbfab;margin:0}

/* ---- REVIEWS ---- */
.flra-reviews{background:var(--stone);color:var(--ink)}
.flra-quote{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--char);line-height:1.3;margin:0 auto 26px;max-width:760px}
.flra-rating img{margin:0 auto;width:150px}

/* ---- FAQ ---- */
.flra-faq{background:var(--cream);color:var(--ink)}
.flra-faqs{margin-top:34px}
.flra-faqitem{background:#fff;border:1px solid var(--line);border-radius:4px;margin-bottom:10px;overflow:hidden}
.flra-faqitem summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:"Fraunces",serif;font-weight:700;font-size:1.12rem;color:var(--char);display:flex;justify-content:space-between;align-items:center;gap:16px}
.flra-faqitem summary::-webkit-details-marker{display:none}
.flra-faqitem summary::after{content:"+";color:var(--accent);font-size:1.5rem;font-family:"Inter",sans-serif;line-height:1}
.flra-faqitem[open] summary::after{content:"\2013"}
.flra-faqitem[open] summary{background:var(--stone)}
.flra-faqitem__a{padding:0 24px 22px;color:var(--muted)}

/* ---- FINAL + FORM ---- */
.flra-final__tint{background:linear-gradient(rgba(20,18,15,.86),rgba(20,18,15,.86))}
.flra-final__grid{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
.flra-final__copy h2{color:#fff}
.flra-final__copy p{color:#e7ded2;font-size:1.15rem;max-width:40ch}
.flra-fine{font-size:.82rem;color:#cdbfab}
.flra-formcard{background:var(--cream);color:var(--ink);border-radius:8px;padding:32px 30px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.flra-formcard h3{color:var(--char);font-size:1.6rem;margin-bottom:18px}
.flra-formcard .gform_wrapper input:not([type=submit]),
.flra-formcard .gform_wrapper textarea,
.flra-formcard .gform_wrapper select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:#fff;font-family:"Inter",sans-serif;color:var(--ink)}
.flra-formcard .gform_wrapper .gfield_label,
.flra-formcard .gform_wrapper label{color:var(--ink);font-weight:600}
.flra-formcard .gform_wrapper .gform_footer input[type=submit],
.flra-formcard .gform_wrapper button{background:var(--accent)!important;color:#fff!important;border:none!important;padding:15px 30px!important;border-radius:2px!important;font-weight:700!important;width:100%;cursor:pointer}
.flra-formcard .gform_wrapper .gform_footer input[type=submit]:hover{background:var(--accent-d)!important}

/* ---- responsive ---- */
@media(max-width:900px){
	.flra-work__grid,.flra-final__grid{grid-template-columns:1fr;gap:36px}
	.flra-statrow,.flra-steps,.flra-benefits__grid{grid-template-columns:1fr}
	.flra-dots{display:none}
	.flra-scene{padding:88px 0;min-height:auto}
}
@media(max-width:600px){
	.flra-cta .flra-btn{flex:1 1 auto}
	.flra-trust{gap:14px;font-size:.88rem}
}

/* ---- LARGE screens: let the layout breathe & fill wide monitors ----
 * The content column widens and type/spacing scale up gently so the page
 * doesn't sit stranded in the middle. Text-heavy narrow wraps stay tighter. */
@media(min-width:1600px){
	.flra{font-size:18px}
	.flra-wrap{max-width:1600px;padding:0 5vw}
	.flra-scene{padding:9vh 0}
	.flra-hero h1{font-size:clamp(4rem,5.4vw,7rem)}
	.flra-hero p{font-size:1.5rem;max-width:52ch}
	.flra h2{font-size:clamp(2.6rem,3.4vw,4.2rem)}
}
@media(min-width:2100px){
	.flra{font-size:20px}
	.flra-wrap{max-width:1840px}
	.flra-wrap--narrow{max-width:1000px}
	.flra-hero p{max-width:56ch}
}
/* Cap the pure-text blocks so lines never get uncomfortably long even wide. */
@media(min-width:1600px){
	.flra-benefit p,.flra-step p,.flra-work p{max-width:44ch}
}

@media(prefers-reduced-motion:reduce){
	.flra .rv{opacity:1;transform:none;transition:none}
	.flra-scene__bg{transform:none}
}

/* ===================================================================== *
 * HEADER (Elementor header, post 46) — suit the immersive Concept A.
 * Transparent + floating over the hero; solid charcoal once sticky.
 * These target the header IDs directly (header is outside .flra).
 * ===================================================================== */

/* Float the header over the hero and remove its light bg / box shadow. */
.elementor-46 .elementor-location-header,
.elementor-46 .elementor-element-f1c5517 {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease !important;
}
/* Float the header ABSOLUTELY over the hero so the cinematic image shows
 * through. Only while NOT sticky — once Elementor makes it sticky (fixed),
 * its own positioning takes over and our charcoal bar kicks in. */
body.home .elementor-46 .elementor-location-header {
	position: absolute; top: 0; left: 0; right: 0; z-index: 40;
}
body.home .elementor-46 .elementor-element-f1c5517.elementor-sticky--active {
	position: fixed;
}
/* Give the hero headroom so its text clears the floating header. */
/* Hero content is flex-centered; only a small top bias is needed to offset the
 * floating header so the block reads visually centred, not pushed down. */
.flra-hero { padding-top: 96px; padding-bottom: 64px; }
@media (max-width: 767px){ .flra-hero { padding-top: 84px; padding-bottom: 48px; } }

/* Header text/links light over the hero (phone number, etc.). */
.elementor-46 .elementor-location-header .elementor-widget-text-editor,
.elementor-46 .elementor-location-header .elementor-widget-text-editor a,
.elementor-46 .elementor-location-header .lp-call-number,
.elementor-46 .elementor-location-header .lp-call-number a {
	color: #f3ede3 !important;
}

/* CTA button in the header = terracotta pill, matching the site. */
.elementor-46 .elementor-location-header .elementor-button {
	background-color: #c1622d !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	border-radius: 2px !important;
	font-weight: 700 !important;
	transition: background-color .2s ease, transform .2s ease !important;
}
.elementor-46 .elementor-location-header .elementor-button:hover {
	background-color: #a84f20 !important;
	transform: translateY(-2px);
}

/* When sticky (scrolled): solid charcoal bar with a hairline + shadow. */
.elementor-46 .elementor-element-f1c5517.elementor-sticky--active {
	background-color: rgba(20, 18, 15, 0.92) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 30px -18px rgba(0, 0, 0, 0.8) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

@media (max-width: 767px) {
	/* On mobile keep the header readable: solid charcoal always. */
	.elementor-46 .elementor-location-header,
	.elementor-46 .elementor-element-f1c5517,
	.elementor-46 .elementor-element-f1c5517.elementor-sticky--active {
		background-color: rgba(20, 18, 15, 0.94) !important;
		position: relative; z-index: 100 !important;
	}
	/* Balance the two logos (brand primary, badge secondary). */
	.elementor-46 .elementor-element-e5520dc img { width: 120px !important; }
	.elementor-46 .elementor-element-0c8c998 img { width: 84px !important; }
	.elementor-46 .elementor-location-header .elementor-button {
		width: auto !important; display: inline-flex !important;
		padding: 10px 16px !important; font-size: 14px !important;
	}
}

/* ===================================================================== *
 * "Get Free Quote" popup (Elementor popup 206) — match the B design.
 * The popup is rendered OUTSIDE .flrb (appended to <body>), so these rules
 * are unscoped and use literal hex (the .flrb vars aren't in scope here).
 * post-206.css loads after this file, so !important is required to win.
 * Palette: cream modal, charcoal panel/heads, terracotta submit button.
 * ===================================================================== */

/* Modal shell: warm cream, soft radius, sand hairline. */
#elementor-popup-modal-206 .dialog-widget-content {
	background-color: #faf6ef !important;
	background-image: none !important;
	border: 1px solid #e6ddcf !important;
	border-radius: 8px !important;
	box-shadow: 0 40px 90px -30px rgba(42, 39, 36, 0.55) !important;
	overflow: hidden;
	font-family: "Inter", sans-serif;
}

/* Inner dark panel (#203334) -> charcoal, so it reads as the B brand. */
.elementor-206 .elementor-element.elementor-element-18104ca:not(.elementor-motion-effects-element-type-background),
.elementor-206 .elementor-element.elementor-element-18104ca > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: #2a2724 !important;
}

/* Beige card border -> warm sand line. */
.elementor-206 .elementor-element.elementor-element-473747d {
	border-color: #ddd2c2 !important;
}

/* Teal eyebrow/heading text -> terracotta accent. */
.elementor-206 .elementor-element.elementor-element-086713d,
.elementor-206 .elementor-element.elementor-element-086713d a {
	color: #c1622d !important;
}

/* Popup headings in the display serif; body text charcoal. */
#elementor-popup-modal-206 :is(h1,h2,h3,.elementor-heading-title) {
	font-family: "Fraunces", Georgia, serif !important;
	color: #2a2724 !important;
	letter-spacing: -0.01em;
}
/* Text sitting on the dark inner panel stays light. */
.elementor-206 .elementor-element-18104ca :is(h1,h2,h3,.elementor-heading-title,p) {
	color: #faf6ef !important;
}

/* Form fields: clean, rounded, on-brand. */
#elementor-popup-modal-206 .gform_wrapper input:not([type="submit"]),
#elementor-popup-modal-206 .gform_wrapper textarea,
#elementor-popup-modal-206 .gform_wrapper select {
	background: #ffffff !important;
	border: 1px solid #ddd2c2 !important;
	border-radius: 3px !important;
	color: #34302b !important;
	font-family: "Inter", sans-serif !important;
}
#elementor-popup-modal-206 .gform_wrapper input:not([type="submit"]):focus,
#elementor-popup-modal-206 .gform_wrapper textarea:focus,
#elementor-popup-modal-206 .gform_wrapper select:focus {
	outline: none !important;
	border-color: #c1622d !important;
	box-shadow: 0 0 0 3px rgba(193, 98, 45, 0.22) !important;
}
#elementor-popup-modal-206 .gfield_label,
#elementor-popup-modal-206 .gform_wrapper label {
	color: #34302b !important;
	font-family: "Inter", sans-serif !important;
	font-weight: 600 !important;
}

/* Submit button -> terracotta pill matching the B CTAs. */
#elementor-popup-modal-206 input#gform_submit_button_1,
input#gform_submit_button_1 {
	background: #c1622d !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 2px !important;
	font-family: "Inter", sans-serif !important;
	font-weight: 700 !important;
	padding: 15px 30px !important;
	transition: background-color .18s ease !important;
	cursor: pointer;
}
#elementor-popup-modal-206 input#gform_submit_button_1:hover,
input#gform_submit_button_1:hover {
	background: #a84f20 !important;
}

/* Close button on-brand. */
/* Close button sits top-right over the dark column — make it a clear light
 * chip so it's visible on any background, terracotta on hover. */
#elementor-popup-modal-206 .dialog-close-button {
	color: #ffffff !important;
	opacity: 1 !important;
	background: rgba(20, 18, 15, 0.55) !important;
	border-radius: 50% !important;
	width: 38px !important;
	height: 38px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	top: 12px !important;
	right: 12px !important;
	z-index: 10 !important;
	transition: background-color .2s ease, color .2s ease !important;
}
#elementor-popup-modal-206 .dialog-close-button i,
#elementor-popup-modal-206 .dialog-close-button svg {
	color: #ffffff !important;
	fill: #ffffff !important;
}
#elementor-popup-modal-206 .dialog-close-button:hover {
	background: #c1622d !important;
	color: #ffffff !important;
}

/* ---- Visibility fixes ---- */

/* (1) "$600 free consult" heading sat on a muddy olive panel (#6F7166CC) and
 * was hard to read. Give the panel a clean terracotta band + white text. */
.elementor-206 .elementor-element.elementor-element-473747d,
.elementor-206 .elementor-element.elementor-element-473747d:not(.elementor-motion-effects-element-type-background) {
	background-color: #c1622d !important;   /* solid terracotta, not translucent */
	border-color: #c1622d !important;
	border-radius: 6px !important;
}
.elementor-206 .elementor-element.elementor-element-109714b,
.elementor-206 .elementor-element.elementor-element-109714b .elementor-heading-title {
	color: #ffffff !important;   /* white text on terracotta = high contrast */
}

/* (2) The right-hand column (55a8467) holds a WHITE gift-card graphic + white
 * "Get Free Quote" heading, but inherited the cream modal bg -> invisible.
 * Give this column a charcoal background so the white artwork/text show. */
.elementor-206 .elementor-element.elementor-element-55a8467,
.elementor-206 .elementor-element.elementor-element-55a8467:not(.elementor-motion-effects-element-type-background) {
	background-color: #2a2724 !important;
	border-radius: 0 8px 8px 0;
}
/* Text inside that charcoal column stays light (override earlier serif=charcoal). */
.elementor-206 .elementor-element-55a8467 :is(h1,h2,h3,.elementor-heading-title),
.elementor-206 .elementor-element-55a8467 p,
.elementor-206 .elementor-element-55a8467 .gfield_label,
.elementor-206 .elementor-element-55a8467 label {
	color: #faf6ef !important;
}