.elementor-2785 .elementor-element.elementor-element-132a4338{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-2785 .elementor-element.elementor-element-132a4338{--content-width:1600px;}}/* Start custom CSS for container, class: .elementor-element-132a4338 *//* =========================================================
   Tile Guide – Professional Editorial Styling
   Apply by adding class "tile-guide" to the Section/Container
   ========================================================= */

/* Container */
.tile-guide{
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 0px;
  color: #111827;
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Better rhythm (global spacing) */
.tile-guide p{
  margin: 0 0 16px 0;
}

.tile-guide p + p{
  margin-top: 10px;
}

.tile-guide ul,
.tile-guide ol{
  margin: 12px 0 18px 0;
  padding-left: 20px;
}

.tile-guide li{
  margin: 9px 0;
}

/* Headings */
.tile-guide h1,
.tile-guide h2,
.tile-guide h3,
.tile-guide h4{
  color: #0b1220;
  letter-spacing: -0.25px;
  margin: 0;
}

/* H1 – hero title */
.tile-guide h1{
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  margin-bottom: 14px;
}

/* Subtle “deck” effect for the first paragraphs */
.tile-guide h1 + h2{
  margin-top: 26px;
}

/* H2 – strong section header with elegant divider */
.tile-guide h2{
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.25;
  margin-top: 42px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  position: relative;
}

/* Accent bar under H2 */
.tile-guide h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 72px;
  height: 3px;
  background: rgba(15, 23, 42, 0.28);
  border-radius: 999px;
}

/* H3 – readable subhead */
.tile-guide h3{
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.35;
  margin-top: 22px;
  margin-bottom: 8px;
}

/* H4 – optional, subtle */
.tile-guide h4{
  font-size: 16px;
  line-height: 1.45;
  margin-top: 16px;
  margin-bottom: 6px;
  color: rgba(11, 18, 32, 0.92);
}

/* Links – clean + professional */
.tile-guide a{
  color: #0b1220;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(11, 18, 32, 0.35);
}

.tile-guide a:hover{
  text-decoration-color: rgba(11, 18, 32, 0.75);
}

/* Section “cards” effect (no HTML change required)
   This visually groups content under each H2. */
.tile-guide h2{
  scroll-margin-top: 110px; /* nice for anchor jumps */
}

/* We can't select "all until next h2" in pure CSS,
   but we can still create a premium feel by styling the
   first paragraph after each H2 and tightening spacing. */
.tile-guide h2 + p{
  margin-top: 10px;
  font-size: 18px;
}

/* Add subtle emphasis to important paragraphs (optional)
   If you wrap a paragraph like: <p class="lead">...</p> */
.tile-guide .lead{
  font-size: 19px;
  line-height: 1.85;
  color: rgba(17, 24, 39, 0.95);
}

/* Contractor note callout (optional)
   Use: <div class="pro-tip"><p>...</p></div> */
.tile-guide .pro-tip{
  margin: 18px 0 18px 0;
  padding: 14px 14px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-left: 4px solid rgba(15, 23, 42, 0.30);
  border-radius: 12px;
}

.tile-guide .pro-tip p{
  margin: 0;
}

/* Checklist styling (targets the last checklist UL naturally)
   If you only have one UL in the article, it will apply to it.
   If you have multiple ULs, see note below. */
.tile-guide ul{
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.02);
  border-radius: 14px;
  padding: 14px 18px 14px 36px;
}

/* List bullet polish */
.tile-guide ul li::marker{
  color: rgba(15, 23, 42, 0.55);
}

/* Optional: If you add <h2>Tile Selection Checklist</h2> before the UL,
   we can make that specific UL look even better. */
.tile-guide h2 + ul{
  margin-top: 14px;
}

/* Images inside article */
.tile-guide img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  margin: 18px 0;
}

/* Subtle separators without being loud */
.tile-guide hr{
  border: none;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  margin: 28px 0;
}

/* Mobile tuning */
@media (max-width: 700px){
  .tile-guide{
    font-size: 16px;
    padding: 24px 14px;
  }

  .tile-guide h2{
    margin-top: 32px;
  }

  .tile-guide ul{
    padding-left: 32px;
  }
}/* End custom CSS */
/* Start custom CSS */body {
    padding: 0;
    margin: 0;
}/* End custom CSS */