/* =========================================================
   ATHABASCA MOVERS PAGE
   UNIQUE DESIGN
   ALL CLASSES USE ath- PREFIX
   PRIMARY COLOR: #C71111
========================================================= */

.ath-page{
  --ath-red:#C71111;
  --ath-red-dark:#990d0d;
  --ath-red-light:#fff3f3;
  --ath-black:#111317;
  --ath-dark:#191c21;
  --ath-text:#282d35;
  --ath-muted:#6b7280;
  --ath-light:#f5f6f8;
  --ath-white:#fff;
  --ath-border:#e3e5e8;

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

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

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


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

.ath-hero{
  position:relative;
  min-height:680px;

  display:flex;
  align-items:flex-end;

  background:
    linear-gradient(
      90deg,
      rgba(15,16,19,.96) 0%,
      rgba(15,16,19,.82) 45%,
      rgba(15,16,19,.20) 100%
    ),
    url("/images/locations/movers-in-athabasca/close-up-delivery-woman-holding-pack-1-1024x683.jpg")
    center/cover no-repeat;
}

.ath-hero-inner{
  width:min(1180px,92%);
  margin:0 auto;
  padding:95px 0 85px;
}

.ath-hero-content{
  max-width:760px;
}

.ath-hero-kicker{
  display:flex;
  align-items:center;
  gap:13px;

  margin-bottom:24px;

  color:#fff;

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

.ath-hero-kicker::before{
  content:"";

  width:45px;
  height:2px;

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

.ath-hero h1{
  margin:0 0 25px;

  color:#fff;

  font-size:clamp(48px,6.2vw,50px);
  line-height:.97;
  letter-spacing:-4px;
  font-weight:750;
}

.ath-hero-lead{
  max-width:700px;

  margin:0 0 32px;

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

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

.ath-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.ath-btn{
  min-height:53px;

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

  padding:0 27px;

  text-decoration:none!important;

  font-size:13px;
  font-weight:850;

  transition:.3s ease;
}

.ath-btn-red{
  background:var(--ath-red);
  color:#fff!important;
}

.ath-btn-red:hover{
  background:#a80e0e;
  transform:translateY(-2px);
}

.ath-btn-light{
  background:#fff;
  color:var(--ath-black)!important;
}

.ath-btn-light:hover{
  background:#eee;
  transform:translateY(-2px);
}



.ath-hero-badge span{
  color:#ff7777;
}


/* =========================================================
   INTRO - NUMBERED EDITORIAL
========================================================= */

.ath-intro{
  padding:105px 0;

  background:#fff;
}

.ath-intro-grid{
  display:grid;
  grid-template-columns:130px 1fr;

  gap:55px;
}

.ath-intro-number{
  color:var(--ath-red);

  font-size:72px;
  line-height:1;
  font-weight:900;
  letter-spacing:-5px;
}

.ath-intro-main{
  max-width:920px;
}

.ath-intro-label{
  margin-bottom:12px;

  color:var(--ath-red);

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

.ath-intro-main h2{
  max-width:800px;

  margin:0 0 28px;

  color:var(--ath-black);

  font-size:clamp(36px,4.5vw,40px);
  line-height:1.03;
  letter-spacing:-2.5px;
}

.ath-intro-copy{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:35px;
}

.ath-intro-copy p{
  margin:0;

  color:var(--ath-muted);

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

.ath-intro-contact{
  display:inline-flex;

  margin-top:32px;

  color:var(--ath-red)!important;

  font-size:14px;
  font-weight:850;
  text-decoration:none!important;

  border-bottom:2px solid var(--ath-red);

  padding-bottom:5px;
}


/* =========================================================
   RELOCATION EXPERTS
========================================================= */

.ath-experts{
  padding:100px 0;

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

.ath-experts-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:40px;

  margin-bottom:55px;
}

.ath-experts-heading{
  max-width:750px;
}

.ath-experts-label{
  margin-bottom:12px;

  color:var(--ath-red);

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

.ath-experts-heading h2{
  margin:0;

  color:var(--ath-black);

  font-size:clamp(38px,4.5vw,40px);
  line-height:1.03;
  letter-spacing:-2.5px;
}

.ath-experts-note{
  max-width:320px;

  margin:0;

  color:var(--ath-muted);

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

.ath-experts-layout{
  display:grid;
  grid-template-columns:.85fr 1.15fr;

  gap:18px;
}

.ath-experts-photo{
  min-height:610px;

  background:
    url("/images/locations/movers-in-athabasca/close-up-delivery-woman-holding-pack-1-1024x683.jpg")
    center/cover no-repeat;
}

.ath-expert-cards{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:18px;
}

.ath-expert-card{
  position:relative;

  padding:32px;

  background:#fff;

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

  transition:.3s ease;
}

.ath-expert-card:nth-child(2){
  background:var(--ath-red);
}

.ath-expert-card:nth-child(2) h3,
.ath-expert-card:nth-child(2) p,
.ath-expert-card:nth-child(2) .ath-card-number{
  color:#fff;
}

.ath-expert-card:hover{
  transform:translateY(-5px);

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

.ath-card-number{
  display:block;

  margin-bottom:45px;

  color:var(--ath-red);

  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
}

.ath-expert-card h3{
  margin:0 0 14px;

  color:var(--ath-black);

  font-size:20px;
  line-height:1.3;
}

.ath-expert-card p{
  margin:0;

  color:var(--ath-muted);

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

.ath-expert-card:nth-child(2) p{
  color:rgba(255,255,255,.84);
}


/* =========================================================
   MOVING PROCESS
========================================================= */

.ath-process{
  padding:110px 0;

  background:#fff;
}

.ath-process-header{
  max-width:780px;

  margin-bottom:55px;
}

.ath-process-label{
  margin-bottom:12px;

  color:var(--ath-red);

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

.ath-process-header h2{
  margin:0;

  color:var(--ath-black);

  font-size:clamp(38px,4.5vw,40px);
  line-height:1.03;
  letter-spacing:-2.5px;
}

.ath-process-list{
  border-top:1px solid var(--ath-border);
}

.ath-process-item{
  display:grid;
  grid-template-columns:80px 260px 1fr;

  gap:30px;

  align-items:start;

  padding:31px 0;

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

.ath-process-num{
  color:var(--ath-red);

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

.ath-process-item h3{
  margin:0;

  color:var(--ath-black);

  font-size:21px;
  line-height:1.3;
}

.ath-process-item p{
  margin:0;

  color:var(--ath-muted);

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


/* =========================================================
   OFFICE MOVE - DARK SECTION
========================================================= */

.ath-office{
  padding:105px 0;

  background:var(--ath-dark);
}

.ath-office-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:75px;

  align-items:center;
}

.ath-office-content{
  max-width:600px;
}

.ath-office-label{
  margin-bottom:13px;

  color:#ff6c6c;

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

.ath-office-content h2{
  margin:0 0 25px;

  color:#fff;

  font-size:clamp(37px,4vw,40px);
  line-height:1.04;
  letter-spacing:-2.2px;
}

.ath-office-content > p{
  margin:0 0 20px;

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

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

.ath-office-points{
  margin:32px 0 0;
  padding:0;

  list-style:none;
}

.ath-office-points li{
  display:flex;

  gap:15px;

  padding:16px 0;

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

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

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

.ath-office-points li::before{
  content:"✓";

  width:25px;
  height:25px;

  flex:0 0 25px;

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

  background:var(--ath-red);

  color:#fff;

  border-radius:50%;

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

.ath-office-image{
  min-height:560px;

  position:relative;

  background:
    url("/images/locations/movers-in-athabasca/lovely-woman-packing-things-1-1024x683.jpg")
    center/cover no-repeat;
}

.ath-office-image::before{
  content:"";

  position:absolute;

  left:-18px;
  top:30px;

  width:85px;
  height:85px;

  border-top:12px solid var(--ath-red);
  border-left:12px solid var(--ath-red);
}

.ath-office-image::after{
  content:"OFFICE";

  position:absolute;

  right:-20px;
  bottom:30px;

  padding:16px 20px;

  background:var(--ath-red);

  color:#fff;

  font-size:11px;
  font-weight:900;
  letter-spacing:1.8px;
}


/* =========================================================
   RED CTA
========================================================= */

.ath-callout{
  padding:65px 0;

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

.ath-callout-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:40px;
}

.ath-callout h2{
  margin:0 0 9px;

  color:#fff;

  font-size:clamp(28px,3vw,40px);
  line-height:1.1;
}

.ath-callout p{
  max-width:690px;

  margin:0;

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

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


/* =========================================================
   AFFORDABLE MOVE SECTION
========================================================= */

.ath-affordable{
  padding:95px 0;

  background:var(--ath-red-light);
}

.ath-affordable-box{
  max-width:900px;

  margin:0 auto;

  text-align:center;
}

.ath-affordable-box h2{
  margin:0 0 20px;

  color:var(--ath-black);

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

.ath-affordable-box p{
  margin:0 auto 25px;

  color:var(--ath-muted);

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

.ath-affordable-box strong{
  color:var(--ath-red);
}


/* =========================================================
   FAQ
========================================================= */

.ath-faq{
  padding:105px 0;

  background:#fff;
}

.ath-faq-heading{
  display:grid;
  grid-template-columns:.8fr 1.2fr;

  gap:70px;

  margin-bottom:45px;
}

.ath-faq-label{
  color:var(--ath-red);

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

.ath-faq-heading h2{
  margin:12px 0 0;

  color:var(--ath-black);

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

.ath-faq-heading p{
  margin:0;

  color:var(--ath-muted);

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

.ath-faq-list{
  border-top:1px solid var(--ath-border);
}

.ath-faq-item{
  border-bottom:1px solid var(--ath-border);
}

.ath-faq-question{
  width:100%;

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

  gap:25px;

  padding:25px 0;

  border:0;
  background:none;

  color:var(--ath-black);

  text-align:left;

  cursor:pointer;

  font-family:inherit;
  font-size:16px;
  font-weight:800;
}

.ath-faq-symbol{
  width:32px;
  height:32px;

  flex:0 0 32px;

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

  background:var(--ath-red-light);

  color:var(--ath-red);

  font-size:20px;

  transition:.3s ease;
}

.ath-faq-answer{
  max-height:0;

  overflow:hidden;

  transition:max-height .4s ease;
}

.ath-faq-answer p{
  max-width:900px;

  margin:0;

  padding:0 55px 25px 0;

  color:var(--ath-muted);

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

.ath-faq-item.active .ath-faq-symbol{
  background:var(--ath-red);

  color:#fff;

  transform:rotate(45deg);
}


/* =========================================================
   PROJECTS
========================================================= */

.ath-projects{
  padding:105px 0;

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

.ath-project-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:40px;

  margin-bottom:38px;
}

.ath-project-label{
  margin-bottom:12px;

  color:#ff6d6d;

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

.ath-project-header h2{
  max-width:720px;

  margin:0;

  color:#fff;

  font-size:clamp(38px,4.5vw,40px);
  line-height:1.02;
  letter-spacing:-2.5px;
}

.ath-project-controls{
  display:flex;
  gap:8px;
}

.ath-project-arrow{
  width:48px;
  height:48px;

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

  background:transparent;

  color:#fff;

  cursor:pointer;

  font-size:18px;

  transition:.3s ease;
}

.ath-project-arrow:hover{
  background:var(--ath-red);
  border-color:var(--ath-red);
}

.ath-project-window{
  overflow:hidden;
}

.ath-project-track{
  display:flex;

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

.ath-project-slide{
  min-width:100%;
  flex:0 0 100%;
}

.ath-project-slide img{
  display:block;

  width:100%;
  height:570px;

  object-fit:cover;
}

.ath-project-caption{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:17px 0 0;

  color:#fff;
}

.ath-project-caption strong{
  font-size:14px;
}

.ath-project-caption span{
  color:rgba(255,255,255,.5);

  font-size:12px;
}

.ath-project-dots{
  display:flex;
  justify-content:center;

  gap:8px;

  margin-top:25px;
}

.ath-project-dot{
  width:9px;
  height:9px;

  padding:0;

  border:0;
  border-radius:50%;

  background:#555b64;

  cursor:pointer;

  transition:.3s ease;
}

.ath-project-dot.active{
  width:28px;

  border-radius:10px;

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


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

.ath-final{
  position:relative;

  padding:115px 0;

  background:
    linear-gradient(
      135deg,
      #C71111 0%,
      #980b0b 100%
    );

  text-align:center;

  overflow:hidden;
}

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

  position:absolute;

  width:500px;
  height:500px;

  left:-220px;
  bottom:-270px;

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

  border-radius:50%;
}

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

  position:absolute;

  width:430px;
  height:430px;

  right:-180px;
  top:-230px;

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

  border-radius:50%;
}

.ath-final-inner{
  position:relative;
  z-index:2;
}

.ath-final h2{
  max-width:900px;

  margin:0 auto 20px;

  color:#fff;

  font-size:clamp(40px,5vw,40px);
  line-height:1.02;
  letter-spacing:-2.8px;
}

.ath-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:1000px){

  .ath-hero-badge{
    display:none;
  }

  .ath-experts-layout{
    grid-template-columns:1fr;
  }

  .ath-experts-photo{
    min-height:450px;
  }

  .ath-office-grid{
    grid-template-columns:1fr;
  }

  .ath-office-image{
    min-height:430px;
  }

}


@media(max-width:750px){

  .ath-hero{
    min-height:650px;
  }

  .ath-hero-inner{
    padding:90px 0 70px;
  }

  .ath-hero h1{
    font-size:46px;
    letter-spacing:-2px;
  }

  .ath-hero-actions{
    flex-direction:column;
  }

  .ath-btn{
    width:100%;
  }

  .ath-intro,
  .ath-experts,
  .ath-process,
  .ath-office,
  .ath-faq,
  .ath-projects{
    padding:75px 0;
  }

  .ath-intro-grid{
    grid-template-columns:1fr;

    gap:20px;
  }

  .ath-intro-number{
    font-size:48px;
    letter-spacing:-3px;
  }

  .ath-intro-copy{
    grid-template-columns:1fr;

    gap:20px;
  }

  .ath-experts-top{
    align-items:flex-start;
    flex-direction:column;

    gap:20px;
  }

  .ath-expert-cards{
    grid-template-columns:1fr;
  }

  .ath-process-item{
    grid-template-columns:55px 1fr;

    gap:15px;
  }

  .ath-process-item p{
    grid-column:2;
  }

  .ath-callout-inner{
    align-items:flex-start;
    flex-direction:column;
  }

  .ath-faq-heading{
    grid-template-columns:1fr;

    gap:20px;
  }

  .ath-project-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .ath-project-slide img{
    height:390px;
  }

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

}


@media(max-width:480px){

  .ath-wrap{
    width:92%;
  }

  .ath-hero h1{
    font-size:39px;
  }

  .ath-intro-main h2,
  .ath-experts-heading h2,
  .ath-process-header h2,
  .ath-office-content h2,
  .ath-faq-heading h2{
    font-size:38px;
  }

  .ath-experts-photo{
    min-height:350px;
  }

  .ath-office-image{
    min-height:340px;
  }

  .ath-project-slide img{
    height:300px;
  }

  .ath-final h2{
    font-size:40px;
  }

}