@import url("fonts.css");

/* ===== Reset & base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: #fff;
  position: relative;
  overflow-x: hidden;
  font-family: poppins;
}
section[id],
div[id] {
  scroll-margin-top: 78px;
}
img {
  max-width: 100%;
}

@keyframes pulseT {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
@keyframes kenburns {
  from {
    transform: scale(1.001);
  }
  to {
    transform: scale(1.09);
  }
}
@keyframes aiGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 168, 106, 0);
    border-color: rgba(201, 168, 106, 0.45);
  }
  50% {
    box-shadow: 0 0 20px 2px rgba(201, 168, 106, 0.5);
    border-color: rgba(201, 168, 106, 1);
  }
}
@keyframes aiWink {
  0%,
  42%,
  100% {
    opacity: 1;
  }
  46% {
    opacity: 0.15;
  }
  50% {
    opacity: 1;
  }
  54% {
    opacity: 0.15;
  }
  58% {
    opacity: 1;
  }
}
::selection {
  background: #9e7c2c;
  color: #fff;
}

/* ===== Audience toggle (Clients / Staff) =====
   Both tracks exist in the DOM; script.js toggles the "active" class. */
.aud-panel {
  display: none;
}
.aud-panel.active {
  display: block;
}
.aud-text {
  display: none;
}
.aud-text.active {
  display: inline;
}
.aud-text.active-block.active {
  display: block;
}

/* ===== Reveal-on-scroll (driven by IntersectionObserver in script.js) ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ===== Testimonial carousels ===== */
.carousel-viewport {
  overflow: hidden;
  border-radius: 14px;
  position: relative;
}
.carousel-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 4px;
}
.carousel-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 100px !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition:
    width 0.3s ease,
    background 0.3s ease !important;
  background: #d9cfc3 !important;
  flex: none !important;
}
.carousel-dot.active {
  width: 26px !important;
}
.carousel-dots--clients .carousel-dot.active {
  background: #9e7c2c !important;
}
.carousel-dots--staff .carousel-dot.active {
  background: #6e1f2e !important;
}

/* ===== Quote calculator (rows rendered by script.js) ===== */
.quote-line {
  border: 1px solid #e6e9ee;
  border-radius: 9px;
  padding: 14px 16px 16px;
  margin-top: 14px;
}
.quote-line-top {
  display: flex;
  gap: 10px;
  align-items: center;
}
.quote-line-grid {
  display: grid;
  grid-template-columns: 64px 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 13px;
  align-items: end;
}
.quote-field-label {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #888;
  font-weight: 600;
  margin-bottom: 5px;
}
.quote-input,
.quote-select {
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  padding: 11px 10px !important;
  border: 1px solid #d9dde3 !important;
  border-radius: 6px !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff;
}
.quote-select option,
.quote-select optgroup {
  font-size: 12px !important;
}
.quote-input.is-short,
.quote-select.is-short {
  border-color: #c0392b;
}
.quote-remove-btn {
  background: #f5eedd;
  border: none;
  color: #9e7c2c;
  font-size: 18px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  flex: none;
}
.quote-shortwarn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  background: #fbedec;
  border: 1px solid #f1c9c6;
  border-radius: 6px;
  padding: 9px 12px;
}
.quote-shortwarn span:first-child {
  color: #c0392b;
  font-size: 14px;
  flex: none;
}
.quote-shortwarn span:last-child {
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: #a03228;
}
.quote-line-total {
  text-align: right;
  padding-bottom: 2px;
}
.quote-line-hours {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  color: #999;
}
.quote-line-amount {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 2px;
}

/* ===== Mobile nav ===== */
#mobileNav {
  display: none;
}
#mobileNav.open {
  display: flex;
}

/* ===== Hover effects (replace the original's non-standard style-hover attribute) ===== */
.hv-fade {
  transition: color 0.2s ease;
}
.hv-fade:hover {
  color: #d9d2c9 !important;
}

.hv-btn-dark {
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.hv-btn-dark:hover {
  background: #000 !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-3px) scale(1.03);
}

.hv-btn-gold {
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.hv-btn-gold:hover {
  background: #6b5018 !important;
  box-shadow: 0 16px 34px rgba(158, 124, 44, 0.4) !important;
  transform: translateY(-3px) scale(1.03);
}

.hv-btn-maroon {
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.hv-btn-maroon:hover {
  background: #561826 !important;
  box-shadow: 0 16px 34px rgba(110, 31, 46, 0.4) !important;
  transform: translateY(-3px) scale(1.03);
}

.hv-lift {
  transition: transform 0.2s ease;
}
.hv-lift:hover {
  transform: translateY(-3px) scale(1.03);
}

.hv-cta-white {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.hv-cta-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3) !important;
}

.hv-card1 {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.hv-card1:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12) !important;
}

.hv-card2 {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.hv-card2:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1) !important;
}

.hv-blog {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.hv-blog:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.14) !important;
}

.hv-zoom {
  transition: transform 0.6s ease;
}
.hv-blog:hover .hv-zoom,
.hv-zoom-parent:hover .hv-zoom {
  transform: scale(1.07);
}
.hv-card1:hover .hv-zoom {
  transform: scale(1.06);
}

.hv-ai {
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}
.hv-ai:hover {
  transform: translateY(-5px);
  border-color: rgba(158, 124, 44, 0.55) !important;
}

.hv-logo {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease !important;
  max-width: 185px;
}
.hv-logo:hover {
  opacity: 1 !important;
  transform: scale(1.07);
}

.hv-dotbtn {
  transition: transform 0.2s ease;
}
.hv-dotbtn:hover {
  transform: translateY(-50%) scale(1.08);
}

.hv-send {
  transition: background 0.2s ease;
}
.hv-send:hover {
  background: #9e7c2c !important;
}

/* ===== Client logos swiper ===== */
.logos-swiper-wrap {
  position: relative;
}
.logos-swiper {
  margin-top: 34px;
  padding: 4px 0;
  overflow: hidden;
}
.logos-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
}
.logos-slide .hv-logo {
  width: auto;
  /* width: 100%; */
}
.logos-swiper[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.logos-swiper[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Nav arrows — same look as the testimonial carousel arrows */
.logos-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px !important;
  height: 40px;
  border-radius: 50% !important;
  background: #fff;
  border: 1px solid #e6e9ee !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  font-size: 18px !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0 !important;
}
.logos-nav-prev {
  left: -14px;
}
.logos-nav-next {
  right: -14px;
}

/* Owns its own hover transform so the shared .hv-dotbtn:hover rule
   (used by the testimonial carousels) can never override it, on any breakpoint */
.logos-nav-btn.hv-dotbtn:hover {
  transform: translateY(-50%) scale(1.08);
}

.logos-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.logos-swiper .swiper-wrapper {
  align-items: center;
}
/* input[type="time"] {    -webkit-appearance: none;    appearance: none;} */
/* input[type="time"] {    min-height: 44px;    cursor: pointer;} */
.c-date-wrap .c-date-display {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #000000;
  opacity: 0.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;   /* Safari/Chrome on macOS */
  -moz-osx-font-smoothing: grayscale;     /* Firefox on macOS */
}
.c-div-49 input::placeholder{
  color: #000000 !important;
  opacity: 0.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;   /* Safari/Chrome on macOS */
  -moz-osx-font-smoothing: grayscale;     /* Firefox on macOS */
}
.c-date-display.date-selected {
  opacity: 1 !important;
}

@media (min-width: 1299px) {
  .c-div-10 img {
    height: 100% !important;
  }
}
/* ===== Mobile responsiveness ===== */
@media (min-width: 901px) {
  [data-burger] {
    display: none !important;
  }
  #mobileNav {
    display: none !important;
  }
}
@media (max-width: 900px) {
  [data-desktop-nav] {
    display: none !important;
  }
  [data-burger] {
    display: flex !important;
  }
  .c-button-1 {
    width: 40px !important;
    padding: 0 !important;
    height: 40px;
    align-items: center;
  }
  .c-button-1 span {
    width: 20px;
  }
  .c-div-21 {
    font-size: 35px;
  }
  .c-img-1 {
    height: 80px;
  }
}

@media (max-width: 820px) {
  /* stack every multi-column grid */
  .js-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* tighten container side padding */

  [data-hero-text] {
    padding: 15px 15px 21px !important;
  }
  .js-hero-minh {
    min-height: 0 !important;
  }
  .js-media-minh {
    min-height: 280px !important;
  }
  .js-section-pad {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }
  h1 {
    font-size: 38px !important;
    line-height: 1.1 !important;
  }
  h2 {
    font-size: 28px !important;
    line-height: 1.18 !important;
  }
  .quote-line-grid {
    grid-template-columns: 30px 1fr 1fr !important;
  }
  .quote-line-grid > *:last-child {
    grid-column: 1/4;
  }
  .c-section-2 {
    padding: 30px 10px;
  }
  /* ===== Heading classes (override the !important sizes in components.css) ===== */
  .c-h1-1 {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }
  .c-h2-1,
  .c-h2-4,
  .c-h2-7,
  .c-h2-9 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .c-h2-2 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  .c-h2-3 {
    font-size: 24px !important;
    line-height: 1.22 !important;
  }
  .c-h2-5 {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }
  .c-h2-6,
  .c-h2-8,
  .c-h2-10 {
    font-size: 27px !important;
    line-height: 1.2 !important;
  }
  .c-h3-9 {
    font-size: 22px !important;
    line-height: 1.22 !important;
  }

  /* ===== Reduce oversized section padding that wasn't covered by .js-section-pad ===== */
  .c-section-4 {
    padding-top: 44px !important;
  }
  .c-section-5 {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
  }
  .c-section-6 {
    padding: 0 30px 30px;
  }
  .c-div-32 {
    margin-top: 20px;
  }
  .c-section-7 {
    padding: 48px 0 !important;
  }
  .c-section-9 {
    padding-top: 48px !important;
    padding-bottom: 40px !important;
  }
  .c-section-10 {
    padding-bottom: 44px !important;
  }
  .c-section-11 {
    padding: 40px 0 !important;
  }
  .c-section-12 {
    padding: 48px 0 !important;
  }
  .c-section-13 {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }
  .c-section-15 {
    padding: 48px 20px !important;
  }
  .c-section-16 {
    padding-bottom: 48px !important;
  }
  .c-img-1 {
    height: 50px;
  }
  .c-div-9,
  .c-div-8 {
    padding: 10px;
  }
  .c-p-2 {
    min-height: unset;
    margin-bottom: 0;
  }
  .quote-line-grid {
    display: flex !important;
    flex-wrap: wrap;
  }
}

/* ===== Logo swiper arrows: bottom, side-by-side — phones AND tablets ===== */
@media (max-width: 1024px) {
  .logos-slide .hv-logo {
    height: auto;
  }

  /* make room below the slider for the arrows */
  .logos-swiper-wrap {
    padding-bottom: 56px;
  }

  /* pull arrows out of their absolute left/right positions... */
  .logos-nav-btn {
    top: auto;
    bottom: 0;
    transform: none;
    left: auto;
    right: auto;
  }

  /* ...and place them side by side, centered under the slider */
  .logos-nav-prev {
    left: 50%;
    transform: translateX(calc(-100% - 8px));
  }
  .logos-nav-next {
    right: 50%;
    transform: translateX(calc(100% + 8px));
  }

  /* the hover rule must match THIS breakpoint's transform, not desktop's */
  .logos-nav-prev.hv-dotbtn:hover {
    transform: translateX(calc(-100% - 8px)) scale(1.08);
  }
  .logos-nav-next.hv-dotbtn:hover {
    transform: translateX(calc(100% + 8px)) scale(1.08);
  }
}

@media (max-width: 767px) {
  .c-button-2,
  .c-button-3 {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }
  .c-div-13 {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 12px;
  }
  .c-div-94 {
    padding: 20px 14px;
  }
  .c-div-21 {
    font-size: 30px;
  }
  .c-h2-2 {
    font-size: 30px !important;
  }
  .c-div-20 {
    padding: 15px;
  }

  .c-h2-1 {
    font-size: 30px !important;
    line-height: 1.3 !important;
  }
  .c-div-15 {
    gap: 25px;
  }

  .c-span-37 {
    word-break: break-word;
  }
  .quote-line {
    padding: 10px;
  }
  .c-p-2,
  .c-p-3 {
    min-height: unset;
    margin: 0;
  }
  .js-grid {
    grid-template-columns: 1fr !important;
  }
  .c-div-23 {
    padding: 20px;
  }
  .c-button-8,
  .c-button-7 {
    width: 25px !important;
    height: 25px !important;
  }
  .hv-logo {
    max-width: 100px;
  }
  .c-div-55 {
    padding: 20px;
  }
  .c-p-25 {
    font-size: 15px;
  }
  .c-form-2 {
    padding: 15px;
  }
  .c-input-4 {
    padding: 7px;
  }
  .c-a-18,
  .c-a-9,
  .c-a-10,
  .c-a-8,
  .c-a-11,
  .c-a-12,
  .c-a-13,
  .c-a-15,
  .c-a-16 {
    font-size: 13px !important;
    padding: 6px 12px !important;
    text-align: center;
  }
  #quoteLines label:has(input[type="number"]) {
    width: 100%;
  }
  #quoteLines input[type="number"] {
    width: 70px !important;
    height: 40px;
    text-align: center !important;
    padding: 4px !important;
  }
  #quoteLines label:has(input[type="time"]) {
    width: 45% !important;
  }
  #quoteLines .quote-line-total {
    width: 100%;
  }
  .logos-slide .hv-logo {
    height: auto;
  }

  /* .c-div-49.js-grid{
      display: flex !important;
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
      overflow: hidden !important;
    .c-date-wrap{
      width: 100% !important;
      min-width: 100% !important;
      display: block;
    }
  } */
  .c-date-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box !important;
  }

  .c-date-wrap > #eventDate {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .c-date-wrap > .c-date-display {
    position: absolute !important;
    top: 50% !important;
    left: 16px !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }
}

@media (max-width: 520px) {
  h1 {
    font-size: 31px !important;
  }
  h2 {
    font-size: 25px !important;
  }
  [aria-label="Previous"] {
    left: 2px !important;
  }
  [aria-label="Next"] {
    right: 2px !important;
  }

  /* ===== Slightly smaller still, on very small phones ===== */
  .c-h1-1 {
    font-size: 28px !important;
  }
  .c-h2-1,
  .c-h2-4,
  .c-h2-7,
  .c-h2-9 {
    font-size: 23px !important;
  }
  .c-h2-2 {
    font-size: 24px !important;
  }
  .c-h2-3 {
    font-size: 21px !important;
  }
  .c-h2-5 {
    font-size: 25px !important;
  }
  .c-h2-6,
  .c-h2-8,
  .c-h2-10 {
    font-size: 23px !important;
  }
  .c-h3-9 {
    font-size: 20px !important;
  }
}

.desktop-only {
  display: block;
}
.mobile-only {
  display: none;
}

@media (max-width: 767px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
}