:root{--b:#07111f;--w:#f7fafb;--t:#99d9d9;--m:#aab8c4;--l:rgba(255,255,255,.13)}*{box-sizing:border-box}html{scroll-behavior:smooth}body.single-capability{margin:0;background:var(--b);color:var(--w);font-family:Lato,Inter,system-ui,sans-serif}a{color:inherit;text-decoration:none}.w{max-width:1240px;margin:auto;padding:0 28px}.ds-prototype-nav{position:fixed;z-index:5;top:18px;left:18px;right:18px;height:72px;border:1px solid var(--l);border-radius:18px;background:#07111fdd;backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-between;padding:0 22px}.ds-prototype-nav b{font-size:22px}.ds-prototype-nav b span,.eye,.num{color:var(--t)}.ds-prototype-nav div{display:flex;gap:22px;font-size:13px}section{padding:120px 0;border-bottom:1px solid var(--l)}.hero{min-height:100vh;display:flex;align-items:end;padding-bottom:75px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:600px;height:600px;border:1px solid #99d9d928;transform:rotate(18deg);right:-100px;top:100px;box-shadow:0 0 0 90px #99d9d90a,0 0 0 180px #99d9d905}.hero .w{z-index:2}.eye{text-transform:uppercase;letter-spacing:.17em;font-size:12px;font-weight:800}h1{font-size:clamp(56px,8vw,116px);line-height:.9;letter-spacing:-.06em;margin:22px 0 32px}h2{font-size:clamp(42px,5vw,74px);line-height:.97;letter-spacing:-.05em}.lede{font-size:clamp(20px,2vw,27px);line-height:1.45;color:#c4cfd7;max-width:850px}.flow{display:grid;grid-template-columns:repeat(5,1fr);margin-top:60px;border-block:1px solid var(--l)}.flow div{padding:28px 18px}.flow div+div{border-left:1px solid var(--l)}.flow b{color:var(--t);font-size:11px}.flow h3{font-size:23px;margin-top:35px}.flow p,.card p,.proof p{color:var(--m);line-height:1.55}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:50px}.card,.proof{border:1px solid var(--l);border-radius:20px;padding:28px}.card{min-height:245px}.card h3{font-size:27px}.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}.tags span{border:1px solid var(--l);border-radius:999px;padding:11px 15px}.proofgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:50px}.proof.big{grid-row:span 2;min-height:650px;background:radial-gradient(circle at 75% 20%,#99d9d91a,transparent 30%)}.proof{min-height:315px}.client{font-size:11px;color:var(--t);letter-spacing:.14em;text-transform:uppercase}.proof h3{font-size:clamp(28px,3vw,44px);margin-top:70px}.metric{font-size:90px;color:var(--t);font-weight:900;letter-spacing:-.06em;margin-top:55px}.architecture{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:50px}.loop{border:1px solid var(--l);border-radius:22px;padding:30px}.row{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--l);color:var(--m)}.row b{color:var(--w)}.light{background:#f4f7f6;color:#07111f}.light .lede,.light .card p{color:#53616b}.light .card{border-color:#ccd5d8}.light .eye{color:#00628b}.cta{background:var(--t);color:var(--b);text-align:center;min-height:70vh;display:flex;align-items:center}.cta .eye{color:var(--b)}.cta .lede{color:#28434c;margin:auto}.btn{display:inline-block;border:1px solid var(--b);border-radius:999px;padding:14px 20px;margin-top:28px;font-weight:900}@media(max-width:800px){.ds-prototype-nav div{display:none}.flow,.grid,.proofgrid,.architecture{grid-template-columns:1fr}.flow div+div{border-left:0;border-top:1px solid var(--l)}.proof.big{grid-row:auto;min-height:430px}}
.storyrail{position:fixed;z-index:4;left:30px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:13px;padding:14px 10px;border:1px solid var(--l);border-radius:18px;background:#07111fbb;backdrop-filter:blur(12px)}
.storyrail a{display:flex;align-items:center;gap:9px;font-size:10px;color:#82949f}.storyrail i{display:block;width:6px;height:6px;border-radius:50%;border:1px solid var(--t)}.storyrail a:first-child i{background:var(--t);box-shadow:0 0 15px var(--t)}.storyrail span{width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:.25s}.storyrail:hover span{width:115px;opacity:1}
.systemviz{height:390px;position:relative;margin-top:60px}.systemviz:before{content:"";position:absolute;left:8%;right:8%;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--t),var(--t),transparent);opacity:.35}.node{position:absolute;top:50%;transform:translate(-50%,-50%);width:126px;height:126px;border:1px solid #99d9d955;border-radius:50%;display:grid;place-items:center;text-align:center;background:#07111f;box-shadow:0 0 40px #99d9d90b}.node b{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.n1{left:10%}.n2{left:30%}.n3{left:50%;width:155px;height:155px}.n4{left:70%}.n5{left:90%}.bigstatement{font-size:clamp(48px,7vw,105px);line-height:.91;letter-spacing:-.06em;max-width:1050px}.bigstatement em{font-style:normal;color:var(--t)}
.handoff{display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:center;margin-top:70px}.handoff .hbox{border:1px solid var(--l);border-radius:28px;padding:35px;min-height:220px}.arrow{text-align:center;color:var(--t);font-size:30px}.under{color:var(--m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:12px}
.mobile-progress{display:none}
@media(max-width:1100px){.storyrail{display:none}}
@media(max-width:800px){.mobile-progress{display:flex;position:sticky;z-index:4;top:96px;margin:0 18px;padding:11px 15px;border:1px solid var(--l);border-radius:14px;background:#07111fee;justify-content:space-between;font-size:11px}.systemviz{height:auto;display:grid;gap:12px;margin-top:35px}.systemviz:before{display:none}.node{position:relative;left:auto!important;top:auto;transform:none;width:100%!important;height:80px!important;border-radius:18px}.handoff{grid-template-columns:1fr;gap:10px}.arrow{transform:rotate(90deg)}}

/* =========================================================
   CAPABILITY SYSTEM — shared production alignment + motion
   ========================================================= */
:root{
  --ds-content-max: 1180px;
  --ds-gutter: clamp(24px, 4vw, 56px);
}

/* The canonical header and primary capability content share one grid */
.w,
.ds-prototype-nav > div,
.ds-prototype-nav .nav-inner{
  width:min(calc(100% - (var(--ds-gutter) * 2)), var(--ds-content-max)) !important;
  max-width:var(--ds-content-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Atmospheric elements may intentionally escape the content grid */
.capability-atmosphere{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.capability-atmosphere:before{
  content:"";
  position:absolute;
  width:720px;
  height:720px;
  left:calc(var(--mx, .5) * 100% - 360px);
  top:calc(var(--my, .25) * 100% - 360px);
  border-radius:50%;
  background:radial-gradient(circle, rgba(153,217,217,.095) 0%, rgba(153,217,217,.038) 28%, transparent 68%);
  transition:left .18s ease-out, top .18s ease-out;
  will-change:left,top;
}
.capability-atmosphere:after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(153,217,217,.24) 0 1px, transparent 1.6px),
    radial-gradient(circle at 73% 66%, rgba(153,217,217,.16) 0 1px, transparent 1.6px),
    radial-gradient(circle at 42% 82%, rgba(153,217,217,.13) 0 1px, transparent 1.6px);
  background-size:190px 190px, 250px 250px, 310px 310px;
  animation:ambientDrift 24s ease-in-out infinite alternate;
}
@keyframes ambientDrift{
  from{transform:translate3d(-7px,-4px,0)}
  to{transform:translate3d(10px,8px,0)}
}

/* Content stays above the shared atmospheric layer */
.ds-capability-page > section, .ds-prototype-nav, .storyrail, .mobile-progress{position:relative;z-index:1}
.storyrail{position:fixed;z-index:20;pointer-events:auto}

/* Shared capability motion vocabulary */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.2,.75,.25,1), transform .8s cubic-bezier(.2,.75,.25,1);
}
.reveal.is-visible{opacity:1;transform:none}

.node{
  transition:transform .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.node:hover{
  transform:translate(-50%,-50%) scale(1.035);
  border-color:rgba(153,217,217,.72);
  box-shadow:0 0 46px rgba(153,217,217,.075);
}
}
50%{transform:scale(1.045);opacity:.7}
}

.handoff .hbox{
  transition:transform .35s ease,border-color .35s ease,background .35s ease;
}
.handoff .hbox:hover{
  transform:translateY(-4px);
  border-color:rgba(153,217,217,.42);
  background:rgba(153,217,217,.025);
}
.handoff .arrow{
  animation:arrowBreathe 2.8s ease-in-out infinite;
}
@keyframes arrowBreathe{0%,100%{opacity:.35}50%{opacity:1}}

.storyrail{
  transition:opacity .3s ease, transform .3s ease;
}

html{scroll-behavior:smooth}
section[id]{scroll-margin-top:120px}
.storyrail a{cursor:pointer;pointer-events:auto}

/* Respect accessibility and the site's restrained motion philosophy */
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}
@media(max-width:800px){
  :root{--ds-gutter:20px}
  .node:hover{transform:none}
  .capability-atmosphere:before{width:460px;height:460px}
}

.signal-system{height:390px;position:relative;margin-top:55px}
.signal-system:before{display:none}
.signal-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.signal-trace path{fill:none;vector-effect:non-scaling-stroke}
.base-paths path{stroke:rgba(153,217,217,.20);stroke-width:1}
.active-paths path{
  stroke:#99d9d9;
  stroke-width:2.2;
  stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(153,217,217,.55));
  pathLength:1;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:signalDraw 4.8s linear infinite;
  animation-delay:calc(var(--i) * .27s);
}
@keyframes signalDraw{
  0%{stroke-dashoffset:1;opacity:0}
  2%{opacity:1}
  14%{stroke-dashoffset:0;opacity:1}
  58%{stroke-dashoffset:0;opacity:1}
  72%,100%{stroke-dashoffset:0;opacity:0}
}
.signal-label{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;text-align:center;pointer-events:none;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase
}
.l1{left:11%}.l2{left:31%}.l3{left:51.5%}.l4{left:72%}.l5{left:91%}
@media(max-width:800px){
  .signal-system{height:auto;display:grid;gap:12px}
  .signal-trace{display:none}
  .signal-label{position:relative;left:auto!important;top:auto;transform:none;height:76px;border:1px solid rgba(153,217,217,.28);border-radius:18px}
}

/* v2.4: true sequential perimeter trace */
.signal-system{height:330px;position:relative;margin-top:55px}
.signal-system:before{display:none!important}
.signal-trace,.signal-label{display:none!important}
.connector-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.connector-svg line{vector-effect:non-scaling-stroke}
.base-connector{stroke:rgba(153,217,217,.24);stroke-width:1}
.trace-connector{
 stroke:#99d9d9;stroke-width:1.25;stroke-linecap:round;
 filter:drop-shadow(0 0 4px rgba(153,217,217,.34));opacity:.78
}


.trace-node{position:absolute;top:50%;width:126px;height:126px;transform:translate(-50%,-50%);z-index:1;display:grid;place-items:center}
.trace-node svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trace-node b{position:relative;z-index:2;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.base-circle{fill:#07111f;stroke:rgba(153,217,217,.30);stroke-width:.8}
.trace-half{
 fill:none;stroke:#99d9d9;stroke-width:1.25;stroke-linecap:round;
 filter:drop-shadow(0 0 4px rgba(153,217,217,.34));opacity:.78
}


.tn1{left:10%}.tn2{left:30%}.tn3{left:50%}.tn4{left:70%}.tn5{left:90%}

@media(max-width:800px){
 .signal-system{height:auto;display:grid;gap:12px}
 .connector-svg{display:none}
 .trace-node{position:relative;left:auto!important;top:auto;transform:none;width:100%!important;height:76px!important;border:1px solid rgba(153,217,217,.28);border-radius:18px}
 .trace-node svg{display:none}
}

78%{filter:drop-shadow(0 0 10px rgba(153,217,217,.18))}}


.laser-point,.connector-laser-point{
 fill:#f3ffff;
 filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #99d9d9) drop-shadow(0 0 10px rgba(153,217,217,.85));
 opacity:0;
 pointer-events:none;
}

/* v3.1: one SVG, one clock, true continuous trace */
.unified-signal{height:270px!important;position:relative!important;margin-top:55px}
.unified-trace-svg{position:absolute;inset:0;width:100%;height:220px;overflow:visible}
.u-base circle,.u-base line{fill:none;stroke:rgba(153,217,217,.17);stroke-width:1.2}
.u-trails path{fill:none;stroke:#99d9d9;stroke-width:1.6;stroke-linecap:round;opacity:.76;filter:drop-shadow(0 0 4px rgba(153,217,217,.3))}
.u-dot{fill:#f5ffff;opacity:0}
.u-label{position:absolute;top:105px;transform:translate(-50%,-50%);width:13.2%;text-align:center;color:#fff;font-size:13px;pointer-events:none}
@media(max-width:800px){.unified-signal{height:auto!important;display:grid!important;grid-template-columns:1fr;gap:10px}.unified-trace-svg{display:none}.u-label{position:relative!important;left:auto!important;top:auto!important;transform:none;width:100%;padding:15px 18px;text-align:left;border:1px solid rgba(153,217,217,.16);border-radius:18px}}

.u-svg-labels text{
  fill:#fff;
  font-family:Lato,Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  text-anchor:middle;
  dominant-baseline:middle;
  pointer-events:none;
}

/* v3.5 alignment correction: graphic uses the same left edge as section copy */
.unified-signal{
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.unified-trace-svg{
  left:0 !important;
  width:100% !important;
}

/* v3.8 final proof layout */
@media (min-width:801px){
  .proofgrid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:1fr !important;
    align-items:stretch;
  }
  .proofgrid .proof,
  .proofgrid .proof.big{
    grid-column:auto !important;
    grid-row:auto !important;
    min-height:440px;
    height:100%;
  }
  .proofgrid .proof h3{
    font-size:clamp(30px,2.45vw,42px);
  }
  .proofgrid .proof.big .metric{
    margin-top:auto;
  }
}

/* v3.9 final Growth in Practice refinement */
@media (min-width:801px){
  .proofgrid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:stretch !important;
  }
  .proofgrid .proof,
  .proofgrid .proof.big{
    min-height:0 !important;
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .proofgrid .proof h3,
  .proofgrid .proof.big h3{
    font-size:clamp(27px,2.05vw,35px) !important;
    line-height:1.16 !important;
  }
  .proofgrid .proof p:first-of-type{
    margin-top:34px;
  }
}

/* v3.10 align proof-card body copy */
@media (min-width:801px){
  .proofgrid .proof h3,
  .proofgrid .proof.big h3{
    min-height:148px !important;
    margin-bottom:0 !important;
  }
  .proofgrid .proof p:first-of-type,
  .proofgrid .proof.big p:first-of-type{
    margin-top:34px !important;
  }
}

/* v3.11 optical alignment: lower middle card body copy to match outer cards */
@media (min-width:801px){
  .proofgrid .proof:nth-child(2) p:first-of-type{
    transform:translateY(14px);
  }
}

/* Production integration v6.0.0-beta.5.48 */
body.single-capability{background:#07111f;color:#f7fafb}
.ds-capability-page{overflow:clip}
.ds-capability-page .hero{padding-top:150px}
.ds-capability-page .w{max-width:1180px}
.ds-capability-page .storyrail{z-index:90}
.storyrail a.is-active i{background:#99d9d9;box-shadow:0 0 15px #99d9d9}
.storyrail a:first-child i{background:transparent;box-shadow:none}
.storyrail a:first-child.is-active i{background:#99d9d9;box-shadow:0 0 15px #99d9d9}

/* =========================================================
   CAPABILITY PRODUCTION POLISH — beta.5.50
   ========================================================= */

/* Shared capability hero typography.
   Protects prototype editorial scale from broader production heading rules. */
.ds-capability-page .hero h1{
  font-size:clamp(56px,6.15vw,94px)!important;
  line-height:.94!important;
  letter-spacing:-.055em!important;
  max-width:1120px!important;
  text-wrap:balance;
}
.ds-capability-page .hero .lede,
.ds-capability-page .hero > .w > p:not(.eyebrow){
  max-width:900px;
}
@media(max-width:900px){
  .ds-capability-page .hero h1{
    font-size:clamp(48px,9vw,76px)!important;
    line-height:.96!important;
    letter-spacing:-.045em!important;
    max-width:13ch!important;
    text-wrap:pretty;
  }
}
@media(max-width:620px){
  .ds-capability-page .hero h1{
    font-size:clamp(43px,13vw,62px)!important;
    line-height:.98!important;
    max-width:none!important;
  }
}

/* Growth in Practice: align the descriptive copy across all three cards. */
.ds-capability-page #proof .proof-card,
.ds-capability-page #proof .case-card,
.ds-capability-page #proof article{
  display:flex;
  flex-direction:column;
}
.ds-capability-page #proof .proof-card h3,
.ds-capability-page #proof .case-card h3,
.ds-capability-page #proof article h3{
  min-height:4.15em;
}
.ds-capability-page #proof .proof-card > p:not(.eyebrow):not(:last-child),
.ds-capability-page #proof .case-card > p:not(.eyebrow):not(:last-child),
.ds-capability-page #proof article > p:not(.eyebrow):not(:last-child){
  margin-top:0;
}

/* Marketing Technology's Experience → Measure sequence:
   keep the approved motion, but move through it a little faster. */
.ds-capability-page .journey-stage *,
.ds-capability-page .system-flow *,
.ds-capability-page .experience-flow *,
.ds-capability-page .flow-stage *{
  animation-duration:calc(var(--original-duration, 1s) * .82);
}

.ds-capability-page #proof .proof-grid{
  align-items:stretch;
}
.ds-capability-page #proof .proof-grid > *{
  height:100%;
}

/* Capability conversion modal — beta.5.52 */
html.ds-modal-open,html.ds-modal-open body{overflow:hidden}
.ds-capability-contact-modal[hidden]{display:none!important}
.ds-capability-contact-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:28px;opacity:0;transition:opacity .18s ease}
.ds-capability-contact-modal.is-open{opacity:1}
.ds-capability-contact-modal__backdrop{position:absolute;inset:0;background:rgba(1,8,15,.82);backdrop-filter:blur(12px)}
.ds-capability-contact-modal__dialog{position:relative;z-index:1;width:min(760px,100%);max-height:calc(100vh - 56px);overflow:auto;border:1px solid rgba(153,217,217,.28);border-radius:24px;background:#07111f;box-shadow:0 28px 90px rgba(0,0,0,.48);padding:clamp(28px,4vw,52px);transform:translateY(14px) scale(.985);transition:transform .2s ease}
.ds-capability-contact-modal.is-open .ds-capability-contact-modal__dialog{transform:none}
.ds-capability-contact-modal__close{position:absolute;top:18px;right:20px;width:38px;height:38px;border:1px solid rgba(153,217,217,.22);border-radius:50%;background:transparent;color:#99d9d9;font-size:27px;line-height:1;cursor:pointer}
.ds-capability-contact-modal__close:hover{background:rgba(153,217,217,.08);border-color:rgba(153,217,217,.5)}
.ds-capability-contact-modal__title{max-width:610px;margin:0 54px 30px 0;color:#f7fafb;font-size:clamp(32px,4vw,50px);font-weight:800;line-height:1.02;letter-spacing:-.035em}
.ds-capability-contact-modal .ds-contact-form-card{margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.ds-capability-contact-modal .ds-contact-form-heading{display:none!important}
@media(max-width:620px){.ds-capability-contact-modal{padding:12px}.ds-capability-contact-modal__dialog{max-height:calc(100vh - 24px);border-radius:18px;padding:26px 20px}.ds-capability-contact-modal__title{margin-right:42px}}

/* Capability modal isolation + placeholder-only fields — beta.5.53 */
.ds-capability-contact-modal,
.ds-capability-contact-modal::before,
.ds-capability-contact-modal::after,
.ds-capability-contact-modal__backdrop,
.ds-capability-contact-modal__dialog,
.ds-capability-contact-modal__dialog::before,
.ds-capability-contact-modal__dialog::after,
.ds-capability-contact-modal .ds-contact-form-card,
.ds-capability-contact-modal .ds-contact-form-card::before,
.ds-capability-contact-modal .ds-contact-form-card::after,
.ds-capability-contact-modal .ds-native-contact-form,
.ds-capability-contact-modal .ds-contact-fields{
  -webkit-mask:none!important;
  mask:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  clip-path:none!important;
}
.ds-capability-contact-modal{overflow:visible!important}
.ds-capability-contact-modal__dialog{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  isolation:isolate;
}
.ds-capability-contact-modal__dialog::before,
.ds-capability-contact-modal__dialog::after,
.ds-capability-contact-modal .ds-contact-form-card::before,
.ds-capability-contact-modal .ds-contact-form-card::after{content:none!important}

/* Keep labels in the DOM for accessibility, but show only field placeholders in this modal. */
.ds-capability-contact-modal .ds-contact-field>label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.ds-capability-contact-modal .ds-contact-field--placeholder{position:relative}
.ds-capability-contact-modal .ds-contact-fields{padding-top:0!important}
.ds-capability-contact-modal .ds-native-contact-form{overflow:visible!important}

/* CAPABILITY CONTACT MODAL — hard control isolation, beta.5.54 */
.ds-capability-contact-modal .ds-contact-field,.ds-capability-contact-modal .ds-contact-form-actions{position:relative!important;z-index:2!important;overflow:visible!important;-webkit-mask:none!important;mask:none!important;clip-path:none!important;filter:none!important}
.ds-capability-contact-modal .ds-contact-field::before,.ds-capability-contact-modal .ds-contact-field::after,.ds-capability-contact-modal .ds-contact-form-actions::before,.ds-capability-contact-modal .ds-contact-form-actions::after{content:none!important;display:none!important}
.ds-capability-contact-modal .ds-contact-field input,.ds-capability-contact-modal .ds-contact-field textarea,.ds-capability-contact-modal .ds-contact-field select{position:relative!important;z-index:3!important;display:block!important;width:100%!important;-webkit-appearance:none!important;appearance:none!important;-webkit-mask:none!important;mask:none!important;-webkit-mask-image:none!important;mask-image:none!important;clip-path:none!important;overflow:visible!important;filter:none!important;transform:none!important;border:1px solid rgba(153,217,217,.26)!important;border-radius:14px!important;background:rgba(255,255,255,.055)!important;box-shadow:none}
.ds-capability-contact-modal .ds-contact-submit{position:relative!important;z-index:3!important;-webkit-mask:none!important;mask:none!important;-webkit-mask-image:none!important;mask-image:none!important;clip-path:none!important;overflow:visible!important;filter:none!important;border-radius:999px!important}


/* Confirmed capability modal form-card clipping fix — beta.5.55
   The shared contact card normally clips its contents to its rounded shell.
   In the modal that shell is visually removed, so its clipping must be removed too. */
.ds-capability-contact-modal .ds-contact-form-card {
  overflow: visible !important;
  border-radius: 0 !important;
}


/* Compact capability modal geometry — beta.5.57 */
.ds-capability-contact-modal {
  padding-top: max(126px, 8vh) !important;
  padding-bottom: 28px !important;
  align-items: center;
}
.ds-capability-contact-modal__dialog {
  width: min(1080px, calc(100vw - 56px)) !important;
  max-height: calc(100vh - 154px) !important;
  padding: clamp(34px, 3.2vw, 48px) clamp(38px, 4.5vw, 68px) clamp(34px, 3.2vw, 46px) !important;
}
.ds-capability-contact-modal__title {
  max-width: none !important;
  margin: 0 64px 28px 0 !important;
  font-size: clamp(30px, 2.65vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap;
}
.ds-capability-contact-modal .ds-native-contact-form,
.ds-capability-contact-modal .ds-contact-fields { gap:14px !important; }
.ds-capability-contact-modal .ds-contact-field input,
.ds-capability-contact-modal .ds-contact-field select {
  min-height:48px !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}
.ds-capability-contact-modal .ds-contact-field textarea {
  min-height:118px !important;
  height:118px !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
}
.ds-capability-contact-modal .ds-contact-form-actions { margin-top:2px !important; }
.ds-capability-contact-modal .ds-contact-submit {
  min-height:48px !important;
  padding-top:11px !important;
  padding-bottom:11px !important;
}
@media(max-width:980px){
  .ds-capability-contact-modal__title {
    white-space:normal;
    font-size:clamp(30px,4.4vw,40px)!important;
  }
}
@media(max-width:620px){
  .ds-capability-contact-modal {
    padding-top:92px!important;
    padding-bottom:12px!important;
  }
  .ds-capability-contact-modal__dialog {
    width:100%!important;
    max-height:calc(100vh - 104px)!important;
    padding:26px 20px!important;
  }
  .ds-capability-contact-modal__title {
    margin-bottom:22px!important;
    font-size:clamp(28px,8vw,36px)!important;
    white-space:normal;
  }
}


/* Remove inherited contact-card decorative divider in modal — beta.5.58 */
.ds-capability-contact-modal .ds-contact-form-card::before,
.ds-capability-contact-modal .ds-contact-form-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
}
/* beta.5.73 — shared mobile capability contextual navigation */
@media(max-width:800px){
 .ds-capability-page .mobile-progress{display:block!important;position:sticky!important;z-index:80!important;top:96px;margin:0 18px;padding:0;border:1px solid var(--l);border-radius:14px;background:#07111fee;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden}
 .ds-capability-page .mobile-progress-button{width:100%;min-height:46px;padding:11px 15px;border:0;background:transparent;color:inherit;font:inherit;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer}
 .ds-capability-page .mobile-current{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
 .ds-capability-page .mobile-count{color:var(--t);white-space:nowrap;font-weight:800}.ds-capability-page .mobile-chevron{transition:transform .2s ease}.ds-capability-page .mobile-progress-button[aria-expanded="true"] .mobile-chevron{transform:rotate(180deg)}
 .ds-capability-page .mobile-section-menu{display:none;padding:0 15px 10px;max-height:min(52vh,420px);overflow:auto}.ds-capability-page .mobile-section-menu.open{display:grid}
 .ds-capability-page .mobile-section-menu a{padding:11px 0;color:#b9c8d3;border-top:1px solid rgba(153,217,217,.12);font-size:12px;line-height:1.3}.ds-capability-page .mobile-section-menu a.is-active{color:#99d9d9}
}


/* beta.5.76 — capability rail as scroll progress */
@media(min-width:1101px){
  .ds-capability-page .storyrail{--rail-line-x:13px;--rail-line-top:17px;--rail-line-height:0px;isolation:isolate}
  .ds-capability-page .storyrail::before,
  .ds-capability-page .storyrail::after{
    content:"";position:absolute;left:var(--rail-line-x);top:var(--rail-line-top);width:1px;border-radius:1px;pointer-events:none;z-index:-1;transform:translateX(-50%)
  }
  .ds-capability-page .storyrail::before{height:calc(100% - (var(--rail-line-top) * 2));background:rgba(153,217,217,.16)}
  .ds-capability-page .storyrail::after{height:var(--rail-line-height);background:#99d9d9;box-shadow:0 0 9px rgba(153,217,217,.35);transition:height .08s linear}
  .ds-capability-page .storyrail a i{position:relative;z-index:2;background:#07111f;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
  .ds-capability-page .storyrail a.is-passed i{background:rgba(153,217,217,.55);border-color:#99d9d9}
  .ds-capability-page .storyrail a.is-active i{box-shadow:0 0 15px #99d9d9;transform:scale(1.18)}
  .ds-capability-page .storyrail a.is-active.is-passed i{background:#99d9d9}
  .ds-capability-page .storyrail a.is-active:not(.is-passed) i{background:#07111f;border-color:#99d9d9}
  .ds-capability-page .storyrail a.is-passed span{color:#a9bcc6}
  .ds-capability-page .storyrail a.is-active span{color:#99d9d9}
}


/* beta.5.80 — deterministic capability rail geometry
   Horizontal geometry belongs entirely to CSS. JS controls vertical progress only. */
@media(min-width:1101px){
  .ds-capability-page .storyrail{
    --rail-axis-x:13px;
    isolation:isolate;
  }

  /* Retire the pseudo-element track architecture */
  .ds-capability-page .storyrail::before,
  .ds-capability-page .storyrail::after{
    content:none !important;
    display:none !important;
  }

  /* Real track elements share one immutable axis with the 6px dot column */
  .ds-capability-page .storyrail-track,
  .ds-capability-page .storyrail-fill{
    position:absolute;
    left:var(--rail-axis-x);
    width:1px;
    margin:0;
    padding:0;
    transform:none;
    pointer-events:none;
    z-index:0;
  }

  .ds-capability-page .storyrail-track{
    top:var(--rail-line-top);
    height:calc(100% - (var(--rail-line-top) * 2));
    background:rgba(153,217,217,.16);
  }

  .ds-capability-page .storyrail-fill{
    top:var(--rail-line-top);
    height:var(--rail-line-height);
    background:#99d9d9;
    box-shadow:0 0 9px rgba(153,217,217,.35);
    transition:height .08s linear;
  }

  /* Dot column uses the same rail axis. Labels may expand without moving it. */
  .ds-capability-page .storyrail > a{
    position:relative;
    z-index:2;
  }

  .ds-capability-page .storyrail > a > i{
    position:relative;
    z-index:3;
    flex:0 0 6px;
    width:6px;
    height:6px;
    box-sizing:border-box;
    background:#07111f;
  }

  .ds-capability-page .storyrail > a.is-passed > i{
    background:rgba(153,217,217,.55);
    border-color:#99d9d9;
  }

  .ds-capability-page .storyrail > a.is-active > i{
    box-shadow:0 0 15px #99d9d9;
  }
}


/* beta.5.81 — measured rail axis + true behind-dot layering */
@media(min-width:1101px){
  .ds-capability-page .storyrail{
    --rail-axis-x:13px; /* fallback only; JS replaces with rendered dot center */
    isolation:isolate;
  }

  .ds-capability-page .storyrail-track,
  .ds-capability-page .storyrail-fill{
    left:var(--rail-axis-x) !important;
    right:auto !important;
    margin-left:0 !important;
    transform:none !important;
    z-index:0 !important;
  }

  /* Keep each row above the track */
  .ds-capability-page .storyrail > a{
    position:relative !important;
    z-index:2 !important;
  }

  /* The dot itself masks the track so the line visually stops at its edge */
  .ds-capability-page .storyrail > a > i{
    position:relative !important;
    z-index:3 !important;
    background:#07111f !important;
  }

  .ds-capability-page .storyrail > a.is-passed > i{
    background:#99d9d9 !important;
    border-color:#99d9d9 !important;
  }

  .ds-capability-page .storyrail > a.is-active > i{
    background:#99d9d9 !important;
    border-color:#99d9d9 !important;
    box-shadow:0 0 15px rgba(153,217,217,.75) !important;
  }
}


/* beta.5.83 — final capability rail geometry
   One explicit axis owns BOTH line and dots in collapsed and expanded states. */
@media(min-width:1101px){
  .ds-capability-page .storyrail{
    --ds-rail-collapsed-width:46px;
    --ds-rail-axis-x:23px;
    box-sizing:border-box !important;
    width:var(--ds-rail-collapsed-width) !important;
    padding:14px 10px !important;
    overflow:visible !important;
    isolation:isolate !important;
    transition:width .25s ease !important;
  }

  /* Expanded panel grows only to the right. The marker axis never moves. */
  .ds-capability-page .storyrail:hover{
    width:240px !important;
  }

  /* One axis for both static and progress lines */
  .ds-capability-page .storyrail::before,
  .ds-capability-page .storyrail::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:var(--ds-rail-axis-x) !important;
    right:auto !important;
    width:1px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    pointer-events:none !important;
    z-index:0 !important;
    border-radius:1px !important;
  }

  .ds-capability-page .storyrail::before{
    top:var(--rail-line-top) !important;
    height:calc(100% - (var(--rail-line-top) * 2)) !important;
    background:rgba(153,217,217,.16) !important;
  }

  .ds-capability-page .storyrail::after{
    top:var(--rail-line-top) !important;
    height:var(--rail-line-height) !important;
    background:#99d9d9 !important;
    box-shadow:0 0 9px rgba(153,217,217,.35) !important;
    transition:height .08s linear !important;
  }

  /* Rows span the panel but do not determine marker X */
  .ds-capability-page .storyrail > a{
    position:relative !important;
    display:block !important;
    min-height:6px !important;
    padding-left:42px !important;
    z-index:1 !important;
    box-sizing:border-box !important;
  }

  /* Dot center is EXACTLY the same --ds-rail-axis-x as the line */
  .ds-capability-page .storyrail > a > i{
    display:block !important;
    position:absolute !important;
    left:calc(var(--ds-rail-axis-x) - 10px - 3px) !important;
    top:50% !important;
    width:6px !important;
    height:6px !important;
    min-width:6px !important;
    margin:0 !important;
    padding:0 !important;
    transform:translateY(-50%) !important;
    box-sizing:border-box !important;
    border:1px solid #99d9d9 !important;
    border-radius:50% !important;
    background:#07111f !important;
    z-index:3 !important;
  }

  /* Labels remain hidden collapsed and reveal to the right on hover */
  .ds-capability-page .storyrail > a > span{
    display:block !important;
    width:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    transition:width .25s ease,opacity .2s ease !important;
  }

  .ds-capability-page .storyrail:hover > a > span{
    width:170px !important;
    opacity:1 !important;
  }

  /* Line is physically behind opaque nodes */
  .ds-capability-page .storyrail > a.is-passed > i{
    background:#99d9d9 !important;
    border-color:#99d9d9 !important;
  }

  .ds-capability-page .storyrail > a.is-active > i{
    background:#99d9d9 !important;
    border-color:#99d9d9 !important;
    box-shadow:0 0 15px rgba(153,217,217,.75) !important;
  }
}


/* beta.5.85 — use the exact rendered dot coordinate approved in-browser.
   Dots stay where the native rail puts them. Only the line follows them. */
@media(min-width:1101px){
  .ds-capability-page .storyrail::before,
  .ds-capability-page .storyrail::after{
    left:var(--rail-line-x) !important;
    transform:none !important;
  }

  /* Restore native dot row geometry from before the fixed-axis experiment. */
  .ds-capability-page .storyrail > a{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    min-height:0 !important;
    padding-left:0 !important;
  }

  .ds-capability-page .storyrail > a > i{
    display:block !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    flex:0 0 6px !important;
    width:6px !important;
    height:6px !important;
    min-width:6px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .ds-capability-page .storyrail > a > span{
    display:block !important;
  }
}


/* beta.5.86 — live-browser approved desktop capability rail */
@media(min-width:1101px){
 .ds-capability-page .storyrail{
  --ds-rail-width:34px;--ds-rail-axis:15.5px;--ds-rail-expanded:230px;
  width:var(--ds-rail-width)!important;padding:14px 0!important;overflow:hidden!important;
  isolation:isolate!important;box-sizing:border-box!important;
  transition:width .25s ease,background .25s ease,border-color .25s ease!important
 }
 .ds-capability-page .storyrail:hover{width:var(--ds-rail-expanded)!important}
 .ds-capability-page .storyrail>.storyrail-track,
 .ds-capability-page .storyrail>.storyrail-fill{display:none!important}
 .ds-capability-page .storyrail::before,.ds-capability-page .storyrail::after{
  content:""!important;display:block!important;position:absolute!important;
  left:calc(var(--ds-rail-axis) - .5px)!important;right:auto!important;width:1px!important;
  margin:0!important;padding:0!important;transform:none!important;pointer-events:none!important;
  z-index:0!important;border-radius:1px!important
 }
 .ds-capability-page .storyrail::before{
  top:var(--rail-line-top)!important;height:calc(100% - (var(--rail-line-top) * 2))!important;
  background:rgba(153,217,217,.20)!important
 }
 .ds-capability-page .storyrail::after{
  top:var(--rail-line-top)!important;height:var(--rail-line-height)!important;
  background:#99d9d9!important;box-shadow:0 0 8px rgba(153,217,217,.28)!important;
  transition:height .08s linear!important
 }
 .ds-capability-page .storyrail>a{
  position:relative!important;display:block!important;min-height:8px!important;
  margin:0!important;padding:0!important;z-index:1!important;box-sizing:border-box!important
 }
 .ds-capability-page .storyrail>a>i{
  display:block!important;position:absolute!important;left:calc(var(--ds-rail-axis) - 3px)!important;
  top:50%!important;width:6px!important;height:6px!important;min-width:6px!important;
  margin:0!important;padding:0!important;transform:translateY(-50%)!important;
  box-sizing:border-box!important;border:1px solid #99d9d9!important;border-radius:50%!important;
  background:#07111f!important;z-index:3!important
 }
 .ds-capability-page .storyrail>a>span{
  display:block!important;width:auto!important;max-width:none!important;margin-left:34px!important;
  padding-right:14px!important;opacity:0!important;overflow:visible!important;white-space:nowrap!important;
  transform:translateX(-3px)!important;transition:opacity .18s ease,transform .22s ease!important;
  pointer-events:none!important
 }
 .ds-capability-page .storyrail:hover>a>span{
  width:auto!important;opacity:1!important;transform:translateX(0)!important
 }
 .ds-capability-page .storyrail>a.is-passed>i{background:#99d9d9!important;border-color:#99d9d9!important}
 .ds-capability-page .storyrail>a.is-active>i{
  background:#99d9d9!important;border-color:#99d9d9!important;
  box-shadow:0 0 0 2px rgba(153,217,217,.12),0 0 13px rgba(153,217,217,.65)!important
 }
}