/* multi-import:brand-layer:end */

/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
@charset "UTF-8";
/* Self-hosted static woff2 (Fontsource), replaces the remote Google Fonts @import. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');}

:root{
  --typography-family-heading:'Plus Jakarta Sans',-apple-system,'system-ui','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --typography-family-main:'Inter',-apple-system,'system-ui','Segoe UI',Roboto,'Oxygen-Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
  --typography-family-paragraph:var(--typography-family-main);
  --typography-family-button:var(--typography-family-main);
  --color-primary:#191b2b;
  --color-secondary:#191b2b;
  --color-tertiary:#E1315C;
  --color-tertiary-dark:#C22850;
  --color-tertiary-container:#FBE1E7;
  --color-paper:#F6F1E7;
  --color-paper-tint:#FBF8F2;
  --color-paper-deep:#EDE6D6;
  --color-rule:#E3DDCE;
  --color-ink:#191b2b;
  --color-ink-soft:#4A4B5E;
  --color-surface:#F6F1E7;
  --color-surface-container:#FBF8F2;
  --color-surface-container-low:#FBF8F2;
  --color-surface-container-high:#EDE6D6;
  --color-surface-container-highest:#E3DDCE;
  --color-on-surface:#191b2b;
  --color-accent:#E1315C;
  --color-accent-hover:#C22850;
  --color-heading:#191b2b;
  --color-main:#191b2b;
  --color-paragraph:#4A4B5E;
  --color-link-text:#E1315C;
  --color-link-text-hover:#191b2b;
  --color-blue:#191b2b;
  --color-info:#191b2b;
  --wp--preset--color--blue:#191b2b;
  --wp--preset--color--primary:#191b2b;
  --wp--preset--color--secondary:#E1315C;
}

body{background:#F6F1E7;color:#191b2b;font-family:var(--typography-family-main);}

/* Browser default accent-color is the UA blue, and it tints native controls
   including the select picker's scrollbar and its scroll arrows. That blue is
   what was showing in the "What can we help with?" dropdown. */
:root{accent-color:#E1315C;}
::selection{background:#E1315C;color:#FFFFFF;}

html{scrollbar-color:#E1315C #F6F1E7;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:#F6F1E7;}
::-webkit-scrollbar-thumb{background-color:#E1315C;border-radius:8px;border:2px solid #F6F1E7;}
::-webkit-scrollbar-thumb:hover{background-color:#C22850;}
a{color:#E1315C;text-decoration-color:#E1315C;}
a:hover{color:#191b2b;text-decoration-color:#191b2b;}
/* Menu / nav underlines: brand red, never the UA default. Covers both the
   text-decoration form and the ::after bar form themes commonly use. */
.nav-link,.menu-item a,.main-navigation a,.site-header a{text-decoration-color:#E1315C;}
.nav-link::after,
.menu-item a::after,
.main-navigation a::after,
.site-header a::after,
.nav-link:hover::after,
.menu-item.current-menu-item a::after{background-color:#E1315C !important;border-color:#E1315C !important;}

h1,h2,h3,h4,h5,h6,
.card-title,
.process-step-number,
.site-title,
.block-carpet-hero h1,
.block-carpet-hero h2{
  font-family:var(--typography-family-heading);
  font-weight:800;
}
p,
.card-description,
.card-subtitle,
.review-card-quote,
.review-card-author{
  font-family:var(--typography-family-paragraph);
  font-weight:400;
}

.card-subtitle,
.services-grid .card-subtitle,
.card-grid .card-subtitle,
.block-services-grid .card-subtitle{
  color:#191b2b !important;
}

/* Hero quote-form "Select a service" dropdown: strip border/bg, red text */
.block-local-hero select,
.quote-form-field select{
  color:#E1315C !important;
}

.block-local-hero select::picker(select),
.quote-form-field select::picker(select){
  border:none !important;
  background:#FFFFFF !important;
  box-shadow:none !important;
  /* The picker popup is in the top layer, so it does NOT inherit the
     scrollbar-color set on html - it fell back to the UA blue. Set it here. */
  accent-color:#E1315C;
  scrollbar-color:#E1315C #F6F1E7;
  scrollbar-width:thin;
}
::picker(select){
  accent-color:#E1315C;
  scrollbar-color:#E1315C #F6F1E7;
  scrollbar-width:thin;
}
.block-local-hero select::picker(select)::-webkit-scrollbar,
.quote-form-field select::picker(select)::-webkit-scrollbar,
::picker(select)::-webkit-scrollbar{width:10px;}
.block-local-hero select::picker(select)::-webkit-scrollbar-track,
.quote-form-field select::picker(select)::-webkit-scrollbar-track,
::picker(select)::-webkit-scrollbar-track{background:#F6F1E7;}
.block-local-hero select::picker(select)::-webkit-scrollbar-thumb,
.quote-form-field select::picker(select)::-webkit-scrollbar-thumb,
::picker(select)::-webkit-scrollbar-thumb{background-color:#E1315C;border-radius:8px;}

.block-local-hero select:focus,
.quote-form-field select:focus{
  outline:none !important;
  box-shadow:none !important;
  border-color:#E1315C !important;
}

.block-local-hero select option,
.quote-form-field select option{
  color:#191b2b !important;
  background-color:#FFFFFF !important;
}

/* "Select a service" placeholder stays red; every real service option is black */
.block-local-hero select option:checked,
.block-local-hero select option:disabled,
.quote-form-field select option:checked,
.quote-form-field select option:disabled{
  background-color:transparent !important;
  color:#E1315C !important;
}

/* BROKEN SELECTOR FIX (Aug 14 2026). Chrome draws option::checkmark on the
   selected option in a base-select picker. The glyph was arriving as "a-euro-cent"
   mojibake and sitting on top of the option label. That string is a UTF-8
   bullet (U+2022) being decoded as Windows-1252, which happens when a
   stylesheet declares a literal glyph in content: without a charset. Ours is
   now @charset UTF-8 at line 1, and we override the content with a CSS escape
   rather than a literal character so it can never re-mangle.
   The checkmark is hidden: it overlapped the label, and selection is already
   signalled by the red option text. To bring it back as a red tick, swap
   display:none for content:"\2713" plus padding-inline-end on the option. */
.block-local-hero select option::checkmark,
.quote-form-field select option::checkmark,
option::checkmark{
  content:"" !important;
  display:none !important;
}
/* hover highlight in the picker: brand tint, not the UA blue */
.block-local-hero select option:hover,
.quote-form-field select option:hover,
::picker(select) option:hover{
  background-color:#FBE1E7 !important;
  color:#191b2b !important;
}

/* Dropdown arrow icon on the closed select control - black, not the
   browser-default blue */
.block-local-hero select::picker-icon,
.quote-form-field select::picker-icon{
  color:#191b2b !important;
  fill:#191b2b !important;
}

/* Hero feature line bullets: swap plain dot for a checkmark icon, red */
.block-local-hero-feature-dot{
  background-color:transparent !important;
  border-radius:0 !important;
  width:auto !important;
  height:auto !important;
  display:inline-flex !important;
  align-items:center;
}

.block-local-hero-feature-dot::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f058";
  color:#E1315C !important;
  font-size:14px;
  line-height:1;
}

button,
.btn,
.button,
input[type="submit"],
.header-cta-button,
.sticky-cta-call,
.sticky-cta-quote,
.cta-banner-button,
.nav-link,
.card-link,
a.card-link{
  font-family:var(--typography-family-button);
  font-weight:700;
}

/* Sticky CTA bar: Call button is navy, turns red on hover; Get a Quote
   button is red, turns navy on hover (opposite of each other) */
.sticky-cta-call{
  background-color:#191b2b !important;
  border-color:#191b2b !important;
}
.sticky-cta-call:hover{
  background-color:#E1315C !important;
  border-color:#E1315C !important;
}
.sticky-cta-quote{
  background-color:#E1315C !important;
  border-color:#E1315C !important;
}
.sticky-cta-quote:hover{
  background-color:#191b2b !important;
  border-color:#191b2b !important;
}

/* Sticky CTA bar normally shows on mobile only - also show it on desktop,
   but scoped to the Contact page only (body carries a "subject-contact-page"
   class there) so it doesn't appear on desktop sitewide. */
@media (min-width: 992px){
  body.subject-contact-page #sticky-cta{
    display:flex !important;
  }
}

/* Before/after transformation block: no confirmed CSS hooks yet (new block
   type, added Aug 12 2026) - relying on theme defaults until live-rendered. */

/* CTA banner: a troweled parge coat, not brick (Aug 14 2026).

   STRUCTURE - this is the thing that broke on first attempt. The markup is:
       <section class="block block-cta-banner">     <- page-level wrapper
         <div class="cta-banner">                   <- THE CARD
           <span class="cta-banner-fringe ...-top">
           ... heading / description / buttons ...
           <span class="cta-banner-fringe ...-bottom">
   The CARD is the inner .cta-banner div, NOT the section. Painting the render
   onto the section put it *behind* the theme's own dark .cta-banner card, so
   the parge only showed as a frame around the outside, the dark navy heading
   vanished into the dark card, and the navy-outlined secondary button became
   invisible against it. Everything below therefore targets .cta-banner, and
   the section is explicitly stripped back to a transparent wrapper.

   The two fringe spans are children of .cta-banner, so with the card
   positioned they anchor to the card edges, which is exactly what we want:
     fringe-top    = the crisp troweled edge where the coat stops
     fringe-bottom = the splash zone, the darker 12-18in band above grade that
                     this site's own copy calls the most common failure point

   TEXTURE - see the block comment on .cta-banner below. Short version: plain
   alpha-composited CSS gradients only. No blend modes, no SVG filters. */

/* section = transparent wrapper only, never the card */
.block-cta-banner{
  background:none !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* the card itself.

   TEXTURE: plain alpha-composited CSS gradients on the card's own
   background-image. NO mix-blend-mode and NO SVG raster - both were removed
   after they shipped broken.

   What went wrong before, in order:
     1. big radial gradients for the mottle  -> read as brushed metal, one
        bright band straight across the middle
     2. inline-SVG feTurbulence + mix-blend-mode -> correct-looking texture in
        a software-composited screenshot, but on a real GPU-composited Chrome
        the blended layer is rasterised in compositor tiles and the tile edges
        showed as hard-edged rectangles across the card. Measurable even in
        software: a 2.4-grey-level vertical step at ~36% of the card width,
        which is exactly where the visible edge landed on the live site.
   Blend modes and filter rasters are the fragile part. Everything here is
   ordinary alpha compositing, which cannot seam.

   The grain is four crossed hatches at odd angles with coprime periods
   (3/4/5/7px). The interference between them reads as fine aggregate stipple,
   it tiles perfectly at any size, and it needs no separate layer.
   Keep the broad radials at very low alpha - push them and the metal band
   comes back. */
.block-cta-banner .cta-banner{
  position:relative;
  background-color:#a8a49a !important;
  background-image:
    radial-gradient(78% 62% at 24% 28%, rgba(255,255,255,.07), transparent 62%),
    radial-gradient(70% 58% at 79% 66%, rgba(68,64,56,.08), transparent 64%),
    radial-gradient(92% 72% at 55% 96%, rgba(68,64,56,.06), transparent 60%),
    repeating-linear-gradient(37deg,  rgba(255,255,255,.050) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-53deg, rgba(64,60,52,.055)    0 1px, transparent 1px 4px),
    repeating-linear-gradient(83deg,  rgba(255,255,255,.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(11deg,  rgba(64,60,52,.030)    0 1px, transparent 1px 7px)
    !important;
  background-blend-mode:normal !important;
  box-shadow:inset 0 0 0 1px rgba(92,87,77,.30) !important;
  border:0 !important;
  border-radius:20px !important;
  overflow:hidden;
  padding:60px 32px !important;
  text-align:center;
  color:#2b2d3c !important;
}
/* the old feTurbulence layers are gone - make sure nothing resurrects them */
.block-cta-banner .cta-banner::before,
.block-cta-banner .cta-banner::after{
  content:none !important;
}
/* troweled top edge + splash-zone base, flush to the card */
.block-cta-banner .cta-banner-fringe{
  position:absolute;
  left:0;
  right:0;
  z-index:1;
  pointer-events:none;
  display:block;
  margin:0;
}
.block-cta-banner .cta-banner-fringe-top{
  top:0;
  bottom:auto;
  height:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
  border-top:4px solid #E1315C;
}
.block-cta-banner .cta-banner-fringe-bottom{
  bottom:0;
  top:auto;
  height:84px;
  background:linear-gradient(0deg, rgba(66,62,54,.52) 0%, rgba(66,62,54,.20) 58%, transparent 100%);
  border-bottom:4px solid #E1315C;
}
/* content sits above both texture layers */
.block-cta-banner .cta-banner-heading,
.block-cta-banner .cta-banner-description,
.block-cta-banner .cta-banner-buttons,
.block-cta-banner .cta-banner :is(h1,h2,h3,p),
.block-cta-banner .buttons,
.block-cta-banner .button-group{
  position:relative;
  z-index:2;
}
/* dark type on the light render - forced, because the theme paints this card
   dark and colours its type white */
.block-cta-banner .cta-banner :is(h1,h2,h3,p),
.block-cta-banner .cta-banner-description{color:#2b2d3c !important;}
.block-cta-banner .cta-banner :is(h1,h2,h3),
.block-cta-banner .cta-banner-heading{
  color:#191b2b !important;
  position:relative;
  padding-bottom:20px;
  margin-bottom:12px;
  display:inline-block;
}
.block-cta-banner .cta-banner :is(h1,h2,h3)::after,
.block-cta-banner .cta-banner-heading::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:64px;
  height:3px;
  background:#E1315C;
}
.block-cta-banner .button,
.block-cta-banner .btn,
.block-cta-banner a.cta-banner-button,
.block-cta-banner button{
  border-radius:999px !important;
  font-weight:700 !important;
  padding:16px 32px !important;
  border-width:2px !important;
  border-style:solid !important;
  text-decoration:none !important;
}
.block-cta-banner .cta-banner-buttons,
.block-cta-banner .buttons,
.block-cta-banner .button-group{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:8px;
}
/* Primary = solid brand red pill, white text. Red on grey render carries far
   more than the old white-on-navy did. Both the modifier class and the
   :first-of-type fallback are matched, so this holds whichever the theme emits. */
.block-cta-banner a.cta-banner-button-primary,
.block-cta-banner .button:first-of-type,
.block-cta-banner a.cta-banner-button:first-of-type,
.block-cta-banner button:first-of-type{
  background-color:#E1315C !important;
  border-color:#E1315C !important;
  color:#FFFFFF !important;
}
.block-cta-banner a.cta-banner-button-primary:hover,
.block-cta-banner .button:first-of-type:hover,
.block-cta-banner a.cta-banner-button:first-of-type:hover{
  background-color:#C22850 !important;
  border-color:#C22850 !important;
  color:#FFFFFF !important;
}
/* Secondary = transparent with a navy outline, navy text; fills navy on hover. */
.block-cta-banner a.cta-banner-button-secondary,
.block-cta-banner .button:last-of-type,
.block-cta-banner a.cta-banner-button:last-of-type,
.block-cta-banner button:last-of-type{
  background-color:transparent !important;
  border-color:#191b2b !important;
  color:#191b2b !important;
}
.block-cta-banner a.cta-banner-button-secondary:hover,
.block-cta-banner .button:last-of-type:hover,
.block-cta-banner a.cta-banner-button:last-of-type:hover{
  background-color:#191b2b !important;
  border-color:#191b2b !important;
  color:#FFFFFF !important;
}
/* Mobile: tighter padding, and pull the splash zone in so it does not crowd
   the buttons on a narrow card. */
@media (max-width:640px){
  .block-cta-banner .cta-banner{padding:44px 20px !important;}
  .block-cta-banner .cta-banner-fringe-bottom{height:52px;}
}
.block-carpet-hero form{background:#FFFFFF;color:#191b2b;}
.block-quote-form form{background:#f6f0e7;color:#191b2b;}

.block-quote-form button,
.block-quote-form input[type="submit"],
.block-carpet-hero form button,
.block-carpet-hero form input[type="submit"]{
  background-color:#191b2b !important;
  border-color:#191b2b !important;
  border-radius:999px !important;
}

button,.btn,.button,input[type="submit"]{background-color:var(--color-tertiary);border-color:var(--color-tertiary);}
button:hover,.btn:hover,.button:hover{background-color:var(--color-tertiary-dark);}
*:focus{outline-color:#E1315C;}

/* Mobile nav toggle + submenu dropdown toggles: transparent, no fill */
.nav-toggle,
#nav-toggle,
.dropdown-toggle,
button.dropdown-toggle{
  background-color:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

.nav-toggle:hover,
#nav-toggle:hover,
.dropdown-toggle:hover,
button.dropdown-toggle:hover{
  background-color:transparent !important;
}

.site-header a[href^="tel:"],
header a[href^="tel:"],
.header-cta,
.header-cta-button,
.header-phone,
.phone-pill,
.site-header .cta-button{
  background-color:#191b2b;
  color:#F6F1E7;
  border-color:#191b2b;
}

.process-step-icon-wrap{background-color:#191b2b;}
.process-step-number{color:#E1315C !important;}

/* Mandatory process-step connector kill rule */
.process-step + .process-step::before,
.process-step + .process-step:before{content:none !important;display:none !important;}

.card a,
.card-link,
a.card-link,
.service-card a,
.services-grid .card a,
.services-grid a.learn-more{color:#191b2b;}
.card a:hover,
.card-link:hover,
a.card-link:hover,
.service-card a:hover,
.services-grid .card a:hover,
.services-grid a.learn-more:hover{color:#E1315C;}

.nav-link:hover,
.nav-link:focus,
.nav-link.active,
.nav-link.is-active,
.nav-link.current,
.nav-link.current-menu-item,
.nav-link[aria-current="page"],
.nav-link[aria-expanded="true"],
li.current-menu-item > .nav-link,
li.current_page_item > .nav-link{
  color:#E1315C !important;
  border-bottom-color:#E1315C !important;
  text-decoration-color:#E1315C !important;
}

.site-title a:hover,
.site-title:hover,
a.site-title:hover,
.site-branding a:hover,
header .site-title:hover{color:#E1315C !important;}

.block-trust-checklist .card-content::before{
  background-color:#E1315C !important;
  color:#F6F1E7 !important;
  content:"\2713" !important;
  font-family:Arial, sans-serif;
}

#colophon a[href^="tel:"]::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f095";
  margin-right:8px;
  color:#E1315C;
}
#colophon a[href^="mailto:"]::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f0e0";
  margin-right:8px;
  color:#E1315C;
}

/* Remove the duplicate quick-contact row rendered a second time in the footer */
.footer-contact-row{
  display:none !important;
}

/* Contact column: address gets a location pin, hours gets a clock.
   Settings.json orders the Contact links as phone, address, email, hours,
   so instead of guessing a fixed position/class, target "the link right
   after the phone link" and "the link right after the email link" -- this
   holds regardless of what wrapper class/element the theme actually uses,
   whether links sit directly next to each other or are each wrapped in
   their own <li>. */
#colophon a[href^="tel:"] + a::before,
#colophon li:has(a[href^="tel:"]) + li a::before,
footer a[href^="tel:"] + a::before,
footer li:has(a[href^="tel:"]) + li a::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f3c5";
  margin-right:8px;
  color:#E1315C;
}

#colophon a[href^="mailto:"] + a::before,
#colophon li:has(a[href^="mailto:"]) + li a::before,
footer a[href^="mailto:"] + a::before,
footer li:has(a[href^="mailto:"]) + li a::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f017";
  margin-right:8px;
  color:#E1315C;
}

/* Review card author name: brand ink, not the theme's default blue */
.review-card-author{
  color:#191b2b !important;
}
/* multi-import:brand-layer:end */