/* =========================================================
   ZT BRAND STUDIO — PREMIUM HEADER v7
   Responsive / crisp / native mobile menu / pure CSS icons
   No SVG · No external font · No icon library · No blur
========================================================= */

.zt-header-shell {
  --zt-gold: #EDB126;
  --zt-gold-hi: #F6CD58;
  --zt-gold-soft: #E5A91D;
  --zt-gold-deep: #A96E07;
  --zt-gold-pale: #FFF1C3;
  --zt-bg: #050505;
  --zt-bg-2: #090908;
  --zt-panel: #0B0B0A;
  --zt-panel-2: #11100D;
  --zt-text: #FFF9EC;
  --zt-soft: #DED8CC;
  --zt-muted: #A7A095;
  --zt-line: rgba(237,177,38,.22);
  --zt-line-strong: rgba(237,177,38,.48);
  --zt-white-line: rgba(255,255,255,.06);

  position: sticky;
  top: 0;
  z-index: 10000;
  width: 100%;
  direction: ltr;
  font-family: inherit;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.zt-header-shell,
.zt-header-shell *,
.zt-header-shell *::before,
.zt-header-shell *::after {
  box-sizing: border-box;
}

.zt-header-shell,
.zt-header-shell a,
.zt-header-shell button,
.zt-header-shell span,
.zt-header-shell strong,
.zt-header-shell small,
.zt-header-shell summary {
  font-family: inherit !important;
}

.zt-header-shell:not(.zt-ready) *,
.zt-header-shell:not(.zt-ready) *::before,
.zt-header-shell:not(.zt-ready) *::after {
  transition: none !important;
}

.zt-header {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background:
    linear-gradient(90deg, rgba(237,177,38,.028), transparent 17%, transparent 83%, rgba(237,177,38,.028)),
    var(--zt-bg);
  border-bottom: 1px solid var(--zt-line);
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
}

.zt-header-accent {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 4%, var(--zt-gold-deep) 18%, var(--zt-gold-hi) 50%, var(--zt-gold-deep) 82%, transparent 96% 100%);
  opacity: .78;
}

.zt-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(237,177,38,.36) 16%, rgba(237,177,38,.13) 50%, rgba(237,177,38,.36) 84%, transparent);
}

.zt-header-shell.is-scrolled .zt-header {
  box-shadow: 0 16px 36px rgba(0,0,0,.38);
  border-bottom-color: rgba(237,177,38,.34);
}

.zt-header-inner {
  position: relative;
  width: min(1580px, calc(100% - clamp(28px, 4vw, 64px)));
  min-height: 80px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px);
}

/* =========================================================
   BRAND
========================================================= */
.zt-brand {
  min-width: 218px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--zt-text);
  text-decoration: none;
  outline: none;
}

.zt-brand-logo-wrap {
  position: relative;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(237,177,38,.48);
  border-radius: 11px;
  background: #080704;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 7px 18px rgba(0,0,0,.32);
}

.zt-brand-logo-wrap::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(237,177,38,.12);
  border-radius: 7px;
}

.zt-brand:hover .zt-brand-logo-wrap,
.zt-brand:focus-visible .zt-brand-logo-wrap {
  border-color: rgba(246,205,88,.88);
}

.zt-brand-logo {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.zt-brand-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.08;
}

.zt-brand-title {
  color: var(--zt-text);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .025em;
  white-space: nowrap;
}

.zt-brand-subtitle {
  color: var(--zt-muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .035em;
  white-space: nowrap;
}

/* =========================================================
   DESKTOP NAVIGATION
========================================================= */
.zt-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.zt-nav-link {
  position: relative;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  color: var(--zt-soft);
  text-decoration: none;
  font-size: 9.4px;
  font-weight: 780;
  line-height: 1;
  letter-spacing: .052em;
  text-transform: uppercase;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  transition: color .13s ease;
}

.zt-nav-link::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 6px;
  height: 2px;
  background: var(--zt-gold);
  opacity: 0;
  transition: opacity .13s ease;
}

.zt-nav-link:hover,
.zt-nav-link:focus-visible,
.zt-nav-link.is-current-page,
.zt-nav-dropdown.has-current-child > .zt-nav-link {
  color: var(--zt-gold-pale);
}

.zt-nav-link:hover::before,
.zt-nav-link:focus-visible::before,
.zt-nav-link.is-current-page::before,
.zt-nav-dropdown.has-current-child > .zt-nav-link::before {
  opacity: 1;
}

.zt-nav-label {
  font-weight: inherit;
}

.zt-brand:focus-visible,
.zt-nav-link:focus-visible,
.zt-cta:focus-visible,
.zt-dropdown-link:focus-visible,
.zt-mobile-link:focus-visible,
.zt-mobile-submenu-link:focus-visible,
.zt-mobile-cta:focus-visible,
.zt-mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--zt-gold-pale);
  outline-offset: 3px;
}

/* =========================================================
   PURE CSS FLAT ICONS
========================================================= */
.zt-flat-icon {
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: inline-block;
  color: var(--zt-gold);
}

.zt-nav-link:hover .zt-flat-icon,
.zt-nav-link:focus-visible .zt-flat-icon,
.zt-nav-link.is-current-page .zt-flat-icon,
.zt-nav-dropdown.has-current-child > .zt-nav-link .zt-flat-icon,
.zt-dropdown-link:hover .zt-flat-icon,
.zt-mobile-link:hover .zt-flat-icon,
.zt-mobile-submenu-link:hover .zt-flat-icon {
  color: var(--zt-gold-hi);
}

/* Arrow element dimensions; artwork comes from the PNG atlas below. */
.zt-chevron{position:relative;width:10px;height:10px;flex:0 0 10px;}
.zt-flat-arrow,.zt-cta-icon{position:relative;width:16px;height:16px;flex:0 0 16px;}

/* =========================================================
   PORTFOLIO DROPDOWN
========================================================= */
.zt-nav-dropdown {
  position: relative;
}

.zt-nav-dropdown:hover > .zt-nav-link .zt-chevron::before,
.zt-nav-dropdown:focus-within > .zt-nav-link .zt-chevron::before,
.zt-nav-dropdown.is-open > .zt-nav-link .zt-chevron::before,
.zt-nav-dropdown.has-current-child > .zt-nav-link .zt-chevron::before {
  transform: rotate(225deg);
  top: 4px;
}

.zt-dropdown-menu {
  position: absolute;
  z-index: 1100;
  top: calc(100% + 10px);
  left: 50%;
  width: 540px;
  margin-left: -270px;
  padding: 13px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: #0A0A09;
  border: 1px solid rgba(237,177,38,.32);
  box-shadow: 0 24px 54px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.018);
  transition: opacity .14s ease, visibility 0s linear .14s;
}

.zt-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.zt-dropdown-menu::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 2px;
  background: var(--zt-gold);
}

.zt-nav-dropdown:hover .zt-dropdown-menu,
.zt-nav-dropdown:focus-within .zt-dropdown-menu,
.zt-nav-dropdown.is-open .zt-dropdown-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.zt-dropdown-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 27px;
  padding: 0 5px 8px;
  border-bottom: 1px solid rgba(255,255,255,.045);
}

.zt-dropdown-kicker {
  color: var(--zt-muted);
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.zt-dropdown-rule {
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, rgba(237,177,38,.30), transparent);
}

.zt-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding-top: 9px;
}

.zt-dropdown-link {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  color: var(--zt-text);
  text-decoration: none;
  background: #0D0D0B;
  border: 1px solid rgba(255,255,255,.045);
  outline: none;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

.zt-dropdown-link:hover,
.zt-dropdown-link:focus-visible,
.zt-dropdown-link.is-current-page {
  color: var(--zt-gold-pale);
  background: #12110D;
  border-color: rgba(237,177,38,.28);
}

.zt-dropdown-icon-box {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--zt-gold);
  background: #080704;
  border: 1px solid rgba(237,177,38,.22);
}

.zt-dropdown-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: none !important;
  filter: none !important;
  backface-visibility: visible;
  will-change: auto;
}

.zt-dropdown-copy strong {
  color: inherit;
  font-size: 10.2px;
  font-weight: 820;
  line-height: 1.15;
  letter-spacing: .035em;
}

.zt-dropdown-copy small {
  color: var(--zt-muted);
  font-size: 8.8px;
  font-weight: 560;
  line-height: 1.4;
  letter-spacing: .015em;
}

.zt-dropdown-link:hover .zt-dropdown-copy small,
.zt-dropdown-link:focus-visible .zt-dropdown-copy small,
.zt-dropdown-link.is-current-page .zt-dropdown-copy small {
  color: #C9C1B2;
}

/* =========================================================
   CTA — ANGULAR REFERENCE GEOMETRY
========================================================= */
.zt-actions {
  display: flex;
  justify-content: flex-end;
}

.zt-cta,
.zt-mobile-cta {
  --zt-cta-top-cut: 24px;
  --zt-cta-left-cut: 19px;
  --zt-cta-depth: 7px;

  position: relative;
  min-width: 198px;
  height: 58px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 21px var(--zt-cta-depth) 27px;
  color: #090702;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 9.2px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .105em;
  white-space: nowrap;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #F8D25E 0%, #F4C345 45%, #EFB52A 78%, #E7A619 100%);
  clip-path: polygon(0 0, calc(100% - var(--zt-cta-top-cut)) 0, 100% var(--zt-cta-top-cut), 100% 100%, var(--zt-cta-left-cut) 100%, 0 calc(100% - var(--zt-cta-left-cut)));
}

.zt-cta::before,
.zt-mobile-cta::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 7px;
  right: 8px;
  bottom: calc(var(--zt-cta-depth) + 5px);
  pointer-events: none;
  border: 1px solid rgba(255,247,215,.74);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.zt-cta::after,
.zt-mobile-cta::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: var(--zt-cta-left-cut);
  right: 0;
  bottom: 0;
  height: var(--zt-cta-depth);
  pointer-events: none;
  background: #C68808;
}

.zt-cta-label,
.zt-cta-icon,
.zt-mobile-cta .zt-cta-label {
  position: relative;
  z-index: 2;
}

.zt-cta:hover,
.zt-cta:focus-visible,
.zt-mobile-cta:hover,
.zt-mobile-cta:focus-visible {
  color: #070501;
  background: linear-gradient(180deg, #FBDD6D 0%, #F7CA4D 45%, #F0B82D 78%, #E7A619 100%);
}

.zt-cta:active,
.zt-mobile-cta:active {
  background: linear-gradient(180deg, #F0C248 0%, #EFB52A 74%, #E2A01A 100%);
}

/* =========================================================
   MOBILE MENU — NATIVE DETAILS / SUMMARY
========================================================= */
.zt-mobile-menu,
.zt-mobile-menu summary,
.zt-mobile-portfolio,
.zt-mobile-portfolio summary {
  list-style: none;
}

.zt-mobile-menu summary::-webkit-details-marker,
.zt-mobile-portfolio summary::-webkit-details-marker {
  display: none;
}

.zt-mobile-menu {
  display: none;
}

.zt-mobile-menu-toggle {
  -webkit-tap-highlight-color: transparent;
}

.zt-toggle-line {
  display: block;
}

.zt-mobile-panel-head {
  display: none;
}

/* =========================================================
   SCROLL PROGRESS
========================================================= */
.zt-scroll-progress {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(237,177,38,.045);
  pointer-events: none;
}

.zt-scroll-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--zt-gold-deep), var(--zt-gold-hi));
  transform: scaleX(0);
  transform-origin: left center;
}

/* =========================================================
   RESPONSIVE — LARGE DESKTOP
========================================================= */
@media (min-width: 1440px) {
  .zt-nav-link {
    padding-inline: 10px;
    font-size: 9.7px;
  }

  .zt-cta {
    min-width: 205px;
  }
}

/* =========================================================
   RESPONSIVE — DESKTOP / TABLET COMPRESSION
========================================================= */
@media (min-width: 1100px) and (max-width: 1439px) {
  .zt-header-inner {
    width: calc(100% - 30px);
    gap: 11px;
  }

  .zt-brand {
    min-width: 178px;
  }

  .zt-brand-logo-wrap {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .zt-brand-logo {
    width: 35px;
    height: 35px;
  }

  .zt-brand-title { font-size: 11.5px; }
  .zt-brand-subtitle { font-size: 7.9px; }

  .zt-nav-link {
    gap: 5px;
    padding-inline: 6px;
    font-size: 8.4px;
    letter-spacing: .035em;
  }

  .zt-flat-icon {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .zt-cta {
    --zt-cta-top-cut: 20px;
    --zt-cta-left-cut: 16px;
    --zt-cta-depth: 6px;
    min-width: 160px;
    height: 50px;
    min-height: 50px;
    padding: 0 15px var(--zt-cta-depth) 21px;
    gap: 10px;
    font-size: 7.9px;
  }

  .zt-dropdown-menu {
    width: 500px;
    margin-left: -250px;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  .zt-header-inner {
    width: calc(100% - 18px);
    gap: 7px;
  }

  .zt-brand {
    min-width: 124px;
    gap: 8px;
  }

  .zt-brand-logo-wrap {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 9px;
  }

  .zt-brand-logo { width: 32px; height: 32px; }
  .zt-brand-title { font-size: 10.2px; }
  .zt-brand-subtitle { display: none; }

  .zt-nav-link {
    min-height: 40px;
    padding-inline: 5px;
    gap: 0;
    font-size: 7.75px;
    letter-spacing: .022em;
  }

  .zt-nav-link > .zt-flat-icon {
    display: none;
  }

  .zt-portfolio-trigger .zt-chevron {
    margin-left: 4px;
  }

  .zt-cta {
    --zt-cta-top-cut: 17px;
    --zt-cta-left-cut: 13px;
    --zt-cta-depth: 5px;
    min-width: 124px;
    height: 44px;
    min-height: 44px;
    padding: 0 10px var(--zt-cta-depth) 15px;
    gap: 7px;
    font-size: 6.9px;
    letter-spacing: .07em;
  }

  .zt-cta-icon {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
  }

  .zt-dropdown-menu {
    width: 470px;
    margin-left: -235px;
  }
}

/* Never show phone UI above 768px. */
@media (min-width: 769px) {
  .zt-mobile-menu,
  .zt-mobile-menu-toggle,
  .zt-mobile-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   PHONE — <= 768px
========================================================= */
@media (max-width: 768px) {
  /* Lock the root scroller without making body a new sticky scroll ancestor. */
  html.zt-menu-open {
    overflow: hidden;
  }

  html.zt-menu-open:not(.zt-preloader-active) body {
    overflow: visible !important;
  }

  .zt-header-inner {
    width: calc(100% - 20px);
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 10px;
    /* The native toggle now occupies its own space beside the brand. */
    position: static;
    padding-right: 0;
  }

  .zt-nav,
  .zt-actions {
    display: none !important;
  }

  .zt-brand {
    min-width: 0;
    flex: 1 1 auto;
    gap: 9px;
  }

  .zt-brand-logo-wrap {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 10px;
  }

  .zt-brand-logo {
    width: 35px;
    height: 35px;
  }

  .zt-brand-title {
    font-size: 12px;
  }

  .zt-brand-subtitle {
    max-width: min(56vw, 230px);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 8.3px;
  }

  .zt-mobile-menu {
    display: block !important;
    position: static;
    flex: 0 0 46px;
    width: 46px;
    min-height: 46px;
    margin: 0;
    padding: 0;
  }

  .zt-mobile-menu-toggle,
  .zt-mobile-menu-toggle:hover,
  .zt-mobile-menu-toggle:focus,
  .zt-mobile-menu-toggle:focus-visible,
  .zt-mobile-menu-toggle:active {
    position: relative;
    top: auto;
    right: auto;
    z-index: 10080;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    color: #070603;
    background: var(--zt-gold);
    border: 1px solid var(--zt-gold);
    border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 5px 14px rgba(0,0,0,.24);
    cursor: pointer;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
  }

  .zt-mobile-menu-toggle:hover,
  .zt-mobile-menu-toggle:focus-visible {
    background: var(--zt-gold-hi);
    border-color: var(--zt-gold-hi);
  }

  /* Keep the keyboard focus ring after the mobile button reset. */
  .zt-mobile-menu-toggle:focus-visible {
    outline: 2px solid var(--zt-gold-pale);
    outline-offset: 3px;
  }

  .zt-mobile-menu[open] > .zt-mobile-menu-toggle {
    background: #D99C17;
    border-color: var(--zt-gold);
  }

  .zt-mobile-menu-toggle .zt-toggle-line {
    width: 20px;
    height: 2px;
    flex: 0 0 2px;
    margin: 0;
    border-radius: 2px;
    background: #070603;
    transform-origin: center;
    transition: transform .17s ease, opacity .12s ease;
  }

  .zt-mobile-menu[open] > .zt-mobile-menu-toggle .zt-toggle-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .zt-mobile-menu[open] > .zt-mobile-menu-toggle .zt-toggle-line:nth-child(2) {
    opacity: 0;
  }
  .zt-mobile-menu[open] > .zt-mobile-menu-toggle .zt-toggle-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .zt-mobile-nav {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10060;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: #070706;
    border-top: 1px solid rgba(237,177,38,.12);
    border-bottom: 1px solid rgba(237,177,38,.42);
    box-shadow: 0 30px 60px rgba(0,0,0,.56);
    transition: opacity .15s ease, visibility 0s linear .28s;
  }

  .zt-mobile-menu[open] > .zt-mobile-nav {
    max-height: calc(100dvh - 72px);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .15s ease, visibility 0s linear 0s;
  }

  @supports not (height: 100dvh) {
    .zt-mobile-menu[open] > .zt-mobile-nav {
      max-height: calc(100vh - 72px);
    }
  }

  .zt-mobile-nav-inner {
    min-height: 0;
    max-height: inherit;
    overflow: hidden;
  }

  .zt-mobile-nav-panel {
    width: min(720px, calc(100% - 20px));
    /* Legacy browsers retain a scrollable panel when dvh is unsupported. */
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    margin: 0 auto;
    padding: 12px 0 20px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(237,177,38,.48) transparent;
  }

  .zt-mobile-panel-head {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 5px;
    color: var(--zt-muted);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .zt-mobile-panel-line {
    height: 1px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, rgba(237,177,38,.30), transparent);
  }

  .zt-mobile-link {
    width: 100%;
    min-height: 51px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 12px;
    color: #E5DED2;
    text-decoration: none;
    font-size: 12px;
    font-weight: 780;
    line-height: 1;
    letter-spacing: .035em;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    border-radius: 0;
    cursor: pointer;
    appearance: none;
    outline: none;
    transition: color .12s ease, border-color .12s ease, background-color .12s ease;
  }

  .zt-mobile-link:hover,
  .zt-mobile-link:focus-visible,
  .zt-mobile-link.is-current-page,
  .zt-mobile-portfolio.has-current-child > .zt-mobile-link {
    color: var(--zt-gold-pale);
    border-bottom-color: rgba(237,177,38,.24);
    background: rgba(237,177,38,.035);
  }

  .zt-mobile-portfolio {
    margin: 0;
    padding: 0;
  }

  .zt-mobile-portfolio-summary {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .zt-mobile-portfolio-summary .zt-chevron {
    margin-left: auto;
  }

  .zt-mobile-portfolio[open] > .zt-mobile-portfolio-summary .zt-chevron::before,
  .zt-mobile-portfolio.has-current-child > .zt-mobile-portfolio-summary .zt-chevron::before {
    transform: rotate(225deg);
    top: 4px;
  }

  .zt-mobile-submenu {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: #090908;
    transition: opacity .13s ease, visibility 0s linear .22s;
  }

  .zt-mobile-portfolio[open] > .zt-mobile-submenu,
  .zt-mobile-portfolio.has-current-child > .zt-mobile-submenu {
    max-height: 410px;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .13s ease, visibility 0s linear 0s;
  }

  .zt-mobile-submenu-inner {
    padding: 7px 0 8px 12px;
  }

  .zt-mobile-submenu-link {
    min-width: 0;
    min-height: 61px;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 16px;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    color: var(--zt-text);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.045);
    outline: none;
    transition: color .12s ease, border-color .12s ease, background-color .12s ease;
  }

  .zt-mobile-submenu-link:hover,
  .zt-mobile-submenu-link:focus-visible,
  .zt-mobile-submenu-link.is-current-page {
    color: var(--zt-gold-pale);
    background: rgba(237,177,38,.035);
    border-bottom-color: rgba(237,177,38,.20);
  }

  .zt-mobile-cta {
    width: 100%;
    min-width: 0;
    height: 54px;
    min-height: 54px;
    margin-top: 16px;
    padding: 0 18px 6px 22px;
    font-size: 9.7px;
  }
}

@media (max-width: 420px) {
  .zt-header-inner {
    width: calc(100% - 16px);
  }

  .zt-brand-subtitle {
    display: none;
  }

  .zt-brand-title {
    font-size: 11.8px;
  }

  .zt-mobile-nav-panel {
    width: calc(100% - 16px);
  }

  .zt-dropdown-copy small {
    font-size: 8.6px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .zt-header-shell *,
  .zt-header-shell *::before,
  .zt-header-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   MOBILE HEADER — SCOPED DISPLAY GUARDS
   Keep desktop CTAs outside the phone header and protect
   the native hamburger from theme-wide control styles.
========================================================= */
@media (max-width: 768px) {
  .zt-header-shell[data-zt-header] .zt-header-inner > .zt-nav,
  .zt-header-shell[data-zt-header] .zt-header-inner > .zt-actions,
  .zt-header-shell[data-zt-header] .zt-header-inner .zt-cta {
    display: none !important;
  }

  .zt-header-shell[data-zt-header] .zt-header-inner > .zt-mobile-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-height: 46px !important;
    overflow: visible !important;
    clip-path: none !important;
  }

  .zt-header-shell[data-zt-header] .zt-mobile-menu > .zt-mobile-menu-toggle {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    clip-path: none !important;
    transform: none !important;
    list-style: none !important;
  }

  .zt-header-shell[data-zt-header] .zt-mobile-menu-toggle::before,
  .zt-header-shell[data-zt-header] .zt-mobile-menu-toggle::after,
  .zt-header-shell[data-zt-header] .zt-mobile-menu-toggle::marker {
    content: none !important;
    display: none !important;
  }

  .zt-header-shell[data-zt-header] .zt-mobile-menu-toggle > .zt-toggle-line {
    display: block !important;
    position: static !important;
    width: 20px !important;
    height: 2px !important;
    min-height: 2px !important;
    flex: 0 0 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #070603 !important;
    border: 0 !important;
    opacity: 1;
    visibility: visible !important;
  }

  .zt-header-shell[data-zt-header] .zt-mobile-menu[open] > .zt-mobile-menu-toggle .zt-toggle-line:nth-child(2) {
    opacity: 0;
  }

  .zt-header-shell[data-zt-header] .zt-mobile-menu:not([open]) .zt-mobile-cta {
    display: none !important;
  }

  .zt-header-shell[data-zt-header] .zt-mobile-menu[open] .zt-mobile-cta {
    display: inline-flex !important;
  }
}

/* Keep the brand and native toggle on one physical row, including RTL themes. */
@media (max-width: 768px) {
  .zt-header-shell[data-zt-header] .zt-header-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    direction: ltr !important;
    min-height: 72px;
    gap: 10px !important;
    position: static !important;
  }
  .zt-header-shell[data-zt-header] .zt-header-inner > .zt-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: 100%;
    margin: 0 !important;
  }
  .zt-header-shell[data-zt-header] .zt-brand-text { min-width: 0; }
  .zt-header-shell[data-zt-header] .zt-brand-title { overflow-wrap: anywhere; }
  .zt-header-shell[data-zt-header] .zt-header-inner > .zt-mobile-menu {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Real flat raster artwork; one local PNG for all header navigation controls. */
.zt-header-shell :is(.zt-flat-icon,.zt-chevron,.zt-flat-arrow,.zt-cta-icon){
  background-image:url("../fonts/zt-flat-icons.webp");
  background-repeat:no-repeat;
  background-size:400% 400%;
}
.zt-header-shell :is(.zt-flat-icon,.zt-chevron,.zt-flat-arrow,.zt-cta-icon)::before,
.zt-header-shell :is(.zt-flat-icon,.zt-chevron,.zt-flat-arrow,.zt-cta-icon)::after{content:none!important;display:none!important;}
.zt-header-shell .zt-icon-home{background-position:0% 0%;}
.zt-header-shell .zt-icon-about{background-position:33.3333% 0%;}
.zt-header-shell .zt-icon-services{background-position:66.6667% 0%;}
.zt-header-shell .zt-icon-portfolio{background-position:100% 0%;}
.zt-header-shell .zt-icon-blog{background-position:0% 33.3333%;}
.zt-header-shell .zt-icon-packages{background-position:33.3333% 33.3333%;}
.zt-header-shell .zt-icon-consultation{background-position:66.6667% 33.3333%;}
.zt-header-shell .zt-icon-contact{background-position:100% 33.3333%;}
.zt-header-shell .zt-icon-graphics{background-position:0% 66.6667%;}
.zt-header-shell .zt-icon-video{background-position:33.3333% 66.6667%;}
.zt-header-shell .zt-icon-website{background-position:66.6667% 66.6667%;}
.zt-header-shell .zt-icon-seo{background-position:100% 66.6667%;}
.zt-header-shell :is(.zt-flat-arrow,.zt-cta-icon){background-position:0% 100%;}
.zt-header-shell .zt-cta-icon{filter:brightness(0);}
.zt-header-shell .zt-chevron{background-position:33.3333% 100%;transform:rotate(90deg);}
.zt-header-shell .zt-nav-dropdown:is(:hover,:focus-within,.is-open,.has-current-child) > .zt-nav-link .zt-chevron,
.zt-header-shell .zt-mobile-portfolio[open] > summary .zt-chevron,
.zt-header-shell .zt-mobile-portfolio.has-current-child > summary .zt-chevron{transform:rotate(-90deg);}
@media(max-width:768px){
  body .zt-header-shell[data-zt-header] .zt-mobile-menu-toggle > .zt-toggle-line{display:none!important;}
  body .zt-header-shell[data-zt-header] .zt-mobile-menu-toggle::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    width:20px!important;
    height:20px!important;
    left:calc(50% - 10px)!important;
    top:calc(50% - 10px)!important;
    margin:0!important;
    border:0!important;
    background:url("../fonts/zt-flat-icons.webp") 66.6667% 100% / 400% 400% no-repeat!important;
    filter:brightness(0);
    transform:none!important;
    pointer-events:none;
  }
  body .zt-header-shell[data-zt-header] .zt-mobile-menu[open] > .zt-mobile-menu-toggle::before{background-position:100% 100%!important;}
  .zt-header-shell .zt-mobile-nav-panel{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));}
}
@media(hover:none){.zt-header-shell .zt-brand:hover .zt-brand-logo-wrap{transform:none;}}
@media(prefers-reduced-motion:reduce){.zt-header-shell :is(.zt-flat-icon,.zt-flat-arrow,.zt-cta-icon){transition:none!important;}}


/* Zero To Trend — brand signature, stage 1.
   Real text below the existing title; always visible on phones and tablets. */
.zt-header-shell[data-zt-header] .zt-brand-origin {
  display: block;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #EDB126;
  font-family: inherit;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .14em;
  white-space: nowrap;
  text-align: left;
  text-transform: none;
  direction: ltr;
}
.zt-header-shell[data-zt-header] .zt-brand-text {
  gap: 3px;
}
@media (min-width: 1100px) and (max-width: 1439px) {
  .zt-header-shell[data-zt-header] .zt-brand-origin {
    font-size: 9px;
    letter-spacing: .12em;
  }
}
@media (min-width: 769px) and (max-width: 1099px) {
  .zt-header-shell[data-zt-header] .zt-brand-origin {
    font-size: 8px;
    letter-spacing: .08em;
  }
}
@media (max-width: 768px) {
  .zt-header-shell[data-zt-header] .zt-brand-origin {
    font-size: 9px;
    letter-spacing: .12em;
  }
}
@media (max-width: 360px) {
  .zt-header-shell[data-zt-header] .zt-brand-origin {
    font-size: 8.5px;
    letter-spacing: .09em;
  }
}


/* Zero To Trend — stage 2: shared editorial signature for page identities.
   Explicit classes keep the title line independent from decorative spans. */
body .zt-origin-lockup,
body .zt-origin-stack {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
  background: none !important;
  direction: ltr;
  text-align: left;
}
body .zt-origin-lockup {
  margin: 0 0 18px;
}
body .zt-origin-name {
  display: block;
  width: auto;
  height: auto;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .075em;
}
body .zt-origin-signature {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  color: #EDB126 !important;
  background: none !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
  letter-spacing: .14em !important;
  text-transform: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #EDB126 !important;
  direction: ltr;
  white-space: normal;
  overflow-wrap: normal;
}
body .zt-origin-stack > .zt-origin-signature,
body .zt-origin-lockup > .zt-origin-signature {
  margin-top: 0 !important;
}
body .zta3-hero-title > .zt-origin-signature {
  margin: 14px 0 12px !important;
  font-size: clamp(14px, 1.2vw, 19px) !important;
  letter-spacing: .17em !important;
}
body .zt-coming .zt-origin-lockup {
  align-items: center !important;
  margin: 0;
  text-align: center;
}
body .zt-coming .zt-origin-name {
  color: inherit;
}
@media (max-width: 480px) {
  body .zt-origin-signature {
    font-size: 11px !important;
    letter-spacing: .10em !important;
  }
  body .zt-origin-name {
    font-size: 10px;
    letter-spacing: .05em;
  }
}