/* Tech Teamz — updated hero system (namespaced .hx-). Shared by home, capabilities, tt-ai, how-we-work, contact. */
/* Palette follows the approved hero redesign; fonts inherit the site's Archivo / IBM Plex Mono tokens. */
.hx-hero{
  --hx-teal:#17707A; --hx-teal2:#3E97A0; --hx-teal-soft:rgba(23,112,122,.10);
  --hx-bronze:#9B6C38; --hx-bronze-soft:rgba(155,108,56,.10);
  --hx-bg:#F3F2EE; --hx-ink:#1E211D; --hx-soft:#555A52; --hx-mut:#777C73;
  --hx-line:#CBC9C1; --hx-line2:#DDDAD2;
  --hx-sans:var(--tt-font-sans,"Archivo",Arial,sans-serif);
  --hx-mono:var(--tt-font-mono,"IBM Plex Mono",monospace);
  --hx-ease:cubic-bezier(.22,.72,.18,1);
  /* aliases so inline SVG var() references from the source diagrams resolve */
  --bg:var(--hx-bg); --ink:var(--hx-ink); --soft:var(--hx-soft); --mut:var(--hx-mut);
  --line:var(--hx-line); --line-2:var(--hx-line2); --teal:var(--hx-teal); --teal-2:var(--hx-teal2);
  --teal-soft:var(--hx-teal-soft); --bronze:var(--hx-bronze); --bronze-soft:var(--hx-bronze-soft);
  position:relative; background:var(--hx-bg); color:var(--hx-ink);
  border-bottom:var(--tt-border,1.5px) solid var(--tt-oxide-bronze,#8C6A3F); overflow:hidden; overflow:clip;
  font-family:var(--hx-sans);
  padding:0; /* override the global section{padding} — the wrap owns hero spacing */
}
.hx-wrap{
  display:grid; grid-template-columns:minmax(320px,0.74fr) minmax(0,1.26fr);
  gap:clamp(24px,2.6vw,44px); align-items:center;
  padding:var(--tt-space-12,96px) 0;
}
.hx-copy{max-width:500px;position:relative}
.hx-hero .hx-eyebrow{font-family:var(--hx-mono);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tt-oxide-bronze,#8C6A3F);margin:0 0 20px}
.hx-hero h1{font-family:var(--hx-sans);font-size:clamp(40px,5.4vw,var(--tt-fs-display,58px));line-height:1.05;letter-spacing:-0.02em;margin:0;font-weight:700;text-wrap:balance;color:var(--tt-ink,#2B2A26)}
.hx-hero .hx-accent{color:var(--tt-accent,#17707A)}
.hx-hero .hx-lede{font-size:clamp(18px,2.2vw,21px);line-height:1.5;color:var(--tt-graphite-soft,#4A4842);margin:24px 0 0;max-width:60ch;font-weight:400}
.hx-hero .hx-sublede{font-size:16px;line-height:1.55;color:var(--hx-bronze);margin:18px 0 0;max-width:68ch;font-weight:500}
.hx-rule{width:56px;height:2px;background:var(--hx-teal);margin:29px 0 0;border:0}
.hx-cta{display:flex;align-items:center;gap:16px;margin-top:32px;flex-wrap:wrap}
.hx-primary,.hx-secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 22px;border-radius:var(--tt-radius,6px);font-family:var(--hx-sans);font-size:15px;font-weight:600;letter-spacing:.01em;text-decoration:none;border:var(--tt-border,1.5px) solid var(--tt-graphite,#2B2A26);transition:background .16s ease-out,color .16s ease-out,border-color .16s ease-out,transform .12s ease-out}
.hx-primary{background:var(--tt-accent,#17707A);border-color:var(--tt-accent,#17707A);color:#fff}
.hx-primary:hover{background:var(--tt-teal-deep,#0F5158);border-color:var(--tt-teal-deep,#0F5158)}
.hx-secondary{background:transparent;color:var(--tt-ink,#2B2A26);border-color:var(--tt-graphite,#2B2A26)}
.hx-secondary:hover{background:var(--tt-ink,#2B2A26);color:var(--tt-ground,#DEDCD6)}
.hx-primary:active,.hx-secondary:active{transform:translateY(1px)}
.hx-proofstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:38px;border-top:1px solid var(--tt-rule,#C6C4BC);padding-top:20px}
.hx-proof{display:flex;gap:8px;align-items:center;padding:0 18px;border-right:1px solid var(--tt-rule,#C6C4BC)}
.hx-proof:first-child{padding-left:0}
.hx-proof:last-child{border-right:0;padding-right:0}
.hx-proof svg{width:20px;height:20px;color:var(--tt-accent,#17707A);flex:none}
.hx-proof strong{font-family:var(--hx-mono);font-size:20px;font-weight:600;line-height:1;color:var(--tt-ink,#2B2A26);font-variant-numeric:tabular-nums}
.hx-proof span{font-size:11px;line-height:1.34;color:var(--tt-graphite-soft,#4A4842);font-weight:500}
.hx-visualwrap{position:relative;min-width:0;align-self:center}
.hx-visual{position:relative;background:transparent;border:0;box-shadow:none;padding:0;overflow:visible}
.hx-visualhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 25px;padding:0 2px 15px;border-bottom:1px solid var(--hx-line2)}
.hx-visuallabel{font:600 11px/1.25 var(--hx-mono);letter-spacing:.10em;text-transform:uppercase;color:var(--hx-teal)}
.hx-visualnote{font:500 10px/1.45 var(--hx-mono);color:var(--hx-mut);text-align:right;max-width:250px}
.hx-visual svg{display:block;max-width:100%}
.hx-diagram{width:100%;height:auto;overflow:visible}
.hx-diagram text{font-family:var(--hx-sans)}
.hx-diagram .mono{font-family:var(--hx-mono)}
.hx-diagram .line{stroke:var(--hx-line);fill:none}
.hx-diagram .line2{stroke:var(--hx-line2);fill:none}
.hx-diagram .teal-line{stroke:var(--hx-teal);fill:none}
.hx-diagram .bronze-line{stroke:var(--hx-bronze);fill:none}
.hx-diagram .panel{fill:var(--hx-bg);stroke:var(--hx-line)}
.hx-diagram .panel-teal{fill:var(--hx-teal-soft);stroke:var(--hx-teal)}
.hx-diagram .panel-bronze{fill:var(--hx-bronze-soft);stroke:var(--hx-bronze)}
.hx-diagram .ink{fill:var(--hx-ink)}
.hx-diagram .soft-text{fill:var(--hx-soft)}
.hx-diagram .mut-text{fill:var(--hx-mut)}
.hx-diagram .teal-text{fill:var(--hx-teal)}
.hx-diagram .bronze-text{fill:var(--hx-bronze)}
.hx-diagram .label{font-size:16.5px;font-weight:600}
.hx-diagram .small{font-size:13.5px;font-weight:400}
.hx-diagram .tiny{font-size:11.5px;letter-spacing:.06em}
.hx-diagram .node{fill:var(--hx-bg);stroke:var(--hx-line)}
.hx-diagram .teal-node{fill:var(--hx-teal);stroke:var(--hx-bg)}
.hx-diagram [data-draw]{stroke-dasharray:1000;stroke-dashoffset:1000;animation:hx-draw 1.25s var(--hx-ease) forwards}
.hx-diagram [data-delay="1"]{animation-delay:.16s}
.hx-diagram [data-delay="2"]{animation-delay:.32s}
.hx-diagram [data-delay="3"]{animation-delay:.48s}
.hx-diagram [data-delay="4"]{animation-delay:.64s}
.hx-diagram [data-delay="5"]{animation-delay:.80s}
.hx-rv{opacity:0;transform:translateY(10px);animation:hx-reveal .62s var(--hx-ease) forwards}
.hx-d1{animation-delay:.12s}.hx-d2{animation-delay:.24s}.hx-d3{animation-delay:.36s}.hx-d4{animation-delay:.48s}.hx-d5{animation-delay:.60s}.hx-d6{animation-delay:.72s}
.hx-pulse{transform-box:fill-box;transform-origin:center;animation:hx-pulse 2.7s ease-in-out infinite}
.hx-glow{animation:hx-glow 3.2s ease-in-out infinite}
.hx-diagram .teal-node:not(.hx-pulse):not(.signal){animation:hx-nodelive 2.6s ease-in-out infinite}
/* scoped under .hx-diagram so the continuous flow wins over .hx-diagram [data-draw]
   (equal 0,2,0 specificity, declared later) — matches the original hero exactly:
   dashed lines keep moving; the teal line runs 3x faster than the bronze one. */
.hx-diagram .hx-motion{stroke-dasharray:7 8;animation:hx-dash 5.5s linear infinite}
.hx-diagram .hx-motionslow{stroke-dasharray:7 8;animation:hx-dash 16.5s linear infinite}
.hx-diagram .hx-orbit{animation:hx-dash 10s linear infinite}
.hx-diagram .hx-float{transform-box:fill-box;transform-origin:center;animation:hx-float 4.8s ease-in-out infinite}
/* proof / company connector + signal animations (unmapped source classes) */
.hx-diagram .dash-flow{stroke-dasharray:9 9;animation:hx-dash2 7s linear infinite}
.hx-diagram .scan{animation:hx-scan 4.5s ease-in-out infinite}
.hx-diagram .signal{transform-box:fill-box;transform-origin:center;animation:hx-signal 2.9s ease-in-out infinite}
@keyframes hx-draw{to{stroke-dashoffset:0}}
@keyframes hx-reveal{to{opacity:1;transform:none}}
@keyframes hx-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.8}}
@keyframes hx-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(23,112,122,0))}50%{filter:drop-shadow(0 0 8px rgba(23,112,122,.22))}}
@keyframes hx-nodelive{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes hx-dash{to{stroke-dashoffset:-120}}
@keyframes hx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes hx-dash2{to{stroke-dashoffset:-144}}
@keyframes hx-scan{0%,100%{transform:translateX(-16px);opacity:.25}50%{transform:translateX(16px);opacity:.75}}
@keyframes hx-signal{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.hx-diagram *,.hx-rv{animation-duration:.001ms!important;animation-iteration-count:1!important}.hx-diagram [data-draw]{stroke-dashoffset:0!important}.hx-rv{opacity:1;transform:none}}
@media(max-width:1120px){.hx-wrap{grid-template-columns:1fr;padding:var(--tt-space-8,64px) var(--tt-space-3,24px) var(--tt-space-8,64px)}.hx-copy{max-width:860px}.hx-visualwrap{max-width:1000px;width:100%;margin:6px auto 0}.hx-proofstrip{max-width:820px}}
@media(max-width:720px){.hx-wrap{padding:30px var(--tt-space-3,24px) 40px}.hx-hero h1{font-size:clamp(31px,8.2vw,46px);line-height:1.08}.hx-hero .hx-eyebrow{font-size:11px;letter-spacing:.08em;margin-bottom:16px}.hx-hero .hx-lede{font-size:17px}.hx-cta{gap:20px}.hx-proofstrip{grid-template-columns:1fr 1fr;row-gap:18px}.hx-proof:nth-child(2){border-right:0}.hx-visualhead{flex-direction:column;align-items:flex-start;gap:8px}.hx-visualnote{text-align:left}.hx-diagram .label{font-size:14px}.hx-diagram .small{font-size:11px}}
@media(max-width:400px){.hx-hero .hx-eyebrow{font-size:10px;letter-spacing:.06em}}