/* qa-a-hero-nav — QA overrides: DARK hero rebuild.
   Structure, data-tl and data-flip attributes and the fixed sidebar
   (.navigation) are left untouched; this file restyles the hero viewport,
   swaps in the dark decorative background photo, and rebuilds the hero
   content into a normal-flow flex column so it never distorts / collides
   with the diagonal accent in the artwork. */

/* Remove the mascot photography entirely (desktop + mobile picture). */
.profile-img-wrap,
.mobile-hero-image-wrap {
  display: none !important;
}

/* Remove the "purple W" Webflow-icon stat cards (10+ years / 25+ projects). */
.hero-cards-left {
  display: none !important;
}

/* ============================================================
   0. DARK DECORATIVE BACKGROUND
   Sits on <body> itself (unpositioned) so it paints behind BOTH the fixed
   sidebar (.navigation) and the hero content: at rest .navigation has
   z-index 2 and .main-wrap (which holds .hero) has z-index 20, so anything
   painted on .hero/.hero-sticky itself would sit ABOVE the sidebar and
   hide it. The body's own background-color (#d5cfbe, from the base sheet)
   is left untouched and still shows for the rest of the page below the
   hero — this rule only swaps the *image* layer, sized to exactly one
   viewport tall via background-attachment:fixed (which measures cover
   against the viewport, not the full document), so the photo is never
   stretched/distorted and never bleeds into sections below the fold.
   ============================================================ */
/* Background lives on the sticky hero viewport itself (so it scrolls away
   with the hero and never bleeds into later sections). The fixed sidebar is
   raised above the hero so the nav/logo/CTAs stay visible on top of it; the
   template only kept it underneath so the old mascot could overlap it. */
/* The template's own GSAP ScrollTrigger animates .navigation's z-index
   2 -> 100 AND .main-wrap's z-index 20 -> 99 together, off the same
   trigger (53% into the hero) — so past that point .main-wrap (99) still
   out-ranks a flat "30 !important" override once the hero has scrolled
   by, and anything inside .main-wrap (e.g. the dark Projects section)
   paints over the fixed sidebar. Pin .navigation above BOTH of the
   template's own end-states (100 desktop) so it always wins, at every
   scroll position, without touching .main-wrap's own animation. */
.navigation { z-index: 150 !important; }
.hero-sticky {
  background-color: #0b0b0d;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.6) 0, rgba(0,0,0,0) clamp(110px, 16vh, 170px)),
    url("../img/hero/hero-dark.webp");
  background-repeat: no-repeat;
  background-position: center top, right center;
  background-size: 100% 100%, cover;
}
@media screen and (min-width: 768px) and (max-width: 1100px) {
  .hero-sticky { background-position: center top, 68% center; }
}
@media screen and (max-width: 767px) {
  .hero-sticky {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.55) 0, rgba(0,0,0,0) 120px),
      url("../img/hero/hero-dark-960.webp");
    background-position: center top, 72% 28%;
  }
}
@media screen and (min-aspect-ratio: 2/1) and (max-height: 720px) {
  .hero-sticky {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.6) 0, rgba(0,0,0,0) 140px),
      url("../img/hero/hero-dark-wide.webp");
  }
}

/* WEBX wordmark: behaves exactly like the template's NESH wordmark. The
   preload SVG (script.js Preloader) slides in from the right, letters rise,
   then it moves to the hero ghost position (above the headline) and hands
   off to the real .navigation .nesh-logo, which the template's GhostEngine
   FLIPs from the ghost into the sidebar chip on scroll. No overrides here. */

/* Keep the dark hero pinned (full viewport) for the whole WEBX flight, like
   the template's NESH hero: the sticky travels (hero content box - 100vh),
   so shrink the hero's bottom padding until that equals the flight length
   (1200px at 900px viewport height = 133.3vh). */
@media screen and (min-width: 768px) {
  .hero { padding-bottom: 66.667vh !important; }
}

/* Hero WEBX ghost: sits in the content column directly above the headline,
   as wide as the first headline line ("Automation,"), which is
   --wx-webx-ratio x the headline font-size (ratio measured in-browser).
   Desktop: invisible (FLIP measurement only; the real .nesh-logo is what you
   see). Mobile has no FLIP, so the ghost itself is shown. */
.hero { --wx-hfs: clamp(2.6rem, 1.2rem + 3.1vw, 5.2rem); --wx-webx-ratio: 5.95; }
.hero-container > .nesh-logo-ghost-wrap {
  position: relative;
  display: block;
  flex: none;
  width: calc(var(--wx-hfs) * var(--wx-webx-ratio));
  color: #ffff23;
  margin-bottom: calc(var(--wx-hfs) * 0.25 - clamp(14px, 1.6vw, 26px));
  pointer-events: none;
}
.hero-container > .nesh-logo-ghost-wrap .nesh-logo-ghost { display: block; width: 100%; height: auto; }
.hero-container > .nesh-logo-ghost-wrap .nesh-copyright-icon-ghost { width: 5.3%; inset: 0 -5.5% auto auto; }
@media screen and (min-width: 768px) {
  .hero-container > .nesh-logo-ghost-wrap .nesh-logo-ghost,
  .hero-container > .nesh-logo-ghost-wrap .nesh-copyright-icon-ghost { opacity: 0; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .hero { --wx-hfs: clamp(2.4rem, 4.6vw + 1rem, 3.6rem); }
}
@media screen and (max-width: 767px) {
  .hero { --wx-hfs: clamp(2.6rem, 11vw, 3.2rem); }
}

/* Left-align the (hidden-while-at-hero) ghost logo instead of centering
   it — harmless since it stays invisible while html.at-hero is set. */
.nesh-logo-preload {
  align-items: flex-start !important;
}

/* Decorative static blue logo + "Webnixian" wordmark text shown in the
   hero's top nav row (desktop/tablet). It is NOT the FLIP'd element, so
   it simply scrolls away with the hero; the mobile fixed header gets its
   own blue logo via qa-c-bottom.css instead of this one. */
.hero-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6em;
  pointer-events: none;
}
.hero-nav-brand-icon {
  width: clamp(22px, 1.7vw, 30px);
  height: auto;
  display: block;
}
.hero-nav-brand-text {
  color: #fff;
  font-weight: 700;
  font-size: clamp(0.95rem, 0.7rem + 0.5vw, 1.15rem);
  letter-spacing: 0.01em;
}
@media screen and (max-width: 767px) {
  .hero-nav-brand { display: none !important; }
}

/* Top nav row: logo+wordmark and HOME/ABOUT US/PROJECTS grouped on the
   left, WHAT YOU GET/SERVICES/TESTIMONIALS/FAQ pushed to the far right —
   a single row spanning the hero's top edge. */
.hero-navigation-wrap {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: clamp(24px, 3.2vw, 56px);
  margin: 0 !important;
  padding: clamp(18px, 2.2vw, 32px) clamp(24px, 4.6vw, 64px);
}
.hero-links-ghost-wrapper {
  gap: clamp(14px, 1.6vw, 28px) !important;
}
.hero-links-ghost-wrapper.is-hero-right-nav-item {
  margin-left: auto !important;
}

/* Nav links row: white, 13-15px. (.hero-link-ghost stays transparent —
   it is only a FLIP measurement reference, never meant to be visible.) */
.hero-navigation-link {
  font-size: clamp(0.8rem, 0.55rem + 0.45vw, 0.95rem) !important;
}

/* ============================================================
   1. HERO VIEWPORT: min-height:100svh sticky panel, content anchored
      left so it never reaches the diagonal / building on the right.
   ============================================================ */
/* .hero-sticky is now a column: the top nav row, then a flexible area
   that vertically centers .hero-container. .hero-navigation-wrap and
   .hero-container are both in normal flow (position:relative), stacked
   top-to-bottom instead of being squeezed side-by-side. */
.hero-sticky {
  display: flex !important;
  flex-flow: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 100svh !important;
  padding-bottom: 0 !important;
}

.hero-container {
  position: relative !important;
  z-index: 10;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-flow: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: min(640px, 52vw) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 0 clamp(24px, 4.6vw, 92px) !important;
  gap: clamp(14px, 1.6vw, 26px) !important;
  inset: auto !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
}

/* Eyebrow label above the headline. */
.hero-left-text {
  display: none !important;
  position: static !important;
  width: auto !important;
  color: #a9a9a9 !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(0.7rem, 0.6rem + 0.25vw, 0.85rem) !important;
  font-weight: 600;
  margin: 0 !important;
  top: auto !important; left: auto !important;
}

/* Headline accent word, matching the brand yellow. */
.hero-heading-accent { color: #ffff23 !important; }

/* Decorative bottom-right vertical label list over the building artwork. */
.hero-corner-list {
  position: absolute;
  right: clamp(24px, 4vw, 64px);
  bottom: clamp(28px, 5vw, 72px);
  display: flex;
  flex-flow: column;
  gap: 0.5em;
  padding-left: 0.9em;
  border-left: 2px solid #ffff23;
  pointer-events: none;
  z-index: 4;
}
.hero-corner-list span {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(0.65rem, 0.55rem + 0.25vw, 0.8rem);
  font-weight: 600;
}
@media screen and (max-width: 991px) {
  .hero-corner-list { display: none !important; }
}

.hero-content-layout {
  position: static !important;
  display: flex !important;
  flex-flow: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  gap: clamp(16px, 1.7vw, 26px) !important;
  pointer-events: auto !important;
  inset: auto !important;
  bottom: auto !important;
}

/* Headline: white, bold, fluid clamp per the brief's px targets. */
.hero-heading {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: var(--wx-hfs) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

/* Supporting copy: light grey, readable over the dark art. */
.hero-right-text {
  display: none !important;
  position: static !important;
  color: #cfcfcf !important;
  font-size: clamp(0.95rem, 0.75rem + 0.65vw, 1.25rem) !important;
  line-height: 1.55 !important;
  width: 100% !important;
  max-width: 46ch !important;
  top: auto !important; left: auto !important; margin: 0 !important;
  text-shadow: none !important;
}

/* GSAP hides the CTAs until a scroll trigger fires; keep them visible from
   the start so the "Let's Build" / "About Us" buttons are never lost.
   Desktop: the fixed sidebar's .nav-button / .nav-button-secondary are the
   visible CTAs (they sit on the hero ghost positions, then FLIP into the
   sidebar), so the hero copies stay hidden there. Mobile has no FLIP, so
   the hero CTAs are shown directly. */
@media screen and (max-width: 767px) {
  .hero-buttons-wrap,
  .hero-cta-button,
  .hero-button {
    visibility: visible !important;
    opacity: 1 !important;
  }
}
@media screen and (min-width: 768px) {
  .nav-button-secondary {
    background-color: transparent !important;
    border: 1.5px solid #fff !important;
    color: #fff !important;
  }
}

.hero-buttons-wrap {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* CTAs: yellow "Let's Build" + white-outline "About Us", no shadows/purple. */
.hero-cta-button {
  opacity: 1 !important;
  color: #0d0d0d;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.hero-cta-button:hover {
  background-color: #f5f04a;
  transform: translateY(-1px);
}
.hero-cta-button .cta-arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}
.hero-cta-button:hover .cta-arrow {
  transform: translateX(3px);
}
.hero-button {
  background-color: transparent;
  border: 1.5px solid #fff;
  color: #fff;
  transition: background-color 0.15s ease;
}
.hero-button:hover {
  background-color: rgba(255, 255, 255, 0.12);
}
@media screen and (max-width: 767px) {
  .hero-buttons-wrap {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}

/* Feature list: white line icons + text on the dark art, in normal flow
   beneath the CTAs. A row on desktop, 2x2 on tablet + mobile. */
.hero-cards-wrap {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  inset: auto !important;
  transform: none !important;
}
.hero-card-3 {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-flow: row wrap !important;
  gap: clamp(18px, 2.2vw, 36px) !important;
}
.hero-card-3-item p {
  color: #fff;
  font-weight: 500;
  font-size: clamp(0.75rem, 0.62rem + 0.35vw, 0.9rem);
}
.hero-card-3-icon {
  color: #fff !important;
}
@media screen and (max-width: 991px) {
  .hero-card-3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px !important;
  }
}

/* Mobile: hide the ghost hero-nav links (Services/Testimonials/FAQ) — they
   sit invisible with a live hit box once the mobile menu takes over. */
@media screen and (max-width: 767px) {
  .hero-navigation-wrap {
    display: none !important;
    pointer-events: none !important;
  }
}

/* Respect reduced-motion for the entrance/hover easing above. */
@media (prefers-reduced-motion: reduce) {
  .hero-cta-button,
  .hero-cta-button .cta-arrow,
  .hero-button {
    transition: none !important;
  }
}

/* ---- Responsive content column width / stacking ---- */
@media screen and (min-width: 1600px) {
  .hero-container { width: min(760px, 50vw) !important; }
}
@media screen and (max-width: 1365px) and (min-width: 992px) {
  .hero-container { width: min(560px, 56vw) !important; }
}
@media screen and (max-width: 991px) and (min-width: 768px) {
  .hero-container {
    width: 100% !important;
    max-width: 640px !important;
    padding: 0 8vw !important;
  }
  .hero-heading { font-size: var(--wx-hfs) !important; }
}
@media screen and (max-width: 767px) {
  .hero-container {
    width: 100% !important;
    padding: 0 22px !important;
  }
  .hero-sticky { padding-top: 120px !important; align-items: flex-start !important; }
  .hero-heading { font-size: var(--wx-hfs) !important; }
  .hero-right-text { font-size: 15px !important; }
}

.nav-button-secondary, .hero-button { white-space: nowrap; }
.hero-button { overflow: hidden; }

/* Nav row on top (main-session pass): the fixed sidebar links FLIP from
   these ghost positions, so pinning the ghost row to the top of the hero
   moves the visible nav there. The WEBX ghost above it is hidden anyway. */
@media screen and (min-width: 768px) {
  .hero-navigation-wrap {
    position: absolute !important;
    top: clamp(18px, 3.2vh, 36px);
    left: 0;
    right: 0;
    margin: 0 !important;
    z-index: 3;
  }
}

/* Hero nav text: always white (the active link otherwise renders black). */
@media screen and (min-width: 768px) {
  html.at-hero .hero-navigation-link,
  html.at-hero .hero-navigation-link * { color: #fff !important; }
}

/* ---- Responsive pass (main session) ---- */
/* Nav: ghost and real link share one size so the FLIP scale stays 1:1
   (prevents the squashed "ABOUT US"), and never wrap. */
.hero-navigation-link, .hero-link-ghost {
  font-size: clamp(0.72rem, 0.5rem + 0.4vw, 0.95rem) !important;
  white-space: nowrap !important;
}
@media screen and (min-width: 1024px) {
  .hero-heading { white-space: nowrap; }
}
/* Tablet + mobile: dark field behind the copy, building cropped into the
   lower-right as an accent instead of sitting behind the text. */
@media screen and (max-width: 991px) {
  .hero-sticky {
    background-image:
      linear-gradient(180deg, #0b0b0d 0%, #0b0b0d 52%, rgba(11,11,13,.55) 72%, rgba(11,11,13,0) 100%),
      url("../img/hero/hero-dark.webp") !important;
    background-size: 100% 100%, auto 58% !important;
    background-position: center top, right bottom !important;
    background-repeat: no-repeat !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .hero-links-ghost-wrapper { gap: 14px !important; }
}
@media screen and (max-width: 767px) {
  .hero-sticky {
    background-image:
      linear-gradient(180deg, #0b0b0d 0%, #0b0b0d 58%, rgba(11,11,13,.5) 76%, rgba(11,11,13,0) 100%),
      url("../img/hero/hero-dark-960.webp") !important;
    background-size: 100% 100%, auto 46% !important;
    padding-top: 104px !important;
  }
  /* Header over the dark hero: no cream bar, no yellow chip behind the blue logo. */
  html.at-hero .navigation { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.at-hero .nav-logo { background: transparent !important; }
}
@media screen and (max-width: 991px) {
  .hero-container { justify-content: flex-start !important; margin-top: 0 !important; flex: 0 0 auto !important; }
  .hero-sticky { justify-content: flex-start !important; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .hero-sticky { padding-top: 150px !important; }
  .hero-links-ghost-wrapper:not(.is-hero-right-nav-item) { margin-left: 18px !important; }
}
@media screen and (max-width: 767px) {
  .hero-buttons-wrap { flex-direction: row !important; gap: 10px !important; }
  .hero-cta-button, .hero-button {
    flex: 1 1 0 !important; height: 48px !important; min-height: 48px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 15px !important; padding: 0 12px !important;
  }
  .hero-cta-button *, .hero-button * { font-size: 15px !important; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .hero-navigation-link, .hero-link-ghost { font-size: 10.5px !important; letter-spacing: 0 !important; }
  .hero-links-ghost-wrapper { gap: 10px !important; }
  .hero-navigation-sep { display: none !important; }
  .hero-navigation-wrap { padding-right: 28px !important; }
}

/* Feature row: thin line icons + slim dividers (owner reference). */
.hero-card-3-icon { width: 22px !important; height: 22px !important; color: #fff !important; flex: none; }
.hero-card-3-icon * { fill: none !important; stroke: currentColor !important; }
@media screen and (min-width: 992px) {
  .hero-card-3 { gap: 0 !important; }
  .hero-card-3-item { padding: 0 clamp(14px, 1.4vw, 22px); }
  .hero-card-3-item:not([style*="display:none"]) ~ .hero-card-3-item { border-left: 1px solid rgba(255,255,255,.28); }
  .hero-card-3-item:first-child:not([style*="display:none"]), .hero-card-3-item[style*="display:none"] + .hero-card-3-item { padding-left: 0; border-left: 0; }
}

/* ================================================================
   HERO MOTION (main session). CSS-only so it layers cleanly on top of
   the template's GSAP intro; uses the independent `translate` property
   for content so it never fights GSAP's inline `transform`.
   ================================================================ */
/* Background on its own layer so it can ease in and drift. */
.hero-sticky { isolation: isolate; overflow: hidden; background-image: none !important; }
.hero-sticky::before,
.hero-sticky::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-sticky::before {
  background-color: #0b0b0d;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.6) 0, rgba(0,0,0,0) clamp(110px, 16vh, 170px)),
    url("../img/hero/hero-dark.webp");
  background-repeat: no-repeat;
  background-position: center top, right center;
  background-size: 100% 100%, cover;
  transform-origin: 70% 50%;
  animation: wxBgIn 1.6s cubic-bezier(.2,.7,.2,1) both, wxBgDrift 24s ease-in-out 1.6s infinite alternate;
}
@media screen and (min-width: 992px) and (max-width: 1100px) {
  .hero-sticky::before { background-position: center top, 68% center; }
}
@media screen and (min-aspect-ratio: 2/1) and (max-height: 720px) {
  .hero-sticky::before { background-image: linear-gradient(180deg, rgba(0,0,0,.6) 0, rgba(0,0,0,0) 140px), url("../img/hero/hero-dark-wide.webp"); }
}
@media screen and (max-width: 991px) {
  .hero-sticky::before {
    background-image:
      linear-gradient(180deg, #0b0b0d 0%, #0b0b0d 52%, rgba(11,11,13,.55) 72%, rgba(11,11,13,0) 100%),
      url("../img/hero/hero-dark.webp");
    background-size: 100% 100%, auto 58%;
    background-position: center top, right bottom;
    transform-origin: 80% 100%;
  }
}
@media screen and (max-width: 767px) {
  .hero-sticky::before {
    background-image:
      linear-gradient(180deg, #0b0b0d 0%, #0b0b0d 58%, rgba(11,11,13,.5) 76%, rgba(11,11,13,0) 100%),
      url("../img/hero/hero-dark-960.webp");
    background-size: 100% 100%, auto 46%;
  }
}
/* One-time light sweep along the yellow diagonal. */
.hero-sticky::after {
  background: linear-gradient(115deg, transparent 44%, rgba(255,255,200,.22) 50%, transparent 56%) no-repeat;
  background-size: 300% 100%;
  mix-blend-mode: screen;
  animation: wxSweep 1.9s cubic-bezier(.3,.6,.2,1) .9s both;
}
@keyframes wxBgIn { from { opacity: 0; transform: scale(1.08); filter: brightness(.55); } to { opacity: 1; transform: scale(1); filter: brightness(1); } }
@keyframes wxBgDrift { from { transform: scale(1) translate(0,0); } to { transform: scale(1.035) translate(-.6%, -.4%); } }
@keyframes wxSweep { 0% { opacity: 0; background-position: 110% 0; } 25% { opacity: 1; } 100% { opacity: 0; background-position: -10% 0; } }

/* Brand mark drops in first. */
.hero-nav-brand { animation: wxDown .8s cubic-bezier(.2,.7,.2,1) .1s both; }
@keyframes wxDown { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }

/* "Precisely." gets a single warm glow once the headline has landed. */
.hero-heading-accent { animation: wxGlow 1.8s ease-out 1.35s both; }
@keyframes wxGlow { 0% { text-shadow: 0 0 0 rgba(255,255,35,0); } 35% { text-shadow: 0 0 28px rgba(255,255,35,.55); } 100% { text-shadow: 0 0 0 rgba(255,255,35,0); } }

/* Features rise in one by one; icons react on hover. */
.hero-card-3-item:not([style*="display:none"]) { animation: wxUp .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-card-3-item:nth-child(2) { animation-delay: 1.35s; }
.hero-card-3-item:nth-child(3) { animation-delay: 1.45s; }
.hero-card-3-item:nth-child(4) { animation-delay: 1.55s; }
.hero-card-3-item:nth-child(5) { animation-delay: 1.65s; }
@keyframes wxUp { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.hero-card-3-icon { transition: color .25s ease, rotate .35s cubic-bezier(.2,.7,.2,1), scale .35s cubic-bezier(.2,.7,.2,1); }
.hero-card-3-item:hover .hero-card-3-icon { color: #ffff23 !important; rotate: -8deg; scale: 1.12; }

/* Corner list: the yellow rule draws down, then the words slide in. */
.hero-corner-list { border-left: 0 !important; }
.hero-corner-list::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #ffff23;
  transform-origin: top; animation: wxLine .9s cubic-bezier(.6,0,.2,1) 1.5s both;
}
.hero-corner-list span { animation: wxLeft .6s cubic-bezier(.2,.7,.2,1) both; }
.hero-corner-list span:nth-child(1) { animation-delay: 1.9s; }
.hero-corner-list span:nth-child(2) { animation-delay: 2.0s; }
.hero-corner-list span:nth-child(3) { animation-delay: 2.1s; }
.hero-corner-list span:nth-child(4) { animation-delay: 2.2s; }
@keyframes wxLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wxLeft { from { opacity: 0; translate: 12px 0; } to { opacity: 1; translate: 0 0; } }

/* CTA micro-interactions (translate/scale props, so GSAP transforms are untouched). */
.nav-button, .nav-button-secondary, .hero-cta-button, .hero-button {
  transition: translate .25s cubic-bezier(.2,.7,.2,1), background-color .25s ease, box-shadow .25s ease;
}
.nav-button:hover, .hero-cta-button:hover { translate: 0 -2px; box-shadow: 0 10px 26px -12px rgba(255,255,35,.75); }
.nav-button-secondary:hover, .hero-button:hover { translate: 0 -2px; background-color: rgba(255,255,255,.08) !important; }

/* Mobile has no GSAP intro (the template skips it < 768px): stage it here. */
@media screen and (max-width: 767px) {
  .hero-left-text    { animation: wxUp .7s cubic-bezier(.2,.7,.2,1) .15s both; }
  .hero-heading      { animation: wxUp .8s cubic-bezier(.2,.7,.2,1) .25s both; }
  .hero-right-text   { animation: wxUp .7s cubic-bezier(.2,.7,.2,1) .45s both; }
  .hero-buttons-wrap { animation: wxUp .7s cubic-bezier(.2,.7,.2,1) .6s both; }
  .hero-card-3-item:nth-child(2) { animation-delay: .75s; }
  .hero-card-3-item:nth-child(3) { animation-delay: .82s; }
  .hero-card-3-item:nth-child(4) { animation-delay: .89s; }
  .hero-card-3-item:nth-child(5) { animation-delay: .96s; }
  .hero-heading-accent { animation-delay: 1s; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sticky::before, .hero-sticky::after, .hero-nav-brand, .hero-heading-accent,
  .hero-card-3-item, .hero-corner-list::before, .hero-corner-list span,
  .hero-left-text, .hero-heading, .hero-right-text, .hero-buttons-wrap { animation: none !important; }
  .hero-sticky::after { opacity: 0; }
}

/* Hold the hero motion (at its start frame) until fonts are ready, so the
   intro plays when the page is actually visible. No JS → plays normally. */
html.wx-js:not(.wx-ready) .hero-sticky::before,
html.wx-js:not(.wx-ready) .hero-sticky::after,
html.wx-js:not(.wx-ready) .hero-nav-brand,
html.wx-js:not(.wx-ready) .hero-heading-accent,
html.wx-js:not(.wx-ready) .hero-card-3-item,
html.wx-js:not(.wx-ready) .hero-corner-list::before,
html.wx-js:not(.wx-ready) .hero-corner-list span,
html.wx-js:not(.wx-ready) .hero-left-text,
html.wx-js:not(.wx-ready) .hero-heading,
html.wx-js:not(.wx-ready) .hero-right-text,
html.wx-js:not(.wx-ready) .hero-buttons-wrap { animation-play-state: paused !important; }

/* Sidebar stats cards follow the same scroll progress (they used to flash
   dark-on-dark over the hero before the sidebar formed). */
@media screen and (min-width: 768px) {
  .navigation .nav-stats-wrap { opacity: var(--wx-p, 0); transition: opacity .15s linear; }
}

/* ================================================================
   HERO OUT-TRANSITION: mirror of the WEBX wordmark's materialise-in.
   As --hero-p (0 -> 1, set on <html> by the scroll script as soon as the
   user starts scrolling out of the hero) rises, the hero's static content
   blurs/fades OUT while WEBX sharpens/fades IN and flies into the sidebar,
   so the handoff reads as one motion. --hero-p runs on its own timing
   (independent of --wx-p, which is now delayed to sync WEBX with the
   sidebar panels' own reveal) so the content still starts leaving the
   moment scroll begins.
   --hero-out runs 1.6x --hero-p (clamped to 1) so the content leads the
   WEBX slightly instead of finishing exactly together.
   Only filter/opacity are touched (never animation/transform/translate)
   so this layers cleanly on top of the GSAP FLIP + the wxUp/wxLeft/etc.
   keyframes above. Opacity is set on the PARENT wrappers rather than the
   elements the "both"-fill keyframes above animate directly, so the
   scroll-driven fade doesn't fight their own opacity end-states. */
.hero { --hero-out: clamp(0, calc(var(--hero-p, 0) * 1.6), 1); }

.hero-left-text,
.hero-heading,
.hero-right-text,
.hero-buttons-wrap,
.hero-card-3,
.hero-corner-list {
  filter: blur(calc(var(--hero-out, 0) * 12px));
  will-change: filter, opacity;
}

.hero-container,
.hero-cards-wrap,
.hero-corner-list {
  opacity: calc(1 - var(--hero-out, 0) * 1.1);
  will-change: filter, opacity;
}

/* Background layer fades/darkens on the same (un-accelerated) --wx-p so it
   stays in lockstep with the WEBX materialise timing. animation-fill-mode
   is downgraded from the "both" set by the wxBgIn/wxBgDrift shorthand above
   to "backwards" so the finished intro animation stops pinning filter and
   this scroll-driven value takes over once it ends (~1.6s in). */
.hero-sticky::before {
  filter: blur(calc(var(--wx-p, 0) * 8px)) brightness(calc(1 - var(--wx-p, 0) * 0.4));
  animation-fill-mode: backwards;
  will-change: filter, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .hero-left-text,
  .hero-heading,
  .hero-right-text,
  .hero-buttons-wrap,
  .hero-card-3,
  .hero-corner-list,
  .hero-sticky::before {
    filter: none !important;
  }
}

/* Nav-link / CTA FLIP flight: fade + blur the elements mid-flight (between
   the hero and the sidebar), so they don't hard-snap between positions.
   --wx-mid runs 0 -> 1 -> 0 (peaking at the halfway point of --wx-p) via the
   scroll script in index.html. Desktop only, matching the FLIP itself. */
@media screen and (min-width: 768px) {
  .navigation .hero-navigation-link,
  .navigation .nav-button,
  .navigation .nav-button-secondary {
    opacity: calc(1 - var(--wx-mid, 0) * 0.9);
    filter: blur(calc(var(--wx-mid, 0) * 6px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .navigation .hero-navigation-link,
  .navigation .nav-button,
  .navigation .nav-button-secondary {
    filter: none !important;
  }
}

/* Fix: WEBX flying into the sidebar crossed the static "Webnixian" hero brand
   (820-1024px). Fade the brand out quickly as soon as the hero starts leaving
   (before WEBX's flight begins). fill-mode "backwards" so the finished intro
   keyframes no longer pin opacity. */
@media screen and (min-width: 768px) {
  .hero-nav-brand {
    animation-fill-mode: backwards;
    opacity: clamp(0, calc(1 - var(--hero-p, 0) * 6), 1);
  }
}

/* Fix: at tablet/laptop widths the flying nav links crossed the still
   readable headline and WEBX itself (links start flying at ~0.3vh, before
   --hero-p starts at 0.5vh). A root scroll-driven --hero-early (0 -> 1 over
   0.2vh..0.45vh) feeds --hero-out (<=1100px) so the headline is already
   blurred out, and fades the links themselves (>=768px) so they don't cross
   WEBX or the headline mid-flight; they fade back in as --wx-p brings them
   into the sidebar. Browsers without scroll-timeline keep the default
   behaviour (--hero-early stays 0). Inline GSAP opacity => !important. */
@property --hero-early { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes hero-early { to { --hero-early: 1; } }
@media screen and (min-width: 768px) {
  @supports (animation-timeline: scroll()) {
    html {
      animation: hero-early linear both;
      animation-timeline: scroll(root);
      animation-range: 20vh 45vh;
    }
    .navigation .hero-navigation-link {
      opacity: calc(1 - max(var(--wx-mid, 0) * 0.9, var(--hero-early, 0) * (1 - var(--wx-p, 0)))) !important;
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1100px) {
  @supports (animation-timeline: scroll()) {
    .hero { --hero-out: clamp(0, max(calc(var(--hero-p, 0) * 1.6), var(--hero-early, 0)), 1); }
  }
}

/* Hero tagline between the headline and the CTA row (was hidden). */
.hero-container .hero-right-text { display: block !important; color: #e6e6e6 !important; }

/* Hero CTAs are now real links (to #services / #about): keep the button look. */
a.hero-cta-button, a.hero-button { text-decoration: none; color: inherit; cursor: pointer; }

/* Feature row as one glass container: icon + bold title + 2-line subtitle,
   separated by thin dividers (4-up on desktop, 2x2 on tablet/phone). */
.hero-card-3 {
  display: flex !important;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: clamp(14px, 1.3vw, 22px) clamp(10px, 1vw, 16px) !important;
  background: rgba(18, 18, 20, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: clamp(12px, 1vw, 18px);
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}
.hero-card-3-item:not([style*="display:none"]) { display: flex !important; align-items: center; gap: clamp(10px, 0.9vw, 14px) !important; text-align: left; white-space: nowrap; }
.hero-card-3 { flex-wrap: nowrap !important; }
@media screen and (min-width: 992px) { .hero-card-3 { width: max-content !important; max-width: none !important; } }
.hero-card-3-item .hero-card-3-icon { width: clamp(24px, 2vw, 32px) !important; height: clamp(24px, 2vw, 32px) !important; }
.hero-card-3-text { display: flex; flex-direction: column; gap: 3px; }
.hero-card-3-text p { margin: 0 !important; }
.hero-card-3-item .hero-card-3-title { color: #fff; font-weight: 700; font-size: clamp(0.85rem, 0.6rem + 0.35vw, 1.05rem) !important; line-height: 1.2; }
.hero-card-3-item .hero-card-3-sub { color: rgba(255, 255, 255, 0.62); font-size: clamp(0.72rem, 0.55rem + 0.25vw, 0.9rem) !important; line-height: 1.3; }
@media screen and (min-width: 992px) {
  .hero-card-3-item { padding: 0 clamp(16px, 1.8vw, 30px) !important; }
  .hero-card-3-item:first-child:not([style*="display:none"]),
  .hero-card-3-item[style*="display:none"] + .hero-card-3-item { padding-left: clamp(8px, 0.8vw, 14px) !important; }
}
@media screen and (max-width: 991px) {
  .hero-card-3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px !important;
    width: 100%;
  }
  .hero-card-3-item { border-left: 0 !important; padding: 0 !important; }
  .hero-card-3-item .hero-card-3-icon { width: 24px !important; height: 24px !important; }
  .hero-card-3-item .hero-card-3-title { font-size: 14px !important; }
  .hero-card-3-item .hero-card-3-sub { font-size: 12px !important; }
}

/* Owner mockup: the IDEAS / AUTOMATION / EXECUTION / GROWTH list is desktop
   and laptop only - hidden on phones and on tablets (incl. 1024px portrait). */
@media screen and (max-width: 991px), screen and (max-width: 1024px) and (orientation: portrait) {
  .hero-corner-list { display: none !important; }
}

/* Owner mockup: tagline sits right under the headline. */
.hero-container .hero-heading { margin-bottom: 0 !important; }

/* Phone header on the hero: logo + "Webnixian" wordmark and the menu button;
   the header "Let's Build" pill returns once you scroll past the hero (the
   hero has its own full-width Let's Build). */
@media screen and (max-width: 767px) {
  .nav-logo-item { position: relative; overflow: visible !important; }
  .nav-logo-item::after {
    content: "Webnixian";
    position: absolute;
    left: 42px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Tr 3 A", Arial, sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: #14120d;
    pointer-events: none;
  }
  html.at-hero .nav-logo-item::after { color: #fff; }
  html.at-hero .nav-button-mobile { opacity: 0 !important; visibility: hidden !important; }
  .nav-button-mobile { transition: opacity .25s ease, visibility .25s ease; }
}

/* Owner mockup, tablet portrait (992-1024px wide, e.g. iPad Pro 1024x1366):
   copy anchored at the top with a larger headline, building image in the
   lower half under a dark fade, features as a 2x2 grid. The template's
   desktop scripts (sidebar FLIP) still run here, so only the look changes. */
@media screen and (min-width: 992px) and (max-width: 1024px) and (orientation: portrait) {
  .hero { --wx-hfs: clamp(3.6rem, 6.4vw, 4.4rem); }
  .hero-container {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    width: min(760px, 78vw) !important;
    margin-top: clamp(120px, 11vh, 170px) !important;
  }
  .hero-right-text { font-size: 1.25rem !important; max-width: 40ch !important; }
  .hero-sticky::before {
    background-image:
      linear-gradient(180deg, #0b0b0d 0%, #0b0b0d 45%, rgba(11,11,13,.55) 64%, rgba(11,11,13,0) 100%),
      url("../img/hero/hero-dark.webp");
    background-size: 100% 100%, auto 60%;
    background-position: center top, right bottom;
    transform-origin: 80% 100%;
  }
  .hero-card-3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px !important;
    width: min(560px, 100%) !important;
    max-width: 100% !important;
  }
  .hero-card-3-item { border-left: 0 !important; padding: 0 !important; }
  .hero-card-3-item .hero-card-3-title { font-size: 16px !important; }
  .hero-card-3-item .hero-card-3-sub { font-size: 13px !important; }
}

/* Phone: centre the full-width "Let's Build" label (owner mockup). */
@media screen and (max-width: 767px) {
  .hero-buttons-wrap .hero-cta-button { justify-content: center !important; text-align: center; }
}

/* Hero nav: "Webnixian" uses a larger face than the links, so centring the
   boxes left its baseline ~2-3.5px below the links'. Lift it onto the same
   baseline (offsets measured from rendered glyphs). */
.hero-nav-brand-text { position: relative; top: -2px; }
@media screen and (max-width: 1200px) { .hero-nav-brand-text { top: -3.5px; } }

/* WEBX underline: a tapered yellow stroke (thick at the left, narrowing to a
   point) under the hero wordmark. Drawn on the hero's own WEBX slot, so it
   stays in the hero and blurs out with the headline instead of flying into
   the sidebar with the wordmark. */
.hero-container > .nesh-logo-ghost-wrap { position: relative; }
.hero-container > .nesh-logo-ghost-wrap::after {
  content: "";
  position: absolute;
  left: 0.4%;
  bottom: calc(var(--wx-hfs) * -0.3);
  width: 92%;
  height: calc(var(--wx-hfs) * 0.12);
  min-height: 5px;
  background: linear-gradient(90deg, #ffff23 0%, #ffff23 55%, rgba(255,255,35,.35) 100%);
  clip-path: polygon(0 0, 100% 42%, 100% 58%, 0 100%);
  border-radius: 2px;
  filter: blur(calc(var(--hero-out, 0) * 12px));
  opacity: calc(1 - var(--hero-out, 0));
  pointer-events: none;
}
.hero-container .hero-heading { margin-top: calc(var(--wx-hfs) * 0.42) !important; }

/* Tablet + phone: each feature gets its own glass tile instead of sharing
   one box (desktop keeps the single strip with dividers). */
@media screen and (max-width: 991px), screen and (max-width: 1024px) and (orientation: portrait) {
  .hero-card-3 {
    background: none !important;
    border: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    gap: 10px !important;
  }
  .hero-card-3-item:not([style*="display:none"]) {
    background: rgba(18, 18, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 12px 12px !important;
    white-space: normal;
  }
}
@media screen and (max-width: 991px), screen and (max-width: 1024px) and (orientation: portrait) {
  .hero-card-3 { align-items: stretch !important; }
}

/* WEBX underline leaves with the wordmark: it fades and retracts to the left
   as WEBX starts its flight to the sidebar, instead of floating on its own. */
@keyframes wxUnderlineOut { from { opacity: 1; transform: scaleX(1); } to { opacity: 0; transform: scaleX(0.3); } }
@supports (animation-timeline: scroll()) {
  .hero-container > .nesh-logo-ghost-wrap::after {
    transform-origin: left center;
    animation: wxUnderlineOut linear both;
    animation-timeline: scroll(root);
    animation-range: 18vh 36vh;
  }
}

/* Hero nav brand: a single SVG wordmark (W icon + WEBNIXIAN outlined in the
   site's TR3A Bold) replaces the icon + text pair. */
.hero-nav-brand-logo { display: block; height: clamp(22px, 1.7vw, 30px); width: auto; }

/* Features: every item is its own glass tile at every width - 4 in a row on
   desktop/laptop, 2x2 on tablet/phone (owner request). */
.hero-card-3 {
  background: none !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  gap: clamp(8px, 0.7vw, 12px) !important;
  align-items: stretch !important;
}
.hero-card-3-item:not([style*="display:none"]) {
  background: rgba(18, 18, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: clamp(10px, 0.8vw, 14px);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: clamp(10px, 0.85vw, 16px) clamp(12px, 1vw, 18px) !important;
}
@media screen and (min-width: 992px) {
  .hero-card-3 { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; max-width: none !important; }
}
@media screen and (min-width: 992px) and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 991px) {
  .hero-card-3 { display: grid !important; grid-template-columns: 1fr 1fr; width: min(560px, 100%) !important; }
  .hero-card-3-item:not([style*="display:none"]) { white-space: normal; }
}

/* Short/wide desktop windows (e.g. 1366x641, 1280x610 = laptops with
   browser bars or 125-150% Windows scaling): the hero block is sized from
   the viewport WIDTH but centred in the viewport HEIGHT, so past ~2:1 it
   slid up under the nav bar. #wx-hero-fit (index.html) measures it and,
   only when it doesn't fit, sets html.wx-fit + these vars: the block is
   zoomed down and centred between the nav bar and the bottom edge. */
@media screen and (min-width: 768px) {
  html.wx-fit .hero-container {
    box-sizing: border-box;
    padding-top: var(--wx-fit-top, 0px) !important;
    padding-bottom: var(--wx-fit-bot, 0px) !important;
    justify-content: center !important;
  }
  html.wx-fit .hero-container > * { zoom: var(--wx-fit, 1); }
}

/* Desktop "Let's Build": Sidebar.scale() counter-scales the label by
   1/sidebarScale (x1.4-1.5 on short windows) to keep it legible, which
   made it wider than its 129px .nav-button-mask (the button itself is
   ~199px), so overflow:hidden cut it to ".et's Build -". The mask only has
   to hide the hover-roll copy above/below, so clip vertically only. */
.nav-button .nav-button-mask,
.nav-button-secondary .nav-button-mask {
  overflow: visible !important;
  clip-path: inset(0 -100vw 0 -100vw);
}

/* Sidebar intro text: TextReveal splits it into line masks ~0.2s after
   GhostEngine has measured the sidebar/hero FLIP pairs. Where the copy sits
   on a wrap boundary (e.g. 2560px wide) the split re-wraps 3 lines -> 4,
   the sidebar grows, gets rescaled, and the FLIP'd nav links + CTA ended up
   ~37px below their hero slots. Reserve the 4 lines up front so the
   sidebar's height never changes after measuring. */
@media screen and (min-width: 768px) {
  .nav-top-text { min-height: 4lh; }
}