/*
Theme Name: Falc-Lion General Construction — ACF PRO
Theme URI: https://falclion.com
Author: Your Agency
Description: Premium construction theme for Falc-Lion General Construction. Roofing, siding & interiors across Vermont and New Hampshire. — ACF PRO Edition with Gutenberg blocks, full REST API, and gallery repeater.
Version: 3.7.2-acfpro
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.1
License: Commercial
Text Domain: falclion
Tags: construction, roofing, business, full-width-template, custom-colors, custom-menu
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  --nr-dark:      #0f1117;
  --nr-dark-2:    #1a1d24;
  --nr-dark-3:    #252830;
  --nr-slate:     #3a3f4a;
  --nr-mid:       #6b7280;
  --nr-light:     #d1cec8;
  --nr-cream:     #f5f1ea;
  --nr-white:     #fefefe;
  --nr-amber:     #d97706;
  --nr-amber-lt:  #fbbf24;
  --nr-amber-dk:  #92400e;
  --nr-teal:      #0f766e;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --section-py:   clamp(4rem, 8vw, 7rem);
  --container:    1280px;
  --radius:       .75rem;
  --radius-lg:    1.25rem;
  --ease:         cubic-bezier(.25,.46,.45,.94);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: #ffffff;
  color: #0f1117;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); }

.nr-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.nr-display {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.nr-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d97706;
}
.nr-label::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 2px;
  background: #d97706;
  flex-shrink: 0;
}

.nr-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  border-radius: 3rem;
  font-weight: 600;
  font-size: .9375rem;
  transition: all .2s var(--ease);
  border: 2px solid transparent;
  white-space: nowrap;
  font-family: var(--font-body);
}
.nr-btn-primary { background: #d97706; color: #ffffff; border-color: #d97706; }
.nr-btn-primary:hover { background: #92400e; border-color: #92400e; transform: translateY(-2px); }
.nr-btn-outline { background: transparent; color: #ffffff; border-color: rgba(255,255,255,.5); }
.nr-btn-outline:hover { background: rgba(255,255,255,.1); border-color: #ffffff; }
.nr-btn-dark { background: #0f1117; color: #ffffff; border-color: #0f1117; }
.nr-btn-dark:hover { background: #3a3f4a; transform: translateY(-2px); }

.nr-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.nr-reveal.is-visible { opacity: 1; transform: none; }
.nr-reveal-delay-1 { transition-delay: .1s; }
.nr-reveal-delay-2 { transition-delay: .2s; }
.nr-reveal-delay-3 { transition-delay: .3s; }
.nr-reveal-delay-4 { transition-delay: .4s; }

.nr-header { background: transparent; }
.nr-header.scrolled { background: #0f1117; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
/* Inner pages: solid brand header from the very first pixel — white nav is
   invisible over the cream page background, so transparency is home-only. */
.nr-header.nr-header-inner { background: #0f1117; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.nr-header.light-bg { background: #ffffff; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.nr-header.light-bg .nr-logo-white { display: none !important; }
.nr-header.light-bg .nr-logo-dark  { display: block !important; }
.nr-header.light-bg .nr-menu-btn   { color: #0f1117 !important; }
.nr-header.light-bg .nr-header-phone { color: #0f1117 !important; }
.nr-header.light-bg nav a { color: #0f1117 !important; }

.nr-filter-btn {
  padding: .5rem 1.25rem;
  border-radius: 3rem;
  font-size: .875rem;
  font-weight: 600;
  border: 1.5px solid #d1cec8;
  background: white;
  color: #6b7280;
  cursor: pointer;
  transition: all .2s ease;
}
.nr-filter-btn:hover, .nr-filter-btn.active {
  background: #0f1117;
  border-color: #0f1117;
  color: white;
}

.nr-swiper-btn {
  width: 48px !important; height: 48px !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 50% !important;
  backdrop-filter: blur(8px);
  transition: all .2s ease;
}
.nr-swiper-btn:hover { background: rgba(255,255,255,.2) !important; }
.nr-swiper-btn::after { font-size: 14px !important; font-weight: 900; color: white !important; }
.nr-hero-pagination .swiper-pagination-bullet {
  width: 6px; height: 6px;
  background: rgba(255,255,255,.4); opacity: 1;
  transition: all .3s ease;
}
.nr-hero-pagination .swiper-pagination-bullet-active {
  width: 28px; border-radius: 3px; background: #d97706;
}
.nr-test-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: #d1cec8; opacity: 1; }
.nr-test-pagination .swiper-pagination-bullet-active { background: #d97706; width: 24px; border-radius: 4px; }

.nr-scroll-line { animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse {
  0%,100% { opacity:.4; transform:scaleY(1); }
  50% { opacity:.8; transform:scaleY(1.2); }
}

[data-lucide] { display: inline-block; vertical-align: middle; flex-shrink: 0; }
@media (max-width: 768px) { .nr-hide-mobile { display: none !important; } }

/* ── WP Go Maps PRO — dark theme integration ── */
.fl-wpgomaps-wrap {
    position: relative;
    min-height: 350px;
}
.fl-wpgomaps-wrap .wpgmza-map,
.fl-wpgomaps-wrap .wpgmza_map,
.fl-wpgomaps-wrap #wpgmza_map,
.fl-wpgomaps-wrap [id^="wpgmza_map_"],
.fl-wpgomaps-wrap .wpgmza-map-canvas {
    border-radius: 1rem !important;
    min-height: 350px;
}
/* Ensure WP Go Maps container fills the wrapper */
.fl-wpgomaps-wrap > div,
.fl-wpgomaps-wrap > .wpgmza_wrapper {
    width: 100% !important;
    min-height: 350px;
    border-radius: 1rem !important;
    overflow: hidden;
}
/* Remove default WP Go Maps bottom border/padding */
.fl-wpgomaps-wrap .wpgmza_below_map { display: none; }
/* Info window styling to match theme */
.wpgmza_iw_content {
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-size: .875rem !important;
}

/* ════════════════════════════════════════════════
   IMPROVEMENTS — a11y, mobile call bar, back-to-top
   ════════════════════════════════════════════════ */

/* ── Skip link (visible only on keyboard focus) ── */
.fl-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: #d97706;
    color: #fff;
    padding: .75rem 1.5rem;
    font-weight: 700;
    font-size: .9375rem;
    border-radius: 0 0 .5rem 0;
}
.fl-skip-link:focus {
    left: 0;
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

/* ── Visible focus states for keyboard navigation ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #d97706;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Respect reduced-motion preference (a11y / vestibular) ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .nr-reveal { opacity: 1 !important; transform: none !important; }
    .nr-scroll-line { animation: none !important; }
}

/* ════════════════════════════════════════════════
   PREMIUM UI/UX UPGRADE
   Ken Burns · gradient text · glass · shine · noise
   ════════════════════════════════════════════════ */

/* ── Scroll progress bar ── */
#fl-scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, #d97706, #fbbf24);
    z-index: 100001; pointer-events: none;
    box-shadow: 0 0 12px rgba(217,119,6,.55);
}

/* ── Subtle film-grain overlay (premium texture) ── */
body::after {
    content: ''; position: fixed; inset: 0; z-index: 99998;
    pointer-events: none; opacity: .028;
    transform: translateZ(0); will-change: transform; /* own compositor layer — no scroll repaints */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Custom text selection ── */
::selection { background: #d97706; color: #fff; }

/* ── Ken Burns: slow zoom on active hero slide ── */
@keyframes fl-kenburns {
    0%   { transform: scale(1)    translate(0, 0); }
    100% { transform: scale(1.08) translate(-0.6%, -0.6%); }
}
.nr-hero-swiper .swiper-slide-active img,
.nr-hero-swiper .swiper-slide-active video {
    animation: fl-kenburns 9s ease-out forwards;
}

/* ── Gradient text utility (applied to key headings) ── */
.fl-gradient-text {
    background: linear-gradient(115deg, #ffffff 30%, #fbbf24 65%, #d97706 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Button shine sweep ── */
.fl-shine { position: relative; overflow: hidden; isolation: isolate; }
.fl-shine::before {
    content: ''; position: absolute; top: 0; left: -80%;
    width: 55%; height: 100%; z-index: 1; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg); transition: left .55s ease;
}
.fl-shine:hover::before { left: 130%; }

/* ── Featured card animated gradient border ── */
@keyframes fl-border-spin { to { --fl-angle: 360deg; } }
@property --fl-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.fl-featured-glow {
    position: relative;
    background:
        linear-gradient(#0f1117, #0f1117) padding-box,
        conic-gradient(from var(--fl-angle), #d97706, #fbbf24, #92400e, #d97706) border-box !important;
    border: 2px solid transparent !important;
    animation: fl-border-spin 5s linear infinite;
}
@supports not (background: paint(a)) {
    .fl-featured-glow { animation: none; border-color: #d97706 !important; }
}

/* ── Glassmorphism testimonial cards ── */
.fl-glass {
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.6) !important;
    box-shadow: 0 8px 32px rgba(15,17,23,.08) !important;
}

/* ── Hero pagination: autoplay progress fill ── */
.nr-hero-pagination .swiper-pagination-bullet-active {
    position: relative; overflow: hidden; background: rgba(255,255,255,.25);
}
.nr-hero-pagination .swiper-pagination-bullet-active::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: #d97706; transform-origin: left;
    animation: fl-bullet-fill 7s linear forwards;
}
@keyframes fl-bullet-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Image hover zoom (portfolio / services) ── */
.fl-img-zoom { overflow: hidden; }
.fl-img-zoom img { transition: transform .8s cubic-bezier(.22,1,.36,1); }
.fl-img-zoom:hover img { transform: scale(1.07); }

/* ── Underline sweep on nav links ── */
.nr-header nav a { position: relative; }
.nr-header nav a::after {
    content: ''; position: absolute; left: 0; bottom: -4px;
    width: 100%; height: 2px; background: #d97706;
    transform: scaleX(0); transform-origin: right;
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.nr-header nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── Card lift shadow refinement ── */
.fl-lift { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }
.fl-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -12px rgba(15,17,23,.18); }

/* ── Reduced motion: disable all decorative animation ── */
@media (prefers-reduced-motion: reduce) {
    .nr-hero-swiper .swiper-slide-active img,
    .nr-hero-swiper .swiper-slide-active video { animation: none; }
    .fl-featured-glow { animation: none; }
    .fl-shine::before { display: none; }
    body::after { display: none; }
    .nr-hero-pagination .swiper-pagination-bullet-active::after { animation: none; transform: scaleX(1); }
}

/* ── Services marquee ── */
.fl-marquee {
    background: #0f1117; border-top: 1px solid rgba(255,255,255,.06);
    overflow: hidden; padding: 1.1rem 0; white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fl-marquee-track { display: inline-flex; align-items: center; gap: 2.5rem; animation: fl-marquee-scroll 28s linear infinite; will-change: transform; }
.fl-marquee:hover .fl-marquee-track { animation-play-state: paused; }
.fl-marquee-item {
    font-family: var(--font-display); font-size: 1.35rem; color: rgba(255,255,255,.35);
    letter-spacing: .02em; transition: color .3s;
}
.fl-marquee-item:hover { color: #fbbf24; }
.fl-marquee-dot { color: #d97706; font-size: .8rem; }
@keyframes fl-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fl-marquee-track { animation: none; } }

/* When GSAP owns reveals, neutralize the CSS transition to prevent double-easing */
.fl-gsap-reveals .nr-reveal { transition: none; }

/* ── Lenis compatibility: kill native smooth-scroll double-easing ──
   Lenis adds .lenis/.lenis-smooth to <html> when active. Without this,
   Chrome/Brave apply CSS smooth + Lenis smoothing = lag then jump. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Firefox: guarantee the map region has real dimensions before tiles load */
.fl-wpgomaps-wrap { min-height: 350px; contain: layout; }
.fl-wpgomaps-wrap iframe { min-height: 350px; width: 100%; display: block; }

/* ── Card gallery slideshow (project display mode: gallery) ── */
.fl-card-gallery { position: relative; overflow: hidden; aspect-ratio: 4/3; background: #1a1d24; }
.fl-cg-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .45s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.fl-cg-img.is-active { opacity: 1; position: relative; }
.fl-card-gallery:hover .fl-cg-img.is-active { transform: scale(1.04); }
.fl-cg-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(0,0,0,.55); color: #fff; font-size: 1.25rem; line-height: 1;
    backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .25s, background .2s;
}
.fl-cg-prev { left: .6rem; } .fl-cg-next { right: .6rem; }
.fl-card-gallery:hover .fl-cg-nav, .fl-cg-nav:focus-visible { opacity: 1; }
.fl-cg-nav:hover { background: #d97706; }
.fl-cg-count {
    position: absolute; bottom: .6rem; right: .6rem; z-index: 5;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px); color: #fff;
    font-size: .7rem; font-weight: 700; padding: .25rem .6rem; border-radius: 3rem;
}
@media (hover: none) { .fl-cg-nav { opacity: 1; } } /* always visible on touch */
/* GLightbox: brand the controls */
.glightbox-clean .gnext, .glightbox-clean .gprev { background: rgba(217,119,6,.85); }

/* ── Service coverflow carousel ── */
.fl-svc-coverflow { padding: 1rem 0 3.2rem; }
.fl-svc-coverflow .swiper-slide {
    width: min(680px, 78vw); aspect-ratio: 16/10;
    border-radius: 1.25rem; overflow: hidden;
    box-shadow: 0 24px 60px -18px rgba(0,0,0,.6);
}
.fl-svc-coverflow .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-svc-coverflow .swiper-pagination-bullet { background: rgba(255,255,255,.4); opacity: 1; }
.fl-svc-coverflow .swiper-pagination-bullet-active { background: #d97706; width: 24px; border-radius: 4px; }


/* ── Services "Show all" collapse ── */
.fl-svc-hidden { display: none !important; }
body.fl-svc-open .fl-svc-hidden { display: flex !important; animation: fl-svc-in .5s ease both; }
@keyframes fl-svc-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── Services dual display engine ── */
.fl-services-swiper { padding: 0 0 3.4rem; overflow: hidden; } /* hidden: no page-wide scrollbar */
.fl-services-swiper .swiper-slide { height: auto; display: flex; }
/* Arrows — same look as the hero */
.fl-services-swiper .swiper-button-prev,
.fl-services-swiper .swiper-button-next {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(15,17,23,.82); backdrop-filter: blur(8px);
    border: 1px solid rgba(217,119,6,.4); color: #fbbf24;
    transition: background .2s, color .2s, transform .2s;
}
.fl-services-swiper .swiper-button-prev:hover,
.fl-services-swiper .swiper-button-next:hover { background: #d97706; color: #fff; transform: scale(1.06); }
.fl-services-swiper .swiper-button-prev::after,
.fl-services-swiper .swiper-button-next::after { font-size: 18px; font-weight: 800; }
/* Bigger, easier pagination dots */
.fl-services-swiper .swiper-pagination { bottom: 0; }
.fl-services-swiper .swiper-pagination-bullet {
    width: 12px; height: 12px; margin: 0 5px !important;
    background: rgba(15,17,23,.28); opacity: 1; transition: all .25s ease;
}
.fl-services-swiper .swiper-pagination-bullet-active {
    background: #d97706; width: 30px; border-radius: 7px;
}
.fl-svc-grid-full { display: none; }
#services.fl-svc-expanded.fl-svc-mode-carousel .fl-services-swiper { display: none; }
#services.fl-svc-expanded .fl-svc-grid-full { display: grid; animation: fl-svc-in .5s ease both; }
@media (max-width: 640px) {
  .fl-services-swiper .swiper-button-prev, .fl-services-swiper .swiper-button-next {
      width: 38px; height: 38px; }
}

/* ══ UX polish pack ══ */
/* Anchors land clear of the sticky header */
section[id], [id="cta"], [id="services"] { scroll-margin-top: 96px; }

/* Accessible focus ring (keyboard users) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #d97706; outline-offset: 2px; border-radius: 4px;
}

/* Mobile quick-action bar */
.fl-mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
    display: none; grid-template-columns: 1fr 1.4fr;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(15,17,23,.92); backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.08); gap: .6rem;
}
.fl-mobile-bar a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 700; font-size: .9rem; padding: .8rem 0; border-radius: .7rem;
    text-decoration: none; transition: transform .15s ease;
}
.fl-mobile-bar a:active { transform: scale(.97); }
.fl-mb-call { background: rgba(255,255,255,.1); color: #fff; }
.fl-mb-cta  { background: #d97706; color: #fff; box-shadow: 0 6px 20px -6px rgba(217,119,6,.6); }
@media (max-width: 767px) {
    .fl-mobile-bar { display: grid; }
    body { padding-bottom: 72px; } /* content never hides behind the bar */
}

/* Back to top */
#fl-back-top {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 9989;
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(217,119,6,.4);
    background: rgba(15,17,23,.85); backdrop-filter: blur(8px); color: #fbbf24;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease, background .2s;
}
#fl-back-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
#fl-back-top:hover { background: #d97706; color: #fff; }
@media (max-width: 767px) { #fl-back-top { bottom: 86px; } } /* clears the mobile bar */



/* ══ HOMEPAGE UI v3.6 — responsive polish + stable hero compositing ══ */
:root {
    --fl-shadow-sm: 0 8px 24px rgba(15,17,23,.07);
    --fl-shadow-md: 0 18px 45px rgba(15,17,23,.12);
    --fl-shadow-lg: 0 28px 70px rgba(15,17,23,.18);
}
body { text-rendering: optimizeLegibility; }
.nr-display { text-wrap: balance; }
p { text-wrap: pretty; }
main > section { position: relative; }
#services, #why-us, #process, #portfolio, #testimonials, #areas, #cta {
    padding-block: clamp(4.5rem, 7vw, 6.5rem) !important;
}

/* Header: one stable desktop/mobile navigation system */
#nr-header.scrolled {
    background: rgba(15,17,23,.94) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 10px 35px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.07);
}
.nr-mobile-menu[hidden] { display: none !important; }
.nr-mobile-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    box-shadow: 0 24px 45px rgba(0,0,0,.28);
    max-height: calc(100svh - 5rem); overflow-y: auto;
}
body.fl-menu-open { overflow: hidden; }
@media (min-width:1024px) { .nr-mobile-menu { display: none !important; } }

/* Hero: explicit compositing boundary = blend modes always blend with their own slide. */
#hero .fl-hero-slide { isolation: isolate; background:#0f1117; }
/* v3.7: media sits in the slide root while content stays out of its own stacking context.
   This lets backdrop-filter and mix-blend-mode sample the actual hero pixels. */
#hero .fl-hero-media { overflow: hidden; z-index:-1 !important; }
#hero .fl-hero-content { z-index:auto !important; isolation:auto; }
#hero .fl-hero-copy, #hero .fl-ht-stage { isolation:auto; }
#hero .fl-hero-media > img,
#hero .fl-hero-media > video { width: 100%; height: 100%; object-fit: cover; }
#hero .fl-hero-copy { position: relative; width: 100%; }
#hero .fl-ht-stage { max-width: 100%; }
#hero .fl-hero-title { text-wrap: balance; }
#hero .fl-hero-sub { text-wrap: pretty; }
#hero .fl-hero-actions .nr-btn { min-height: 56px; justify-content: center; }
#hero .fl-hero-overlay-main,
#hero .fl-hero-overlay-bottom { pointer-events: none; }
#hero .nr-swiper-btn { box-shadow: 0 12px 30px rgba(0,0,0,.22); }

@supports (height: 100svh) {
    #hero .fl-hero-viewport { height: 100svh !important; }
}
@media (max-width: 767px) {
    #hero .fl-hero-viewport { min-height: 720px !important; max-height: none !important; }
    #hero .fl-hero-content { padding-top: 3.5rem !important; align-items: center !important; }
    #hero .fl-hero-copy { max-width: 100% !important; }
    #hero .fl-hero-kicker { margin-bottom: 1rem !important; font-size: .69rem; letter-spacing: .1em; }
    #hero .fl-hero-title { font-size: clamp(2.35rem, 11vw, 3.35rem) !important; line-height: 1.04 !important; }
    #hero .fl-ht-stage { margin-bottom: 1.15rem !important; }
    #hero .fl-hero-sub { font-size: .98rem !important; line-height: 1.6 !important; margin-bottom: 1.4rem !important; }
    #hero .fl-hero-actions { display: grid !important; grid-template-columns: 1fr; gap: .7rem !important; max-width: 360px; }
    #hero .fl-hero-actions .nr-btn { width: 100%; padding: .8rem 1rem !important; font-size: .94rem !important; }
    #hero .nr-swiper-btn, #hero .fl-hero-scroll { display: none !important; }
    #hero .nr-hero-pagination { bottom: 1.25rem !important; }
    #hero .fl-hero-overlay-main {
        background: linear-gradient(to right,rgba(0,0,0,.76) 0%,rgba(0,0,0,.48) 72%,rgba(0,0,0,.24) 100%) !important;
    }
}
@media (max-width: 420px) {
    #hero .fl-hero-viewport { min-height: 690px !important; }
    #hero .fl-hero-title { font-size: clamp(2.15rem, 10.7vw, 2.85rem) !important; }
}

/* Trust bar: readable at every breakpoint, no six-column squeeze on phones. */
.nr-trustbar-grid { box-shadow: 0 14px 38px rgba(0,0,0,.16); }
.fl-trust-item { min-width: 0; }
.fl-trust-item [data-lucide] { color: #d97706; }
@media (max-width: 900px) {
    .nr-trustbar-grid { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 560px) {
    .nr-trustbar-grid { grid-template-columns: repeat(2,1fr) !important; }
    .fl-trust-item { padding: .9rem !important; gap: .6rem !important; }
}

/* Consistent premium card language across the homepage. */
.fl-svc-card, .fl-project-card, .fl-area-card, .fl-cta-card, .fl-testimonial-card {
    box-shadow: var(--fl-shadow-sm);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .25s ease;
}
.fl-area-card:hover, .fl-cta-card:hover { transform: translateY(-4px); box-shadow: var(--fl-shadow-md); }
.fl-svc-card { backface-visibility: hidden; }
.fl-project-card { border: 1px solid rgba(15,17,23,.055); }
.fl-project-card:hover { box-shadow: var(--fl-shadow-md) !important; }
.fl-project-more {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
    color: #d97706; font-size: .8rem; font-weight: 800;
}
.fl-project-more:hover { color: #92400e; }

/* Process timeline: visual continuity without adding clutter. */
#process-steps { position: relative; }
.fl-process-step { position: relative; z-index: 1; }
@media (min-width: 901px) {
    #process-steps::before {
        content: ''; position: absolute; top: 2.48rem; left: 8%; right: 8%; height: 1px;
        background: linear-gradient(90deg,transparent,rgba(217,119,6,.45) 10%,rgba(217,119,6,.45) 90%,transparent);
        pointer-events: none;
    }
}
@media (max-width: 600px) {
    #process-steps { gap: 2rem 1rem !important; }
    #process-steps > .fl-process-step:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 290px; justify-self: center; }
}

/* Portfolio filters and cards */
#portfolio .nr-filter-btn { min-height: 42px; }
@media (max-width: 600px) {
    #portfolio .fl-portfolio-filters {
        flex-wrap: nowrap !important; overflow-x: auto; padding: 2px 2px 10px;
        scrollbar-width: thin; -webkit-overflow-scrolling: touch;
    }
    #portfolio .fl-portfolio-filters .nr-filter-btn { flex: 0 0 auto; }
}

/* Reviews + CTA forms */
.fl-review-summary { box-shadow: 0 10px 28px rgba(15,17,23,.06); }
.fl-testimonial-card { position: relative; }
.fl-testimonial-card::before {
    content: '“'; position: absolute; right: 1.3rem; top: .55rem;
    font-family: Georgia, serif; font-size: 4rem; line-height: 1; color: rgba(217,119,6,.12); pointer-events: none;
}
#cta .fl-ajax-form input, #cta .fl-ajax-form select, #cta .fl-ajax-form textarea {
    min-height: 44px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#cta .fl-ajax-form textarea { min-height: 86px; }
#cta .fl-ajax-form input:focus, #cta .fl-ajax-form select:focus, #cta .fl-ajax-form textarea:focus {
    border-color: #d97706 !important; box-shadow: 0 0 0 4px rgba(217,119,6,.1); transform: translateY(-1px);
}
#cta .fl-ajax-form button:disabled { opacity: .65; cursor: wait; transform: none !important; }
.fl-cta-card-primary { box-shadow: 0 20px 55px rgba(15,17,23,.2); }
@media (max-width: 560px) {
    #cta .fl-form-grid-2 { grid-template-columns: 1fr !important; }
    .fl-review-summary { width: 100%; justify-content: center; }
}

/* Areas + footer */
.fl-area-card { overflow: hidden; }
.fl-area-card:hover { border-color: rgba(217,119,6,.5) !important; }
#footer-grid a { transition: color .2s ease, transform .2s ease; }
#footer-grid a:hover { transform: translateX(2px); }

/* One mobile conversion bar and one back-to-top control. */
.fl-mobile-bar { box-shadow: 0 -12px 34px rgba(0,0,0,.28); }
#fl-back-top { box-shadow: 0 12px 30px rgba(0,0,0,.24); }

@media (hover: none) {
    .fl-area-card:hover, .fl-cta-card:hover, .fl-project-card:hover { transform: none; }
}


/* ══ v3.6 final UX pass ══ */
.nr-btn { min-height: 46px; }
.nr-btn, .nr-filter-btn, .fl-mobile-bar a { -webkit-tap-highlight-color: transparent; }
.nr-filter-btn { white-space: nowrap; }
.nr-filter-btn[aria-pressed="true"] { box-shadow: 0 8px 20px rgba(217,119,6,.2); }
#hero .fl-hero-title { max-width: 100%; }
@media (min-width: 1101px) {
    #hero .fl-hero-copy { max-width: 760px !important; }
    #hero .fl-hero-title { line-height: 1.04 !important; }
}
#hero .fl-ht-stage { isolation: auto; }
#hero[data-blend="1"] .fl-hero-title,
#hero[data-blend="1"] .fl-hero-sub { backface-visibility: visible; }
@media (min-width: 768px) and (max-width: 1100px) {
    #hero .fl-hero-copy { max-width: min(680px,72vw) !important; }
    #hero .fl-hero-actions .nr-btn { padding-inline: 1.45rem !important; }
}
@media (max-width: 767px) {
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .fl-mobile-bar { padding-left: max(.75rem,env(safe-area-inset-left)); padding-right: max(.75rem,env(safe-area-inset-right)); }
    #footer { padding-bottom: 2rem; }
}
@media (max-width: 420px) {
    .fl-mobile-bar { grid-template-columns: .9fr 1.25fr; gap: .45rem; }
    .fl-mobile-bar a { font-size: .82rem; padding-inline: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fl-lift, .fl-svc-card, .fl-project-card, .fl-area-card, .fl-cta-card, .fl-testimonial-card { transition-duration: .01ms !important; }
}

/* Why-us mobile hierarchy + testimonials/areas readability. */
.fl-why-visual { min-width: 0; }
.fl-why-item { min-width: 0; }
.fl-testimonial-card footer span { flex-wrap: wrap; }
@media (max-width: 560px) {
    .fl-why-features { grid-template-columns: 1fr !important; gap: 1rem !important; }
    .fl-why-badge { left: .75rem !important; bottom: .75rem !important; max-width: calc(100% - 1.5rem); }
    #areas-grid .fl-area-card ul { grid-template-columns: 1fr !important; }
}

/* ── Projects filter bar: sticks to the very top (header auto-hides on scroll) ── */
.fl-proj-filterbar { position: sticky; top: 0; z-index: 30; }
body.admin-bar .fl-proj-filterbar { top: 32px; }
@media (max-width: 782px) { body.admin-bar .fl-proj-filterbar { top: 46px; } }