/* =========================================================
   LSMM site styles - brand layer over Bootstrap 5
   Palette:
     --lsmm-navy   #12263f  primary / headings / nav
     --lsmm-slate  #3d5470  secondary panels
     --lsmm-gold   #e8a33d  accent / CTAs
     --lsmm-paper  #f6f8fb  section alt background
     --lsmm-ink    #21303f  body text
   ========================================================= */
:root {
  --lsmm-navy:  #12263f;
  --lsmm-slate: #3d5470;
  --lsmm-gold:  #e8a33d;
  --lsmm-gold-dark: #c9861f;
  --lsmm-paper: #f6f8fb;
  --lsmm-ink:   #21303f;
  /* Three red tones down the homepage. The original only uses two
     (#621219 and #7E141E) but they sit adjacent and read as one solid
     block, so a third, deeper tone separates the middle band. */
  --lsmm-crimson: #621219;
  --lsmm-burgundy: #7e141e;
  --lsmm-burgundy-dark: #5e0f16;
  --lsmm-maroon: #460d12;
}

html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--lsmm-ink);
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

h1, h2, h3, h4, h5, .navbar-brand { color: var(--lsmm-navy); }
h1 { font-weight: 700; letter-spacing: -0.02em; }
h2 { font-weight: 700; }

/* --- Top bar --- */
.topbar { background: var(--lsmm-navy); color: #cfd9e6; }
.topbar-link { color: var(--lsmm-gold); text-decoration: none; }
.topbar-link:hover { color: #fff; }

/* --- Navbar --- */
.site-nav {
  background: #fff;
  box-shadow: 0 1px 6px rgba(18, 38, 63, 0.12);
}
/* Top-level items are uppercase and letter-spaced, matching the
   original site. Submenu items stay sentence case. */
.site-nav .navbar-nav > .nav-item > .nav-link {
  color: var(--lsmm-navy);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .82rem;
  padding-left: .7rem; padding-right: .7rem;
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active { color: var(--lsmm-gold-dark); }

/* Font Awesome chevrons replace Bootstrap's CSS caret */
.site-nav .dropdown-toggle::after { display: none; }
.nav-caret { font-size: .62em; margin-left: .25rem; vertical-align: middle; opacity: .75; }
.sub-caret { font-size: .68em; float: right; margin-top: .35em; opacity: .7; }

/* Dropdown sizing: wide enough that the long product labels do not
   wrap onto three lines as they did at Bootstrap's default 10rem. */
.site-nav .dropdown-menu {
  min-width: 17rem;
  max-width: 26rem;
  border: 0;
  border-top: 3px solid var(--lsmm-gold);
  box-shadow: 0 6px 18px rgba(18,38,63,.14);
  padding: .4rem 0;
}
.site-nav .dropdown-item {
  white-space: normal;
  padding: .45rem 1rem;
  font-size: .93rem;
}
.site-nav .dropdown-item:hover { background: var(--lsmm-paper); color: var(--lsmm-gold-dark); }
.brand-text {
  font-weight: 800; color: var(--lsmm-navy); line-height: 1;
  display: inline-flex; flex-direction: column; letter-spacing: .04em;
}
.brand-text small {
  font-weight: 500; color: var(--lsmm-gold-dark);
  letter-spacing: .18em; text-transform: uppercase; font-size: .55em;
}

/* --- Buttons --- */
/* Primary CTA is burgundy #7E141E with white text, matching the
   original site's buttons. */
.btn-accent {
  background: var(--lsmm-burgundy); border-color: var(--lsmm-burgundy);
  color: #fff; font-weight: 700;
}
.btn-accent:hover, .btn-accent:focus {
  background: var(--lsmm-burgundy-dark); border-color: var(--lsmm-burgundy-dark); color: #fff;
}
/* On the red bands a solid burgundy button would disappear - invert it */
.section-burgundy .btn-accent,
.section-crimson .btn-accent {
  background: #fff; border-color: #fff; color: var(--lsmm-burgundy);
}
.section-burgundy .btn-accent:hover,
.section-crimson .btn-accent:hover {
  background: var(--lsmm-navy); border-color: var(--lsmm-navy); color: #fff;
}
.btn-outline-navy {
  border-color: var(--lsmm-navy); color: var(--lsmm-navy); font-weight: 600;
}
.btn-outline-navy:hover { background: var(--lsmm-navy); color: #fff; }

/* --- Hero --- */
.hero {
  background:
    linear-gradient(100deg, rgba(18,38,63,.72), rgba(18,38,63,.30)),
    var(--lsmm-slate) center/cover no-repeat;
  color: #fff;
  padding: 5.5rem 0;
}
/* The overlay is deliberately light so the cityscape reads. Type gets
   its own shadow instead, which keeps text legible without darkening
   the whole photo. */
.hero h1 {
  color: #fff;
  text-shadow: 0 2px 18px rgba(6,16,29,.75), 0 1px 3px rgba(6,16,29,.6);
}
.hero .lead { color: #e4ebf3; max-width: 46rem; }
.hero .eyebrow { text-shadow: 0 1px 8px rgba(6,16,29,.7); }
.hero-ticks {
  color: #fff;
  text-shadow: 0 1px 10px rgba(6,16,29,.7);
}
.hero-ticks i { color: var(--lsmm-gold); }

/* --- Sections --- */
.section { padding: 4rem 0; }
/* Light panel sections. The original uses bg2-aboutus-1.jpg TILED at its
   natural size (1920x48px, near-white) rather than stretched to cover -
   it repeats to form a subtle horizontal banding texture. Reproduced
   here the same way; falls back to white if the file is missing. */
.section-alt {
  background-color: #fff;
  background-image: url('/assets/img/section-bg.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
}
.section-navy { background: var(--lsmm-navy); color: #d9e2ee; }
.section-navy h2, .section-navy h3 { color: #fff; }
/* Navy band with a photo behind it, as on the old homepage. Uses the
   hero image since that is a genuine photograph. Wash kept light
   enough that the skyline reads; headings get their own shadow. */
.section-navy-photo {
  background-color: var(--lsmm-navy);
  background-image:
    linear-gradient(rgba(18,38,63,.68), rgba(18,38,63,.78)),
    url('/assets/img/hero-city.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #e4ebf3;
}
.section-navy-photo h2, .section-navy-photo h3 { color: #fff; }
.section-navy-photo h2 { text-shadow: 0 2px 14px rgba(6,16,29,.75); }
@media (max-width: 991.98px) {
  /* background-attachment: fixed is expensive and glitchy on mobile */
  .section-navy-photo { background-attachment: scroll; }
}
.eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
  font-size: .78rem; color: var(--lsmm-gold-dark);
}

/* --- Cards --- */
/* card-audience and card-step stretch to equal heights within a row.
   card-product does NOT: it is used both in equal-height grids (where
   the markup adds Bootstrap's .h-100) and as a standalone sidebar card,
   where a forced 100% height made it overflow its column and collide
   with the footer. */
.card-audience, .card-step {
  border: 0; border-top: 3px solid var(--lsmm-gold);
  box-shadow: 0 2px 10px rgba(18,38,63,.08);
  height: 100%;
}
.card-product {
  border: 0; border-top: 3px solid var(--lsmm-gold);
  box-shadow: 0 2px 10px rgba(18,38,63,.08);
}

/* Audience flip cards.
   The old site uses a HappyAddons flip box: a full-height photo tile
   with just the title centred on it, which flips on hover to reveal the
   body copy over a second image. Rebuilt here in pure CSS 3D - no
   plugin, no JavaScript needed for the hover. site.js adds tap-to-flip
   for touch devices, which have no hover state. */
.flip-card {
  perspective: 1200px;
  height: 30rem;
}
.flip-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s ease;
}
.flip-card:hover .flip-inner,
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }

.flip-front, .flip-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  border-radius: .35rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.75rem;
  color: #fff;
}
/* readability wash over each photo */
.flip-front::before, .flip-back::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(18,38,63,.42);
}
.flip-back::before { background: rgba(18,38,63,.86); }
.flip-front > *, .flip-back > * { position: relative; z-index: 1; }

.flip-front h3 {
  color: #fff;
  font-weight: 700;
  font-size: 1.65rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  margin: 0;
}
.flip-back { transform: rotateY(180deg); }
.flip-back p { font-size: .95rem; margin-bottom: 1rem; }
.flip-back a { color: var(--lsmm-gold); font-weight: 600; text-decoration: none; }
.flip-back a:hover { color: #fff; text-decoration: underline; }

/* front photos */
.flip-borrow { background-image: url('/assets/img/handshake-isolated-business-background-min.webp'); }
.flip-lender { background-image: url('/assets/img/member10.webp'); }
.flip-broker { background-image: url('/assets/img/man-in-black-holding-phone-618613-2880w.webp'); }
/* shared back photo, as on the old site */
.flip-back { background-image: url('/assets/img/card-back.webp'); }

@media (max-width: 767.98px) {
  .flip-card { height: 26rem; }
  .flip-front h3 { font-size: 1.4rem; }
}
.card-step .step-num {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--lsmm-navy); color: var(--lsmm-gold);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800;
}

/* --- Testimonials --- */
/* The testimonials band carries bg-2.jpg on the old site. */
.section-testimonials {
  background-color: var(--lsmm-paper);
  background-image:
    linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.90)),
    url('/assets/img/bg-2.webp');
  background-size: cover;
  background-position: center;
}
.testimonial {
  background: #fff; border-left: 4px solid var(--lsmm-gold);
  box-shadow: 0 2px 10px rgba(18,38,63,.08);
  padding: 1.5rem; height: 100%;
}
.testimonial cite { color: var(--lsmm-slate); font-style: normal; font-weight: 700; }

/* --- Page header (inner pages) --- */
/* Tall enough for the banner photo to actually read - the old site's
   banners are roughly 500px. header.asp layers the per-page photo in
   behind a navy wash. */
.page-header {
  background: linear-gradient(100deg, var(--lsmm-navy), var(--lsmm-slate));
  background-size: cover;
  background-position: center center;
  color: #fff;
  padding: 6.5rem 0 5rem;
}
@media (max-width: 767.98px) {
  .page-header { padding: 3.5rem 0 2.75rem; }
}
.page-header h1 { color: #fff; }
.page-header .breadcrumb, .page-header .breadcrumb a { color: #b9c7d8; }
.page-header .breadcrumb .active { color: #fff; }

/* --- Sidebar product list --- */
.sidebar-products .list-group-item { border-color: #e4e9f0; font-weight: 600; }
.sidebar-products .list-group-item.active {
  background: var(--lsmm-navy); border-color: var(--lsmm-navy);
}
.sidebar-products .list-group-item:not(.active):hover { background: var(--lsmm-paper); }

/* --- Nested dropdown submenus (Bootstrap has no built-in support) --- */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-toggle::after { display: none; }
.dropdown-submenu > .dropdown-menu {
  top: 0; left: 100%; margin-top: -.5rem; margin-left: 0;
}
@media (min-width: 992px) {
  /* open on hover on desktop, matching the original site */
  .site-nav .dropdown:hover > .dropdown-menu,
  .site-nav .dropdown-submenu:hover > .dropdown-menu { display: block; }
  /* flip the submenu to the left if it would overflow the viewport */
  .dropdown-submenu.submenu-left > .dropdown-menu { left: auto; right: 100%; }
}
@media (max-width: 991.98px) {
  /* on mobile, nest inline rather than flying out sideways */
  .dropdown-submenu > .dropdown-menu {
    position: static; float: none; margin: 0 0 0 .75rem;
    border: 0; border-left: 2px solid var(--lsmm-gold);
    border-radius: 0; box-shadow: none;
  }
  .dropdown-submenu > .sub-caret,
  .dropdown-submenu > .dropdown-toggle .sub-caret { float: none; }
}
.site-nav .dropdown-item { white-space: normal; }

/* --- Mega menu (mirrors the original Elementor/HappyAddons nav) --- */
/* The parent <li> carries .position-static, so this panel positions
   against the sticky .site-nav rather than the menu item. It is then
   constrained to the site container width and centred, matching the
   original's boxed panel rather than running edge to edge.
   Selectors are prefixed .site-nav so they beat the .site-nav
   .dropdown-menu min/max-width rule above. */
/* Each panel hangs from its own menu item (the .dropdown li is
   position:relative), so it opens directly under ABOUT / FINANCE
   PRODUCTS / BROKERS as on the original - not pinned to one side.
   .mega-right is added by site.js when a panel would overflow the
   right edge of the window. */
.site-nav .mega-menu {
  width: auto;
  min-width: 34rem;
  max-width: 52rem;
  left: 0;
  right: auto;
  margin: 0;
  background: #f7f8fb;
  border: 1px solid #e6eaf0;
  border-top: 3px solid var(--lsmm-gold);
  border-radius: 0 0 .5rem .5rem;
  box-shadow: 0 14px 34px rgba(18,38,63,.18);
  padding: 1.75rem 0 1.9rem;
  margin-top: 0;
}
.site-nav .mega-menu.mega-right { left: auto; right: 0; }
/* the inner .container should not add a second centred max-width */
.site-nav .mega-menu > .container {
  max-width: 100%;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.site-nav .mega-heading {
  color: var(--lsmm-navy);
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: 1.1rem;
}
.site-nav .mega-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem 1.1rem;
  margin-bottom: .7rem;
  border: 1px solid #e4e9f0;
  border-radius: .35rem;
  background: #fff;
  color: var(--lsmm-ink);
  text-decoration: none;
  font-size: 1rem;
  transition: border-color .15s, background .15s, color .15s;
}
.site-nav .mega-item:last-child { margin-bottom: 0; }
.site-nav .mega-item i {
  color: var(--lsmm-gold-dark);
  font-size: 1.35rem;
  width: 1.75rem;
  text-align: center;
  flex: 0 0 auto;
}
.site-nav .mega-item:hover {
  border-color: var(--lsmm-gold);
  background: var(--lsmm-paper);
  color: var(--lsmm-navy);
}

@media (min-width: 992px) {
  /* open on hover, like the original */
  .site-nav .nav-item.dropdown:hover > .mega-menu { display: block; }
  /* vertical rule between columns, as on the original */
  .site-nav .mega-menu .row > [class*="col-"] + [class*="col-"] {
    border-left: 1px solid #e2e6ec;
  }
}
@media (max-width: 991.98px) {
  /* stack inside the collapsed navbar instead of floating */
  .site-nav .mega-menu {
    position: static; float: none;
    max-width: none;
    min-width: 0;
    background: transparent;
    border: 0; box-shadow: none;
    padding: .5rem 0 1rem;
  }
  .site-nav .mega-menu > .container { padding-left: 0; padding-right: 0; }
  .site-nav .mega-heading { font-size: 1.05rem; margin-top: .5rem; }
}

/* --- Google reviews --- */
.google-reviews .gr-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: .4rem;
  box-shadow: 0 2px 10px rgba(18,38,63,.08);
  max-width: 44rem;
  margin: 0 auto;
}
.google-reviews .gr-logo i { font-size: 1.5rem; color: #4285F4; }
.google-reviews .gr-score {
  font-size: 1.6rem; font-weight: 800; color: var(--lsmm-navy); line-height: 1;
}
.google-reviews .gr-stars i { color: #f0a92e; margin-right: .05rem; }
.google-reviews .gr-count { color: var(--lsmm-slate); font-size: .95rem; }
.google-reviews .gr-link {
  color: var(--lsmm-gold-dark); font-weight: 600; text-decoration: none; font-size: .95rem;
}
.google-reviews .gr-link:hover { text-decoration: underline; }

/* --- Homepage FAQ band --- */
/* Photo background as on the old site (Shoreline-Gateway.jpeg). The wash
   is light enough that the towers read; legibility comes from giving the
   accordion panels their own dark translucent backing rather than from
   dimming the whole photograph. */
.section-faq {
  background-color: var(--lsmm-navy);
  background-image:
    linear-gradient(rgba(18,38,63,.55), rgba(18,38,63,.68)),
    url('/assets/img/faq-bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #e4ebf3;
}
.section-faq h2, .section-faq h3 { color: #fff; }
.section-faq h2, .section-faq .eyebrow { text-shadow: 0 2px 14px rgba(6,16,29,.8); }
.section-faq .accordion-item {
  background: rgba(10,24,42,.78);
  border: 1px solid rgba(255,255,255,.18);
  margin-bottom: .6rem;
  border-radius: .35rem;
  overflow: hidden;
}
.section-faq .accordion-button {
  background: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}
.section-faq .accordion-button:not(.collapsed) { color: var(--lsmm-gold); }
.section-faq .accordion-button::after {
  /* recolour Bootstrap's chevron for a dark background */
  filter: invert(1) grayscale(1) brightness(1.6);
}
.section-faq .accordion-body { color: #dbe4ef; }
.section-faq .accordion-body a { color: var(--lsmm-gold); }
.section-faq .icon-list i { color: var(--lsmm-gold); }
@media (max-width: 991.98px) {
  .section-faq { background-attachment: scroll; }
}

/* --- In-page content images --- */
/* Sit in their own left column beside the copy (see the .row wrapper in
   each page). No float - the grid handles the layout, which keeps the
   text column a predictable width and stops the photo dominating. */
.content-img {
  width: 100%;
  height: auto;
  max-height: 18rem;
  object-fit: cover;
  border-radius: .35rem;
  box-shadow: 0 2px 10px rgba(18,38,63,.12);
}
@media (max-width: 767.98px) {
  .content-img { max-height: 14rem; }
}

/* --- Red bands (match the original site's alternating section colours) --- */
/* .section-crimson = #FC2D40, .section-burgundy = #7E141E. The original
   alternates between the two down the homepage. */
.section-burgundy { background: var(--lsmm-burgundy); color: #f3e2e4; }
.section-crimson  { background: var(--lsmm-crimson);  color: #f3e2e4; }
.section-maroon   { background: var(--lsmm-maroon);   color: #f0dcde; }

.section-burgundy h1, .section-burgundy h2, .section-burgundy h3, .section-burgundy h4,
.section-crimson h1,  .section-crimson h2,  .section-crimson h3,  .section-crimson h4,
.section-maroon h1,   .section-maroon h2,   .section-maroon h3,   .section-maroon h4 { color: #fff; }
.section-burgundy .eyebrow, .section-crimson .eyebrow, .section-maroon .eyebrow { color: #f0c9cd; }
.section-burgundy a:not(.btn), .section-crimson a:not(.btn), .section-maroon a:not(.btn) { color: #fff; text-decoration: underline; }
.section-burgundy a:not(.btn):hover, .section-crimson a:not(.btn):hover, .section-maroon a:not(.btn):hover { color: #ffe3b0; }
.section-burgundy .icon-list i, .section-crimson .icon-list i, .section-maroon .icon-list i { color: var(--lsmm-gold); }

/* outline buttons need light borders on a red ground */
.section-burgundy .btn-outline-navy,
.section-crimson .btn-outline-navy,
.section-maroon .btn-outline-navy {
  border-color: rgba(255,255,255,.75);
  color: #fff;
}
.section-burgundy .btn-outline-navy:hover { background: #fff; color: var(--lsmm-burgundy); }
.section-crimson .btn-outline-navy:hover  { background: #fff; color: var(--lsmm-crimson); }
.section-maroon .btn-outline-navy:hover   { background: #fff; color: var(--lsmm-maroon); }

/* solid CTA inverts on the red bands so it stays visible */
.section-maroon .btn-accent { background: #fff; border-color: #fff; color: var(--lsmm-maroon); }
.section-maroon .btn-accent:hover { background: var(--lsmm-navy); border-color: var(--lsmm-navy); color: #fff; }

/* cards sitting on a band stay light so body copy remains readable */
.section-burgundy .card-product, .section-burgundy .card-step,
.section-crimson .card-product,  .section-crimson .card-step,
.section-maroon .card-product,   .section-maroon .card-step { background: #fff; color: var(--lsmm-ink); }
.section-burgundy .card-product h2, .section-burgundy .card-product h3,
.section-burgundy .card-step h2,    .section-burgundy .card-step h3,
.section-crimson .card-product h2,  .section-crimson .card-product h3,
.section-crimson .card-step h2,     .section-crimson .card-step h3,
.section-maroon .card-product h2,   .section-maroon .card-product h3,
.section-maroon .card-step h2,      .section-maroon .card-step h3 { color: var(--lsmm-navy); }

/* --- Footer --- */
.site-footer { background: var(--lsmm-navy); color: #b9c7d8; }
.site-footer .footer-heading { color: #fff; }
.footer-links a, .footer-contact a, .footer-brand-link,
.site-footer .small a { color: #b9c7d8; text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover,
.site-footer .small a:hover { color: var(--lsmm-gold); }
.footer-links li { margin-bottom: .35rem; }
.footer-social a {
  color: var(--lsmm-navy); background: var(--lsmm-gold);
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: .5rem; text-decoration: none;
}
.footer-social a:hover { background: #fff; }
.footer-rule { border-color: rgba(255,255,255,.15); }

/* --- Forms --- */
.form-label { font-weight: 600; }
.required::after { content: " *"; color: #c0392b; }
/* honeypot: visually removed, still in DOM for bots */
.hp-field {
  position: absolute !important; left: -9999px !important;
  height: 1px; width: 1px; overflow: hidden;
}

/* --- Utility --- */
.icon-list li { margin-bottom: .55rem; }
.icon-list i { color: var(--lsmm-gold-dark); margin-right: .5rem; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}