.toile3d-nav a {
  position: relative;
}
.toile3d-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: #513d2a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.toile3d-nav a:hover::after {
  transform: scaleX(1);
}

/* Open hamburger nav dropdown on hover, in addition to click */
.toile3d-nav .e-n-menu:has(.e-n-menu-toggle:hover) > .e-n-menu-wrapper,
.toile3d-nav .e-n-menu:has(.e-n-menu-wrapper:hover) > .e-n-menu-wrapper {
  display: flex !important;
}

/* ===== Cutting-edge aesthetic pass ===== */

/* Fluid typography */
h1 {
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3.75rem) !important;
  line-height: 1.15 !important;
}
.elementor-heading-title {
  font-size: clamp(1.4rem, 1rem + 2vw, 2.75rem) !important;
  line-height: 1.2 !important;
}
.elementor-icon-box-title {
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem) !important;
}

/* Subtle site-wide grain texture for a tactile, editorial feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Buttons: subtle lift + shadow on hover for a premium feel */
.elementor-button {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(2, 9, 15, 0.18);
}

/* Portfolio / work cards: hover-zoom image + line accent */
.qv-card {
  overflow: hidden;
  position: relative;
}
.qv-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #513d2a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 2;
}
.qv-card:hover::before {
  transform: scaleX(1);
}
.qv-card .elementor-widget-image img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.qv-card:hover .elementor-widget-image img {
  transform: scale(1.06);
}

/* Scroll-driven entrance reveal (progressive enhancement, no JS) */
@supports (animation-timeline: view()) {
  .elementor-widget-heading,
  .qv-card,
  .elementor-widget-icon-box {
    animation: toile3d-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes toile3d-reveal {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}


/* ===== Homepage spacing fix: tighten gap between "Why 3D" icon row and
   the Featured Work carousel heading (was ~240px of dead space from the
   section's 100px top padding stacked on trailing icon-box space). ===== */
.elementor-element-2ade0d9 {
  padding-top: 40px !important;
}
@media (max-width: 767px) {
  .elementor-element-2ade0d9 {
    padding-top: 24px !important;
  }
}

/* ===== Featured Work card label fix: the "clamp()" fluid typography
   rule above was also inflating the .qv-card title-pill overlay text to
   ~44px. Shrink the pill + text, center the text, and move the pill to
   bottom-center of the card instead of top-left full-width. ===== */
.qv-card .elementor-widget-heading {
  opacity: 0.6 !important;
  display: inline-block !important;
  width: auto !important;
  max-width: calc(100% - 32px) !important;
  top: auto !important;
  left: 50% !important;
  bottom: 16px !important;
  transform: translateX(-50%) !important;
  padding: 6px 16px !important;
  text-align: center !important;
}
.qv-card .elementor-widget-heading .elementor-heading-title {
  font-size: 1.3rem !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

/* ===== Page transitions (crossfade) ===== */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: ease;
}
::view-transition-old(root) {
  animation-name: toile3d-fade-out;
}
::view-transition-new(root) {
  animation-name: toile3d-fade-in;
}
@keyframes toile3d-fade-out {
  to { opacity: 0; }
}
@keyframes toile3d-fade-in {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}