/* ============================================================
   TW Header (Builder) — assets/css/techwyse-header-builder.css

   Stylesheet for the `twrb_header_builder` widget ONLY. It is a
   sibling of the original TW Header, not a replacement: every
   selector lives in its own `.twhb-` namespace and no id is used,
   so the two widgets can coexist on one site and neither this file
   nor the theme can reach into the other.

   Design values are the same TechWyse tokens the rest of the
   plugin uses (`techwyse-system.css` is still a dependency); the
   editable ones are read from custom properties the widget writes
   onto the wrapper's `style` attribute, which is what lets the
   Style tab drive real CSS instead of fighting inline styles.

   Editor safety: nothing here is `position:fixed`. The bar is in
   normal flow, mega panels are absolutely positioned against the
   wrapper (so they drop *under* the header instead of covering the
   canvas) and the mobile panel is a closed full-screen fixed layer. Pinning
   is added at runtime by techwyse-header-builder.js, which never
   runs inside the Elementor editor.
   ============================================================ */

/* ---------------- wrapper + editable tokens ---------------- */
.twhb-mount{ position:relative; }

.twhb{
  --twhb-bar-bg:#fff;
  --twhb-bar-border:var(--border-subtle,#E4E8EE);
  --twhb-link:var(--tw-ink-900,#141A24);
  --twhb-link-hover:var(--tw-cobalt-700,#1B3E93);
  --twhb-accent:var(--tw-green-500,#8CC63E);
  --twhb-mega-bg:#fff;
  /* The mega PANEL's own surface, a shade off the white the dropdown cards
     keep: the reference sits its columns on #FAFAFA so the hovered column's
     zircon tint reads as a lift rather than as a stain on white. Driven by the
     same "Submenu Background" control when that one is set — see `css_vars()`. */
  --twhb-mega-panel-bg:#FAFAFA;
  --twhb-mega-head:var(--tw-ink-900,#141A24);
  --twhb-mega-head-hover:var(--twhb-link-hover);
  --twhb-mega-link:var(--tw-ink-800,#292929);
  /* the hovered column, its hairlines, its number badge and the double-chevron
     that marks every link — the reference's own values, as brand tokens */
  --twhb-mega-tint:var(--tw-zircon,#F1F9FF);
  --twhb-mega-divider:var(--tw-ink-200,#E4E8EE);
  --twhb-mega-num-bg:var(--tw-cobalt-700,#1B3E93);
  --twhb-mega-num-fg:#ffffff;
  --twhb-mega-marker:var(--tw-cobalt-500,#3D66C6);
  --twhb-col-pad:min(var(--sp-cap,1000px),24px);
  --twhb-col-indent:20px;
  /* The mega menu's two type sizes, held as tokens so one breakpoint ladder
     drives both — and so the Level 1 heading always sits the same 1.5px ABOVE
     its Level 2 links, which is the hierarchy the panel is read by. The link
     metrics are tokens for a second reason: the double-chevron marker is
     positioned against the FIRST LINE of its link (see `.twhb-col a::before`),
     and that centre is arithmetic on exactly these three values. The heading
     keeps the same pair for the same reason: its number badge is centred on the
     FIRST LINE of the heading (see `.twhb-col-num`), which is arithmetic on the
     heading size, the heading line-height and the badge diameter. */
  --twhb-col-head-fs:16.5px;
  --twhb-col-head-lh:1.5;
  --twhb-col-num:22px;
  --twhb-col-link-fs:15px;
  --twhb-col-link-lh:1.5;
  --twhb-col-link-py:11px;
  --twhb-col-mark:13px;
  /* the band that closes the panel */
  --twhb-strip-bg:var(--tw-green-500,#8CC63E);
  --twhb-strip-fg:#ffffff;
  --twhb-strip-cta-bg:#ffffff;
  --twhb-strip-cta-fg:var(--tw-green-700,#5F9E22);
  /* mega menu right column — the reference's `.mega-feature`:
     `linear-gradient(150deg,var(--tw-cobalt-700),var(--tw-cobalt-900))`
     under white text. Held as tokens so the Style tab can drive the two
     gradient stops and the text colour without touching the rule. */
  --twhb-rc-from:var(--tw-cobalt-700,#1B3E93);
  --twhb-rc-to:var(--tw-cobalt-900,#0E2255);
  --twhb-rc-fg:#ffffff;
  --twhb-panel-bg:#ffffff;
  --twhb-panel-fg:var(--tw-ink-900,#141A24);
  /* the dimmed full-screen layer the mobile menu card sits on */
  --twhb-panel-veil:rgba(14,22,40,.55);
  --twhb-panel-line:var(--border-subtle,#E4E8EE);
  /* The bar's INNER content width — the measure the eye reads; the side
     padding always sits OUTSIDE it (see `--twhb-gutter` below). The reference
     header reads `--content-wide` straight, so this token carries that exact
     ladder — 100% / 720 / 960 / 1140 / 1460 — written out in the media blocks
     directly under this rule rather than read from the shared container
     system, which widens site chrome to `--content-chrome` (1720px), a
     measure the reference header does not use. The Style tab's Content Width
     control still overrides this token inline when the user sets one. */
  --twhb-max:100%;
  /* The reference's gutter is a hard 15px at every band, and its header adds
     `clamp(8px,1.6vw,28px)` on top of it so the bar keeps air beside the
     content until the centring term takes over. Both numbers are the
     reference's own, and both are header-local: the shared `--gutter` steps to
     20px from 1200px up, which would push the bar off the reference's padding.

     The full expression — `max(calc(gutter + clamp(8px,1.6vw,28px)),
     (100% - --twhb-max)/2)` — is written out at each of the two places that
     use it (`.twhb-bar` and `.twhb-mega-inner`) rather than held here as one
     more token: a custom property resolves its own `var()`s on the element it
     is declared on, so a token holding that expression would freeze
     `--twhb-max` at the wrapper's value and the per-panel override a mega menu
     prints on `.twhb-mega-inner` could never take effect. */
  --twhb-gutter:15px;
  --twhb-pad-y:22px;
  --twhb-pad-y-scrolled:9px;
  /* the shared timing of every normal <-> slim header change */
  --twhb-shrink-dur:.45s;
  --twhb-shrink-ease:cubic-bezier(.22,1,.36,1);
  /* the faster main <-> slim logo swap (fade, scale and width glide) */
  --twhb-logo-swap-dur:.22s;
  /* What the bar is actually PADDED with — the same indirection the logo uses
     three lines down, and for the same reason: the short-viewport block at the
     end of this file caps the drawn value without reassigning `--twhb-pad-y`,
     which it cannot do (the widget prints that one per instance at
     `.twhb.<uid>`, one class above every rule here). */
  --twhb-pad-fit:var(--twhb-pad-y);
  --twhb-pad-fit-scrolled:var(--twhb-pad-y-scrolled);
  --twhb-logo-h:96px;
  --twhb-logo-h-scrolled:58px;
  /* What the logo is actually DRAWN at. Out of the box it is the value above,
     byte for byte — the indirection exists so the short-viewport blocks at the
     end of this file can take the logo down without reassigning `--twhb-logo-h`
     itself, which they cannot do: the widget prints that one per instance (see
     `css_vars()`), at `.twhb.<uid>` — one class above every rule here. They cap
     this token instead, and every height declaration reads it. */
  --twhb-logo-fit:var(--twhb-logo-h);
  --twhb-logo-fit-scrolled:var(--twhb-logo-h-scrolled);
  /* The logo IMAGE's drawn height, separate from the slot above. The slot
     plus the bar padding still set the bar height; the image is centred in
     the slot and may grow into the padding (negative block margins hand the
     overflow back), so a taller logo eats top/bottom spacing instead of
     making the header taller. It stops `--twhb-logo-edge` short of the bar
     edges, and `--twhb-logo-img-max` lets a band cap it for width. The slim
     logo (shown once the bar shrinks) follows the same rule against the
     scrolled slot. The widget prints the -h values per breakpoint. */
  --twhb-logo-img-h:104px;
  --twhb-logo-slim-h:34px;
  --twhb-logo-edge:6px;
  --twhb-logo-img-max:1000px;
  --twhb-logo-img-fit:min(var(--twhb-logo-img-h),var(--twhb-logo-img-max),calc(var(--twhb-logo-fit) + 2 * var(--twhb-pad-fit) - 2 * var(--twhb-logo-edge)));
  --twhb-logo-img-fit-scrolled:min(var(--twhb-logo-img-h),var(--twhb-logo-img-max),calc(var(--twhb-logo-fit-scrolled) + 2 * var(--twhb-pad-fit-scrolled) - 2 * var(--twhb-logo-edge)));
  --twhb-logo-slim-fit:min(var(--twhb-logo-slim-h),calc(var(--twhb-logo-fit-scrolled) + 2 * var(--twhb-pad-fit-scrolled) - 2 * var(--twhb-logo-edge)));
  /* The BAR's gap. The reference puts its phone pill inside `.nav-main`, so
     the step between the last menu item and the pill is the NAV's gap there;
     here the pill is a sibling of the nav (it lives in `.twhb-actions`, which
     is what lets the compact breakpoint keep the icon and drop the label), so
     the bar gap carries that same step and reads the reference's nav value.
     Logo-to-nav is unaffected either way — the nav is the row's only flexible
     child, so what sits between it and the logo is whatever is left over. */
  --twhb-gap:clamp(20px,2vw,34px);
  /* The MAIN MENU's own item spacing — the reference's `.nav-main` gap, held
     flat at its lower bound: the step between two menu items is 20px at every
     width instead of growing to 34px on wide screens. The BAR's gap above is
     untouched, so logo | nav | actions keep the reference's fluid step. */
  --twhb-menu-gap:20px;
  --twhb-panel-w:760px;
  --twhb-z:200;

  position:relative;
  z-index:var(--twhb-z);
  /* the plugin-wide body stack, fallback list included, so the header reads in
     exactly the same faces as every other widget even if `techwyse-system.css`
     has not defined the token yet (see the FONT FAMILY LOCK in that file) */
  font-family:var(--font-body,"TWRB Poppins","Poppins","Helvetica Neue",Arial,sans-serif);
  color:var(--twhb-link);
  background:var(--twhb-bar-bg);
}

/* ---------------- the reference's container ladder ----------------
   `--content-wide` as the reference page declares it, scoped to this header:
   100% below 768px, then 720 / 960 / 1140 / 1460. Mobile-first, so each band
   replaces the one before it, and every block is `.twhb` (0,1,0) — one class
   BELOW the per-instance `<style>` the widget prints at `.twhb.<uid>`, so the
   Style tab's Content Width control still wins at every width, and below the
   per-panel `--twhb-max` a mega menu may set on its own wrapper. */
@media (min-width:768px){  .twhb{ --twhb-max:720px; } }
@media (min-width:992px){  .twhb{ --twhb-max:960px; } }
@media (min-width:1200px){ .twhb{ --twhb-max:1140px; } }
@media (min-width:1600px){ .twhb{ --twhb-max:1460px; } }

/* Form/interactive elements do not inherit the family from their ancestor by
   default — the UA stylesheet gives them its own. The header is built from
   `<button>` rows (menu toggles, carets, the burger), so hand the family back
   to inheritance here too, not only through the shared theme-isolation rule
   (which keys off `.elementor-widget-container` — a wrapper Elementor's
   "Optimized Markup" experiment removes). */
.twhb button,
.twhb input,
.twhb select,
.twhb textarea{ font-family:inherit; }

/* Runtime pinning (front end only — see the JS). `.twhb` carries the mega
   panels, so the whole wrapper is pinned, never just the bar: an absolutely
   positioned panel must keep measuring against a containing block that is
   still on screen. `.twhb-mount` keeps the vacated height.

   The z-index is the Style tab's own (`--twhb-z`, 200 out of the box), already
   set on `.twhb` in both states by the block above — it is restated here so a
   theme rule that happens to match the pinned bar cannot take the stack with
   it, and so the control still governs the pinned header. */
.twhb-mount.is-fixed > .twhb{
  position:fixed; top:0; left:0; right:0; width:auto;
  z-index:var(--twhb-z);
}

/* The WordPress toolbar is itself fixed at the top of the viewport for logged-in
   users, so the pinned bar starts below it instead of underneath it. The
   toolbar's own breakpoints: 32px tall above 782px, 46px below it, and not
   fixed at all under 601px. */
body.admin-bar .twhb-mount.is-fixed > .twhb{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .twhb-mount.is-fixed > .twhb{ top:46px; }
}
@media screen and (max-width:600px){
  body.admin-bar .twhb-mount.is-fixed > .twhb{ top:0; }
}

/* Ancestors the script marked because they would otherwise capture the pinned
   bar (see `capturesFixed()` in techwyse-header-builder.js): a transform,
   perspective, filter, backdrop-filter, paint/layout containment or a
   `will-change` naming one of them makes that element — not the viewport —
   the containing block of its `position:fixed` descendants, and the bar then
   scrolls away with the page. Only the header's own ancestor chain is ever
   marked, only while pinning is switched on, and only these properties are
   reset — layout, spacing and colour on those wrappers are untouched. */
.twhb-host{
  transform:none!important;
  perspective:none!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  contain:none!important;
  will-change:auto!important;
}

/* ---------------- skip link ---------------- */
.twhb .twhb-skip{
  position:absolute; left:16px; top:-72px; z-index:12;
  background:var(--tw-ink-900,#141A24); color:#fff;
  padding:12px 20px; border-radius:var(--radius-pill,999px);
  font-size:14px; text-decoration:none;
  transition:top .2s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb .twhb-skip:focus{ top:12px; color:#fff; }

/* ---------------- the bar ---------------- */
.twhb .twhb-bar{
  position:relative;
  display:flex; align-items:center; gap:var(--twhb-gap);
  padding:var(--twhb-pad-fit) max(calc(var(--twhb-gutter,15px) + clamp(8px,1.6vw,28px)),calc((100% - var(--twhb-max)) / 2));
  background:var(--twhb-bar-bg);
  border-bottom:1px solid var(--twhb-bar-border);
  box-shadow:0 2px 12px rgba(20,26,36,.04);
  transition:padding var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             background var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             box-shadow var(--twhb-shrink-dur) var(--twhb-shrink-ease);
}
.twhb.is-scrolled .twhb-bar{
  padding-top:var(--twhb-pad-fit-scrolled); padding-bottom:var(--twhb-pad-fit-scrolled);
  box-shadow:0 6px 24px rgba(20,26,36,.06);
}

.twhb .twhb-logo{ display:flex; align-items:center; flex:none; }
.twhb .twhb-logo img{
  display:block; width:auto;
  height:var(--twhb-logo-img-fit);
  margin:calc((var(--twhb-logo-fit) - var(--twhb-logo-img-fit)) / 2) 0;
  transition:height var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             margin var(--twhb-shrink-dur) var(--twhb-shrink-ease);
}
.twhb.is-scrolled .twhb-logo img{
  height:var(--twhb-logo-img-fit-scrolled);
  margin:calc((var(--twhb-logo-fit-scrolled) - var(--twhb-logo-img-fit-scrolled)) / 2) 0;
}
/* Slim header: the slim logo stands in for the main one once scrolled.
   Both images share one grid cell and CROSSFADE — the main logo shrinks,
   lifts and fades out while the slim one scales in from the left edge.
   `visibility` follows the fade (delayed on the way out) so only the
   visible logo is ever in the link's accessible name. When the script has
   read both images' aspect ratios (`is-sized`) the link's WIDTH is animated
   between the two drawn widths too, so the menu glides instead of jumping;
   the horizontal clip trims the outgoing main logo to that width. */
.twhb .twhb-logo.has-slim{
  display:grid; align-items:center; justify-items:start;
  transition:width var(--twhb-logo-swap-dur) var(--twhb-shrink-ease);
}
.twhb .twhb-logo.has-slim > img{
  grid-area:1 / 1; transform-origin:left center;
  transition:height var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             margin var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             transform var(--twhb-logo-swap-dur) var(--twhb-shrink-ease),
             opacity calc(var(--twhb-logo-swap-dur) * .7) ease,
             visibility 0s;
}
.twhb .twhb-logo .twhb-logo-slim{
  height:var(--twhb-logo-slim-fit);
  margin:calc((var(--twhb-logo-fit) - var(--twhb-logo-slim-fit)) / 2) 0;
  opacity:0; visibility:hidden; transform:scale(.7);
}
.twhb .twhb-logo.has-slim > .twhb-logo-slim,
.twhb.is-scrolled .twhb-logo.has-slim > .twhb-logo-main{
  transition:height var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             margin var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             transform var(--twhb-logo-swap-dur) var(--twhb-shrink-ease),
             opacity calc(var(--twhb-logo-swap-dur) * .7) ease,
             visibility 0s linear var(--twhb-logo-swap-dur);
}
.twhb.is-scrolled .twhb-logo.has-slim > .twhb-logo-main{
  opacity:0; visibility:hidden; transform:translateY(-4px) scale(.88);
}
.twhb.is-scrolled .twhb-logo.has-slim > .twhb-logo-slim{
  height:var(--twhb-logo-slim-fit);
  margin:calc((var(--twhb-logo-fit-scrolled) - var(--twhb-logo-slim-fit)) / 2) 0;
  opacity:1; visibility:visible; transform:none;
  transition:height var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             margin var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             transform var(--twhb-logo-swap-dur) var(--twhb-shrink-ease),
             opacity calc(var(--twhb-logo-swap-dur) * .7) ease calc(var(--twhb-logo-swap-dur) * .15),
             visibility 0s;
}
.twhb .twhb-logo.has-slim.is-sized{
  width:calc(var(--twhb-logo-img-fit) * var(--twhb-logo-ar-main));
  clip-path:inset(-100vh -6px);
}
.twhb.is-scrolled .twhb-logo.has-slim.is-sized{
  width:calc(var(--twhb-logo-slim-fit) * var(--twhb-logo-ar-slim));
}

/* Themes routinely ship `img{height:auto!important;max-width:100%!important}`,
   which would collapse the logo even against an inline style. */
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-logo img{
  height:var(--twhb-logo-img-fit)!important; width:auto!important; max-width:none!important;
  margin:calc((var(--twhb-logo-fit) - var(--twhb-logo-img-fit)) / 2) 0!important;
}
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb.is-scrolled .twhb-logo img{
  height:var(--twhb-logo-img-fit-scrolled)!important;
  margin:calc((var(--twhb-logo-fit-scrolled) - var(--twhb-logo-img-fit-scrolled)) / 2) 0!important;
}
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-logo.has-slim .twhb-logo-slim{
  height:var(--twhb-logo-slim-fit)!important;
  margin:calc((var(--twhb-logo-fit) - var(--twhb-logo-slim-fit)) / 2) 0!important;
}
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb.is-scrolled .twhb-logo.has-slim .twhb-logo-slim{
  height:var(--twhb-logo-slim-fit)!important;
  margin:calc((var(--twhb-logo-fit-scrolled) - var(--twhb-logo-slim-fit)) / 2) 0!important;
}

/* Slim header actions: the phone pill and the button CTA come down with the
   bar so they no longer hold it tall. The CTA is a shared `.btn.btn-sm`
   pinned by the system BUTTON LOCK, so it is written through the widget
   scope with `!important`, like the compact-desktop block below. */
.twhb .twhb-actions .twhb-phone,
.twhb .twhb-phone .twhb-pico,
.twhb .twhb-phone .twhb-pl b,
.twhb .twhb-phone .twhb-pl small{
  transition:padding var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             gap var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             width var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             height var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             font-size var(--twhb-shrink-dur) var(--twhb-shrink-ease),
             background .22s var(--ease-out,cubic-bezier(.16,1,.3,1)),
             transform .22s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb.is-scrolled .twhb-phone{ gap:9px; padding:5px 16px 5px 6px; }
.twhb.is-scrolled .twhb-phone .twhb-pico{ width:30px; height:30px; }
.twhb.is-scrolled .twhb-phone .twhb-pl b{ font-size:15px; }
.twhb.is-scrolled .twhb-phone .twhb-pl small{ font-size:9.5px; }
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-cta.btn{
  transition:background .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out),box-shadow .18s var(--ease-out),transform .18s var(--ease-out),
             font-size var(--twhb-shrink-dur) var(--twhb-shrink-ease),padding var(--twhb-shrink-dur) var(--twhb-shrink-ease),gap var(--twhb-shrink-dur) var(--twhb-shrink-ease);
}
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-cta.btn .circ{
  transition:transform .32s var(--ease-out),width var(--twhb-shrink-dur) var(--twhb-shrink-ease),height var(--twhb-shrink-dur) var(--twhb-shrink-ease);
}
/* With the shared CTA hover system on (`.cta-fx`, techwyse-system.css) the
   button's transition list is pinned there with `!important`; restate it here
   together with the slim-header shrink so neither drops out. */
@media(prefers-reduced-motion:no-preference){
  :is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-cta.btn.cta-fx{
    transition:background .18s var(--ease-out),color .18s var(--ease-out),border-color .45s var(--ease-out) .08s,box-shadow .6s var(--ease-out),transform .25s var(--ease-out),
               font-size var(--twhb-shrink-dur) var(--twhb-shrink-ease),padding var(--twhb-shrink-dur) var(--twhb-shrink-ease),gap var(--twhb-shrink-dur) var(--twhb-shrink-ease)!important;
  }
  :is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-cta.btn.cta-fx .circ{
    transition:transform .32s var(--ease-out),color .22s var(--ease-out),background-color .22s var(--ease-out),width var(--twhb-shrink-dur) var(--twhb-shrink-ease),height var(--twhb-shrink-dur) var(--twhb-shrink-ease)!important;
  }
}
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb.is-scrolled .twhb-cta.btn{
  font-size:12.5px!important; gap:8px!important; padding:6px 8px 6px 14px!important;
}
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb.is-scrolled .twhb-cta.btn .circ{
  width:20px!important; height:20px!important; font-size:12px!important;
}

/* scroll progress */
.twhb .twhb-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg,var(--twhb-link-hover),var(--twhb-accent));
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb.is-scrolled .twhb-progress{ opacity:1; }

/* ---------------- desktop navigation ---------------- */
.twhb .twhb-nav{
  flex:1 1 auto; display:flex; align-items:center; justify-content:flex-end;
  gap:var(--twhb-gap); min-width:0;
}
.twhb .twhb-menu{
  display:flex; align-items:center; gap:var(--twhb-menu-gap);
  list-style:none!important; margin:0!important; padding:0!important;
}
.twhb .twhb-menu > li{ margin:0!important; padding:0!important; list-style:none!important; }

.twhb .twhb-item{ position:relative; display:flex; align-items:center; }
.twhb .twhb-item--mega{ position:static; }
.twhb .twhb-item--anchored{ position:relative; }

.twhb .twhb-link{
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap; font-size:16.5px; letter-spacing:.005em;
  color:var(--twhb-link); text-decoration:none;
  /* first-level items only: 6px top / bottom (was 10px) keeps the main menu
     row tight; dropdown / mega links keep their own spacing */
  background:none; border:0; padding:6px 2px; cursor:pointer;
  position:relative; font-family:inherit;
  transition:color .22s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
/* The underline is the ACTIVE marker, and only that: it is drawn at full
   width on the page you are on and is not drawn at all otherwise. Hovering a
   first-level item changes its COLOUR and nothing else — no sweep, no slide,
   no transform — so there is no width to animate and no transition here. */
.twhb .twhb-link::after{
  content:""; position:absolute; left:0; right:0; bottom:1px; height:2px;
  border-radius:2px; background:linear-gradient(90deg,var(--twhb-link-hover),var(--twhb-accent));
  opacity:0; pointer-events:none;
}
.twhb .twhb-item:hover .twhb-link:not([href*="tel:" i]),
.twhb .twhb-item:focus-within .twhb-link:not([href*="tel:" i]),
.twhb .twhb-item.is-open .twhb-link:not([href*="tel:" i]){ color:var(--twhb-link-hover); }
.twhb .twhb-item.is-current .twhb-link::after{ opacity:1; }
.twhb .twhb-item.is-current .twhb-link{ color:var(--twhb-link-hover); }
/* the same active state one level down: dropdown panels, mega menu columns
   and the mobile panel. Each colour matches the hover colour that link
   already had, so an active link that is also hovered never changes. */
.twhb .twhb-drop-inner a.is-current{ background:var(--tw-zircon,#F1F9FF); color:var(--twhb-link-hover); }
.twhb .twhb-col a.is-current{ color:var(--twhb-link-hover); }
.twhb .twhb-plink.is-current{ color:var(--twhb-link-hover); }
.twhb .twhb-psub a.is-current{ color:var(--twhb-link-hover); border-left-color:var(--twhb-accent); }

/* The first-level disclosure button: the item's dropdown ARROW, and the item's
   toggle. It is printed for an item WITH children only — an item with none has
   neither button nor arrow — and it carries `aria-expanded` plus the hover
   intent the script binds to `[data-twhb-toggle]`.

   `margin-left` repeats `.twhb-link`'s own `gap`, so the arrow sits the same
   6px off its label whether it is this sibling button (the item links
   somewhere of its own) or the chevron printed inline inside a
   `<button class="twhb-link">` (the label itself is the toggle). The vertical
   padding is tap target only: it stays inside the link's own row, so the bar
   height and the underline's position are unchanged. */
.twhb .twhb-caret{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  margin:0 0 0 6px; padding:6px 0; border:0; line-height:0;
  background:none; color:var(--twhb-link); cursor:pointer;
}
.twhb .twhb-caret:focus-visible{
  border-radius:50%;
  outline:2px solid var(--twhb-link-hover); outline-offset:2px;
}
/* The chevron. One glyph for the first-level bar and for the mobile panel's
   accordion caret (`.twhb-pcaret`), which recolours it for the dark panel. */
.twhb .twhb-chev{
  display:block; flex:none;
  width:20px; height:20px; padding:3px; box-sizing:border-box; border-radius:50%;
  background:var(--tw-zircon,#F1F9FF); color:var(--twhb-link-hover); opacity:.85;
  transition:transform .34s var(--ease-out,cubic-bezier(.16,1,.3,1)),opacity .22s,background .24s,color .24s;
}
/* Rotate on open. On the first level hover IS open — the script gives the item
   `is-open` on hover intent — and `:focus-within` is the keyboard's route to
   the same panel, so the arrow turns for all three, in both markup shapes. */
.twhb .twhb-item:hover > .twhb-caret .twhb-chev,
.twhb .twhb-item:focus-within > .twhb-caret .twhb-chev,
.twhb .twhb-item.is-open > .twhb-caret .twhb-chev,
.twhb .twhb-item:hover > .twhb-link .twhb-chev,
.twhb .twhb-item:focus-within > .twhb-link .twhb-chev,
.twhb .twhb-item.is-open > .twhb-link .twhb-chev{
  transform:rotate(180deg); opacity:1;
}

/* ---------------- submenus (shared open/close) ---------------- */
.twhb .twhb-sub{
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .28s var(--ease-out,cubic-bezier(.16,1,.3,1)),transform .28s var(--ease-out,cubic-bezier(.16,1,.3,1));
  z-index:6;
}
/* Opening is `.is-open` (hover intent lives in the JS, which holds the panel
   open while the pointer crosses the bar's padding) plus `:focus-within` for
   keyboard users, who never cross anything. */
.twhb .twhb-item:focus-within > .twhb-sub,
.twhb .twhb-item.is-open > .twhb-sub{ opacity:1; visibility:visible; transform:translateY(0); }

/* plain dropdown */
.twhb .twhb-drop{
  position:absolute; top:100%; left:50%; margin-left:-125px; min-width:250px;
  /* 14px + the 4px the first-level link gave up, so the panel stays put */
  padding-top:18px;
}
.twhb .twhb-drop-inner{
  background:var(--twhb-mega-bg);
  border:1px solid var(--twhb-bar-border);
  border-radius:var(--radius-lg,14px);
  box-shadow:var(--shadow-lg,0 18px 40px rgba(20,26,36,.12));
  padding:14px;
}
.twhb .twhb-drop-inner a{
  display:block; padding:11px 14px; border-radius:var(--radius-md,8px);
  color:var(--twhb-mega-link); font-size:14.5px; text-decoration:none;
  transition:background .18s,color .18s;
}
.twhb .twhb-drop-inner a:not([href*="tel:" i]):hover{ background:var(--tw-zircon,#F1F9FF); color:var(--twhb-link-hover); }

/* mega panel — full-bleed across the header by default */
.twhb .twhb-mega{ position:absolute; top:100%; left:0; right:0; }
.twhb .twhb-mega--anchored{
  left:50%; right:auto; width:var(--twhb-panel-w,760px);
  margin-left:calc(var(--twhb-panel-w,760px) / -2); padding-top:18px;
}
/* `.twhb-mega-inner` is the WIDTH box and nothing else: its side padding — the
   bar's own expression, so the panel's card lines up edge for edge with the
   content above it — is what centres the panel at the wrapper width, and it is
   the one declaration the per-slot responsive width blocks override (see
   `mega_width_blocks()` in the widget). The surface moved onto
   `.twhb-mega-card` inside it, because the reference draws the panel as a CARD
   sitting at the container width rather than as a full-bleed band. */
.twhb .twhb-mega-inner{
  padding:0 max(calc(var(--twhb-gutter,15px) + clamp(8px,1.6vw,28px)),calc((100% - var(--twhb-max)) / 2));
}
.twhb .twhb-mega-card{
  background:var(--twhb-mega-panel-bg);
  border:1px solid var(--twhb-mega-divider);
  border-top:0;
  box-shadow:0 30px 60px rgba(20,26,36,.12);
  /* the columns run edge to edge inside it, so the card clips them rather than
     letting a tinted column or the strip square off a rounded corner */
  overflow:hidden;
}
.twhb .twhb-mega--anchored .twhb-mega-inner{ padding:0; }
.twhb .twhb-mega--anchored .twhb-mega-card{
  border:1px solid var(--twhb-mega-divider);
  border-radius:var(--radius-lg,14px);
  box-shadow:var(--shadow-lg,0 18px 40px rgba(20,26,36,.12));
}
/* FLEX. The panel is a single row of equal columns: the widget prints the
   column COUNT inline as `--twhb-mega-n`, and each column takes an exact
   share of what the gaps leave, which is what `repeat(N,minmax(0,1fr))`
   resolved to. `gap` stays only as the gap BETWEEN the columns.

   The share is written as a weight over a sum so the feature card can be
   given a width of its own: by default every track weighs 1 against a sum of
   `--twhb-mega-n`, which is the equal split above, unchanged. An item given a
   Right Column Width prints the weights as percentages against a sum of 100 —
   the card takes the share asked for and the link columns split the rest. */
.twhb .twhb-mega-grid{
  --twhb-mega-n:4;
  /* Flush columns. The reference separates them with a hairline, not with air,
     so the hovered column's tint can fill its whole track — which it cannot do
     if a gap breaks the run. The variable stays: the arithmetic below, the
     feature card's inset and the wrapped two-up layout all read it. */
  --twhb-mega-gap:0px;
  --twhb-mega-free:calc(100% - (var(--twhb-mega-n) - 1) * var(--twhb-mega-gap));
  --twhb-mega-sum:4.1;
  --twhb-mega-c1:1.1;
  --twhb-mega-cw:1;
  --twhb-mega-rc:1;
  display:flex; flex-wrap:wrap; column-gap:var(--twhb-mega-gap);
}
.twhb .twhb-mega-grid > *{
  flex:0 0 calc(var(--twhb-mega-free) * var(--twhb-mega-cw) / var(--twhb-mega-sum));
  min-width:0;
}
/* the reference's `1.1fr 1fr 1fr 1fr`: the first link column carries the
   extra tenth. Kept BEFORE the feature rule — both weigh 0,3,0, so source
   order is what lets a right column that is also the first (and only) child
   still take its own width. */
.twhb .twhb-mega-grid > :first-child{
  flex-basis:calc(var(--twhb-mega-free) * var(--twhb-mega-c1) / var(--twhb-mega-sum));
}
.twhb .twhb-mega-grid > .twhb-feature{
  flex-basis:calc(var(--twhb-mega-free) * var(--twhb-mega-rc) / var(--twhb-mega-sum));
}
@media (max-width:720px){
  .twhb .twhb-mega-grid > *,
  .twhb .twhb-mega-grid > :first-child,
  .twhb .twhb-mega-grid > .twhb-feature{
    flex-basis:calc((100% - var(--twhb-mega-gap)) / 2);
  }
  .twhb .twhb-mega-grid > *:nth-child(n+3){ margin-top:var(--twhb-mega-gap); }
  /* wrapped: the first column of each row opens it, so it carries no divider,
     and the rows are separated across instead of down */
  .twhb .twhb-mega-grid > *:nth-child(odd){ border-left:0; }
  .twhb .twhb-mega-grid > *:nth-child(n+3){ border-top:1px solid var(--twhb-mega-divider); }
}

/* ---------------- mega menu columns ----------------
   One column is one Level 1 menu item: its icon, a numbered heading and its
   own children as a divided list. The column stretches to the panel's full
   height (the flex default) so hovering it tints the whole track, exactly as
   the reference does — which is also why the vertical rules are borders on the
   columns themselves rather than a `gap`. */
.twhb .twhb-col{
  padding:min(var(--sp-cap,1000px),30px) var(--twhb-col-pad) min(var(--sp-cap,1000px),34px);
  transition:background .24s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb .twhb-mega-grid > .twhb-col + .twhb-col{
  border-left:1px solid var(--twhb-mega-divider);
}
.twhb .twhb-col:is(:hover,:focus-within){ background:var(--twhb-mega-tint); }

/* The illustration. Nothing is printed when the menu item has no icon set, so
   a column without one simply starts at its heading — no reserved space. */
.twhb .twhb-col > .twhb-col-ico{
  display:block; margin-bottom:18px;
  transition:transform .32s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb .twhb-col > .twhb-col-ico img{
  display:block; width:auto; height:auto;
  max-height:min(var(--sp-cap,1000px),68px); max-width:100%;
}
.twhb .twhb-col:is(:hover,:focus-within) > .twhb-col-ico{ transform:translateY(-2px); }

/* The column heading. A neutral <div>, not an <h4> — the mega menu carries no
   heading tags at all — so every value it used to get from the heading element
   (size, weight, margin) is stated here, where it already was. */
.twhb .twhb-col > .twhb-col-title{
  display:flex; align-items:center; gap:9px;
  font-size:var(--twhb-col-head-fs); letter-spacing:var(--label-tracking,.16em);
  /* stated rather than inherited (it is the same 1.5 the shared isolation
     block hands down, so nothing shifts) so the number badge's first-line
     arithmetic below has a line-height it can actually read */
  line-height:var(--twhb-col-head-lh);
  text-transform:uppercase; color:var(--twhb-mega-head); font-weight:600;
  margin:0 0 14px!important;
  transition:color .2s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb .twhb-col:is(:hover,:focus-within) > .twhb-col-title{ color:var(--twhb-mega-head-hover); }

/* The heading as a LINK. A Level 1 menu item is a real page, so the heading
   is an anchor now — but it is still the heading, not a list row: every
   `.twhb-col a` rule below (block display, the row padding, the 15px size,
   the hairline and the double-chevron marker) is a `.twhb-col` descendant
   rule and would otherwise claim it. Restating the heading's own values here,
   at a higher specificity, is what keeps it byte-for-byte the heading it was
   — the anchor only adds the click target. */
.twhb .twhb-col > .twhb-col-title > a.twhb-col-head{
  display:flex; align-items:center; gap:9px;
  padding:0; border:0; background:none;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:inherit; text-decoration:none;
  transition:color .2s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb .twhb-col > .twhb-col-title > a.twhb-col-head::before{ content:none; }
/* hovering the heading itself reads as hovering the column — the same colour
   the column hover already gives it, and none of the list row's padding nudge */
.twhb .twhb-col > .twhb-col-title > a.twhb-col-head:hover,
.twhb .twhb-col > .twhb-col-title > a.twhb-col-head:focus-visible{
  color:var(--twhb-mega-head-hover); padding-left:0;
}
/* The number badge. It is centred on the heading's FIRST LINE, not on the
   heading's box: `align-self:flex-start` takes it off the row's centre line and
   the margin-top puts it back on the centre of one line box — half a line box
   minus half the badge. A label that wraps to two lines therefore keeps its
   number beside the first line instead of sliding to the middle of the block,
   and a one-line label is byte-for-byte where it already was (the row is one
   line box tall, so first-line centre and box centre are the same point).

   `align-self` rather than `align-items` on the parent so ONLY the badge moves:
   the heading — and the anchor that wraps it when the Level 1 item links to its
   page — stays the centred flex row it was. Same arithmetic at every
   breakpoint; all three values it reads are tokens. */
.twhb .twhb-col .twhb-col-num{
  flex:none; align-self:flex-start;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--twhb-col-num); height:var(--twhb-col-num); border-radius:50%;
  margin-top:calc((var(--twhb-col-head-fs) * var(--twhb-col-head-lh) - var(--twhb-col-num)) / 2);
  background:var(--twhb-mega-num-bg); color:var(--twhb-mega-num-fg);
  font-size:11px; letter-spacing:0; line-height:1;
}
.twhb .twhb-col .twhb-col-label{ min-width:0; }

/* The link list is indented to sit under the heading's text rather than under
   its badge, and its hairlines run the width of that list — the reference's
   own inset. The last row closes the column, so it carries none. */
.twhb .twhb-col > .twhb-col-links{ margin-left:var(--twhb-col-indent); }
.twhb .twhb-col a{
  position:relative;
  display:block;
  padding:var(--twhb-col-link-py) 0 var(--twhb-col-link-py) var(--twhb-col-indent);
  font-size:var(--twhb-col-link-fs);
  /* stated rather than inherited (it is the same 1.5 the shared isolation
     block hands down) so the marker's first-line arithmetic below has a
     line-height it can actually read */
  line-height:var(--twhb-col-link-lh);
  text-decoration:none; color:var(--twhb-mega-link); font-weight:500;
  border-bottom:1px solid var(--twhb-mega-divider);
  transition:color .18s,padding-left .22s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb .twhb-col > .twhb-col-links > a:last-child{ border-bottom:0; }
/* the double chevron. A mask rather than a background image, so the one data
   URI takes whatever colour the marker token (or a hover) gives it.

   It is centred on the link's FIRST LINE, not on the link's box: the offset is
   the top padding plus half of one line box, so a label that wraps to two
   lines (or carries a `.twhb-desc` under it) keeps its marker beside the first
   line instead of sliding down to the middle of the block. Same arithmetic at
   every breakpoint — the three values it reads are tokens. */
.twhb .twhb-col a::before{
  content:""; position:absolute; left:0;
  top:calc(var(--twhb-col-link-py) + (var(--twhb-col-link-fs) * var(--twhb-col-link-lh)) / 2);
  width:var(--twhb-col-mark); height:var(--twhb-col-mark);
  margin-top:calc(var(--twhb-col-mark) / -2);
  background-color:var(--twhb-mega-marker); opacity:.82;
  -webkit-mask:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" stroke="%23000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M1.8 2.4 5.3 6 1.8 9.6"/%3E%3Cpath d="M6.4 2.4 9.9 6 6.4 9.6"/%3E%3C/svg%3E') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" stroke="%23000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M1.8 2.4 5.3 6 1.8 9.6"/%3E%3Cpath d="M6.4 2.4 9.9 6 6.4 9.6"/%3E%3C/svg%3E') center/contain no-repeat;
  transition:opacity .18s,background-color .18s;
}
.twhb .twhb-col a:not([href*="tel:" i]):hover{
  color:var(--twhb-link-hover);
  padding-left:calc(var(--twhb-col-indent) + 6px);
}
.twhb .twhb-col a:not([href*="tel:" i]):hover::before{
  opacity:1; background-color:var(--twhb-link-hover);
}
.twhb .twhb-col a .twhb-desc{
  display:block; font-size:13px; line-height:1.4; color:var(--tw-ink-500,#6B7280); margin-top:2px;
}

/* ---------------- mega menu bottom strip ----------------
   The band that closes the panel: an illustration, the copy and one button.
   Its content is each mega menu's own (the widget's Mega Menu tab, Right
   Column area), never the template, so nothing here assumes any wording. */
.twhb .twhb-mega-strip{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:min(var(--sp-cap,1000px),24px);
  padding:min(var(--sp-cap,1000px),18px) var(--twhb-col-pad);
  background:var(--twhb-strip-bg); color:var(--twhb-strip-fg);
}
/* the reference's soft darker disc, held behind the copy */
.twhb .twhb-mega-strip::before{
  content:""; position:absolute; left:14%; top:50%;
  width:340px; height:340px; margin-top:-170px; border-radius:50%;
  background:rgba(20,26,36,.06); pointer-events:none;
}
.twhb .twhb-mega-strip > *{ position:relative; }
.twhb .twhb-mega-strip .twhb-strip-ico{ flex:none; display:block; }
.twhb .twhb-mega-strip .twhb-strip-ico img{
  display:block; width:auto; height:auto;
  max-height:min(var(--sp-cap,1000px),70px); max-width:140px;
}
.twhb .twhb-mega-strip .twhb-strip-copy{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;
}
.twhb .twhb-mega-strip .twhb-strip-title{
  font-size:clamp(1.35rem,2vw,1.9rem); line-height:1.1;
  letter-spacing:-.005em; color:var(--twhb-strip-fg);
}
.twhb .twhb-mega-strip .twhb-strip-sub{
  font-size:clamp(.95rem,1.1vw,1.1rem); line-height:1.35; color:var(--twhb-strip-fg);
}
.twhb .twhb-mega-strip .twhb-strip-cta{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px min(var(--sp-cap,1000px),28px);
  border-radius:var(--radius-pill,999px);
  background:var(--twhb-strip-cta-bg); color:var(--twhb-strip-cta-fg);
  font-size:14px; letter-spacing:var(--label-tracking,.16em); text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  transition:transform .22s var(--ease-out,cubic-bezier(.16,1,.3,1)),box-shadow .22s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb .twhb-mega-strip .twhb-strip-cta:not([href*="tel:" i]):hover{
  transform:translateY(-2px); box-shadow:0 14px 28px rgba(20,26,36,.18);
}

/* Narrow desktops: the panel still has four tracks to fit, so the column
   padding and the illustrations give ground before the type does. */
@media (max-width:1280px){
  /* the type steps down as a pair, so the heading keeps its 1.5px lead over
     the links — and both the link marker and the heading's number badge
     follow, because each is positioned off these same tokens rather than off
     a number written once at the top */
  .twhb{
    --twhb-col-pad:min(var(--sp-cap,1000px),18px); --twhb-col-indent:16px;
    --twhb-col-head-fs:16px; --twhb-col-link-fs:14.5px; --twhb-col-link-py:9px;
  }
  .twhb .twhb-col > .twhb-col-ico img{ max-height:min(var(--sp-cap,1000px),52px); }
  .twhb .twhb-mega-strip .twhb-strip-ico img{ max-height:min(var(--sp-cap,1000px),56px); }
}

/* ---------------- mega menu right column ----------------
   The reference's `.mega-feature`: a cobalt gradient card closing the
   panel, white text on it, a green kicker and a green text CTA. Every
   value below is the reference's own — the gradient angle and stops,
   the 14px radius, 26px padding, the display-face title at 1.9rem/.95
   and the `.navlink`-sized CTA. */
.twhb .twhb-feature{
  background:linear-gradient(150deg,var(--twhb-rc-from),var(--twhb-rc-to));
  border-radius:var(--radius-lg,14px);
  padding:min(var(--sp-cap,1000px),26px);
  color:var(--twhb-rc-fg);
  /* The columns run flush now, so the card buys its own air back with a
     TRANSPARENT border rather than a margin: under the project's global
     `box-sizing:border-box` a border is inside `flex-basis`, so the track
     arithmetic above is untouched, while a margin would overflow the row.
     `background-clip` keeps the gradient off that border. */
  border:min(var(--sp-cap,1000px),26px) solid transparent;
  background-clip:padding-box;
  align-self:center;
}
.twhb .twhb-feature img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius-md,8px); margin-bottom:14px;
}
.twhb .twhb-feature .twhb-feature-kicker{
  display:block; font-size:var(--label-sm,.6875rem);
  letter-spacing:var(--label-tracking,.16em); text-transform:uppercase;
  color:var(--twhb-accent); font-weight:600;
}
/* the one element in this header set in the display face — the reference
   prints it through `.tw-display`, i.e. uppercase, .018em tracking and the
   .94 ink that keeps single-weight Bebas from reading as a solid block */
.twhb .twhb-feature .twhb-feature-title{
  font-family:var(--font-display,"TWRB Bebas Neue","Bebas Neue","Oswald","Arial Narrow",sans-serif);
  font-size:1.9rem; line-height:.95; color:var(--twhb-rc-fg); margin-top:8px;
  text-transform:uppercase; letter-spacing:.018em; opacity:.94; font-weight:400;
}
.twhb .twhb-feature p{
  font-size:14px; line-height:1.5; margin-top:10px!important;
  color:var(--twhb-rc-fg); opacity:.72;
}
.twhb .twhb-feature .twhb-feature-cta{
  display:inline-block; margin-top:14px; padding:10px 2px;
  font-size:16.5px; letter-spacing:.005em; font-weight:600;
  color:var(--twhb-accent); text-decoration:none;
  transition:color .22s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb .twhb-feature .twhb-feature-cta:not([href*="tel:" i]):hover{ color:var(--twhb-rc-fg); }

/* ---------------- header actions ---------------- */
.twhb .twhb-actions{ display:flex; align-items:center; gap:14px; flex:none; }

.twhb .twhb-phone{
  display:inline-flex; align-items:center; gap:13px;
  background:var(--tw-ink-900,#141A24); color:#fff; text-decoration:none;
  border-radius:var(--radius-pill,999px); padding:10px 22px 10px 13px;
  transition:background .22s var(--ease-out,cubic-bezier(.16,1,.3,1)),transform .22s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb .twhb-phone .twhb-pico{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--twhb-accent); color:var(--tw-ink-900,#141A24);
  display:flex; align-items:center; justify-content:center;
}
.twhb .twhb-phone .twhb-pl{ display:flex; flex-direction:column; line-height:1.1; white-space:nowrap; }
.twhb .twhb-phone .twhb-pl small{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6);
}
.twhb .twhb-phone .twhb-pl b{ font-size:19px; letter-spacing:.01em; }

.twhb .twhb-cta{ flex:none; }

/* burger — hidden until the compact breakpoint (the per-instance <style>) */
.twhb .twhb-burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; padding:8px; cursor:pointer;
}
.twhb .twhb-burger span{
  display:block; width:26px; height:2px; border-radius:2px;
  background:var(--twhb-link); transition:background .18s,transform .28s var(--ease-out,cubic-bezier(.16,1,.3,1)),opacity .2s;
}
.twhb .twhb-burger:hover span{ background:var(--twhb-link-hover); }
.twhb.is-open .twhb-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.twhb.is-open .twhb-burger span:nth-child(2){ opacity:0; }
.twhb.is-open .twhb-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------- mobile panel ----------------
   A full-screen layer (`.twhb-panel`) that dims the page, holding one white
   card (`.twhb-pbox`) inset to 90% of the viewport in both directions. Only
   the card scrolls; the page behind it is locked by the script
   (`html.twhb-lock`) and a click on the dimmed area closes the menu. */
.twhb .twhb-panel{
  position:fixed; top:0; left:0; right:0; bottom:0;
  width:100vw; height:100vh; height:100dvh;
  align-items:center; justify-content:center;
  background:var(--twhb-panel-veil);
  overflow:hidden; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease-out,cubic-bezier(.16,1,.3,1)),visibility 0s linear .3s;
  z-index:2147483000;
}
.twhb.is-open .twhb-panel{
  opacity:1; visibility:visible;
  transition:opacity .3s var(--ease-out,cubic-bezier(.16,1,.3,1)),visibility 0s;
}
.twhb .twhb-pbox{
  display:flex; flex-direction:column;
  width:90vw; height:90vh; height:90dvh; box-sizing:border-box;
  background:var(--twhb-panel-bg); color:var(--twhb-panel-fg);
  border-radius:var(--radius-lg,14px);
  box-shadow:0 30px 80px rgba(14,22,40,.35);
  padding:0 min(var(--sp-cap,1000px),28px) min(var(--sp-cap,1000px),28px);
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  transform:translateY(12px) scale(.98);
  transition:transform .32s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb.is-open .twhb-pbox{ transform:none; }

/* the card's own header: logo on the left and a close control pinned to the
   right edge, held at the top while the list scrolls under it */
.twhb .twhb-phead{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 calc(-1 * min(var(--sp-cap,1000px),28px)) 6px;
  padding:16px min(var(--sp-cap,1000px),28px);
  background:var(--twhb-panel-bg);
  border-bottom:1px solid var(--twhb-panel-line);
}
.twhb .twhb-plogo{ display:flex; align-items:center; flex:none; margin-right:auto; }
.twhb .twhb-plogo img{ display:block; height:56px; width:auto; }
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-plogo img{
  height:56px!important; width:auto!important; max-width:none!important;
}
.twhb .twhb-pclose{
  position:relative; flex:none; width:40px; height:40px; padding:0;
  margin:0 0 0 auto!important; align-self:center;
  border:1px solid var(--twhb-panel-line); border-radius:50%;
  background:transparent; color:var(--twhb-panel-fg); cursor:pointer;
  transition:border-color .2s,background .2s;
}
.twhb .twhb-pclose span{
  position:absolute; left:50%; top:50%; width:16px; height:2px; margin:-1px 0 0 -8px;
  border-radius:2px; background:currentColor; transform:rotate(45deg);
}
.twhb .twhb-pclose span + span{ transform:rotate(-45deg); }
.twhb .twhb-pclose:hover,
.twhb .twhb-pclose:focus-visible{ border-color:var(--twhb-link-hover); color:var(--twhb-link-hover); }

/* while the menu is open the header's own stack is lifted above the page, so
   the full-screen layer is not clipped under another positioned element */
.twhb.is-open,
.twhb-mount.is-fixed > .twhb.is-open{ z-index:2147483000; }

/* page scroll lock while the menu is open (added by the script) */
html.twhb-lock,
html.twhb-lock body{ overflow:hidden!important; }

.twhb .twhb-plist{ list-style:none!important; margin:0!important; padding:0!important; }
.twhb .twhb-plist > li{ margin:0!important; padding:0!important; list-style:none!important; border-bottom:1px solid var(--twhb-panel-line); }
.twhb .twhb-prow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.twhb .twhb-plink{
  flex:1 1 auto; display:block; padding:16px 0; font-size:17px; letter-spacing:.01em;
  color:var(--twhb-panel-fg); text-decoration:none;
}
.twhb .twhb-plink:not([href*="tel:" i]):hover{ color:var(--twhb-link-hover); }
/* a menu row with no link of its own opens its accordion instead */
.twhb button.twhb-plink{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:17px;
}
.twhb .twhb-pcaret{
  flex:none; background:none; border:0; cursor:pointer; padding:12px 4px;
  color:var(--twhb-panel-fg); line-height:0;
}
.twhb .twhb-pcaret .twhb-chev{ background:var(--tw-zircon,#F1F9FF); color:var(--twhb-link-hover); }
.twhb .twhb-pitem.is-open .twhb-pcaret .twhb-chev{ transform:rotate(180deg); background:var(--twhb-link-hover); color:#fff; }

/* Accordion slide: the grid row eases between 0fr and 1fr so the submenu
   opens and closes at its own natural height. The inner wrapper carries the
   padding and clips while the row is collapsed; `visibility` is held until the
   close finishes, so collapsed links drop out of the tab order. */
.twhb .twhb-psub{
  display:grid; grid-template-rows:0fr; overflow:hidden; visibility:hidden;
  transition:grid-template-rows .38s var(--ease-out,cubic-bezier(.16,1,.3,1)),visibility 0s linear .38s;
}
.twhb .twhb-pitem.is-open .twhb-psub{
  grid-template-rows:1fr; visibility:visible;
  transition:grid-template-rows .38s var(--ease-out,cubic-bezier(.16,1,.3,1)),visibility 0s;
}
.twhb .twhb-psub-in{
  min-height:0; overflow:hidden; padding:2px 0 16px;
  opacity:0; transform:translateY(-6px);
  transition:opacity .28s ease,transform .38s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.twhb .twhb-pitem.is-open .twhb-psub-in{ opacity:1; transform:none; }
/* The mobile group heading carries the same icon and the same number as the
   desktop column it stands for — the panel is the same menu, read on a phone. */
.twhb .twhb-psub .twhb-pgroup{
  display:flex; align-items:center; gap:8px;
  font-size:var(--label-sm,.6875rem); letter-spacing:var(--label-tracking,.16em);
  text-transform:uppercase; color:var(--twhb-link-hover); margin:14px 0 6px;
}
.twhb .twhb-psub .twhb-pgroup-ico{ flex:none; display:block; }
.twhb .twhb-psub .twhb-pgroup-ico img{
  display:block; width:auto; height:auto; max-height:26px; max-width:32px;
}
.twhb .twhb-psub .twhb-pnum{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:var(--twhb-mega-num-bg); color:var(--twhb-mega-num-fg);
  font-size:10.5px; letter-spacing:0; line-height:1;
}
.twhb .twhb-psub .twhb-pgroup-label{ min-width:0; }
.twhb .twhb-psub a{
  display:block; padding:9px 0 9px 14px; font-size:15px;
  color:var(--tw-ink-700,#3A4352); text-decoration:none;
  border-left:1px solid var(--twhb-panel-line);
}
.twhb .twhb-psub a:not([href*="tel:" i]):hover{ color:var(--twhb-link-hover); border-left-color:var(--twhb-accent); }

/* The strip again, stacked, inside the mobile accordion. Same element and the
   same tokens — only the shape changes, so the two can never drift apart. */
.twhb .twhb-psub .twhb-mega-strip--compact{
  flex-direction:column; align-items:flex-start; gap:10px;
  margin-top:16px; padding:18px;
  border-radius:var(--radius-lg,14px);
}
.twhb .twhb-psub .twhb-mega-strip--compact::before{ display:none; }
.twhb .twhb-psub .twhb-mega-strip--compact .twhb-strip-ico img{ max-height:52px; }
.twhb .twhb-psub .twhb-mega-strip--compact .twhb-strip-title{ font-size:1.35rem; }
.twhb .twhb-psub .twhb-mega-strip--compact .twhb-strip-sub{ font-size:.95rem; }
/* the panel's own link rules would otherwise claim the button */
.twhb .twhb-psub .twhb-mega-strip--compact .twhb-strip-cta{
  padding:11px 22px; border-left:0; color:var(--twhb-strip-cta-fg);
}
.twhb .twhb-psub .twhb-mega-strip--compact .twhb-strip-cta:not([href*="tel:" i]):hover{
  color:var(--twhb-strip-cta-fg); border-left:0;
}

/* ---------------- editor-preview helper ----------------
   The widget adds these only while Elementor is rendering its own
   canvas, so a panel can be styled without hovering it. */
.twhb.twhb-preview-sub .twhb-item.is-preview > .twhb-sub{ opacity:1; visibility:visible; transform:none; }
/* the held-open item shows the open state of its arrow too, so the canvas
   matches what the front end draws */
.twhb.twhb-preview-sub .twhb-item.is-preview > .twhb-caret .twhb-chev,
.twhb.twhb-preview-sub .twhb-item.is-preview > .twhb-link .twhb-chev{ transform:rotate(180deg); opacity:1; }
.twhb.twhb-preview-panel .twhb-panel{ opacity:1; visibility:visible; transform:none; position:static; width:auto; height:auto; padding:5vh 5vw; }
.twhb.twhb-preview-panel .twhb-pbox{ transform:none; height:auto; min-height:70vh; }

/* ---------------- weight lock ----------------
   techwyse-system.css pins every bare <a>/<button>/<span> inside a
   `twrb_` widget to 400 and every heading to 700, both `!important`
   (its type-scale layer 3, specificity 0,3,1). These are this
   header's own components, so each restates the weight it was
   designed with, at a specificity that outranks that layer. */
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-link,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-skip,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-phone .twhb-pl b,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-col > .twhb-col-title,
/* the column title is a flex row now, so its two halves are spans — and a
   bare span inside the widget is exactly what that layer flattens to 400.
   Same story for the strip and for the mobile panel's group row. */
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-col-num,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-col-label,
/* and the anchor that wraps those two when the heading links to its page — a
   bare `a` is what that layer flattens to 400, and the Medium lock two rules
   down claims every `.twhb-col a`, so this one is named through its full path
   to sit above both */
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-col > .twhb-col-title > .twhb-col-head,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-strip-title,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-strip-cta,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-pnum,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-pgroup-label,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-feature-kicker,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-feature-cta,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-plink,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-pgroup{
  font-weight:var(--fw-semibold,600)!important;
}
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-drop-inner a,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-col a,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-psub a{
  font-weight:var(--fw-medium,500)!important;
}
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-feature-title{
  font-weight:var(--fw-regular,400)!important;
}
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-col a .twhb-desc,
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-strip-sub{
  font-weight:var(--fw-regular,400)!important;
}

/* ---------------- family lock ----------------
   Sibling of the weight lock above, for `font-family`.

   This header takes its family by INHERITANCE from `.twhb` (one
   declaration, the `--font-body` stack). Inheritance loses to any
   rule that matches an element directly, so the Elementor global
   kit (`.elementor-kit-N h4`, `…-kit-N a`, (0,1,1)) and a theme's
   own `.entry-content p`-style rules outrank it — the header would
   then render in the theme's face while every other widget stayed
   on Poppins/Bebas, which is exactly the mismatch this block ends.

   techwyse-system.css cannot do it: its REFERENCE TYPE & COLOUR
   LOCK deliberately skips this subtree (`:where(:not([class*=
   "twhb"])…)`) because that lock also restates colours, and an
   `!important` colour there would erase this file's own palette.
   Family alone is safe, so it is pinned here instead — colours,
   sizes and weights are untouched.

   Scoped through the widget class (both arms, so Elementor's
   "Optimized Markup" experiment cannot drop the scope) the root
   rule is (0,3,0), the bare-element rule (0,3,1) and the feature
   title (0,4,0) — above the kit's (0,1,1) and above the container
   family lock in techwyse-system.css (0,2,1), and `!important` so
   a theme's own `!important` loses too. `:not([style*="font-family"])`
   keeps any inline family a widget or an editor prints winning, as
   everywhere else in this plugin. */
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb:not([style*="font-family"]){
  font-family:var(--font-body,"TWRB Poppins","Poppins","Helvetica Neue",Arial,sans-serif)!important;
}
/* The body stack is named outright rather than pinned with `inherit`:
   an `inherit!important` hands the element whatever its parent resolved
   to, which flattens the display-face element below whenever the rule
   that pins it does not match. `:where(:not(.twhb-feature-title)…)`
   keeps this rule off that element and off anything inside it, at zero
   specificity, so the rest of the cascade is unchanged. */
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,span,b,strong,em,i,u,s,small,sup,sub,mark,cite,q,abbr,time,address,figcaption,blockquote,div,label,summary,figure,button,input,select,textarea,optgroup,option,a):not([style*="font-family"]):where(:not(.twhb-feature-title):not(.twhb-feature-title *)){
  font-family:var(--font-body,"TWRB Poppins","Poppins","Helvetica Neue",Arial,sans-serif)!important;
}
/* the one element in this header the design sets in the display face */
:is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-feature-title:not([style*="font-family"]){
  font-family:var(--font-display,"TWRB Bebas Neue","Bebas Neue","Oswald","Arial Narrow",sans-serif)!important;
}

/* ---------------- family lock, layout-proof tier ----------------
   The same three rules again inside a cascade layer, for the reason
   spelled out at the end of `techwyse-system.css` (FONT FAMILY —
   LAYOUT-PROOF LOCK): between two `!important` declarations the
   cascade compares LAYER before specificity, and unlayered ranks
   lowest — so this tier holds even against a theme that pins its
   own face with `!important` on a longer selector, which is what
   made the family depend on the page's Page Layout.

   The system stylesheet's layer deliberately excludes this subtree
   (`:where(:not([class*="twhb"])…)`), so it is pinned here instead;
   its layer is declared first (this file loads after it), which for
   `!important` means the exclusion is what keeps the two apart,
   not the layer order. Values, guards and scope are identical to
   the unlayered rules above — nothing new is decided here. */
@layer twrb-header-font-family{
  :is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb:not([style*="font-family"]){
    font-family:var(--font-body,"TWRB Poppins","Poppins","Helvetica Neue",Arial,sans-serif)!important;
  }
  :is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb *:not([style*="font-family"]):where(:not(.twhb-feature-title):not(.twhb-feature-title *)){
    font-family:var(--font-body,"TWRB Poppins","Poppins","Helvetica Neue",Arial,sans-serif)!important;
  }
  :is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-feature-title:not([style*="font-family"]){
    font-family:var(--font-display,"TWRB Bebas Neue","Bebas Neue","Oswald","Arial Narrow",sans-serif)!important;
  }
}

/* ---------------- motion preference ---------------- */
@media(prefers-reduced-motion:reduce){
  .twhb .twhb-bar,
  .twhb .twhb-logo,
  .twhb .twhb-logo img,
  .twhb .twhb-logo.has-slim > img,
  .twhb .twhb-phone,
  .twhb .twhb-phone *,
  .twhb .twhb-link,
  .twhb .twhb-link::after,
  .twhb .twhb-chev,
  .twhb .twhb-sub,
  .twhb .twhb-panel,
  .twhb .twhb-pbox,
  .twhb .twhb-psub,
  .twhb .twhb-psub-in,
  .twhb .twhb-burger span{ transition:none!important; }
}

/* ============================================================
   TEL LINK LOCK — header builder
   Companion to the project-wide TEL LINK LOCK at the end of
   `techwyse-system.css`. A `tel:` link gets NO hover or
   focus-visible treatment: no colour change, no underline
   sweep, no background shift, no padding nudge, no transition.

   The matcher is the same everywhere: `[href*="tel:" i]` —
   substring and case-insensitive, so `tel:`, `TEL:`, `Tel:+1…`
   and a shortcode-produced href are all caught.

   Layer 1 is above: every `.twhb-*` hover rule that lands on an
   anchor carries `:not([href*="tel:" i])`, so nothing is generated
   for a tel link to begin with. Layer 2 is here: the same
   resting values, re-asserted with `!important`, so a theme or
   kit rule cannot put a hover treatment back. `[href*="tel:" i]`
   is doubled only to match the weight of the `.twhb .twhb-x a`
   rules above. Layer 3 is `telHoverLock()` in
   `assets/js/techwyse-interactions.js`, which pins each tel
   link's resting computed style for as long as it is hovered —
   that is what covers hover colours a stylesheet here cannot
   name. The header's phone components (`.twhb-phone`,
   `.twhb-pphone`, `.twhb-plink` on a number) have no hover rule
   of their own — their `transition` is neutralised by the
   project-wide lock.
   ============================================================ */
.twhb .twhb-item:not(.is-current):is(:hover,:focus-within,.is-open) .twhb-link[href*="tel:" i][href*="tel:" i]{
  color:var(--twhb-link)!important;
}
/* the first-level underline is the active marker only, so the resting value a
   hovered tel link is pinned back to is "not drawn" */
.twhb .twhb-item:not(.is-current):is(:hover,:focus-within,.is-open) .twhb-link[href*="tel:" i][href*="tel:" i]::after{
  opacity:0!important;
}
.twhb .twhb-drop-inner a[href*="tel:" i][href*="tel:" i]:is(:hover,:focus,:focus-visible,:active){
  background:transparent!important; color:var(--twhb-mega-link)!important;
}
/* the resting `padding-left` is the column indent now, not 0 — a tel row keeps
   the badge gutter its neighbours have instead of snapping flush left. */
.twhb .twhb-col a[href*="tel:" i][href*="tel:" i]:is(:hover,:focus,:focus-visible,:active){
  color:var(--twhb-mega-link)!important; padding-left:var(--twhb-col-indent)!important;
}
.twhb .twhb-col a[href*="tel:" i][href*="tel:" i]:is(:hover,:focus,:focus-visible,:active)::before{
  opacity:.82!important; background-color:var(--twhb-mega-marker)!important;
}
.twhb .twhb-mega-strip a[href*="tel:" i][href*="tel:" i].twhb-strip-cta:is(:hover,:focus,:focus-visible,:active){
  transform:none!important; box-shadow:none!important;
  background:var(--twhb-strip-cta-bg)!important; color:var(--twhb-strip-cta-fg)!important;
}
.twhb .twhb-feature a[href*="tel:" i][href*="tel:" i].twhb-feature-cta:is(:hover,:focus,:focus-visible,:active){
  color:var(--twhb-accent)!important;
}
.twhb a[href*="tel:" i][href*="tel:" i].twhb-plink:is(:hover,:focus,:focus-visible,:active){
  color:var(--twhb-panel-fg)!important;
}
.twhb .twhb-psub a[href*="tel:" i][href*="tel:" i]:is(:hover,:focus,:focus-visible,:active){
  color:var(--tw-ink-700,#3A4352)!important; border-left-color:var(--twhb-panel-line)!important;
}

/* ============================================================
   PHONE PILL, below 1199px
   ------------------------------------------------------------
   On desktop the telephone CTA is a dark pill: the green icon
   disc, then the "Talk to an Expert" eyebrow over the number,
   all on `--tw-ink-900`. Below 1199px only the green circle with
   the icon is wanted, so the pill's fill, padding and copy are
   dropped and the disc is left standing on its own.

   `!important` is what carries it: the per-instance `<style>`
   the widget prints declares `.twhb-phone{padding:8px}` at the
   compact breakpoint, and that block is in the document body,
   after this stylesheet. The disc itself (`.twhb-pico`) is
   untouched — same 40px, same accent fill, same icon.
   ============================================================ */
@media(max-width:1199px){
  .twhb .twhb-phone{
    background:transparent!important;
    padding:0!important;
    gap:0!important;
    border-radius:50%!important;
  }
  .twhb .twhb-phone .twhb-pl{ display:none!important; }
}

/* ============================================================
   COMPACT DESKTOP NAV — up to 1599px
   ------------------------------------------------------------
   The reference's own narrow-desktop step, verbatim: the menu
   type drops to 15.5px, the step between items to 18px, and the
   phone pill loses its "Talk to an Expert" eyebrow — the number
   stays. Nothing else moves. The logo keeps its full height, and
   the layout, the colours, every hover and the whole mega panel
   are the rules above, untouched.

   One number differs from the reference, deliberately: the edge
   is 1599.98px where the reference writes 1400px. The container
   ladder steps at 1600px (1140px -> 1460px), not at 1400px, so
   between 1401px and 1599px the reference asks its full-size nav
   to fit a 1140px measure that its own metrics need roughly
   1190px of — and because every `.twhb-link` is `white-space:
   nowrap` and `.twhb-menu` does not wrap, the menu overflows its
   track and runs back across the logo instead of giving ground.
   Holding the compact metrics until the measure actually widens
   is what closes that gap. At every width where the reference's
   own numbers fit — 1600px and up, which is where this header is
   read — they are exactly as written there.

   Below 1200px the pill is already down to its bare icon disc
   (see the block above) and below the compact breakpoint the nav
   is the burger, so neither range is affected by anything here.
   ============================================================ */
@media (max-width:1599.98px){
  .twhb{
    --twhb-gap:18px;
    --twhb-menu-gap:18px;
  }
  .twhb .twhb-link{ font-size:15.5px; }
  .twhb .twhb-phone .twhb-pl small{ display:none; }
}

/* ============================================================
   NARROW-DESKTOP SIZING — 1200px to 1599px
   ------------------------------------------------------------
   The block above drops the menu type one step and takes the
   eyebrow off the pill; on a small laptop that is not enough,
   and the row still overflowed — the menu ran back across the
   logo, which is the report screenshot.

   Why this band needs flat numbers rather than a ramp: the
   container ladder holds `--twhb-max` at 1140px from 1200px all
   the way to 1599px, and the bar's own side padding only beats
   the centring term in the first ~40px of that range. So the
   measure the row has to fit into is EFFECTIVELY CONSTANT across
   the whole band — 1131.6px at 1200px, 1140px from ~1240px up —
   and metrics that scale with the viewport would buy nothing at
   the bottom of the band while breaking the fit at the top. The
   values below are the band's, flat, end to end.

   What the row needed before, against that 1140px measure
   (reference menu: Home, Services, About, Service Areas, Our
   Work, Cool Stuff, Blog, News, Contact — five with a chevron):

     logo 96px x 1.75 aspect          168px
     bar gaps, 18px x 2                36px
     menu, 15.5px labels + 18px steps  874px
     phone pill, number only          203px
                                   = ~1281px  -> ~149px OVER

   The three things that give ground here are the three the brief
   names — the LOGO, the MENU type and the CTA — and nothing else:

     logo capped at 60px (105px wide)  105px
     bar gaps, untouched                36px
     menu, 13.5px labels, 18px steps   773px
     phone pill, compacted             167px
                                   = ~1081px  -> ~50px of slack

   Spacing is deliberately NOT part of this: `--twhb-gap` and
   `--twhb-menu-gap` keep the 18px the block above gives them, so
   the bar's rhythm and the menu's density are unchanged and only
   the drawn SIZES come down.

   The logo is capped on `--twhb-logo-fit`, not replaced on
   `--twhb-logo-h`: the widget prints that one per instance at
   `.twhb.<uid>`, one class above every rule in this file (same
   reason the short-viewport block below gives). `min()` also
   means a header whose Logo Height control is already under 60px
   keeps its own value. And this block sits ABOVE the short-
   viewport caps on purpose — those are tighter still (52px, then
   44px), and being later in the file they keep winning on a
   screen that is short as well as narrow.

   Below 1200px nothing here applies: the pill is already down to
   its bare icon disc and the nav is on its way to the burger.
   From 1600px up the measure widens to 1460px and the full
   reference metrics fit, so they are left exactly as written.
   ============================================================ */
@media (min-width:1200px) and (max-width:1599.98px){
  .twhb{
    --twhb-logo-fit:min(var(--twhb-logo-h),60px);
    --twhb-logo-fit-scrolled:min(var(--twhb-logo-h-scrolled),48px);
    /* the drawn SVG logo, held to ~126px wide so the row keeps its slack */
    --twhb-logo-img-max:64px;
  }

  /* the menu type, one step under the compact block's 15.5px */
  .twhb .twhb-link{ font-size:13.5px; gap:4px; }
  /* The chevron comes down with the label it belongs to. Scoped to
     `.twhb-menu` so the mobile panel's accordion caret — same `.twhb-chev`
     glyph, different row — is untouched at every width. */
  .twhb .twhb-menu .twhb-caret{ margin-left:4px; }
  .twhb .twhb-menu .twhb-chev{ width:16px; height:16px; padding:2px; }

  /* the phone pill: the disc sets its height, the number its width */
  .twhb .twhb-phone{ gap:10px; padding:8px 18px 8px 10px; }
  .twhb .twhb-phone .twhb-pico{ width:32px; height:32px; }
  .twhb .twhb-phone .twhb-pl b{ font-size:16px; }

  /* The optional button CTA. It is a shared `.btn.btn-sm`, and the BUTTON
     LOCK in `techwyse-system.css` pins every `.btn-sm` inside a twrb widget
     to 14px with `!important` at (0,3,0) — so this has to be written through
     the header's own widget scope, which lands at (0,5,0), to come down at
     all. Nothing outside this header is reached. */
  :is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-cta.btn{
    font-size:13px!important; gap:9px!important; padding:9px 12px 9px 16px!important;
  }
  :is([class*="elementor-widget-twrb_header_builder"] .elementor-widget-container,[class*="elementor-widget-twrb_header_builder"]) .twhb .twhb-cta.btn .circ{
    width:22px!important; height:22px!important; font-size:14px!important;
  }
}

/* ============================================================
   SHORT VIEWPORTS
   ------------------------------------------------------------
   The reference's two height bands. A laptop screen is short as
   well as narrow, and the bar is site chrome sitting on top of
   the first fold, so it gives height back before the content
   does: 760px of viewport takes the bar's padding to 10px and
   the logo to 52px, and 620px takes the logo to 44px.

   Both are written as `min()` CAPS rather than as replacements,
   so a header whose Logo Height or Bar Height control is already
   set below the cap keeps its own value — only a bar big enough
   to crowd a short screen is taken down. And both cap the `-fit`
   tokens, never `--twhb-logo-h` / `--twhb-pad-y` themselves: the
   widget prints those per instance at `.twhb.<uid>`, one class
   above every rule in this file, so a media query could not
   reassign them (which is exactly what the indirection is for).
   ============================================================ */
@media (max-height:760px){
  .twhb{
    --twhb-pad-fit:min(var(--twhb-pad-y),10px);
    --twhb-pad-fit-scrolled:min(var(--twhb-pad-y-scrolled),10px);
    --twhb-logo-fit:min(var(--twhb-logo-h),52px);
    --twhb-logo-fit-scrolled:min(var(--twhb-logo-h-scrolled),44px);
  }
}
@media (max-height:620px){
  .twhb{
    --twhb-logo-fit:min(var(--twhb-logo-h),44px);
    --twhb-logo-fit-scrolled:min(var(--twhb-logo-h-scrolled),38px);
  }
}

/* ============================================================
   MEGA PANEL HEIGHT — 1200px to 1599px
   ------------------------------------------------------------
   Companion to the compact-nav block above: that one is about
   the bar's WIDTH, this one is about the panel's HEIGHT.

   A small laptop is short as well as narrow — 1366x768 and
   1440x900 are the two this band exists for — and the panel is
   drawn from the bar downwards, so what it has to fit into is
   `viewport - bar`, roughly 620-700px on a 768px screen once the
   browser chrome is off. The 1600px+ metrics build a column out
   of a 30/34px pad, a 68px illustration, a 16.5px/1.5 heading and
   rows of 11+11px padding around 15px/1.5 text, then close the
   card with an 18px strip around a 70px illustration — about
   560px with six links in a column and past 700px with nine. The
   last rows fell off the bottom of the screen, which is the
   report.

   The fix is VERTICAL ONLY, and it is the brief's own order:
   the wrapper's top/bottom padding first, then the steps between
   the groups (illustration, heading, rows) and between the rows
   themselves, then a small step down in type. Nothing horizontal
   is touched — `--twhb-col-pad`, `--twhb-col-indent`, the column
   weights, the flex tracks, the hairlines, the colours and every
   hover are the rules above, unchanged — so the panel reads as
   the same design, just closed up.

   Floors held deliberately: the heading keeps its 1px lead over
   the links (15 vs 14), and both stay on the token pair the
   number badge and the double-chevron are positioned off, so the
   two markers re-centre themselves on the new first lines with no
   arithmetic of their own. The 1600px+ values (and everything
   below 1200px) are untouched.

   Same column, tightened: 16 + (40+10) + (20+9) + 6 x 32 + 18 =
   ~303px, and the strip closes at ~66px — a ~370px panel under a
   90-108px bar, which clears the shortest screen in the band with
   room to spare, and still fits nine links per column.

   The `max-height` at the end is the brief's fallback, not the
   fix: a panel that is STILL taller than the space under the bar
   (a menu with far more rows than the reference's) is capped at
   what is actually on screen and scrolls inside its own card
   instead of running off the bottom. It does nothing at all while
   the content fits, which after the tightening above is the
   normal case.
   ============================================================ */
@media(min-width:1200px) and (max-width:1599.98px){
  .twhb{
    /* The type pair, one step down each. Both are tokens for the reason given
       where they are declared: the heading's number badge and the link's
       double-chevron are centred on their own FIRST LINE by arithmetic on
       exactly these values, so changing them here moves both markers with the
       text and nothing has to be restated. */
    --twhb-col-head-fs:15px;
    --twhb-col-head-lh:1.35;
    --twhb-col-num:19px;
    --twhb-col-link-fs:14px;
    --twhb-col-link-lh:1.4;
    /* the row step — the single biggest line item in a column (one per link,
       twice over), so it gives the most ground */
    --twhb-col-link-py:6px;
    --twhb-col-mark:12px;

    /* What is actually on screen under the bar. `--twhb-height` is the bar's
       measured height, published on the mount by the header script (see
       `measure()`), so this tracks the scrolled/unscrolled shrink as well as
       the logo's own control; the fallback is the band's tallest unscrolled
       bar (22+22 padding + a 96px logo) for the frame before the script runs.
       The 12px is breathing room under the card. */
    --twhb-mega-avail:calc(100vh - var(--twhb-height,140px) - 12px);
  }
  /* the toolbar is fixed at 32px for logged-in users at every width in this band */
  body.admin-bar .twhb{
    --twhb-mega-avail:calc(100vh - var(--twhb-height,140px) - 44px);
  }

  /* the wrapper's own top/bottom padding — longhands, so the column's
     horizontal padding token is left exactly as it is */
  .twhb .twhb-col{
    padding-top:min(var(--sp-cap,1000px),16px);
    padding-bottom:min(var(--sp-cap,1000px),18px);
  }
  /* the illustration and its step down to the heading */
  .twhb .twhb-col > .twhb-col-ico{ margin-bottom:10px; }
  .twhb .twhb-col > .twhb-col-ico img{ max-height:min(var(--sp-cap,1000px),40px); }
  /* the step between the heading group and its list */
  .twhb .twhb-col > .twhb-col-title{ margin:0 0 9px!important; }
  /* the optional second line under a link row */
  .twhb .twhb-col a .twhb-desc{ font-size:12.5px; line-height:1.35; }

  /* the right column card — it is a peer of the link columns, so it has to
     come down with them or it sets the panel's height on its own */
  .twhb .twhb-feature{
    padding:min(var(--sp-cap,1000px),16px);
    border-width:min(var(--sp-cap,1000px),16px);
  }
  .twhb .twhb-feature img{ margin-bottom:10px; }
  .twhb .twhb-feature .twhb-feature-title{ font-size:1.55rem; margin-top:6px; }
  .twhb .twhb-feature p{ font-size:13px; margin-top:7px!important; }
  .twhb .twhb-feature .twhb-feature-cta{ margin-top:9px; padding:6px 2px; font-size:15px; }

  /* the band that closes the panel */
  .twhb .twhb-mega-strip{
    padding-top:min(var(--sp-cap,1000px),11px);
    padding-bottom:min(var(--sp-cap,1000px),11px);
  }
  .twhb .twhb-mega-strip .twhb-strip-ico img{ max-height:min(var(--sp-cap,1000px),44px); }
  .twhb .twhb-mega-strip .twhb-strip-title{ font-size:clamp(1.1rem,1.5vw,1.35rem); }
  .twhb .twhb-mega-strip .twhb-strip-sub{ font-size:clamp(.85rem,.95vw,.95rem); }
  .twhb .twhb-mega-strip .twhb-strip-cta{
    padding:10px min(var(--sp-cap,1000px),22px); font-size:13px;
  }

  /* The fallback cap. `overflow-x` stays `hidden` (the card's own rule above
     sets both, and only the Y axis is reassigned here), so the card still
     clips its columns and its rounded corners exactly as before. */
  .twhb .twhb-mega-card{
    max-height:var(--twhb-mega-avail);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  /* the anchored panel hangs 14px below the bar (`.twhb-mega--anchored`
     padding-top), so it has that much less to work with */
  .twhb .twhb-mega--anchored .twhb-mega-card{
    max-height:calc(var(--twhb-mega-avail) - 14px);
  }
}