/* WOOH 11.8.4 — shared service-page repair and visual system. */

/* The general numbered-row rule must never turn prose into a two-column grid. */
.service-v116-deliver > p,
.service-v116-deliver > p.service-v116-deliver-intro{
  display:block!important;
  grid-template-columns:none!important;
  width:min(100%,58ch)!important;
  max-width:58ch!important;
  padding:0!important;
  margin:10px 0 26px!important;
  border:0!important;
  color:#c0c9bf!important;
  font-size:clamp(15px,1.15vw,18px)!important;
  line-height:1.55!important;
  overflow-wrap:break-word!important;
}
.service-v116-deliver h3{width:auto!important;max-width:17ch!important}
.service-v116-deliver-list p{display:grid!important;min-width:0}
.service-v116-deliver-list p b{min-width:0;overflow-wrap:break-word!important}
.service-v116-fit-grid > *{min-width:0}
.service-v116-fit-list>span{grid-template-columns:18px minmax(0,1fr)}

/* Capability cards: each icon lives in a WOOH motion panel, with clean copy below. */
.service-v116-options{background:#fff!important}
.service-v116-option-grid{gap:16px!important}
.service-v116-option-card{
  min-width:0;min-height:390px!important;
  padding:18px 18px 22px!important;
  border:1px solid #dfe5df!important;
  background:var(--cap-bg,#fff)!important;
  border-radius:22px!important;
  box-shadow:0 2px 0 rgba(11,24,17,.025);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s ease!important;
}
.service-v116-option-card:hover,.service-v116-option-card.is-active,.service-v116-option-card:focus-within{
  transform:translateY(-7px)!important;
  border-color:color-mix(in srgb,var(--service-primary) 58%,#c8d2c8)!important;
  box-shadow:0 24px 48px rgba(7,17,13,.12)!important;
}
.service-v116-option-card:focus-within{outline:2px solid var(--service-primary);outline-offset:3px}
.service-v116-card-bg{opacity:.22;pointer-events:none}
.service-v116-option-card.has-bg-image .service-v116-card-bg{opacity:.85}
.service-v116-option-card>span{
  z-index:5;right:32px!important;top:32px!important;
  color:#d9f6e5!important;font-size:.66rem!important;
}
.service-v116-icon-wrap{
  isolation:isolate;position:relative;z-index:2;
  width:100%!important;height:174px!important;margin:0 0 25px!important;
  overflow:hidden;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;
  background:
    radial-gradient(circle at 32% 58%,color-mix(in srgb,var(--service-primary) 23%,transparent),transparent 38%),
    radial-gradient(circle at 81% 20%,color-mix(in srgb,var(--service-secondary) 13%,transparent),transparent 35%),
    #0a110f!important;
  transform:none!important;
  transition:background .35s ease,border-color .35s ease!important;
}
.service-v116-icon-wrap::before{
  content:"W";position:absolute;z-index:0;left:18px;bottom:-42px;
  color:color-mix(in srgb,var(--service-primary) 25%,#fff);
  font:850 192px/.8 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.16em;
  opacity:.11;pointer-events:none;
  transition:transform .7s var(--ease),opacity .4s ease;
}
.service-v116-icon-wrap::after{
  content:"";position:absolute;z-index:1;left:50%;top:50%;width:220px;height:92px;
  transform:translate(-50%,-50%) rotate(-24deg);
  border:1px solid color-mix(in srgb,var(--service-primary) 48%,transparent);
  border-radius:50%;opacity:.65;pointer-events:none;
  transition:transform .8s var(--ease),opacity .4s ease;
}
.service-v116-icon-wrap>svg{
  position:relative;z-index:2;width:100px!important;height:100px!important;
  overflow:visible;fill:none;stroke:#f4fff6!important;stroke-width:1.8!important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.3));
  transition:transform .6s var(--ease),filter .4s ease,opacity .2s ease!important;
}
.service-v116-icon-wrap .i-live{stroke:var(--service-primary)!important;stroke-width:2.7!important}
.service-v116-option-card:hover .service-v116-icon-wrap::before,
.service-v116-option-card:focus-within .service-v116-icon-wrap::before{transform:translateX(12px);opacity:.18}
.service-v116-option-card:hover .service-v116-icon-wrap::after,
.service-v116-option-card:focus-within .service-v116-icon-wrap::after{
  transform:translate(-50%,-50%) rotate(16deg) scale(1.13);opacity:1;
}
.service-v116-option-card:hover .service-v116-icon-wrap>svg,
.service-v116-option-card:focus-within .service-v116-icon-wrap>svg{
  transform:translateY(-5px) rotate(-3deg) scale(1.08);
  filter:drop-shadow(0 14px 20px color-mix(in srgb,var(--service-primary) 25%,transparent));
}
.service-v116-icon-wrap:has(.service-v116-icon-custom img){background:#f5f7f4!important}
.service-v116-icon-wrap:has(.service-v116-icon-custom img)::before{opacity:.045}
.service-v116-icon-custom{inset:14px!important}
.service-v116-icon-custom img{max-width:100%;max-height:100%;filter:none}
.service-v116-option-card h3{
  margin:0 4px 10px!important;
  font-size:clamp(1.4rem,1.8vw,2rem)!important;
  line-height:1.05!important;letter-spacing:-.045em!important;
}
.service-v116-option-card p{
  margin:0 4px 22px!important;max-width:42ch;
  color:color-mix(in srgb,var(--cap-text,#11130f) 73%,transparent)!important;
  font-size:clamp(.9rem,1.02vw,1rem)!important;line-height:1.5!important;
}
.service-v116-option-card>a{
  margin:auto 4px 0;padding-top:15px;border-top:1px solid #e3e9e2;
  width:calc(100% - 8px);justify-content:space-between;opacity:1!important;
  color:var(--cap-text,#18241a)!important;font-size:.78rem!important;
}
.service-v116-option-card>a:hover{color:#050b06!important}

/* The process is a sequence of four distinct animated diagrams. */
.service-v1171-process-head .service-v116-process-title{
  max-width:16ch!important;font-size:clamp(2.65rem,4.1vw,4.25rem)!important;
  line-height:1.01!important;
}
.service-v1171-process-head .service-v116-process-intro{
  color:#bcc5bb!important;font-size:clamp(1rem,1.15vw,1.15rem)!important;
}
.service-v1171-process-flow{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr)!important}
.service-v1171-process-arrow{width:32px!important}
.service-v1171-process-card{
  display:flex;flex-direction:column;min-height:475px!important;
  padding:18px!important;opacity:.88;
  background:linear-gradient(158deg,#131b18,#0c100e 75%)!important;
}
.service-v1171-process-card.is-active{opacity:1}
.service-v1171-process-card.is-inview{animation:woohServiceCardEnter .7s var(--ease) both;animation-delay:calc(var(--step-index,0) * 90ms)}
.service-v1171-process-visual{
  height:188px!important;margin:19px 0 19px!important;
  background:
    radial-gradient(circle at 48% 50%,color-mix(in srgb,var(--service-primary) 14%,transparent),transparent 43%),
    linear-gradient(140deg,#101c18,#0b1210)!important;
  border-color:color-mix(in srgb,var(--service-primary) 17%,rgba(255,255,255,.09))!important;
}
.service-v1171-process-visual::before{opacity:.75;background-size:30px 30px}
.service-v1171-process-visual::after{
  content:attr(data-step);position:absolute;right:10px;bottom:-19px;z-index:0;
  color:var(--service-primary);opacity:.075;
  font:800 110px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:-.12em;pointer-events:none;
}
.service-v118-glyph{z-index:2;width:min(96%,280px)!important;height:95%!important;overflow:visible}
.service-v118-glyph .mesh{stroke:rgba(222,255,241,.29)!important;stroke-width:1.45!important;stroke-dasharray:4 7;fill:none}
.service-v118-glyph .live{
  stroke:var(--service-primary)!important;stroke-width:3.2!important;
  stroke-dasharray:440!important;stroke-dashoffset:440!important;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--service-primary) 50%,transparent));
  transition:stroke-dashoffset 1.4s var(--ease)!important;
}
.service-v1171-process-card.is-active .service-v118-glyph .live,
.service-v1171-process-card:hover .service-v118-glyph .live,
.service-v1171-process-card.is-complete .service-v118-glyph .live{stroke-dashoffset:0!important}
.service-v118-glyph .node{fill:#102119!important;stroke:var(--service-primary)!important;stroke-width:2!important}
.service-v118-glyph .node-b{fill:var(--service-primary)!important}
.service-v118-glyph .mark{stroke:var(--service-primary)!important;stroke-width:3.4!important}
.service-v118-glyph .pulse{stroke:var(--service-primary)!important;stroke-width:1.5!important}
.service-v1171-process-card.is-active .glyph-1 .mesh:first-child,
.service-v1171-process-card.is-active .glyph-4 .pulse{transform-origin:center;animation:woohServiceOrbit 12s linear infinite}
.service-v1171-process-card.is-active .glyph-2 rect.mesh:nth-child(2){stroke:var(--service-primary)!important;stroke-dasharray:none;fill:color-mix(in srgb,var(--service-primary) 8%,transparent)}
.service-v1171-process-card.is-active .glyph-3 rect.mesh{stroke:color-mix(in srgb,var(--service-primary) 64%,#fff)!important}
.service-v1171-step-copy{font-size:.94rem!important;color:#b2bcb1!important;-webkit-line-clamp:4!important;max-width:none!important}
.service-v1171-process-result{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
  margin-top:auto!important;padding-top:17px!important;
}
.service-v1171-process-result strong{color:#eef5ed!important;font-size:.93rem!important}
.service-v1171-process-card:focus-visible,
.service-v1171-progress-nodes button:focus-visible,
.service-v1171-process-arrow:focus-visible{outline:2px solid var(--service-primary);outline-offset:3px}
.service-v1171-process-progress{margin-top:38px!important}

@keyframes woohServiceCardEnter{from{opacity:.45;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes woohServiceOrbit{to{rotate:360deg}}

@media(max-width:1180px){
  .service-v1171-process-flow{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
  .service-v1171-process-arrow{display:none!important}
  .service-v1171-process-card{min-height:500px!important}
}
@media(max-width:900px){
  .service-v1171-process-flow{display:flex!important;flex-direction:column!important;gap:16px!important}
  .service-v1171-process-card{min-height:0!important;transform:none!important}
  .service-v1171-process-visual{height:170px!important;margin:16px 0!important}
  .service-v1171-process-result{margin-top:24px!important}
  .service-v1171-process-card.is-inview{animation:none!important}
}
@media(max-width:620px){
  .service-v116-option-grid{gap:12px!important}
  .service-v116-option-card{min-height:345px!important}
  .service-v116-icon-wrap{height:150px!important;margin-bottom:20px!important}
  .service-v116-icon-wrap>svg{width:86px!important;height:86px!important}
  .service-v116-deliver{padding:25px!important}
  .service-v116-deliver > p.service-v116-deliver-intro{font-size:16px!important;width:100%!important}
  .service-v1171-process-head .service-v116-process-title{font-size:clamp(2.4rem,9.5vw,3.5rem)!important}
}
@media(prefers-reduced-motion:reduce){
  .service-v116-icon-wrap::before,.service-v116-icon-wrap::after,
  .service-v116-icon-wrap>svg,.service-v116-option-card,
  .service-v1171-process-card,.service-v118-glyph .live{transition:none!important;animation:none!important}
  .service-v118-glyph .live{stroke-dashoffset:0!important}
}