/* TrueCraft overrides on top of NueStudio Webflow CSS */
@import url("responsive.css?v=wf-20260709f");

/* TrueCraft logo — full lockup visible, never cropped */
.brand .tc-logo,
.aginceo-logo,
.nav-icon-02 {
  display: block;
  width: auto;
  height: 56px;
  max-width: none;
  min-width: 0;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Header logo — stacked variants, optically centered in nav row */
.nav-bar.w-nav .brand.w-nav-brand {
  float: none !important;
  display: inline-grid !important;
  grid-template-columns: auto;
  align-items: center !important;
  align-self: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: min(520px, 56vw) !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

.nav-bar.w-nav .brand .aginceo-logo,
.nav-bar.w-nav .brand .tc-logo {
  grid-area: 1 / 1;
  height: 56px !important;
  width: auto !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  /* display toggled by .tc-logo--light / .tc-logo--dark rules — do not override */
}

.dropdown-nav .tc-logo,
.dropdown-nav .nav-icon-02 {
  height: 44px;
  max-width: none;
}

.footer-logo .tc-logo,
.footer .tc-logo,
.footer-logo img,
.footer-logo .fit-cover {
  display: block;
  width: auto;
  height: 40px;
  max-width: none;
  min-width: 0;
  object-fit: contain;
  object-position: left center;
}

/* Hide Webflow template promo bar */
.template-buttons-wrapper,
.template-promotional-button-wrap,
.grab-now-button,
.template-badge,
.w-buy-template,
[class*="buy-template"],
a[href*="waidastudio.com"] {
  display: none !important;
}

/* Fifth template team tab (removed in content) */
.team-name-list._05,
.link-icon-wrap._05,
.team-sub-heading._05,
.tag-large._05 {
  display: none !important;
}

/* Services index — extra TrueCraft cards follow template stack */
.service-right .service-list + .service-list {
  margin-top: 0;
}

/* Services index — photo cards + white service titles */
.service-right .service-list:not(.bg-white) .h5,
.service-right .service-list:not(.bg-white) .h5 a {
  color: #fff;
}

.service-right .service-list.bg-white .h5 a {
  color: inherit;
  text-decoration: none;
}

.service-right .service-list.bg-white .h5 a:hover {
  color: var(--colors--colors-primary, #da2114);
}

.service-right .service-list:not(.bg-white) .h5 a {
  color: inherit;
  text-decoration: none;
}

.service-right .service-list:not(.bg-white) .h5 a:hover {
  color: var(--colors--colors-soft-red, #ea837b);
}

.service-right .service-list-middle {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 2px;
  display: block;
}

.service-right .service-list-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.96) contrast(1.02);
}

/* Sticky stack — cards 5 & 6 */
.service-list._05 {
  top: 180px;
}

.service-list.bg-white._06 {
  top: 220px;
}

/* Hero / about / marquee — soft editorial cohesion (minimal grading in source) */
.hero-image .fit-cover,
.about-v1-right-wrap .fit-cover,
.about-v1-left-wrap .fit-cover,
.background-scroll .fit-cover {
  filter: saturate(0.97) contrast(1.02);
}

/* Homepage service accordion */
.service-v1-image {
  aspect-ratio: 1920 / 740;
  width: 100%;
}

/* Native scroll wrapper — sticky service panels need visible overflow */
html.tc-native-scroll #smooth-wrapper {
  position: relative;
  height: auto;
  overflow: visible;
}

html.tc-native-scroll #smooth-content {
  overflow: visible;
  will-change: auto;
}

.service-v1-bottom,
.service-v1-list-wrap,
.service-v1-list {
  overflow: visible;
}

@media screen and (min-width: 992px) {
  .service-v1-list._01,
  .service-v1-list._02,
  .service-v1-list._03,
  .service-v1-list._04 {
    position: sticky;
    top: 100px;
  }
}

.service-v1-image .fit-cover.image-content-parallax {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.96) contrast(1.02);
}

.service-v1-heading-wrap .h5 a {
  color: inherit;
  text-decoration: none;
}

.service-v1-heading-wrap .h5 a:hover {
  color: var(--colors--colors-soft-red, #da2114);
}

/* Homepage projects grid — template image proportions */
.projects-v1 .project-image-wrap {
  aspect-ratio: 958 / 862;
  width: 100%;
}

.projects-v1 .project-image-wrap--wide {
  aspect-ratio: 1918 / 862;
}

.projects-v1 .project-image-wrap .fit-cover.image-content-parallax {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.95) contrast(1.02);
}

/* Testimonials — client photos fill template frame */
.testimonial .client-image .fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Blog listing — card images were rendering at intrinsic height */
.blog-image {
  aspect-ratio: 16 / 10;
  width: 100%;
  height: auto !important;
  max-height: clamp(220px, 30vw, 380px);
  min-height: 0;
  overflow: hidden;
}

.blog-image .fit-cover.image-content-parallax {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 479px) {
  .blog-image {
    aspect-ratio: auto;
    height: 200px !important;
  }
}

/* Schedule booking styles → css/schedule.css */

/* TrueCraft Brand Logo Display Rules (Resolves side-by-side display bug) */

/* 1. Default: Show dark logo and hide light/white logo (for standard light backgrounds) */
.tc-logo--light {
  display: none !important;
}
.tc-logo--dark {
  display: block !important;
}

/* 2. On Dark Hero Sections: Show light/white logo and hide dark logo */
.home-hero .tc-logo--light,
.hero-v1 .tc-logo--light,
.hero-v2 .tc-logo--light,
.hero-v3 .tc-logo--light,
.about-hero .tc-logo--light,
body:has(.home-hero) .brand .tc-logo--light,
body:has(.about-hero) .brand .tc-logo--light,
body:has(.hero-v1) .brand .tc-logo--light,
body:has(.hero-v2) .brand .tc-logo--light,
body:has(.hero-v3) .brand .tc-logo--light {
  display: block !important;
}
.home-hero .tc-logo--dark,
.hero-v1 .tc-logo--dark,
.hero-v2 .tc-logo--dark,
.hero-v3 .tc-logo--dark,
.about-hero .tc-logo--dark,
body:has(.home-hero) .brand .tc-logo--dark,
body:has(.about-hero) .brand .tc-logo--dark,
body:has(.hero-v1) .brand .tc-logo--dark,
body:has(.hero-v2) .brand .tc-logo--dark,
body:has(.hero-v3) .brand .tc-logo--dark {
  display: none !important;
}

/* 3. In the Dropdown Mega Menu (Always dark background): Show light/white logo */
.dropdown-nav .tc-logo--light {
  display: block !important;
}
.dropdown-nav .tc-logo--dark {
  display: none !important;
}

/* 4. In the Footer (Always dark background): Show light/white logo */
.footer-logo .tc-logo--light,
.footer .tc-logo--light {
  display: block !important;
}
.footer-logo .tc-logo--dark,
.footer .tc-logo--dark {
  display: none !important;
}

/* 5. Logo container — wide enough for full wordmark (non-nav contexts) */
.brand:not(.w-nav-brand) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: min(360px, 46vw) !important;
  min-height: 40px !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

.nav-bar-block {
  align-items: center !important;
  min-height: 0 !important;
}

.nav-bar,
.nav-bar-block,
.nav-container {
  overflow: visible !important;
}

/* Header — vertical centering for logo + nav text */
.home-hero .nav-bar,
.hero-v1 .nav-bar,
.hero-v2 .nav-bar,
.hero-v3 .nav-bar,
.about-hero .nav-bar,
.nav-bar.w-nav {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.nav-bar.w-nav .nav-bar-block {
  display: flex !important;
  align-items: center !important;
  min-height: 56px;
  height: 56px;
}

.nav-bar.w-nav .nav-container {
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 56px;
  height: 56px;
}

.nav-bar.w-nav .brand {
  align-self: center !important;
}

.nav-bar.w-nav .div-block,
.nav-bar.w-nav .nav-menu-wrap,
.nav-bar.w-nav .mega-menu-button {
  align-items: center !important;
}

@media (min-width: 992px) {
  .nav-bar.w-nav .nab-link,
  .nav-bar.w-nav .nav-menu-wrap .paragraph-small,
  .nav-bar.w-nav .mega-menu-button .paragraph-small {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
    display: flex;
    align-items: center;
  }
}

.nav-bar.w-nav .nav-link-line {
  bottom: 0;
}

@media (max-width: 991px) {
  .brand .tc-logo,
  .aginceo-logo,
  .nav-icon-02 {
    height: 46px;
    max-width: none;
    min-width: 0;
  }

  .nav-bar.w-nav .brand.w-nav-brand,
  .nav-bar.w-nav .brand .tc-logo,
  .nav-bar.w-nav .brand .aginceo-logo {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }

  .brand:not(.w-nav-brand),
  .brand,
  .w-nav-brand.brand {
    max-width: min(400px, 58vw) !important;
    min-height: 46px !important;
    width: auto !important;
  }

  .nav-bar.w-nav {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .nav-bar.w-nav .nav-container,
  .nav-bar.w-nav .nav-bar-block {
    min-height: 46px;
    height: 46px;
  }
}

@media (max-width: 479px) {
  .brand .tc-logo,
  .aginceo-logo,
  .nav-icon-02 {
    height: 38px;
    max-width: none;
    min-width: 0;
  }

  .nav-bar.w-nav .brand.w-nav-brand,
  .nav-bar.w-nav .brand .tc-logo,
  .nav-bar.w-nav .brand .aginceo-logo {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  .brand:not(.w-nav-brand),
  .brand,
  .w-nav-brand.brand {
    max-width: min(320px, 64vw) !important;
    min-height: 38px !important;
    width: auto !important;
  }

  .nav-bar.w-nav {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .nav-bar.w-nav .nav-container,
  .nav-bar.w-nav .nav-bar-block {
    min-height: 38px;
    height: 38px;
  }
}

/* Ensure white logo stays visible on dark nav / hero surfaces */
.home-hero .brand .tc-logo--light,
.hero-v1 .brand .tc-logo--light,
.hero-v2 .brand .tc-logo--light,
.hero-v3 .brand .tc-logo--light,
.dropdown-nav .tc-logo--light,
.footer-logo .tc-logo--light,
.footer .tc-logo--light {
  opacity: 1 !important;
  filter: none !important;
}

/* ─── Glass fixed nav + scroll-direction reveal ─── */
.nav-bar.w-nav.tc-glass-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  z-index: 1000;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease;
  will-change: transform, opacity;
}

/* Over hero — stay fully clear so red does not tint the bar */
.nav-bar.w-nav.tc-glass-nav.is-in-hero {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.nav-bar.w-nav.tc-glass-nav.is-scrolled:not(.is-in-hero) {
  background: rgba(12, 12, 14, 0.88) !important;
  backdrop-filter: blur(18px) saturate(90%);
  -webkit-backdrop-filter: blur(18px) saturate(90%);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Hero nav links — white on red, not salmon pink */
body:has(.hero-v2) .nav-bar.w-nav .nab-link,
body:has(.hero-v2) .nav-bar.w-nav .nab-link .paragraph-small,
body:has(.hero-v1) .nav-bar.w-nav .nab-link,
body:has(.hero-v1) .nav-bar.w-nav .nab-link .paragraph-small,
body:has(.home-hero) .nav-bar.w-nav .nab-link,
body:has(.home-hero) .nav-bar.w-nav .nab-link .paragraph-small,
body:has(.hero-v3) .nav-bar.w-nav .nab-link,
body:has(.hero-v3) .nav-bar.w-nav .nab-link .paragraph-small,
body:has(.about-hero) .nav-bar.w-nav .nab-link,
body:has(.about-hero) .nav-bar.w-nav .nab-link .paragraph-small,
body:has(.hero-v2) .nav-bar.w-nav .mega-menu-button .paragraph-small,
body:has(.hero-v1) .nav-bar.w-nav .mega-menu-button .paragraph-small,
body:has(.home-hero) .nav-bar.w-nav .mega-menu-button .paragraph-small,
body:has(.hero-v3) .nav-bar.w-nav .mega-menu-button .paragraph-small {
  color: rgba(255, 255, 255, 0.92) !important;
}

body:has(.hero-v2) .nav-bar.w-nav .nab-link:hover,
body:has(.hero-v1) .nav-bar.w-nav .nab-link:hover,
body:has(.home-hero) .nav-bar.w-nav .nab-link:hover,
body:has(.hero-v3) .nav-bar.w-nav .nab-link:hover {
  color: #fff !important;
}

.nav-bar.w-nav.tc-glass-nav.is-nav-hidden:not(.is-menu-open) {
  transform: translateY(-105%);
  opacity: 0;
  pointer-events: none;
}

.nav-bar.w-nav.tc-glass-nav.is-menu-open,
.nav-bar.w-nav.tc-glass-nav.is-menu-open.is-nav-hidden {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Full-screen mega menu — fixed nav bar was shrinking this to header height */
/* Inner service pages — hero banner proportions */
.home-hero.home-hero--page .hero-image {
  width: 100%;
  max-width: 378px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.home-hero.home-hero--page .hero-image .fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.95) contrast(1.03);
}

/* Inner pages — scaled headline (home uses 130px stacked lines; inner pages need to fit) */
.home-hero.home-hero--page .home-hero-middle {
  margin-top: 0 !important;
  justify-content: center;
}

.home-hero.home-hero--page .heading-wrap {
  max-width: 100%;
}

.home-hero.home-hero--page .heading-wrap .h1 {
  white-space: normal;
  font-size: clamp(2rem, 2.8vw + 0.5rem, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media screen and (max-width: 991px) {
  .home-hero.home-hero--page .home-hero-middle {
    margin-top: 0 !important;
  }

  .home-hero.home-hero--page .heading-wrap .h1 {
    font-size: clamp(1.75rem, 5.5vw, 2.5rem);
    line-height: 1.12;
  }
}

@media screen and (max-width: 767px) {
  .home-hero.home-hero--page .heading-wrap .h1 {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
}

.nav-bar.w-nav.tc-glass-nav .mega-menu-block {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  z-index: 10001 !important;
}

.nav-bar.w-nav.tc-glass-nav .mega-menu-content-wrap {
  min-height: 100vh !important;
  height: 100% !important;
}

@media (prefers-reduced-motion: reduce) {
  .nav-bar.w-nav.tc-glass-nav {
    transition: none;
  }
}