/* =========================================================
   SYLVAN LAKE MOVERS PAGE
   UNIQUE PREMIUM DESIGN
   Class Prefix: sylvanlake-
   Theme: #C71111
========================================================= */

.sylvanlake-page{
  --sl-red:#C71111;
  --sl-red-dark:#990b0b;
  --sl-red-light:#fff1f1;
  --sl-black:#111827;
  --sl-text:#273142;
  --sl-muted:#687386;
  --sl-light:#f6f7f9;
  --sl-white:#fff;
  --sl-border:#e4e7ec;

  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--sl-text);
  background:#fff;
  overflow:hidden;
}

.sylvanlake-page *,
.sylvanlake-page *::before,
.sylvanlake-page *::after{
  box-sizing:border-box;
}

.sylvanlake-wrap{
  width:min(1180px,92%);
  margin:0 auto;
}


/* =========================================================
   HERO
========================================================= */

.sylvanlake-hero{
  position:relative;
  min-height:640px;
  background:#111827;
  overflow:hidden;
}

.sylvanlake-hero-grid{
  min-height:640px;

  display:grid;
  grid-template-columns:48% 52%;
  align-items:stretch;
}

.sylvanlake-hero-copy{
  position:relative;
  z-index:3;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:90px 65px 90px max(4vw,30px);

  background:
    linear-gradient(
      145deg,
      #C71111 0%,
      #a40c0c 100%
    );
}

.sylvanlake-hero-copy::after{
  content:"";

  position:absolute;
  width:330px;
  height:330px;

  right:-190px;
  bottom:-180px;

  border:65px solid rgba(255,255,255,.08);
  border-radius:50%;
}

.sylvanlake-kicker{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:22px;

  color:#fff;
  font-size:12px;
  font-weight:850;
  letter-spacing:2.2px;
  text-transform:uppercase;
}

.sylvanlake-kicker::before{
  content:"";

  width:38px;
  height:2px;

  background:#fff;
}

.sylvanlake-hero h1{
  position:relative;
  z-index:2;

  max-width:680px;

  margin:0 0 24px;

  color:#fff;

  font-size:clamp(42px,5vw,70px);
  line-height:1.02;
  letter-spacing:-2.8px;
  font-weight:850;
}

.sylvanlake-hero-text{
  position:relative;
  z-index:2;

  max-width:610px;

  margin:0 0 32px;

  color:rgba(255,255,255,.9);

  font-size:17px;
  line-height:1.85;
}

.sylvanlake-hero-buttons{
  position:relative;
  z-index:4;

  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.sylvanlake-button{
  min-height:51px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 25px;

  border-radius:3px;

  text-decoration:none!important;

  font-size:14px;
  font-weight:800;

  transition:.3s ease;
}

.sylvanlake-button-light{
  background:#fff;
  color:var(--sl-red)!important;
}

.sylvanlake-button-light:hover{
  background:#f4f4f4;
  transform:translateY(-2px);
}

.sylvanlake-button-border{
  border:1px solid rgba(255,255,255,.65);
  color:#fff!important;
  background:rgba(255,255,255,.06);
}

.sylvanlake-button-border:hover{
  background:#fff;
  color:var(--sl-red)!important;
}

.sylvanlake-hero-photo{
  position:relative;

  background:
    linear-gradient(
      90deg,
      rgba(10,16,28,.18),
      rgba(10,16,28,.02)
    ),
    url("/images/locations/movers-in-sylvan-lake-ab/waist-up-portrait-handsome-bearded-man-loading-cart-with-cardboard-boxes-into-self-storage-unit-copy-space-1-1024x683.jpg")
    center/cover no-repeat;
}

.sylvanlake-hero-photo::before{
  content:"";

  position:absolute;
  left:0;
  top:0;
  bottom:0;

  width:120px;

  background:linear-gradient(
    90deg,
    rgba(17,24,39,.32),
    transparent
  );
}

.sylvanlake-hero-badge{
  position:absolute;

  right:35px;
  bottom:35px;

  width:185px;
  padding:22px;

  background:#fff;

  box-shadow:0 18px 50px rgba(0,0,0,.22);
}

.sylvanlake-hero-badge strong{
  display:block;

  margin-bottom:5px;

  color:var(--sl-red);

  font-size:27px;
  line-height:1;
}

.sylvanlake-hero-badge span{
  color:var(--sl-black);

  font-size:12px;
  line-height:1.5;
  font-weight:750;
}


/* =========================================================
   INTRO / LAKESIDE STYLE
========================================================= */

.sylvanlake-intro{
  padding:105px 0;

  background:#fff;
}

.sylvanlake-intro-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:50px;

  margin-bottom:55px;
}

.sylvanlake-intro-heading{
  max-width:650px;
}

.sylvanlake-small-label{
  margin-bottom:13px;

  color:var(--sl-red);

  font-size:12px;
  font-weight:850;
  letter-spacing:2px;
  text-transform:uppercase;
}

.sylvanlake-intro-heading h2{
  margin:0;

  color:var(--sl-black);

  font-size:clamp(35px,4vw,53px);
  line-height:1.06;
  letter-spacing:-1.8px;
}

.sylvanlake-intro-side{
  max-width:420px;
}

.sylvanlake-intro-side p{
  margin:0;

  color:var(--sl-muted);

  font-size:16px;
  line-height:1.85;
}

.sylvanlake-intro-main{
  display:grid;
  grid-template-columns:1fr 1fr;

  border-top:1px solid var(--sl-border);
}

.sylvanlake-intro-card{
  padding:38px 40px;

  border-bottom:1px solid var(--sl-border);
}

.sylvanlake-intro-card:first-child{
  border-right:1px solid var(--sl-border);
}

.sylvanlake-intro-card span{
  display:block;

  margin-bottom:13px;

  color:var(--sl-red);

  font-size:12px;
  font-weight:850;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.sylvanlake-intro-card p{
  margin:0;

  color:var(--sl-muted);

  font-size:16px;
  line-height:1.85;
}


/* =========================================================
   SERVICES
========================================================= */

.sylvanlake-services{
  padding:105px 0;

  background:var(--sl-light);
}

.sylvanlake-services-header{
  max-width:760px;

  margin-bottom:52px;
}

.sylvanlake-services-header h2{
  margin:0 0 16px;

  color:var(--sl-black);

  font-size:clamp(36px,4vw,54px);
  line-height:1.06;
  letter-spacing:-1.9px;
}

.sylvanlake-services-header p{
  margin:0;

  color:var(--sl-muted);

  font-size:16px;
  line-height:1.8;
}

.sylvanlake-service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}

.sylvanlake-service-box{
  min-height:225px;

  position:relative;

  padding:28px 25px;

  background:#fff;

  border:1px solid var(--sl-border);

  transition:.35s ease;
}

.sylvanlake-service-box:nth-child(1),
.sylvanlake-service-box:nth-child(5){
  border-top:4px solid var(--sl-red);
}

.sylvanlake-service-box:hover{
  transform:translateY(-7px);

  background:var(--sl-red);

  border-color:var(--sl-red);

  box-shadow:0 18px 40px rgba(199,17,17,.18);
}

.sylvanlake-service-number{
  display:block;

  margin-bottom:48px;

  color:var(--sl-red);

  font-size:12px;
  font-weight:850;
  letter-spacing:1.5px;
}

.sylvanlake-service-box:hover .sylvanlake-service-number{
  color:#fff;
}

.sylvanlake-service-box h3{
  margin:0;

  color:var(--sl-black);

  font-size:19px;
  line-height:1.35;
}

.sylvanlake-service-box:hover h3{
  color:#fff;
}

.sylvanlake-service-icon{
  position:absolute;

  right:20px;
  bottom:20px;

  color:#d4d8df;

  font-size:25px;
}

.sylvanlake-service-box:hover .sylvanlake-service-icon{
  color:rgba(255,255,255,.65);
}


/* =========================================================
   STRESS FREE SECTION
========================================================= */

.sylvanlake-support{
  padding:110px 0;

  background:#fff;
}

.sylvanlake-support-layout{
  display:grid;
  grid-template-columns:.95fr 1.05fr;

  min-height:610px;
}

.sylvanlake-support-photo{
  position:relative;

  background:
    url("/images/locations/movers-in-sylvan-lake-ab/waist-up-portrait-modern-couple-using-digital-tablet-while-loading-boxes-into-self-storage-container-copy-space-1-1-1024x683.jpg")
    center/cover no-repeat;
}

.sylvanlake-support-photo::after{
  content:"";

  position:absolute;

  right:-28px;
  top:35px;

  width:100px;
  height:100px;

  border:13px solid var(--sl-red);

  border-left-color:transparent;
  border-bottom-color:transparent;
}

.sylvanlake-support-content{
  padding:65px 70px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  background:var(--sl-red);
}

.sylvanlake-support-content .sylvanlake-small-label{
  color:#fff;
}

.sylvanlake-support-content h2{
  margin:0 0 22px;

  color:#fff;

  font-size:clamp(35px,4vw,52px);
  line-height:1.06;
  letter-spacing:-1.8px;
}

.sylvanlake-support-content > p{
  margin:0 0 30px;

  color:rgba(255,255,255,.9);

  font-size:16px;
  line-height:1.85;
}

.sylvanlake-check-list{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:13px 20px;

  margin:0;
  padding:0;

  list-style:none;
}

.sylvanlake-check-list li{
  position:relative;

  padding-left:28px;

  color:#fff;

  font-size:14px;
  line-height:1.5;
}

.sylvanlake-check-list li::before{
  content:"✓";

  position:absolute;

  left:0;
  top:0;

  width:19px;
  height:19px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#fff;

  color:var(--sl-red);

  font-size:11px;
  font-weight:900;
}


/* =========================================================
   PACKING SECTION
========================================================= */

.sylvanlake-packing{
  padding:105px 0;

  background:var(--sl-black);
}

.sylvanlake-packing-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;

  gap:80px;

  align-items:center;
}

.sylvanlake-packing-content .sylvanlake-small-label{
  color:#ff6969;
}

.sylvanlake-packing-content h2{
  margin:0 0 25px;

  color:#fff;

  font-size:clamp(35px,4vw,55px);
  line-height:1.05;
  letter-spacing:-2px;
}

.sylvanlake-packing-content p{
  margin:0 0 22px;

  color:rgba(255,255,255,.68);

  font-size:16px;
  line-height:1.9;
}

.sylvanlake-packing-note{
  margin-top:32px;
  padding:22px 25px;

  border-left:3px solid var(--sl-red);

  background:rgba(255,255,255,.05);

  color:rgba(255,255,255,.8);

  font-size:14px;
  line-height:1.7;
}

.sylvanlake-packing-number{
  position:relative;

  min-height:390px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.1);
}

.sylvanlake-packing-number::before{
  content:"";

  position:absolute;

  width:240px;
  height:240px;

  border:55px solid rgba(199,17,17,.16);

  border-radius:50%;
}

.sylvanlake-packing-number strong{
  position:relative;
  z-index:2;

  color:var(--sl-red);

  font-size:150px;
  line-height:1;

  font-weight:900;
}


/* =========================================================
   CONTACT BAND
========================================================= */

.sylvanlake-contact{
  padding:75px 0;

  background:var(--sl-red);
}

.sylvanlake-contact-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:40px;
}

.sylvanlake-contact-inner h2{
  margin:0 0 10px;

  color:#fff;

  font-size:clamp(30px,4vw,44px);
  line-height:1.1;
}

.sylvanlake-contact-inner p{
  max-width:650px;

  margin:0;

  color:rgba(255,255,255,.87);

  font-size:15px;
  line-height:1.75;
}


/* =========================================================
   PROJECT GALLERY
========================================================= */

.sylvanlake-gallery{
  padding:105px 0;

  background:#fff;
}

.sylvanlake-gallery-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:35px;

  margin-bottom:40px;
}

.sylvanlake-gallery-heading h2{
  max-width:650px;

  margin:0;

  color:var(--sl-black);

  font-size:clamp(36px,4vw,55px);
  line-height:1.04;
  letter-spacing:-2px;
}

.sylvanlake-gallery-controls{
  display:flex;
  gap:8px;
}

.sylvanlake-gallery-arrow{
  width:48px;
  height:48px;

  border:1px solid #d8dce3;

  background:#fff;

  color:var(--sl-red);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  font-size:20px;

  transition:.3s ease;
}

.sylvanlake-gallery-arrow:hover{
  background:var(--sl-red);
  border-color:var(--sl-red);
  color:#fff;
}

.sylvanlake-gallery-window{
  overflow:hidden;
}

.sylvanlake-gallery-track{
  display:flex;

  transition:
    transform .7s cubic-bezier(.22,.61,.36,1);
}

.sylvanlake-gallery-slide{
  min-width:100%;
  flex:0 0 100%;
}

.sylvanlake-gallery-slide img{
  display:block;

  width:100%;
  height:600px;

  object-fit:cover;
}

.sylvanlake-gallery-caption{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:17px 2px 0;
}

.sylvanlake-gallery-caption strong{
  color:var(--sl-black);

  font-size:14px;
}

.sylvanlake-gallery-caption span{
  color:var(--sl-muted);

  font-size:12px;
}

.sylvanlake-gallery-dots{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  margin-top:25px;
}

.sylvanlake-gallery-dot{
  width:9px;
  height:9px;

  padding:0;

  border:0;
  border-radius:50%;

  background:#d4d8df;

  cursor:pointer;

  transition:.3s ease;
}

.sylvanlake-gallery-dot.active{
  width:28px;

  border-radius:10px;

  background:var(--sl-red);
}


/* =========================================================
   FINAL CTA
========================================================= */

.sylvanlake-final{
  position:relative;

  padding:115px 0;

  text-align:center;

  background:
    linear-gradient(
      135deg,
      #C71111,
      #900909
    );

  overflow:hidden;
}

.sylvanlake-final::before{
  content:"";

  position:absolute;

  width:500px;
  height:500px;

  left:-260px;
  top:-260px;

  border:80px solid rgba(255,255,255,.055);

  border-radius:50%;
}

.sylvanlake-final::after{
  content:"";

  position:absolute;

  width:330px;
  height:330px;

  right:-180px;
  bottom:-200px;

  border:55px solid rgba(255,255,255,.055);

  border-radius:50%;
}

.sylvanlake-final-content{
  position:relative;
  z-index:2;
}

.sylvanlake-final h2{
  max-width:850px;

  margin:0 auto 20px;

  color:#fff;

  font-size:clamp(40px,5vw,64px);
  line-height:1.04;
  letter-spacing:-2.5px;
}

.sylvanlake-final p{
  max-width:650px;

  margin:0 auto 32px;

  color:rgba(255,255,255,.88);

  font-size:17px;
  line-height:1.8;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1050px){

  .sylvanlake-hero-grid{
    grid-template-columns:1fr;
  }

  .sylvanlake-hero-copy{
    min-height:550px;
  }

  .sylvanlake-hero-photo{
    min-height:450px;
  }

  .sylvanlake-service-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .sylvanlake-support-layout{
    grid-template-columns:1fr;
  }

  .sylvanlake-support-photo{
    min-height:450px;
  }

  .sylvanlake-packing-grid{
    grid-template-columns:1fr;
  }

  .sylvanlake-packing-number{
    min-height:300px;
  }

}


@media(max-width:700px){

  .sylvanlake-wrap{
    width:92%;
  }

  .sylvanlake-hero-copy{
    padding:75px 30px;
  }

  .sylvanlake-hero h1{
    font-size:43px;
    letter-spacing:-1.7px;
  }

  .sylvanlake-hero-text{
    font-size:16px;
  }

  .sylvanlake-hero-buttons{
    flex-direction:column;
  }

  .sylvanlake-button{
    width:100%;
  }

  .sylvanlake-hero-photo{
    min-height:360px;
  }

  .sylvanlake-hero-badge{
    right:20px;
    bottom:20px;

    width:160px;
  }

  .sylvanlake-intro,
  .sylvanlake-services,
  .sylvanlake-support,
  .sylvanlake-packing,
  .sylvanlake-gallery{
    padding:75px 0;
  }

  .sylvanlake-intro-top{
    align-items:flex-start;
    flex-direction:column;

    gap:25px;
  }

  .sylvanlake-intro-main{
    grid-template-columns:1fr;
  }

  .sylvanlake-intro-card:first-child{
    border-right:0;
  }

  .sylvanlake-service-grid{
    grid-template-columns:1fr;
  }

  .sylvanlake-service-box{
    min-height:190px;
  }

  .sylvanlake-support-content{
    padding:50px 28px;
  }

  .sylvanlake-check-list{
    grid-template-columns:1fr;
  }

  .sylvanlake-packing-grid{
    gap:40px;
  }

  .sylvanlake-packing-content h2{
    font-size:39px;
  }

  .sylvanlake-packing-number{
    min-height:250px;
  }

  .sylvanlake-packing-number strong{
    font-size:110px;
  }

  .sylvanlake-contact-inner{
    align-items:flex-start;
    flex-direction:column;
  }

  .sylvanlake-gallery-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .sylvanlake-gallery-slide img{
    height:390px;
  }

  .sylvanlake-final{
    padding:80px 0;
  }

  .sylvanlake-final h2{
    font-size:42px;
  }

}


@media(max-width:480px){

  .sylvanlake-hero h1{
    font-size:37px;
  }

  .sylvanlake-hero-photo{
    min-height:300px;
  }

  .sylvanlake-gallery-slide img{
    height:300px;
  }

  .sylvanlake-gallery-arrow{
    width:43px;
    height:43px;
  }

}