/* WebPro360 redesign: visual batch 2 (2026-10-23).
   Loaded by _partials/redesign-tracking.php on every redesign page, after the compiled bundle.
   Behaviors live in /assets/redesign/enhance.js. */

/* ---------- hero proof line ---------- */
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:20px 0 0;padding:0;font-size:12px;letter-spacing:.6px;line-height:1.6;color:#9fb0b6;text-transform:uppercase}
.hero-proof>*{display:inline-flex;align-items:center}
.hero-proof>*+*::before{content:"";width:4px;height:4px;border-radius:50%;background:#5ce6df;margin:0 12px;flex:0 0 auto;opacity:.8}
.hero-proof a{color:#d6e4e2;text-decoration:none;letter-spacing:.4px}
.hero-proof a:hover{color:#5ce6df}
.hero-location{margin-top:16px}
@media (max-width:760px){.hero-proof{flex-direction:column;align-items:flex-start;gap:4px}.hero-proof>*+*::before{display:none}}

/* ---------- client logo strip ---------- */
.trust-strip{overflow:hidden}
.trust-strip .trust-logos{display:flex;justify-content:space-between;gap:34px;flex:1;min-width:0}
.trust-logos img{height:30px;width:auto;max-width:150px;object-fit:contain;opacity:.68;filter:none;transition:opacity .3s,transform .3s;flex:0 0 auto}
.trust-logos img:hover{opacity:1;transform:translateY(-1px)}
.trust-logos img[aria-hidden]{display:none}
@media (max-width:1100px){.trust-logos img{height:26px;max-width:120px}}
@media (max-width:760px){
  .trust-strip{display:grid;grid-template-columns:1fr auto;gap:18px 20px}
  .trust-strip .trust-logos{grid-column:1/-1;display:flex;grid-template-columns:none;width:max-content;justify-content:flex-start;gap:38px;animation:wpTrustScroll 42s linear infinite}
  .trust-logos img,.trust-logos img[aria-hidden]{display:block;height:24px;max-width:110px;opacity:.75}
  .trust-strip:hover .trust-logos{animation-play-state:paused}
}
@keyframes wpTrustScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- service pillar cards: hover bar + price anchor ---------- */
.service-card{display:flex;flex-direction:column}
.service-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:#5ce6df;transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.service-card:hover::after,.service-card:focus-visible::after,.service-card.service-active::after{transform:scaleX(1)}
.service-price{margin:22px 0 0;font-size:13px;letter-spacing:.3px;color:#2b7f78;font-weight:600}
.service-card.service-active .service-price{color:#8de8dc}
@media (max-width:760px){.service-price{margin-top:16px}}

/* ---------- more work previews ---------- */
.work-law{--work-accent:#8fb8c9}
.work-staffing{--work-accent:#6fd0d8}
.work-furniture{--work-accent:#d7b07a}
.work-entry:nth-child(n+4){margin-top:10px}

/* ---------- orbit: slow rotation, facts on hover ---------- */
@keyframes wpOrbitSpin{to{transform:rotate(360deg)}}
@keyframes wpOrbitSpinBack{to{transform:rotate(-360deg)}}
.diagram-orbit{will-change:transform}
.orbit-one{animation:wpOrbitSpin 70s linear infinite;border-style:dashed}
.orbit-two{animation:wpOrbitSpinBack 110s linear infinite}
.connection-diagram:hover .diagram-orbit,.motion-off .diagram-orbit{animation-play-state:paused}
.diagram-node{cursor:default;outline-offset:3px}
.diagram-node[data-fact]::after{content:attr(data-fact);position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,6px);width:240px;padding:11px 13px;border-radius:12px;background:#0b1518;border:1px solid #2f4a4d;box-shadow:0 18px 40px #0007;color:#d6e4e2;font:13px/1.55 Arial,sans-serif;letter-spacing:0;text-transform:none;text-align:left;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:6}
.diagram-node:hover::after,.diagram-node:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.diagram-node.node-b[data-fact]::after{left:auto;right:0;transform:translate(0,6px)}
.diagram-node.node-b:hover::after,.diagram-node.node-b:focus-visible::after{transform:translate(0,0)}
.diagram-node:hover{border-color:#5ce6df;color:#eafffd}
@media (max-width:760px){.diagram-node[data-fact]::after{display:none}.orbit-one,.orbit-two{animation:none}}

/* ---------- team: two more tiles, bio drawer, figures ---------- */
.team-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;max-width:1100px;margin:40px auto 0}
.person-small{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:20px;text-decoration:none;color:inherit}
.person-small .person-photo{height:96px;width:96px;border-radius:14px;overflow:hidden}
.person-small .person-photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.person-small .person-meta h3{font-size:21px;margin:0 0 4px;letter-spacing:-.6px}
.person-small .person-meta span{font-size:11px;letter-spacing:1px;color:#577377}
.person-small:hover .person-meta h3{color:#1f5b55}
@media (max-width:760px){.team-more{grid-template-columns:1fr;gap:18px;margin-top:28px}.person-small{grid-template-columns:72px 1fr;gap:14px}.person-small .person-photo{width:72px;height:72px}}
.person-plus{cursor:pointer;transition:transform .3s,background .3s}
.person-plus:hover{background:#5ce6df}
.person.is-open .person-plus{transform:rotate(45deg)}
.person-bio{grid-column:1/-1;background:#fff;border:1px solid #c5d3ce;border-left:3px solid #5ce6df;border-radius:14px;padding:22px 26px;margin:-10px 0 0;color:#2a3f43;font:16px/1.7 Arial,sans-serif;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.person-bio[hidden]{display:none}
.person-bio p{margin:0;max-width:640px}
.person-bio a{color:#1f5b55;font-weight:600;text-decoration:none;white-space:nowrap}
.person-bio a:hover{text-decoration:underline}
.team-figures{display:flex;gap:40px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid #c5d3ce}
.team-figures>div{display:grid;gap:4px}
.team-figures strong{font-size:34px;letter-spacing:-1.5px;line-height:1;color:#102025;font-weight:500}
.team-figures span{font-size:12px;letter-spacing:.6px;color:#577377;text-transform:uppercase}
@media (max-width:760px){.team-figures{gap:24px}.team-figures strong{font-size:28px}}

/* ---------- process steps: progress rail ---------- */
.process-steps{position:relative;--rail:0;padding-left:44px}
.process-steps::before{content:"";position:absolute;left:11px;top:40px;bottom:40px;width:1px;background:#2a3b40}
.process-steps::after{content:"";position:absolute;left:11px;top:40px;width:1px;height:calc((100% - 80px) * var(--rail));background:#5ce6df;box-shadow:0 0 12px #5ce6df88;transition:height .25s linear}
.process-step{position:relative;border-top-color:#1f2d31}
.process-step>span{position:absolute;left:-44px;top:36px;width:23px;height:23px;border-radius:50%;border:1px solid #3a5257;background:#0d1a1e;color:#8da2aa;font-size:9px;letter-spacing:0;display:grid;place-items:center;transition:background .4s,color .4s,border-color .4s,box-shadow .4s;z-index:1}
.process-step.is-past>span{background:#5ce6df;color:#06110f;border-color:#5ce6df;box-shadow:0 0 0 5px #5ce6df22}
.process-step>svg{display:none}
.process-step h3{transition:color .4s}
.process-step.is-past h3{color:#eafffd}
@media (max-width:760px){.process-steps{padding-left:36px}.process-step>span{left:-36px;top:32px;width:20px;height:20px}.process-steps::before,.process-steps::after{left:10px}}

/* ---------- testimonials: rotation ---------- */
.testimonial-section{position:relative}
.testimonial-section blockquote,.testimonial-section>p{transition:opacity .9s ease}
.testimonial-section .quote-alt[hidden]{display:none}
.testimonial-section.is-fading blockquote,.testimonial-section.is-fading>p{opacity:0}
.testimonial-section>p img{display:block;height:28px;width:auto;max-width:140px;margin:0 auto 14px;opacity:.9}
.quote-dots{display:flex;justify-content:center;gap:8px;margin:26px 0 0}
.quote-dots button{width:8px;height:8px;border-radius:50%;border:1px solid #4e6a66;background:transparent;padding:0;cursor:pointer;transition:background .3s,transform .3s}
.quote-dots button[aria-current="true"]{background:#5ce6df;border-color:#5ce6df;transform:scale(1.25)}
.quote-dots button:focus-visible{outline:2px solid #5ce6df;outline-offset:3px}

/* ---------- Foundation billing toggle ---------- */
.bill-toggle{display:inline-flex;gap:4px;padding:3px;border:1px solid #2a3b40;border-radius:99px;margin:-6px 0 18px}
.bill-toggle button{font:600 11px/1 inherit;font-family:inherit;letter-spacing:.6px;text-transform:uppercase;padding:7px 12px;border-radius:99px;border:0;background:transparent;color:#8da2aa;cursor:pointer;transition:background .3s,color .3s}
.bill-toggle button.is-on{background:#163033;color:#8de8dc}
.plan .price strong{transition:opacity .25s}
.plan .price.is-swapping strong{opacity:.3}

/* ---------- services hub: scroll spy + stack pulse + prices ---------- */
.connected-service-links>a{position:relative;transition:background .3s}
.connected-service-links>a.is-current{background:#102a2b}
.connected-service-links>a.is-current::before{content:"";position:absolute;left:-2px;top:14px;bottom:14px;width:3px;border-radius:3px;background:#5ce6df;box-shadow:0 0 10px #5ce6df}
.connected-service-links>a.is-current strong{color:#bdf2ce}
.dir-price{display:block;color:#8de8dc;font-size:12px;margin-top:3px;letter-spacing:.2px}
.hosting-layers>div{transition:border-color .5s,box-shadow .5s,background .5s}
.hosting-layers>div.is-lit:not([data-selected=true]){border-color:#8fcfa0;box-shadow:0 0 0 1px #b0e0bd44,0 10px 30px #0005}
.hosting-layers>div.is-lit .layer-indicator{background:#b0e0bd}

/* ---------- service pages: proof card + chip subnav ---------- */
.sub-intro-grid .proof-card{grid-column:1/-1;width:100%}
.proof-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:center;margin:42px 0 0;padding:22px;border:1px solid #2f4a4d;border-radius:16px;background:linear-gradient(135deg,#0f2024,#0b1619)}
.proof-card img{width:100%;height:auto;border-radius:10px;border:1px solid #2a4347;display:block}
.proof-card .eyebrow{margin-bottom:10px!important}
.proof-card h3{font-size:22px;margin:0 0 10px;letter-spacing:-.6px}
.proof-card p{margin:0 0 14px;color:#a8c3c0;font:15px/1.7 Arial,sans-serif}
.proof-card a{color:#8de8dc;text-decoration:none;font-size:13px;letter-spacing:.3px;display:inline-flex;align-items:center;gap:6px}
.proof-card a svg{width:16px;height:16px;flex:0 0 auto}
.proof-card a:hover{color:#eafffd}
@media (max-width:760px){.proof-card{grid-template-columns:1fr;gap:16px;padding:16px;margin-top:30px}}
@media (max-width:980px){
  .subpage .service-chapters{display:flex;gap:8px;overflow-x:auto;padding:12px var(--page-gutter,20px);scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .subpage .service-chapters::-webkit-scrollbar{display:none}
  .subpage .service-chapters a{flex:0 0 auto;white-space:nowrap;padding:9px 14px;border:1px solid #2f4a4d;border-radius:99px;font-size:11px;letter-spacing:.3px;scroll-snap-align:start;background:#0d1a1e}
  .subpage .service-chapters a.is-current{border-color:#5ce6df;color:#eafffd}
}

/* ---------- contact page ---------- */
.contact-facts{display:grid;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid #2a3b40}
.contact-facts div{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;color:#afc2c6;font:15px/1.6 Arial,sans-serif}
.contact-facts svg{width:18px;height:18px;margin-top:3px;color:#5ce6df}
.contact-facts strong{display:block;color:#eafffd;font-weight:500;font-family:inherit}
.contact-person{display:flex;align-items:center;gap:14px;margin-top:22px}
.contact-person img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top;border:1px solid #2f4a4d}
.contact-person strong{display:block;font-weight:500;color:#eafffd}
.contact-person span{font-size:12px;letter-spacing:.6px;color:#8da2aa;text-transform:uppercase}
@media (min-width:981px){
  body.contact-page .sub-hero{padding-bottom:34px}
  body.contact-page .contact-page-layout{padding-top:34px}
}

/* ---------- mobile: chat folded into the contact bar, phone at the top of the menu ---------- */
nav.mobile-contact-bar .bar-chat{display:none;flex:0 0 auto;min-width:54px;padding-inline:0}
@media (max-width:760px){
  body.has-mobile-bar #wp360-assistant{display:none}
  body.has-mobile-bar.chat-open #wp360-assistant{display:block}
  nav.mobile-contact-bar.has-chat{grid-template-columns:minmax(0,1fr) auto auto}
  nav.mobile-contact-bar .bar-chat{display:inline-flex}
  nav.mobile-contact-bar.has-chat .mobile-consultation-button{font-size:13px;padding-inline:10px;letter-spacing:-.1px}
  body.chat-open nav.mobile-contact-bar{display:none}
}
.menu-phone{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 16px;margin:0 0 6px;border-bottom:1px solid #2a3b40;color:#eafffd;text-decoration:none;font-size:18px;letter-spacing:-.3px}
.menu-phone small{font-size:11px;letter-spacing:.8px;color:#8da2aa;text-transform:uppercase}
.menu-phone svg{width:18px;height:18px;color:#5ce6df;flex:0 0 auto}

/* ---------- footer: location, hours, social ---------- */
.footer-facts{display:grid;gap:6px;margin:14px 0 0;color:#8da2aa;font-size:13px;line-height:1.6}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid #2a3b40;color:#9fb0b6;transition:border-color .3s,color .3s}
.footer-social a:hover{border-color:#5ce6df;color:#5ce6df}
.footer-social svg{width:16px;height:16px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .trust-logos,.orbit-one,.orbit-two{animation:none!important}
  .process-steps::after,.service-card::after,.testimonial-section blockquote,.testimonial-section>p{transition:none!important}
}

/* ---------- one footer look on every page ---------- */
.subpage .footer-links h3{font-size:12px!important;letter-spacing:1px;text-transform:uppercase;color:#6e8b94;margin:0 0 8px}
.subpage .footer-statement{font-size:21px}

/* ---------- Our work: case popup ---------- */
.portfolio-grid>a{cursor:pointer}
.case-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px}
.case-modal[hidden]{display:none}
.case-modal .case-veil{position:absolute;inset:0;background:#040a0cd9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.case-panel{position:relative;width:min(980px,100%);max-height:calc(100vh - 48px);overflow:auto;background:#0b161a;border:1px solid #2f4a4d;border-radius:18px;box-shadow:0 40px 120px #000a;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);color:#eaf4f2}
.case-shot{position:relative;background:#06111a;min-height:300px}
.case-shot img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;border-right:1px solid #2f4a4d}
.case-body{padding:34px 34px 30px;display:flex;flex-direction:column;gap:14px}
.case-body .eyebrow{margin:0!important;color:#8de8dc;letter-spacing:1.4px;font-size:11px;text-transform:uppercase}
.case-body h3{margin:0;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.8px;line-height:1.15}
.case-body p{margin:0;color:#afc2c6;font:15px/1.7 Arial,sans-serif}
.case-body h4{margin:8px 0 0;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#6e8b94;font-weight:600}
.case-body ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.case-body li{position:relative;padding-left:20px;color:#d6e4e2;font:15px/1.6 Arial,sans-serif}
.case-body li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;border-radius:50%;background:#5ce6df}
.case-results{display:flex;flex-wrap:wrap;gap:22px;padding:14px 0 2px;border-top:1px solid #1f2d31}
.case-results div{display:grid;gap:2px}
.case-results strong{font-size:28px;letter-spacing:-1px;line-height:1;font-weight:500}
.case-results span{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#8da2aa}
.case-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:14px}
.case-actions a,.case-actions button{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 inherit;font-family:inherit;letter-spacing:.2px;padding:13px 18px;border-radius:50px;text-decoration:none;cursor:pointer}
.case-actions .case-visit{background:#5ce6df;color:#061514;border:1px solid #5ce6df}
.case-actions .case-start{background:transparent;color:#eaf4f2;border:1px solid #495457}
.case-actions .case-start:hover{border-color:#5ce6df;color:#5ce6df}
.case-close{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid #495457;background:#0b161ae6;color:#eaf4f2;display:grid;place-items:center;cursor:pointer}
.case-close:hover{border-color:#5ce6df;color:#5ce6df}
.case-close svg{width:18px;height:18px}
.case-nav{position:absolute;bottom:14px;left:14px;display:flex;gap:8px;z-index:2}
.case-nav button{width:40px;height:40px;border-radius:50%;border:1px solid #495457;background:#0b161ae6;color:#eaf4f2;display:grid;place-items:center;cursor:pointer}
.case-nav button:hover{border-color:#5ce6df;color:#5ce6df}
.case-nav svg{width:18px;height:18px}
body.case-open{overflow:hidden}
@media (max-width:860px){
  .case-modal{padding:0;place-items:end}
  .case-panel{display:block;width:100%;max-height:100vh;border-radius:18px 18px 0 0;border-bottom:0}
  .case-shot{min-height:0;aspect-ratio:16/10}
  .case-shot img{border-right:0;border-bottom:1px solid #2f4a4d}
  .case-body{padding:22px 20px 28px}
  .case-nav{bottom:auto;top:14px;left:14px}
}
@media (prefers-reduced-motion:no-preference){
  .case-panel{animation:caseIn .35s cubic-bezier(.2,.7,.2,1)}
  @keyframes caseIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
}