/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
}

.sr-only {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--base-color);
  color: var(--text-color-light);
  padding: 8px 16px;
  text-decoration: none;
  z-index: 1000;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
}

/* Variables */
:root {
  --header-height: 4.5rem;
  --hue: 930;
  --base-color: hsl(var(--hue) 36% 57%);
  --base-color-second: hsl(var(--hue) 65% 88%);
  --base-color-alt: hsl(var(--hue) 57% 53%);
  --title-color: hsl(var(--hue) 41% 10%);
  --text-color: hsl(0 0% 46%);
  --text-color-light: hsl(0 0% 98%);
  --body-color: hsl(0 0% 98%);
  --title-font-size: 1.875rem;
  --subtitle-font-size: 1rem;
  --title-font: 'Poppins', sans-serif;
  --body-font: 'DM Sans', sans-serif;
}

/* BASE */
html {
  scroll-behavior: smooth;
}

body {
  font: 400 1rem var(--body-font);
  color: var(--text-color);
  background: var(--body-color);
  -webkit-font-smoothing: antialiased;
}

.title {
  font: 700 var(--title-font-size) var(--title-font);
  color: var(--title-color);
  -webkit-font-smoothing: auto;
}

/* Buttons */
.btn-full-red {
  display: block;
  width: 100%;
  background: #d32f2f;
  color: #fff;
  border: none;
  padding: .8rem 1rem;
  font: 600 2rem var(--body-font);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  letter-spacing: .3px;
  box-shadow: 0 10px 20px rgba(211, 47, 47, .2);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.btn-full-red:hover {
  background: #b71c1c;
  box-shadow: 0 14px 28px rgba(183, 28, 28, .25);
  transform: translateY(-1px);
}

.btn-full-red:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .25);
}

.btn-full-red:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.button {
  background: linear-gradient(135deg, var(--base-color), var(--base-color-alt));
  color: var(--text-color-light);
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 2rem;
  border-radius: .75rem;
  font: 600 1rem var(--body-font);
  transition: transform .15s ease, box-shadow .25s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
}

.divider-1,
.divider-2 {
  height: 1px;
}

.divider-1 {
  background: linear-gradient(270deg, hsla(var(--hue), 36%, 57%, 1), hsla(var(--hue), 65%, 88%, .34));
}

.divider-2 {
  background: linear-gradient(270deg, hsla(var(--hue), 65%, 88%, .34), hsla(var(--hue), 36%, 57%, 1));
}

/* LAYOUT */
.container {
  margin: 0 1.5rem;
}

.grid {
  display: grid;
  gap: 2rem;
}

.section {
  padding: calc(1rem + var(--header-height)) 0;
}

.section .title {
  margin-bottom: 1rem;
}

.section.subtitle {
  font-size: var(--subtitle-font-size);
}

.section header {
  margin-bottom: 4rem;
}

.section header strong {
  color: var(--base-color);
}

/* HEADER */
#header {
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 2rem;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  width: 100%;
  transition: box-shadow .25s ease, background .25s ease;
}

#header.scroll {
  box-shadow: 0 6px 30px rgba(0, 0, 0, .12);
  background: #fff;
}

.logo {
  width: 90px;
}

/* NAV */
nav {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

nav ul li {
  text-align: center;
}

nav ul li a {
  transition: color .2s;
  position: relative;
}

nav ul li a:hover,
nav ul li a.active {
  color: var(--base-color);
}

nav ul li a::after {
  content: '';
  width: 0%;
  height: 2px;
  background: var(--base-color);
  position: absolute;
  left: 0;
  bottom: -1.5rem;
  transition: width .2s;
}

nav ul li a:hover::after,
nav ul li a.active::after {
  width: 100%;
}

nav .menu {
  opacity: 0;
  visibility: hidden;
  top: -20rem;
  transition: .2s;
}

nav .menu ul {
  display: none;
}

nav.show .menu {
  opacity: 1;
  visibility: visible;
  background: var(--body-color);
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  place-content: center;
}

nav.show .menu ul {
  display: grid;
}

nav.show ul.grid {
  gap: 4rem;
}

.toggle {
  color: var(--base-color);
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.5rem;
  margin: 0;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav .icon-close {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 1.5rem;
  transition: .2s;
}

nav.show .icon-close {
  visibility: visible;
  opacity: 1;
}

/* HOME */
#home .container {
  margin: 0;
}

#home .image {
  position: relative;
}

#home .image::before {
  content: '';
  height: 100%;
  width: 100%;
  background: var(--base-color-second);
  position: absolute;
  top: -16.8%;
  left: 16.7%;
  z-index: 0;
  border-radius: .25rem;
}

#home {
  overflow: hidden;
}

#home .image img {
  position: relative;
  right: 2.93rem;
  border-radius: .25rem;
}

#home .text {
  margin: 0 1.5rem;
  text-align: center;
}

#home .text h1 {
  margin-bottom: 1rem;
}

#home .text p {
  margin-bottom: 2rem;
}

/* ABOUT */
#about {
  background: white;
  overflow: hidden;
}

#about .container {
  margin: 0;
}

#about .image {
  position: relative;
}

#about .image::before {
  content: '';
  height: 100%;
  width: 100%;
  background: var(--base-color-second);
  position: absolute;
  top: -8.3%;
  left: -33%;
  z-index: 0;
  border-radius: .25rem;
}

#about .image img {
  position: relative;
  right: 2.93rem;
  border-radius: .25rem;
}

#about .text {
  margin: 0 1.5rem;
}

/* SERVICES */
.cards.grid {
  gap: 1.5rem;
}

.card {
  padding: 3.625rem 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  border-bottom: .25rem solid var(--base-color);
  border-radius: .75rem .75rem 0 0;
  text-align: center;
  background: #fff;
}

.card i {
  display: block;
  margin-bottom: 1.5rem;
  font-size: 4rem;
  color: var(--base-color);
}

.card .title {
  font-size: 1.5rem;
  margin-bottom: .75rem;
}

/* REVIEWS Carousel */
#reviews {
  background: linear-gradient(180deg, #fff, #f7f8fb);
}

#reviews header .title {
  text-align: center;
}

.powered-by {
  font-size: 12px;
  color: #666;
  text-align: center;
  margin-top: .75rem;
}

.reviews-carousel {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.reviews-viewport {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: .5rem .5rem 1rem;
}

.reviews-track {
  display: flex;
  gap: 16px;
  --gap: 16px;
  --cards-per-view: 1;
}

.review-card {
  flex: 0 0 calc((100% - (var(--gap) * (var(--cards-per-view) - 1))) / var(--cards-per-view));
  box-sizing: border-box;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
  scroll-snap-align: start;
  transition: transform .2s ease, box-shadow .2s ease;
}

.review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .08);
}

.review-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}

.review-header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.review-author {
  font-weight: 600;
}

.review-stars {
  font-size: .95rem;
  margin: .35rem 0;
  color: #222;
}

.review-stars span {
  color: #666;
  font-size: .85em;
  margin-left: .35rem;
}

.review-when {
  color: #666;
  font-size: .8rem;
}

.review-text {
  margin: .25rem 0 0;
  white-space: pre-wrap;
  line-height: 1.6;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #e50914;
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 22px;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 20px rgba(229, 9, 20, .25);
  transition: background .2s ease, transform .1s ease;
}

.carousel-btn:hover {
  background: #c10811;
}

.carousel-btn:active {
  transform: translateY(-50%) scale(.98);
}

.carousel-btn:focus-visible {
  outline: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(229, 9, 20, .35);
}

.carousel-btn.prev {
  left: -4px;
}

.carousel-btn.next {
  right: -4px;
}

.carousel-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

.reviews-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.reviews-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #d4d7dd;
  cursor: pointer;
}

.reviews-dots button[aria-selected="true"] {
  background: var(--base-color);
}

/* CONTACT */
#contact .grid {
  gap: 4rem;
}

#contact .text p {
  margin-bottom: 2rem;
}

#contact .button i,
#contact address ul li i,
#contact address ul li a {
  font-size: 1.5rem;
  margin-right: .625rem;
}

#contact address {
  font-style: normal;
}

#contact address ul.grid {
  gap: 2rem;
}

#contact address ul li {
  display: flex;
  align-items: center;
}

#contact address ul li i {
  color: var(--base-color);
}

#contact address ul li a {
  color: var(--text-color);
  transition: color .2s;
}

#contact address ul li a:hover {
  color: var(--base-color);
}

/* FOOTER */
footer {
  background: var(--base-color);
}

footer.section {
  padding: 0;
}

footer .logo {
  display: inline-block;
  margin-bottom: 1.5rem;
}

footer .brand-logos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

footer .brand-logos .logo {
  margin-bottom: 0;
}

footer .brand-logos .canada-badge {
  width: 130px;
  height: auto;
}

footer .brand p {
  color: var(--text-color-light);
  margin-bottom: .75rem;
}

footer i {
  font-size: 1.5rem;
  color: var(--text-color-light);
}

footer .social {
  grid-auto-flow: column;
  width: fit-content;
}

footer .social a {
  transition: .3s;
  display: inline-block;
}

footer .social a:hover {
  transform: translateY(-8px);
}

/* BACK TO TOP */
.back-to-top {
  background: var(--base-color);
  color: var(--text-color-light);
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  padding: .5rem;
  clip-path: circle();
  font-size: 1rem;
  line-height: 0;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
  transform: translateY(100%);
}

.back-to-top.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.back-to-top.btn-footer-color {
  background: var(--text-color-light);
  color: var(--base-color);
}

#TempWarnings {
  padding: 0;
}

#TempWarningsMobile {
  visibility: hidden;
}

/* MEDIA QUERIES */
@media (min-width:1200px) {
  .container {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }
  .section {
    padding: 10rem 0;
  }
  .section header, #reviews header {
    max-width: 32rem;
    text-align: center;
    margin: 0 auto 4rem;
  }
  .button {
    height: 3.125rem;
  }
  nav .menu {
    opacity: 1;
    visibility: visible;
    top: 0;
  }
  nav .menu ul {
    display: flex;
    gap: 2rem;
  }
  nav .menu ul li a.title {
    font: 400 1rem var(--body-font);
    -webkit-font-smoothing: antialiased;
  }
  nav .menu ul li a.title.active {
    font-weight: bold;
    -webkit-font-smoothing: auto;
  }
  nav .icon-menu {
    display: none;
  }
  main {
    margin-top: var(--header-height);
  }
  #home .container {
    grid-auto-flow: column;
    justify-content: space-between;
    margin: 0 auto;
  }
  #home .image {
    order: 1;
  }
  #home .text {
    order: 0;
    max-width: 24rem;
    text-align: left;
  }
  #about .container {
    grid-auto-flow: column;
    margin: 0 auto;
  }
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0 3rem;
  }
  #reviews .container {
    margin-left: auto;
    margin-right: auto;
  }
  #contact{
    display: flex;
  }
  #contact .container {
    grid-auto-flow: column;
    align-items: center;
  }
  #contact .text {
    max-width: 25rem;
  }
  footer .container {
    grid-auto-flow: column;
    align-items: center;
    justify-content: space-between;
  }
}

/* Large devices */
@media (min-width:992px) {
  :root {
    --title-font-size: 2.25rem;
    --subtitle-font-size: 1.125rem;
  }
  .reviews-track {
    --cards-per-view: 3;
  }
}

/* Medium devices */
@media (min-width:768px) and (max-width:991.98px) {
  .reviews-track {
    --cards-per-view: 2;
  }
}

/* Modal (kept from current site) */
#popupModal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  width: 90%;
  max-width: 1000px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}
#calendarFrame {
  width: 100%;
  height: 70vh;
  border: none;
}

@media (max-width:768px) {
  .modal-content {
    width: 95%;
    max-height: 80vh;
    padding: 15px;
  }
  .btn-full-red {
    font-size: 1.5rem;
    min-height: 44px; /* Ensure touch-friendly size */
  }
  .button {
    min-height: 44px; /* Ensure touch-friendly size */
  }
  #calendarFrame {
    height: 60vh;
  }
  .close {
    font-size: 20px;
    top: 8px;
    right: 10px;
    min-width: 44px;
    min-height: 44px;
  }
  #TempWarnings {
    padding: 0;
    visibility: hidden;
  }
  #TempWarningsMobile {
    visibility: visible;
    margin-inline-end: auto;
    margin-left: 2rem;
  }
  footer .container {
    grid-auto-flow: column;
    align-items: center;
    justify-content: space-between;
  }
  footer .brand-logos {
    gap: 1rem;
  }
  footer .brand-logos .canada-badge {
    width: 100px;
  }
  /* Improve touch scrolling on mobile */
  .reviews-viewport {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  /* Ensure social links are touch-friendly */
  .social a {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}