/**
 * RenoQuotes brand override for the Landor template's CSS variables.
 * Loaded after main.css so these values win the cascade.
 * Original template used a real-estate palette (black/yellow-green/orange);
 * this remaps it to the real RenoQuotes brand — amber-orange (#FFA503),
 * with navy kept as the dark ink tone.
 */
:root {
  --tp-theme-color: #101c28;      /* was #000000 — navy ink, drives most headings/dark bg */
  /* was #c2660d (a dark amber) — that shade kept resurfacing across ~98
     main.css rules (hover states, badges, text utilities) that the earlier
     per-selector overrides below never touched. RenoQuotes only has one
     accent color, so secondary now matches orange exactly rather than
     drifting back to the dark amber anywhere else in the vendor CSS. */
  --tp-secoundery-color: #ffa503;
  --tp-orange-color: #ffa503;     /* was #E6641C — real logo orange, primary accent */
  --tp-body-color: #47535c;       /* was #404038 — cooler slate for body copy */
}

/* Homepage hero lead-in line: sized down from .tp-hero-deg's default 24px,
   and colored (default inherits body copy's cool slate, too light against
   the gray section background to read as intended). This element also had
   main.js's `tp_fade_anim` scroll-fade class, whose GSAP tween got
   permanently stuck around opacity: 0.2 for this specific element (sibling
   elements with the same class completed to opacity: 1 fine) — root cause
   not pinned down, so the class was dropped from that element in
   HeroBanner.tsx entirely rather than left fighting a flaky animation on
   the one line that most needs to stay legible. */
.tp-hero-deg-dark {
  font-size: 20px;
  color: var(--tp-theme-color);
}

/* .tp-hero-banner-title's vendor breakpoints (160/135/100/75px) were tuned
   for the demo's own short words ("BUILD"/"BEYOND"). "RENOVATE" (8
   characters) is long enough that at the vendor's fixed pixel sizes it
   overflows the heading column and wraps mid-word ("RENOVAT" / "E") below
   the lg breakpoint, where the heading column isn't yet wide enough to
   absorb it. Viewport-relative sizing scales the font down with the
   (now full-width) column instead of overflowing it. Verified empirically
   across 320–767px with no mid-word wrap. */
@media (max-width: 767.98px) {
  .tp-hero-banner-title {
    font-size: 11vw;
  }
}
/* The vendor groups 768–991.98px into the same 100px rule as 992–1199.98px,
   but Bootstrap's md container is narrower in absolute pixels than its lg
   container, so the same font-size that fits at lg still wraps mid-word at
   md. Sized down specifically for this range. Confirmed a genuine wrap
   here (not the animation-timing artifact seen elsewhere) even with the
   char-reveal animation fully settled. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-banner-title {
    font-size: 68px;
  }
}
/* Requested size for the lg/xl desktop range — one flat value replacing the
   vendor's stepped 135px (1200–1399.98px) / 160px (1400px+) tiers.
   "RENOVATE" measures ~679px wide at 140px in this font (Manrope 800,
   -0.03em tracking); comfortably inside the ~773px the widened heading
   column below provides — but only from 1400px up. The container itself
   is narrower in the 1200–1399.98px band (Bootstrap's xl vs xxl tier), so
   the same 140px still wraps mid-word there; sized down for that band
   specifically (must come after the rule above to win the overlap). */
@media (min-width: 1200px) {
  .tp-hero-banner-title {
    font-size: 140px;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-hero-banner-title {
    font-size: 115px;
  }
}
/* Give the side columns more breathing room now that 140px needs less
   width than the vendor's original 160px did — scoped to this specific
   section (not a global .col-xl-2/.col-xl-8 override) since those are
   generic Bootstrap classes used elsewhere on the site. 2/8/2 (16.67%
   /66.67%/16.67%) → 2.5/7/2.5 (20.83%/58.33%/20.83%). */
@media (min-width: 1200px) {
  .tp-hero-banner-main .col-xl-2 {
    flex: 0 0 20.8333%;
    max-width: 20.8333%;
  }
  .tp-hero-banner-main .col-xl-8 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
}

/* Plain .tp-btn (no border/white/black/submit modifier) previously rendered
   on the old dark-amber secondary color by default — this is the header
   "Get in touch" button and every plain hero CTA site-wide. Forced onto the
   real brand orange with white text instead. Excludes any element carrying
   another "tp-btn-*" modifier class. Kept even though --tp-secoundery-color
   now equals --tp-orange-color, so this survives if that ever changes back. */
.tp-btn:not([class*="tp-btn-"]) {
  background-color: var(--tp-orange-color);
  color: var(--tp-white-color);
}

/* Nav dropdown background once the header goes solid on scroll: the vendor
   rule uses var(--tp-theme-color), which we've set to navy — reads as dark
   blue, not black. The header's own scrolled background is a hardcoded
   near-black (rgb(19,19,22)); match the dropdown to that instead. */
.header-sticky.sticky-black .tp-header-menu ul li .sub-menu {
  background-color: rgb(19, 19, 22);
}

/* .tp-services-support's icon badge is meant to sit beside a single short
   line of text. With a full paragraph underneath, .tp-flex-center's
   align-items: center centers the badge against the combined height of
   title + paragraph instead of lining it up with the title. */
.tp-services-support.tp-flex-center {
  align-items: flex-start;
}
.tp-services-support .tp-services-support-icon {
  margin-top: 2px;
}

/* .tpproject2__img-short has no intrinsic sizing in the vendor CSS — the
   original demo's thumbnails happened to already be tiny (~100px) source
   files. Our category photos are full-size, so without an explicit size
   they either don't render at a sane size or leave the collapsed card
   looking empty. */
.tpproject2__img-short {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* How It Works card hover: was the navy theme color, now pure black. */
.tpserv:hover {
  background-color: #000000;
}
/* The step number (.tp-text-orange) sits on the icon badge, which the
   vendor rule turns var(--tp-secoundery-color) on hover — now the same
   orange as the number itself (secondary was unified with the brand
   orange), so the number disappeared into its own badge on hover. */
.tpserv:hover .tp-text-orange {
  color: #ffffff;
}

/* Why Homeowners Trust Us expanded panel: was the amber secondary color,
   now the real brand orange. */
.tp-services-body {
  background-color: #ffa503;
}

/* .tp-portfolio-spacing-3 has no top padding of its own at any breakpoint
   (only a bottom one via the pb-150 utility), which left this section
   pressed right up against Trust Signals' gray background above it. */
.tp-portfolio-pt {
  padding-top: 150px;
}
@media (max-width: 767.98px) {
  .tp-portfolio-pt {
    padding-top: 70px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .tp-portfolio-pt {
    padding-top: 100px;
  }
}

/* .tp-floting-card-img-item-N only positions the floating photo cards
   (top/left/right/bottom) — the vendor's own source images just happened to
   already be tiny (~225-420px). Our real photos are full-size, so without
   an explicit size they'd render as giant images breaking the layout. */
.tp-floting-card-img-item-1 img,
.tp-floting-card-img-item-2 img,
.tp-floting-card-img-item-3 img,
.tp-floting-card-img-item-4 img,
.tp-floting-card-img-item-5 img {
  width: 150px;
  height: 115px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* main.js runs `$('select').niceSelect()` on load, which hides the native
   <select> and injects a sibling `.nice-select` div as the actual visible
   control — so styling the <select> itself (as a previous version of this
   rule did) has no visible effect at all. The vendor's own `.nice-select`
   default (transparent background, thin border, 58px pill radius, FontAwesome
   glyph arrow) doesn't match our gray, borderless, 54px text inputs, so it
   still reads as a different control next to them. */
.tp-contect-box-input .nice-select {
  background-color: var(--tp-gray-color);
  border: 1px solid transparent;
  height: 54px;
  line-height: 54px;
  border-radius: 6px;
  padding: 0 40px 0 20px;
  color: var(--tp-body-color);
}
.tp-contect-box-input .nice-select:hover,
.tp-contect-box-input .nice-select.open,
.tp-contect-box-input .nice-select:focus {
  border-color: transparent;
  background-color: var(--tp-gray-color);
}
.tp-contect-box-input .nice-select::after {
  content: "";
  font-family: inherit;
  width: 8px;
  height: 8px;
  border-style: solid;
  border-color: var(--tp-body-color);
  border-width: 0 1.5px 1.5px 0;
  right: 22px;
  top: 44%;
  margin-top: 0;
  transform: translateY(-50%) rotate(45deg);
}
.tp-contect-box-input .nice-select.open::after {
  transform: translateY(-50%) rotate(-135deg);
}
.tp-contect-box-input .nice-select .list {
  border-radius: 10px;
  box-shadow: 0 15px 35px rgba(16, 28, 40, 0.12);
  width: 100%;
}
.tp-contect-box-input .nice-select .option:hover,
.tp-contect-box-input .nice-select .option.selected {
  background-color: var(--tp-gray-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-box-input .nice-select {
    height: 45px;
    line-height: 45px;
  }
}

/* .tp-contect-box-input's own button rule (needed to override .tp-btn-submit's
   base white/theme-hover pair, which loses the specificity fight to this
   descendant selector) put the submit button on the same dark amber
   secondary color as the header CTA — same fix, real brand orange + white
   text, with navy as the hover state for feedback. */
.tp-contect-box-input button {
  background-color: var(--tp-orange-color);
  color: #ffffff;
}
.tp-contect-box-input button:hover {
  background-color: var(--tp-theme-color);
  color: var(--tp-white-color);
}

/* QuoteFormCta's final section: .tp-about-spacing's 200px bottom padding
   (meant for a section with a big image beneath it, per about.html) reads
   as a large dead gap here since this section is a plain two-column CTA
   sitting right above the internal-links bar and footer. */
.tp-quote-cta-spacing {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-quote-cta-spacing {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
@media (max-width: 767.98px) {
  .tp-quote-cta-spacing {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

/* Root cause of every "expanded accordion body renders blank" bug across
   the site (FAQ, Trust Signals, etc): Tailwind ships a `.collapse` utility
   (visibility: collapse, for gap-preserving hides) that has the exact same
   class name as Bootstrap's own `.collapse` component class. Tailwind's
   stylesheet wins that name collision, so every Bootstrap accordion panel
   — including ones already open via `.show` — was permanently invisible
   regardless of the show/collapsed state. Loaded last here so it wins. */
.collapse.show {
  visibility: visible !important;
}