/*
	Header Logo (image uploaded in Settings > Logo)
	Overrides the theme's original inline-SVG logo styles.

	The logo box covers the whole blue block (info row + layout row) so the
	logo is centred in it vertically. The `right` offset compensates for the
	white diagonal corner that cuts into the bottom right of the blue area,
	so the logo sits on the visual centre of that shape, not the column's.
*/
.tt-header-holder .tt-obj-logo {
  position: relative;
  align-self: stretch; }

/* Navy logo inside the header popup (the popup panel is white). */
.logo-popup__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 115px;
  max-height: 75px; }

@media (max-width: 767.98px) {
  .logo-popup__img {
    max-width: 95px;
    max-height: 62px; } }

/*
	Social icons in .tt-icon-list (header popup and the contact page).

	Icons uploaded in Settings > Social are inline SVGs without width/height
	attributes, so they stretch to fill the whole 50x50 link. The link rules
	repeat the theme's own, so the list also keeps its shape when style.css
	comes from a stale browser cache.
*/
.tt-icon-list a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: 14px;
  line-height: 1;
  color: #b5bac0;
  background-color: #f8f8fa; }
  .tt-icon-list a:hover {
    color: #0c4c93; }
  .tt-icon-list a > * {
    font-size: inherit;
    line-height: 1; }
  .tt-icon-list a > svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor; }

@media (max-width: 1024.98px) {
  .tt-icon-list a {
    width: 40px;
    height: 40px;
    font-size: 11px; } }

.row-header-layout .tt-logo__alignment {
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  right: 15px;
  top: -55px;
  bottom: 0;
  padding: 16px 18px; }

.row-header-layout.sticky-header .tt-logo__alignment {
  top: 0;
  right: 23px;
  padding: 14px 16px; }

.tt-logo__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; }

@media (max-width: 1100px) {
  .row-header-layout .tt-logo__alignment {
    top: -42px;
    right: 10px;
    padding: 10px 12px; }
  .row-header-layout.sticky-header .tt-logo__alignment {
    top: 0;
    right: 17px;
    padding: 10px 12px; } }

@media (max-width: 767.98px) {
  .row-header-layout .tt-logo__alignment {
    top: -10px;
    right: 12px;
    padding: 8px 10px; }
  .row-header-layout.sticky-header .tt-logo__alignment {
    top: 0;
    right: 14px;
    padding: 6px 10px; } }

/*
	Footer logo. The theme only caps .f-logo below 1025px, so an uploaded
	logo renders at its natural size on desktop.
*/
.f-logo {
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 140px; }

/*
	Social icons coming from Settings > Social. The theme's link is an inline
	box with 9px padding, which collapses as soon as it holds a block-level
	SVG, so the link itself becomes the flex box that sizes the icon.
*/
.f-social-icon li a {
  display: inline-flex;
  align-items: center;
  justify-content: center; }
  .f-social-icon li a > svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor; }
  .f-social-icon li a > i {
    font-size: inherit;
    line-height: 1; }

/*
	Service icons. The theme drew a droplet with an icon-font glyph inside
	(.icon-694055 on the container, the glyph absolutely centred in it); the
	logo replaces the whole thing, so the container becomes a plain box that
	just holds the image.
*/
.service-logo > img {
  /* the theme absolutely centres whatever sits inside the droplet */
  position: static;
  -webkit-transform: none;
  transform: none;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0;
  object-fit: contain; }

.additional__icon.service-logo {
  width: 88px;
  margin: -54px 0 24px 0; }

.imgbox-inner__title .tt-icon.service-logo {
  width: 64px;
  min-width: 64px;
  top: 0;
  font-size: 0; }

@media (max-width: 1024.98px) {
  .additional__icon.service-logo {
    width: 72px;
    margin: -40px 0 20px 0; }
  .imgbox-inner__title .tt-icon.service-logo {
    width: 52px;
    min-width: 52px; } }

/*
	Service slider cards. The theme equalises card heights with JS
	(min-height), but the content still flows from the top, so the buttons
	end up at different levels. Laying the card out as a column and letting
	the element above the button take the free space bottom-aligns them.
*/
.additional.js-align-layout__item {
  display: flex;
  flex-direction: column; }
  .additional.js-align-layout__item > *:nth-last-child(2) {
    margin-bottom: auto; }
  .additional.js-align-layout__item > .tt-btn,
  .additional.js-align-layout__item > .additional__icon {
    align-self: flex-start; }

/*
	One long description used to stretch every card in the row, since the
	heights are equalised. Cap the copy at four lines so the row stays
	compact; the full text is still in the markup.
*/
.additional.js-align-layout__item > p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden; }

/*
	Sticky header logo. The full logo is shown at the top of the page; once
	the header sticks, the wordless mark (Settings > Logo > Sticky header
	logo) takes over. Without that upload the header logo simply stays.
*/
.tt-logo__img--mark {
  display: none; }

.sticky-header .tt-logo--has-mark .tt-logo__img--full {
  display: none; }

.sticky-header .tt-logo--has-mark .tt-logo__img--mark {
  display: block; }

/* ==========================================================================
   Brand colour: #1e60aa (blue) -> #AFFAF3 (mint)

   Only the surfaces that used the blue as a BACKGROUND change; the four
   places that used it as a foreground colour on white (droplet icons,
   slider bullets) stay dark, otherwise they would disappear. Every text or
   icon that sat white on those surfaces is flipped to the dark navy the
   theme already uses for headings.
   ========================================================================== */

/* --- surfaces --- */
.tt-header,
.tt-header-holder,
.tt-label-01,
.layout03_bg,
.layout03_bg:before,
.promo01,
.promo__aside,
.footer-layout,
.imgbox-inner__description-large,
.imgbox-inner:hover .imgbox-inner__description,
.tt-additional__bg01:after,
.tt-testimonials__separator-bg:before,
.tt-testimonials__box:before {
  background-color: #AFFAF3; }

/* --- header --- */
.h-info-list,
.h-info-list a,
.h-icon__title,
.h-icon__list a,
.tt-logo__text {
  color: #0c4c93; }

.h-info-list a:hover,
.h-icon__list a:hover {
  color: #1e60aa; }

/* --- footer --- */
.footer-layout,
.f-social-icon li a {
  color: #0c4c93; }

.f-social-icon li a:hover {
  color: #1e60aa; }

/* --- service cards (hover panel) and labels --- */
.imgbox-inner__description-large,
.imgbox-inner__title .tt-title .tt-text-01,
.tt-label-01,
.tt-list__color02 {
  color: #0c4c93; }

/* Glyphs that sit inside the blue droplet keep their white fill. */
.imgbox-inner__title .tt-icon,
.f-info__icon i,
.additional__icon > * {
  color: #ffffff; }

/* --- promo / layout03 blocks --- */
.promo01__content,
.promo__aside,
.promo__aside:hover,
.layout03,
.layout03__item-title {
  color: #0c4c93; }

/* --- leftovers that were tinted for a dark blue background --- */
.h-info-list .tt-title,
.h-icon__title,
.h-info-list [class^="icon"],
.promo__aside address [class^="icon-"],
.imgbox-inner__description-large .imgbox-inner__title .tt-title .tt-text-02 {
  color: #1e60aa; }

.h-info-list a:before {
  background-color: #0c4c93; }

.h-icon__list a:hover,
.f-social-icon li a:hover {
  color: #1e60aa; }

.imgbox-inner__description-large .tt-external-link:hover {
  background-color: #0c4c93;
  color: #AFFAF3; }

/* --- burger toggle and the popup/modal close buttons --- */
.tt-popup__toggle,
.tt-popup__close,
.tt-modal__close {
  background-color: #AFFAF3;
  color: #0c4c93; }
  .tt-popup__close label,
  .tt-modal__close label {
    color: #0c4c93; }
  .tt-popup__toggle .tt-icon,
  .tt-popup__toggle .tt-icon:before,
  .tt-popup__toggle .tt-icon:after {
    background-color: #0c4c93; }

/* Header social icons paint themselves with `fill`, not just `color`. */
.h-icon__list a {
  color: #0c4c93;
  fill: #0c4c93; }
  .h-icon__list a:hover {
    color: #1e60aa;
    fill: #1e60aa; }

/* --- inner page title banner: the frame behind the photo --- */
.tt-pagetitle:before {
  background-color: #AFFAF3; }

/* Roomier bar under the category cards now that the logo sits in it. */
.imgbox-inner__description-small {
  padding: 14px 18px 14px 24px; }
  .imgbox-inner__description-small .imgbox-inner__title {
    padding-bottom: 0; }

/* Back-to-top droplet in the brand colour, with a dark arrow. */
.tt-back-to-top {
  color: #AFFAF3; }
  .tt-back-to-top:after {
    color: #0c4c93; }
  .tt-back-to-top:hover {
    color: #7ceade; }

/*
	"Boilers installed / Faucets fixed" stats. The theme positions the pale
	droplet in the flow and the icon glyph absolutely, with offsets that do
	not line up, so the icon hangs outside the droplet. Give the icon a fixed
	box and centre both layers in it instead.
*/
.tt-data01__icon {
  width: 75px;
  height: 75px;
  margin-right: 14px; }
  .tt-data01__icon > * {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 75px;
    line-height: 1; }
  .tt-data01__icon:before,
  .tt-data01__icon.icon-882041:before {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 40px; }

@media (max-width: 1024.98px) {
  .tt-data01__icon {
    width: 52px;
    height: 52px;
    margin-right: 10px; }
    .tt-data01__icon > * {
      font-size: 52px; }
    .tt-data01__icon:before {
      font-size: 28px; } }

/* ==========================================================================
   No droplets: every icon-694055 shape is replaced by a plain badge/circle
   ========================================================================== */

/* --- blog card date --- */
.tt-news02__data {
  top: -14px;
  z-index: 2;
  width: 56px;
  padding: 9px 4px 10px;
  background-color: #0c4c93;
  border-radius: 6px; }
  .tt-news02__data:before {
    display: none; }

/* --- footer contact icons --- */
.f-info__icon {
  width: 72px;
  height: 72px;
  margin-top: -36px;
  border-radius: 50%;
  background-color: #0c4c93;
  box-shadow: 0 5px 12px rgba(12, 76, 147, 0.2); }
  .f-info__icon:before {
    display: none; }
  .f-info__icon i {
    position: static;
    display: block;
    color: #ffffff;
    font-size: 30px;
    line-height: 72px; }

@media (max-width: 1024.98px) {
  .f-info__icon {
    width: 56px;
    height: 56px;
    margin-top: -28px; }
    .f-info__icon i {
      font-size: 24px;
      line-height: 56px; } }

/* --- header popup contact icons --- */
.info-box__img {
  width: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #0c4c93; }
  .info-box__img:before {
    margin-top: 0;
    color: #ffffff; }

/* --- stats icons: drop the pale droplet behind the glyph --- */
.tt-data01__icon > * {
  display: none; }

/* --- back to top --- */
.tt-back-to-top {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #AFFAF3;
  box-shadow: 0 5px 15px rgba(12, 76, 147, 0.18); }
  .tt-back-to-top:before {
    display: none; }
  .tt-back-to-top:after {
    top: 50%;
    font-size: 18px;
    color: #0c4c93; }
  .tt-back-to-top:hover {
    background-color: #7ceade; }

/* Service card titles link to the service, the same way blog titles do. */
.additional__title a {
  display: inline-block;
  color: inherit;
  transition: color 0.3s ease; }
  .additional__title a:hover {
    color: #51acfb; }

/* ==========================================================================
   Tighter vertical rhythm on desktop.

   The theme ships three spacing tiers (desktop / <=1100px / <=768px); only
   the desktop tier is scaled back here — the smaller ones are compact
   already. Negative offsets are left untouched so the overlapping blocks
   keep lining up.
   ========================================================================== */
@media (min-width: 1101px) {
  .tt-pagetitle {
    padding: 16px; }
  /* The banner photo is 1840x229, so its width follows the box height
     (190px -> ~1525px wide): keep it tall enough for the title to stay
     on the photo. */
  .tt-pagetitle__box,
  .tt-pagetitle__box img {
    min-height: 190px; }

  .section-indent:not(.nomargin):not([class^="tt-offset"]) {
    margin-top: 35px; }
  .section-indent02:not(.nomargin):not([class^="tt-offset"]) {
    margin-top: 42px; }
  .section-indent03:not(.nomargin):not([class^="tt-offset"]) {
    margin-top: 56px; }
  .section-indent05:not(.nomargin):not([class^="tt-offset"]) {
    margin-top: 66px; }
  .section-indent07:not(.nomargin):not([class^="tt-offset"]) {
    margin-top: 66px; }
  .section-indent08:not(.nomargin):not([class^="tt-offset"]) {
    margin-top: 58px; }
  .section-indent10:not(.nomargin):not([class^="tt-offset"]) {
    margin-top: 60px; }

  .section-inner:not([class^="tt-offset"]) {
    padding-top: 70px;
    padding-bottom: 70px; }
  .section-inner02 {
    padding-top: 78px;
    padding-bottom: 70px; }
  .section-inner03 {
    padding-top: 55px;
    padding-bottom: 74px; }
  .section-inner04 {
    padding-top: 48px;
    padding-bottom: 84px; }
  .section-inner-custom {
    padding-top: 70px;
    padding-bottom: 88px; } }


/* ==========================================================================
   H1 description ("h1_description" field)

   Two contexts: inside the page-title banner (white text over the photo)
   and inside page content, under the heading.
   ========================================================================== */
.tt-pagetitle__description {
  max-width: 720px;
  margin: 14px 0 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 25px; }
  /* keep the breadcrumbs off the description */
  .tt-pagetitle__description + .tt-breadcrumbs {
    margin-top: 18px; }

.h1-description {
  margin: 0 0 18px;
  color: #6c7176;
  font-size: 17px;
  line-height: 30px; }

.blocktitle + .h1-description {
  margin-top: -6px; }

@media (max-width: 1024.98px) {
  .tt-pagetitle__description {
    font-size: 14px;
    line-height: 23px;
    margin-top: 10px; }
  .h1-description {
    font-size: 15px;
    line-height: 27px; } }

/* Header phone rendered as a button, next to "Schedule Online". */
.tt-btn__phone span {
  display: inline-flex;
  align-items: center; }

.tt-btn__phone-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  margin-right: 9px; }
  .tt-btn__phone-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor; }

/* ==========================================================================
   Rich text coming from the editor (service detail content)

   The editor emits a long run of plain <p> elements, so the job here is
   readable measure, rhythm and list styling rather than heading hierarchy.
   ========================================================================== */
.rich-content {
  max-width: 900px;
  color: #6c7176;
  font-size: 16px;
  line-height: 30px; }
  .rich-content > p {
    margin: 0 0 16px; }
  .rich-content h2,
  .rich-content h3,
  .rich-content h4 {
    color: #0c4c93;
    font-family: "Mulish", sans-serif;
    font-weight: 800;
    margin: 32px 0 14px; }
  .rich-content h2 {
    font-size: 26px;
    line-height: 34px; }
  .rich-content h3 {
    font-size: 21px;
    line-height: 30px; }
  .rich-content h4 {
    font-size: 18px;
    line-height: 28px; }
  .rich-content ul,
  .rich-content ol {
    margin: 0 0 18px;
    padding-left: 22px; }
  .rich-content ul {
    list-style: disc; }
  .rich-content ol {
    list-style: decimal; }
  .rich-content li {
    margin-bottom: 7px; }
  .rich-content strong {
    color: #0c4c93; }
  .rich-content a {
    color: #1e60aa;
    text-decoration: underline; }
    .rich-content a:hover {
      color: #0c4c93; }
  .rich-content img {
    max-width: 100%;
    height: auto;
    margin: 8px 0 20px; }

@media (max-width: 1024.98px) {
  .rich-content {
    font-size: 15px;
    line-height: 27px; }
    .rich-content h2 {
      font-size: 22px;
      line-height: 30px; }
    .rich-content h3 {
      font-size: 19px; } }

/* ==========================================================================
   Mobile "Book Online" bar

   Below 768px the theme hides the header's Book Online button, so the same
   action moves to a bar pinned above the fold. The children must not swallow
   the click: the modal handler in bundle.js checks event.target for the
   data-modal attribute, so only the bar itself may be the target.
   ========================================================================== */
.tt-mobile-cta {
  display: none;
  position: fixed;
  left: 15px;
  right: 15px;
  bottom: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 20;
  min-height: 52px;
  padding: 6px 18px;
  border-radius: 8px;
  background-color: #2099da;
  box-shadow: 0 6px 18px rgba(12, 76, 147, 0.25);
  color: #ffffff;
  font-family: "Mulish", sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
  .tt-mobile-cta > * {
    pointer-events: none; }
  .tt-mobile-cta:active {
    background-color: #1b86bf; }
  .tt-mobile-cta__arrow {
    display: inline-flex;
    width: 17px;
    height: 17px;
    margin-left: 11px; }
    .tt-mobile-cta__arrow svg {
      width: 100%;
      height: 100%; }

@media (max-width: 767.98px) {
  .tt-mobile-cta {
    display: flex;
    justify-content: center;
    align-items: center; }
  /* keep the copyright line clear of the pinned bar */
  .footer-copyright {
    padding-bottom: 76px; }
  /* and lift the back-to-top droplet above it */
  .tt-back-to-top.tt-show {
    bottom: 104px; } }

/* The mobile menu panel is only 317px wide and the modal needs a clear
   backdrop, so the bar steps out of the way while either one is open. */
body.tt-pupup-open .tt-mobile-cta,
body.show-modal .tt-mobile-cta {
  display: none; }