:root{--wd-line:#d7e3f0;--wd-pale:#f5f9fe}.web-design-page{overflow-x:hidden}.web-design-page main{overflow:hidden}.wd-section{position:relative;padding:104px 0}.wd-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:var(--royal);font:700 .7rem Manrope;letter-spacing:.18em}.wd-eyebrow>i{display:block;width:25px;height:2px;background:linear-gradient(90deg,var(--royal),var(--cyan));transform-origin:left}.wd-copy{max-width:620px}.wd-copy>p:not(.wd-eyebrow),.wd-head+*,.wd-lead{color:var(--muted)}.wd-copy h2,.wd-head h2{color:var(--navy)}.wd-head{max-width:830px;margin-bottom:48px}.wd-split,.wd-split-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:78px;align-items:center}.wd-split-top{align-items:start}.dark .wd-eyebrow{color:#58ccfa}.dark .wd-eyebrow>i{background:linear-gradient(90deg,#58ccfa,#fff)}.dark .wd-copy h2{color:#fff}.dark .wd-copy>p:not(.wd-eyebrow){color:#b8c6df}
.mega-menu{padding-bottom:25px}.mega-grid a.active{color:var(--royal);font-weight:700}
.wd-hero{min-height:730px;display:flex;align-items:center;padding:70px 0;background:radial-gradient(circle at 79% 34%,rgba(19,184,244,.11),transparent 26%),linear-gradient(135deg,#fff 35%,#f5faff)}.wd-hero:after{content:"";position:absolute;width:420px;height:420px;right:-280px;top:-220px;border:1px solid rgba(18,77,216,.08);transform:rotate(45deg)}.wd-hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(18,77,216,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(18,77,216,.025) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(90deg,transparent 25%,#000,transparent)}.wd-hero-layout{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:65px;align-items:center}.wd-hero-copy h1{max-width:780px;font-size:clamp(3.4rem,5.4vw,5.25rem);color:var(--navy)}.wd-hero-copy h1>span{display:block;overflow:hidden}.wd-hero-copy h1 i{display:block;font:inherit;font-style:normal}.wd-hero-copy h1>span+span{margin-top:8px;color:var(--royal);font-size:.93em}.wd-lead{max-width:680px;font-size:1.05rem}.design-canvas{position:relative;height:500px;border:1px solid #bad1e8;background:rgba(255,255,255,.88);box-shadow:0 24px 60px rgba(6,16,79,.09);clip-path:polygon(0 0,94% 0,100% 8%,100% 100%,7% 100%,0 92%);overflow:hidden}.canvas-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(18,77,216,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(18,77,216,.045) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(135deg,#000,transparent)}.browser-bar{position:relative;height:46px;border-bottom:1px solid var(--wd-line);display:flex;align-items:center;gap:7px;padding:0 18px}.browser-bar i{width:7px;height:7px;border:1px solid var(--blue);transform:rotate(45deg)}.browser-bar span{margin-left:15px;width:55%;height:7px;background:#e4edf7}.canvas-nav{position:relative;display:flex;align-items:center;height:58px;padding:0 27px;border-bottom:1px solid #e2eaf3}.canvas-nav b{font-size:.68rem;color:var(--navy);letter-spacing:.12em;margin-right:auto}.canvas-nav span{width:42px;height:5px;background:#cbd9e8;margin-left:15px}.canvas-main{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:25px;padding:52px 34px}.canvas-copy small{color:var(--blue);font:700 .52rem Manrope;letter-spacing:.13em}.canvas-copy b{display:block;max-width:230px;color:var(--navy);font-size:1.7rem;line-height:1.15;margin:14px 0 20px}.canvas-copy>span{display:block;width:90%;height:7px;background:#dbe5ef;margin:9px 0}.canvas-copy>span:nth-of-type(2){width:65%}.canvas-copy button{border:0;background:var(--royal);color:#fff;padding:10px 14px;margin-top:17px;font:700 .55rem Manrope}.canvas-panel{min-height:220px;border:1px solid #97bde4;background:linear-gradient(145deg,#edf6ff,#fff);padding:18px;display:grid;gap:10px}.canvas-panel i{display:block;border:1px solid #c7d9ea;background:#fff}.canvas-panel i:first-child{background:linear-gradient(135deg,#0b2c79,#1587ee);border:0}.canvas-components{position:absolute;left:34px;right:34px;bottom:25px;display:flex;gap:8px}.canvas-components span{padding:6px 9px;border:1px solid var(--wd-line);background:#fff;color:#57708d;font:700 .5rem Manrope;letter-spacing:.1em}.canvas-cursor{position:absolute;right:26%;top:46%;color:var(--blue);font-size:1.4rem;filter:drop-shadow(0 5px 6px rgba(8,126,245,.25))}
.intent-section,.responsive-section,.principles-section,.related-section{background:var(--wd-pale)}.intent-system{position:relative;min-height:410px;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:center}.intent-inputs{display:grid;gap:12px;z-index:2}.intent-inputs button{min-height:58px;text-align:left;padding:0 18px;border:1px solid var(--wd-line);background:#fff;color:#294361;font:700 .68rem Manrope;letter-spacing:.1em;cursor:pointer}.intent-inputs button:hover,.intent-inputs button:focus-visible{border-color:var(--blue);color:var(--royal)}.intent-lines{position:absolute;left:42%;right:34%;top:78px;bottom:78px;display:grid}.intent-lines i{border-right:1px solid #9fc2e4;border-bottom:1px solid #9fc2e4;transform:skewY(-18deg)}.intent-core{z-index:2;align-self:center;display:grid;place-content:center;width:180px;height:140px;text-align:center;color:#fff;background:linear-gradient(145deg,var(--navy),var(--royal));clip-path:polygon(13% 0,100% 0,100% 80%,85% 100%,0 100%,0 20%)}.intent-core small,.experience-core small{color:#69d3ff;font:700 .55rem Manrope;letter-spacing:.13em}.intent-core b,.experience-core b{font-size:.88rem;margin-top:6px}
.scope-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.scope-grid article,.principles-grid article{position:relative;min-height:220px;padding:28px;background:#fff;border:1px solid var(--wd-line);clip-path:polygon(0 0,94% 0,100% 10%,100% 100%,0 100%);transition:.25s}.scope-grid article:after{content:"";position:absolute;right:14px;top:14px;width:8px;height:8px;border:2px solid var(--blue);transform:rotate(45deg)}.scope-grid article:hover{translate:0 -2px;border-color:#7dadde}.scope-grid small{color:var(--blue);font:700 .58rem Manrope;letter-spacing:.1em}.scope-grid h3{font-size:1rem;color:var(--navy);margin:37px 0 12px}.scope-grid p,.principles-grid p{font-size:.82rem;color:var(--muted);margin:0}
.journey-section{background:var(--navy);color:#fff}.journey-section .wd-head h2{color:#fff}.journey-path{position:relative;list-style:none;padding:45px 0 0;margin:0;display:grid;grid-template-columns:repeat(5,1fr)}.journey-path:before{content:"";position:absolute;left:8%;right:8%;top:67px;height:2px;background:linear-gradient(90deg,#247ddd,#58ccfa)}.journey-path li{position:relative;text-align:center;padding:0 14px}.journey-path i{position:relative;z-index:2;display:grid;place-items:center;width:42px;height:42px;margin:auto;background:#081963;border:1px solid #4e99df;transform:rotate(45deg);font:700 .6rem Manrope;color:var(--cyan);font-style:normal}.journey-path i::first-line{transform:rotate(-45deg)}.journey-path b{display:block;margin:28px 0 7px;font-size:.76rem;letter-spacing:.08em}.journey-path span{display:block;color:#aebddb;font-size:.75rem}.journey-path li:hover b,.journey-path li:focus b{color:var(--cyan)}
.capability-accordions{display:grid;gap:12px}.capability-accordions details{border:1px solid var(--wd-line);background:#fff;padding:0 22px}.capability-accordions summary{min-height:70px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;cursor:pointer;list-style:none}.capability-accordions summary small{color:var(--blue)}.capability-accordions summary b{color:var(--navy);font-size:.82rem;letter-spacing:.08em}.capability-accordions summary span{font-size:1.2rem;color:var(--blue)}.capability-accordions details p{margin:0;padding:0 0 20px 42px;color:var(--muted);font-size:.86rem}.capability-accordions details[open]{border-color:#8fb6df}
.view-tabs,.evolution-tabs{display:flex;gap:8px;margin-top:30px}.view-tabs button,.evolution-tabs button{border:1px solid #b9cee3;background:#fff;color:#51677f;padding:10px 14px;font:700 .62rem Manrope;letter-spacing:.08em;cursor:pointer}.view-tabs button.is-active,.evolution-tabs button.is-active{background:var(--royal);border-color:var(--royal);color:#fff}.responsive-preview{position:relative;width:100%;height:410px;padding:24px;border:1px solid #a9c5e1;background:#fff;transition:width .45s,height .45s,margin .45s}.preview-bar{height:46px;border-bottom:1px solid var(--wd-line);display:flex;align-items:center;gap:15px}.preview-bar i{width:26px;height:12px;background:var(--royal)}.preview-bar span{width:48px;height:6px;background:#cfdeeb}.preview-bar b{width:50px;height:20px;background:#0b2d7c;margin-left:auto}.preview-body{display:grid;grid-template-columns:1fr .8fr;gap:25px;padding:42px 20px 20px}.preview-copy b,.preview-copy i{display:block;background:#d4e0ec}.preview-copy b{width:80%;height:28px;background:#153a83}.preview-copy i{height:7px;margin-top:12px}.preview-copy i:nth-child(3){width:66%}.preview-copy button{width:75px;height:27px;border:0;background:var(--blue);margin-top:20px}.preview-media{min-height:150px;background:linear-gradient(145deg,#0c2d78,#1688eb)}.preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 20px}.preview-cards i{height:60px;border:1px solid var(--wd-line);background:#f5f9fd}.responsive-preview[data-responsive-view=tablet]{width:78%;height:440px;margin-inline:auto}.responsive-preview[data-responsive-view=tablet] .preview-body{grid-template-columns:1fr}.responsive-preview[data-responsive-view=tablet] .preview-media{min-height:105px}.responsive-preview[data-responsive-view=mobile]{width:48%;height:500px;margin-inline:auto}.responsive-preview[data-responsive-view=mobile] .preview-bar span{display:none}.responsive-preview[data-responsive-view=mobile] .preview-body{grid-template-columns:1fr;padding:25px 10px 12px}.responsive-preview[data-responsive-view=mobile] .preview-media{min-height:120px;order:-1}.responsive-preview[data-responsive-view=mobile] .preview-cards{grid-template-columns:1fr;padding:0 10px}.responsive-preview[data-responsive-view=mobile] .preview-cards i{height:38px}
.evolution-layout{display:grid;grid-template-columns:250px 1fr;gap:25px}.evolution-tabs{display:grid;margin:0}.evolution-tabs button{text-align:left;min-height:62px}.evolution-tabs b{display:block;margin-top:4px}.evolution-frame{height:430px;border:1px solid #afc8df;background:#fff;padding:30px;display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:44px 1fr;gap:25px;transition:.45s}.evo-nav{grid-column:1/-1;border-bottom:1px solid #c5d5e5}.evo-copy{padding-top:40px}.evo-copy>*{display:block;background:#d4dfeb}.evo-copy b{width:85%;height:34px}.evo-copy span{height:8px;margin-top:14px}.evo-copy span:nth-child(3){width:66%}.evo-copy button{width:90px;height:30px;border:0;margin-top:25px}.evo-visual{display:grid;gap:11px}.evo-visual i{border:1px solid #c1d4e6}.evolution-frame[data-evolution-state=wireframe]{background:#f9fbfd}.evolution-frame[data-evolution-state=system] .evo-copy b{background:#173a82}.evolution-frame[data-evolution-state=system] .evo-copy button{background:var(--blue)}.evolution-frame[data-evolution-state=final]{background:linear-gradient(145deg,#fff,#eef6ff)}.evolution-frame[data-evolution-state=final] .evo-visual i:first-child{background:linear-gradient(135deg,var(--navy),var(--blue))}.evolution-frame[data-evolution-state=final] .evo-copy b{background:var(--navy)}.evolution-frame[data-evolution-state=final] .evo-copy button{background:var(--royal)}
.experience-system{position:relative;min-height:440px;display:grid;grid-template-columns:1fr 185px;gap:55px;align-items:center}.experience-factors{display:grid;gap:11px}.experience-factors span{position:relative;z-index:2;min-height:48px;padding:15px;border:1px solid rgba(115,174,231,.35);color:#bad1ec;background:#08185c;font:700 .62rem Manrope;letter-spacing:.08em}.experience-factors span:after{content:"";position:absolute;left:100%;top:50%;width:56px;height:1px;background:#3a79be}.experience-core{position:relative;z-index:2;display:grid;place-content:center;text-align:center;width:185px;height:145px;border:1px solid #318ae2;background:linear-gradient(145deg,#08226c,#124dd8);clip-path:polygon(13% 0,100% 0,100% 80%,85% 100%,0 100%,0 20%)}
.design-process{position:relative;display:grid;grid-template-columns:repeat(6,1fr);list-style:none;padding:35px 0 0;margin:0;gap:12px}.design-process:before{content:"";position:absolute;left:4%;right:4%;top:54px;height:1px;background:#9ebfe0}.design-process li{position:relative;z-index:2;padding:38px 18px 22px;background:#fff;border:1px solid var(--wd-line);min-height:190px}.design-process li:before{content:"";position:absolute;left:18px;top:13px;width:10px;height:10px;border:2px solid var(--blue);background:#fff;transform:rotate(45deg)}.design-process small{color:var(--blue);font:700 .58rem Manrope}.design-process b{display:block;color:var(--navy);font-size:.75rem;margin:24px 0 12px}.design-process span{display:block;color:var(--muted);font-size:.74rem}.design-process li:hover{border-color:var(--blue)}
.principles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.principles-grid article{min-height:190px}.principles-grid article>i{display:grid;place-items:center;width:34px;height:34px;color:var(--blue);background:#eaf3fd;font-style:normal}.principles-grid h3{font-size:1rem;color:var(--navy);margin:30px 0 10px}.readiness-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1.2fr;align-items:center;gap:12px}.readiness-flow div{display:grid;place-content:center;min-height:130px;padding:15px;text-align:center;border:1px solid var(--wd-line);background:#fff}.readiness-flow small{color:var(--blue);font-size:.6rem}.readiness-flow b{color:var(--navy);font-size:.7rem;margin-top:10px}.readiness-flow>i{font-style:normal;color:var(--blue)}.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.related-grid a{display:grid;grid-template-columns:1fr auto;min-height:125px;padding:24px;border:1px solid var(--wd-line);background:#fff;transition:.25s}.related-grid small{grid-column:1/-1;color:var(--blue)}.related-grid b{align-self:end;color:var(--navy);font-size:.84rem}.related-grid span{align-self:end;color:var(--blue)}.related-grid a:hover{border-color:var(--blue);translate:0 -2px}.wd-final{text-align:center;padding:90px 0}.wd-final .wd-eyebrow,.wd-final .button-row{justify-content:center}.wd-final h2{color:#fff;font-size:clamp(2.5rem,4vw,4rem)}.wd-final>div>p:not(.wd-eyebrow){max-width:650px;margin:0 auto;color:#b8c6df}
.wd-motion-ready [data-wd-reveal]:not(.is-visible) .wd-eyebrow i{transform:scaleX(0)}.wd-motion-ready [data-wd-reveal]:not(.is-visible) :is(.wd-copy,.wd-head,.scope-grid>*,.journey-path>*,.capability-accordions>*,.principles-grid>*,.design-process>*,.related-grid>*){opacity:0;transform:translateY(14px)}[data-wd-reveal] :is(.wd-copy,.wd-head,.scope-grid>*,.journey-path>*,.capability-accordions>*,.principles-grid>*,.design-process>*,.related-grid>*){transition:opacity .55s,transform .55s}.wd-motion-ready .wd-hero:not(.is-visible) .wd-hero-copy>*{opacity:0;transform:translateY(14px)}.wd-motion-ready .wd-hero:not(.is-visible) .wd-hero-copy h1 i{transform:translateY(105%)}.wd-motion-ready .wd-hero:not(.is-visible) .design-canvas{opacity:0;transform:translateX(15px)}.wd-hero-copy>*,.wd-hero-copy h1 i,.design-canvas{transition:.65s cubic-bezier(.22,1,.36,1)}.wd-motion-ready .is-visible *{--visible:1}.wd-motion-ready .is-visible .wd-hero-copy>*,.wd-motion-ready .is-visible .wd-hero-copy h1 i,.wd-motion-ready .is-visible .design-canvas,.wd-motion-ready [data-wd-reveal].is-visible :is(.wd-copy,.wd-head,.scope-grid>*,.journey-path>*,.capability-accordions>*,.principles-grid>*,.design-process>*,.related-grid>*){opacity:1;transform:none}.wd-motion-ready .wd-hero.is-visible .design-canvas{transition-delay:.55s}.wd-motion-ready .wd-hero.is-visible .wd-hero-copy h1{transition-delay:.12s}.wd-motion-ready .wd-hero.is-visible .wd-lead{transition-delay:.32s}.wd-motion-ready .wd-hero.is-visible .button-row{transition-delay:.44s}
@media(max-width:1199px){.wd-hero-layout,.wd-split,.wd-split-top{grid-template-columns:1fr;gap:42px}.wd-hero{min-height:0;padding:70px 0}.wd-hero-copy{max-width:850px}.design-canvas{width:min(100%,700px);height:470px;margin:auto}.scope-grid{grid-template-columns:repeat(2,1fr)}.intent-system,.responsive-preview,.experience-system{width:min(100%,650px);margin:auto}.design-process{grid-template-columns:repeat(3,1fr)}.design-process:before{display:none}.related-grid{grid-template-columns:repeat(2,1fr)}.evolution-layout{grid-template-columns:200px 1fr}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-grid>div:nth-last-child(-n+2){margin-top:20px}}
@media(max-width:767px){.wd-section{padding:70px 0}.web-design-page .container{width:min(var(--container),calc(100% - 32px))}.wd-hero{padding:40px 0 64px}.wd-hero-copy h1{font-size:clamp(2.25rem,10.3vw,2.75rem);line-height:1.02}.wd-lead{font-size:.98rem}.wd-hero .button-row{display:grid}.wd-hero .btn{width:100%}.design-canvas{height:340px}.canvas-main{padding:30px 20px;grid-template-columns:1fr .8fr}.canvas-copy b{font-size:1.1rem}.canvas-panel{min-height:150px}.canvas-components{left:20px;bottom:16px}.wd-copy h2,.wd-head h2{font-size:clamp(1.9rem,8.7vw,2.4rem)}.wd-head{margin-bottom:32px}.scope-grid,.principles-grid,.related-grid{grid-template-columns:1fr}.scope-grid article{min-height:175px}.intent-system{min-height:360px;grid-template-columns:1fr}.intent-inputs{grid-template-columns:1fr 1fr}.intent-lines{display:none}.intent-core{margin:auto}.journey-path{display:grid;grid-template-columns:1fr;gap:25px;padding:0}.journey-path:before{left:21px;right:auto;top:20px;bottom:20px;width:1.5px;height:auto}.journey-path li{display:grid;grid-template-columns:58px 1fr;text-align:left;padding:0;min-height:60px}.journey-path i{grid-row:1/3;width:32px;height:32px;margin:8px 0 0 5px}.journey-path b{margin:5px 0}.journey-path span{grid-column:2}.responsive-preview,.responsive-preview[data-responsive-view=tablet],.responsive-preview[data-responsive-view=mobile]{width:100%;height:390px}.view-tabs{display:grid;grid-template-columns:repeat(3,1fr)}.view-tabs button{padding-inline:6px}.evolution-layout{grid-template-columns:1fr}.evolution-tabs{grid-template-columns:1fr 1fr}.evolution-frame{height:330px;padding:18px;gap:15px}.experience-system{grid-template-columns:1fr;gap:25px;min-height:0}.experience-factors span:after{display:none}.experience-core{margin:auto;order:-1}.design-process{grid-template-columns:1fr;gap:12px}.design-process li{min-height:0;padding:24px 20px 20px 58px}.design-process li:before{left:22px;top:26px}.design-process b{margin:6px 0}.readiness-flow{grid-template-columns:1fr}.readiness-flow>i{transform:rotate(90deg);text-align:center}.wd-final{text-align:left}.wd-final .wd-eyebrow,.wd-final .button-row{justify-content:start}.wd-final h2{font-size:2.35rem}.wd-final .button-row{display:grid}.wd-final .btn{width:100%}.footer-grid{grid-template-columns:1fr}.footer-grid>div{margin-top:0!important}}
@media(max-width:390px){.canvas-nav span:nth-last-child(-n+2),.canvas-panel{display:none}.canvas-main{grid-template-columns:1fr}.intent-inputs{grid-template-columns:1fr}.evolution-tabs{grid-template-columns:1fr}.evolution-frame{grid-template-columns:1fr}.evo-visual{display:none}}
@media(prefers-reduced-motion:reduce){.web-design-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.wd-motion-ready [data-wd-reveal] *{opacity:1!important;transform:none!important}.canvas-cursor{display:none}}

/* Business + Experience interaction — scoped to the approved dark system. */
@media (hover:hover) and (pointer:fine) {
  .experience-factors span {
    isolation: isolate;
  }
  .experience-factors span:after {
    z-index: -1;
    transition: background .26s ease, height .26s ease;
  }
  .experience-factors span:before {
    content:"";
    position:absolute;
    z-index:3;
    right:-4px;
    top:50%;
    width:7px;
    height:7px;
    border:1px solid #4b78a8;
    background:#08185c;
    transform:translateY(-50%) rotate(45deg);
    transition:border-color .24s ease,background .24s ease;
  }
  .experience-factors span:hover,
  .experience-factors span.is-active {
    border-color:#087ef5;
    background:#0a2369;
    color:#fff;
    translate:1px 0;
  }
  .experience-factors span:hover:after,
  .experience-factors span.is-active:after {
    height:2px;
    background:linear-gradient(90deg,#087ef5,#13b8f4);
  }
  .experience-factors span:hover:before,
  .experience-factors span.is-active:before {
    border-color:#13b8f4;
    background:#087ef5;
  }
  .experience-factors span.is-flowing:before {
    animation:experienceDataFlow .56s cubic-bezier(.22,1,.36,1) 1 both;
  }
  .experience-core:before {
    content:"";
    position:absolute;
    z-index:4;
    left:-4px;
    top:var(--experience-entry,50%);
    width:7px;
    height:7px;
    border:1px solid #3b78b8;
    background:#08226c;
    transform:translateY(-50%) rotate(45deg);
    transition:top .2s ease,border-color .2s ease,background .2s ease;
  }
  .experience-core:after {
    content:"";
    position:absolute;
    left:50%;
    bottom:24px;
    width:34px;
    height:2px;
    background:#258ee9;
    translate:-50% 0;
    transition:width .22s ease,background .22s ease;
  }
  .experience-system.factor-active .experience-core,
  .experience-system.is-all-active .experience-core,
  .experience-core:hover {
    border-color:#58cfff;
    background:linear-gradient(145deg,#092675,#1458dd);
    transform:scale(1.006);
  }
  .experience-system.factor-active .experience-core:before,
  .experience-system.is-all-active .experience-core:before,
  .experience-core:hover:before {
    border-color:#13b8f4;
    background:#087ef5;
  }
  .experience-system.factor-active .experience-core:after,
  .experience-system.is-all-active .experience-core:after,
  .experience-core:hover:after {
    width:40px;
    background:#13b8f4;
  }
  .experience-system.factor-active .experience-core small,
  .experience-system.is-all-active .experience-core small,
  .experience-core:hover small { color:#b9efff; }
  .experience-system.is-all-active .experience-factors span {
    border-color:#377fc5;
    color:#e8f5ff;
  }
  .experience-system.is-all-active .experience-factors span:after {
    height:2px;
    background:linear-gradient(90deg,#087ef5,#13b8f4);
  }
  .experience-system.is-all-active .experience-factors span:before {
    border-color:#13b8f4;
    background:#087ef5;
  }
}
@keyframes experienceDataFlow {
  0% { opacity:0; translate:0 0; }
  12% { opacity:1; }
  82% { opacity:1; }
  100% { opacity:0; translate:58px 0; }
}
.experience-core { transition:border-color .24s ease,background .24s ease,transform .22s ease; }
.experience-core small { transition:color .22s ease; }
.wd-motion-ready .experience-section:not(.is-visible) .experience-factors span,
.wd-motion-ready .experience-section:not(.is-visible) .experience-core { opacity:0; transform:translateY(9px); }
.wd-motion-ready .experience-section .experience-factors span,
.wd-motion-ready .experience-section .experience-core { transition:opacity .4s ease,transform .4s ease,border-color .24s ease,background .24s ease,color .24s ease; }
.wd-motion-ready .experience-section.is-visible .experience-factors span,
.wd-motion-ready .experience-section.is-visible .experience-core { opacity:1; transform:none; }
.wd-motion-ready .experience-section .experience-factors span:nth-child(1){transition-delay:.34s}.wd-motion-ready .experience-section .experience-factors span:nth-child(2){transition-delay:.42s}.wd-motion-ready .experience-section .experience-factors span:nth-child(3){transition-delay:.5s}.wd-motion-ready .experience-section .experience-factors span:nth-child(4){transition-delay:.58s}.wd-motion-ready .experience-section .experience-factors span:nth-child(5){transition-delay:.66s}.wd-motion-ready .experience-section .experience-core{transition-delay:.74s}
@media(max-width:767px){
  .experience-factors span:after{display:block;left:50%;top:100%;width:1px;height:12px;background:#3a79be}
  .experience-factors span:last-child:after{height:26px}
  .experience-core:before,.experience-core:after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .experience-factors span.is-flowing:before{animation:none!important}
  .experience-system :is(.experience-factors span,.experience-core){translate:none!important;transform:none!important}
}

/* Hero interface mode controls — responsive alignment only; desktop unchanged. */
@media(max-width:1199px){
  .design-canvas{height:510px;box-sizing:border-box}
  .canvas-components{
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:7px;
    width:fit-content;
    max-width:calc(100% - 68px);
    margin:14px 34px 20px;
    transform:none;
  }
  .canvas-components span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:54px;
    min-height:30px;
    padding:0 11px;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:.58rem;
  }
  .canvas-components span:first-child,
  .canvas-components span.is-active{
    border-color:var(--royal);
    background:var(--royal);
    color:#fff;
  }
  .canvas-components:has(span.is-active) span:first-child:not(.is-active){
    border-color:var(--wd-line);
    background:#fff;
    color:#57708d;
  }
  .canvas-components span[role="button"]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
}
@media(max-width:767px){
  .design-canvas{height:415px}
  .canvas-components{
    max-width:calc(100% - 40px);
    margin:14px 20px 20px;
    gap:7px;
  }
  .canvas-components span{min-width:52px;min-height:30px;padding-inline:10px;font-size:.56rem}
}
@media(max-width:390px){
  .design-canvas{height:410px}
  .canvas-components{gap:6px;margin-top:12px;margin-bottom:18px}
  .canvas-components span{min-width:49px;min-height:29px;padding-inline:9px}
}

/* What Guides the Work — refined card hover without changing grid geometry. */
.principles-section .principles-grid article {
  isolation:isolate;
  background-color:#fff;
  box-shadow:0 8px 22px rgba(6,16,79,.025);
  filter:drop-shadow(0 0 0 rgba(6,16,79,0));
  transition:
    translate .3s cubic-bezier(.22,1,.36,1),
    box-shadow .3s ease,
    filter .3s ease,
    border-color .24s ease,
    background-color .24s ease;
}
.principles-section .principles-grid article:after {
  content:"";
  position:absolute;
  z-index:1;
  right:9px;
  top:9px;
  width:22px;
  height:1px;
  background:#c7d9eb;
  transform:rotate(45deg);
  transform-origin:right center;
  opacity:.45;
  transition:background-color .24s ease,opacity .24s ease,width .28s ease;
}
.principles-section .principles-grid article>i {
  position:relative;
  z-index:2;
  transition:
    transform .26s cubic-bezier(.22,1,.36,1),
    color .24s ease,
    background-color .24s ease,
    box-shadow .26s ease;
}
.principles-section .principles-grid article h3 {
  position:relative;
  z-index:2;
  transition:color .24s ease,font-weight .24s ease;
}
.principles-section .principles-grid article p {
  position:relative;
  z-index:2;
  transition:color .24s ease;
}
@media (hover:hover) and (pointer:fine) {
  .principles-section .principles-grid article:hover {
    translate:0 -5px;
    border-color:#79a9dd;
    background-color:#fbfdff;
    box-shadow:0 16px 34px rgba(6,16,79,.085);
    filter:drop-shadow(0 5px 7px rgba(18,77,216,.055));
  }
  .principles-section .principles-grid article:hover:after {
    width:26px;
    opacity:.85;
    background-color:#087ef5;
  }
  .principles-section .principles-grid article:hover>i {
    color:#087ef5;
    background-color:#e1efff;
    box-shadow:0 6px 16px rgba(8,126,245,.1);
    transform:scale(1.045) translateY(-1px);
  }
  .principles-section .principles-grid article:hover h3 {
    color:#071b58;
    font-weight:800;
  }
  .principles-section .principles-grid article:hover p {
    color:#46546a;
  }
}
@media (hover:none) {
  .principles-section .principles-grid article:active {
    border-color:#91b7df;
    background-color:#fbfdff;
  }
  .principles-section .principles-grid article:active>i {
    color:#087ef5;
    background-color:#e5f1ff;
  }
}
@media (prefers-reduced-motion:reduce) {
  .principles-section .principles-grid article,
  .principles-section .principles-grid article:hover,
  .principles-section .principles-grid article>i {
    transform:none!important;
    translate:none!important;
    filter:none!important;
  }
}

/* Design That Can Be Built — three-stage implementation flow. */
.readiness-section .readiness-flow {
  isolation:isolate;
}
.readiness-section .readiness-flow div {
  position:relative;
  z-index:2;
  transition:
    translate .3s cubic-bezier(.22,1,.36,1),
    border-color .24s ease,
    background-color .24s ease,
    box-shadow .28s ease;
}
.readiness-section .readiness-flow div:before {
  content:"";
  position:absolute;
  right:12px;
  top:12px;
  width:8px;
  height:8px;
  border:1px solid #9ab9d8;
  background:#fff;
  transform:rotate(45deg);
  transition:border-color .22s ease,background-color .22s ease;
}
.readiness-section .readiness-flow div:after {
  content:"";
  position:absolute;
  left:50%;
  bottom:17px;
  width:0;
  height:2px;
  background:#13b8f4;
  translate:-50% 0;
  transition:width .25s ease;
}
.readiness-section .readiness-flow div small,
.readiness-section .readiness-flow div b {
  transition:color .22s ease,translate .22s ease;
}
.readiness-section .readiness-flow>i {
  position:relative;
  z-index:1;
  display:block;
  width:28px;
  height:18px;
  color:transparent;
  font-size:0;
  transform:none;
}
.readiness-section .readiness-flow>i:before {
  content:"";
  position:absolute;
  left:0;
  right:2px;
  top:8px;
  height:1.5px;
  background:#a5bdd5;
  transform-origin:left center;
  transition:background-color .24s ease,transform .38s cubic-bezier(.22,1,.36,1);
}
.readiness-section .readiness-flow>i:after {
  content:"";
  position:absolute;
  right:0;
  top:5px;
  width:6px;
  height:6px;
  border-top:1.5px solid #789cbd;
  border-right:1.5px solid #789cbd;
  transform:rotate(45deg);
  transition:border-color .22s ease,translate .24s ease;
}
.readiness-section .readiness-flow div.is-active {
  translate:0 -3px;
  border-color:#087ef5;
  background-color:#f7fbff;
  box-shadow:0 10px 24px rgba(6,16,79,.065);
}
.readiness-section .readiness-flow div.is-complete {
  border-color:#8eb4dc;
  background-color:#fbfdff;
}
.readiness-section .readiness-flow div.is-active:before,
.readiness-section .readiness-flow div.is-complete:before {
  border-color:#087ef5;
  background-color:#e8f4ff;
}
.readiness-section .readiness-flow div.is-active small,
.readiness-section .readiness-flow div.is-complete small { color:#087ef5; translate:0 -1px; }
.readiness-section .readiness-flow div.is-active b { color:#06104f; }
.readiness-section .readiness-flow div:last-of-type.is-active:after { width:38px; }
.readiness-section .readiness-flow>i.is-active:before { background:#087ef5; }
.readiness-section .readiness-flow>i.is-active:after { border-color:#13b8f4; translate:3px 0; }
.readiness-section .readiness-flow>i.is-flowing:after { animation:readinessDataFlow .5s cubic-bezier(.22,1,.36,1) 1 both; }
@keyframes readinessDataFlow {
  0% { opacity:0; translate:-22px 0; }
  14%,82% { opacity:1; }
  100% { opacity:0; translate:3px 0; }
}
.readiness-section .text-link {
  position:relative;
  padding-bottom:3px;
}
.readiness-section .text-link:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:#087ef5;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .26s ease;
}
.readiness-section .text-link:hover:after,
.readiness-section .text-link:focus-visible:after { transform:scaleX(1); }
.wd-motion-ready .readiness-section:not(.is-visible) .readiness-flow div {
  opacity:0;
  translate:0 12px;
  scale:.98;
}
.wd-motion-ready .readiness-section:not(.is-visible) .readiness-flow>i:before { transform:scaleX(0); }
.wd-motion-ready .readiness-section.is-visible .readiness-flow div {
  animation:readinessCardIn .48s cubic-bezier(.22,1,.36,1) both;
}
.wd-motion-ready .readiness-section.is-visible .readiness-flow div:nth-of-type(1){animation-delay:.42s}.wd-motion-ready .readiness-section.is-visible .readiness-flow div:nth-of-type(2){animation-delay:.68s}.wd-motion-ready .readiness-section.is-visible .readiness-flow div:nth-of-type(3){animation-delay:.94s}
.wd-motion-ready .readiness-section.is-visible .readiness-flow>i:before { animation:readinessConnectorIn .38s cubic-bezier(.22,1,.36,1) both; }
.wd-motion-ready .readiness-section.is-visible .readiness-flow>i:nth-of-type(1):before{animation-delay:.56s}.wd-motion-ready .readiness-section.is-visible .readiness-flow>i:nth-of-type(2):before{animation-delay:.82s}
.wd-motion-ready .readiness-section.is-visible .readiness-flow>i:nth-of-type(1):after{animation:readinessDataFlow .48s ease .62s 1 both}.wd-motion-ready .readiness-section.is-visible .readiness-flow>i:nth-of-type(2):after{animation:readinessDataFlow .48s ease .88s 1 both}
@keyframes readinessCardIn{from{opacity:0;translate:0 12px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes readinessConnectorIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:1199px){
  .readiness-section .readiness-flow{grid-template-columns:1fr;width:min(100%,620px);margin-inline:auto}
  .readiness-section .readiness-flow div{width:100%;max-width:380px;min-height:105px;margin-inline:auto}
  .readiness-section .readiness-flow>i{width:28px;height:30px;margin:auto}
  .readiness-section .readiness-flow>i:before{left:13px;right:auto;top:0;width:1.5px;height:28px;transform-origin:center top}
  .readiness-section .readiness-flow>i:after{right:8px;top:19px;transform:rotate(135deg)}
  .readiness-section .readiness-flow>i.is-active:after{translate:0 3px}
  .readiness-section .readiness-flow>i.is-flowing:after{animation-name:readinessDataFlowVertical}
  .wd-motion-ready .readiness-section.is-visible .readiness-flow>i:before{animation-name:readinessConnectorInVertical}
  .wd-motion-ready .readiness-section.is-visible .readiness-flow>i:nth-of-type(1):after,.wd-motion-ready .readiness-section.is-visible .readiness-flow>i:nth-of-type(2):after{animation-name:readinessDataFlowVertical}
}
@keyframes readinessConnectorInVertical{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes readinessDataFlowVertical{0%{opacity:0;translate:0 -20px}14%,82%{opacity:1}100%{opacity:0;translate:0 3px}}
@media(prefers-reduced-motion:reduce){
  .readiness-section .readiness-flow div,.readiness-section .readiness-flow>i:before,.readiness-section .readiness-flow>i:after{animation:none!important;opacity:1!important;translate:none!important;scale:1!important;transform:none!important}
  .readiness-section .readiness-flow div.is-active{translate:none!important;box-shadow:none}
}


/* Principles icon picker: map the approved 34x34 icon-box styling onto the
   shared icon partial wrapper (.principles-icon) so Font Awesome icons render
   in the same box the legacy glyph <i> used. Mirrors the proven .cap-icon
   pattern. Dimensions/colors/transitions match the original article>i rules. */
.principles-section .principles-grid article>.principles-icon{
  display:grid;place-items:center;width:34px;height:34px;
  color:var(--blue);background:#eaf3fd;font-style:normal;
  position:relative;z-index:2;
  transition:transform .26s cubic-bezier(.22,1,.36,1),color .24s ease,background-color .24s ease,box-shadow .26s ease;
}
.principles-section .principles-grid article>.principles-icon>i{font-size:15px;line-height:1}
@media(hover:hover){
  .principles-section .principles-grid article:hover>.principles-icon{
    color:#087ef5;background-color:#e1efff;box-shadow:0 6px 16px rgba(8,126,245,.1);
    transform:scale(1.045) translateY(-1px);
  }
}
@media(hover:none){
  .principles-section .principles-grid article:active>.principles-icon{
    color:#087ef5;background-color:#e5f1ff;
  }
}
@media(prefers-reduced-motion:reduce){
  .principles-section .principles-grid article>.principles-icon{
    transform:none!important;translate:none!important;filter:none!important;
  }
}