/* DataXsys v2.9.8 Client Portfolio */
.portfolio-title,.portfolio-cta-title{display:block;font-family:"League Spartan",sans-serif;font-size:clamp(2.1rem,3.1vw,3.25rem);font-weight:900;line-height:.92;letter-spacing:-.05em;text-transform:uppercase}
.portfolio-hero,.client-hero{min-height:610px}
.portfolio-intro__grid,.client-overview__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(3rem,7vw,8rem);align-items:end}
.portfolio-intro p,.client-overview p{color:#5d636e;font-size:1.05rem;line-height:1.75}
.portfolio-list{background:#f5f6f8}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.portfolio-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #dfe3e8;border-radius:22px;background:#fff;color:inherit;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.portfolio-card:hover{transform:translateY(-7px);border-color:#c50000;box-shadow:0 24px 54px rgba(21,25,32,.13)}
.portfolio-card__logo{padding:1rem;background:#f8f8f9;border-bottom:1px solid #e5e7eb}
.portfolio-card__logo img{display:block;width:100%;height:128px;object-fit:contain}
.portfolio-card__body{display:flex;flex:1;flex-direction:column;padding:1.25rem}
.portfolio-card__body>span{color:#b40000;font-size:.67rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.portfolio-card h3{margin:.55rem 0;color:#17181d;font-family:"League Spartan",sans-serif;font-size:1.45rem;line-height:1}
.portfolio-card p{color:#606672;font-size:.9rem;line-height:1.55}
.portfolio-card__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:1rem 0}
.portfolio-card__tags span{padding:.35rem .55rem;border-radius:999px;background:#f1f2f4;color:#565d68;font-size:.62rem;font-weight:700}
.portfolio-card strong{margin-top:auto;color:#b40000;font-size:.78rem}
.portfolio-proof .portfolio-grid{margin-top:3rem}
.portfolio-proof__stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2.2rem;border:1px solid rgba(255,255,255,.25)}
.portfolio-proof__stats div{padding:1.3rem;border-right:1px solid rgba(255,255,255,.2)}
.portfolio-proof__stats div:last-child{border-right:0}
.portfolio-proof__stats strong{display:block;color:#fff;font-family:"League Spartan",sans-serif;font-size:2rem}
.portfolio-proof__stats span{color:#f2dede;font-size:.8rem}
.portfolio-proof__action{text-align:center;margin-top:2rem}
.client-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;padding-top:5rem}
.client-hero h1{margin:.8rem 0;color:#fff;font-family:"League Spartan",sans-serif;font-size:clamp(2.7rem,5vw,5.6rem);font-weight:900;line-height:.9;text-transform:uppercase}
.client-hero p{max-width:650px;color:#c8cbd1;font-size:1.05rem;line-height:1.7}
.client-back{display:inline-block;margin-bottom:2rem;color:#fff;text-decoration:none;font-size:.8rem}
.client-hero__mark{padding:1rem;border-radius:24px;background:#fff}.client-hero__mark img{display:block;width:100%}
.client-story{overflow:visible;background:#f7f8fa}
.client-story__layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(3rem,7vw,8rem);align-items:start}
.client-story__steps{display:grid;gap:14vh;padding-bottom:15vh}
.client-step{min-height:68vh;padding:2rem;border-left:3px solid #d8dce2;opacity:.36;transition:.4s ease}
.client-step.is-active{border-color:#b40000;background:linear-gradient(90deg,rgba(180,0,0,.07),transparent);opacity:1}
.client-step>span{color:#b40000;font-size:.7rem;font-weight:850;letter-spacing:.12em}
.client-step h3{margin:.75rem 0;color:#17181d;font-family:"League Spartan",sans-serif;font-size:clamp(1.55rem,2.35vw,2.35rem);line-height:.98}
.client-step p{color:#5c636f;line-height:1.7}
.client-step__mobile-visual{display:none}
.client-story__sticky{position:sticky;top:102px;min-height:620px;padding:1.4rem;border:1px solid #dce0e6;border-radius:26px;background:#fff;box-shadow:0 28px 70px rgba(20,25,34,.12)}
.client-story__top{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}.client-story__top span{color:#b40000;font-family:"League Spartan",sans-serif;font-size:1.7rem;font-weight:900}.client-story__top small{font-weight:800;text-transform:uppercase}
.client-visual{overflow:hidden;border:1px solid #e0e3e8;border-radius:19px;background:#f6f7f9}
.client-visual__browser{display:flex;align-items:center;gap:6px;padding:.7rem;background:#fff}.client-visual__browser span{width:8px;height:8px;border-radius:50%;background:#d3d6db}.client-visual__browser span:first-child{background:#b40000}.client-visual__browser small{margin-left:auto;color:#777d87}
.client-visual__canvas{padding:1.2rem}
.client-visual__metric{display:inline-flex;min-width:42%;flex-direction:column;margin-right:.6rem;padding:1rem;border-radius:13px;background:#fff}.client-visual__metric small{color:#7b818c}.client-visual__metric strong{font-size:1.7rem}
.client-visual__chart{position:relative;display:flex;height:220px;align-items:end;gap:7%;margin-top:1rem;padding:1rem;border-radius:14px;background:#fff}
.client-visual__chart i{width:11%;height:var(--h);border-radius:7px 7px 0 0;background:linear-gradient(#df8d8d,#b40000);animation:clientBars 2.8s ease-in-out infinite alternate}
.client-visual__chart b{position:absolute;inset:32% 8% auto;height:3px;background:#b40000;transform:rotate(-12deg);transform-origin:left}
.client-visual__labels{display:flex;justify-content:space-between;padding:.8rem .4rem;color:#6a707b;font-size:.72rem;font-weight:700}
.client-story__note{margin-top:1rem;padding:1rem;border-radius:15px;background:#fff3f3}.client-story__note span{color:#b40000;font-size:.65rem;font-weight:850;text-transform:uppercase}.client-story__note p{margin:.3rem 0 0;color:#555c67;font-size:.8rem;line-height:1.5}
@keyframes clientBars{from{transform:scaleY(.7)}to{transform:scaleY(1)}}
@media(max-width:980px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
.portfolio-intro__grid,.client-overview__grid,.client-hero__grid{grid-template-columns:1fr}
.portfolio-grid{grid-template-columns:1fr}.portfolio-card__logo img{height:105px}
.portfolio-proof__stats{grid-template-columns:1fr}.portfolio-proof__stats div{border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
.client-story__layout{display:block}.client-story__sticky{display:none}.client-story__steps{gap:1.5rem;padding-bottom:0}.client-step{min-height:auto;opacity:1}.client-step__mobile-visual{display:block;margin-top:1.2rem}.client-visual__chart{height:160px}
.client-hero__grid{padding-top:2rem}.client-hero__mark{max-width:420px}
}


/* =========================================================
   DATAXSYS DESIGN SYSTEM v2.9.9
   PORTFOLIO REFINEMENT
   ========================================================= */

/* Keep DataXsys branding proportional on portfolio/detail pages. */
.portfolio-page .brand img,
.client-detail-page .brand img {
  width: 210px !important;
  max-width: 210px !important;
  height: auto !important;
}

.portfolio-page .footer-brand-logo,
.client-detail-page .footer-brand-logo {
  display: inline-flex !important;
  width: auto !important;
}

.portfolio-page .footer-brand-logo img,
.client-detail-page .footer-brand-logo img {
  display: block !important;
  width: 165px !important;
  max-width: 165px !important;
  height: auto !important;
  object-fit: contain !important;
}

.portfolio-page .footer-brand-block,
.client-detail-page .footer-brand-block {
  max-width: 320px !important;
}

.portfolio-page .footer-wordmark-panel img,
.client-detail-page .footer-wordmark-panel img {
  display: block !important;
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

.portfolio-page .footer-main,
.client-detail-page .footer-main {
  align-items: start !important;
}

/* More compact client cards. */
.portfolio-page .portfolio-card__logo {
  padding: .75rem 1rem !important;
}

.portfolio-page .portfolio-card__logo img {
  height: 78px !important;
  max-height: 78px !important;
}

.portfolio-page .portfolio-card h3 {
  font-size: 1.18rem !important;
}

.portfolio-page .portfolio-card p {
  font-size: .82rem !important;
}

/* Client-detail hero mark should support the story, not dominate it. */
.client-detail-page .client-hero__grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr) !important;
}

.client-detail-page .client-hero__mark {
  width: min(100%, 360px) !important;
  justify-self: end !important;
  padding: .8rem !important;
  border-radius: 18px !important;
}

.client-detail-page .client-hero__mark img {
  max-height: 190px !important;
  object-fit: contain !important;
}

.client-detail-page .client-hero h1 {
  font-size: clamp(2.35rem, 4vw, 4.4rem) !important;
}

/* Stop text clipping in cards and marks. */
.portfolio-card,
.client-hero__mark,
.portfolio-card__logo {
  overflow: hidden !important;
}

.portfolio-card__logo img,
.client-hero__mark img {
  max-width: 100% !important;
}

/* Refined portfolio page hero spacing. */
.portfolio-page .portfolio-hero {
  min-height: 520px !important;
}

.portfolio-page .portfolio-intro {
  padding-top: clamp(4rem, 8vw, 7rem) !important;
}

/* Mobile brand sizing. */
@media (max-width: 860px) {
  .portfolio-page .brand img,
  .client-detail-page .brand img {
    width: 145px !important;
    max-width: 145px !important;
  }

  .portfolio-page .footer-brand-logo img,
  .client-detail-page .footer-brand-logo img {
    width: 125px !important;
    max-width: 125px !important;
  }

  .portfolio-page .footer-wordmark-panel img,
  .client-detail-page .footer-wordmark-panel img {
    width: 88% !important;
  }

  .client-detail-page .client-hero__grid {
    grid-template-columns: 1fr !important;
  }

  .client-detail-page .client-hero__mark {
    justify-self: start !important;
    width: min(100%, 280px) !important;
  }

  .client-detail-page .client-hero__mark img {
    max-height: 135px !important;
  }
}

/* v3.0.0 enforce About footer on portfolio/detail pages */
.portfolio-page .footer-main,.client-detail-page .footer-main{
  grid-template-columns:minmax(250px,.85fr) minmax(0,2.15fr)!important
}
.portfolio-page .footer-links--engine,.client-detail-page .footer-links--engine{
  grid-template-columns:repeat(4,minmax(0,1fr))!important
}
@media(max-width:900px){
  .portfolio-page .footer-main,.client-detail-page .footer-main{grid-template-columns:1fr!important}
  .portfolio-page .footer-links--engine,.client-detail-page .footer-links--engine{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
}


/* =========================================================
   DATAXSYS v3.0.1 — EXACT ABOUT FOOTER CONSISTENCY
   ========================================================= */

.portfolio-page .site-footer,
.client-detail-page .site-footer {
  font-size: inherit !important;
}

.portfolio-page .footer-shell,
.client-detail-page .footer-shell {
  padding-top: clamp(3rem, 6vw, 5rem) !important;
  padding-bottom: 1.5rem !important;
}

.portfolio-page .footer-brand-logo img,
.client-detail-page .footer-brand-logo img {
  width: 205px !important;
  max-width: 205px !important;
  height: auto !important;
}

.portfolio-page .footer-brand-block p,
.client-detail-page .footer-brand-block p {
  max-width: 285px !important;
  color: #aeb2bb !important;
  font-size: .88rem !important;
  line-height: 1.55 !important;
}

.portfolio-page .footer-contact a,
.client-detail-page .footer-contact a {
  font-size: .84rem !important;
}

.portfolio-page .footer-links--engine h3,
.client-detail-page .footer-links--engine h3 {
  margin: 0 0 1rem !important;
  color: #fff !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
}

.portfolio-page .footer-links--engine a,
.client-detail-page .footer-links--engine a {
  display: block !important;
  margin-bottom: .72rem !important;
  color: #aeb2bb !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
}

.portfolio-page .footer-legal-row,
.client-detail-page .footer-legal-row {
  display: flex !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-top: 3.2rem !important;
  padding: 1.4rem 0 !important;
  border-top: 1px solid #555861 !important;
  border-bottom: 1px solid #555861 !important;
  color: #aeb2bb !important;
  font-size: .7rem !important;
}

.portfolio-page .footer-legal-row > div,
.client-detail-page .footer-legal-row > div {
  display: flex !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
}

.portfolio-page .footer-legal-row a,
.client-detail-page .footer-legal-row a {
  color: #aeb2bb !important;
  font-size: .7rem !important;
}


@media (max-width: 900px) {
  .portfolio-page .footer-links--engine,
  .client-detail-page .footer-links--engine {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .portfolio-page .footer-legal-row,
  .client-detail-page .footer-legal-row {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

@media (max-width: 520px) {
  .portfolio-page .footer-brand-logo img,
  .client-detail-page .footer-brand-logo img {
    width: 150px !important;
    max-width: 150px !important;
  }

  .portfolio-page .footer-links--engine a,
  .client-detail-page .footer-links--engine a {
    font-size: .76rem !important;
  }
}


/* =========================================================
   DATAXSYS v3.0.2 — RESTORE FOOTER WORDMARK
   ========================================================= */

.portfolio-page .footer-wordmark-panel,
.client-detail-page .footer-wordmark-panel {
  display: block !important;
  width: 100% !important;
  margin-top: 2.2rem !important;
  text-align: center !important;
}

.portfolio-page .footer-wordmark-line,
.client-detail-page .footer-wordmark-line {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: #555861 !important;
}

.portfolio-page .footer-wordmark-panel img,
.client-detail-page .footer-wordmark-panel img {
  display: block !important;
  width: min(88vw, 1180px) !important;
  max-width: 1180px !important;
  height: auto !important;
  margin: clamp(2.5rem, 6vw, 5.5rem) auto !important;
  object-fit: contain !important;
}

@media (max-width: 900px) {
  .portfolio-page .footer-wordmark-panel img,
  .client-detail-page .footer-wordmark-panel img {
    width: 92% !important;
    margin: 2.5rem auto !important;
  }
}

@media (max-width: 520px) {
  .portfolio-page .footer-wordmark-panel img,
  .client-detail-page .footer-wordmark-panel img {
    width: 96% !important;
    margin: 2rem auto !important;
  }
}


/* =========================================================
   DATAXSYS v3.0.3 — CLIENT SERVICE STORY ENHANCEMENTS
   ========================================================= */

.btn-about-dataxsys {
  border-color: #fff !important;
  background: #fff !important;
  color: #b40000 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.btn-about-dataxsys:hover,
.btn-about-dataxsys:focus-visible {
  border-color: #fff !important;
  background: #f7f7f7 !important;
  color: #8f0000 !important;
  transform: translateY(-2px);
}

.client-help-summary p {
  margin: 0 0 1.4rem;
  color: #5d636e;
  font-size: 1.05rem;
  line-height: 1.75;
}

.client-help-facts {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .75rem;
}

.client-help-facts div {
  padding: 1rem;
  border: 1px solid #e0e3e8;
  border-radius: 14px;
  background: #f8f9fb;
}

.client-help-facts strong {
  display: block;
  margin-bottom: .25rem;
  color: #b40000;
  font-family: "League Spartan", sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
}

.client-help-facts span {
  color: #6b717c;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.client-service-image {
  margin: 0;
  overflow: hidden;
  border: 1px solid #dde1e7;
  border-radius: 20px;
  background: #fff;
}

.client-service-image img {
  display: block;
  width: 100%;
  height: auto;
}

.client-story__sticky #clientVisualHost {
  min-height: 0;
}

.client-step p {
  max-width: 560px;
}

@media(max-width:820px){
  .client-help-facts {
    grid-template-columns: 1fr;
  }

  .client-service-image {
    border-radius: 16px;
  }

  .client-hero .about-hero__actions {
    flex-wrap: wrap;
  }
}


/* =========================================================
   DATAXSYS v3.0.4 — BUTTON + SERVICE VISUAL REFINEMENT
   ========================================================= */

.client-detail-page .btn-about-dataxsys,
.client-detail-page a.btn-about-dataxsys {
  background: #fff !important;
  color: #b40000 !important;
  border: 2px solid #fff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.client-detail-page .btn-about-dataxsys:hover,
.client-detail-page .btn-about-dataxsys:focus-visible {
  background: #f6f6f6 !important;
  color: #8d0000 !important;
}

.client-story__sticky {
  min-height: 560px !important;
}

.client-story__sticky .client-service-image {
  max-width: 700px;
  margin: 0 auto;
}

.client-story__sticky .client-service-image img {
  max-height: 390px;
  object-fit: contain;
}

.client-step__mobile-visual .client-service-image {
  max-width: 680px;
}

@media(max-width:820px){
  .client-step__mobile-visual .client-service-image {
    max-width: 100%;
  }

  .client-step__mobile-visual .client-service-image img {
    max-height: 300px;
    object-fit: contain;
  }
}

@media(max-width:520px){
  .client-step__mobile-visual .client-service-image img {
    max-height: 245px;
  }
}


/* =========================================================
   DATAXSYS v3.0.5 — YELLOW PILL ACTION BUTTON
   ========================================================= */

.btn-yellow-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  border: 2px solid #ffb800 !important;
  border-radius: 999px !important;
  background: #ffb800 !important;
  color: #111 !important;
  padding: .92rem 1.65rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  box-shadow: 0 10px 24px rgba(255,184,0,.22) !important;
}

.btn-yellow-action:hover,
.btn-yellow-action:focus-visible {
  border-color: #ffc83d !important;
  background: #ffc83d !important;
  color: #111 !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255,184,0,.30) !important;
}

.btn-yellow-action:active {
  transform: translateY(0);
}

.btn-client-website{
display:inline-flex;align-items:center;justify-content:center;
padding:16px 30px;border-radius:999px;
background:#fff!important;color:#111!important;
border:2px solid #fff!important;font-weight:700;
text-decoration:none;transition:all .25s ease}
.btn-client-website:hover{
background:#f2f2f2!important;color:#111!important;
border-color:#f2f2f2!important;
box-shadow:0 10px 24px rgba(0,0,0,.18);
transform:translateY(-2px)}