/* ============================================================
   SITE DESIGN — consolidated 2026-07-15 into a version-controlled file.
   Was split between Customizer 'Additional CSS' (custom_css, which had
   broken theme_mod custom_css_post_id=-1 so it never loaded) and an inline
   <style> trapped in one page (19619). Moved here + enqueued after bundle
   so it loads globally and can't be orphaned again.
   ============================================================ */

/* --- palette + global (from Customizer custom_css) --- */
/* ===== COLOR PALETTE ===== */
:root {
/* Repointed to Bootstrap vars so the ATL Customizer's runtime --bs-* injection reaches the
   whole design. Values are IDENTICAL to the previous literals (each hex == its --bs-* default),
   so the shipped default look is pixel-unchanged. Fixes the frozen-brand-color bug. 2026-07-15 */
--primary-navy: var(--bs-primary);
--accent-teal: var(--bs-secondary);
--cta-amber: var(--bs-warning);
--light-bg: var(--bs-light);
--white: #FFFFFF;
--dark-text: var(--bs-body-color);
--light-text: #FFFFFF;
--border-muted: var(--bs-border-color);
}

#lc-header .bs-hdr-be .dropdown-menu {
border: none;
border-radius: 6px;
box-shadow: 0 8px 25px rgba(0, 0, 0, .2)
}

#lc-header .bs-hdr-be-top .be-contact {
display: flex;
gap: 16px;
align-items: center
}

#lc-header .bs-hdr-be-top .be-contact-item {
display: flex;
align-items: center;
gap: 5px
}

/* #lc-header .bs-hdr-be-top .be-contact-item svg {
width: 12px;
height: 12px
} */

#lc-header .bs-hdr-be-top .be-socials {
display: flex;
gap: 10px;
align-items: center
}

#lc-header .bs-hdr-be-top .be-socials a {
display: flex;
align-items: center
}

#lc-header .bs-hdr-be-top .be-socials svg {
/* width: 14px;
height: 14px */
}

@media(max-width:1199.98px) {
#lc-header .bs-hdr-be .navbar-collapse {
border-top: 1px solid rgba(255, 255, 255, .1);
margin-top: .5rem;
padding-top: .5rem
}
}

@media(max-width:575.98px) {
#lc-header .bs-hdr-be-top .d-flex {
flex-direction: column;
gap: 4px !important;
text-align: center
}
}

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading, 'Montserrat', sans-serif);
font-weight: 700;
color: var(--dark-text);
}

p,
li,
a,
span,
label,
input,
textarea,
select,
button {
font-family: var(--font-body, 'Open Sans', sans-serif);
font-weight: 400;
color: var(--dark-text);
}

/* ===== SECTION SPACING ===== */
.section-padding {
padding-top: 80px;
padding-bottom: 80px;
}

.section-padding-lg {
padding-top: 100px;
padding-bottom: 100px;
}

/* ===== SECTION HEADINGS ===== */
.section-heading {
font-size: 2.25rem;
margin-bottom: 1.25rem;
line-height: 1.3;
}

.section-subheading {
font-size: 1.125rem;
line-height: 1.8;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}

/* ===== BUTTONS ===== */
.btn-amber {
background-color: var(--cta-amber);
color: var(--white);
border: 2px solid var(--cta-amber);
border-radius: 50px;
padding: 14px 36px;
font-family: var(--font-heading, 'Montserrat', sans-serif);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}

.btn-amber:hover {
background-color: color-mix(in srgb, var(--bs-warning) 88%, #fff);
border-color: color-mix(in srgb, var(--bs-warning) 88%, #fff);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(var(--bs-warning-rgb), 0.4);
}

.btn-outline-white {
background-color: transparent;
color: var(--white);
border: 2px solid var(--white);
border-radius: 50px;
padding: 14px 36px;
font-family: var(--font-heading, 'Montserrat', sans-serif);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}

.btn-outline-white:hover {
background-color: var(--white);
color: var(--primary-navy);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.btn-outline-teal {
background-color: transparent;
color: var(--accent-teal);
border: 2px solid var(--accent-teal);
border-radius: 50px;
padding: 12px 32px;
font-family: var(--font-heading, 'Montserrat', sans-serif);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}

.btn-outline-teal:hover {
background-color: var(--accent-teal);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(var(--bs-secondary-rgb), 0.3);
}

/* ===== HERO ===== */
.hero-section {
background-color: var(--primary-navy);
background-image: linear-gradient(135deg, var(--primary-navy) 0%, color-mix(in srgb, var(--bs-primary) 76%, #000) 100%);
}

.hero-section h1 {
color: var(--white);
font-size: 2.75rem;
line-height: 1.25;
margin-bottom: 1.5rem;
}

.hero-section p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
line-height: 1.8;
}

@media (min-width: 992px) {
.hero-section h1 {
font-size: 3.25rem;
}
}

/* ===== EMPATHY LIST ===== */
.empathy-list {
list-style: none;
padding-left: 0;
margin: 2rem 0;
}

.empathy-list li {
position: relative;
padding: 12px 0 12px 40px;
font-size: 1.05rem;
line-height: 1.6;
border-bottom: 1px solid var(--border-muted);
}

.empathy-list li:last-child {
border-bottom: none;
}

.empathy-list li::before {
content: "F287";
font-family: "bootstrap-icons";
position: absolute;
left: 0;
top: 12px;
color: var(--accent-teal);
font-size: 1.25rem;
}

/* ===== SERVICE CARDS ===== */
.service-card {
background: var(--white);
border: none;
border-top: 4px solid var(--accent-teal);
border-radius: 8px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
padding: 2rem 1.75rem;
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.service-card .card-icon {
width: 60px;
height: 60px;
background-color: rgba(var(--bs-secondary-rgb), 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
}

.service-card .card-icon i {
font-size: 1.5rem;
color: var(--accent-teal);
}

.service-card h3 {
font-size: 1.15rem;
margin-bottom: 0.75rem;
color: var(--primary-navy);
}

.service-card p {
font-size: 0.95rem;
line-height: 1.7;
color: #555555;
margin-bottom: 0;
}

/* ===== WHY DIFFERENT ===== */
.why-different-list {
list-style: none;
padding-left: 0;
}

.why-different-list li {
position: relative;
padding: 8px 0 8px 32px;
font-size: 1rem;
line-height: 1.7;
}

.why-different-list li::before {
content: "F26A";
font-family: "bootstrap-icons";
position: absolute;
left: 0;
top: 8px;
color: var(--accent-teal);
font-size: 1.1rem;
}

.img-placeholder {
background-color: var(--border-muted);
border-radius: 12px;
width: 100%;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
color: #999999;
font-size: 0.95rem;
font-family: var(--font-body, 'Open Sans', sans-serif);
}

/* ===== LEAD MAGNET ===== */
.lead-magnet-section {
background-color: var(--primary-navy);
background-image: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 76%, #000) 0%, var(--primary-navy) 100%);
}

.lead-magnet-section h2,
.lead-magnet-section p {
color: var(--white);
}

.lead-magnet-section p {
color: rgba(255, 255, 255, 0.85);
}

.form-wrapper {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 2.5rem 2rem;
backdrop-filter: blur(4px);
}

/* ===== FAQ ACCORDION ===== */
.faq-accordion .accordion-item {
border: 1px solid var(--border-muted);
border-radius: 8px !important;
margin-bottom: 1rem;
overflow: hidden;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.faq-accordion .accordion-button {
font-family: var(--font-heading, 'Montserrat', sans-serif);
font-weight: 600;
font-size: 1.05rem;
color: var(--primary-navy);
padding: 1.25rem 1.5rem;
background-color: var(--white);
}

.faq-accordion .accordion-button:not(.collapsed) {
background-color: var(--white);
color: var(--primary-navy);
box-shadow: none;
}

.faq-accordion .accordion-button:focus {
box-shadow: none;
border-color: var(--border-muted);
}

.faq-accordion .accordion-button::after {
filter: none;
color: var(--accent-teal);
}

.faq-accordion .accordion-body {
font-size: 1rem;
line-height: 1.8;
color: #555555;
padding: 0.5rem 1.5rem 1.5rem;
}

/* ===== FINAL CTA ===== */
.final-cta-section {
background-color: var(--accent-teal);
background-image: linear-gradient(135deg, var(--accent-teal) 0%, color-mix(in srgb, var(--bs-secondary) 82%, #fff) 100%);
}

.final-cta-section h2,
.final-cta-section p {
color: var(--white);
}

/* ===== UTILITY ===== */
.text-teal {
color: var(--accent-teal);
}

.text-navy {
color: var(--primary-navy);
}

.fw-600 {
font-weight: 600;
}

.max-w-800 {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

.max-w-700 {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

.max-w-600 {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* --- cards / sections / buttons (was inline in page 19619) --- */
:root {
    --navy: var(--bs-primary);
    --teal: var(--bs-secondary);
    --amber: var(--bs-warning);
    --light-bg: var(--bs-light);
    --white: var(--bs-body-bg);
    --dark-text: var(--bs-body-color);
    --border: var(--bs-border-color);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    color: var(--navy);
  }

  p, li, span, a, td, th, label, input, textarea, select, button {
    font-family: var(--font-body, 'Open Sans', sans-serif);
    font-weight: 400;
    color: var(--dark-text);
  }

  .btn-amber {
    background-color: var(--amber);
    color: var(--white);
    border: none;
    border-radius: 50px;
    padding: 14px 36px;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
  }

  .btn-amber:hover {
    background-color: var(--bs-warning);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--bs-warning-rgb), 0.4);
  }

  .section-navy {
    background-color: var(--navy);
  }

  .section-light {
    background-color: var(--light-bg);
  }

  .section-white {
    background-color: var(--white);
  }

  .section-teal {
    background-color: var(--teal);
  }

  .lead-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
  }

  .section-subtitle {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
  }

  .content-card {
    background: var(--white);
    border-radius: 12px;
    padding: 40px 36px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
    height: 100%;
  }

  .content-card-light {
    background: var(--light-bg);
    border-radius: 12px;
    padding: 40px 36px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
    height: 100%;
  }

  .card-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .card-icon-circle i {
    font-size: 1.7rem;
  }

  .teal-icon-bg {
    background-color: rgba(var(--bs-secondary-rgb), 0.1);
  }

  .teal-icon-bg i {
    color: var(--teal);
  }

  .navy-icon-bg {
    background-color: rgba(27, 54, 93, 0.1);
  }

  .navy-icon-bg i {
    color: var(--navy);
  }

  .amber-icon-bg {
    background-color: rgba(var(--bs-warning-rgb), 0.1);
  }

  .amber-icon-bg i {
    color: var(--amber);
  }

  .styled-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .styled-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    font-size: 1.02rem;
    line-height: 1.6;
  }

  .styled-list li i {
    color: var(--teal);
    font-size: 0.7rem;
    margin-right: 12px;
    margin-top: 8px;
    flex-shrink: 0;
  }

  .styled-list-amber li i {
    color: var(--amber);
  }

  .styled-list-navy li i {
    color: var(--navy);
  }

  .step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--teal);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    margin-right: 14px;
  }
/* Fix (promoted to flare-kit 2026-08-15): an .img-placeholder holding a REAL image should hug it,
   not render its grey box + tall min-height (grey leaked around shorter images on mobile). */
.img-placeholder:has(> img){background:transparent!important;min-height:0!important;border-radius:0!important;padding:0!important;display:block!important}
.img-placeholder > img{width:100%!important;height:auto!important;display:block!important}

/* ============================================================================================
   FORMS — breathing room (2026-10-08)
   Forminator's "material" design hides the label inside the control: text labels carry
   transform: translateY(30px) at rest so they sit on the input line, and textarea labels are
   position:absolute; top:0 inside the field box. Both read as "label touching / inside the
   control", and neither matches the hero card, where labels sit above the field.
   Normalised site-wide: every label sits above its control with a visible gap, nothing is
   overlaid, and rows get a rhythm that still clears the 30px float distance.
   Hero overrides live in assets/hero-showcase.css, which is enqueued after this file.
   ============================================================================================ */

/* 3. Row rhythm. Forminator's "open" grid stacks its two-up columns by width, not by media
      query, so a column can stack inside a narrow container at any viewport and land its input
      flush on the next field's label. Flex + gap separates the columns on both axes, so the
      spacing holds whether the pair sits side by side or stacks. */
.forminator-ui.forminator-custom-form .forminator-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px 20px;
  margin-bottom: 30px !important;
}
.forminator-ui.forminator-custom-form .forminator-row > .forminator-col {
  flex: 1 1 220px !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}
.forminator-ui.forminator-custom-form .forminator-row:last-of-type { margin-bottom: 0 !important; }
/* Rows that render nothing (empty, or holding only hidden consent fields) must not contribute
   a gap; otherwise the form grows a dead band no one can see the cause of. */
.forminator-ui.forminator-custom-form .forminator-row:empty { margin-bottom: 0 !important; gap: 0 !important; }

/* 4. A message box you can actually write a paragraph in. */
.forminator-ui.forminator-custom-form .forminator-textarea { min-height: 170px !important; }

/* 5. Consent block and submit need their own separation from the fields above them. */
.forminator-ui.forminator-custom-form .forminator-checkbox { margin-bottom: 10px !important; }
.forminator-ui.forminator-custom-form .forminator-button-submit { margin-top: 10px !important; }

/* 6. Rows that render nothing must not reserve a gap. The captcha row holds an invisible
      reCAPTCHA (0px, badge is viewport-fixed) and the consent/checkbox rows are display:none
      until consent-provision reveals them — five such rows were reserving 130px of dead space
      in the hero card alone, pushing the submit button below the fold.
      The gap moves onto the COLUMN, which contributes nothing while it is display:none and
      spaces correctly the moment the field is made visible. */
.forminator-ui.forminator-custom-form .forminator-row:has(> .forminator-field-captcha),
.forminator-ui.forminator-custom-form .forminator-row:has(> .forminator-field-consent),
.forminator-ui.forminator-custom-form .forminator-row:has(> .forminator-field-checkbox) {
  margin-bottom: 0 !important;
  gap: 0 !important;
}
.forminator-ui.forminator-custom-form .forminator-col.forminator-field-consent,
.forminator-ui.forminator-custom-form .forminator-col.forminator-field-checkbox {
  margin-bottom: 20px !important;
}

/* ============================================================================================
   FORM FEEDBACK LEGIBILITY (2026-10-09)
   The hero paints its own copy white for the navy panel with a blanket
   `.hero-section h1, .hero-section h2, .hero-section p, .hero-section span { color:#fff }`
   (a <style> block in <head>). The contact card inside the hero is WHITE, so every span in it
   inherited white — Forminator puts its response text in <label><span>…</span></label> and its
   field errors in <span class="forminator-error-message">. Measured on caestatesolutions.com:
   response message 1.00:1 (white on white, completely invisible) and field errors 1.25:1. The
   hero form therefore gave a visitor NO visible feedback: not "Invalid CAPTCHA", not
   "This field is required".

   Two parts: undo the blanket white inside the card, then give the status messages explicit
   accessible colours.

   NOTE: --bs-danger and --bs-success cannot be used here. The Coldwell Banker re-skin set them
   to #00234F and #00307A — both navy — so an error styled with var(--bs-danger) would be
   indistinguishable from a success. Dedicated status tokens instead.
   ============================================================================================ */
:root {
  --form-msg-error:   #B02A37;  /* 6.50:1 on white */
  --form-msg-success: #0F5132;  /* 9.36:1 on white */
}

/* 1. The card is light; stop it inheriting the hero's white-span rule. (0,2,1 beats 0,1,1.) */
.hero-section .pb-hero-form span { color: inherit; }

/* 2. Status messages, every form on the site, whatever context they render in. */
.forminator-ui .forminator-response-message,
.forminator-ui .forminator-response-message label,
.forminator-ui .forminator-response-message span,
.forminator-ui .forminator-error-message,
.forminator-ui .forminator-error-message span,
.forminator-ui .forminator-label--error,
.forminator-ui .forminator-label--error span {
  color: var(--form-msg-error) !important;
  -webkit-text-fill-color: var(--form-msg-error) !important;
}
.forminator-ui .forminator-response-message.forminator-success,
.forminator-ui .forminator-response-message.forminator-success label,
.forminator-ui .forminator-response-message.forminator-success span,
.forminator-ui .forminator-response-message.forminator-accessible-success,
.forminator-ui .forminator-response-message.forminator-accessible-success span {
  color: var(--form-msg-success) !important;
  -webkit-text-fill-color: var(--form-msg-success) !important;
}
/* Give the message block room and a readable size rather than a bare line of coloured text. */
.forminator-ui .forminator-response-message { font-size: .95rem; line-height: 1.5; }
.forminator-ui .forminator-response-message:not(:empty) { margin-bottom: 14px; }

/* ============================================================================================
   TICKET 2026-11-06 (Winston Covington) — universal type scale + header sizing
   ============================================================================================
   "Page content, all pages: can we make the fonts larger universally? Feels the normal text
   is too small."

   The site is sized almost entirely in rem, so the honest fix is one rule on the root rather
   than chasing every component. Measured before: root 16px, body copy 1.2rem = 19.2px, but the
   card and list text that makes up most of a page sits at .95rem = 15.2px and the nav at
   .9rem = 14.4px — that small text is what reads as cramped. Raising the root lifts all of it
   proportionally and leaves the type hierarchy intact.

   108.5% -> 17.36px root:  card copy 15.2 -> 16.5, nav 14.4 -> 15.6, body 19.2 -> 20.8,
   h2 36 -> 39. Anything specified in px (a handful of section paddings) is deliberately
   unchanged, so the vertical rhythm does not stretch with the text.
   ============================================================================================ */
html {
  font-size: 108.5%;
}

/* The header's own request: name, title and nav links a step up. The brand lines are sized
   inline in the partial (they scale with the root above); these are the nav items, which
   Bootstrap sets at .9rem. */
#lc-header .navbar-nav .nav-link {
  font-size: 1rem;
}
#lc-header .dropdown-item {
  font-size: .95rem;
}

/* The brand is now a vertical stack (logo under the name) rather than a row, so it no longer
   needs the row's vertical centring and should not stretch the sticky bar more than it must. */
#lc-header .navbar-brand {
  line-height: 1.15;
}