/*!------------------------------------------------------------------
[MAIN STYLESHEET]

BALDY & CO - Moving, Storage and Delivery
-------------------------------------------------------------------*/
/* Typography
================================================== */
body {
  background: #fff;
  color: #555;
}

body,
p {
  font-family: "Open Sans", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;
  line-height: 26px;
  font-size: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #212121;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;
}

h1 {
  font-size: 36px;
  line-height: 48px;
}

h2 {
  font-size: 28px;
  line-height: 36px;
  text-transform: uppercase;
  letter-spacing: -1px;
}

h3 {
  font-size: 24px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: -.5px;
}

h4 {
  font-size: 18px;
  line-height: 28px;
  text-transform: uppercase;
  letter-spacing: -.2px;
}

h5 {
  font-size: 14px;
  line-height: 24px;
}

/* Global styles
================================================== */
html {
  overflow-x: hidden !important;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  border: 0;
  margin: 0;
  padding: 0;
}

.body-inner {
  position: relative;
  overflow: hidden;
}

a:link,
a:visited {
  text-decoration: none;
}

a {
  color: inherit;
  transition: .2s ease;
}

a:hover {
  text-decoration: none;
  color: #000;
}

section {
  padding: 70px 0;
  position: relative;
}

a:focus {
  outline: 0;
}

.solid-bg {
  background: #f9f9f9;
}

.bg-overlay {
  position: relative;
}

.bg-overlay .container {
  position: relative;
  z-index: 1;
}

.bg-overlay:after {
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 0;
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Section title */
.section-title {
  font-size: 18px;
  line-height: 28px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 300;
}

.section-sub-title {
  font-weight: 900;
  font-size: 36px;
  line-height: 46px;
  margin: 0 0 60px;
  color: #212121;
}

@media (max-width: 575px) {
  .section-sub-title {
    font-size: 28px;
  }
}

.section-description {
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #1C1C1F;
  margin: 15px 0 60px;
}

/* Ul, Ol */
.list-arrow {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.list-arrow li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  margin-right: 10px;
  color: #57C6C0;
  font-size: 16px;
  font-weight: bold;
}

.nav > li > a:focus,
.nav > li > a:hover {
  background: none;
}

a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

/* Button */
.btn:active, .btn:focus {
  box-shadow: none !important;
}

.btn-primary {
  border: 0;
  border-radius: 3px;
  padding: 12px 20px 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  transition: 350ms;
  font-size: 14px;
}

@media (max-width: 767px) {
  .btn-primary {
    font-size: 13px;
  }
}

.btn-primary {
  background: #57C6C0;
}

.btn-primary:hover {
  background: #111;
  color: #fff;
}

.btn-primary:hover:active,
.btn-primary:hover:focus {
  color: #fff;
  background-color: #111 !important;
}

/* Top Bar
================================================== */
.top-bar {
  padding: 8px 0;
  background: #57C6C0;
  position: relative;
}

/* Top info */
ul.top-info {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #fff;
}

ul.top-info li {
  position: relative;
  line-height: 10px;
  display: inline-block;
  margin-left: 0;
  padding-right: 15px;
}

ul.top-info li i {
  font-size: 18px;
  position: relative;
  top: 2px;
  margin-right: 5px;
  color: #fff;
}

ul.top-info li p.info-text {
  margin: 0;
  line-height: normal;
  display: inline-block;
  flex-direction: column;
}

/* Top social */
.top-social ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-right: -12px;
}

/* Under md the two columns stack, so the location line and the icon row become
   two centred rows (the centring itself is the .text-center on the columns).
   The negative margin has to go or the icons sit 12px left of centre. */
@media (max-width: 767px) {
  .top-social ul {
    margin-right: 0;
  }
  /* Same reason: the trailing padding of the last info item would drag the
     centred line off to the left. */
  ul.top-info li:last-child {
    padding-right: 0;
  }
}

.top-social ul li {
  display: inline-block;
  padding: 0;
}

/* inline-block, not the default inline: an inline element paints its vertical
   padding but contributes nothing for it to the line box, so the icons hung
   over the bottom edge of the bar. line-height:1 boxes each glyph in its own
   18px, and 4px of padding on top of that comes to the 26px the inline line
   box used to be — the bar keeps the height it has on desktop, and the icons
   now sit inside it instead of on its edge. */
.top-social ul li a {
  display: inline-block;
  line-height: 1;
  color: #fff;
  font-size: 18px;
  transition: 400ms;
  padding: 4px 12px;
}

.top-social ul li a:hover {
  color: #333;
}

/* Header area
================================================== */

.header-one,
.header-one .site-navigation {
  background: #1C1C1F;
}

.header-one .navbar-collapse {
  padding-left: 0;
}

@media (max-width: 991px) {
  .navbar-collapse.collapse {
    overflow-y: auto;
  }
}

.header-one ul.navbar-nav > li {
  padding-left: 0;
  padding-right: 30px;
}

@media (max-width: 991px) {
  .header-one ul.navbar-nav > li {
    padding-right: 0;
  }
}

/* logo.webp is cropped edge to edge, so these 4px are the whole visible gap */
.header-one .logo-area {
  padding: 4px 0;
}

@media (max-width: 991px) {
  /* stacked layout: the gap under the logo comes from the column's own
     mb-3/mb-md-5 utilities, which are !important — override them so the
     spacing stays as tight as on desktop. 10px is the smallest value that
     still separates the logo from the phone/email block. */
  .header-one .logo-area .logo {
    margin-bottom: 4px !important;
  }
}

@media (min-width: 992px) {
  /* give the logo column more room (4/12 instead of 3/12) */
  .header-one .logo-area .logo {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .header-one .logo-area .header-right {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}

@media (min-width: 1200px) {
  /* logo column 40% / info + quote button 60% */
  .header-one .logo-area .logo {
    flex: 0 0 40%;
    max-width: 40%;
  }
  .header-one .logo-area .header-right {
    flex: 0 0 60%;
    max-width: 60%;
  }
}

.navbar-fixed {
  z-index: 9999;
  position: fixed;
  width: 100%;
  top: 0;
}

ul.navbar-nav > li > a {
  padding: 15px 0 !important;
  color: #fff;
}

@media (max-width: 991px) {
  ul.navbar-nav > li > a {
    padding: 1px 0 !important;
  }
  .navbar-nav {
    margin-bottom: 15px;
  }
}

ul.navbar-nav > li:hover > a,
ul.navbar-nav > li.active > a {
  color: #57C6C0 !important;
}

/*-- Logo --*/
.logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 113px;
}

@media (max-width: 1199px) {
  .logo img {
    max-height: 81px;
  }
}

/* below 992px the logo column becomes full width — use that room.
   max-width: 100% keeps it inside the container on the narrowest phones. */
@media (max-width: 991px) {
  .logo img {
    max-height: 150px;
  }
}

@media (max-width: 767px) {
  .logo img {
    max-height: 130px;
  }
}

@media (max-width: 575px) {
  .logo img {
    max-height: 96px;
  }
}

/* header right */
.header-right {
  float: right;
}

ul.top-info-box {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}

@media (max-width: 991px) {
  /* stacked layout: the logo above is centred, so the info row has to be
     centred too — dropping the float lets it span the full column instead of
     shrink-wrapping against the right edge */
  ul.top-info-box {
    float: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
  }
}

ul.top-info-box li {
  position: relative;
  float: left;
  margin-left: 0;
  border-right: 1px solid #dedede;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  padding-right: 25px;
  margin-right: 25px;
}

@media (max-width: 767px) {
  ul.top-info-box li {
    border: 0;
    text-align: center;
    margin: 0;
    flex: 0 0 50%;
    padding: 0;
  }
  /* the quote button sits on its own row anyway — give it the full width so the
     label never has to wrap, and let it own both its top and bottom gap */
  ul.top-info-box li.header-get-a-quote {
    flex: 0 0 100%;
    margin: 10px 0;
  }
}

@media (max-width: 389px) {
  ul.top-info-box li {
    border: 0;
    text-align: center;
    margin: 0;
    flex: 0 0 100%;
  }
  /* here every item is its own row, so the two info blocks need a gap too */
  ul.top-info-box li + li {
    margin-top: 15px;
  }
  /* width already comes from the 767px rule — only the gap changes here */
  ul.top-info-box li.header-get-a-quote {
    margin: 15px 0;
  }
}

ul.top-info-box li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}

ul.top-info-box li.last {
  border-right: 0;
}

ul.top-info-box li .info-box .info-box-content {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  flex-direction: column;
}

ul.top-info-box li .info-box .info-box-title {
  font-size: 14px;
  margin-bottom: 8px;
  line-height: normal;
}

/* The subtitle is an <a> (tel: / mailto:), same as the footer contact block.
   display:block keeps the two-line stack the <p> used to give it, and stops the
   click target from spilling past the text. */
ul.top-info-box li .info-box .info-box-subtitle {
  display: block;
  margin: 0;
  line-height: normal;
  font-size: 15px;
  font-weight: 700;
  color: #111;
}

ul.top-info-box li .info-box a.info-box-subtitle:hover,
ul.top-info-box li .info-box a.info-box-subtitle:focus {
  color: #57C6C0;
}

/* Main navigation */
.navbar-toggler {
  float: left;
  margin-top: 10px;
  padding: 12px;
}

.navbar {
  border-radius: 0;
  border: 0;
  margin-bottom: 0;
}

.navbar-toggler {
  margin: 10px 0;
  padding: 6px;
  border-radius: 3px;
  font-size: 1rem;
  background: #57C6C0;
}

.navbar-toggler:focus {
  outline: 0;
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

ul.navbar-nav > li:hover > a,
ul.navbar-nav > li.active > a {
  color: #57C6C0;
  position: relative;
}

ul.navbar-nav > li {
  padding: 0 13px;
  position: relative;
}

@media (max-width: 1200px) {
  ul.navbar-nav > li {
    padding: 0 9px;
  }
  ul.navbar-nav > li .nav-link {
    font-size: 12px;
  }
}

ul.navbar-nav > li:last-child {
  padding-right: 0;
}

ul.navbar-nav > li:last-child:after {
  background: none;
}

ul.navbar-nav > li > a:hover,
ul.navbar-nav > li > a:focus {
  background: none;
}

ul.navbar-nav > li > a i {
  font-weight: 700;
}

@media (max-width: 991px) {
  ul.navbar-nav > li > a i {
    float: right;
    background: #222;
    padding: 6px 10px;
    margin-top: 7px;
  }
}

ul.navbar-nav > li > a:after,
ul.navbar-nav > li > a:after {
  display: none;
}

ul.navbar-nav > li > a {
  font-family: "Montserrat", sans-serif;
  color: #fff !important;
  text-rendering: optimizeLegibility;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: -.2px;
  font-size: 14px;
  margin: 0;
  line-height: 40px;
  padding: 30px 0;
  transition: 350ms;
}

/* Dropdown */
.dropdown-menu {
  text-align: left;
  background: #fff;
  z-index: 100;
  min-width: 200px;
  border-radius: 0;
  border: 0;
  border-top: 2px solid #57C6C0;
  padding: 0 20px;
  margin: 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

@media (max-width: 991px) {
  .dropdown-menu {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
  }
}

.navbar-nav > li > .dropdown-menu a {
  background: none;
}

.dropdown-menu li a {
  font-family: "Montserrat", sans-serif;
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  padding: 15px 0;
  letter-spacing: .3px;
  border-bottom: 1px solid #e5e5e5;
  color: #333333;
}

@media (max-width: 991px) {
  .dropdown-menu li a {
    padding: 12px 0;
  }
}

.dropdown-menu li:last-child > a {
  border-bottom: 0;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
  color: #57C6C0;
}

@media (min-width: 991px) {
  ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;
  }
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > .dropdown-menu > .active > a {
  background: none;
  color: #57C6C0;
}

.site-navigation .container {
  position: relative;
}

/* Get a quote */
.header-get-a-quote .btn-primary {
  padding: 12px 25px !important;
  font-size: 13px;
  border-radius: 3px;
  line-height: normal;
  text-transform: capitalize;
  color: #fff;
  margin-top: 5px;
}

@media (max-width: 1200px) {
  .header-get-a-quote .btn-primary {
    padding: 12px !important;
  }
}

@media (max-width: 991px) {
  .header-get-a-quote .btn-primary {
    padding: 12px 30px !important;
  }
}

/* White on hover, like every other "Get a Free Quote" button on the site. */
.header-get-a-quote .btn-primary:hover {
  background: #272d33;
  color: #fff;
}

ul.navbar-nav > li.header-get-a-quote:hover > a:after {
  position: relative;
  content: no-close-quote;
}

/* Table of Content
==================================================
1.    Hero
2.    Services
3.    Footer
4.    Sub Pages
5.    Error page
6.    Service grid
7.    Our services cards
8.    Locations
9.    Reviews
10.   Carousel controls
11.   Our work
12.   Quote page form
*/
/* Hero
================================================== */
/*-- One static banner: eyebrow + big title + feature list + actions --*/
.hero {
  position: relative;
  /* it is a <section>, so the padding every other section gets is undone here
     and given to .hero-content instead, inside the tint */
  padding: 0;
  min-height: 700px;
  background-position: 100% 50%;
  background-size: cover;
  /* the entrance animations below start a full element width/height outside
     their box, so the overflow is clipped rather than shown as a scrollbar */
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 38%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 82%);
}

.hero-content {
  --hero-title-size: 84px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: inherit;
  padding: 70px 0;
}

.hero-content .container {
  width: 100%;
}

/* Shrink-wraps to the widest child: the "Made Simple." title line.
   Every other block below is capped under that width on purpose. */
.hero-col {
  flex: 0 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

.hero-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #57C6C0;
  margin: 0 0 12px;
}

.hero-title {
  font-family: "Oswald", "Montserrat", sans-serif;
  font-size: var(--hero-title-size);
  line-height: 0.95;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: #1C1C1F;
  margin: 0 0 25px;
}

.hero-title-dot {
  color: #57C6C0;
}

.hero-lead {
  font-size: 20px;
  line-height: 1.55;
  color: #1C1C1F;
  max-width: calc(var(--hero-title-size) * 5.6);
  margin: 0 0 25px;
}

.hero-lead strong {
  display: block;
  color: #57C6C0;
  font-weight: 700;
}

.hero-features {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 24px;
  -moz-column-gap: 24px;
  column-gap: 24px;
  max-width: calc(var(--hero-title-size) * 6);
  margin: 0 0 32px;
  font-size: 15px;
  color: #1C1C1F;
}

.hero-features li {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  position: relative;
  padding-left: 28px;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Rounded checkbox whose tick breaks out past the top-right corner.
   Inline SVG because no icon font ships this shape. */
.hero-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 19px;
  height: 19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2357C6C0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='13.5' height='13.5' rx='3.5'/%3E%3Cpath d='M5.4 10.8 8.6 14 18.2 3.6'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
}

/* Typography shared by both buttons — the outline one has no .btn-primary
   to inherit it from, so it is declared here for the pair. */
.hero-btn.btn {
  padding: 14px 32px 12px;
  margin: 0 15px 15px 0;
  border: 2px solid transparent;
  border-radius: 4px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 350ms;
}

.hero-btn-outline.btn {
  background: #fff;
  color: #57C6C0;
  border-color: #57C6C0;
}

.hero-btn-outline.btn i {
  color: #57C6C0;
  margin-right: 10px;
  transition: 350ms;
}

.hero-btn-outline.btn:hover {
  background: #57C6C0;
  color: #fff;
}

.hero-btn-outline.btn:hover i {
  color: #fff;
}

/*-- Entrance animation

   The five blocks used to carry `data-animation-in` attributes that the
   slick-animation plugin turned into animate.css classes. The banner is a
   static section now, so there is no carousel to hook into and no plugin:
   the same five motions are keyframes that run once on load. Directions and
   the 1s duration match what the plugin used to produce. */
.hero-eyebrow,
.hero-title,
.hero-lead,
.hero-features,
.hero-actions {
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

.hero-eyebrow {
  animation-name: hero-slide-in-down;
}

.hero-title {
  animation-name: hero-fade-in;
}

.hero-lead {
  animation-name: hero-slide-in-left;
}

.hero-features {
  animation-name: hero-fade-in-up;
}

.hero-actions {
  animation-name: hero-slide-in-up;
}

@keyframes hero-fade-in {
  from {
    opacity: 0;
  }
}

/* The slide-ins keep opacity at 1 throughout, the way the plugin ran them. */
@keyframes hero-slide-in-down {
  from {
    transform: translate3d(0, -100%, 0);
  }
  to {
    transform: none;
  }
}

@keyframes hero-slide-in-left {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes hero-slide-in-up {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: none;
  }
}

@keyframes hero-fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-title,
  .hero-lead,
  .hero-features,
  .hero-actions {
    animation: none;
  }
}

@media (max-width: 1199px) {
  .hero-content {
    --hero-title-size: 68px;
  }
  .hero-features {
    font-size: 14px;
  }
}

@media (max-width: 991px) {
  .hero-content {
    --hero-title-size: 54px;
  }
  .hero {
    min-height: 620px;
  }
  .hero::before {
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.93) 55%, rgba(255, 255, 255, 0.75) 100%);
  }
  /* Title is too short to be a sane measure below lg — free the column instead */
  .hero-col {
    width: auto;
  }
  .hero-eyebrow {
    font-size: 14px;
  }
  .hero-lead {
    font-size: 17px;
    max-width: 520px;
  }
  .hero-features {
    max-width: 540px;
  }
}

@media (max-width: 575px) {
  .hero-content {
    --hero-title-size: 40px;
    padding: 50px 0;
  }
  .hero {
    min-height: 520px;
  }
  .hero-title {
    margin-bottom: 18px;
  }
  .hero-lead {
    font-size: 15px;
    margin-bottom: 18px;
  }
  .hero-features {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    font-size: 14px;
    margin-bottom: 24px;
  }
  .hero-btn.btn {
    padding: 13px 22px 11px;
    margin-right: 10px;
    font-size: 12px;
  }
}

/* Why us
================================================== */
/* Why us box */
.why-us-box .why-us-box-info {
  margin-left: 25px;
  margin-bottom: 40px;
}

.why-us-box-title {
  font-size: 16px;
  margin: 0 0 10px;
  color: #1C1C1F;
  transition: color .2s ease;
}

/* Not a link any more, so the tint is driven by the heading itself. The
   transition used to come from the global `a` rule and is declared here now. */
.why-us-box-title:hover {
  color: #57C6C0;
}

/* Footer
================================================== */
/*- Footer common */
.footer {
  background-color: #F0F8FB;
  color: #000;
}

/* The footer has no background image, so the dark bg-overlay layer is dropped
   to keep the light background above visible. */
.footer.bg-overlay:after {
  background-color: transparent;
}

.footer-main {
  padding: 80px 0 60px;
}

.footer .widget-title {
  font-size: 20px;
  font-weight: 700;
  position: relative;
  margin: 0 0 30px;
  padding-left: 15px;
  text-transform: uppercase;
  color: #000;
  border-left: 3px solid #57C6C0;
}

/* Footer about us */
.footer-logo {
  margin-bottom: 30px;
  max-width: 100%;
  max-height: 87px;
}

/* Sits between the logo and the blurb — the logo's own 30px is the gap above,
   so only the gap below is declared here. flex + gap rather than a padded
   inline icon: on a narrow column the address wraps under its own first line
   instead of under the pin. */
.footer-address {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
  font-weight: 700;
  color: #000;
}

.footer-address i {
  flex-shrink: 0;
  line-height: 26px;
  font-size: 16px;
  color: #57C6C0;
}

/* The address links out to Google Maps; same hover tint the footer contact
   links use, since it sits in the same footer and reads as the same kind of
   thing. */
.footer-address a:hover,
.footer-address a:focus {
  color: #57C6C0;
}

/* Footer social */
.footer-social {
  margin-top: 32px;
}

.footer-social .widget-title {
  font-size: 14px;
  margin-bottom: 10px;
}

.footer-social ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.footer-social ul li {
  display: block;
}

.footer-social ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #57C6C0;
  transition: 400ms;
}

.footer-social ul li a i {
  display: block;
  font-size: 20px;
  color: #fff;
  transition: 400ms;
}

.footer-social ul li a .fa-instagram,
.footer-social ul li a .fa-whatsapp,
.footer-social ul li a .fa-telegram-plane {
  font-size: 25px;
}

.footer-social ul li:hover a {
  background-color: #111;
}

/* Links */
.footer-widget ul.list-arrow li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 8px 0;
}

.footer-widget ul.list-arrow li:last-child {
  border-bottom: 0;
}

.footer-widget ul.list-arrow li a,
.footer-widget ul.list-arrow li:before {
  color: #000;
}

.footer-widget ul.list-arrow li:hover a,
.footer-widget ul.list-arrow li:hover {
  color: #57C6C0;
}

/* Services list with icons */
.footer-service-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.footer-widget ul.list-services li:before {
  content: none;
}

.footer-widget ul.list-services li a {
  display: flex;
  align-items: center;
}

.footer-service-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  margin-right: 12px;
  color: #57C6C0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Contacts / Working hours widgets */
.footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-contact-list > li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 28px;
}

.footer-contact-list > li:last-child {
  margin-bottom: 0;
}

/* Separates the contacts from the working hours */
.footer-contact-list > li.footer-contact-divider {
  border-top: 1px solid #57C6C0;
  padding-top: 28px;
}

.footer-contact-icon {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  margin-right: 18px;
  border: 2px solid #57C6C0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #57C6C0;
  font-size: 20px;
}

.footer-contact-body {
  padding-top: 2px;
}

.footer-contact-title,
a.footer-contact-title {
  display: block;
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  color: #000;
}

a.footer-contact-title:hover {
  color: #57C6C0;
}

.footer-contact-text {
  margin: 0;
  font-size: 14px;
  color: #000;
  font-weight: 500;
}

.footer-hours-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.footer-hours-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 15px;
  color: #000;
}

.footer-hours-list li:last-child {
  margin-bottom: 0;
}

.footer-hours-list i {
  margin-right: 12px;
  font-size: 16px;
  color: #57C6C0;
}

/* Handwritten slogan closing the contacts widget.
   The block shrinks to the longest working-hours line; the slogan is a
   zero-width flex box centred on it, so it spills evenly to both sides
   and never widens the block itself. */
.footer-hours-block {
  display: inline-block;
}

.footer-slogan {
  display: flex;
  justify-content: center;
  width: 0;
  margin: 26px auto 0;
  white-space: nowrap;
  font-family: 'Great Vibes', cursive;
  font-size: 34px;
  line-height: 1.2;
  color: #57C6C0;
}

/*-- Copyright --*/
.copyright {
  background: #57C6C0;
  color: #111;
  padding: 0;
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 12px;
}

/* Same height as the main navigation bar: its links are 40px line-height
   plus 15px padding top and bottom. */
.copyright .row {
  min-height: 70px;
}

/* The line is a border, not text-decoration: the global `a:link, a:visited`
   rule above wins on specificity and would strip an underline. */
.privacy-policy-link {
  display: inline-block;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
}

.privacy-policy-link:hover,
.privacy-policy-link:focus {
  color: #fff;
  text-decoration: none;
  border-bottom-color: #fff;
  opacity: 0.75;
}

#back-to-top {
  right: 40px;
  top: auto;
  z-index: 10;
  display: none;
}

#back-to-top .btn:focus {
  outline: 0;
  box-shadow: none;
}

@media (max-width: 767px) {
  #back-to-top {
    right: 15px;
  }
}

#back-to-top.position-fixed {
  bottom: 20px;
}

#back-to-top .btn.btn-primary {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 3px;
  color: #57C6C0;
  font-weight: 700;
  font-size: 16px;
  padding: 0;
}

@media (max-width: 767px) {
  #back-to-top .btn.btn-primary {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }
}

#back-to-top .btn.btn-primary:hover {
  color: #fff;
}

/* Sub Pages
================================================== */
/* Same white as the first section under the home page slider */
.main-container {
  background-color: #fff;
}

label {
  font-weight: 400;
}

/* Error page
================================================== */
/* Sticky footer: stretch the page to the full viewport height so short pages
   (like 404) don't leave a blank strip below the footer. */
.body-inner.full-height {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.body-inner.full-height .main-container {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
}

.body-inner.full-height .main-container > .container {
  width: 100%;
}

.body-inner.full-height #footer {
  flex-shrink: 0;
}

.error-page .error-code h1 {
  display: block;
  font-size: 200px;
  line-height: 200px;
  color: #303030;
  margin-bottom: 20px;
}

.error-page .error-body .btn {
  margin-top: 30px;
  font-weight: 700;
}

/* Why us grid (2 rows x 3 items with dividers)
================================================== */
.why-us-grid {
  margin-left: 0;
  margin-right: 0;
}

.why-us-grid-item {
  padding: 45px 30px;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

/* No right divider on the last item of a row */
.why-us-grid-item:nth-child(3n) {
  border-right: 0;
}

/* No bottom divider under the last row */
.why-us-grid-item:nth-last-child(-n+3) {
  border-bottom: 0;
}

.why-us-grid .why-us-box-img {
  margin-bottom: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: rgba(238, 244, 243, 0.5);
}

.why-us-grid .why-us-box-img img {
  width: 80px;
  height: 80px;
}

.why-us-grid .why-us-box-info {
  margin-left: 0;
  margin-bottom: 0;
}

.why-us-grid .why-us-box-title {
  margin-bottom: 15px;
}

.why-us-grid .why-us-box-info p {
  margin-bottom: 0;
  color: #1C1C1F;
  font-weight: 600;
}

/* Tablet: 2 items per row */
@media (max-width: 991px) {
  .why-us-grid-item {
    padding: 40px 25px;
  }
  .why-us-grid-item:nth-child(3n) {
    border-right: 1px solid #e5e5e5;
  }
  .why-us-grid-item:nth-child(2n) {
    border-right: 0;
  }
  .why-us-grid-item:nth-last-child(-n+3) {
    border-bottom: 1px solid #e5e5e5;
  }
  .why-us-grid-item:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

/* Mobile: 1 item per row, only horizontal dividers */
@media (max-width: 767px) {
  .why-us-grid-item {
    padding: 35px 15px;
  }
  .why-us-grid-item:nth-child(n) {
    border-right: 0;
    border-bottom: 1px solid #e5e5e5;
  }
  .why-us-grid-item:last-child {
    border-bottom: 0;
  }
}

/* Our services cards (3 x 3 grid)
================================================== */
/* Background comes from .solid-bg in the markup; an explicit colour here would
   win on source order and pin the section to one shade. */
.service-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border-radius: 14px;
  padding: 30px 25px;
  text-align: center;
  border: 1px solid #eef0f0;
  box-shadow: 0 5px 25px rgba(28, 28, 31, 0.07);
  transition: all 350ms ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(28, 28, 31, 0.12);
}

.service-card-title {
  font-size: 30px;
  line-height: 38px;
  font-weight: 900;
  color: #57C6C0;
  margin: 0 0 5px;
  text-transform: none;
}

/* The gap above the photo lives on the photo itself, not here, so that a card
   with no subtitle keeps the same spacing without an empty <p> to hold it. */
.service-card-subtitle {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #1C1C1F;
  margin: 0;
}

.service-card-dot {
  color: #57C6C0;
  padding: 0 5px;
}

.service-card-img {
  border-radius: 10px;
  overflow: hidden;
  margin: 25px 0;
}

.service-card-img img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 500ms ease;
}

.service-card:hover .service-card-img img {
  transform: scale(1.05);
}

.service-card-text {
  font-size: 16px;
  line-height: 28px;
  color: #1C1C1F;
  margin-bottom: 30px;
}

/* Fully self-contained: no .btn / .btn-primary / .hero-btn inheritance, so
   restyling the site buttons never touches the cards. Values match the
   slider's "Get a Free Quote" button, but stay the same on every breakpoint. */
.service-card-btn {
  margin: auto 0 0;
  align-self: center;
  display: inline-block;
  background: #57C6C0;
  color: #fff;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 14px 32px 12px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: 350ms;
}

.service-card-btn i {
  margin-left: 12px;
}

.service-card-btn:hover,
.service-card-btn:focus,
.service-card-btn:active {
  background: #1C1C1F;
  color: #fff;
  text-decoration: none;
  outline: none;
}

/* Tablet: 2 cards per row — the narrowest the card ever gets, so the heading
   is scaled down only here, not on mobile where the card is full width. */
@media (min-width: 768px) and (max-width: 991px) {
  .service-card-title {
    font-size: 26px;
    line-height: 34px;
  }
  .service-card-subtitle {
    font-size: 18px;
  }
  .service-card-img img {
    height: 220px;
  }
}

/* Mobile: 1 card per row */
@media (max-width: 767px) {
  .service-card {
    padding: 25px 20px;
  }
  .service-card-img img {
    height: 230px;
  }
}

/* Locations
================================================== */
/* Multi-column (not flex/grid) so the alphabetical list keeps reading top to
   bottom down each column, exactly like the mobile reference. */
.locations-grid {
  column-count: 2;
  column-gap: 20px;
}

@media (min-width: 768px) {
  .locations-grid {
    column-count: 3;
  }
}

@media (min-width: 992px) {
  .locations-grid {
    column-count: 4;
  }
}

/* Fixed height + ellipsis: the box never resizes to fit its label, so every
   tile stays identical no matter how long the city name is.
   The tiles are plain divs, not links — only the hover tint is left. */
.location-item {
  display: flex;
  align-items: center;
  height: 62px;
  padding: 0 18px;
  margin: 0 0 15px;
  background: #fff;
  border: 1px solid #eef0f0;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(28, 28, 31, 0.06);
  overflow: hidden;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  transition: all 350ms ease;
}

.location-item:hover {
  background: #57C6C0;
  border-color: #57C6C0;
  box-shadow: 0 8px 20px rgba(87, 198, 192, 0.3);
}

.location-item i {
  flex: 0 0 auto;
  font-size: 20px;
  color: #57C6C0;
  margin-right: 14px;
  transition: color 350ms ease;
}

.location-item:hover i {
  color: #fff;
}

.location-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #1C1C1F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 350ms ease;
}

.location-item:hover .location-name {
  color: #fff;
}

@media (max-width: 575px) {
  .location-item {
    height: 56px;
    padding: 0 12px;
  }
  .location-item i {
    font-size: 18px;
    margin-right: 10px;
  }
  .location-name {
    font-size: 12px;
    letter-spacing: 0.3px;
  }
}

/* Reviews (Google reviews carousel)
================================================== */
/* Background comes from .solid-bg in the markup, same as .our-services. */
.reviews-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* The carousel below adds 30px of its own top padding for the shadows. */
  margin-bottom: 22px;
}

/* The wordmark is built from letters instead of an image so it stays sharp on
   every screen and needs no extra asset. */
.reviews-brand-logo {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  margin-right: 10px;
}

.reviews-brand-logo .g-blue {
  color: #4285F4;
}

.reviews-brand-logo .g-red {
  color: #EA4335;
}

.reviews-brand-logo .g-yellow {
  color: #FBBC05;
}

.reviews-brand-logo .g-green {
  color: #34A853;
}

.reviews-brand-label {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #1C1C1F;
  margin-right: 12px;
}

.reviews-brand-stars i {
  font-size: 17px;
  color: #FBBC05;
  margin-right: 2px;
}

/* Anchor for the arrows, which slick appends here next to the list and dots. */
.reviews-slide,
.services-slide {
  position: relative;
}

/* The list hides its overflow, so the vertical padding is what keeps the card
   shadows and the hover lift from being cut off. Sideways there is no room to
   give: the next card starts only 30px out, so anything wider than the -15px
   gutter shows a slice of it — and the shadows reach past 15px, so the clip
   used to end them in a hard line. The mask fades the outer 12px of each side
   to transparent instead, which lands in the gutter and stops 3px short of the
   card, so the shadows trail off into the background and the cards themselves
   are untouched. */
.reviews-slide .slick-list,
.services-slide .slick-list {
  margin: 0 -15px;
  padding: 30px 0 45px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

/* A flex track makes every slide as tall as the tallest one, so the cards all
   match the longest review instead of being pinned to a fixed height. Slick
   puts .slick-slide on the .item divs themselves. */
.reviews-slide .slick-track,
.services-slide .slick-track {
  display: flex;
}

.reviews-slide .slick-track::before,
.reviews-slide .slick-track::after,
.services-slide .slick-track::before,
.services-slide .slick-track::after {
  display: none;
}

.reviews-slide .item,
.services-slide .item {
  display: flex;
  height: auto;
  padding: 0 15px;
}

/* Same box as .service-card above — background, border, radius, padding,
   shadow and hover lift all match, so both sections read as one set. */
.review-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eef0f0;
  border-radius: 14px;
  padding: 30px 25px;
  box-shadow: 0 5px 25px rgba(28, 28, 31, 0.07);
  transition: all 350ms ease;
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(28, 28, 31, 0.12);
}

.review-card-head {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.review-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-right: 15px;
  border-radius: 50%;
  /* Fallback only — every card carries one of the colour classes below. */
  background: #757575;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

/* Google's palette for accounts with no photo. The colour is set per card in
   the markup rather than by :nth-child, because slick clones slides for the
   infinite loop and the same person would otherwise change colour between
   pages. */
.review-avatar-blue {
  background: #1A73E8;
}

.review-avatar-red {
  background: #D93025;
}

.review-avatar-green {
  background: #188038;
}

.review-avatar-orange {
  background: #E8710A;
}

.review-avatar-purple {
  background: #9334E6;
}

.review-avatar-teal {
  background: #12A4AF;
}

.review-avatar-indigo {
  background: #3F51B5;
}

.review-avatar-pink {
  background: #D01884;
}

.review-avatar-brown {
  background: #795548;
}

.review-card-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.review-author {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: #1C1C1F;
  margin: 0 0 2px;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-date {
  display: block;
  font-size: 13px;
  line-height: 18px;
  color: #8a8a8f;
}

.review-stars {
  margin-bottom: 12px;
}

/* Google's own star yellow, same as the .reviews-brand-stars above. */
.review-stars i {
  font-size: 15px;
  color: #FBBC05;
  margin-right: 2px;
}

/* Not clamped: the longest review is what sets the height of the whole row. */
.review-text {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 26px;
  color: #1C1C1F;
  margin: 0;
}

/* The list already leaves 45px below the cards for the shadows. */
.reviews-slide .slick-dots,
.services-slide .slick-dots {
  position: static;
  margin-top: 0;
}

@media (max-width: 767px) {
  .reviews-brand-logo {
    font-size: 30px;
  }
  .reviews-brand-label {
    font-size: 18px;
  }
  .review-card {
    padding: 25px 20px;
  }
}

/* Carousel controls (services + reviews + our work)
================================================== */
/* Shared dot styling: slick paints the dots of the services and reviews
   carousels, and the work carousel builds its own with the same markup so it
   lands here too. */
.slick-dots li button::before {
  font-size: 12px;
}

.slick-dots li button:hover:before, .slick-dots .slick-dots li button:focus:before,
.slick-dots li.slick-active button:before {
  opacity: 1;
  color: #57C6C0;
}

.slick-slide {
  outline: 0;
}

/* Both carousels use the same list padding and dots, so one set of rules
   places and paints the arrows for both. Styled after the "Get a Free Quote"
   button, at the size the arrows had. */
.reviews-slide .carousel-control,
.services-slide .carousel-control,
.work-slide .carousel-control {
  position: absolute;
  /* Centred on the cards, not on the slider: the slider is taller by the dots
     (20px) and by the list padding, which is 15px deeper at the bottom. */
  top: calc(50% - 18px);
  transform: translateY(-50%);
  height: 37px;
  width: 37px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: #57C6C0;
  color: #fff;
  outline: 0;
  transition: 350ms;
  z-index: 6;
}

.reviews-slide .carousel-control:hover,
.reviews-slide .carousel-control:active,
.services-slide .carousel-control:hover,
.services-slide .carousel-control:active,
.work-slide .carousel-control:hover,
.work-slide .carousel-control:active {
  background-color: #1C1C1F;
  color: #fff;
}

/* :focus-visible, not :focus — a mouse click would otherwise leave the button
   dark until you click somewhere else, while keyboard users still get a mark. */
.reviews-slide .carousel-control:focus-visible,
.services-slide .carousel-control:focus-visible,
.work-slide .carousel-control:focus-visible {
  background-color: #1C1C1F;
  color: #fff;
  outline: 2px solid #57C6C0;
  outline-offset: 2px;
}

/* The arrows sit 20px outside the container, in the page margin, so the cards
   keep the full container width like the service cards do. Once the window is
   too narrow for that margin, max() stops them 24px short of the window edge
   and they start overlapping the cards instead of leaving the screen. */
@media (min-width: 992px) {
  .reviews-slide,
  .services-slide,
  .work-slide {
    --carousel-edge: calc((100vw - 960px) / 2 + 15px);
  }
  .reviews-slide .carousel-control.left,
  .services-slide .carousel-control.left,
  .work-slide .carousel-control.left {
    left: -57px;
    left: max(-57px, calc(24px - var(--carousel-edge)));
  }
  .reviews-slide .carousel-control.right,
  .services-slide .carousel-control.right,
  .work-slide .carousel-control.right {
    right: -57px;
    right: max(-57px, calc(24px - var(--carousel-edge)));
  }
}

@media (min-width: 1200px) {
  .reviews-slide,
  .services-slide,
  .work-slide {
    --carousel-edge: calc((100vw - 1140px) / 2 + 15px);
  }
}

/* Below 992px the page margin is gone entirely and the cards are wide, so the
   dots are the only control. */
@media (max-width: 991px) {
  .reviews-slide .carousel-control,
  .services-slide .carousel-control,
  .work-slide .carousel-control {
    display: none !important;
  }
}

/* Our work (photo carousel)
================================================== */
/* A white section between the grey reviews above and the footer.

   The photos are not laid out in a row: they are stacked in one place, and the
   only thing that tells them apart is how far each one is from the middle.
   script.js writes that distance onto the item as data-work-pos and everything
   below is the answer to it — position, size, veil and stacking order.

   Two things fall out of that. The distance wraps round, so the step from the
   last photo back to the first is the same as every other step: no clones, no
   rewind. And every measurement is a share of the one below it, so the whole
   thing rescales with the container and needs no arithmetic in JS.

   Nothing counts the photos either, so a new one is one more .item and no
   other change. */
.work-slide {
  position: relative;
  /* width of the middle photo, as a share of the section; then how far each
     ring sits from the middle, as a share of the photo itself. The waiting
     spot is nearer the middle than the outer ring, which is what tucks a photo
     behind its neighbour rather than sending it off the side. */
  --work-photo: 53%;
  --work-ring-1: 37%;
  --work-ring-2: 61%;
  --work-wait: 40%;
  /* how each ring looks once it gets there. script.js reads these back while a
     drag is in progress and interpolates between them, so the numbers must not
     be repeated in the rules below. */
  --work-scale-1: 0.82;
  --work-scale-2: 0.65;
  --work-veil-1: 0.4;
  --work-veil-2: 0.7;
}

/* The photos are taken out of the flow, so the height comes from this padding.
   A percentage padding is a share of the width, and the frames are 3:2. */
.work-stage {
  position: relative;
  height: 0;
  padding-top: calc(var(--work-photo) / 1.5);
  cursor: grab;
  /* sideways gestures belong to the carousel, up and down still scroll the
     page — without this a touch drag would be taken as a scroll */
  touch-action: pan-y;
}

.work-slide.work-dragging .work-stage {
  cursor: grabbing;
}

.work-slide .item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--work-photo);
  margin-left: calc(var(--work-photo) / -2);
}

.work-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #f9f9f9;
  transform: scale(var(--work-scale-2));
  --work-veil: var(--work-veil-2);
  user-select: none;
}

/* The paling is a white veil over the photo rather than a transparent card: on
   a white section both wash the photo out the same way, but the veil leaves
   the card solid, so the photos stacked behind it do not show through.

   It is driven through a variable because a drag has to set it from script,
   and a pseudo-element cannot be given an inline style of its own. */
.work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: var(--work-veil);
}

.work-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Animation is switched on only once the photos have been placed, so the row
   does not fan out of the middle on load. */
/* 300ms ease — the same as the reference, which leaves Swiper's default. */
.work-slide.work-ready .work-card,
.work-slide.work-ready .work-card::after {
  transition: transform 300ms ease, opacity 300ms ease;
}

/* Set by script.js for the single frame in which a photo hops from one parking
   spot to the other, so that move is instant rather than animated. */
.work-slide .work-card.work-jump {
  transition: none;
}

/* Before that — and if the script never runs at all — the first photo stands
   in for the carousel instead of six stacked on top of each other. */
.work-slide:not(.work-ready) .item {
  opacity: 0;
}

.work-slide:not(.work-ready) .item:first-child {
  opacity: 1;
}

.work-slide:not(.work-ready) .item:first-child .work-card {
  transform: scale(1);
  --work-veil: 0;
}

/* While a photo is being dragged the row follows the pointer frame by frame,
   so it is script.js writing the transforms and there is nothing to animate. */
.work-slide.work-dragging .work-card,
.work-slide.work-dragging .work-card::after {
  transition: none;
}

/* The middle photo, then a ring either side of it, then one more. Each ring is
   further out, smaller, paler and further back — 1 : 0.82 : 0.65, the ladder
   the reference uses. The offsets are tuned so the outermost photo still ends
   inside the section, which is what keeps its rounded corners visible. */
.work-slide .item[data-work-pos="0"] {
  z-index: 4;
}

.work-slide .item[data-work-pos="0"] .work-card {
  transform: scale(1);
  box-shadow: 0 12px 35px rgba(28, 28, 31, 0.12);
  --work-veil: 0;
}

.work-slide .item[data-work-pos="1"],
.work-slide .item[data-work-pos="-1"] {
  z-index: 3;
}

.work-slide .item[data-work-pos="1"] .work-card {
  transform: translateX(var(--work-ring-1)) scale(var(--work-scale-1));
  --work-veil: var(--work-veil-1);
}

.work-slide .item[data-work-pos="-1"] .work-card {
  transform: translateX(calc(var(--work-ring-1) * -1)) scale(var(--work-scale-1));
  --work-veil: var(--work-veil-1);
}

.work-slide .item[data-work-pos="2"],
.work-slide .item[data-work-pos="-2"] {
  z-index: 2;
}

.work-slide .item[data-work-pos="2"] .work-card {
  transform: translateX(var(--work-ring-2)) scale(var(--work-scale-2));
}

.work-slide .item[data-work-pos="-2"] .work-card {
  transform: translateX(calc(var(--work-ring-2) * -1)) scale(var(--work-scale-2));
}

/* Where a photo waits its turn: tucked in behind its neighbour, nearer the
   middle than the outer ring and small enough to be covered by it completely.
   Nothing is faded out — a photo leaving the row slides in under the neighbour
   and one arriving slides back out from under it, which is what makes the row
   read as a carousel turning rather than photos blinking in and out.

   The offsets are checked against the ring in front: at every width the photo
   waiting here ends well inside the edge of the one covering it. */
.work-slide .item[data-work-pos="3"],
.work-slide .item[data-work-pos="-3"] {
  z-index: 1;
}

.work-slide .item[data-work-pos="3"] .work-card {
  transform: translateX(var(--work-wait)) scale(var(--work-scale-2));
}

.work-slide .item[data-work-pos="-3"] .work-card {
  transform: translateX(calc(var(--work-wait) * -1)) scale(var(--work-scale-2));
}

/* The arrows hang off .work-slide, which is taller than the photos by the dots
   below them; this pulls them back onto the middle of the row. */
.work-slide .carousel-control {
  top: calc(50% - 30px);
}

/* script.js builds the dots with slick's own markup even though this carousel
   is not a slick one, so that the single existing rule paints the dots in both
   sections and they cannot drift apart. */
.work-slide .slick-dots {
  position: static;
  margin-top: 40px;
}

/* Tablet: the middle photo takes more of the width, which leaves room for one
   ring only. Rather than hiding the outer ring, it is pulled in behind the
   first one — three photos on show, and everything still slides in and out
   from under a neighbour exactly as it does on a wide screen. */
@media (max-width: 991px) {
  .work-slide {
    --work-photo: 68%;
    --work-ring-1: 28%;
    --work-ring-2: 33%;
    --work-wait: 22%;
  }
}

/* Phone: the middle photo nearly fills the section and the neighbours are down
   to a hint at each edge. */
@media (max-width: 575px) {
  .work-slide {
    --work-photo: 82%;
    --work-ring-1: 17%;
    --work-ring-2: 20%;
    --work-wait: 13%;
  }
}

/* Quote page form (quote.html)
================================================== */
/* Self-contained like the service cards: the fields do not inherit .form-control
   or .btn, so restyling the site forms never touches this page. */
.quote-title {
  position: relative;
  font-size: 40px;
  line-height: 50px;
  font-weight: 900;
  color: #57C6C0;
  text-transform: uppercase;
  margin: 0 0 60px;
  padding-bottom: 22px;
}

.quote-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70px;
  height: 3px;
  margin-left: -35px;
  background: #57C6C0;
}

.quote-area {
  background-color: #fff;
}

.quote-form {
  margin: 0 auto;
}

/* Grey panel wrapping the fields only — the title above it and the submit
   button below it both sit on the white section. Same #f9f9f9 as .solid-bg on
   the home page, 14px radius to match the service and review cards there. */
.quote-fields {
  padding: 40px;
  background-color: #f9f9f9;
  border-radius: 14px;
}

@media (max-width: 575px) {
  .quote-fields {
    padding: 25px 20px;
  }
}

.quote-group {
  margin-bottom: 22px;
}

/* Otherwise the last field's margin stacks onto the panel's bottom padding */
.quote-fields .quote-group:last-child {
  margin-bottom: 0;
}

.quote-label {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #1C1C1F;
  margin: 0 0 8px;
}

/* Marks the required fields. Sized down and lifted, so it reads as a marker
   next to the label rather than as part of the label text. */
.quote-required {
  font-size: 12px;
  font-weight: 700;
  vertical-align: 2px;
  color: #e2574c;
}

.quote-field {
  position: relative;
}

/* Icon sits inside the control, so every field keeps the same 52px text inset */
.quote-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #57C6C0;
  pointer-events: none;
  z-index: 1;
}

.quote-field-textarea .quote-icon {
  top: 20px;
  transform: none;
}

.quote-input {
  display: block;
  width: 100%;
  height: 58px;
  padding: 5px 20px 5px 52px;
  background: #fff;
  border: 1px solid #e4e8e8;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(28, 28, 31, 0.04);
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #1C1C1F;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.quote-input::placeholder {
  color: #a5adad;
  opacity: 1;
}

.quote-input:focus {
  outline: none;
  border-color: #57C6C0;
  box-shadow: 0 3px 14px rgba(87, 198, 192, 0.18);
}

/* Error state is driven by a class the script adds, never by :invalid — the
   latter would paint every empty required field red on page load. */
.quote-input.is-invalid {
  border-color: #e2574c;
  box-shadow: 0 3px 12px rgba(226, 87, 76, 0.1);
}

.quote-input.is-invalid:focus {
  border-color: #e2574c;
  box-shadow: 0 3px 14px rgba(226, 87, 76, 0.18);
}

.quote-field:has(.is-invalid) .quote-icon,
.quote-field:has(.is-invalid) .quote-caret {
  color: #e2574c;
}

.quote-error {
  display: block;
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: #e2574c;
}

/* Moving type: no leading icon, custom caret on the right */
.quote-select {
  padding-left: 20px;
  padding-right: 45px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.quote-select::-ms-expand {
  display: none;
}

/* Nothing picked yet: the select is the only required control whose empty
   state is a real option, so :invalid here means "still on the placeholder"
   and can safely be greyed out like a placeholder. */
.quote-select:invalid {
  color: #a5adad;
}

/* ...but the dropdown list itself must stay dark in browsers that let the
   options inherit the closed control's colour */
.quote-select option {
  color: #1C1C1F;
}

.quote-caret {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 15px;
  color: #57C6C0;
  pointer-events: none;
}

.quote-textarea {
  height: auto;
  min-height: 120px;
  padding-top: 16px;
  padding-bottom: 16px;
  resize: vertical;
}

/* Width comes from the label, not the column — auto width on a block button
   shrink-wraps the text, and `margin: auto` centres it under the panel. */
.quote-submit {
  display: block;
  max-width: 100%;
  margin: 35px auto 0;
  padding: 18px 55px;
  background: #57C6C0;
  border: 2px solid transparent;
  border-radius: 3px;
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: 350ms;
}

.quote-submit:hover,
.quote-submit:focus,
.quote-submit:active {
  background: #1C1C1F;
  color: #fff;
  outline: none;
}

/* While the request is on its way to the server the button is disabled, so it
   must stop reacting to the pointer as well. */
.quote-submit:disabled,
.quote-submit:disabled:hover {
  background: #57C6C0;
  opacity: 0.6;
  cursor: default;
}

/* The reply from send-quote.php. Empty and unstyled until there is something
   to say, so it takes up no room on a fresh page. */
.quote-status {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

.quote-status:empty {
  margin: 0;
}

.quote-status.is-success {
  color: #2f9e6f;
}

.quote-status.is-error {
  color: #e2574c;
}

/* Honeypot: out of sight for people, still a real filled-in field to a bot.
   Moved off screen rather than display:none, which the better bots skip. */
.quote-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 575px) {
  .quote-title {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 40px;
  }
  .quote-label {
    font-size: 15px;
  }
  .quote-input {
    height: 54px;
    font-size: 15px;
    padding-left: 48px;
  }
  .quote-select {
    padding-left: 18px;
  }
  .quote-icon {
    left: 17px;
    font-size: 16px;
  }
  .quote-submit {
    font-size: 15px;
    padding: 16px 20px;
  }
}

/* The same form on the home page (index.html)
================================================== */
/* It sits in the grey band of the alternating sections, so the panel and the
   section swap colours — a #f9f9f9 panel on a #f9f9f9 section would have no
   edge at all. White, 14px radius, same border and shadow as the service and
   review cards, so it reads as one more card on the grey. Everything inside it
   — fields, button, status line — is left exactly as on quote.html. */
.home-quote .quote-fields {
  background-color: #fff;
  border: 1px solid #eef0f0;
  box-shadow: 0 5px 25px rgba(28, 28, 31, 0.07);
}

/* Service detail pages (residential-moving.html, office-moving.html, ...)
================================================== */
/* The heading reuses .quote-title so these pages match privacy-policy.html.
   Everything below it is self-contained, so restyling the home page service
   cards never touches these pages. */
/* The title's own bottom margin moves to the head block, so the optional
   subtitle stays attached to the heading and the gap above the image stays the
   same on the pages that have no subtitle. */
.service-detail-head {
  margin-bottom: 55px;
}

.service-detail-head .quote-title {
  margin-bottom: 0;
}

.service-detail-subtitle {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #1C1C1F;
  text-transform: uppercase;
  margin: 25px 0 0;
}

.service-detail-dot {
  color: #57C6C0;
  padding: 0 5px;
}

/* Uncropped (height:auto) so the whole photo is visible, but capped in width so
   the portrait-ish shots don't fill the viewport on desktop. */
.service-detail-img {
  max-width: 640px;
  margin: 0 auto 45px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(28, 28, 31, 0.07);
}

.service-detail-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Left aligned: the paragraphs run several lines, unlike the short centred
   blurbs on the home page cards. */
.service-detail-text {
  font-size: 17px;
  line-height: 30px;
  color: #1C1C1F;
  text-align: left;
  margin-bottom: 22px;
}

/* :last-of-type, not :last-child — the CTA block below is the last child. */
.service-detail-text:last-of-type {
  margin-bottom: 0;
}

/* The button is the slider's own .btn.btn-primary.hero-btn, so it keeps that
   size and the step it takes at 575px. The slider lays its two buttons out in
   a row and gives them a right margin; here there is a single centred button,
   so that margin is dropped. */
.service-detail-actions {
  margin-top: 45px;
  text-align: center;
}

.service-detail-actions .hero-btn.btn {
  margin: 0;
}

@media (max-width: 767px) {
  .service-detail-head {
    margin-bottom: 40px;
  }
  .service-detail-subtitle {
    font-size: 18px;
    line-height: 26px;
  }
  .service-detail-img {
    margin-bottom: 35px;
  }
  .service-detail-text {
    font-size: 16px;
    line-height: 28px;
  }
  .service-detail-actions {
    margin-top: 35px;
  }
}

/* Privacy policy page (privacy-policy.html)
================================================== */
/* One long text column. The headings, lists and links are scoped to
   .privacy-content so the legal copy can be typeset for reading without any of
   it leaking onto the marketing pages. Body text matches
   .service-detail-text. */
.privacy-content {
  font-size: 17px;
  line-height: 30px;
  color: #1C1C1F;
  text-align: left;
}

.privacy-content a {
  color: #57C6C0;
  font-weight: 700;
}

.privacy-content a:hover,
.privacy-content a:focus {
  opacity: 0.75;
}

.privacy-updated {
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  color: #57C6C0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 25px;
}

.privacy-content h2 {
  font-size: 26px;
  line-height: 34px;
  font-weight: 900;
  color: #1C1C1F;
  text-transform: uppercase;
  margin: 45px 0 20px;
}

/* The first heading sits right under the intro, and after a divider the rule
   itself already provides the gap. */
.privacy-content h2:first-of-type,
.privacy-divider + h2 {
  margin-top: 0;
}

.privacy-content h3 {
  font-size: 19px;
  line-height: 28px;
  font-weight: 700;
  color: #57C6C0;
  margin: 30px 0 15px;
}

.privacy-content p {
  margin-bottom: 18px;
}

.privacy-address {
  padding-left: 22px;
  border-left: 3px solid #57C6C0;
}

.privacy-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.privacy-content ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
}

.privacy-content ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #57C6C0;
}

/* The "---" breaks in the policy text: the same 70px teal rule .quote-title
   draws under the page heading, so the separators inside the page match the
   one above it. */
.privacy-divider {
  width: 70px;
  height: 3px;
  border: 0;
  margin: 45px auto;
  padding: 0;
  background: #57C6C0;
  opacity: 1;
}

.privacy-contact-name {
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 15px;
}

/* Icons instead of the emoji the source copy used, to match the footer contact
   block. */
.privacy-content .privacy-contact-list li::before {
  content: none;
}

.privacy-content .privacy-contact-list li {
  padding-left: 32px;
  margin-bottom: 12px;
}

.privacy-contact-list li i {
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  color: #57C6C0;
  font-size: 16px;
}

@media (max-width: 767px) {
  .privacy-content {
    font-size: 16px;
    line-height: 28px;
  }
  .privacy-content h2 {
    font-size: 22px;
    line-height: 30px;
    margin-top: 35px;
  }
  .privacy-content h3 {
    font-size: 18px;
  }
  .privacy-divider {
    margin: 35px auto;
  }
}