/* ==========================================================================
   Disruptive Templates - Universal header
   Depends on tokens from dt-design-system.css
   ========================================================================== */

.dt-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--dt-black); color: var(--dt-paper);
  padding: 12px 20px; border-radius: 0 0 var(--dt-r-md) 0;
  font-family: var(--dt-font-body); font-weight: 600; text-decoration: none;
}
.dt-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
html body { overflow-x: clip; overflow-y: visible; }

.dt-hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--dt-paper);
  border-bottom: 1px solid var(--dt-rule);
  font-family: var(--dt-font-body);
  transition: box-shadow 220ms var(--dt-ease);
}
.dt-hdr.is-stuck { box-shadow: 0 1px 0 var(--dt-rule), 0 8px 24px -14px rgba(24,23,22,.3); }
.dt-hdr__bar { position: relative; z-index: 2; background: var(--dt-paper); }

/* One alignment contract: everything centres on a single axis. */
.dt-hdr__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; gap: 0; }

.dt-hdr__logo {
  display: inline-flex; align-items: center; gap: 10px;
  flex: 0 0 auto; margin-right: 26px;
  text-decoration: none; line-height: 0;
}
.dt-hdr__logo img { display: block; width: auto; }
.dt-hdr__logo img.dt-hdr__logo-mark { height: 52px; width: 52px; }
.dt-hdr__logo img.dt-hdr__logo-word { height: 15px; display: none; }
.dt-hdr__logo:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Primary nav - text only, no icons
   -------------------------------------------------------------------------- */
.dt-nav { flex: 0 1 auto; display: flex; align-items: center; min-width: 0; height: 100%; }
.dt-nav__list { display: flex; align-items: stretch; gap: 2px; list-style: none; margin: 0; padding: 0; height: 100%; }
/* No positioning here: the mega must resolve against .dt-hdr__bar so it spans
   the full header width, not the width of the Resume Templates button. */
.dt-nav__item { margin: 0; display: flex; align-items: stretch; }

.dt-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px;
  font-family: var(--dt-font-body); font-size: .9375rem; font-weight: 600;
  line-height: 1; color: var(--dt-black); text-decoration: none;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  -webkit-user-select: none; user-select: none;
  transition: color 160ms var(--dt-ease);
}

/* Reserve the bold width so hovering never shifts the layout. */
.dt-nav__label { display: grid; }
.dt-nav__label > span { grid-area: 1 / 1; transition: font-weight 140ms var(--dt-ease); }
.dt-nav__label::before {
  content: attr(data-label); grid-area: 1 / 1;
  font-weight: 800; visibility: hidden; pointer-events: none;
}

/* Underline wipes in from the left. */
.dt-nav__link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 20px;
  height: 2px; border-radius: 2px; background: var(--dt-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 240ms var(--dt-ease);
}

.dt-nav__link:hover,
.dt-nav__link:focus-visible { color: var(--dt-accent-hover); }
.dt-nav__link:hover .dt-nav__label > span,
.dt-nav__link:focus-visible .dt-nav__label > span { font-weight: 800; }
.dt-nav__link:hover::after,
.dt-nav__link:focus-visible::after { transform: scaleX(1); }

.dt-nav__link[aria-expanded="true"],
.dt-nav__link.is-current { color: var(--dt-accent-hover); }
.dt-nav__link[aria-expanded="true"] .dt-nav__label > span,
.dt-nav__link.is-current .dt-nav__label > span { font-weight: 800; }
.dt-nav__link[aria-expanded="true"]::after,
.dt-nav__link.is-current::after { transform: scaleX(1); }

.dt-nav__caret { display: inline-flex; color: currentColor; transition: transform 260ms var(--dt-ease); }
.dt-nav__link[aria-expanded="true"] .dt-nav__caret { transform: rotate(180deg); }

/* Free Tools is the one no-cost door, marked with a dot rather than an icon. */
.dt-nav__link--accent .dt-nav__label > span::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px;
  border-radius: 50%; background: var(--dt-accent); vertical-align: 1px;
}

.dt-nav__mobile-actions { display: none; }

/* --------------------------------------------------------------------------
   Actions - icon only, so the bar can never collide with the nav
   -------------------------------------------------------------------------- */
.dt-hdr__actions { display: flex; align-items: center; gap: 2px; justify-self: end; margin-left: 0; padding-left: 16px; }

.dt-hdr__icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  color: var(--dt-black); background: none; border: 0;
  border-radius: var(--dt-r-md); cursor: pointer; text-decoration: none;
  transition: background 160ms var(--dt-ease), color 160ms var(--dt-ease);
}
.dt-hdr__icon:hover, .dt-hdr__icon:focus-visible { background: var(--dt-green-wash); color: var(--dt-accent-hover); text-decoration: none; }
.dt-hdr__ico { display: inline-flex; transition: transform 220ms var(--dt-ease); }
.dt-hdr__icon:hover .dt-hdr__ico { transform: translateY(-2px); }

/* Tooltip replaces the old inline text label. */
.dt-hdr__icon::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-3px);
  padding: 5px 9px; border-radius: var(--dt-r-sm);
  background: var(--dt-black); color: var(--dt-paper);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 160ms var(--dt-ease), transform 160ms var(--dt-ease);
}
.dt-hdr__icon:hover::after, .dt-hdr__icon:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.dt-hdr__count {
  position: absolute; top: 3px; right: 3px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .6875rem; font-weight: 700; line-height: 1;
  background: var(--dt-grey-light); color: var(--dt-black);
  border: 2px solid var(--dt-paper); border-radius: var(--dt-r-full);
  transition: background 160ms var(--dt-ease), color 160ms var(--dt-ease), transform 220ms var(--dt-ease);
}
.dt-hdr__cart.is-filled .dt-hdr__count { background: var(--dt-accent); color: var(--dt-paper); }
.dt-hdr__cart:hover .dt-hdr__count { transform: scale(1.14); }
.dt-hdr__checkout { margin-left: 8px; }

/* --------------------------------------------------------------------------
   Mega menu
   -------------------------------------------------------------------------- */
.dt-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  background: var(--dt-paper);
  border-top: 1px solid var(--dt-rule);
  border-bottom: 1px solid var(--dt-rule);
  box-shadow: 0 20px 44px -26px rgba(24,23,22,.36);
  animation: dt-mega-in 220ms var(--dt-ease) both;
}
.dt-mega[hidden] { display: none; }
@keyframes dt-mega-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.dt-mega__inner {
  display: grid; grid-template-columns: 224px 1fr;
  gap: clamp(20px, 2.4vw, 40px);
  padding-block: var(--dt-8) var(--dt-8);
}

.dt-mega__tabs { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--dt-rule); padding-right: var(--dt-5); }
.dt-mega__tab {
  position: relative; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 14px; min-height: 50px;
  font-family: var(--dt-font-body);
  color: var(--dt-text-2); background: none; border: 0;
  border-radius: var(--dt-r-md); cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: color 160ms var(--dt-ease), background 160ms var(--dt-ease);
}
.dt-mega__tab-l { font-size: .9375rem; font-weight: 600; }
.dt-mega__tab-h { font-size: .75rem; color: var(--dt-text-3); }
.dt-mega__tab::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--dt-accent);
  transform: scaleY(0); transition: transform 220ms var(--dt-ease);
}
.dt-mega__tab:hover { color: var(--dt-black); background: var(--dt-bg-alt); }
.dt-mega__tab[aria-selected="true"] { color: var(--dt-black); background: var(--dt-green-wash); }
.dt-mega__tab[aria-selected="true"] .dt-mega__tab-l { font-weight: 800; }
.dt-mega__tab[aria-selected="true"] .dt-mega__tab-h { color: var(--dt-accent-hover); }
.dt-mega__tab[aria-selected="true"]::before { transform: scaleY(1); }

.dt-mega__panel[hidden] { display: none; }
.dt-mega__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px 8px; list-style: none; margin: 0 0 var(--dt-5); padding: 0;
}
.dt-mega__grid li { margin: 0; animation: dt-item-in 280ms var(--dt-ease) both; animation-delay: calc(var(--i, 0) * 12ms); }
@keyframes dt-item-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.dt-mega__grid a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--dt-r-md);
  font-size: .875rem; color: var(--dt-text-2); text-decoration: none; line-height: 1.3;
  transition: color 150ms var(--dt-ease), background 150ms var(--dt-ease);
}
.dt-mega__grid a:hover { color: var(--dt-black); background: var(--dt-green-wash); text-decoration: none; }

.dt-mega__ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--dt-r-md);
  background: var(--dt-bg-alt); color: var(--dt-grey-mid);
  transition: background 150ms var(--dt-ease), color 150ms var(--dt-ease), transform 220ms var(--dt-ease);
}
.dt-mega__grid a:hover .dt-mega__ico {
  background: var(--dt-accent); color: var(--dt-paper); transform: scale(1.06);
}

.dt-mega__n { flex: 0 1 auto; min-width: 0; transition: font-weight 150ms var(--dt-ease); }
.dt-mega__grid a:hover .dt-mega__n { font-weight: 700; }

/* Counts read as quiet metadata beside the name, not ragged right aligned digits. */
.dt-mega__c {
  flex: 0 0 auto;
  font-size: .6875rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  padding: 3px 7px; border-radius: var(--dt-r-full);
  background: var(--dt-bg-alt); color: var(--dt-text-3);
  border: 1px solid var(--dt-rule);
  transition: background 150ms var(--dt-ease), color 150ms var(--dt-ease), border-color 150ms var(--dt-ease);
}
.dt-mega__grid a:hover .dt-mega__c {
  background: var(--dt-paper); color: var(--dt-accent-hover); border-color: rgba(0,153,51,.4);
}

.dt-mega__all {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .9375rem; font-weight: 700; color: var(--dt-accent-hover); text-decoration: none;
}
.dt-mega__all svg { transition: transform 220ms var(--dt-ease); }
.dt-mega__all:hover { color: var(--dt-accent-hover); text-decoration: none; }
.dt-mega__all:hover svg { transform: translateX(4px); }
.dt-mega__all span { position: relative; }
.dt-mega__all span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--dt-ease);
}
.dt-mega__all:hover span::after { transform: scaleX(1); }
.dt-mega__empty { color: var(--dt-text-3); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   Promo card
   -------------------------------------------------------------------------- */
/* Sits under the links panel only, never under the tab column. */
.dt-promo {
  grid-column: 2;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: var(--dt-4); padding: 14px 18px;
  background: var(--dt-green-wash);
  border: 1px solid rgba(0,153,51,.22);
  border-radius: var(--dt-r-lg);
  position: relative; overflow: hidden;
}
.dt-promo__art { flex: 0 0 auto; line-height: 0; }
.dt-promo__art { display: none; }
.dt-promo__art img { width: 48px; height: 48px; display: block; }
.dt-promo__eyebrow {
  margin: 0 0 3px; font-size: .6875rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dt-accent-hover);
}
.dt-promo__h {
  margin: 0 0 3px; font-family: var(--dt-font-display);
  font-size: 1.0625rem; font-weight: 700; line-height: 1.25; color: var(--dt-black);
  letter-spacing: -.01em;
}
.dt-promo__s { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--dt-text-2); max-width: 70ch; }
.dt-promo__cta { display: flex; flex-direction: column; gap: 8px; align-items: stretch; flex: 0 0 auto; }
.dt-promo__cta .dt-btn { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Search drawer
   -------------------------------------------------------------------------- */
.dt-hdr__search {
  position: relative; z-index: 1;
  background: var(--dt-bg-alt); border-bottom: 1px solid var(--dt-rule);
  padding-block: var(--dt-5);
  animation: dt-mega-in 200ms var(--dt-ease) both;
}
.dt-hdr__search[hidden] { display: none; }
.dt-hdr__search-form { display: flex; gap: var(--dt-3); max-width: 720px; margin-inline: auto; }
.dt-hdr__search-form .dt-field { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Overlay + burger
   -------------------------------------------------------------------------- */
.dt-hdr__overlay {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(24, 23, 22, .34);
  animation: dt-fade-in 180ms var(--dt-ease) both;
}
.dt-hdr__overlay[hidden] { display: none; }
@keyframes dt-fade-in { from { opacity: 0; } to { opacity: 1; } }

.dt-hdr__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 9px;
  background: none; border: 0; border-radius: var(--dt-r-md); cursor: pointer;
}
.dt-hdr__burger:hover { background: var(--dt-green-wash); }
.dt-hdr__burger span {
  display: block; height: 2px; width: 100%; background: var(--dt-black); border-radius: 2px;
  transition: transform 260ms var(--dt-ease), opacity 160ms var(--dt-ease), background 160ms var(--dt-ease);
}
.dt-hdr__burger:hover span { background: var(--dt-accent-hover); }
.dt-hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dt-hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dt-hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Narrower desktops
   -------------------------------------------------------------------------- */
@media (max-width: 1300px) {
  .dt-hdr__logo { margin-right: 20px; }
  .dt-nav__link { padding: 0 11px; font-size: .875rem; }
  .dt-nav__link::after { left: 11px; right: 11px; }
  .dt-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1120px) {
  .dt-nav__link { padding: 0 9px; font-size: .8125rem; }
  .dt-nav__link::after { left: 9px; right: 9px; }
  .dt-promo { grid-template-columns: auto 1fr; }
  .dt-promo__cta { grid-column: 1 / -1; flex-direction: row; }
}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .dt-hdr__inner { height: 64px; }
  .dt-hdr__logo { margin-right: 12px; }
  .dt-hdr__burger { display: flex; }
  .dt-hdr__checkout { display: none; }
  .dt-hdr__icon::after { display: none; }

  .dt-nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
    width: min(420px, 90vw);
    flex-direction: column; align-items: stretch; gap: 0; height: auto;
    background: var(--dt-paper);
    border-left: 1px solid var(--dt-rule);
    box-shadow: -18px 0 44px -28px rgba(24,23,22,.5);
    padding: var(--dt-16) var(--dt-5) var(--dt-10);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 300ms var(--dt-ease);
    visibility: hidden;
  }
  .dt-nav.is-open { transform: translateX(0); visibility: visible; }

  .dt-nav__list { flex-direction: column; align-items: stretch; gap: 0; height: auto; }
  .dt-nav__item { display: block; border-bottom: 1px solid var(--dt-rule); }
  .dt-nav__link {
    width: 100%; justify-content: space-between;
    min-height: 56px; padding: 16px 4px; font-size: 1.0625rem;
  }
  .dt-nav__link::after { display: none; }

  .dt-nav__mobile-actions { display: flex; flex-direction: column; gap: var(--dt-3); margin-top: var(--dt-8); }
  .dt-nav__mobile-actions .dt-btn { width: 100%; }

  /* Mega menu becomes an in-drawer panel that keeps its real tabs. */
  .dt-mega {
    position: static; box-shadow: none; border: 0;
    background: var(--dt-bg-alt); border-radius: var(--dt-r-lg);
    margin: 10px 0 16px; animation: none;
  }
  .dt-mega__inner { grid-template-columns: 1fr; gap: 12px; padding: 12px; }

  .dt-mega__tabs {
    flex-direction: row; flex-wrap: nowrap;
    border-right: 0; padding-right: 0; padding-bottom: 10px;
    border-bottom: 1px solid var(--dt-rule);
    overflow-x: auto; scrollbar-width: none; gap: 6px;
    scroll-snap-type: x mandatory;
  }
  .dt-mega__tabs::-webkit-scrollbar { display: none; }
  .dt-mega__tab {
    flex: 0 0 auto; min-height: 42px; padding: 8px 14px;
    border: 1px solid var(--dt-rule); background: var(--dt-paper);
    border-radius: var(--dt-r-full); scroll-snap-align: start;
    align-items: center; text-align: center; gap: 0;
  }
  .dt-mega__tab::before { display: none; }
  .dt-mega__tab-l { font-size: .875rem; }
  .dt-mega__tab-h { display: none; }
  .dt-mega__tab[aria-selected="true"] { background: var(--dt-black); border-color: var(--dt-black); }
  .dt-mega__tab[aria-selected="true"] .dt-mega__tab-l { color: var(--dt-paper); }

  .dt-mega__panel { max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; }
  .dt-mega__grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 12px; }
  .dt-mega__grid li { animation: none; }
  .dt-mega__grid li + li { border-top: 1px solid var(--dt-rule); }
  .dt-mega__grid a { padding: 11px 8px; min-height: 46px; border-radius: 0; }

  .dt-promo { grid-template-columns: 1fr; text-align: left; padding: 16px; margin-top: 4px; }
  .dt-promo__art { display: none; }
  .dt-promo__cta { flex-direction: column; }
  .dt-promo__h { font-size: 1.0625rem; }
  .dt-promo__s { font-size: .8125rem; }
}

@media (max-width: 620px) {
  .dt-hdr__logo img.dt-hdr__logo-word { display: none; }
  .dt-hdr__logo img.dt-hdr__logo-mark { height: 34px; width: 34px; }
  .dt-hdr__icon { width: 40px; }
  .dt-hdr__search-toggle { display: none; }
  .dt-hdr__search-form { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-nav, .dt-hdr__burger span, .dt-nav__caret, .dt-mega, .dt-mega__grid li,
  .dt-nav__link::after, .dt-hdr__ico, .dt-hdr__overlay, .dt-hdr__search,
  .dt-mega__ico, .dt-hdr__icon::after {
    transition: none !important; animation: none !important;
  }
}

/* Astra safety: keep any surviving theme header markup out of the way. */
.ast-primary-header-bar, .site-header .main-header-bar { display: none !important; }
body.dt-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   Re-assert our own states above the Astra button reset.

   The reset in dt-design-system.css uses `.dt-hdr button:hover` (0,2,1), which
   outranks `.dt-hdr__icon:hover` (0,2,0). Prefixing with .dt-hdr lifts ours to
   (0,3,0) so the intended colours win.
   -------------------------------------------------------------------------- */
.dt-hdr .dt-hdr__icon:hover, .dt-hdr .dt-hdr__icon:focus-visible {
  background-color: var(--dt-green-wash); color: var(--dt-accent-hover);
}
.dt-hdr .dt-hdr__burger:hover { background-color: var(--dt-green-wash); }
.dt-hdr .dt-nav__link:hover, .dt-hdr .dt-nav__link:focus-visible { color: var(--dt-accent-hover); background-color: transparent; }
.dt-hdr .dt-nav__link[aria-expanded="true"], .dt-hdr .dt-nav__link.is-current { color: var(--dt-accent-hover); background-color: transparent; }
.dt-hdr .dt-mega__tab:hover { background-color: var(--dt-bg-alt); color: var(--dt-black); }
.dt-hdr .dt-mega__tab[aria-selected="true"] { background-color: var(--dt-green-wash); color: var(--dt-black); }

/* Mobile: single column, so the promo returns to the only column there is. */
@media (max-width: 1023px) {
  .dt-promo { grid-column: 1; grid-template-columns: 1fr; }
  .dt-hdr .dt-mega__tab[aria-selected="true"] { background-color: var(--dt-black); }
  .dt-hdr .dt-mega__tab[aria-selected="true"] .dt-mega__tab-l { color: var(--dt-paper); }
}

/* --------------------------------------------------------------------------
   Logo mark, green on hover

   Two stacked SVGs rather than a CSS filter, so the hover state is the real
   brand green rather than an approximation of it.
   -------------------------------------------------------------------------- */

/* Burger becomes a close cross while the drawer is open. */
.dt-hdr__burger span { transition: transform 240ms var(--dt-ease), opacity 160ms var(--dt-ease); }
.dt-hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.dt-hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.dt-hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1023px) {
  /* The drawer used to sit above the header, which hid the only way out of it.
     The bar now stays on top, so the close cross is always reachable. */
  .dt-hdr__bar { position: relative; z-index: 95; }
  .dt-nav { z-index: 70; padding-top: 80px; }

  /* On a phone the mark alone is not enough, so the wordmark comes back. */
  .dt-hdr__logo img.dt-hdr__logo-word { display: block; height: 12px; }
  .dt-hdr__logo img.dt-hdr__logo-mark { height: 38px; width: 38px; }
  .dt-hdr__logo { gap: 9px; }

  /* Both drawer actions on one line. */
  .dt-nav__mobile-actions { display: flex; flex-direction: row; gap: 10px; margin-top: var(--dt-6); }
  .dt-nav .dt-nav__cta {
    flex: 1 1 0; width: auto; min-width: 0; min-height: 50px;
    padding: 12px 10px; font-size: .875rem; font-weight: 700;
    border-radius: var(--dt-r-full); gap: 7px; white-space: nowrap;
  }
  .dt-nav .dt-nav__cta svg { flex: 0 0 auto; width: 17px; height: 17px; display: block; }
  .dt-nav .dt-nav__cta--in {
    background: var(--dt-accent); border-color: var(--dt-accent); color: #fff;
    box-shadow: 0 10px 22px -12px rgba(0, 153, 51, .8);
  }
  .dt-nav .dt-nav__cta--in:hover,
  .dt-nav .dt-nav__cta--in:focus-visible {
    background: var(--dt-accent-hover); border-color: var(--dt-accent-hover); color: #fff;
  }
}
/* --------------------------------------------------------------------------
   Sticky header

   position:sticky on .dt-hdr alone does nothing here. Elementor wraps a Theme
   Builder header in a chain of boxes that are only as tall as the header, and a
   sticky element can never travel outside its containing block, so it had zero
   room to move. The sticky position therefore belongs on the outermost
   Elementor header, whose containing block is the whole page wrapper.
   -------------------------------------------------------------------------- */
header.elementor-location-header,
header.elementor:has(.dt-hdr) {
  position: sticky;
  top: 0;
  z-index: 90;
}

/* Anything Elementor puts between that wrapper and our header must not clip or
   transform, or the sticky context breaks again. */
header.elementor-location-header > .e-con,
header.elementor-location-header .elementor-widget-shortcode,
header.elementor-location-header .elementor-shortcode { overflow: visible; transform: none; }
@media (max-width: 1023px) {
  .dt-hdr__inner { display: flex; }
  .dt-hdr__logo { flex: 0 1 auto; min-width: 0; margin-right: 8px; }
  .dt-hdr__actions { margin-left: auto; padding-left: 8px; }
  .dt-hdr__logo img.dt-hdr__logo-word { height: 11px; }
}

@media (max-width: 1023px) {
  /* The drawer is a descendant of the bar, so raising the bar cannot lift the
     close control above it. The actions row has to outrank the drawer itself,
     otherwise there is no way out of the menu once it is open. */
  .dt-hdr__burger { position: relative; z-index: 100; }
}

/* --------------------------------------------------------------------------
   Logo lockup: green mark, black wordmark stacked on two lines

   The wordmark is live text rather than a PNG, so it takes the brand colour on
   hover and stays crisp at any size. Two lines also balance the height of the
   mark, which looked stranded on its own.
   -------------------------------------------------------------------------- */
.dt-hdr__logo { gap: 12px; align-items: center; }

.dt-hdr__logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--dt-font-body);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.04;
  color: var(--dt-black);
  white-space: nowrap;
  transition: color 180ms var(--dt-ease);
}

.dt-hdr .dt-hdr__logo:hover .dt-hdr__logo-text,
.dt-hdr .dt-hdr__logo:focus-visible .dt-hdr__logo-text { color: var(--dt-accent); }

.dt-hdr__logo img.dt-hdr__logo-mark { transition: transform 260ms var(--dt-ease); }
.dt-hdr .dt-hdr__logo:hover img.dt-hdr__logo-mark { transform: scale(1.05); }

@media (max-width: 1023px) {
  .dt-hdr__logo { gap: 10px; }
  .dt-hdr__logo-text { font-size: .9375rem; line-height: 1.06; }
}

@media (max-width: 420px) {
  .dt-hdr__logo img.dt-hdr__logo-mark { height: 34px; width: 34px; }
  .dt-hdr__logo-text { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-hdr__logo img.dt-hdr__logo-mark,
  .dt-hdr__logo-text { transition: none !important; }
}
/* --------------------------------------------------------------------------
   Logo mark, liquid ring on hover

   The ring is sized so it stays inside the 76px bar (58px mark plus 6px of
   inset each side is 70px). It morphs by animating border-radius, which is one
   of the few ways to get an organic shape without an SVG or a filter.
   -------------------------------------------------------------------------- */
.dt-hdr__mark { position: relative; display: inline-flex; flex: 0 0 auto; line-height: 0; }
.dt-hdr__mark img { position: relative; z-index: 2; }

.dt-hdr__mark::before,
.dt-hdr__mark::after {
  content: '';
  position: absolute;
  inset: -6px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.72);
  border-radius: 42% 58% 63% 37% / 47% 42% 58% 53%;
  transition: opacity 240ms var(--dt-ease), transform 460ms cubic-bezier(.22, 1.15, .36, 1);
}

.dt-hdr__mark::before { z-index: 1; background: var(--dt-green-wash); }
.dt-hdr__mark::after  { z-index: 3; border: 2px solid var(--dt-accent); }

.dt-hdr .dt-hdr__logo:hover .dt-hdr__mark::before,
.dt-hdr .dt-hdr__logo:focus-visible .dt-hdr__mark::before {
  opacity: 1;
  transform: scale(1);
  animation: dt-liquid 5.5s ease-in-out infinite reverse;
}

.dt-hdr .dt-hdr__logo:hover .dt-hdr__mark::after,
.dt-hdr .dt-hdr__logo:focus-visible .dt-hdr__mark::after {
  opacity: 1;
  transform: scale(1);
  animation: dt-liquid 4s ease-in-out infinite;
}

@keyframes dt-liquid {
  0%,
  100% { border-radius: 42% 58% 63% 37% / 47% 42% 58% 53%; }
  25%  { border-radius: 58% 42% 38% 62% / 62% 55% 45% 38%; }
  50%  { border-radius: 36% 64% 55% 45% / 40% 58% 42% 60%; }
  75%  { border-radius: 62% 38% 45% 55% / 55% 38% 62% 45%; }
}

.dt-hdr__logo img.dt-hdr__logo-mark { height: 58px; width: 58px; }
.dt-hdr .dt-hdr__logo:hover img.dt-hdr__logo-mark { transform: scale(1.04); }

@media (max-width: 1023px) {
  .dt-hdr__logo img.dt-hdr__logo-mark { height: 42px; width: 42px; }
  .dt-hdr__mark::before,
  .dt-hdr__mark::after { inset: -5px; }
}

@media (max-width: 420px) {
  .dt-hdr__logo img.dt-hdr__logo-mark { height: 38px; width: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-hdr__mark::before,
  .dt-hdr__mark::after { transition: none !important; animation: none !important; }
}