/* ============================================================
   MoneyGenie Finance — Design System
   "The Strategic Architect / Harbour Crimson"
   Inspired by Sydney Strategic Finance stitch designs
   ============================================================ */

/* ---- 1. Design Tokens (exact values from stitch designs) -- */
:root {
  --primary:                    #bb0016;
  --primary-container:          #e61925;
  --primary-fixed:              #ffdad6;
  --on-primary:                 #ffffff;
  --on-primary-fixed-variant:   #93000f;

  --surface:                    #f7f9ff;
  --surface-container-lowest:   #ffffff;
  --surface-container-low:      #f1f4f9;
  --surface-container:          #ebeef3;
  --surface-container-high:     #e5e8ee;
  --surface-container-highest:  #e0e3e8;

  --on-surface:                 #181c20;
  --on-surface-variant:         #5d3f3c;
  --secondary-container:        #dde0e5;
  --on-secondary-container:     #5f6368;
  --outline-variant:            #e7bcb8;

  --error-container:            #ffdad6;
  --on-error-container:         #93000a;

  /* Editorial shadow — from stitch designs */
  --shadow-editorial:   0 30px 60px -12px rgba(24, 28, 32, 0.06);
  --shadow-card-hover:  0 40px 80px -12px rgba(24, 28, 32, 0.12);
  --shadow-button:      0 8px 24px -4px  rgba(187, 0, 22, 0.28);
  --shadow-nav:         0 1px 3px rgba(24, 28, 32, 0.06);

  /* Border radius (stitch: rounded-xl=0.75rem, rounded-3xl=1.5rem) */
  --radius-sm:   6px;
  --radius-md:   12px;    /* rounded-xl */
  --radius-lg:   16px;    /* rounded-2xl */
  --radius-xl:   24px;    /* rounded-3xl */
  --radius-full: 9999px;

  --ease-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ---- 2. Base Reset & Body --------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', 'Poppins', Arial, sans-serif !important;
  background-color: var(--surface) !important;
  color: var(--on-surface) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.7;
}

/* Headings — Plus Jakarta Sans, tight tracking */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5 {
  font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif !important;
  color: var(--on-surface);
  line-height: 1.2;
  font-weight: 700;
}
h1 { font-size: clamp(2.5rem, 6vw, 4rem);   font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem);  font-weight: 800; letter-spacing: -0.025em; }
h3 { font-size: 1.4rem;  font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 1.15rem; font-weight: 700; }

p  { color: var(--on-surface-variant); line-height: 1.75; margin-bottom: 1rem; }
a  { color: var(--primary); transition: color var(--ease-standard); }
a:hover, a:focus { color: var(--primary-container); text-decoration: none; outline: none; }

.text-primary { color: var(--primary) !important; }
.bg-primary   { background: var(--primary) !important; }
.bg-light     { background: var(--surface-container-low) !important; }


/* ---- 3. Top Bar ------------------------------------------ */
/* Hidden on all viewports — contact info lives in nav CTA & footer */
.top { display: none !important; }


/* ---- 4. Navbar ------------------------------------------- */
/* Glass nav — modelled exactly on stitch designs */
.ftco-navbar-light {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-nav);
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 9999 !important;
  padding: 0 !important;
  transition: background var(--ease-standard), box-shadow var(--ease-standard);
}

/* Ensure nav always starts at very top */
.ftco-navbar-light:not(.scrolled) {
  top: 0 !important;
}

/* Mobile fallback */
@media (max-width: 991px) {
  .ftco-navbar-light {
    background: rgba(255, 255, 255, 0.96) !important;
    padding: 0 15px !important;
    position: fixed !important;
  }
}

/* Logo */
.ftco-navbar-light .navbar-brand {
  padding: 0.9rem 0;
  color: var(--on-surface) !important;
}
.ftco-navbar-light .navbar-brand:hover { color: var(--primary) !important; }
.ftco-navbar-light .navbar-brand img { height: 56px; }

/* Nav links */
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-surface-variant) !important;
  padding: 0.85rem 1rem;
  transition: color var(--ease-standard);
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--on-surface) !important;
}

/* Active nav link — red with underline indicator */
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link span::before {
  background: var(--primary);
  height: 2px;
  bottom: -2px;
}
.ftco-navbar-light .navbar-nav > .nav-item.active > .nav-link,
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link.active {
  color: var(--primary) !important;
}

/* Scrolled state — same glass but slightly stronger */
.ftco-navbar-light.scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: var(--shadow-editorial) !important;
  position: fixed !important;
  top: 0 !important;
  margin-top: 0 !important;
  padding: 0 15px !important;
}
.ftco-navbar-light.scrolled.awake { margin-top: 0 !important; transition: margin var(--ease-standard); }
.ftco-navbar-light.scrolled.sleep { transition: margin var(--ease-standard); }
.ftco-navbar-light.scrolled .nav-link { color: var(--on-surface-variant) !important; }
.ftco-navbar-light.scrolled .nav-link:hover { color: var(--on-surface) !important; }
.ftco-navbar-light.scrolled .nav-link.active { color: var(--primary) !important; }

/* Dropdown */
.ftco-navbar-light .dropdown-menu {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-editorial), 0 0 0 1px rgba(24,28,32,0.04);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.5rem 0;
  margin-top: 6px;
  overflow: hidden;
}
.ftco-navbar-light .dropdown-item {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface);
  padding: 0.65rem 1.25rem;
  transition: background var(--ease-standard);
}
.ftco-navbar-light .dropdown-item:hover {
  background: var(--surface-container-low);
  color: var(--primary);
}

/* CTA nav item — red pill button */
.ftco-navbar-light .navbar-nav > .nav-item.cta > a,
.ftco-navbar-light .navbar-nav > .nav-item.cta > a:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 0.5rem 1.25rem !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: var(--shadow-button) !important;
  transition: opacity var(--ease-standard), transform var(--ease-standard) !important;
  margin-top: 0 !important;
}
.ftco-navbar-light .navbar-nav > .nav-item.cta > a:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
}
.ftco-navbar-light .navbar-nav > .nav-item.cta > a span { color: #fff !important; }

/* Mobile toggler */
.navbar-toggler { border: none !important; color: var(--on-surface) !important; }
.ftco-navbar-light .navbar-toggler { color: var(--on-surface) !important; }


/* ---- 5. Hero Sections ------------------------------------ */

/* Main hero (index.html) — keep BG image but modernise */
.hero-wrap {
  width: 100%;
  min-height: 720px;
  background-size: cover;
  background-position: center center;
  position: relative;
  display: flex;
  align-items: center;
}
/* slider-text — js-fullheight sets height to window.height via JS */
.hero-wrap .slider-text {
  min-height: 720px;
}

/* Overlay — directional fade: covers text on the left, clears on the right
   so the hero image reads sharp and crisp across the majority of the frame */
.hero-wrap .overlay {
  position: absolute;
  inset: 0;
  opacity: 1 !important;
  background: linear-gradient(
    100deg,
    rgba(24, 28, 32, 0.72) 0%,
    rgba(24, 28, 32, 0.42) 45%,
    rgba(24, 28, 32, 0.08) 75%,
    rgba(24, 28, 32, 0.00) 100%
  ) !important;
}

/* Inner-page hero (hero-wrap-2) */
.hero-wrap.hero-wrap-2 {
  min-height: 320px;
  height: auto !important;
  padding: 140px 0 72px;
  background-position: center center;
  /* Note: background-attachment:fixed disabled — breaks on mobile/Safari with overflow:hidden */
}
.hero-wrap.hero-wrap-2 .slider-text {
  min-height: auto !important;
  height: auto !important;
}
.hero-wrap.hero-wrap-2 .overlay {
  opacity: 1 !important;
  background: linear-gradient(
    160deg,
    rgba(24, 28, 32, 0.78) 0%,
    rgba(187, 0, 22, 0.25) 100%
  ) !important;
}

/* Hero typography */
.slider-text h1,
.slider-text .h1 {
  color: #fff !important;
  font-size: clamp(2.4rem, 5.5vw, 4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin-bottom: 1.25rem;
}
.slider-text h2,
.slider-text h3,
.slider-text h4 { color: #fff !important; }
.slider-text p   { color: rgba(255,255,255,0.82) !important; font-size: 1.1rem; max-width: 520px; }

/* Eyebrow badge inside hero */
.slider-text .subheading {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
  backdrop-filter: blur(8px);
}

/* Inner-page breadcrumbs */
.slider-text .breadcrumbs span     { color: rgba(255,255,255,0.68) !important; }
.slider-text .breadcrumbs span i   { color: rgba(255,255,255,0.5)  !important; }
.slider-text .breadcrumbs a        { color: rgba(255,255,255,0.88) !important; }
.slider-text .breadcrumbs a:hover  { color: #fff !important; }
.slider-text .bread                { color: #fff !important; font-weight: 700; }


/* ---- 6. Section Headings --------------------------------- */

/* Eyebrow label — small red uppercase tracker */
.heading-section .subheading,
span.subheading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary) !important;
  margin-bottom: 0.75rem;
}

/* Section h2 with red accent bar */
.heading-section h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--on-surface) !important;
  margin-bottom: 1rem;
}
.heading-section h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--primary);
  margin-top: 0.75rem;
}
.heading-section.text-center h2::after { margin-left: auto; margin-right: auto; }

.heading-section.heading-section-white .subheading { color: rgba(255,255,255,0.75) !important; }
.heading-section.heading-section-white h2 { color: #fff !important; }
.heading-section.heading-section-white h2::after { background: rgba(255,255,255,0.5); }
.heading-section.heading-section-white p { color: rgba(255,255,255,0.82) !important; }


/* ---- 7. Sections ----------------------------------------- */
.ftco-section {
  padding: 6rem 0;
  position: relative;
}
@media (max-width: 767px) { .ftco-section { padding: 4rem 0; } }

/* Explicit bg overrides */
.bg-light { background: var(--surface-container-low) !important; }

/* Section scroll-margin so fixed nav doesn't cover anchor targets */
[id] { scroll-margin-top: 88px; }


/* ---- 8. Buttons ------------------------------------------ */
.btn {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  border-radius: var(--radius-md) !important;
  padding: 0.75rem 1.75rem;
  transition: transform var(--ease-standard), box-shadow var(--ease-standard), opacity var(--ease-standard);
  border: none !important;
  cursor: pointer;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.1s; }

/* Primary — solid red */
.btn.btn-primary {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border: none !important;
  box-shadow: var(--shadow-button) !important;
}
.btn.btn-primary:hover {
  opacity: 0.88;
  box-shadow: 0 12px 32px -4px rgba(187, 0, 22, 0.40) !important;
}

/* Secondary — cool grey tonal */
.btn.btn-secondary {
  background: var(--secondary-container) !important;
  color: var(--on-secondary-container) !important;
  border: none !important;
  box-shadow: none !important;
}
.btn.btn-secondary:hover {
  background: var(--surface-container-high) !important;
  color: var(--on-surface) !important;
  box-shadow: var(--shadow-editorial) !important;
}

/* White button */
.btn.btn-white {
  background: #fff !important;
  color: var(--primary) !important;
  border: none !important;
  box-shadow: var(--shadow-editorial) !important;
  font-weight: 700 !important;
}
.btn.btn-white:hover {
  background: var(--primary-fixed) !important;
  color: var(--primary) !important;
}

/* Outline / ghost — borderless link style */
.btn.btn-outline-primary,
.btn-outline-primary {
  background: transparent !important;
  color: var(--primary) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-bottom: 2px solid rgba(187,0,22,0.25) !important;
  font-weight: 700;
}
.btn.btn-outline-primary:hover,
.btn-outline-primary:hover {
  border-bottom-color: var(--primary) !important;
  background: transparent !important;
  transform: none !important;
}

.btn-lg { padding: 0.9rem 2.2rem; font-size: 16px; }
.btn-sm { padding: 0.5rem 1rem;   font-size: 13px; }

/* Hero primary buttons inherit from .btn.btn-primary — no override needed */


/* ---- 9. Cards & Service Blocks --------------------------- */

/* Remove the original theme's waterfall stagger so all cards sit on the same baseline.
   Only reset margin — padding is controlled by the card rule below. */
.ftco-services-2 .mt-lg-5 { margin-top: 0 !important; }
.ftco-services-2 .mt-md-5 { margin-top: 0 !important; }

/* Universal card treatment — white on light-grey bg, large radius */
.services,
.block-6,
.ftco-services .services,
.ftco-services-2 .services {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  padding: 2.5rem 2rem !important;
  box-shadow: var(--shadow-editorial);
  transition: transform var(--ease-standard), box-shadow var(--ease-standard);
  height: 100%;
}
.services:hover,
.block-6:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
}

/* Service icon — red tinted circle (stitch pattern) */
.services .icon,
.ftco-services-2 .services .icon {
  width: 56px !important;
  height: 56px !important;
  background: rgba(187, 0, 22, 0.08) !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 1.5rem !important;
}
.services .icon span,
.ftco-services-2 .services .icon span {
  font-size: 28px !important;
  color: var(--primary) !important;
}

.services .media-body h3,
.services h3,
.block-6 .media-body .heading {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--on-surface) !important;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.services p,
.block-6 .media-body p { color: var(--on-surface-variant); font-size: 15px; line-height: 1.7; }


/* ---- 10. Lender Carousel --------------------------------- */
.carousel-agent .item img,
.owl-carousel .owl-item img {
  filter: grayscale(40%);
  opacity: 0.7;
  transition: filter var(--ease-standard), opacity var(--ease-standard);
}
.owl-carousel .owl-item.active img  { filter: grayscale(0); opacity: 1; }
.carousel-agent .item img:hover     { filter: grayscale(0); opacity: 1; }
.owl-dots .owl-dot { background: var(--surface-container-high) !important; border-radius: var(--radius-full); }
.owl-dots .owl-dot.active { background: var(--primary) !important; }


/* ---- 11. Testimonials Section ---------------------------- */
.testimony-section {
  background: var(--on-surface) !important;
  position: relative;
}
.testimony-section .overlay {
  background: linear-gradient(135deg, rgba(24,28,32,0.92) 0%, rgba(187,0,22,0.18) 100%) !important;
  opacity: 1 !important;
}
.testimony-wrap .text {
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-xl);
  /* padding-top must accommodate the .user-img (130px) overlapping from above (margin-top:-65px) */
  padding: 5.5rem 2rem 2rem;
}
.testimony-wrap .user-img .quote {
  background: var(--primary);
  border-radius: 50%;
}
.testimony-wrap .name  { color: #fff !important; font-weight: 700; }
.testimony-wrap .position { color: rgba(255,255,255,0.65) !important; }
.testimony-wrap p { color: rgba(255,255,255,0.80) !important; }


/* ---- 12. Counter Strip ----------------------------------- */
section#section-counter {
  background: var(--on-surface) !important;
  position: relative;
}
section#section-counter::after { display: none !important; }

.ftco-counter .text span.number,
section#section-counter .number {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Labels on dark-bg counter section (about.html section#section-counter) */
section#section-counter p {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Labels on light-bg counter row (index.html div#section-counter) */
div#section-counter p {
  color: var(--on-surface) !important;
  font-weight: 600;
}


/* ---- 13. CTA / Intro Strips ------------------------------ */
.ftco-intro {
  background: var(--primary) !important;
  position: relative;
  overflow: hidden;
}
.ftco-intro .overlay { display: none; }
.ftco-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #bb0016 0%, #e61925 100%);
  z-index: 0;
}
.ftco-intro .container { position: relative; z-index: 1; }
.ftco-intro h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #fff !important;
}
.ftco-intro h2 span { background: none; color: rgba(255,255,255,0.72); }
.ftco-intro p { color: rgba(255,255,255,0.85) !important; font-size: 1.1rem; }


/* ---- 14. Contact Form ------------------------------------ */
.form-control {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  background: var(--surface-container-lowest) !important;
  color: var(--on-surface) !important;
  border: 1.5px solid var(--surface-container-high) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  height: 52px !important;
  transition: border-color var(--ease-standard), box-shadow var(--ease-standard);
}
textarea.form-control {
  height: auto !important;
  min-height: 130px;
  resize: vertical;
}
.form-control::placeholder { color: rgba(93,63,60,0.45) !important; }
.form-control:focus, .form-control:active {
  background: #fff !important;
  border-color: rgba(187, 0, 22, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(187, 0, 22, 0.08) !important;
  outline: none !important;
}
.form-group label,
.contact-form label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 0.4rem;
  display: block;
}
.contact-section { background: var(--surface-container-low) !important; }

/* Contact form — white card floating on the surface-container-low bg */
.contact-section .contact-form,
.contact-section form.bg-light {
  background: var(--surface-container-lowest) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-editorial);
}

/* Contact info boxes — white cards with subtle lift */
.contact-section .box.bg-light {
  background: var(--surface-container-lowest) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-editorial);
  margin-bottom: 0.75rem;
}
.contact-section .box .icon span {
  color: var(--primary) !important;
}
.contact-section .box .text p,
.contact-section .box .text a {
  color: var(--on-surface-variant) !important;
  font-size: 14px;
}
.contact-section .box .text a:hover { color: var(--primary) !important; }

.contact-section .block-9 .form-control {
  background: #fff !important;
  border-color: var(--surface-container-high) !important;
}


/* ---- 15. Footer ------------------------------------------ */
.ftco-footer {
  background: var(--on-surface) !important;
  padding: 5rem 0 2rem;
}
.ftco-footer .ftco-heading-2,
.ftco-footer .ftco-footer-widget h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.40) !important;
  margin-bottom: 1.25rem;
}
.ftco-footer p { color: rgba(255,255,255,0.55); font-size: 14px; }
.ftco-footer a { color: rgba(255,255,255,0.65) !important; font-size: 14px; font-weight: 500; }
.ftco-footer a:hover { color: #fff !important; }
.ftco-footer .ftco-footer-widget ul li { margin-bottom: 0.6rem; }
.ftco-footer .ftco-footer-widget ul li a { display: flex; align-items: center; gap: 6px; }
.ftco-footer .ftco-footer-widget ul li a span { color: rgba(255,255,255,0.3) !important; }
.ftco-footer .block-23 ul li .icon { color: var(--primary); }
.ftco-footer .block-23 ul li span:not(.icon) { color: rgba(255,255,255,0.65); }

/* Social icons */
.ftco-footer-social li a {
  background: rgba(255,255,255,0.07) !important;
  border-radius: 50%;
  transition: background var(--ease-standard), transform var(--ease-standard);
}
.ftco-footer-social li a:hover {
  background: var(--primary) !important;
  transform: translateY(-3px);
}
.ftco-footer-social li a span { color: rgba(255,255,255,0.75) !important; }

/* Copyright bar */
.ftco-footer > .container-fluid > .row:last-child {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 1.5rem;
  margin-top: 2rem;
}
.ftco-footer > .container-fluid > .row:last-child p {
  font-size: 13px;
  color: rgba(255,255,255,0.35) !important;
}
.ftco-footer > .container-fluid > .row:last-child a {
  color: rgba(255,255,255,0.5) !important;
  font-size: 13px;
}
.ftco-footer > .container-fluid > .row:last-child a:hover { color: #fff !important; }


/* ---- 16. FAQ Accordion ----------------------------------- */
.accordion .card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-editorial);
  overflow: hidden;
}
.accordion .card-header {
  background: transparent !important;
  border-bottom: none;
  padding: 0;
}
.accordion .card-header .btn-link,
.accordion .card-header button {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--on-surface) !important;
  text-decoration: none !important;
  padding: 1.1rem 1.5rem;
  width: 100%;
  text-align: left;
  transition: color var(--ease-standard);
  white-space: normal;
  line-height: 1.5;
}
.accordion .card-header .btn-link:hover,
.accordion .card-header button:hover { color: var(--primary) !important; }
.accordion .card-header .btn-link:not(.collapsed),
.accordion .card-header button[aria-expanded="true"] { color: var(--primary) !important; }
.accordion .card-body {
  font-size: 15px;
  color: var(--on-surface-variant);
  padding: 0 1.5rem 1.5rem;
  line-height: 1.75;
}


/* ---- 17. Map --------------------------------------------- */
#map {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-editorial);
}


/* ---- 18. Section Badges (eyebrow labels in HTML) --------- */
/* Used on some pages as inline-block spans before headings */
.inline-badge,
.badge-label {
  display: inline-block;
  padding: 4px 14px;
  background: var(--primary-fixed);
  color: var(--on-primary-fixed-variant);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  margin-bottom: 1rem;
}

/* Alert / info boxes — tonal instead of bordered */
.alert,
.alert-info {
  background: var(--surface-container) !important;
  border: none !important;
  border-left: 4px solid var(--primary) !important;
  border-radius: var(--radius-md) !important;
  color: var(--on-surface-variant) !important;
}
.alert-warning {
  background: #fff8e6 !important;
  border: none !important;
  border-left: 4px solid #e5a800 !important;
  border-radius: var(--radius-md) !important;
}
.alert strong { color: var(--on-surface) !important; }


/* ---- 19. Misc Utility ------------------------------------ */
hr { border-color: var(--surface-container-high); opacity: 1; }
address { font-style: normal; color: var(--on-surface-variant); }

/* About image, property image blocks */
.about-image { border-radius: var(--radius-xl); overflow: hidden; }
.about-image img { border-radius: var(--radius-xl); }

/* Loader spinner — brand red */
#ftco-loader .path { stroke: var(--primary); }

/* Block-23 contact info icons in footer */
.block-23 ul li .icon { color: var(--primary) !important; }
.block-23 ul li span  { color: var(--on-surface-variant); }


/* ---- 20. Responsive -------------------------------------- */
@media (max-width: 991px) {
  /* Fix hero height */
  .hero-wrap { min-height: 480px !important; }
  .hero-wrap .slider-text { min-height: 480px !important; padding: 100px 0 60px; }
  .hero-wrap.hero-wrap-2 { padding: 100px 0 50px !important; }

  /* Nav always glass on mobile */
  .ftco-navbar-light {
    background: rgba(255,255,255,0.96) !important;
  }
  .ftco-navbar-light .navbar-nav { padding-bottom: 16px; }
  .ftco-navbar-light .navbar-nav > .nav-item > .nav-link { color: var(--on-surface) !important; }

  .services, .block-6 { margin-bottom: 1.5rem; }
}

@media (max-width: 767px) {
  h1 { font-size: 2.2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.2rem !important; }

  .ftco-section { padding: 3.5rem 0; }

  .btn { width: 100%; display: block; text-align: center; margin-bottom: 0.6rem; }
  .btn + .btn { margin-top: 0; }
  .mr-2.btn { margin-right: 0 !important; }

  .ftco-footer { padding: 3.5rem 0 2rem; }
  .ftco-footer-widget { margin-bottom: 2rem !important; }

  .accordion .card-header .btn-link,
  .accordion .card-header button { font-size: 14px !important; }
}

@media (max-width: 480px) {
  .slider-text h1 { font-size: 1.85rem !important; }
  .slider-text p  { font-size: 0.95rem !important; }
}


/* ---- 21. Scroll-reveal Animation ------------------------- */
.ftco-animate   { opacity: 0; visibility: hidden; }
.ftco-animated  {
  animation-duration: 0.65s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}