/* TechCore extras, Oct 15 2026 (Chris's TechCore notes). Loaded on the TechCore site only. */

/* 1. Inner-page heroes with the office card: start the title right under the header instead of
      floating it in the middle of a tall row (big empty gap on /contact/ and similar pages). */
.t-tc .has-aside .ph-grid,.t-tc .phero.short.has-aside .ph-grid{align-items:start}
.t-tc .phero.has-aside{padding-top:150px}
.t-tc .has-aside .seq{padding-top:18px}

/* 2. About TechCore: large animated logo stage */
.tcx-hero{padding:150px 0 70px;position:relative;overflow:hidden}
.tcx-net{position:absolute;left:0;right:0;bottom:0;top:120px;width:100%;height:calc(100% - 120px);z-index:1;pointer-events:none;opacity:.9}
.tcx-wrap{position:relative;z-index:2}
.tcx-stage{position:relative;margin:28px auto 6px;width:min(980px,100%);display:flex;flex-direction:column;align-items:center}
.tcx-logo{display:block;width:100%;height:auto;overflow:visible}
.tcx-copy{text-align:center;max-width:760px;margin:30px auto 0}
.tcx-copy .eyebrow{display:inline-flex}
.tcx-copy h1{font-size:clamp(36px,4.6vw,58px);margin-top:14px}
.tcx-copy .lead{margin:16px auto 0;max-width:680px}
.tcx-tag{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:4px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#7fe3ff}
.tcx-tag span{opacity:0;transform:translateY(8px);animation:tcxUp .6s cubic-bezier(.2,.7,.2,1) forwards}
.tcx-tag span::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#22C3F0;box-shadow:0 0 10px #22C3F0;margin-right:9px;vertical-align:2px}
.tcx-tag span:nth-child(1){animation-delay:2.3s}.tcx-tag span:nth-child(2){animation-delay:2.42s}.tcx-tag span:nth-child(3){animation-delay:2.54s}.tcx-tag span:nth-child(4){animation-delay:2.66s}.tcx-tag span:nth-child(5){animation-delay:2.78s}

/* intro: globe powers on, orbits draw, the C traces, then the words scan in */
.tcx-globe{transform-box:fill-box;transform-origin:50% 50%;animation:tcxGlobe 1.1s cubic-bezier(.2,.9,.25,1.15) both}
.tcx-halo{transform-box:fill-box;transform-origin:50% 50%;animation:tcxHalo 4s ease-in-out 1.2s infinite}
.tcx-orb{stroke-dasharray:100;stroke-dashoffset:100;animation:tcxDraw 1.1s ease-out .7s forwards}
.tcx-o2b,.tcx-o2f{animation-delay:.95s}
.tcx-cline{stroke-dasharray:100;stroke-dashoffset:100;animation:tcxDraw 1s ease-in-out .6s forwards}
.tcx-e{opacity:0;animation:tcxFade .6s ease 1.5s forwards}
.tcx-word{opacity:0}
.tcx-tech{animation:tcxTech 1s cubic-bezier(.2,.7,.2,1) 1.1s forwards}
.tcx-ore{animation:tcxOre 1s cubic-bezier(.2,.7,.2,1) 1.25s forwards}
/* loops */
.tcx-land{animation:tcxSpin 14s linear infinite}
.tcx-scan{animation:tcxScan 3.2s ease-in-out 2s infinite}
.tcx-sheen{animation:tcxSheen 6s ease-in-out 2.4s infinite}
.tcx-sheen2{animation-delay:2.9s}
.tcx-mark{position:relative;width:100%}
.tcx-pulse{position:absolute;left:54.03%;top:49.07%;width:0;height:0;pointer-events:none}
.tcx-pulse i{position:absolute;left:50%;top:50%;width:22vw;max-width:240px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(34,195,240,.55);transform:translate(-50%,-50%) scale(.2);opacity:0;animation:tcxRing 4.5s ease-out 1.6s infinite}
.tcx-pulse i:nth-child(2){animation-delay:3.1s}.tcx-pulse i:nth-child(3){animation-delay:4.6s}

@keyframes tcxGlobe{0%{opacity:0;transform:scale(.2);filter:brightness(3)}60%{opacity:1;filter:brightness(1.6)}100%{opacity:1;transform:scale(1);filter:none}}
@keyframes tcxHalo{0%,100%{opacity:.14;transform:scale(1)}50%{opacity:.3;transform:scale(1.07)}}
@keyframes tcxDraw{to{stroke-dashoffset:0}}
@keyframes tcxFade{to{opacity:1}}
@keyframes tcxTech{0%{opacity:0;transform:translateX(-26px);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes tcxOre{0%{opacity:0;transform:translateX(26px);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes tcxSpin{from{transform:translateX(0)}to{transform:translateX(-54px)}}
@keyframes tcxScan{0%{transform:translateY(0);opacity:0}15%{opacity:.25}85%{opacity:.25}100%{transform:translateY(54px);opacity:0}}
@keyframes tcxSheen{0%{transform:translateX(0)}35%,100%{transform:translateX(150px)}}
@keyframes tcxRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:.7}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
@keyframes tcxUp{to{opacity:1;transform:none}}

/* 3. Rotating banner of brands */
.sec:has(.tcx-bb){overflow:hidden;padding:46px 0 40px;border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(10,26,58,.35),rgba(4,11,26,0))}
.tcx-bb-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:0 0 22px}
.tcx-bb-n{color:var(--mut);font-size:15px}
.tcx-bb-row{overflow:hidden;margin:0 calc(50% - 50vw);padding:7px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tcx-bb-track{display:flex;gap:18px;width:max-content;animation:tcxMarq 70s linear infinite}
.tcx-bb-row.rev .tcx-bb-track{animation-direction:reverse;animation-duration:80s}
.tcx-bb-row:hover .tcx-bb-track{animation-play-state:paused}
.tcx-bb-chip{flex:none;display:flex;align-items:center;justify-content:center;height:68px;min-width:150px;padding:12px 26px;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25),inset 0 0 0 1px rgba(11,21,48,.06)}
.tcx-bb-chip img{display:block;max-height:40px;max-width:130px;width:auto;height:auto;object-fit:contain}
.tcx-bb-chip b{font-family:Sora,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em;color:#0B1530;white-space:nowrap}
@keyframes tcxMarq{to{transform:translateX(-33.3333%)}}

/* 4. Partners: text left, orbiting logo ring right */
.tcx-pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:56px;align-items:center}
.tcx-ptext .sub{max-width:520px}
.tcx-ring{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin-left:auto;--R1:46%;--R2:28%}
.tcx-ring-glow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(43,107,255,.28),rgba(34,195,240,.08) 55%,transparent 70%);filter:blur(6px)}
.tcx-ring-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(43,107,255,.35);stroke-width:.3;stroke-dasharray:1.2 1.6;animation:tcxRot 120s linear infinite}
.tcx-orbit{position:absolute;inset:0;animation:tcxRot 60s linear infinite}
.tcx-orbit-i{animation-direction:reverse;animation-duration:45s}
.tcx-sat{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(-1 * var(--r)))}
.tcx-orbit-o .tcx-sat{--r:min(39cqw,218px)}
.tcx-orbit-i .tcx-sat{--r:min(21cqw,118px)}
.tcx-ring{container-type:inline-size}
.tcx-chip{position:absolute;left:0;top:0;width:112px;height:56px;margin:-28px 0 0 -56px;display:flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:14px;background:#fff;box-shadow:0 10px 26px rgba(11,21,48,.18),inset 0 0 0 1px rgba(11,21,48,.06);transform:rotate(calc(-360deg / var(--n) * var(--i)));animation:tcxCounter 60s linear infinite}
.tcx-orbit-i .tcx-chip{animation:tcxCounterR 45s linear infinite}
.tcx-chip img{display:block;max-width:100%;max-height:34px;width:auto;height:auto;object-fit:contain}
.tcx-chip span{font-family:Sora,sans-serif;font-weight:700;font-size:14px;color:#0B1530;white-space:nowrap}
.tcx-core{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(0 0 22px rgba(34,195,240,.45))}
.tcx-core svg{width:100%;height:100%;display:block}
.tcx-ring:hover .tcx-orbit,.tcx-ring:hover .tcx-chip,.tcx-ring:hover .tcx-ring-lines{animation-play-state:paused}
@keyframes tcxRot{to{transform:rotate(360deg)}}
/* chips stay upright: undo the slot angle, then undo the live orbit rotation */
@keyframes tcxCounter{from{transform:rotate(calc(-360deg / var(--n) * var(--i)))}to{transform:rotate(calc(-360deg / var(--n) * var(--i) - 360deg))}}
@keyframes tcxCounterR{from{transform:rotate(calc(-360deg / var(--n) * var(--i)))}to{transform:rotate(calc(-360deg / var(--n) * var(--i) + 360deg))}}

@media (max-width:1060px){.tcx-pgrid{grid-template-columns:1fr;gap:34px}.tcx-ring{margin:0 auto;max-width:520px}}
@media (max-width:680px){
  .tcx-hero{padding:132px 0 52px}
  .tcx-stage{margin-top:14px}
  .tcx-tag{font-size:11px;gap:8px 16px}
  .tcx-bb-chip{height:56px;min-width:120px;padding:10px 18px}.tcx-bb-chip img{max-height:32px;max-width:104px}
  .tcx-chip{width:84px;height:44px;margin:-22px 0 0 -42px;padding:6px 8px;border-radius:11px}.tcx-chip img{max-height:26px}.tcx-chip span{font-size:11px}
  .t-tc .phero.has-aside{padding-top:140px}
}
@media (prefers-reduced-motion:reduce){
  .tcx-globe,.tcx-halo,.tcx-orb,.tcx-cline,.tcx-e,.tcx-word,.tcx-tag span,.tcx-land,.tcx-scan,.tcx-sheen,.tcx-pulse i,.tcx-bb-track,.tcx-orbit,.tcx-chip,.tcx-ring-lines{animation:none!important}
  .tcx-orb,.tcx-cline{stroke-dashoffset:0}.tcx-word,.tcx-e,.tcx-tag span{opacity:1;transform:none}.tcx-pulse,.tcx-scan,.tcx-sheen{display:none}
  .tcx-chip{transform:rotate(calc(-360deg / var(--n) * var(--i)))}
}

/* icon-only partner logos get their name beside the mark */
.tcx-nm{font-style:normal;font-family:Sora,sans-serif;font-weight:700;color:#0B1530;white-space:nowrap;margin-left:8px;font-size:15px}
.tcx-chip .tcx-nm{font-size:12px;margin-left:6px}
.tcx-chip:has(.tcx-nm) img{max-height:26px}
.tcx-bb-chip:has(.tcx-nm) img{max-height:34px}
@media (max-width:680px){.tcx-chip{width:76px;height:40px;margin:-20px 0 0 -38px}.tcx-chip .tcx-nm{display:none}.tcx-chip:has(.tcx-nm) img{max-height:24px}.tcx-chip span{font-size:10.5px}.tcx-orbit-o .tcx-sat{--r:40cqw}.tcx-orbit-i .tcx-sat{--r:22cqw}.tcx-ring-lines circle:first-child{r:40}.tcx-ring-lines circle:last-child{r:22}}
.tcx-chip:has(.tcx-nm){width:140px;margin-left:-70px}
@media (max-width:680px){.tcx-chip:has(.tcx-nm){width:76px;margin-left:-38px}}

/* ===== Home hero options (Oct 15 2026, preview only) ===== */
.tcx-optbar{position:fixed;left:50%;bottom:10px;flex-wrap:nowrap;white-space:nowrap;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:6px;padding:8px;border-radius:999px;background:rgba(4,11,26,.92);backdrop-filter:blur(10px);box-shadow:0 12px 40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(237,242,253,.16);font-family:Sora,sans-serif;font-size:13px;max-width:calc(100vw - 24px)}
.tcx-optbar span{color:#9FB0D0;padding:0 8px 0 10px}
.tcx-optbar a{color:#EDF2FD;text-decoration:none;padding:6px 12px;border-radius:999px;background:rgba(237,242,253,.06)}
.tcx-optbar a:hover{background:rgba(43,107,255,.35)}
.tcx-optbar a[aria-current]{background:#2B6BFF;color:#fff}

/* option B: animated network map */
.tcx-maphero{background:radial-gradient(1200px 700px at 72% 45%,rgba(43,107,255,.16),transparent 60%),linear-gradient(180deg,#071330,#040B1A)}
.tcx-maphero .ph-bg{position:absolute;inset:0;z-index:0}
.tcx-map{position:absolute;z-index:1;right:max(2vw,calc(50% - 690px));top:50%;transform:translateY(-56%);width:min(46vw,660px);aspect-ratio:660/540}
.tcx-map svg{width:100%;height:100%;display:block;overflow:visible}
.hm-tile{fill:rgba(10,26,58,.88);stroke:rgba(237,242,253,.16);stroke-width:1}
.hm-ico{fill:none;stroke:#7fe3ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hm-ico circle{fill:#7fe3ff;stroke:none}
.hm-lbl{font:600 15px Sora,sans-serif;fill:#EDF2FD}
.hm-st{font:500 12.5px 'IBM Plex Mono',monospace;fill:#9FB0D0;transition:opacity .4s}
.hm-dot{fill:#3BE09A;transition:fill .4s}
.hm-hublbl{font:600 14px 'IBM Plex Mono',monospace;fill:#7fe3ff;letter-spacing:.04em}
.hm-flow{animation:hmFlow 1.6s linear infinite}
@keyframes hmFlow{to{stroke-dashoffset:-36}}
.hm-hubpulse{transform-box:fill-box;transform-origin:50% 50%;animation:hmPulse 2.6s ease-out infinite}
@keyframes hmPulse{0%{transform:scale(.8);opacity:.35}100%{transform:scale(1.9);opacity:0}}
.hm-sweep{transform-origin:330px 270px;opacity:0;transition:opacity .6s}
.hm-st1,.hm-st2{opacity:0}
.hm-fixpkt,.hm-threats{opacity:0;transition:opacity .4s}
.hm-shield{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.hm-node{transition:filter .4s}
/* phase 0 Monitor: radar sweep checks every device */
.tcx-map[data-phase="0"] .hm-sweep{opacity:1;animation:hmSpin 3.2s linear infinite}
@keyframes hmSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.tcx-map[data-phase="0"] .hm-dot{animation:hmPing 3.2s ease-in-out infinite}
.tcx-map[data-phase="0"] .hm-n-wifi .hm-dot{animation-delay:0s}.tcx-map[data-phase="0"] .hm-n-srv .hm-dot{animation-delay:.5s}.tcx-map[data-phase="0"] .hm-n-cloud .hm-dot{animation-delay:1.1s}.tcx-map[data-phase="0"] .hm-n-ph .hm-dot{animation-delay:1.6s}.tcx-map[data-phase="0"] .hm-n-fw .hm-dot{animation-delay:2.1s}.tcx-map[data-phase="0"] .hm-n-lap .hm-dot{animation-delay:2.7s}
@keyframes hmPing{0%,80%,100%{r:3.6}10%{r:6.5}}
/* phase 1 Fix: laptops flag an issue, help desk fixes it remotely */
.tcx-map[data-phase="1"] .hm-n-lap .hm-st0{opacity:0}
.tcx-map[data-phase="1"] .hm-n-lap .hm-st1{animation:hmIssue 3.2s linear forwards}
.tcx-map[data-phase="1"] .hm-n-lap .hm-st2{animation:hmFixed 3.2s linear forwards}
.tcx-map[data-phase="1"] .hm-n-lap .hm-dot{animation:hmDotFix 3.2s linear forwards}
.tcx-map[data-phase="1"] .hm-n-lap .hm-tile{animation:hmTileFix 3.2s linear forwards}
.tcx-map[data-phase="1"] .hm-fixpkt{opacity:1;animation:hmFadePkt 3.2s linear forwards}
@keyframes hmIssue{0%,55%{opacity:1}60%,100%{opacity:0}}
@keyframes hmFixed{0%,58%{opacity:0}64%,100%{opacity:1;fill:#3BE09A}}
@keyframes hmDotFix{0%,58%{fill:#FFB547}64%,100%{fill:#3BE09A}}
@keyframes hmTileFix{0%,58%{stroke:#FFB547;stroke-width:2}64%,100%{stroke:#3BE09A;stroke-width:2}}
@keyframes hmFadePkt{0%,15%{opacity:0}20%,60%{opacity:1}66%,100%{opacity:0}}
/* phase 2 Protect: threats stopped at the firewall, servers patched */
.tcx-map[data-phase="2"] .hm-threats{opacity:1}
.tcx-map[data-phase="2"] .hm-shield{animation:hmShield 1.4s ease-out infinite}
@keyframes hmShield{0%{opacity:.9;transform:scale(.75)}100%{opacity:0;transform:scale(1.25)}}
.tcx-map[data-phase="2"] .hm-n-fw .hm-st0,.tcx-map[data-phase="2"] .hm-n-srv .hm-st0{opacity:0}
.tcx-map[data-phase="2"] .hm-n-fw .hm-st2,.tcx-map[data-phase="2"] .hm-n-srv .hm-st2{opacity:1;fill:#3BE09A}
.tcx-map[data-phase="2"] .hm-n-fw .hm-tile{stroke:#3BE09A;stroke-width:2}
@media (max-width:1060px){.tcx-map{position:relative;right:auto;top:auto;transform:none;width:min(100%,560px);margin:0 auto -40px}.tcx-maphero{display:flex;flex-direction:column-reverse}.tcx-maphero .wrap{order:1}}
@media (max-width:680px){.tcx-optbar{font-size:11px;gap:3px;padding:5px;overflow-x:auto}.tcx-optbar a{padding:6px 8px}.tcx-optbar span{display:none}}
@media (prefers-reduced-motion:reduce){.hm-flow,.hm-hubpulse,.hm-sweep,.hm-dot,.hm-shield,.hm-st1,.hm-st2,.hm-fixpkt{animation:none!important}}

/* options C/D: still photo hero, subject on the right */
.tcx-photohero .vid-poster img{object-position:70% 50%}


/* ===== Oct 16 (Jamie): TechCore Request service button, nationwide map colors, free-phones offer, email ===== */
.t-tc .btn-svc,.t-tc .nav>li.nav-svc>a.btn-svc{border-color:#22C3F0}
.t-tc .btn-svc:hover,.t-tc .btn-svc:focus-visible{background:rgba(34,195,240,.16)}
.t-tc .nm-hl{fill:#38bdf8;fill-opacity:.85;stroke:#e0f7ff;stroke-width:1;animation:tcPulse 2.8s ease-in-out infinite}
.t-tc .nm-hl-c{fill:#38bdf8;fill-opacity:.45;stroke:#bdeeff;stroke-width:1;animation:tcPulseC 3.2s ease-in-out infinite}
.t-tc .nm-hub{fill:#e0f7ff;stroke:#fff}
.t-tc .nm-arc{stroke:#7dd3fc}
.t-tc .nm-dot{fill:#fff}.t-tc .nm-ring{stroke:#bae6fd}
.t-tc .nm-hdot{stroke:#22C3F0}
.t-tc .k-hub{background:#e0f7ff}.t-tc .k-hl{background:#38bdf8;outline:1px solid #e0f7ff}
@keyframes tcPulse{0%,100%{fill-opacity:.7}50%{fill-opacity:.95}}
@keyframes tcPulseC{0%,100%{fill-opacity:.35}50%{fill-opacity:.55}}
@media (prefers-reduced-motion:reduce){.t-tc .nm-hl,.t-tc .nm-hl-c{animation:none}}
.hero-offer{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin:4px 0 18px;padding:9px 16px;border-radius:999px;background:rgba(34,195,240,.12);border:1px solid rgba(34,195,240,.45);color:#e6f6ff;font-size:16px}
.hero-offer b{color:#5fd8ff}
.f-mail{margin-top:10px}.f-mail a{color:#5fd8ff;text-decoration:underline;text-underline-offset:3px}
.tc-mail{margin-top:14px;font-size:17px}.tc-mail a{color:#5fd8ff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* Oct 16: TechCore header fit with the Request service button */
@media (min-width:1440px) and (max-width:1680px){.t-tc .nav{gap:0}.t-tc .nav>li>a:not(.btn),.t-tc .nav>li>button{padding-left:7px;padding-right:7px;font-size:14px}.t-tc .nav>li.nav-svc>a.btn-svc{padding:8px 12px}.t-tc .nav>li.nav-svc .btn-svc svg{display:none}.t-tc .nav .btn-primary{padding-left:14px;padding-right:16px}}
@media (max-width:1439px){.t-tc .nav{display:none!important}.t-tc .menu-btn{display:inline-flex!important}}
@media (max-width:680px){.hero-offer{display:block;border-radius:14px;padding:10px 14px;font-size:15.5px}}