.dgp-design{--#293992:#1e2a6e;--#293992-2:#1e2a6e;--cream:#f7f5f0;--sand:#e7dccd;--wood:#a47c58;--bronze:#bb936a;--ink:#292824;--muted:#68635c;color:var(--ink);font-family:"Be Vietnam Pro", Arial, sans-serif;overflow:hidden;background:var(--cream)}
.dgp-design *{box-sizing:border-box}.dgp-design ::selection{background:var(--bronze);color:#101c28}.dgp-design a,.dgp-design button{outline-offset:5px}.dgp-design a:focus-visible,.dgp-design button:focus-visible,.dgp-design input:focus-visible,.dgp-design select:focus-visible,.dgp-design textarea:focus-visible{outline:3px solid #c99d6d;outline-offset:3px}.dgp-design__wrap{width:min(1400px,calc(100% - 64px));margin-inline:auto}.dgp-design__section{padding:clamp(80px,9vw,140px) 0}.dgp-design h1,.dgp-design h2,.dgp-design h3{font-family:"Be Vietnam Pro", Arial, sans-serif;color:inherit}.dgp-design h2{font-size:clamp(2.3rem,4.8vw,4.7rem);line-height:1.02;letter-spacing:-.03em;margin:0}.dgp-design__heading{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:clamp(32px,7vw,100px);align-items:end;margin-bottom:clamp(44px,7vw,88px)}.dgp-design__heading p{font-size:1.06rem;line-height:1.8;color:var(--muted);margin:0;max-width:52ch}.dgp-design__hero{position:relative;min-height:min(880px,calc(100vh - 80px));display:grid;align-items:end;color:white;background:#1e2a6e}.dgp-design__hero-media{position:absolute;inset:0;background-image:var(--hero-image);background-size:cover;background-position:center 52%;transform:scale(1.04);will-change:transform}.dgp-design__hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20, 28, 60,.86) 0%,rgba(20, 28, 60,.54) 48%,rgba(20, 28, 60,.1) 78%),linear-gradient(0deg,rgba(20, 28, 60,.72),transparent 55%)}.dgp-design__hero-copy{position:relative;padding-bottom:clamp(100px,13vh,150px);z-index:1}.dgp-design__hero h1{font-size:clamp(3rem,6.7vw,6rem);line-height:.98;letter-spacing:-.035em;max-width:13ch;margin:0 0 28px;text-wrap:balance}.dgp-design__hero h1 span{display:block;color:#e8c79f}.dgp-design__hero-copy>p{font-size:clamp(1.05rem,1.7vw,1.34rem);line-height:1.75;max-width:650px;color:#f4eee6;margin:0 0 38px}.dgp-design__actions{display:flex;gap:16px;flex-wrap:wrap}.dgp-design__button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 25px;border:1px solid transparent;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:700;text-decoration:none;transition:transform .25s ease,background .25s ease,color .25s ease}.dgp-design__button:hover{transform:translateY(-3px)}.dgp-design__button--accent{background:#c2986d;color:#1e2a6e}.dgp-design__button--accent:hover{background:#dfc19f;color:#1e2a6e}.dgp-design__button--outline{border-color:rgba(255,255,255,.65);color:#fff}.dgp-design__button--outline:hover{background:#fff;color:#293992}.dgp-design__scroll{position:absolute;z-index:2;right:5vw;bottom:48px;color:white;text-decoration:none;display:flex;gap:14px;align-items:center;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em}.dgp-design__scroll i{display:block;width:1px;height:44px;background:rgba(255,255,255,.65);position:relative}.dgp-design__scroll i:after{content:"";position:absolute;bottom:0;left:-3px;width:7px;height:7px;border-right:1px solid #fff;border-bottom:1px solid #fff;transform:rotate(45deg)}
.dgp-design__services{background:#f7f5f0}.dgp-design__service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cec6bb;border-left:1px solid #cec6bb}.dgp-design__service{position:relative;min-height:250px;padding:38px;border-right:1px solid #cec6bb;border-bottom:1px solid #cec6bb;display:flex;flex-direction:column;justify-content:space-between;transition:background .35s ease,color .35s ease}.dgp-design__service:after{content:"";position:absolute;inset:0;background:#293992;transform:scaleY(0);transform-origin:bottom;transition:transform .38s cubic-bezier(.16,1,.3,1);z-index:0}.dgp-design__service>*{position:relative;z-index:1}.dgp-design__service svg{width:44px;height:44px;color:var(--wood)}.dgp-design__service h3{font-size:1.65rem;margin:42px 0 0}.dgp-design__service span{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);opacity:0;transform:translateY(10px);transition:.3s ease}.dgp-design__service:hover{color:white}.dgp-design__service:hover:after{transform:scaleY(1)}.dgp-design__service:hover span{opacity:1;transform:none;color:#ead8c0}.dgp-design__service:hover svg{color:#e2bc91}
.dgp-design__why{background:#e8e0d5}.dgp-design__split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:clamp(48px,8vw,120px);align-items:center}.dgp-design__editorial-image{margin:0}.dgp-design__editorial-image img{width:100%;height:min(720px,72vw);object-fit:cover;display:block}.dgp-design__editorial-image figcaption{font-size:.8rem;color:#5d574f;margin-top:14px}.dgp-design__why-copy h2{font-size:clamp(2.5rem,4.5vw,4.7rem);line-height:1.03;margin:0 0 48px}.dgp-design__why-copy ol{list-style:none;padding:0;margin:0}.dgp-design__why-copy li{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:20px 0;border-top:1px solid rgba(41,40,36,.18)}.dgp-design__why-copy li:last-child{border-bottom:1px solid rgba(41,40,36,.18)}.dgp-design__why-copy li>span{font-variant-numeric:tabular-nums;color:#8c6a4d;font-size:.8rem;padding-top:5px}.dgp-design__why-copy p{margin:0;line-height:1.7;color:#5c5750}.dgp-design__why-copy strong{color:var(--ink)}
.dgp-design__difference{background:#293992;color:#f7f5f0}.dgp-design__difference .dgp-design__heading p{color:#ccd6de}.dgp-design__difference-list{border-top:1px solid rgba(255,255,255,.24)}.dgp-design__difference-item{display:grid;grid-template-columns:80px minmax(220px,.65fr) 1fr;gap:40px;align-items:center;padding:34px 10px;border-bottom:1px solid rgba(255,255,255,.18);transition:background .25s ease,transform .25s ease}.dgp-design__difference-item:hover{background:rgba(255,255,255,.055);transform:translateX(10px)}.dgp-design__difference-item>span{color:#c69a70;font-variant-numeric:tabular-nums}.dgp-design__difference-item h3{font-size:clamp(1.5rem,2.4vw,2.5rem);margin:0}.dgp-design__difference-item p{margin:0;line-height:1.7;color:#c9d2da;max-width:60ch}
.dgp-design__process{background:#f7f5f0}.dgp-design__timeline{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:0;padding-top:34px}.dgp-design__timeline:before{content:"";position:absolute;left:3%;right:3%;top:54px;height:1px;background:#bdb2a5}.dgp-design__step{position:relative;padding:0 14px}.dgp-design__step span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cream);border:1px solid #a99886;color:#7a5b41;font-weight:700;position:relative;z-index:1;transition:.25s}.dgp-design__step.is-visible span,.dgp-design__step:hover span{background:#293992;color:white;border-color:#293992;box-shadow:0 10px 30px rgba(30, 42, 110,.22)}.dgp-design__step h3{font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:.93rem;line-height:1.55;margin:24px 0 0;color:#4d4841;font-weight:600}
.dgp-design__projects{background:#e9e5de}.dgp-design__filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}.dgp-design__filters button{border:1px solid #b8afa4;background:transparent;color:#514c45;padding:10px 16px;font:600 .78rem/1 "Be Vietnam Pro", Arial, sans-serif;cursor:pointer}.dgp-design__filters button:hover,.dgp-design__filters button.is-active{background:#293992;border-color:#293992;color:white}.dgp-design__project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}.dgp-design__project{grid-column:span 4;min-height:420px}.dgp-design__project:nth-child(1),.dgp-design__project:nth-child(4){grid-column:span 7}.dgp-design__project:nth-child(2),.dgp-design__project:nth-child(3){grid-column:span 5}.dgp-design__project[hidden]{display:none}.dgp-design__project-open{position:relative;width:100%;height:100%;padding:0;border:0;background:#ddd;overflow:hidden;cursor:zoom-in;text-align:left}.dgp-design__project-open img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.16,1,.3,1),filter .4s ease}.dgp-design__project-open:hover img{transform:scale(1.045);filter:brightness(.72)}.dgp-design__project-caption{position:absolute;inset:auto 0 0;color:white;padding:70px 28px 26px;background:linear-gradient(transparent,rgba(20, 28, 60,.82));display:grid;grid-template-columns:1fr auto;gap:4px 20px;transform:translateY(8px);transition:.35s ease}.dgp-design__project-open:hover .dgp-design__project-caption{transform:none}.dgp-design__project-caption strong{font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:1.55rem}.dgp-design__project-caption small{grid-column:1;color:#e2ded8}.dgp-design__project-caption i{grid-column:2;grid-row:1/3;font-style:normal;font-size:1.5rem;align-self:center}.dgp-design__compare{display:grid;grid-template-columns:.72fr 1.28fr;gap:50px;align-items:center;margin-top:100px}.dgp-design__compare-copy h3{font-size:clamp(2rem,3.2vw,3.4rem);line-height:1.08;margin:0 0 20px}.dgp-design__compare-copy p{color:#625d55;line-height:1.75}.dgp-design__compare-frame{position:relative;height:500px;overflow:hidden;background:#ccc}.dgp-design__compare-after{position:absolute;inset:0;width:var(--compare);overflow:hidden}.dgp-design__compare-frame>img,.dgp-design__compare-after img{width:100%;height:100%;object-fit:cover}.dgp-design__compare-after img{width:calc(100% / (var(--compare) / 100));max-width:none}.dgp-design__compare-line{position:absolute;top:0;bottom:0;left:var(--compare);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.dgp-design__compare-frame input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}
.dgp-design__proof{background:#fff}.dgp-design__quote-track{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.dgp-design__quote{margin:0;padding:38px 36px;background:#f1ede7;border-top:1px solid #a47c58;min-height:300px;display:flex;flex-direction:column}.dgp-design__quote>div{color:#a47c58;letter-spacing:.22em}.dgp-design__quote p{font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:1.5rem;line-height:1.55;margin:28px 0;flex:1}.dgp-design__quote footer{font-size:.75rem;color:#706960;text-transform:uppercase;letter-spacing:.1em}
.dgp-design__cta{background:#293992;color:white}.dgp-design__cta-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(50px,9vw,130px);align-items:start}.dgp-design__cta-copy h2{font-size:clamp(2.6rem,5vw,5.2rem);line-height:1.02;margin:0 0 30px}.dgp-design__cta-copy p{color:#c9d3dc;line-height:1.8;max-width:57ch}.dgp-design__cta-copy>a{display:inline-flex;color:#e4bd93;text-decoration:none;margin-top:24px;gap:9px}.dgp-design__form{display:grid;grid-template-columns:1fr 1fr;gap:24px;background:#fff;color:var(--ink);padding:clamp(28px,4vw,54px)}.dgp-design__field{display:flex;flex-direction:column;gap:9px}.dgp-design__field--full,.dgp-design__notice,.dgp-design__submit{grid-column:1/-1}.dgp-design__field label{font-size:.78rem;font-weight:700;color:#4b4640}.dgp-design__field label span{color:#9a533e}.dgp-design__field input,.dgp-design__field select,.dgp-design__field textarea{width:100%;border:0;border-bottom:1px solid #bdb5ab;background:#f8f6f3;border-radius:0;padding:13px 12px;color:#282521;font:inherit;margin:0;box-shadow:none}.dgp-design__field textarea{resize:vertical}.dgp-design__submit{border:0;background:#bd9165;color:#1e2a6e;min-height:56px;padding:0 25px;font:700 .78rem/1 "Be Vietnam Pro", Arial, sans-serif;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:.25s}.dgp-design__submit:hover{background:#dcb68e;transform:translateY(-2px)}.dgp-design__submit.is-loading{opacity:.7;cursor:wait}.dgp-design__notice{padding:14px 16px;font-size:.9rem}.dgp-design__notice.is-success{background:#e7f1e8;color:#234d2c}.dgp-design__notice.is-error{background:#f8e8e5;color:#75352c}.dgp-design__sticky{position:fixed;right:22px;bottom:22px;z-index:30;background:#c2986d;color:#1e2a6e;text-decoration:none;padding:13px 18px;box-shadow:0 14px 36px rgba(0,0,0,.24);display:flex;flex-direction:column;transition:.25s}.dgp-design__sticky:hover{transform:translateY(-3px);background:#dfc19f;color:#1e2a6e}.dgp-design__sticky span{font-size:.75rem;text-transform:uppercase;font-weight:800;letter-spacing:.06em}.dgp-design__sticky small{font-size:.75rem}.dgp-design__lightbox{width:min(1100px,92vw);max-height:90vh;padding:0;border:0;background:#081b2c;color:white;box-shadow:0 24px 90px rgba(0,0,0,.5)}.dgp-design__lightbox::backdrop{background:rgba(20, 28, 60,.88);backdrop-filter:blur(5px)}.dgp-design__lightbox img{display:block;width:100%;max-height:78vh;object-fit:contain}.dgp-design__lightbox p{margin:0;padding:18px 24px;font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:1.2rem}.dgp-design__lightbox-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#1e2a6e;font-size:2rem;cursor:pointer;z-index:2}
.has-dgp-motion .dgp-reveal{opacity:0;transform:translateY(34px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}.has-dgp-motion .dgp-reveal.is-visible{opacity:1;transform:none}.has-dgp-motion .dgp-design__service:nth-child(2),.has-dgp-motion .dgp-design__project:nth-child(2){transition-delay:.08s}.has-dgp-motion .dgp-design__service:nth-child(3),.has-dgp-motion .dgp-design__project:nth-child(3){transition-delay:.15s}
@media(max-width:1024px){.dgp-design__heading,.dgp-design__split,.dgp-design__cta-grid,.dgp-design__compare{grid-template-columns:1fr}.dgp-design__service-grid{grid-template-columns:repeat(2,1fr)}.dgp-design__timeline{grid-template-columns:repeat(2,1fr);gap:18px}.dgp-design__timeline:before{display:none}.dgp-design__step{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:center;padding:15px;border-top:1px solid #c8bfb3}.dgp-design__step h3{margin:0}.dgp-design__project{grid-column:span 6!important}.dgp-design__compare-frame{height:460px}.dgp-design__quote-track{overflow-x:auto;scroll-snap-type:x mandatory;grid-template-columns:repeat(3,minmax(340px,72vw));padding-bottom:15px}.dgp-design__quote{scroll-snap-align:start}}
@media(max-width:700px){.dgp-design__wrap{width:min(100% - 36px,1400px)}.dgp-design__section{padding:76px 0}.dgp-design__heading{gap:20px;margin-bottom:40px}.dgp-design h2{font-size:2.6rem}.dgp-design__hero{min-height:760px}.dgp-design__hero h1{font-size:3.3rem}.dgp-design__hero-copy{padding-bottom:105px}.dgp-design__hero-shade{background:linear-gradient(0deg,rgba(20, 28, 60,.9),rgba(20, 28, 60,.28) 85%)}.dgp-design__scroll{display:none}.dgp-design__button{width:100%}.dgp-design__service-grid{grid-template-columns:1fr}.dgp-design__service{min-height:190px;padding:28px}.dgp-design__service span{opacity:1;transform:none}.dgp-design__editorial-image img{height:520px}.dgp-design__why-copy h2{font-size:2.7rem}.dgp-design__difference-item{grid-template-columns:48px 1fr;gap:12px;padding:26px 0}.dgp-design__difference-item p{grid-column:2}.dgp-design__timeline{grid-template-columns:1fr}.dgp-design__project-grid{gap:14px}.dgp-design__project{grid-column:1/-1!important;min-height:350px}.dgp-design__filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;margin-right:-18px}.dgp-design__filters button{white-space:nowrap}.dgp-design__compare{margin-top:70px;gap:28px}.dgp-design__compare-frame{height:330px}.dgp-design__quote-track{grid-template-columns:repeat(3,86vw)}.dgp-design__quote{min-height:280px}.dgp-design__form{grid-template-columns:1fr;padding:26px 20px}.dgp-design__field{grid-column:1/-1}.dgp-design__sticky{right:12px;bottom:12px;padding:11px 14px}.dgp-design__sticky small{display:none}}
@media(prefers-reduced-motion:reduce){.dgp-design *{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}.has-dgp-motion .dgp-reveal{opacity:1;transform:none}.dgp-design__hero-media{transform:none!important}}

/* Interactive process, truthful comparison, and accessible validation. */
.dgp-design__step button{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;cursor:pointer;color:inherit}.dgp-design__step button[aria-expanded="true"] span{background:#293992;color:#fff;border-color:#293992;box-shadow:0 10px 30px rgba(30, 42, 110,.22)}.dgp-design__step>p{font-size:.78rem;line-height:1.65;color:#625d55;margin:14px 0 0}.dgp-design__project-caption svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.5}.dgp-design__compare-frame>img{filter:none}.dgp-design__compare-label{position:absolute;left:16px;bottom:16px;background:rgba(30, 42, 110,.88);color:#fff;padding:8px 10px;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}.dgp-design__compare-label--before{left:auto;right:16px}.dgp-design__compare-line svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;padding:12px;border-radius:50%;background:#fff;color:#293992;fill:none;stroke:currentColor;stroke-width:1.5}.dgp-design__compare-frame input{opacity:.001}.dgp-design__compare-frame input:focus-visible{opacity:1;height:4px;top:calc(50% - 2px);outline:3px solid #1e2a6e;outline-offset:5px}.dgp-design__quote h3{font-size:1.8rem;margin:0;color:#293992}.dgp-design__field-error{min-height:1.2em;color:#8b2f22;font-size:.72rem}.dgp-design__field [aria-invalid="true"]{border-color:#8b2f22;background:#fff3f1}.dgp-design__lightbox-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
@media(max-width:1024px){.dgp-design__step{display:block}.dgp-design__step button{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:center}.dgp-design__step>p{padding-left:60px}}
.dgp-design__service span{display:flex;align-items:center;gap:8px}.dgp-design__service span svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}.dgp-design__compare-frame>img{filter:none}

/* UX Builder before/after comparison. */
.dgp-design-ux-why-visual{margin-top:48px}.dgp-before-after{width:min(100%,1080px);margin:0 auto}.dgp-before-after__stage{position:relative;overflow:hidden;aspect-ratio:16/9;background:#ddd;isolation:isolate;touch-action:pan-y}.dgp-before-after__before,.dgp-before-after__after{position:absolute;inset:0}.dgp-before-after__before{z-index:2;clip-path:inset(0 calc(100% - var(--compare-position)) 0 0)}.dgp-before-after__image{display:block;width:100%;height:100%;object-fit:cover}.dgp-before-after__label{position:absolute;z-index:4;bottom:18px;padding:9px 12px;background:rgba(30,42,110,.88);color:#fff;font:700 .7rem/1.2 "Be Vietnam Pro", Arial, sans-serif;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}.dgp-before-after__label--before{left:18px}.dgp-before-after__label--after{right:18px}.dgp-before-after__divider{position:absolute;z-index:5;top:0;bottom:0;left:var(--compare-position);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(20,28,60,.26);transform:translateX(-1px);pointer-events:none}.dgp-before-after__handle{position:absolute;top:50%;left:50%;display:grid;width:52px;height:52px;place-items:center;border:2px solid #fff;border-radius:50%;background:#243c57;color:#fff;box-shadow:0 8px 24px rgba(20,28,60,.28);transform:translate(-50%,-50%)}.dgp-before-after__handle svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dgp-before-after__range{position:absolute!important;z-index:6!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;opacity:0!important;cursor:ew-resize!important}.dgp-before-after__range:focus-visible{opacity:1!important;height:6px!important;top:calc(50% - 3px)!important;bottom:auto!important;background:#fff;outline:3px solid #243c57!important;outline-offset:4px}.dgp-before-after figcaption{margin-top:14px;color:#625c54;font:500 .83rem/1.6 "Be Vietnam Pro", Arial, sans-serif;text-align:center}
@media(max-width:700px){.dgp-design-ux-why-visual{margin-top:32px}.dgp-before-after__stage{aspect-ratio:4/3}.dgp-before-after__label{bottom:12px;max-width:44%;padding:7px 8px;font-size:.58rem}.dgp-before-after__label--before{left:12px}.dgp-before-after__label--after{right:12px}.dgp-before-after__handle{width:44px;height:44px}.dgp-before-after figcaption{text-align:left}}

/* UX Builder version: every page section remains editable in Flatsome. */
.dgp-design-ux-hero{position:relative;overflow:hidden;background:linear-gradient(125deg,#172744 0%,#243c57 58%,#365274 100%)}.dgp-design-ux-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(108deg,rgba(255,255,255,.08),transparent 38%,rgba(194,152,109,.18));opacity:.65}.dgp-design-ux-hero .row{position:relative;min-height:clamp(610px,72vh,790px);z-index:1}.dgp-design-ux-hero .col{padding-top:clamp(65px,8vw,128px);padding-bottom:clamp(65px,8vw,128px)}.dgp-design-ux-hero h1,.dgp-design-ux-services h2,.dgp-design-ux-gallery h2,.dgp-design-ux-design-note h2,.dgp-design-ux-process h2,.dgp-design-ux-contact h2{font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:clamp(2.6rem,4.5vw,5.5rem);line-height:1.02;letter-spacing:-.03em}.dgp-design-ux-hero h1{max-width:10ch;margin-bottom:28px}.dgp-design-ux-hero .lead{max-width:570px;font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.8;color:#e7edf2}.dgp-design-ux-hero .button{margin:10px 12px 0 0;letter-spacing:.07em;font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:.74rem}.dgp-design-ux-hero-image .img{height:100%;min-height:390px;overflow:hidden;box-shadow:-28px 28px 0 rgba(194,152,109,.26)}.dgp-design-ux-hero-image img{width:100%;height:100%;object-fit:cover;animation:dgp-design-image-drift 12s ease-in-out infinite alternate}@keyframes dgp-design-image-drift{from{transform:scale(1.03) translate3d(-1.5%,0,0)}to{transform:scale(1.12) translate3d(1.5%,-1%,0)}}
.dgp-design-ux-intro .title{margin-bottom:0}.dgp-design-ux-intro .text-box{font-size:1.08rem;line-height:1.85;color:#5b554d}.dgp-design-ux-intro-statement{border-top:1px solid #a47c58;border-bottom:1px solid #d4ccc1;padding:28px 0!important}.dgp-design-ux-intro-statement .text-box{font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:clamp(1.45rem,2.15vw,2.25rem);line-height:1.45;color:#243c57}.dgp-design-ux-intro-statement strong{color:#a47c58}.dgp-design-ux-services{background:#f7f5f0}.dgp-design-ux-services .text-box{max-width:670px;margin:auto;color:#625c54;line-height:1.75}.dgp-design-ux-service-grid{margin-top:48px}.dgp-design-ux-service{border:1px solid #d1c8bc;border-right:0;min-height:280px;display:flex;align-items:stretch;transition:background .35s cubic-bezier(.16,1,.3,1),color .35s ease,transform .35s ease}.dgp-design-ux-service:last-child{border-right:1px solid #d1c8bc}.dgp-design-ux-service .icon-box{width:100%;padding:42px 34px;display:flex;flex-direction:column;justify-content:space-between}.dgp-design-ux-service .icon-box-text{font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:1.75rem}.dgp-design-ux-service .icon-box-text p{font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:.94rem;line-height:1.75;color:#645e55}.dgp-design-ux-service:hover{background:#243c57;color:#fff;transform:translateY(-8px)}.dgp-design-ux-service:hover p{color:#e1e8ef}.dgp-design-ux-service:hover .icon-box-img{color:#e6bc91}
.dgp-design-ux-process{background:#243c57;color:#fff}.dgp-design-ux-process .text-box{color:#d5e0e9;line-height:1.8}.dgp-design-ux-process-image .img{height:100%;min-height:540px}.dgp-design-ux-process-image img{width:100%;height:100%;object-fit:cover}.dgp-design-ux-process .accordion{margin-top:30px}.dgp-design-ux-process .accordion-item{border-color:rgba(255,255,255,.3)}.dgp-design-ux-process .accordion-title{font-family:"Be Vietnam Pro", Arial, sans-serif;color:#fff;font-size:.98rem;padding:17px 0}.dgp-design-ux-process .accordion-inner{color:#d5e0e9;line-height:1.8;padding:0 0 22px}.dgp-design-ux-process .toggle{color:#e6bc91}.dgp-design-ux-gallery .col{margin-bottom:28px}.dgp-design-ux-gallery .img{overflow:hidden;background:#e3ded7}.dgp-design-ux-gallery .img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1),filter .45s ease}.dgp-design-ux-gallery .col:hover .img img{transform:scale(1.055);filter:saturate(1.08)}.dgp-design-ux-gallery .text-box{padding:19px 0 0;color:#665f57;line-height:1.65}.dgp-design-ux-gallery .text-box strong{font-family:"Be Vietnam Pro", Arial, sans-serif;color:#243c57;font-size:1.42rem}.dgp-design-ux-design-note{background:#f7f5f0}.dgp-design-ux-design-note .text-box{max-width:560px;font-size:1.08rem;line-height:1.85;color:#5b554d}.dgp-design-ux-design-note .button{margin-top:16px}.dgp-design-ux-design-note .img{height:100%;min-height:410px}.dgp-design-ux-design-note img{width:100%;height:100%;object-fit:cover}.dgp-design-ux-contact .text-box{color:#d5e0e9;line-height:1.8}.dgp-design-ux-form{background:#fff;color:#2e2a25;padding:clamp(22px,3.4vw,48px)!important}.dgp-design-ux-form .wpcf7 input:not([type="submit"]),.dgp-design-ux-form .wpcf7 textarea,.dgp-design-ux-form .wpcf7 select{border:0;border-bottom:1px solid #bcb4a8;background:#f8f6f2;border-radius:0;box-shadow:none}.dgp-design-ux-form .wpcf7 input[type="submit"]{background:#c2986d;color:#243c57;border:0;padding:15px 25px;font-weight:700;letter-spacing:.06em}.dgp-design-ux-form .wpcf7 input[type="submit"]:hover{background:#dfc19f}
.dgp-design-ux-reveal{transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}.has-dgp-design-ux-motion .dgp-design-ux-reveal{opacity:0;transform:translateY(28px)}.has-dgp-design-ux-motion .dgp-design-ux-reveal.is-visible{opacity:1;transform:none}.has-dgp-design-ux-motion .dgp-design-ux-service:nth-child(2){transition-delay:.1s}.has-dgp-design-ux-motion .dgp-design-ux-service:nth-child(3){transition-delay:.18s}
@media(max-width:849px){.dgp-design-ux-hero .row{min-height:auto}.dgp-design-ux-hero .col{padding-top:64px;padding-bottom:18px}.dgp-design-ux-hero-image .img{min-height:340px;box-shadow:none}.dgp-design-ux-intro-statement{margin-top:24px}.dgp-design-ux-service{border-right:1px solid #d1c8bc;border-bottom:0;min-height:0}.dgp-design-ux-service:last-child{border-bottom:1px solid #d1c8bc}.dgp-design-ux-process-image .img{min-height:350px}.dgp-design-ux-design-note .img{min-height:310px}.dgp-design-ux-form{margin-top:24px}}@media(prefers-reduced-motion:reduce){.dgp-design-ux-hero-image img{animation:none}.dgp-design-ux-reveal,.has-dgp-design-ux-motion .dgp-design-ux-reveal{opacity:1;transform:none;transition:none}.dgp-design-ux-gallery .img img{transition:none}}
.dgp-design-ux-service-grid--second{margin-top:0}.dgp-design-ux-why{background:#fff}.dgp-design-ux-why h2,.dgp-design-ux-difference h2{font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:clamp(2.6rem,4.5vw,5rem);line-height:1.04}.dgp-design-ux-why>.row:first-child .text-box{max-width:680px;margin:auto;color:#625c54;line-height:1.8}.dgp-design-ux-why-grid{margin-top:44px}.dgp-design-ux-why-grid--second{margin-top:0}.dgp-design-ux-why-grid .col{border-top:1px solid #d8d0c6;padding:30px 24px}.dgp-design-ux-why-grid .icon-box{display:grid;grid-template-columns:42px 1fr;gap:18px}.dgp-design-ux-why-grid .icon-box-img{grid-row:1/3;color:#a47c58}.dgp-design-ux-why-grid .icon-box-text{font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:1.45rem;color:#243c57}.dgp-design-ux-why-grid p{font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:.93rem;line-height:1.7;color:#625c54}.dgp-design-ux-difference{background:#243c57;color:#fff}.dgp-design-ux-difference-list{border-top:1px solid rgba(255,255,255,.3);margin-top:34px}.dgp-design-ux-difference-list .col{min-height:265px;padding:30px 24px;border-right:1px solid rgba(255,255,255,.2);transition:background .3s ease}.dgp-design-ux-difference-list .col:last-child{border-right:0}.dgp-design-ux-difference-list .col:hover{background:rgba(255,255,255,.07)}.dgp-design-ux-difference-list h3{font-family:"Be Vietnam Pro", Arial, sans-serif;font-size:1.7rem;line-height:1.12}.dgp-design-ux-difference-list .text-box{color:#d5e0e9;line-height:1.75}.dgp-design-ux-process{background:#f7f5f0;color:#2e2a25}.dgp-design-ux-process .text-box,.dgp-design-ux-process .accordion-inner{color:#625c54}.dgp-design-ux-process .accordion-title{color:#243c57}.dgp-design-ux-process .accordion-item{border-color:#c7beb3}.dgp-design-ux-process .toggle{color:#a47c58}@media(max-width:849px){.dgp-design-ux-difference-list .col{min-height:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}.dgp-design-ux-why-grid .col{padding-left:0;padding-right:0}}
.dgp-design-ux-hero h1{width:100%;max-width:15ch;font-size:clamp(2.5rem,4.35vw,4.75rem);line-height:1.08;text-transform:none!important;word-break:normal;overflow-wrap:normal}.dgp-design-ux-hero-copy{padding-right:clamp(20px,4vw,72px)!important}.dgp-design-ux-hero-image .img{aspect-ratio:1/1;min-height:380px;box-shadow:-14px 14px 0 rgba(194,152,109,.22)}.dgp-design-ux-hero-image .img img{width:100%;height:100%;object-fit:cover}@media(max-width:849px){.dgp-design-ux-hero h1{max-width:16ch;font-size:clamp(2.5rem,8vw,4rem)}.dgp-design-ux-hero-image .img{aspect-ratio:4/3;min-height:300px}}

/* Keep reason copy full-width when Flatsome omits an unavailable featured-box icon. */
.dgp-design-ux-why-grid .icon-box{grid-template-columns:minmax(0,1fr)}
.dgp-design-ux-why-grid .icon-box:has(.icon-box-img){grid-template-columns:42px minmax(0,1fr)}
.dgp-design-ux-why-grid .icon-box-text{min-width:0}

/* The editable hero may use a light UX Builder background; keep its copy legible. */
.dgp-design-ux-hero h1{color:#243c57!important}
.dgp-design-ux-hero .lead,.dgp-design-ux-hero .lead p{color:#55514b!important}
body.page-id-759 #content .dgp-design-ux-hero .button.primary {
  background: linear-gradient(0deg, #FFD700 0%, #FFD700 75%, #FFFFFF 100%);
  color: #293992;
  border: none;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.25);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.page-id-759 #content .dgp-design-ux-hero .button.primary:hover {
  background: linear-gradient(0deg, #FFD700 0%, #FFD700 65%, #FFFFFF 100%);
  color: #293992;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.4);
  filter: brightness(1.05);
  border: none;
}
body.page-id-759 #content :is(.dgp-design-ux-hero,.dgp-design-ux-intro,.dgp-design-ux-services,.dgp-design-ux-why,.dgp-design-ux-difference,.dgp-design-ux-process,.dgp-design-ux-gallery,.dgp-design-ux-design-note),
body.page-id-759 #content :is(.dgp-design-ux-hero,.dgp-design-ux-intro,.dgp-design-ux-services,.dgp-design-ux-why,.dgp-design-ux-difference,.dgp-design-ux-process,.dgp-design-ux-gallery,.dgp-design-ux-design-note) :not(.icon):not([class*="icon-"]):not(.icon-box-img):not(i):not(svg):not(svg *) {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}
body.page-id-759 #content :is(.dgp-design-ux-hero .lead,.dgp-design-ux-intro .text-box,.dgp-design-ux-services .text-box,.dgp-design-ux-why .text-box,.dgp-design-ux-difference-list .text-box,.dgp-design-ux-process .text-box,.dgp-design-ux-process .accordion-inner,.dgp-design-ux-gallery .text-box,.dgp-design-ux-design-note .text-box) {
    font-size: 19px !important;
    line-height: 1.7 !important;
}
body.page-id-759 #content :is(.dgp-design-ux-services .icon-box-text p,.dgp-design-ux-why-grid p) {
    font-size: 18px !important;
    line-height: 1.65 !important;
}
body.page-id-759 #content :is(.dgp-design-ux-hero h1,.dgp-design-ux-services h2,.dgp-design-ux-why h2,.dgp-design-ux-difference h2,.dgp-design-ux-process h2,.dgp-design-ux-gallery h2,.dgp-design-ux-design-note h2) {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
    font-size: clamp(36px, 4.3vw, 56px) !important;
    line-height: 1.12 !important;
}
body.page-id-759 #content :is(.dgp-design-ux-service .icon-box-text,.dgp-design-ux-why-grid .icon-box-text,.dgp-design-ux-difference-list h3,.dgp-design-ux-gallery .text-box strong) {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
    font-size: clamp(22px, 2.1vw, 27px) !important;
    line-height: 1.3 !important;
}
body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-text {
    font-size: 18px !important;
    line-height: 1.6 !important;
}
body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-text h5 {
    font-size: 23px !important;
    line-height: 1.3 !important;
}
body.page-id-759 #content .dgp-design-ux-process .accordion-title {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
}
body.page-id-759 #content :is(.dgp-design-ux-hero .button,.dgp-design-ux-design-note .button) {
    font-family: "Be Vietnam Pro", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}
@media (max-width: 849px) {
    body.page-id-759 #content :is(.dgp-design-ux-hero .lead,.dgp-design-ux-intro .text-box,.dgp-design-ux-services .text-box,.dgp-design-ux-why .text-box,.dgp-design-ux-difference-list .text-box,.dgp-design-ux-process .text-box,.dgp-design-ux-process .accordion-inner,.dgp-design-ux-gallery .text-box,.dgp-design-ux-design-note .text-box) {
        font-size: 18px !important;
        line-height: 1.65 !important;
    }
    body.page-id-759 #content :is(.dgp-design-ux-services .icon-box-text p,.dgp-design-ux-why-grid p) {
        font-size: 17px !important;
        line-height: 1.6 !important;
    }
    body.page-id-759 #content :is(.dgp-design-ux-hero h1,.dgp-design-ux-services h2,.dgp-design-ux-why h2,.dgp-design-ux-difference h2,.dgp-design-ux-process h2,.dgp-design-ux-gallery h2,.dgp-design-ux-design-note h2) {
        font-size: clamp(32px, 8vw, 40px) !important;
    }
    body.page-id-759 #content :is(.dgp-design-ux-service .icon-box-text,.dgp-design-ux-why-grid .icon-box-text,.dgp-design-ux-difference-list h3,.dgp-design-ux-gallery .text-box strong) {
        font-size: 23px !important;
    }
}

.dgp-design-ux-service-grid--second .dgp-design-ux-service {
    position: relative;
    min-height: 360px;
    padding: 0 !important;
    overflow: hidden;
    border: 0;
    transform: none;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service > .col-inner {
    position: relative;
    display: flex;
    width: 100%;
    min-height: inherit;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    isolation: isolate;
    padding: 30px 28px;
    background: #243c57;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service > .col-inner::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 19, 27, .02) 8%, rgba(13, 19, 27, .18) 42%, rgba(13, 19, 27, .88) 100%);
    content: "";
    pointer-events: none;
    transition: background-color .3s ease;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service-image {
    position: absolute !important;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100% !important;
    margin: 0 !important;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service-image .img-inner,
.dgp-design-ux-service-grid--second .dgp-design-ux-service-image img {
    width: 100%;
    height: 100%;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service-image img {
    display: block;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service-title,
.dgp-design-ux-service-grid--second .dgp-design-ux-service-description {
    position: relative;
    z-index: 2;
    width: 100%;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service-title {
    width: 100% !important;
    max-width: none;
    margin: 0 0 9px;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service-title h3 {
    display: block;
    width: 100%;
    margin: 0;
    border: 0 !important;
    color: #fff;
    font-family: "Be Vietnam Pro", Arial, sans-serif;
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 800;
    line-height: 1.25;
    text-transform: none;
    text-align: left;
    transition: color .25s ease;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service-title h3 b {
    display: none;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service-title .section-title-main {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 0;
    text-decoration: none;
    text-align: left;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service-description {
    position: relative !important;
    inset: auto !important;
    max-height: 6em;
    width: 100% !important;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    color: #f4f0e9;
    font-size: 15px;
    line-height: 1.6;
    opacity: 1;
    transform: translateY(0);
    transition: max-height .32s ease, opacity .2s ease, transform .32s ease, visibility 0s;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service-description .text-box-content {
    padding: 0 !important;
    text-align: left !important;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service-description .text-inner {
    padding: 0 !important;
    text-align: left !important;
}
.dgp-design-ux-service-grid--second .dgp-design-ux-service-description p {
    margin: 0;
}
@media (hover: hover) and (pointer: fine) {
    .dgp-design-ux-service-grid--second .dgp-design-ux-service:hover .dgp-design-ux-service-image img {
        transform: scale(1.055);
    }
    .dgp-design-ux-service-grid--second .dgp-design-ux-service:hover .dgp-design-ux-service-title h3 {
        color: var(--dgp-gold);
    }
    .dgp-design-ux-service-grid--second .dgp-design-ux-service:hover .dgp-design-ux-service-description {
        max-height: 0;
        opacity: 0;
        transform: translateY(8px);
        visibility: hidden;
        transition: max-height .32s ease, opacity .2s ease, transform .32s ease, visibility 0s linear .32s;
    }
}
@media (max-width: 849px) {
    .dgp-design-ux-service-grid--second .dgp-design-ux-service {
        min-height: 320px;
        border: 0;
    }
    .dgp-design-ux-service-grid--second .dgp-design-ux-service > .col-inner {
        min-height: 320px;
        padding: 26px 24px;
    }
}

.dgp-design-ux-why-visual {
    max-width: 1120px;
    margin: clamp(36px, 5vw, 64px) auto 14px;
}
.dgp-design-ux-why-visual > .col {
    padding-bottom: 24px;
}
.dgp-design-ux-why-visual .dgp-design-ux-why-image {
    overflow: hidden;
    background: #e7dccd;
}
.dgp-design-ux-why-visual .dgp-design-ux-why-image .img-inner {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.dgp-design-ux-why-visual .dgp-design-ux-why-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}
.dgp-design-ux-why-visual .dgp-design-ux-why-image:hover img {
    transform: scale(1.035);
}
.dgp-design-ux-why-visual .dgp-design-ux-why-image-caption {
    width: 100% !important;
    max-width: none;
    margin: 14px 0 0;
    padding: 0;
}
.dgp-design-ux-why-visual .dgp-design-ux-why-image-caption h3 {
    margin: 0;
    color: #785b40;
    font-family: "Be Vietnam Pro", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.5;
    text-align: left;
    text-transform: uppercase;
}
.dgp-design-ux-why-visual .dgp-design-ux-why-image-caption h3 b {
    display: none;
}
.dgp-design-ux-why-visual .dgp-design-ux-why-image-caption .section-title-main {
    display: block;
    margin: 0;
    padding: 0;
    text-align: left;
}
@media (prefers-reduced-motion: reduce) {
    .dgp-design-ux-why-visual .dgp-design-ux-why-image img,
    .dgp-design-ux-service-grid--second .dgp-design-ux-service-image img,
    .dgp-design-ux-service-grid--second .dgp-design-ux-service-title h3,
    .dgp-design-ux-service-grid--second .dgp-design-ux-service-description {
        transition: none;
    }
}

/* 2026 density, type and visual-rhythm pass for the editable design-service page. */
body.page-id-759 #content {
    --dgp-design-section-space: clamp(52px, 6vw, 76px);
    --dgp-design-copy: clamp(18px, 1.35vw, 20px);
    --dgp-design-small-copy: clamp(16px, 1.1vw, 18px);
    background: #fff;
}
body.page-id-759 #content > .section {
    padding-top: var(--dgp-design-section-space) !important;
    padding-bottom: var(--dgp-design-section-space) !important;
}
body.page-id-759 #content > .dgp-design-ux-hero {
    padding-top: clamp(34px, 4vw, 56px) !important;
    padding-bottom: clamp(42px, 5vw, 64px) !important;
}
body.page-id-759 #content .dgp-design-ux-hero .row {
    min-height: clamp(500px, 63vh, 680px);
}
body.page-id-759 #content .dgp-design-ux-hero .col {
    padding-top: clamp(28px, 4vw, 58px);
    padding-bottom: clamp(28px, 4vw, 58px);
}
body.page-id-759 #content .dgp-design-ux-hero h1 {
    max-width: 12ch;
    margin-bottom: 22px;
    font-size: clamp(44px, 5.2vw, 72px) !important;
    font-weight: 800;
    letter-spacing: -.035em;
}
body.page-id-759 #content .dgp-design-ux-hero .lead,
body.page-id-759 #content .dgp-design-ux-hero .lead p {
    max-width: 52ch;
    margin-bottom: 22px;
    font-size: clamp(19px, 1.45vw, 22px) !important;
    line-height: 1.65 !important;
}
body.page-id-759 #content .dgp-design-ux-hero .button {
    min-height: 52px;
    padding-inline: 24px;
    font-size: 15px;
}
body.page-id-759 #content .dgp-design-ux-hero-image .img {
    min-height: 430px;
    box-shadow: -18px 18px 0 rgba(164, 124, 88, .2);
}

body.page-id-759 #content :is(.dgp-design-ux-intro,.dgp-design-ux-services,.dgp-design-ux-why,.dgp-design-ux-difference,.dgp-design-ux-process,.dgp-design-ux-gallery,.dgp-design-ux-design-note) > .row {
    row-gap: 24px;
}
body.page-id-759 #content :is(.dgp-design-ux-intro,.dgp-design-ux-services,.dgp-design-ux-why,.dgp-design-ux-difference,.dgp-design-ux-process,.dgp-design-ux-gallery,.dgp-design-ux-design-note) h2 {
    margin-bottom: 18px;
    font-size: clamp(38px, 4.4vw, 62px) !important;
    font-weight: 800;
    letter-spacing: -.035em;
    text-wrap: balance;
}
body.page-id-759 #content :is(.dgp-design-ux-intro,.dgp-design-ux-services,.dgp-design-ux-why,.dgp-design-ux-difference,.dgp-design-ux-process,.dgp-design-ux-gallery,.dgp-design-ux-design-note) :is(.text-box,.text-box p,.text-inner,.text-inner p,.accordion-inner) {
    font-size: var(--dgp-design-copy) !important;
    line-height: 1.7 !important;
}
body.page-id-759 #content .dgp-design-ux-intro {
    position: relative;
    background: linear-gradient(90deg, #fff 0 49.8%, #f7f5f0 49.8% 100%);
}
body.page-id-759 #content .dgp-design-ux-intro-statement {
    padding: 24px clamp(24px, 4vw, 58px) !important;
    border-top: 0;
    border-bottom: 0;
}
body.page-id-759 #content .dgp-design-ux-intro-statement .text-box {
    font-size: clamp(22px, 2vw, 30px) !important;
    line-height: 1.48 !important;
}

body.page-id-759 #content .dgp-design-ux-services {
    background: #f7f5f0 !important;
}
body.page-id-759 #content .dgp-design-ux-services > .row:first-child {
    margin-bottom: 22px;
}
body.page-id-759 #content .dgp-design-ux-services > .row:nth-child(2) {
    margin-bottom: 28px;
}
body.page-id-759 #content .dgp-design-ux-services .icon-box-text,
body.page-id-759 #content .dgp-design-ux-services .icon-box-text h3,
body.page-id-759 #content .dgp-design-ux-services .icon-box-text h5 {
    font-size: clamp(21px, 1.8vw, 27px) !important;
}
body.page-id-759 #content .dgp-design-ux-services .icon-box-text p {
    font-size: var(--dgp-design-small-copy) !important;
}
body.page-id-759 #content .dgp-design-ux-services .section-content > .row:first-child > .col,
body.page-id-759 #content .dgp-design-ux-services .section-content > .row:first-child h2,
body.page-id-759 #content .dgp-design-ux-services .section-content > .row:nth-child(2) .icon-box,
body.page-id-759 #content .dgp-design-ux-services .section-content > .row:nth-child(2) .icon-box-text {
    text-align: center !important;
}
body.page-id-759 #content .dgp-design-ux-gallery .section-content > .row:first-child > .col,
body.page-id-759 #content .dgp-design-ux-gallery .section-content > .row:first-child h2 {
    text-align: center !important;
}
body.page-id-759 #content .dgp-design-ux-gallery .section-content > .row:first-child h2 {
    justify-content: center !important;
}
body.page-id-759 #content .dgp-design-ux-service-grid--second {
    margin-right: -9px;
    margin-left: -9px;
}
body.page-id-759 #content .dgp-design-ux-service-grid--second > .col { padding-inline: 9px; }
body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service {
    min-height: 400px;
}
body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service > .col-inner {
    padding: 34px 30px;
}
body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-description {
    font-size: 17px !important;
    line-height: 1.65 !important;
}

body.page-id-759 #content .dgp-design-ux-why {
    background: #fff !important;
}
body.page-id-759 #content .dgp-design-ux-why > .row:first-child {
    margin-bottom: 8px;
}
body.page-id-759 #content .dgp-design-ux-why-visual {
    margin-top: 28px;
    margin-bottom: 20px;
}
body.page-id-759 #content .dgp-before-after {
    width: min(100%, 1180px);
    box-shadow: 0 24px 58px rgba(30, 42, 110, .14);
}
body.page-id-759 #content .dgp-before-after figcaption {
    padding: 0 16px 14px;
    background: #fff;
    font-size: 15px;
}
body.page-id-759 #content .dgp-design-ux-why-grid {
    margin-top: 22px;
    border-top: 1px solid #d8d0c6;
}
body.page-id-759 #content .dgp-design-ux-why-grid--second {
    margin-top: 0;
}
body.page-id-759 #content .dgp-design-ux-why-grid .col {
    padding: 24px 22px;
    border-top: 0;
}
body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-text h5 {
    margin-bottom: 8px;
    font-size: clamp(21px, 1.7vw, 25px) !important;
}
body.page-id-759 #content .dgp-design-ux-why-grid p {
    font-size: var(--dgp-design-small-copy) !important;
}

body.page-id-759 #content .dgp-design-ux-difference {
    background: #243c57 !important;
    color: #fff;
}
body.page-id-759 #content .dgp-design-ux-difference > .section-bg {
    background: #243c57 !important;
}
body.page-id-759 #content .dgp-design-ux-difference h2 {
    max-width: none;
    text-wrap: balance;
    color: #fff;
}
body.page-id-759 #content .dgp-design-ux-difference-list {
    margin-top: 20px;
}
body.page-id-759 #content .dgp-design-ux-difference-list .col {
    min-height: 220px;
    padding: 28px 24px;
}
body.page-id-759 #content .dgp-design-ux-difference-list h3 {
    margin-bottom: 14px;
    color: #fff;
    font-size: clamp(24px, 2vw, 30px) !important;
}
body.page-id-759 #content .dgp-design-ux-difference-list .text-box,
body.page-id-759 #content .dgp-design-ux-difference-list .text-box p {
    color: #e1e8ef !important;
    font-size: 17px !important;
}

body.page-id-759 #content .dgp-design-ux-difference-list .col {
    min-height: 150px;
}
body.page-id-759 #content .dgp-design-ux-difference .dgp-design-ux-difference-list h3 {
    max-width: none;
    font-size: clamp(20px, 1.7vw, 25px) !important;
}

body.page-id-759 #content .dgp-design-ux-process {
    background: #f7f5f0 !important;
    color: #243c57 !important;
}
body.page-id-759 #content .dgp-design-ux-process > .section-bg {
    background: #f7f5f0 !important;
}
body.page-id-759 #content .dgp-design-ux-process h2 {
    color: #243c57;
    font-size: clamp(32px, 3.2vw, 44px) !important;
    line-height: 1.12 !important;
}
body.page-id-759 #content .dgp-design-ux-process .row {
    align-items: center;
    row-gap: 28px;
}
body.page-id-759 #content .dgp-design-ux-process h2 {
    max-width: 760px;
    margin: 0 auto 14px;
    text-align: center;
}
body.page-id-759 #content .dgp-design-ux-process .text-box {
    max-width: 760px;
    margin: 0 auto 24px;
    text-align: center;
}
body.page-id-759 #content .dgp-design-ux-timeline {
    position: relative;
    height: 390px;
    margin: 22px auto 34px;
}
body.page-id-759 #content .dgp-design-ux-timeline__wave {
    position: absolute;
    top: 136px;
    left: 0;
    width: 100%;
    height: 88px;
    background: url("../images/design-process-wave.svg") center / 100% 100% no-repeat;
}
body.page-id-759 #content .dgp-design-ux-timeline__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
body.page-id-759 #content .dgp-design-ux-timeline__step {
    position: relative;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 8px;
    list-style: none !important;
}
body.page-id-759 #content .dgp-design-ux-timeline__copy {
    position: absolute;
    right: 4px;
    left: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
body.page-id-759 #content .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__copy {
    top: 0;
}
body.page-id-759 #content .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy {
    bottom: 0;
}
body.page-id-759 #content .dgp-design-ux-timeline__number {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 1px solid #b9afa2;
    border-radius: 50%;
    background: #f7f5f0;
    color: #293992;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
body.page-id-759 #content .dgp-design-ux-timeline__copy h3 {
    margin: 8px 0 5px;
    color: #243c57;
    font-size: clamp(16px, 1.15vw, 18px) !important;
    font-weight: 700;
    line-height: 1.3;
}
body.page-id-759 #content .dgp-design-ux-timeline__copy p {
    max-width: 19ch;
    margin: 0;
    color: #514b45;
    font-size: clamp(14px, .95vw, 16px) !important;
    line-height: 1.45;
}
body.page-id-759 #content .dgp-design-ux-timeline__node {
    position: absolute;
    left: 50%;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #243c57;
    transform: translateX(-50%);
}
body.page-id-759 #content .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__node {
    top: 140px;
}
body.page-id-759 #content .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__node {
    top: 210px;
}
body.page-id-759 #content .dgp-design-ux-process-photo .img {
    width: min(100%, 1000px);
    max-width: 100%;
    margin: 0 auto !important;
    float: none !important;
    overflow: hidden;
}
body.page-id-759 #content .dgp-design-ux-process-photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

body.page-id-759 #content .dgp-design-ux-gallery > .row:first-child {
    margin-bottom: 22px;
}
body.page-id-759 #content .dgp-design-ux-gallery .row:last-child {
    gap: 18px 0;
}
body.page-id-759 #content .dgp-design-ux-gallery .col {
    margin-bottom: 0;
}
body.page-id-759 #content .dgp-design-ux-gallery .text-box {
    padding-top: 14px;
    font-size: 17px !important;
}
body.page-id-759 #content .dgp-design-ux-gallery .text-box strong {
    font-size: clamp(22px, 1.8vw, 27px) !important;
}

body.page-id-759 #content .dgp-design-ux-design-note {
    background: #f7f5f0 !important;
}
body.page-id-759 #content .dgp-design-ux-design-note .row {
    align-items: center;
}
body.page-id-759 #content .dgp-design-ux-design-note .img {
    min-height: 440px;
    overflow: hidden;
}
body.page-id-759 #content .dgp-design-ux-design-note .button {
    min-height: 50px;
    margin-top: 10px;
    padding-inline: 22px;
}

@media (max-width: 849px) {
    body.page-id-759 #content .dgp-design-ux-process h2.section-title {
        font-size: clamp(32px, 7.4vw, 38px) !important;
    }
    body.page-id-759 #content {
        --dgp-design-section-space: 46px;
        --dgp-design-copy: 18px;
        --dgp-design-small-copy: 16px;
    }
    body.page-id-759 #content .dgp-design-ux-hero .row { min-height: auto; }
    body.page-id-759 #content .dgp-design-ux-hero h1 { font-size: clamp(38px, 10vw, 52px) !important; }
    body.page-id-759 #content .dgp-design-ux-hero-image .img { min-height: 320px; }
    body.page-id-759 #content .dgp-design-ux-intro { background: #fff; }
    body.page-id-759 #content .dgp-design-ux-intro-statement {
        margin-top: 6px;
        padding: 22px !important;
        background: #f7f5f0;
    }
    body.page-id-759 #content :is(.dgp-design-ux-intro,.dgp-design-ux-services,.dgp-design-ux-why,.dgp-design-ux-difference,.dgp-design-ux-process,.dgp-design-ux-gallery,.dgp-design-ux-design-note) h2 {
        font-size: clamp(32px, 9vw, 43px) !important;
    }
    body.page-id-759 #content .dgp-design-ux-service-grid--second { margin-right: -7px; margin-left: -7px; }
    body.page-id-759 #content .dgp-design-ux-service-grid--second > .col { padding-inline: 7px; }
    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service { min-height: 330px; }
    body.page-id-759 #content .dgp-design-ux-why-grid .col { padding: 20px 0; }
    body.page-id-759 #content .dgp-design-ux-difference-list .col { min-height: 0; padding: 24px 0; }
    body.page-id-759 #content .dgp-design-ux-process .col:first-child .img,
    body.page-id-759 #content .dgp-design-ux-design-note .img { min-height: 320px; }
}

body.page-id-759 #content :is(img, .img, .img-inner, figure, .dgp-before-after__stage, .dgp-design-ux-project-open, .dgp-design-ux-service, .dgp-design-ux-service > .col-inner) {
    border-radius: 0 !important;
}

@media (max-width: 650px) {
    body.page-id-759 #content > .dgp-design-ux-gallery {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    body.page-id-759 #content .dgp-design-ux-gallery .section-content > .row:last-child {
        row-gap: 0;
    }
    body.page-id-759 #content .dgp-design-ux-gallery .section-content > .row:last-child > .col {
        padding-bottom: 12px !important;
    }
    body.page-id-759 #content .dgp-design-ux-gallery .section-content > .row:last-child .img {
        margin-bottom: 6px;
    }
    body.page-id-759 #content .dgp-design-ux-gallery .section-content > .row:last-child .text-box {
        padding-top: 0;
    }
}

body.page-id-759 #content,
body.page-id-759 #content :not(.icon):not([class*="icon-"]):not(.icon-box-img):not(i):not(svg):not(svg *) {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

body.page-id-759 #content > .dgp-design-ux-hero {
    background: linear-gradient(108deg, #f7f5f0 0%, #fff 58%) !important;
}
body.page-id-759 #content .dgp-design-ux-hero .row {
    min-height: 0;
    align-items: center;
}
body.page-id-759 #content .dgp-design-ux-hero .col {
    padding-top: clamp(32px, 4vw, 54px);
    padding-bottom: clamp(32px, 4vw, 54px);
}
body.page-id-759 #content .dgp-design-ux-hero-copy {
    padding-right: clamp(28px, 5vw, 76px) !important;
}
body.page-id-759 #content .dgp-design-ux-hero h1 {
    max-width: 18ch;
    margin-bottom: 24px;
    font-size: clamp(46px, 5vw, 68px) !important;
    line-height: 1.05;
    letter-spacing: -.025em;
    text-wrap: balance;
}
body.page-id-759 #content .dgp-design-ux-hero h1 .section-title-main {
    display: inline-block;
}
body.page-id-759 #content .dgp-design-ux-hero h1 .section-title-main::after {
    display: block;
    width: 64px;
    height: 2px;
    margin-top: 20px;
    background: #a47c58;
    content: "";
}
body.page-id-759 #content .dgp-design-ux-hero .lead {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: block;
    width: 100% !important;
    max-width: 50ch;
    margin-bottom: 24px;
}
body.page-id-759 #content .dgp-design-ux-hero .lead .text-box-content {
    width: 100% !important;
}
body.page-id-759 #content .dgp-design-ux-hero .lead .text,
body.page-id-759 #content .dgp-design-ux-hero .lead .text-inner {
    color: #55514b !important;
    text-align: left !important;
}
body.page-id-759 #content .dgp-design-ux-hero-image .img {
    min-height: 0;
    aspect-ratio: 1 / 1;
    box-shadow: -16px 16px 0 rgba(164, 124, 88, .2);
}
body.page-id-759 #content .dgp-design-ux-hero-image .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 849px) {
    body.page-id-759 #content > .dgp-design-ux-hero {
        padding-top: 36px !important;
        padding-bottom: 42px !important;
    }
    body.page-id-759 #content .dgp-design-ux-hero .col {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    body.page-id-759 #content .dgp-design-ux-hero-copy {
        padding-right: 15px !important;
    }
    body.page-id-759 #content .dgp-design-ux-hero h1 {
        max-width: 17ch;
        margin-bottom: 18px;
        font-size: clamp(40px, 5.8vw, 46px) !important;
        line-height: 1.06;
    }
    body.page-id-759 #content .dgp-design-ux-hero h1 .section-title-main::after {
        margin-top: 14px;
    }
    body.page-id-759 #content .dgp-design-ux-hero .lead {
        max-width: 58ch;
        margin-bottom: 16px;
    }
    body.page-id-759 #content .dgp-design-ux-hero-image .img {
        aspect-ratio: 4 / 3;
        box-shadow: -9px 9px 0 rgba(164, 124, 88, .2);
    }
}

@media (max-width: 549px) {
    body.page-id-759 #content > .dgp-design-ux-hero {
        padding-top: 24px !important;
        padding-bottom: 34px !important;
    }
    body.page-id-759 #content .dgp-design-ux-hero h1 {
        max-width: 22ch;
        font-size: clamp(36px, 9.5vw, 44px) !important;
    }
    body.page-id-759 #content .dgp-design-ux-hero .lead {
        font-size: 18px !important;
        line-height: 1.55 !important;
    }
    body.page-id-759 #content .dgp-design-ux-hero-image .img {
        aspect-ratio: 1 / 1;
    }
}

/* Keep service-page image frames close to the source photography proportions. */
body.page-id-759 #content .dgp-design-ux-service-image,
body.page-id-759 #content .dgp-design-ux-gallery .img {
    position: relative;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
}
body.page-id-759 #content .dgp-design-ux-service-image {
    aspect-ratio: 1 / 1;
}
body.page-id-759 #content .dgp-design-ux-gallery .img {
    aspect-ratio: 4 / 3;
}
body.page-id-759 #content :is(.dgp-design-ux-service-image, .dgp-design-ux-gallery .img) > .img-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
}
body.page-id-759 #content :is(.dgp-design-ux-service-image, .dgp-design-ux-gallery .img) img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}
body.page-id-759 #content .dgp-design-ux-process .col:first-child .img,
body.page-id-759 #content .dgp-design-ux-design-note .img {
    position: relative;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
body.page-id-759 #content :is(.dgp-design-ux-process .col:first-child .img, .dgp-design-ux-design-note .img) > .img-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
}
body.page-id-759 #content :is(.dgp-design-ux-process .col:first-child .img, .dgp-design-ux-design-note .img) img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}
body.page-id-759 #content .dgp-design-ux-hero-image .img {
    aspect-ratio: 1 / 1;
}

/* Mobile service-page system: one column, 16px safe gutters, navy actions. */
@media (max-width: 767px) {
    body.page-id-759 #content {
        --dgp-mobile-primary: #293992;
        --dgp-mobile-primary-active: #1f2b70;
        --dgp-mobile-ink: #1e293b;
        --dgp-mobile-muted: #64748b;
        --dgp-mobile-surface: #ffffff;
        --dgp-mobile-surface-soft: #f8fafc;
        color: var(--dgp-mobile-ink);
        background: var(--dgp-mobile-surface);
    }

    body.page-id-759 #content > .section {
        padding-top: 38px !important;
        padding-bottom: 38px !important;
        background-color: var(--dgp-mobile-surface) !important;
    }

    body.page-id-759 #content > .section:nth-of-type(even) {
        background-color: var(--dgp-mobile-surface-soft) !important;
    }

    body.page-id-759 #content > .section > .section-content > .row {
        display: flex;
        width: auto !important;
        max-width: none !important;
        margin-right: max(16px, env(safe-area-inset-right)) !important;
        margin-left: max(16px, env(safe-area-inset-left)) !important;
        padding: 0 !important;
        flex-direction: column;
        row-gap: 16px;
    }

    body.page-id-759 #content > .section > .section-content > .row > .col {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        flex: 0 0 100% !important;
    }

    body.page-id-759 #content :is(h1, h2, h3, .section-title-main) {
        color: var(--dgp-mobile-primary);
    }

    body.page-id-759 #content h1 {
        font-size: clamp(34px, 9.6vw, 42px) !important;
        line-height: 1.12 !important;
    }

    body.page-id-759 #content h2,
    body.page-id-759 #content .dgp-design-ux-process h2.section-title {
        margin-bottom: 10px !important;
        font-size: clamp(30px, 8.4vw, 38px) !important;
        line-height: 1.16 !important;
    }

    body.page-id-759 #content h3:not(.dgs *) {
        margin-bottom: 8px !important;
        color: var(--dgp-mobile-ink) !important;
        line-height: 1.3 !important;
    }

    body.page-id-759 #content :is(p, .text, .text-inner, .icon-box-text):not(.dgs *) {
        color: var(--dgp-mobile-muted) !important;
        line-height: 1.65 !important;
    }

    body.page-id-759 #content :is(.button, a.button, button.button) {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 48px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 12px 18px !important;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--dgp-mobile-primary) !important;
        border-radius: 8px !important;
        background: var(--dgp-mobile-primary) !important;
        color: #fff !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-align: center;
        text-decoration: none;
        box-shadow: none !important;
    }

    body.page-id-759 #content :is(.button, a.button, button.button):is(:hover, :focus-visible, :active) {
        border-color: var(--dgp-mobile-primary-active) !important;
        background: var(--dgp-mobile-primary-active) !important;
        color: #fff !important;
        transform: none !important;
    }

    body.page-id-759 #content :is(.icon-box-img, .icon-box-img svg, .icon-box-img i) {
        border-color: var(--dgp-mobile-primary) !important;
        color: var(--dgp-mobile-primary) !important;
        fill: currentColor;
    }

    body.page-id-759 #content > .dgp-design-ux-hero {
        padding-top: 32px !important;
        padding-bottom: 40px !important;
        background: var(--dgp-mobile-surface-soft) !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero .row {
        gap: 20px;
    }

    body.page-id-759 #content .dgp-design-ux-hero .col {
        padding: 0 !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero-copy {
        padding-right: 0 !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero h1 {
        max-width: none;
        margin-bottom: 10px;
    }

    body.page-id-759 #content .dgp-design-ux-hero h1 .section-title-main::after {
        width: 56px;
        height: 2px;
        margin-top: 12px;
        background: var(--dgp-mobile-primary);
    }

    body.page-id-759 #content .dgp-design-ux-hero .lead {
        max-width: none;
        margin-bottom: 0;
        font-size: 17px !important;
        line-height: 1.65 !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero-image .img {
        min-height: 0;
        aspect-ratio: 4 / 3;
        box-shadow: none;
    }

    body.page-id-759 #content .dgp-design-ux-services .section-content > .row:nth-child(2),
    body.page-id-759 #content .dgp-design-ux-service-grid--second,
    body.page-id-759 #content .dgp-design-ux-why-grid,
    body.page-id-759 #content .dgp-design-ux-gallery .section-content > .row:last-child {
        gap: 16px;
        margin-top: 0 !important;
        margin-right: max(16px, env(safe-area-inset-right)) !important;
        margin-left: max(16px, env(safe-area-inset-left)) !important;
    }

    body.page-id-759 #content .dgp-design-ux-services .featured-box,
    body.page-id-759 #content .dgp-design-ux-why-grid .featured-box,
    body.page-id-759 #content .dgp-design-ux-service > .col-inner,
    body.page-id-759 #content .dgp-design-ux-gallery .col > .col-inner {
        height: auto !important;
        min-height: 0 !important;
        padding: 16px !important;
        border: 1px solid #e2e8f0;
        border-radius: 12px !important;
        background: var(--dgp-mobile-surface) !important;
        box-shadow: 0 8px 24px rgba(30, 41, 59, .07);
    }

    body.page-id-759 #content .dgp-design-ux-service-grid--second {
        margin-right: max(16px, env(safe-area-inset-right)) !important;
        margin-left: max(16px, env(safe-area-inset-left)) !important;
    }

    body.page-id-759 #content .dgp-design-ux-service-grid--second > .col,
    body.page-id-759 #content .dgp-design-ux-why-grid > .col,
    body.page-id-759 #content .dgp-design-ux-gallery .section-content > .row:last-child > .col {
        padding: 0 !important;
    }

    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service {
        min-height: 0;
    }

    body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why) .icon-box {
        display: block !important;
    }

    body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why) .icon-box-img {
        width: 44px !important;
        max-width: 44px !important;
        margin: 0 !important;
    }

    body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why) .icon-box-text {
        width: 100% !important;
        min-width: 0;
        text-align: left;
    }

    body.page-id-759 #content :is(.dgp-design-ux-service-title, .dgp-design-ux-service-description) {
        position: static !important;
        width: 100% !important;
        transform: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-service-title {
        margin-top: 14px !important;
        margin-bottom: 8px !important;
    }

    body.page-id-759 #content .dgp-design-ux-service-description {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.page-id-759 #content .dgp-design-ux-why-visual {
        margin-top: 16px;
    }

    body.page-id-759 #content .dgp-before-after__stage {
        aspect-ratio: 4 / 3;
    }

    body.page-id-759 #content .dgp-before-after__label {
        bottom: 10px;
        max-width: calc(50% - 16px);
        padding: 7px 8px;
        overflow: hidden;
        font-size: 10px;
        text-overflow: ellipsis;
    }

    body.page-id-759 #content .dgp-before-after__label--before { left: 8px; }
    body.page-id-759 #content .dgp-before-after__label--after { right: 8px; }

    body.page-id-759 #content .dgp-design-ux-process .row {
        gap: 22px;
    }

    body.page-id-759 #content .dgp-design-ux-timeline {
        height: auto;
        margin: 28px auto;
    }

    body.page-id-759 #content .dgp-design-ux-timeline__wave {
        display: none;
    }

    body.page-id-759 #content .dgp-design-ux-timeline__steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    body.page-id-759 #content .dgp-design-ux-timeline__steps::before {
        position: absolute;
        top: 16px;
        bottom: 24px;
        left: 15px;
        width: 1px;
        background: #b9afa2;
        content: "";
    }

    body.page-id-759 #content .dgp-design-ux-timeline__step {
        height: auto;
        min-height: 0;
        padding: 0;
    }

    body.page-id-759 #content .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
        text-align: left;
    }

    body.page-id-759 #content .dgp-design-ux-timeline__number {
        grid-row: 1 / span 2;
        margin-top: 2px;
        background: #f7f5f0;
    }

    body.page-id-759 #content .dgp-design-ux-timeline__copy h3 {
        margin: 0 0 5px;
        font-size: 18px !important;
    }

    body.page-id-759 #content .dgp-design-ux-timeline__copy p {
        max-width: 58ch;
        font-size: 16px !important;
    }

    body.page-id-759 #content .dgp-design-ux-timeline__node {
        display: none;
    }

    body.page-id-759 #content .dgp-design-ux-process-photo .img {
        width: 100%;
    }

    body.page-id-759 #content .dgp-design-ux-gallery .text-box {
        position: static !important;
        width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-design-note .row {
        gap: 20px;
    }

    body.page-id-759 #content .dgp-design-ux-design-note .button {
        margin-top: 12px !important;
    }

    body.page-id-759 #content :is(a, button, input, select, textarea):focus-visible {
        outline: 3px solid var(--dgp-mobile-primary) !important;
        outline-offset: 3px;
    }

    body.page-id-759 #content > .dgp-design-ux-hero {
        padding: 30px 0 28px !important;
        background: linear-gradient(145deg, #172744 0%, #243c57 68%, #354f70 100%) !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero .section-bg {
        background: transparent !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero h1,
    body.page-id-759 #content .dgp-design-ux-hero h1 .section-title-main {
        color: #fff;
        font-size: clamp(34px, 9vw, 40px) !important;
        line-height: 1.08 !important;
        text-wrap: balance;
    }

    body.page-id-759 #content .dgp-design-ux-hero h1 .section-title-main::after {
        background: #a47c58;
    }

    body.page-id-759 #content .dgp-design-ux-hero .lead,
    body.page-id-759 #content .dgp-design-ux-hero .lead :is(.text-box-content, .text-inner, p) {
        color: #e7dccd !important;
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero .row {
        gap: 18px;
    }

    body.page-id-759 #content .dgp-design-ux-hero-image .img,
    body.page-id-759 #content .dgp-design-ux-hero-image .img-inner {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden;
        border-radius: 8px;
    }

    body.page-id-759 #content .dgp-design-ux-hero-image img {
        display: block;
        width: 100%;
        height: 100% !important;
        object-fit: cover;
        object-position: center 54%;
        animation: none !important;
        transform: none !important;
    }

    body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why) .icon-box {
        padding: 18px !important;
        text-align: left;
    }

    body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why) .icon-box-text {
        width: 100% !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        text-align: left;
    }

    body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why) .icon-box-text h5 {
        margin: 0 0 8px !important;
        color: var(--dgp-mobile-ink) !important;
        font-size: 18px !important;
        line-height: 1.35 !important;
        text-transform: none;
    }

    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service,
    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service > .col-inner {
        min-height: 260px !important;
    }

    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service > .col-inner {
        padding: 20px !important;
    }

    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-title h3,
    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-title .section-title-main {
        color: #fff;
    }

    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-description,
    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-description :is(.text-box-content, .text-inner, p) {
        color: #e7dccd !important;
        text-align: left !important;
    }

    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-image,
    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-image .img-inner {
        height: 100% !important;
    }

    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-image img {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
    }

    body.page-id-759 #content .dgp-design-ux-gallery .img,
    body.page-id-759 #content .dgp-design-ux-gallery .img-inner {
        height: auto !important;
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    body.page-id-759 #content .dgp-design-ux-gallery .img img {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
    }
}

/* Minimal process treatment: clean rail, quiet active row, and no decorative panel. */
body.page-id-759 #content .dgp-design-ux-process-accordion {
    --dgp-process-blue: #293992;
}

body.page-id-759 #content .dgp-design-ux-process-accordion::before {
    top: 0;
    bottom: 0;
    width: 2px;
    background: #293992 !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item::before {
    width: 20px;
    height: 20px;
    border: 2px solid #293992 !important;
    background: #f7f8fa !important;
    box-shadow: none !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item:has(.accordion-title.active)::before {
    border-color: #293992 !important;
    background: #293992 !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item {
    border-bottom-color: #c6cbd3;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title {
    min-height: 66px;
    color: #193b5e !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 18px;
    font-weight: 700;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title.active {
    background: #eef0f3 !important;
    box-shadow: inset 0 1px 0 #293992 !important;
    color: #193b5e !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle,
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title.active .toggle {
    background: transparent !important;
    color: #293992 !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle::before,
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title.active .toggle::before {
    border-color: #293992 !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner,
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner p {
    margin-left: 36px;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #193b5e !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner {
    margin-bottom: 18px;
    padding: 0 12px 0 0 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner p {
    margin: 0;
    font-size: 18px !important;
    line-height: 1.6 !important;
}

@media (min-width: 768px) {
    body.page-id-759 #content .dgp-design-ux-process-photo {
        align-self: flex-start !important;
        padding-top: 0 !important;
    }

    body.page-id-759 #content .dgp-design-ux-process-layout > .col {
        padding-top: 0 !important;
    }

    body.page-id-759 #content .dgp-design-ux-process-photo .img {
        margin-top: 0 !important;
    }
}

/* Remove the theme's brown toggle frame and keep only a small chevron. */
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle,
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title.active .toggle {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle::before {
    width: 8px;
    height: 8px;
    border-width: 1px;
    border-color: #293992 !important;
}

/* Responsive process: one touch-first, vertical chain for tablet and phone. */
@media (max-width: 1023px) {
    body.page-id-759 #content {
        --dgp-service-ink: #101820;
        --dgp-service-navy: #243c57;
        --dgp-service-paper: #ffffff;
    }

    body.page-id-759 #content :is(
        .dgp-design-ux-hero,
        .dgp-design-ux-services,
        .dgp-design-ux-why,
        .dgp-design-ux-process,
        .dgp-design-ux-gallery,
        .dgp-design-ux-design-note
    ) :is(p, li, h1, h2, h3, h4, h5, h6, strong, .text-box, .icon-box-text) {
        color: var(--dgp-service-ink);
    }

    body.page-id-759 #content :is(.dgp-design-ux-hero h1, .dgp-design-ux-process h2, .dgp-design-ux-services h2, .dgp-design-ux-why h2, .dgp-design-ux-gallery h2, .dgp-design-ux-design-note h2) {
        color: var(--dgp-service-navy);
    }

    body.page-id-759 #content :is(.dgp-design-ux-hero .button, .dgp-design-ux-design-note .button) {
        color: #ffffff !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline {
        position: relative;
        width: 100%;
        height: auto;
        margin: 28px auto 12px;
        padding: 0;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__node {
        display: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__steps {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        width: min(100%, 720px);
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd),
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) {
        position: relative;
        display: block;
        min-height: 72px;
        margin: 0;
        padding: 0 0 18px 62px;
        border: 0;
        border-radius: 0;
        background: transparent;
        cursor: pointer;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step::before {
        position: absolute;
        z-index: 1;
        top: 2px;
        left: 0;
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 2px solid var(--dgp-service-navy);
        border-radius: 50%;
        background: var(--dgp-service-paper);
        color: var(--dgp-service-navy);
        content: '';
        transition: background-color 220ms ease, color 220ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step::after {
        position: absolute;
        z-index: 0;
        top: 44px;
        bottom: 0;
        left: 20px;
        width: 2px;
        background: var(--dgp-service-navy);
        content: '';
        transform-origin: top;
        transition: bottom 280ms cubic-bezier(.16, 1, .3, 1);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:last-child::after {
        display: none;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy {
        position: relative;
        display: block;
        width: 100%;
        padding: 8px 0 0;
        text-align: left;
        transform: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__number,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__number {
        position: absolute;
        z-index: 2;
        top: 13px;
        left: -62px;
        display: grid;
        width: 42px;
        height: 22px;
        place-items: center;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        color: var(--dgp-service-navy) !important;
        font-size: 12px !important;
        font-weight: 800;
        line-height: 1;
        letter-spacing: .03em;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy h3 {
        min-height: 44px;
        margin: 0 !important;
        color: var(--dgp-service-navy) !important;
        font-size: 18px !important;
        font-weight: 700;
        line-height: 1.35 !important;
        text-align: left !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy p {
        position: relative !important;
        display: block;
        max-width: 56ch;
        max-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        color: var(--dgp-service-ink) !important;
        font-size: 16px !important;
        font-weight: 400;
        line-height: 1.65 !important;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 180ms ease, transform 260ms ease;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step.is-expanded::before {
        background: var(--dgp-service-navy);
        box-shadow: 0 8px 18px rgba(36, 60, 87, .2);
        transform: scale(1.08);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step.is-expanded .dgp-design-ux-timeline__number {
        color: #ffffff !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step.is-expanded .dgp-design-ux-timeline__copy p {
        max-height: 12rem;
        margin-top: 8px !important;
        opacity: 1;
        transform: none;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:focus-visible {
        outline: 3px solid var(--dgp-service-navy);
        outline-offset: 5px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.page-id-759 #content .dgp-design-ux-process > .section-content {
        padding-inline: 24px !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__steps {
        max-width: 680px;
    }
}

@media (max-width: 767px) {
    body.page-id-759 #content > .dgp-design-ux-hero > .section-content,
    body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) > .section-content {
        padding-inline: max(8px, env(safe-area-inset-left)) !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__steps {
        padding-inline: 8px;
    }
}

body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row > .dgp-design-ux-hero-image {
    padding: 24px clamp(16px, 3vw, 40px) 24px 0 !important;
}

@media (max-width: 849px) {
    body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row > .dgp-design-ux-hero-image {
        padding: 0 16px 20px !important;
    }
}

/* Keep the desktop process endpoints clear of the viewport and scrollbar. */
@media (min-width: 1024px) and (max-width: 1280px) {
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline {
        width: calc(100% - 48px);
        margin-right: auto;
        margin-left: auto;
    }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:first-child .dgp-design-ux-timeline__copy p,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:last-child .dgp-design-ux-timeline__copy p {
        width: min(28ch, calc(100% + 28px));
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:first-child .dgp-design-ux-timeline__copy p {
        margin-right: auto;
        transform-origin: left top;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:last-child .dgp-design-ux-timeline__copy p {
        margin-left: auto;
        transform-origin: right top;
    }
}

/* Scroll choreography for the seven-step design journey. */
body.page-id-759 #content .dgp-design-ux-process[data-process-motion-ready="true"] > .section-content > .row:first-child h2,
body.page-id-759 #content .dgp-design-ux-process[data-process-motion-ready="true"] > .section-content > .row:first-child .text-box {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(18px);
    transition:
        opacity 520ms cubic-bezier(.16, 1, .3, 1),
        filter 520ms cubic-bezier(.16, 1, .3, 1),
        transform 650ms cubic-bezier(.16, 1, .3, 1);
}

body.page-id-759 #content .dgp-design-ux-process[data-process-motion-ready="true"].is-scroll-visible > .section-content > .row:first-child h2,
body.page-id-759 #content .dgp-design-ux-process[data-process-motion-ready="true"].is-scroll-visible > .section-content > .row:first-child .text-box {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

body.page-id-759 #content .dgp-design-ux-process[data-process-motion-ready="true"].is-scroll-visible > .section-content > .row:first-child .text-box {
    transition-delay: 90ms;
}

body.page-id-759 #content .dgp-design-ux-timeline[data-motion-ready="true"] .dgp-design-ux-timeline__wave-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.15s cubic-bezier(.16, 1, .3, 1) 140ms;
}

body.page-id-759 #content .dgp-design-ux-timeline[data-motion-ready="true"].is-visible .dgp-design-ux-timeline__wave-line {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    body.page-id-759 #content .dgp-design-ux-process[data-process-motion-ready="true"] > .section-content > .row:first-child h2,
    body.page-id-759 #content .dgp-design-ux-process[data-process-motion-ready="true"] > .section-content > .row:first-child .text-box {
        opacity: 1;
        filter: none;
        transform: none;
        transition: opacity 160ms ease;
    }

    body.page-id-759 #content .dgp-design-ux-timeline[data-motion-ready="true"] .dgp-design-ux-timeline__wave-line {
        stroke-dashoffset: 0;
        transition: none;
    }
}

/* Editorial layout inspired by the reference, while keeping DGP's navy, cream and wood identity. */
body.page-id-759 #content .dgp-design-ux-hero {
    padding: clamp(28px, 4.5vw, 64px) 0 !important;
    background: #243c57 !important;
    color: #fff;
}

body.page-id-759 #content .dgp-design-ux-hero > .section-content {
    width: min(100%, var(--dgp-site-max-width));
    margin-inline: auto;
    padding-inline: clamp(16px, 3.5vw, 52px);
}

body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row {
    align-items: stretch !important;
    margin-inline: 0;
}

body.page-id-759 #content .dgp-design-ux-hero-copy {
    display: flex;
    align-items: center;
    padding: 0 !important;
}

body.page-id-759 #content .dgp-design-ux-hero-copy > .col-inner {
    width: 100%;
    padding: clamp(30px, 5vw, 76px);
    background: #1e2a6e;
}

body.page-id-759 #content .dgp-design-ux-hero h1 {
    max-width: 13ch;
    margin: 0 0 24px;
    color: #fff;
    font-size: clamp(38px, 5vw, 68px) !important;
    line-height: 1.04 !important;
    text-wrap: balance;
}

body.page-id-759 #content .dgp-design-ux-hero .lead,
body.page-id-759 #content .dgp-design-ux-hero .lead p {
    max-width: 38ch;
    margin: 0;
    color: #f7f5f0 !important;
    font-size: clamp(17px, 1.45vw, 20px) !important;
    line-height: 1.7 !important;
}

body.page-id-759 #content .dgp-design-ux-hero-image {
    display: flex;
    padding: 0 !important;
}

body.page-id-759 #content .dgp-design-ux-hero-image > .col-inner,
body.page-id-759 #content .dgp-design-ux-hero-image .img,
body.page-id-759 #content .dgp-design-ux-hero-image .img-inner {
    width: 100%;
    height: 100%;
}

body.page-id-759 #content .dgp-design-ux-hero-image .img {
    min-height: 460px;
    aspect-ratio: auto;
    box-shadow: none;
}

body.page-id-759 #content .dgp-design-ux-hero-image .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-id-759 #content .dgp-design-ux-services,
body.page-id-759 #content .dgp-design-ux-process {
    background: #f7f5f0 !important;
}

body.page-id-759 #content .dgp-design-ux-services > .section-content,
body.page-id-759 #content .dgp-design-ux-process > .section-content,
body.page-id-759 #content .dgp-design-ux-gallery > .section-content,
body.page-id-759 #content .dgp-design-ux-design-note > .section-content {
    width: min(100%, 1400px);
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 40px);
}

body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) h2 {
    margin: 0 0 18px;
    color: #243c57;
    font-size: clamp(32px, 4vw, 52px) !important;
    line-height: 1.12 !important;
    text-wrap: balance;
}

body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:first-child,
body.page-id-759 #content .dgp-design-ux-gallery > .section-content > .row:first-child {
    max-width: 900px;
    margin: 0 auto 38px;
}

body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:first-child .text-box,
body.page-id-759 #content .dgp-design-ux-gallery > .section-content > .row:first-child .text-box {
    color: #55514b;
    line-height: 1.75;
}

body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:nth-child(2) {
    margin: 0 0 32px;
    border-top: 1px solid #d8d0c6;
}

body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:nth-child(2) > .col {
    padding: 24px clamp(12px, 2vw, 28px);
    border-bottom: 1px solid #d8d0c6;
}

body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:nth-child(2) .icon-box {
    align-items: flex-start;
}

body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:nth-child(2) .icon-box-img {
    color: #a47c58;
}

body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:nth-child(2) .icon-box-text {
    color: #243c57;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service {
    min-height: 320px;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-description {
    max-height: 8em;
    color: #fff !important;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-description :is(.text-box-content, .text-inner, p) {
    color: #fff !important;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-title h3 {
    color: #fff !important;
}

body.page-id-759 #content {
    --dgp-design-service-paper: #f9f7f1;
    --dgp-design-service-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 260' fill='none'%3E%3Cg stroke='%2328483f' stroke-opacity='.12' stroke-width='1'%3E%3Cpath d='M-30 24C80 10 124 47 222 37S365 2 469 20s125 33 181 12M-30 68C77 48 132 91 222 80S367 45 471 62s126 31 179 10M-30 111c102-17 158 20 253 9s142-32 244-17 119 28 182 11M-30 156c105-19 156 19 253 7s143-34 248-19 119 31 179 13M-30 202c104-17 157 20 253 8s145-34 248-18 119 30 179 12M-30 247c104-19 157 19 253 7s145-32 248-18 119 29 179 12'/%3E%3C/g%3E%3C/svg%3E");
}

body.page-id-759 #content .dgp-design-ux-why {
    background-color: var(--dgp-design-service-paper) !important;
    background-image: var(--dgp-design-service-wave) !important;
    background-size: 620px 260px;
    color: #29483f;
}

body.page-id-759 #content .dgp-design-ux-why h2 {
    color: #203f36;
}

body.page-id-759 #content .dgp-design-ux-why > .section-content > .row:first-child .text-box,
body.page-id-759 #content .dgp-design-ux-why-grid p {
    color: #4e6258 !important;
}

body.page-id-759 #content .dgp-design-ux-why > .section-content > .row:first-child {
    max-width: 900px;
    margin: 0 auto 36px;
    text-align: center;
}

body.page-id-759 #content .dgp-design-ux-why > .section-content > .row:first-child .text-box {
    max-width: 68ch;
    margin-inline: auto;
}

body.page-id-759 #content .dgp-design-ux-why .icon-box-text,
body.page-id-759 #content .dgp-design-ux-why .icon-box-text h5 {
    color: #29483f !important;
}

body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-img {
    color: #537966 !important;
}

body.page-id-759 #content .dgp-design-ux-why-visual {
    margin-top: clamp(28px, 4vw, 52px);
}

body.page-id-759 #content .dgp-before-after {
    margin-inline: auto;
    border: 1px solid #d6d2c7;
}

body.page-id-759 #content .dgp-before-after figcaption {
    color: #4e6258;
}

body.page-id-759 #content .dgp-design-ux-why-grid {
    margin-top: 26px;
}

body.page-id-759 #content .dgp-design-ux-why-grid .col {
    border-color: #d6d2c7;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave {
    background: #d8d0c6;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__node {
    border-color: #a47c58;
    background: #f7f5f0;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__number {
    color: #886244;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy h3 {
    color: #243c57;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy p {
    color: #55514b;
}

body.page-id-759 #content .dgp-design-ux-process-photo {
    margin-top: clamp(36px, 5vw, 64px);
}

body.page-id-759 #content .dgp-design-ux-process-photo .img,
body.page-id-759 #content .dgp-design-ux-design-note .img {
    overflow: hidden;
}

body.page-id-759 #content .dgp-design-ux-process-photo img,
body.page-id-759 #content .dgp-design-ux-design-note img {
    display: block;
    width: 100%;
    margin-inline: auto;
    object-fit: cover;
}

body.page-id-759 #content .dgp-design-ux-gallery {
    background-color: var(--dgp-design-service-paper) !important;
    background-image: var(--dgp-design-service-wave) !important;
    background-size: 620px 260px;
    color: #29483f;
}

body.page-id-759 #content .dgp-design-ux-gallery h2 {
    color: #203f36;
}

body.page-id-759 #content .dgp-design-ux-gallery > .section-content > .row:first-child {
    text-align: center;
}

body.page-id-759 #content .dgp-design-ux-gallery > .section-content > .row:first-child .text-box {
    color: #4e6258;
}

body.page-id-759 #content .dgp-design-ux-gallery .col {
    color: #29483f;
}

body.page-id-759 #content .dgp-design-ux-gallery > .section-content > .row:nth-child(2) {
    align-items: flex-start;
}

body.page-id-759 #content .dgp-design-ux-gallery > .section-content > .row:nth-child(2) > .col {
    padding-bottom: 20px;
}

body.page-id-759 #content .dgp-design-ux-gallery .img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

body.page-id-759 #content .dgp-design-ux-gallery .img img {
    transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

body.page-id-759 #content .dgp-design-ux-gallery .text-box,
body.page-id-759 #content .dgp-design-ux-gallery .text-box strong {
    color: #29483f !important;
}

body.page-id-759 #content .dgp-design-ux-gallery .text-box {
    padding-top: 16px;
    line-height: 1.7;
}

body.page-id-759 #content .dgp-design-ux-design-note {
    background: #e7dccd !important;
}

body.page-id-759 #content .dgp-design-ux-design-note .row {
    align-items: center !important;
}

body.page-id-759 #content .dgp-design-ux-design-note .button {
    margin-top: 16px;
    border-color: #243c57;
    color: #243c57;
}

body.page-id-759 #content .dgp-design-ux-design-note .button:hover {
    background: #243c57;
    color: #fff;
}

body.page-id-759 #content :is(.dgp-design-ux-why, .dgp-design-ux-gallery) > .section-bg {
    background-color: var(--dgp-design-service-paper) !important;
    background-image: var(--dgp-design-service-wave) !important;
    background-size: 620px 260px;
}

body.page-id-759 #content :is(.dgp-design-ux-why, .dgp-design-ux-gallery) :is(h2, h3, .icon-box-text) {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

body.page-id-759 #content :is(.dgp-design-ux-why, .dgp-design-ux-gallery) :not(.icon):not([class*="icon-"]):not(.icon-box-img):not(i):not(svg):not(svg *) {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

body.page-id-759 #content :is(.dgp-design-ux-why, .dgp-design-ux-gallery) :is(.section-title, .section-title-main) {
    display: block;
    width: 100%;
    text-align: center !important;
}

body.page-id-759 #content :is(.dgp-design-ux-why, .dgp-design-ux-gallery) h2 {
    font-size: clamp(30px, 3.5vw, 44px) !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .015em;
}

body.page-id-759 #content :is(.dgp-design-ux-hero, .dgp-design-ux-services, .dgp-design-ux-why, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) :focus-visible {
    outline: 3px solid #ffe600;
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    body.page-id-759 #content .dgp-design-ux-gallery .col:hover img {
        transform: scale(1.035);
    }

    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service:hover .dgp-design-ux-service-description {
        max-height: 8em;
        opacity: 1;
        transform: none;
        visibility: visible;
    }
}

@media (max-width: 849px) {
    body.page-id-759 #content .dgp-design-ux-hero {
        padding: 18px 0 !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero > .section-content {
        padding-inline: 16px;
    }

    body.page-id-759 #content .dgp-design-ux-hero-copy > .col-inner {
        padding: clamp(26px, 7vw, 44px);
    }

    body.page-id-759 #content .dgp-design-ux-hero h1 {
        font-size: clamp(34px, 8vw, 48px) !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero-image .img {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) > .section-content {
        padding-inline: 18px;
    }

    body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:nth-child(2) > .col {
        padding-inline: 0;
    }

    body.page-id-759 #content .dgp-design-ux-gallery > .section-content > .row:nth-child(2) > .col {
        padding-inline: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-id-759 #content :is(.dgp-design-ux-gallery .img img, .dgp-design-ux-service-image img) {
        transition: none;
    }
}

body.page-id-759 #content .dgp-design-ux-why-visual {
    width: min(calc(100% - 60px), 1400px) !important;
    max-width: 1400px !important;
    margin: clamp(36px, 5vw, 64px) auto 20px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body.page-id-759 #content .dgp-design-ux-why-visual > .col {
    width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body.page-id-759 #content .dgp-design-ux-why-visual > .col > .col-inner,
body.page-id-759 #content .dgp-before-after {
    width: 100%;
    max-width: none;
}

body.page-id-759 #content .dgp-design-ux-why-visual > .col > .col-inner {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body.page-id-759 #content .dgp-before-after {
    margin: 0;
    border: 0;
}

body.page-id-759 #content .dgp-design-ux-why-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    width: min(calc(100% - 60px), 1400px) !important;
    max-width: 1400px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    margin-top: 28px;
    padding: 0 !important;
    border: 0;
}

body.page-id-759 #content .dgp-design-ux-why-grid > .col {
    display: flex;
    width: 100% !important;
    min-width: 0;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 26px !important;
    flex: initial !important;
    border: 0;
    text-align: center !important;
}

body.page-id-759 #content .dgp-design-ux-why-grid > .col > .col-inner {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
}

body.page-id-759 #content .dgp-design-ux-why-card-image {
    display: block;
    width: 100% !important;
    overflow: hidden;
    isolation: isolate;
    margin: 0 0 14px !important;
}

body.page-id-759 #content .dgp-design-ux-why-card-image .img,
body.page-id-759 #content .dgp-design-ux-why-card-image .img-inner {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    isolation: isolate;
}

body.page-id-759 #content .dgp-design-ux-why-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

body.page-id-759 #content .dgp-design-ux-why-grid .icon-box {
    flex: 1;
    margin: 0;
    text-align: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-img {
    display: none;
}

body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-text {
    text-align: center !important;
}

body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-text {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-text h5 {
    margin: 0 0 8px;
    color: #203f36 !important;
    font-size: clamp(16px, 1.35vw, 19px) !important;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
}

body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-text p {
    max-width: 38ch;
    margin: 0 auto;
    color: #4e6258 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

body.page-id-759 #content .dgp-design-ux-why-grid--second {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(calc(100% - 60px), 1400px) !important;
    max-width: 1400px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

@media (hover: hover) and (pointer: fine) {
    body.page-id-759 #content .dgp-design-ux-why-card-image:hover img {
        transform: scale(1.015);
    }
}

@media (max-width: 849px) {
    body.page-id-759 #content > .section > .section-content > .dgp-design-ux-why-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    body.page-id-759 #content .dgp-design-ux-why-grid {
        width: min(calc(100% - 60px), 1400px) !important;
        max-width: 1400px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    body.page-id-759 #content .dgp-design-ux-why-grid--second {
        width: min(calc(100% - 60px), 1400px) !important;
        max-width: 1400px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    body.page-id-759 #content .dgp-design-ux-why-grid > .col {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 0 16px !important;
        flex: initial !important;
    }

    body.page-id-759 #content .dgp-design-ux-why-grid:not(.dgp-design-ux-why-grid--second) > .col:last-child {
        width: calc(50% - 6px) !important;
        grid-column: 1 / -1;
        justify-self: center;
    }

    body.page-id-759 #content .dgp-design-ux-why-card-image {
        margin-bottom: 10px !important;
    }

    body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-text h5 {
        font-size: 15px !important;
    }

    body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-text {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    @media (max-width: 700px) {
        body.page-id-759 #content .dgp-design-ux-why-grid,
        body.page-id-759 #content .dgp-design-ux-why-grid--second {
            width: min(calc(100% - 32px), 1400px) !important;
            max-width: 1400px !important;
        }
    }

    body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-text p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
}

@media (max-width: 379px) {
    body.page-id-759 #content > .section > .section-content > .dgp-design-ux-why-grid {
        grid-template-columns: 1fr;
    }

    body.page-id-759 #content .dgp-design-ux-why-grid:not(.dgp-design-ux-why-grid--second) > .col:last-child {
        width: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-id-759 #content .dgp-design-ux-why-card-image img {
        transition: none;
    }
}

body.page-id-759 #content .dgp-design-ux-why-grid .icon-box .icon-box-text {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

@media (max-width: 849px) {
    body.page-id-759 #content .dgp-design-ux-why-grid .icon-box .icon-box-text {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }
}

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline {
        width: min(100%, 1120px);
        height: 420px;
        margin: 28px auto 38px;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave {
        top: 136px;
        height: 88px;
        background-color: transparent;
        background-image: url("../images/design-process-wave.svg");
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        clip-path: inset(0);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step {
        --timeline-step-delay: 0ms;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy {
        transition:
            opacity 460ms ease,
            filter 460ms ease,
            transform 650ms cubic-bezier(.16, 1, .3, 1);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__copy {
        transform: translateY(14px);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy {
        transform: translateY(-14px);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline[data-motion-ready="true"] .dgp-design-ux-timeline__copy {
        opacity: 0;
        filter: blur(4px);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline[data-motion-ready="true"] .dgp-design-ux-timeline__step.is-visible .dgp-design-ux-timeline__copy {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
        transition-delay: var(--timeline-step-delay);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline[data-motion-ready="true"] .dgp-design-ux-timeline__wave {
        clip-path: inset(0 100% 0 0);
        transition: clip-path 1.15s cubic-bezier(.16, 1, .3, 1);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline[data-motion-ready="true"].is-visible .dgp-design-ux-timeline__wave {
        clip-path: inset(0);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__number,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__node {
        transition:
            background-color 220ms ease,
            border-color 220ms ease,
            color 220ms ease,
            box-shadow 220ms ease,
            transform 220ms ease;
    }

    @media (hover: hover) and (pointer: fine) {
        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:hover .dgp-design-ux-timeline__number {
            transform: scale(1.08);
            border-color: #293992;
            background: #293992;
            color: #fff;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:hover .dgp-design-ux-timeline__node {
            transform: translateX(-50%) scale(1.15);
            border-color: #293992;
            background: #293992;
            box-shadow: none;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:hover .dgp-design-ux-timeline__copy h3 {
            color: #293992 !important;
        }
    }

    @media (max-width: 767px) {
        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline {
            height: auto;
            margin: 30px auto;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave {
            display: block !important;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 984' preserveAspectRatio='none'%3E%3Cpath d='M16 66 C16 128 84 146 84 208 S16 288 16 350 S84 430 84 492 S16 572 16 634 S84 714 84 776 S16 856 16 918' fill='none' stroke='%23b9afa2' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            clip-path: inset(0);
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline[data-motion-ready="true"] .dgp-design-ux-timeline__wave {
            clip-path: inset(0 0 100% 0);
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline[data-motion-ready="true"].is-visible .dgp-design-ux-timeline__wave {
            clip-path: inset(0);
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__steps {
            grid-template-columns: minmax(0, 1fr);
            gap: 10px;
            height: auto;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__steps::before {
            display: none;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step,
        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd),
        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) {
            display: grid;
            height: auto;
            min-height: 132px;
            padding: 0;
            align-items: center;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy,
        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__copy {
            position: relative;
            inset: auto;
            display: grid;
            grid-template-columns: 32px minmax(0, 1fr);
            column-gap: 12px;
            padding-left: calc(16% - 16px);
            align-items: start;
            text-align: left;
            transform: translateX(-12px);
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy {
            position: relative;
            inset: auto;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 32px;
            column-gap: 12px;
            padding-left: 0;
            padding-right: calc(16% - 16px);
            align-items: start;
            text-align: right;
            transform: translateX(12px);
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__number {
            grid-row: 1 / span 2;
            margin-top: 2px;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__number {
            grid-column: 2;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy h3 {
            margin: 0 0 5px !important;
            font-size: 16px !important;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy p {
            max-width: 38ch;
            font-size: 14px !important;
            line-height: 1.55;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__node {
            display: block;
            top: 62px;
            left: 16%;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__node {
            top: 62px;
            left: 84%;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy {
            transform: translateX(12px);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy,
        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__number,
        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__node,
        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave {
            transition: none !important;
            filter: none !important;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy {
            opacity: 1 !important;
            transform: none !important;
        }
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline {
        height: 520px;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave {
        top: 220px;
        height: 100px;
        background-image: url("../images/design-process-wave.svg?v=20261022") !important;
        background-color: transparent !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__node {
        top: 226px;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__node {
        top: 306px;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__node {
        width: 10px;
        height: 10px;
        border: 2px solid #293992;
        background: #f7f5f0;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__number {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-color: #293992;
        color: #293992;
        font-size: 19px;
        font-weight: 700;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy h3 {
        width: 100%;
        margin-top: 10px;
        font-size: clamp(18px, 1.3vw, 20px) !important;
        font-weight: 800 !important;
        text-align: center !important;
        text-wrap: balance;
    }

    @media (hover: hover) and (pointer: fine) {
        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy p {
            position: relative;
            z-index: 2;
            left: auto;
            width: min(32ch, calc(100% + 64px));
            max-width: none;
            max-height: 0;
            padding: 0 10px;
            overflow: hidden;
            border-radius: 2px;
            background: #f7f5f0;
            font-size: 18px !important;
            font-weight: 600;
            line-height: 1.5;
            opacity: 0;
            text-align: center;
            visibility: hidden;
            transform: scale(.94) translateY(-5px);
            transform-origin: center top;
            transition:
                max-height 260ms ease,
                opacity 180ms ease,
                transform 220ms ease,
                visibility 220ms ease;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:is(:hover:not(.is-collapsed), .is-expanded) .dgp-design-ux-timeline__copy p {
            max-height: 10em;
            margin-top: 4px;
            opacity: 1;
            visibility: visible;
            transform: scale(1.02) translateY(0);
        }
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:focus-visible {
        outline: none;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step {
        cursor: pointer;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:focus-visible .dgp-design-ux-timeline__number {
        box-shadow: 0 0 0 3px rgba(164, 124, 88, .32);
    }

    @media (max-width: 767px) {
        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline {
            width: 100%;
            max-width: 1440px;
            height: auto;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave {
            top: 0;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 984' preserveAspectRatio='none'%3E%3Cpath d='M16 66 C16 128 84 146 84 208 S16 288 16 350 S84 430 84 492 S16 572 16 634 S84 714 84 776 S16 856 16 918' fill='none' stroke='%23293992' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__number {
            width: 42px;
            height: 42px;
            flex-basis: 42px;
            font-size: 17px;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy h3 {
            align-self: center;
            margin: 2px 0 8px !important;
            font-size: 18px !important;
            font-weight: 800 !important;
            text-align: center !important;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy h3,
        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy p {
            grid-column: 1;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy p {
            text-align: center !important;
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 100%;
            padding: 0 6px;
            border-radius: 2px;
            background: #f7f5f0;
            font-size: 18px !important;
            font-weight: 600;
            line-height: 1.5;
            max-height: 0;
            margin: 0 !important;
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transform: scale(.94) translateY(-5px);
            transform-origin: center top;
            transition:
                max-height 300ms ease,
                opacity 200ms ease,
                margin 200ms ease,
                transform 260ms cubic-bezier(.16, 1, .3, 1),
                visibility 200ms ease;
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step.is-expanded .dgp-design-ux-timeline__copy p {
            max-height: 10em;
            margin: 4px 0 0 !important;
            opacity: 1;
            visibility: visible;
            transform: scale(1.02) translateY(0);
        }

        body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__number {
            grid-column: 2;
        }
    }

body.page-id-759 #content .dgp-design-ux-timeline__wave {
    z-index: 3;
    background: none !important;
    pointer-events: none;
}

body.page-id-759 #content .dgp-design-ux-timeline__wave-svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

body.page-id-759 #content .dgp-design-ux-timeline__wave-svg--mobile {
    display: none;
}

body.page-id-759 #content .dgp-design-ux-timeline__wave-line {
    stroke: #293992;
    transition: stroke 180ms ease, stroke-width 180ms ease;
}

body.page-id-759 #content .dgp-design-ux-timeline__step.is-wave-hovered .dgp-design-ux-timeline__node {
    z-index: 4;
    border-color: #293992 !important;
    background: #293992 !important;
    box-shadow: none !important;
    transform: translateX(-50%) scale(1.15) !important;
}

body.page-id-759 #content .dgp-design-ux-timeline__step.is-wave-hovered .dgp-design-ux-timeline__number {
    border-color: #293992;
    background: #293992;
    color: #fff;
}

body.page-id-759 #content .dgp-design-ux-timeline__wave.is-wave-hovered .dgp-design-ux-timeline__wave-line {
    stroke: #293992;
    stroke-width: 3;
    filter: drop-shadow(0 1px 1px rgba(41, 57, 146, .65));
}

@media (max-width: 767px) {
    body.page-id-759 #content .dgp-design-ux-timeline__wave-svg--desktop {
        display: none;
    }

    body.page-id-759 #content .dgp-design-ux-timeline__wave-svg--mobile {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-id-759 #content .dgp-design-ux-timeline__wave-line {
        transition: none;
    }
}

body.page-id-759 #content .dgp-design-ux-service-grid--second {
    row-gap: 32px;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service {
    min-height: 0 !important;
    overflow: visible !important;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service > .col-inner {
    min-height: 0 !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service > .col-inner::after {
    display: none !important;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 14px !important;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-image .img-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-image img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-title {
    position: static !important;
    margin: 0 0 8px !important;
    transform: none !important;
    text-align: center !important;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-title h3 {
    color: #243c57 !important;
    font-size: clamp(22px, 2vw, 27px) !important;
    font-weight: 800 !important;
    text-align: center !important;
}

body.page-id-759 #content .dgp-design-ux-service-category-description,
body.page-id-759 #content .dgp-design-ux-service-subtitle,
body.page-id-759 #content .dgp-design-ux-service-description {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    text-align: center !important;
}

body.page-id-759 #content .dgp-design-ux-service-category-description,
body.page-id-759 #content .dgp-design-ux-service-description {
    color: #55514b !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service-description :is(.text-box-content, .text-inner, p) {
    color: #55514b !important;
    text-align: center !important;
}

body.page-id-759 #content .dgp-design-ux-service-subtitle {
    margin-top: 16px !important;
}

body.page-id-759 #content .dgp-design-ux-service-subtitle h4 {
    margin: 0 0 6px !important;
    color: #886244 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

@media (hover: hover) and (pointer: fine) {
    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service:hover .dgp-design-ux-service-description {
        max-height: none;
        opacity: 1;
        transform: none;
        visibility: visible;
    }

    body.page-id-759 #content .dgp-design-ux-service-grid--second .dgp-design-ux-service:hover .dgp-design-ux-service-title h3 {
        color: #243c57 !important;
    }
}

body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:nth-child(2) {
    margin-bottom: 0;
    border-top: 0;
}

body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:nth-child(2) > .col {
    padding: 0 !important;
    border-bottom: 0;
}

body.page-id-759 #content .dgp-design-ux-process > .section-content {
    width: min(100%, var(--dgp-site-max-width));
    padding-inline: 0;
}

body.page-id-759 #content .dgp-design-ux-process h2,
body.page-id-759 #content .dgp-design-ux-process > .section-content > .row:first-child .text-box {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline {
    width: 100%;
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.page-id-759 #content .dgp-design-ux-process h2 {
        max-width: 760px;
        font-size: clamp(32px, 4.2vw, 42px) !important;
        line-height: 1.12 !important;
        text-wrap: balance;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline {
        height: 430px;
        margin-top: 20px;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__steps {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0;
        height: 100%;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd),
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) {
        display: block;
        height: 100%;
        min-height: 0;
        padding: 0 4px;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy {
        position: absolute;
        right: 2px;
        left: 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        text-align: center;
        transform: none;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__copy {
        top: 0;
        bottom: auto;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy {
        top: auto;
        bottom: 0;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__number {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 16px;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy h3 {
        display: -webkit-box;
        width: 100%;
        min-height: 2.5em;
        margin: 8px 0 0 !important;
        overflow: hidden;
        font-size: clamp(13px, 1.5vw, 15px) !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-wrap: balance;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy p {
        position: relative;
        z-index: 2;
        width: min(34ch, calc(100vw - 40px));
        max-width: none;
        max-height: 0;
        margin: 0 !important;
        padding: 0 10px;
        overflow: hidden;
        background: #f7f5f0;
        font-size: 16px !important;
        line-height: 1.5;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: max-height 240ms ease, opacity 180ms ease, transform 220ms ease, visibility 220ms ease;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:hover:not(.is-expanded) .dgp-design-ux-timeline__copy p {
        max-height: 0;
        margin: 0 !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step.is-expanded .dgp-design-ux-timeline__copy p {
        max-height: 8em;
        margin: 8px 0 0 !important;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd).is-expanded .dgp-design-ux-timeline__copy p {
        position: absolute;
        top: 100%;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even).is-expanded .dgp-design-ux-timeline__copy p {
        position: absolute;
        bottom: 100%;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__node {
        display: block;
        top: 226px;
        left: 50%;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__node {
        top: 306px;
        left: 50%;
    }
}

/* Process timeline: navy hierarchy, black copy, and touch-safe disclosure. */
body.page-id-759 #content .dgp-design-ux-process h2 {
    color: #243c57;
}

body.page-id-759 #content .dgp-design-ux-process > .section-content > .row:first-child .text-box,
body.page-id-759 #content .dgp-design-ux-process > .section-content > .row:first-child .text-box p {
    color: #171717 !important;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__number {
    border-color: #243c57 !important;
    color: #243c57 !important;
    background: #f7f5f0 !important;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__node {
    border-color: #243c57 !important;
    background: #f7f5f0 !important;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy h3,
body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy p {
    color: #171717 !important;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:is(.is-expanded, :focus-visible) .dgp-design-ux-timeline__number {
    border-color: #243c57 !important;
    background: #243c57 !important;
    color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:hover .dgp-design-ux-timeline__number,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step.is-wave-hovered .dgp-design-ux-timeline__number {
        border-color: #243c57 !important;
        background: #243c57 !important;
        color: #fff !important;
        box-shadow: 0 10px 24px rgba(36, 60, 87, .2);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:hover .dgp-design-ux-timeline__node,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step.is-wave-hovered .dgp-design-ux-timeline__node {
        border-color: #243c57 !important;
        background: #243c57 !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:hover .dgp-design-ux-timeline__copy h3 {
        color: #243c57 !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline {
        height: auto;
        margin: 30px auto 22px;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave {
        display: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        height: auto;
        padding: 0 24px;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd),
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) {
        position: relative;
        display: block;
        min-height: 116px;
        padding: 20px;
        border: 1px solid rgba(36, 60, 87, .18);
        background: rgba(255, 255, 255, .5);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 0 14px;
        align-items: center;
        text-align: left;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__number {
        grid-row: 1 / span 2;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy h3 {
        min-height: 0;
        margin: 0 !important;
        font-size: 17px !important;
        line-height: 1.35 !important;
        text-align: left !important;
        -webkit-line-clamp: unset;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy p {
        grid-column: 2;
        position: relative !important;
        inset: auto !important;
        width: auto;
        max-width: 42ch;
        padding: 0;
        background: transparent;
        text-align: left !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__node {
        display: none;
    }
}

@media (max-width: 767px) {
    body.page-id-759 #content .dgp-design-ux-process {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    body.page-id-759 #content .dgp-design-ux-process h2 {
        font-size: clamp(30px, 9vw, 42px) !important;
        line-height: 1.12 !important;
        text-align: center;
        text-wrap: balance;
    }

    body.page-id-759 #content .dgp-design-ux-process > .section-content > .row:first-child .text-box {
        padding-inline: 14px;
        text-align: center;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__steps {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd),
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) {
        position: relative;
        display: block;
        width: 100%;
        min-height: 92px;
        padding: 18px;
        border: 1px solid rgba(36, 60, 87, .18);
        background: rgba(255, 255, 255, .55);
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__node {
        display: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 0 12px;
        width: 100%;
        padding: 0;
        align-items: center;
        text-align: left;
        transform: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__number,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__number {
        grid-row: 1 / span 2;
        grid-column: 1;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy h3 {
        grid-column: 2;
        min-width: 0;
        margin: 0 !important;
        font-size: 17px !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy p {
        grid-column: 2 !important;
        position: relative !important;
        inset: auto !important;
        width: auto;
        max-width: 100%;
        padding: 0;
        background: transparent;
        color: #171717 !important;
        font-size: 16px !important;
        font-weight: 500;
        text-align: left !important;
    }
}

body.page-id-759 #content .dgp-design-ux-hero > .section-content {
    padding-inline: 0;
}

body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row {
    width: 100%;
    max-width: var(--dgp-site-max-width);
}

body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) > .section-content {
    width: min(100%, var(--dgp-site-max-width));
    max-width: var(--dgp-site-max-width);
    padding-inline: 0;
}

body.page-id-759 #content .dgp-design-ux-why-visual,
body.page-id-759 #content .dgp-design-ux-why-grid,
body.page-id-759 #content .dgp-design-ux-why-grid--second {
    width: min(100%, var(--dgp-site-max-width)) !important;
    max-width: var(--dgp-site-max-width) !important;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline {
    max-width: var(--dgp-site-max-width);
}

@media (min-width: 850px) {
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline {
        width: min(calc(100% + 60px), var(--dgp-site-max-width));
        margin-right: -30px;
        margin-left: -30px;
    }
}

/* The design-note heading no longer uses decorative rules or a CTA button. */
body.page-id-759 #content .dgp-design-ux-design-note h2,
body.page-id-759 #content .dgp-design-ux-design-note h2 .section-title-main {
    border-bottom: 0 !important;
}

body.page-id-759 #content .dgp-design-ux-design-note h2::after {
    display: none !important;
}

@media (max-width: 849px) {
    body.page-id-759 #content .dgp-design-ux-hero > .section-content {
        padding-inline: 16px;
    }

    body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) > .section-content {
        padding-inline: 18px;
    }

    body.page-id-759 #content .dgp-design-ux-why-visual,
    body.page-id-759 #content .dgp-design-ux-why-grid,
    body.page-id-759 #content .dgp-design-ux-why-grid--second {
        width: min(calc(100% - 30px), var(--dgp-site-max-width)) !important;
    }
}

@media (max-width: 700px) {
    body.page-id-759 #content .dgp-design-ux-why-visual,
    body.page-id-759 #content .dgp-design-ux-why-grid,
    body.page-id-759 #content .dgp-design-ux-why-grid--second {
        width: min(calc(100% - 32px), var(--dgp-site-max-width)) !important;
    }
}

@media (max-width: 767px) {
    body.page-id-759 #content .dgp-design-ux-process > .section-content,
    body.page-id-759 #content .dgp-design-ux-process > .section-content > .row,
    body.page-id-759 #content .dgp-design-ux-process h2,
    body.page-id-759 #content .dgp-design-ux-process > .section-content > .row:first-child .text-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-right: auto;
        margin-left: auto;
        box-sizing: border-box;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy h3,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy p {
        grid-column: 2 !important;
        text-align: left !important;
    }

    body.page-id-759 #content .dgp-design-ux-process h2 {
        padding-inline: 12px;
        font-size: 30px !important;
        overflow-wrap: normal;
    }

    body.page-id-759 #content .dgp-design-ux-process > .section-content > .row:first-child .text-box,
    body.page-id-759 #content .dgp-design-ux-process > .section-content > .row:first-child .text-box p {
        max-width: 34ch;
        padding-inline: 8px;
        font-size: 16px !important;
        line-height: 1.65 !important;
    }
}

    @media (hover: hover) and (pointer: fine) {
        body.page-id-759 #content .dgp-design-ux-services .dgp-design-ux-service:hover {
            background: transparent !important;
            color: #243c57 !important;
            transform: translateY(-4px);
        }

        body.page-id-759 #content .dgp-design-ux-services .dgp-design-ux-service:hover :is(h3, .section-title-main) {
            color: #243c57;
        }

        body.page-id-759 #content .dgp-design-ux-services .dgp-design-ux-service:hover p {
            color: #55514b !important;
        }
    }

    @media (min-width: 551px) {
        body.page-id-759 #content .dgp-design-ux-services .dgp-design-ux-service-image {
            width: calc(100% - 12px) !important;
            margin-right: 6px !important;
            margin-left: 6px !important;
        }

        body.page-id-759 #content .dgp-design-ux-services .dgp-design-ux-service-title {
            width: calc(100% - 12px) !important;
            margin-right: 6px !important;
            margin-left: 6px !important;
        }
    }

/* Make the design-service hero meet the menu and span the viewport. */
body.page-id-759 #content > .dgp-design-ux-hero {
    width: 100vw;
    max-width: none;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    background: #1e2a6e !important;
}

body.page-id-759 #content > .dgp-design-ux-hero > .section-content {
    width: 100%;
    max-width: none !important;
    margin: 0;
    padding: 0 !important;
}

body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row {
    width: 100%;
    max-width: none;
    min-height: clamp(500px, 63vh, 680px);
    margin: 0;
    gap: 0;
}

body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row > .col {
    padding-top: 36px;
    padding-bottom: 36px;
}

body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row > .dgp-design-ux-hero-copy {
    padding-right: clamp(28px, 5vw, 88px);
    padding-left: clamp(28px, 5vw, 88px);
}

body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row > .dgp-design-ux-hero-image {
    padding-right: 0;
    padding-left: 0;
}

body.page-id-759 #content .dgp-design-ux-hero-image > .col-inner {
    height: 100%;
}

body.page-id-759 #content .dgp-design-ux-hero-image .img {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    box-shadow: none;
}

body.page-id-759 #content .dgp-design-ux-hero-image .img-inner {
    height: 100%;
    aspect-ratio: auto;
}

body.page-id-759 #content .dgp-design-ux-hero-image .img-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 849px) {
    body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row {
        min-height: 0;
    }

    body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row > .dgp-design-ux-hero-copy {
        padding: 40px 24px 28px;
    }

    body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row > .dgp-design-ux-hero-image {
        padding: 0;
    }

    body.page-id-759 #content .dgp-design-ux-hero-image > .col-inner {
        height: auto;
    }

    body.page-id-759 #content .dgp-design-ux-hero-image .img {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:first-child,
body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:first-child > .col,
body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:first-child :is(.title, .text-box) {
    text-align: center !important;
}

body.page-id-759 #content .dgp-design-ux-services .dgp-design-ux-service-title,
body.page-id-759 #content .dgp-design-ux-services .dgp-design-ux-service-title .section-title-main,
body.page-id-759 #content .dgp-design-ux-services .dgp-design-ux-service-category-description,
body.page-id-759 #content .dgp-design-ux-services .dgp-design-ux-service-category-description p {
    text-align: center !important;
}

body.page-id-759 #content {
    --dgp-service-mist: #f3f4f5;
    --dgp-service-sage: #f5f5f5;
    --dgp-service-paper: #f7f5f0;
    --dgp-service-navy: #243c57;
    --dgp-service-ink: #374b5a;
    --dgp-service-copy: #4d5961;
}

body.page-id-759 #content :is(.dgp-design-ux-intro, .dgp-design-ux-services, .dgp-design-ux-why, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) {
    background-image: none !important;
    color: var(--dgp-service-ink);
}

body.page-id-759 #content .dgp-design-ux-intro,
body.page-id-759 #content .dgp-design-ux-intro > .section-bg {
    background: #fff !important;
}

body.page-id-759 #content .dgp-design-ux-services,
body.page-id-759 #content .dgp-design-ux-services > .section-bg,
body.page-id-759 #content .dgp-design-ux-gallery,
body.page-id-759 #content .dgp-design-ux-gallery > .section-bg {
    background-color: var(--dgp-service-mist) !important;
}

body.page-id-759 #content .dgp-design-ux-why,
body.page-id-759 #content .dgp-design-ux-why > .section-bg,
body.page-id-759 #content .dgp-design-ux-design-note,
body.page-id-759 #content .dgp-design-ux-design-note > .section-bg {
    background-color: var(--dgp-service-paper) !important;
}

body.page-id-759 #content .dgp-design-ux-process,
body.page-id-759 #content .dgp-design-ux-process > .section-bg {
    background-color: var(--dgp-service-sage) !important;
}

body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) > .section-bg {
    overflow: hidden;
    isolation: isolate;
    background-image: none !important;
}

body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) > .section-bg::after {
    position: absolute;
    z-index: 1;
    inset: -24% -18%;
    background:
        radial-gradient(ellipse at 22% 42%, rgba(88, 94, 102, .07) 0%, transparent 36%),
        radial-gradient(ellipse at 76% 62%, rgba(126, 126, 126, .045) 0%, transparent 34%);
    content: "";
    opacity: .8;
    pointer-events: none;
    transform: translate3d(-2.5%, 0, 0);
}

body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) > .section-content {
    position: relative;
    z-index: 2;
}

body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) > .section-content > .row:first-child :is(h2, .section-title-main) {
    color: var(--dgp-service-navy);
}

body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why, .dgp-design-ux-gallery) > .section-content > .row:first-child .text-box,
body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-text p,
body.page-id-759 #content .dgp-design-ux-gallery .text-box,
body.page-id-759 #content .dgp-design-ux-design-note .text-box {
    color: var(--dgp-service-copy) !important;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave {
    background-color: transparent;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave-line {
    stroke: #293992;
}

@media (prefers-reduced-motion: no-preference) {
    body.page-id-759 #content .dgp-design-ux-services > .section-bg::after {
        animation: dgp-design-ux-water-drift 28s cubic-bezier(.45, 0, .55, 1) infinite alternate;
    }
}

@keyframes dgp-design-ux-water-drift {
    from {
        transform: translate3d(-2.5%, -1%, 0) scale(1);
    }

    to {
        transform: translate3d(2.5%, 1%, 0) scale(1.025);
    }
}

@media (max-width: 849px) {
    body.page-id-759 #content .dgp-design-ux-intro,
    body.page-id-759 #content .dgp-design-ux-intro > .section-bg {
        background: var(--dgp-service-paper) !important;
    }

    body.page-id-759 #content .dgp-design-ux-services > .section-bg::after {
        opacity: .45;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-id-759 #content .dgp-design-ux-services > .section-bg::after {
        animation: none;
        transform: none;
    }
}

body.page-id-759 #content .dgp-design-ux-hero,
body.page-id-759 #content .dgp-design-ux-hero > .section-bg,
body.page-id-759 #content .dgp-design-ux-intro,
body.page-id-759 #content .dgp-design-ux-intro > .section-bg {
    background-color: #fff !important;
    background-image: none !important;
}

body.page-id-759 #content .dgp-design-ux-services,
body.page-id-759 #content .dgp-design-ux-services > .section-bg,
body.page-id-759 #content .dgp-design-ux-process,
body.page-id-759 #content .dgp-design-ux-process > .section-bg,
body.page-id-759 #content .dgp-design-ux-design-note,
body.page-id-759 #content .dgp-design-ux-design-note > .section-bg {
    background-color: #f3f4f5 !important;
    background-image: none !important;
}

body.page-id-759 #content .dgp-design-ux-hero-copy > .col-inner {
    background: #fff !important;
}

body.page-id-759 #content .dgp-design-ux-hero h1 {
    color: #243c57;
}

body.page-id-759 #content .dgp-design-ux-hero .lead,
body.page-id-759 #content .dgp-design-ux-hero .lead p {
    color: #4d5961 !important;
}

body.page-id-759 #content .dgp-design-ux-why,
body.page-id-759 #content .dgp-design-ux-why > .section-bg,
body.page-id-759 #content .dgp-design-ux-gallery,
body.page-id-759 #content .dgp-design-ux-gallery > .section-bg {
    background-color: #fff !important;
    background-image: none !important;
}

body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) > .section-bg::after {
    display: none !important;
}

body.page-id-759 #content .dgp-design-ux-why > .section-bg,
body.page-id-759 #content .dgp-design-ux-process > .section-bg,
body.page-id-759 #content .dgp-design-ux-gallery > .section-bg,
body.page-id-759 #content .dgp-design-ux-design-note > .section-bg {
    background-image: none !important;
}

body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy p {
    background: transparent !important;
}

body.page-id-759 #content .dgp-design-ux-why .dgp-before-after figcaption {
    background: transparent !important;
}

body.page-id-759 #content :is(
    .dgp-design-ux-hero-image .img,
    .dgp-design-ux-service-image,
    .dgp-design-ux-why-card-image,
    .dgp-design-ux-process-photo .img,
    .dgp-design-ux-gallery .img,
    .dgp-design-ux-design-note .img
) {
    box-shadow: 0 16px 34px rgba(20, 35, 52, .2), 0 4px 10px rgba(20, 35, 52, .1) !important;
}

@media (max-width: 767px) {
    body.page-id-759 #content :is(
        .dgp-design-ux-hero-image .img,
        .dgp-design-ux-service-image,
        .dgp-design-ux-why-card-image,
        .dgp-design-ux-process-photo .img,
        .dgp-design-ux-gallery .img,
        .dgp-design-ux-design-note .img,
        .dgp-before-after
    ),
    body.page-id-759 #content :is(
        .dgp-design-ux-hero-image .img-inner,
        .dgp-design-ux-service-image .img-inner,
        .dgp-design-ux-why-card-image .img-inner,
        .dgp-design-ux-process-photo .img-inner,
        .dgp-design-ux-gallery .img-inner,
        .dgp-design-ux-design-note .img-inner,
        .dgp-before-after img
    ),
    body.page-id-759 #content :is(
        .dgp-design-ux-hero-image img,
        .dgp-design-ux-service-image img,
        .dgp-design-ux-why-card-image img,
        .dgp-design-ux-process-photo img,
        .dgp-design-ux-gallery img,
        .dgp-design-ux-design-note img
    ) {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    body.page-id-759 #content :is(
        .dgp-design-ux-services,
        .dgp-design-ux-why,
        .dgp-design-ux-process,
        .dgp-design-ux-gallery,
        .dgp-design-ux-design-note
    ) :is(p, li, figcaption, .text-box, .icon-box-text, .dgp-design-ux-service-description) {
        color: #171717 !important;
    }

    body.page-id-759 #content :is(
        .dgp-design-ux-services,
        .dgp-design-ux-why,
        .dgp-design-ux-process,
        .dgp-design-ux-gallery,
        .dgp-design-ux-design-note
    ) :is(h2, h3, h4, h5, h6, .section-title-main, a:not(.button), .dgp-design-ux-service-title) {
        color: #243c57;
    }

    body.page-id-759 #content .dgp-design-ux-hero :is(h1, h2, h3, p, .section-title-main, .lead) {
        color: #fff;
    }

    body.page-id-759 #content .dgp-before-after__label {
        color: #fff !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero-copy h1,
    body.page-id-759 #content .dgp-design-ux-hero-copy h1 .section-title-main,
    body.page-id-759 #content .dgp-design-ux-services .dgp-design-ux-service-title .section-title-main,
    body.page-id-759 #content .dgp-design-ux-gallery .text-box strong {
        color: #243c57;
    }

    body.page-id-759 #content .dgp-design-ux-hero-copy .lead,
    body.page-id-759 #content .dgp-design-ux-hero .lead .text-box-content,
    body.page-id-759 #content .dgp-design-ux-hero .lead .text-box-content p,
    body.page-id-759 #content .dgp-design-ux-hero .lead .text-inner,
    body.page-id-759 #content .dgp-design-ux-hero .lead .text-inner p,
    body.page-id-759 #content .dgp-design-ux-why-grid .icon-box-text p {
        color: #171717 !important;
    }

    body.page-id-759 #content .dgp-design-ux-services .dgp-design-ux-service > .col-inner,
    body.page-id-759 #content .dgp-design-ux-gallery .col > .col-inner {
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
}

/* Entrance choreography stays page-scoped and starts only after JS is ready. */
@media (prefers-reduced-motion: no-preference) {
    body.page-id-759 #content[data-design-motion-ready="true"] .dgp-design-ux-motion-target {
        opacity: 0;
        filter: blur(7px);
        transform: translate3d(0, 26px, 0);
        transition:
            opacity 560ms cubic-bezier(.16, 1, .3, 1) var(--dgp-motion-delay, 0ms),
            filter 560ms cubic-bezier(.16, 1, .3, 1) var(--dgp-motion-delay, 0ms),
            transform 720ms cubic-bezier(.16, 1, .3, 1) var(--dgp-motion-delay, 0ms);
        will-change: opacity, filter, transform;
    }

    body.page-id-759 #content[data-design-motion-ready="true"] .dgp-design-ux-motion-target.is-in-view {
        opacity: 1;
        filter: blur(0);
        transform: none;
        will-change: auto;
    }

    body.page-id-759 #content[data-design-motion-ready="true"] .dgp-design-ux-hero-image .img {
        transform: translate3d(26px, 0, 0) scale(1.015);
    }

    body.page-id-759 #content[data-design-motion-ready="true"] .dgp-design-ux-hero-image .img.is-in-view {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-id-759 #content .dgp-design-ux-motion-target {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Tablet composition: preserve the two-column editorial rhythm without cramped edges. */
@media (min-width: 768px) and (max-width: 849px) {
    body.page-id-759 #content > .dgp-design-ux-hero > .section-content,
    body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) > .section-content {
        padding-inline: 24px !important;
    }

    body.page-id-759 #content .dgp-design-ux-why-visual,
    body.page-id-759 #content .dgp-design-ux-why-grid,
    body.page-id-759 #content .dgp-design-ux-why-grid--second {
        width: min(calc(100% - 48px), 1400px) !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row > .dgp-design-ux-hero-copy {
        padding: 44px 30px 36px !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero h1 {
        max-width: 15ch;
        font-size: clamp(38px, 5.5vw, 46px) !important;
    }

    body.page-id-759 #content .dgp-design-ux-services > .section-content > .row:nth-child(2),
    body.page-id-759 #content .dgp-design-ux-gallery > .section-content > .row:last-child {
        row-gap: 20px;
    }
}

/* Mobile keeps a consistent 16px safety gutter and a clear one-column reading flow. */
@media (max-width: 767px) {
    body.page-id-759 #content > .dgp-design-ux-hero > .section-content,
    body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) > .section-content {
        padding-inline: max(16px, env(safe-area-inset-left)) !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero > .section-content > .row > .dgp-design-ux-hero-copy {
        padding: 32px 16px 26px !important;
    }

    body.page-id-759 #content .dgp-design-ux-why-visual,
    body.page-id-759 #content .dgp-design-ux-why-grid,
    body.page-id-759 #content .dgp-design-ux-why-grid--second {
        width: min(calc(100% - 32px), 1400px) !important;
    }
}

/* Final responsive cascade: the process reads as one continuous, expanding chain. */
@media (max-width: 1023px) {
    body.page-id-759 #content {
        --dgp-service-ink: #101820;
        --dgp-service-navy: #243c57;
        --dgp-service-paper: #ffffff;
    }

    body.page-id-759 #content :is(.dgp-design-ux-hero, .dgp-design-ux-services, .dgp-design-ux-why, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) :is(p, li, h1, h2, h3, h4, h5, h6, strong, .text-box, .icon-box-text) { color: var(--dgp-service-ink); }
    body.page-id-759 #content :is(.dgp-design-ux-hero h1, .dgp-design-ux-process h2, .dgp-design-ux-services h2, .dgp-design-ux-why h2, .dgp-design-ux-gallery h2, .dgp-design-ux-design-note h2) { color: var(--dgp-service-navy); }
    body.page-id-759 #content :is(.dgp-design-ux-hero .button, .dgp-design-ux-design-note .button) { color: #293992; }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline { position: relative; width: 100%; height: auto !important; margin: 28px auto 12px !important; padding: 0 !important; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__node { display: none !important; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__steps { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; width: min(100%, 720px) !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; list-style: none; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd),
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) { position: relative; display: block !important; width: 100% !important; min-height: 72px !important; height: auto !important; margin: 0 !important; padding: 0 0 18px 62px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; cursor: pointer; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step::before { position: absolute; z-index: 1; top: 2px; left: 0; display: block; width: 38px; height: 38px; border: 2px solid var(--dgp-service-navy); border-radius: 50%; background: var(--dgp-service-paper); content: ''; transition: background-color 220ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1); }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step::after { position: absolute; z-index: 0; top: 40px; bottom: 0; left: 18px; width: 2px; background: var(--dgp-service-navy); content: ''; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:last-child::after { display: none; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy { position: relative !important; display: block !important; width: 100% !important; padding: 6px 0 0 !important; text-align: left !important; transform: none !important; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__number,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__number { position: absolute !important; z-index: 2; top: 13px; left: -62px; display: grid !important; width: 38px !important; height: 18px !important; place-items: center; border: 0 !important; background: transparent !important; color: var(--dgp-service-navy) !important; font-size: 11px !important; font-weight: 800; line-height: 1; letter-spacing: .02em; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy h3 { min-height: 40px !important; margin: 0 !important; color: var(--dgp-service-navy) !important; font-size: 18px !important; font-weight: 700; line-height: 1.35 !important; text-align: left !important; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy p { position: relative !important; display: block !important; max-width: 56ch !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color: var(--dgp-service-ink) !important; font-size: 16px !important; font-weight: 400; line-height: 1.65 !important; opacity: 0; transform: translateY(-6px); transition: opacity 180ms ease, transform 260ms ease; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step.is-expanded::before { background: var(--dgp-service-navy); box-shadow: 0 8px 18px rgba(36, 60, 87, .2); transform: scale(1.08); }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step.is-expanded .dgp-design-ux-timeline__number { color: #ffffff !important; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step.is-expanded .dgp-design-ux-timeline__copy p { max-height: 12rem !important; margin-top: 8px !important; opacity: 1; transform: none; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:focus-visible { outline: 3px solid var(--dgp-service-navy); outline-offset: 5px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.page-id-759 #content .dgp-design-ux-process > .section-content { padding-inline: 24px !important; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__steps { max-width: 680px !important; }
}

@media (max-width: 767px) {
    body.page-id-759 #content > .dgp-design-ux-hero > .section-content,
    body.page-id-759 #content :is(.dgp-design-ux-services, .dgp-design-ux-why, .dgp-design-ux-process, .dgp-design-ux-gallery, .dgp-design-ux-design-note) > .section-content { padding-inline: max(8px, env(safe-area-inset-left)) !important; }
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__steps { padding-inline: 8px !important; }
}

@media (max-width: 1023px) {
    body.page-id-759 #content[data-design-motion-ready="true"] .dgp-design-ux-motion-target {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero-copy > .col-inner {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero-copy :is(h1, p, .lead, .text-box) {
        color: var(--dgp-service-navy);
        opacity: 1 !important;
        filter: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero-copy .lead,
    body.page-id-759 #content .dgp-design-ux-hero-copy .lead p {
        color: var(--dgp-service-ink) !important;
    }
}

/* Desktop recovery: pin the intended horizontal process geometry and keep the
   first service message visible even if an entrance observer fires late. */
@media (min-width: 1024px) {
    body.page-id-759 #content .dgp-design-ux-hero,
    body.page-id-759 #content .dgp-design-ux-hero > .section-bg,
    body.page-id-759 #content .dgp-design-ux-hero-copy > .col-inner {
        background: #ffffff !important;
    }

    body.page-id-759 #content .dgp-design-ux-hero h1,
    body.page-id-759 #content .dgp-design-ux-hero h1 .section-title-main {
        display: block !important;
        visibility: visible !important;
        color: #243c57;
    }

    body.page-id-759 #content .dgp-design-ux-hero .lead,
    body.page-id-759 #content .dgp-design-ux-hero .lead p {
        display: block !important;
        visibility: visible !important;
        color: #101820 !important;
    }

    body.page-id-759 #content[data-design-motion-ready="true"] .dgp-design-ux-motion-target,
    body.page-id-759 #content .dgp-design-ux-hero-copy > .col-inner {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline {
        width: min(100%, 1440px) !important;
        height: 520px !important;
        max-height: 520px;
        margin: 28px auto 38px !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__steps {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        grid-auto-rows: 520px;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd),
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) {
        display: block !important;
        height: 520px !important;
        min-height: 0 !important;
        padding: 0 8px !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__copy,
    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy {
        position: absolute !important;
        right: 4px !important;
        left: 4px !important;
        display: flex !important;
        align-items: center;
        opacity: 1 !important;
        filter: none !important;
        text-align: center !important;
        transform: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(odd) .dgp-design-ux-timeline__copy {
        top: 0 !important;
        bottom: auto !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__step:nth-child(even) .dgp-design-ux-timeline__copy {
        top: auto !important;
        bottom: 0 !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__copy p {
        max-height: none !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    body.page-id-759 #content .dgp-design-ux-process .dgp-design-ux-timeline__wave {
        display: block !important;
        top: 220px !important;
        height: 100px !important;
        opacity: 1 !important;
    }
}

/* UX Builder accordion: customers can edit every process title and paragraph
   as native Builder items. The linked, vertical reading mode is reserved for
   touch widths where the former horizontal timeline became fragile. */
body.page-id-759 #content .dgp-design-ux-process-accordion {
    margin: 34px 0 0;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item {
    border-color: rgba(36, 60, 87, .24);
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title {
    color: #243c57 !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner,
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner p {
    color: #101820 !important;
    font-size: 16px;
    line-height: 1.65;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .toggle {
    color: #243c57 !important;
}

@media (min-width: 1024px) {
    body.page-id-759 #content .dgp-design-ux-process-accordion {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 48px;
        border-top: 1px solid rgba(36, 60, 87, .28);
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item {
        min-height: 86px;
        margin: 0;
    }
}

@media (max-width: 1023px) {
    body.page-id-759 #content .dgp-design-ux-process-accordion {
        position: relative;
        margin: 28px 0 0;
        padding-left: 56px;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion::before {
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 18px;
        width: 2px;
        background: #243c57;
        content: "";
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item {
        position: relative;
        margin: 0;
        border: 0;
        border-bottom: 1px solid rgba(36, 60, 87, .24);
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item::before {
        position: absolute;
        z-index: 1;
        top: 14px;
        left: -48px;
        display: grid;
        width: 20px;
        height: 20px;
        border: 2px solid #243c57;
        border-radius: 50%;
        background: #ffffff;
        content: "";
        transition: background-color 220ms ease, transform 220ms ease;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item:has(.accordion-title.active)::before {
        background: #243c57;
        transform: scale(1.14);
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title {
        padding: 13px 0 14px;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner {
        padding: 0 0 20px;
    }
}

@media (max-width: 767px) {
    body.page-id-759 #content .dgp-design-ux-process > .section-content {
        padding-inline: 0 !important;
    }

    body.page-id-759 #content .dgp-design-ux-process > .section-content > .row {
        width: 100% !important;
        margin-inline: 0 !important;
    }

    body.page-id-759 #content .dgp-design-ux-process > .section-content > .row > .col {
        padding-inline: 8px !important;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion {
        padding-left: 48px;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion::before {
        left: 15px;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item::before {
        left: -42px;
    }
}

/* The process stays fully editable in UX Builder: native accordion + image columns. */
body.page-id-759 #content .dgp-design-ux-process-layout {
    align-items: center;
    row-gap: 24px;
}

body.page-id-759 #content .dgp-design-ux-process-layout > .col {
    padding-bottom: 0;
}

body.page-id-759 #content .dgp-design-ux-process-steps {
    min-width: 0;
}

body.page-id-759 #content .dgp-design-ux-process-accordion {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 0 0 54px;
    border: 0;
}

body.page-id-759 #content .dgp-design-ux-process-accordion::before {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 18px;
    width: 2px;
    background: #243c57;
    content: "";
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item {
    position: relative;
    min-width: 0;
    min-height: 66px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid rgba(36, 60, 87, .24);
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item::before {
    position: absolute;
    z-index: 1;
    top: 22px;
    left: -45px;
    width: 20px;
    height: 20px;
    border: 2px solid #243c57;
    border-radius: 50%;
    background: #f7f5f0;
    content: "";
    transition: background-color 220ms ease, transform 220ms ease;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item:has(.accordion-title.active)::before {
    background: #243c57;
    transform: scale(1.12);
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title {
    position: relative;
    display: flex;
    min-height: 65px;
    align-items: center;
    padding: 14px 0 14px 36px !important;
    color: #243c57 !important;
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: 1.45;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title > span {
    display: block;
    min-width: 0;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle {
    position: absolute;
    top: 50%;
    right: auto;
    left: 0;
    display: grid;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    color: #243c57 !important;
    transform: translateY(-50%);
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle i {
    display: none !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle::before {
    display: block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: rotate(-45deg);
    transition: transform 200ms ease;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title.active .toggle::before {
    transform: rotate(45deg);
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner {
    padding: 0 12px 18px 36px;
}

body.page-id-759 #content .dgp-design-ux-process-photo .img {
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
    margin: 0 !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(36, 60, 87, .09) !important;
    transition: box-shadow 200ms ease, transform 200ms ease;
}

body.page-id-759 #content .dgp-design-ux-process-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
    body.page-id-759 #content .dgp-design-ux-process-photo .img:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 32px rgba(36, 60, 87, .15) !important;
    }
}

@media (max-width: 767px) {
    body.page-id-759 #content .dgp-design-ux-process-layout > .col {
        flex-basis: 100%;
        max-width: 100%;
    }

    body.page-id-759 #content .dgp-design-ux-process-photo .img {
        aspect-ratio: 4 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item::before,
    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle::before,
    body.page-id-759 #content .dgp-design-ux-process-photo .img {
        transition: none;
    }
}

/* Design service visual theme: warm, editorial, and consistent with the showroom brand. */
body.page-id-759 #content {
    --dgp-ink: #252923;
    --dgp-muted: #5f665e;
    --dgp-forest: #263a32;
    --dgp-forest-soft: #345247;
    --dgp-cream: #f7f5ef;
    --dgp-sage: #dfe7df;
    --dgp-clay: #b96f52;
    --dgp-clay-dark: #95523d;
    color: var(--dgp-ink);
    font-family: "Plus Jakarta Sans", "Be Vietnam Pro", Arial, sans-serif !important;
}

body.page-id-759 #content :is(h1, h2, h3, h4, h5, h6,
    .section-title, .section-title-main, .button, button, input, select, textarea) {
    font-family: "Plus Jakarta Sans", "Be Vietnam Pro", Arial, sans-serif !important;
}

body.page-id-759 #content :is(.dgp-design-ux-hero, .dgp-design-ux-services,
    .dgp-design-ux-why, .dgp-design-ux-difference, .dgp-design-ux-process,
    .dgp-design-ux-gallery, .dgp-design-ux-design-note) {
    color: var(--dgp-ink);
}

body.page-id-759 #content > .dgp-design-ux-hero {
    background: linear-gradient(108deg, var(--dgp-cream) 0%, #fff 58%) !important;
}

body.page-id-759 #content .dgp-design-ux-hero h1 {
    color: var(--dgp-forest);
    font-size: clamp(42px, 5vw, 68px) !important;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.025em;
}

body.page-id-759 #content .dgp-design-ux-hero h1 .section-title-main::after {
    background: var(--dgp-clay) !important;
}

body.page-id-759 #content .dgp-design-ux-hero .lead :is(.text, .text-inner, p) {
    color: var(--dgp-muted) !important;
    font-size: clamp(17px, 1.35vw, 20px) !important;
    line-height: 1.75 !important;
}

body.page-id-759 #content :is(.dgp-design-ux-intro, .dgp-design-ux-services,
    .dgp-design-ux-process, .dgp-design-ux-design-note) {
    background: var(--dgp-cream) !important;
}

body.page-id-759 #content :is(.dgp-design-ux-intro, .dgp-design-ux-services,
    .dgp-design-ux-why, .dgp-design-ux-process, .dgp-design-ux-gallery,
    .dgp-design-ux-design-note) h2 {
    color: var(--dgp-forest);
    font-size: clamp(32px, 4.1vw, 58px) !important;
    line-height: 1.1 !important;
    font-weight: 800;
    letter-spacing: -0.02em;
}

body.page-id-759 #content :is(.text-box, .text-box p, .text-inner, .text-inner p,
    .accordion-inner, .dgp-design-ux-gallery .text-box) {
    color: var(--dgp-muted) !important;
    font-size: clamp(16px, 1.15vw, 18px) !important;
    line-height: 1.75 !important;
}

body.page-id-759 #content .dgp-design-ux-services .dgp-design-ux-service {
    background: #fff !important;
    border: 1px solid #d8ded7;
    box-shadow: 0 12px 30px rgba(38, 58, 50, 0.07);
}

body.page-id-759 #content .dgp-design-ux-services :is(h3, h4, .icon-box-text h3, .icon-box-text h5) {
    color: var(--dgp-forest) !important;
    font-size: clamp(21px, 1.8vw, 27px) !important;
    line-height: 1.25 !important;
    font-weight: 700;
}

body.page-id-759 #content .dgp-design-ux-difference,
body.page-id-759 #content .dgp-design-ux-difference > .section-bg {
    background: var(--dgp-forest) !important;
}

body.page-id-759 #content .dgp-design-ux-difference :is(h2, h3) {
    color: #fff;
}

body.page-id-759 #content .dgp-design-ux-difference :is(.text-box, .text-box p, .text-inner, .text-inner p) {
    color: #dfe8e0 !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion :is(.accordion-title, .toggle) {
    color: var(--dgp-forest) !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion::before,
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item::before {
    border-color: var(--dgp-forest) !important;
    background-color: var(--dgp-cream);
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item:has(.accordion-title.active)::before {
    background: var(--dgp-forest) !important;
}

body.page-id-759 #content :is(.button, button, input[type="submit"], input[type="button"]) {
    min-height: 52px;
    padding: 14px 24px;
    border: 1px solid var(--dgp-clay-dark) !important;
    border-radius: 2px !important;
    background: var(--dgp-clay) !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    box-shadow: none;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

body.page-id-759 #content :is(.button, button, input[type="submit"], input[type="button"]):hover {
    border-color: var(--dgp-clay-dark) !important;
    background: var(--dgp-clay-dark) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

body.page-id-759 #content .button.is-outline,
body.page-id-759 #content .button.button--outline {
    border-color: var(--dgp-forest) !important;
    background: transparent !important;
    color: var(--dgp-forest) !important;
}

body.page-id-759 #content .button.is-outline:hover,
body.page-id-759 #content .button.button--outline:hover {
    background: var(--dgp-forest) !important;
    color: #fff !important;
}

body.page-id-759 #content :is(input, select, textarea):focus {
    border-color: var(--dgp-forest) !important;
    box-shadow: 0 0 0 3px rgba(52, 82, 71, 0.14) !important;
}

/* Final process visual pass: simple reference-style accordion. */
body.page-id-759 #content .dgp-design-ux-process-accordion {
    --dgp-process-blue: #293992;
}
body.page-id-759 #content .dgp-design-ux-process-accordion::before {
    top: 0;
    bottom: 0;
    width: 2px;
    background: #293992 !important;
}
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item {
    border-bottom-color: #c6cbd3;
}
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item::before {
    width: 20px;
    height: 20px;
    border: 2px solid #293992 !important;
    background: #f7f8fa !important;
    box-shadow: none !important;
}
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item:has(.accordion-title.active)::before {
    border-color: #293992 !important;
    background: #293992 !important;
}
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title {
    min-height: 66px;
    color: #193b5e !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 18px;
    font-weight: 700;
}
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title.active {
    background: #eef0f3 !important;
    box-shadow: inset 0 1px 0 #293992 !important;
    color: #193b5e !important;
}
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle,
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title.active .toggle {
    background: transparent !important;
    color: #293992 !important;
}
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle::before,
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title.active .toggle::before {
    border-color: #293992 !important;
}
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner {
    margin: 0 0 18px 36px;
    padding: 0 12px 0 0 !important;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #193b5e !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner p {
    margin: 0;
    color: #193b5e !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}
@media (min-width: 768px) {
    body.page-id-759 #content .dgp-design-ux-process-photo {
        padding-top: clamp(32px, 4vw, 54px) !important;
    }
}

/* Final alignment override. */
@media (min-width: 768px) {
    body.page-id-759 #content .dgp-design-ux-process-layout > .col,
    body.page-id-759 #content .dgp-design-ux-process-photo {
        padding-top: 0 !important;
        align-self: flex-start !important;
    }

    body.page-id-759 #content .dgp-design-ux-process-photo .img {
        margin-top: 0 !important;
    }
}

/* Final toggle reset: no brown frame, only the blue chevron. */
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle,
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title.active .toggle {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle::before {
    width: 8px !important;
    height: 8px !important;
    border-width: 1px !important;
    border-color: #293992 !important;
}

/* No gold active/focus frame. */
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title,
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title.active,
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title:focus,
body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title.active {
    background: #eef0f3 !important;
    box-shadow: inset 0 1px 0 #293992 !important;
}

/* Keep the narrow process timeline compact and give expanded copy a clear grid. */
@media (max-width: 1023px) {
    body.page-id-759 #content .dgp-design-ux-process-accordion {
        padding-left: 44px;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion::before {
        left: 14px;
        top: 24px;
        bottom: 24px;
        background: #293992;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item {
        min-height: 68px;
        border-bottom-color: rgba(41, 57, 146, .18);
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item::before {
        top: 24px;
        left: -38px;
        width: 18px;
        height: 18px;
        border-color: #293992;
        box-shadow: 0 0 0 5px #f3f4f5;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item:has(.accordion-title.active) {
        border-bottom-color: rgba(41, 57, 146, .34);
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item:has(.accordion-title.active)::before {
        background: #293992;
        box-shadow: 0 0 0 5px #f3f4f5, 0 5px 14px rgba(41, 57, 146, .2);
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title {
        min-height: 68px;
        padding: 14px 8px 14px 28px !important;
        font-size: clamp(16px, 2vw, 18px);
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title .toggle {
        left: 0;
        width: 20px;
        height: 20px;
        color: #293992 !important;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner {
        max-width: 62ch;
        margin: 0 0 16px 28px;
        padding: 12px 16px !important;
        border-left: 2px solid rgba(41, 57, 146, .3);
        background: rgba(255, 255, 255, .72);
        color: #253047 !important;
        font-size: 15px;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner p {
        margin: 0;
        color: inherit !important;
        font-size: inherit;
        line-height: inherit;
    }
}

@media (max-width: 767px) {
    body.page-id-759 #content .dgp-design-ux-process-accordion {
        padding-left: 38px;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion::before {
        left: 12px;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-item::before {
        left: -32px;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-title {
        padding-left: 26px !important;
    }

    body.page-id-759 #content .dgp-design-ux-process-accordion .accordion-inner {
        margin-left: 26px;
        padding: 10px 12px !important;
        font-size: 14px;
    }
}

/* Editorial redesign for the design-service closing statement. */
body.page-id-759 #content .dgp-design-ux-design-note {
    padding: clamp(64px, 7vw, 104px) 24px !important;
    background: #f3f4f5 !important;
}

body.page-id-759 #content .dgp-design-ux-design-note > .section-content {
    width: min(100%, 1320px) !important;
    max-width: 1320px !important;
    padding: 0 !important;
}

body.page-id-759 #content .dgp-design-ux-design-note > .section-content > .row {
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.page-id-759 #content .dgp-design-ux-design-note > .section-content > .row > .col {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-id-759 #content .dgp-design-ux-design-note > .section-content > .row > .col:first-child {
    padding-right: clamp(0px, 1.5vw, 22px) !important;
}

body.page-id-759 #content .dgp-design-ux-design-note > .section-content > .row > .col:first-child > .col-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

body.page-id-759 #content .dgp-design-ux-design-note h2 {
    width: 100%;
    max-width: 16ch;
    margin: 0 !important;
    color: #293992 !important;
    font-size: clamp(38px, 4.1vw, 58px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em;
    text-transform: uppercase;
    text-wrap: balance;
}

body.page-id-759 #content .dgp-design-ux-design-note h2::after {
    display: block;
    width: min(100%, 560px);
    height: 1px;
    margin-top: 10px;
    background: rgba(41, 57, 146, .24);
    content: "";
}

body.page-id-759 #content .dgp-design-ux-design-note .text-box {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    max-width: 54ch;
    margin: 0;
    transform: none !important;
    color: #414856 !important;
    font-size: 17px !important;
    line-height: 1.8 !important;
}

body.page-id-759 #content .dgp-design-ux-design-note .button {
    min-height: 52px;
    margin: 0 !important;
    padding: 14px 23px !important;
    border: 1px solid #293992 !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: #293992 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    box-shadow: 0 8px 18px rgba(25, 37, 90, .08);
    transition: color 220ms ease, background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

body.page-id-759 #content .dgp-design-ux-design-note .button:hover,
body.page-id-759 #content .dgp-design-ux-design-note .button:focus-visible {
    background: #293992 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(25, 37, 90, .16);
}

body.page-id-759 #content .dgp-design-ux-design-note .img {
    width: 100%;
    min-height: 0 !important;
    aspect-ratio: 3 / 2;
    border-radius: 2px;
    background: #e5e7eb;
    box-shadow: 0 22px 44px rgba(22, 31, 54, .18), 0 4px 12px rgba(22, 31, 54, .08) !important;
}

body.page-id-759 #content .dgp-design-ux-design-note .img-inner,
body.page-id-759 #content .dgp-design-ux-design-note .img img {
    width: 100%;
    height: 100%;
}

body.page-id-759 #content .dgp-design-ux-design-note .img img {
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) and (pointer: fine) {
    body.page-id-759 #content .dgp-design-ux-design-note .img:hover img {
        transform: scale(1.025);
    }
}

@media (max-width: 849px) {
    body.page-id-759 #content .dgp-design-ux-design-note {
        padding: 64px 22px !important;
    }

    body.page-id-759 #content .dgp-design-ux-design-note > .section-content > .row {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    body.page-id-759 #content .dgp-design-ux-design-note > .section-content > .row > .col:first-child {
        padding-right: 0 !important;
    }

    body.page-id-759 #content .dgp-design-ux-design-note h2 {
        max-width: 16ch;
        font-size: clamp(34px, 7vw, 46px) !important;
    }

    body.page-id-759 #content .dgp-design-ux-design-note .text-box {
        max-width: 60ch;
        font-size: 16px !important;
    }

    body.page-id-759 #content .dgp-design-ux-design-note .img {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 480px) {
    body.page-id-759 #content .dgp-design-ux-design-note {
        padding: 52px 18px !important;
    }

    body.page-id-759 #content .dgp-design-ux-design-note > .section-content > .row {
        gap: 26px;
    }

    body.page-id-759 #content .dgp-design-ux-design-note h2 {
        font-size: clamp(30px, 9vw, 38px) !important;
    }

    body.page-id-759 #content .dgp-design-ux-design-note .button {
        width: 100%;
        padding-inline: 14px !important;
    }
}

body.page-id-759 #content:not(#dgp-color-override) .section .section-content .section-title:is(h1, h2),
body.page-id-759 #content:not(#dgp-color-override) .section .section-content .section-title:is(h1, h2) .section-title-main {
    color: #293992;
}

@media (prefers-reduced-motion: no-preference) {
    body.page-id-759 #content .dgp-design-reveal {
        animation: dgp-design-reveal 850ms cubic-bezier(.2,.7,.2,1) both;
        animation-delay: var(--dgp-reveal-delay, 0ms);
    }
    body.page-id-759 #content .dgp-design-ux-service > .col-inner,
    body.page-id-759 #content .dgp-design-ux-gallery .img img {
        transition: transform 420ms ease, box-shadow 420ms ease;
    }
    body.page-id-759 #content .dgp-design-ux-service:hover > .col-inner {
        transform: translateY(-5px);
    }
    body.page-id-759 #content .dgp-design-ux-gallery .img:hover img {
        transform: scale(1.035);
    }
}

@keyframes dgp-design-reveal {
    from { translate: 0 24px; clip-path: inset(0 0 12% 0); }
    to { translate: 0 0; clip-path: inset(0); }
}

/* Add breathing room to multiline section titles, including the page hero. */
body.page-id-759 #content :is(
    .dgp-design-ux-hero h1,
    .dgp-design-ux-services h2,
    .dgp-design-ux-why h2,
    .dgp-design-ux-process h2,
    .dgp-design-ux-gallery h2,
    .dgp-design-ux-design-note h2
) :is(.section-title-main),
body.page-id-759 #content :is(
    .dgp-design-ux-hero h1,
    .dgp-design-ux-services h2,
    .dgp-design-ux-why h2,
    .dgp-design-ux-process h2,
    .dgp-design-ux-gallery h2,
    .dgp-design-ux-design-note h2
) {
    line-height: 1.24 !important;
}

@media (max-width: 849px) {
    body.page-id-759 #content :is(
        .dgp-design-ux-hero h1,
        .dgp-design-ux-services h2,
        .dgp-design-ux-why h2,
        .dgp-design-ux-process h2,
        .dgp-design-ux-gallery h2,
        .dgp-design-ux-design-note h2
    ) {
        line-height: 1.2 !important;
    }
}

@media (min-width: 850px) {
    body.page-id-759 #content .dgp-design-ux-why > .section-content > .row:first-child {
        width: 100%;
        max-width: 1320px;
    }

    body.page-id-759 #content .dgp-design-ux-why > .section-content > .row:first-child h2,
    body.page-id-759 #content .dgp-design-ux-why > .section-content > .row:first-child h2 .section-title-main {
        max-width: none !important;
        white-space: nowrap;
        font-size: clamp(30px, 3.2vw, 48px) !important;
        line-height: 1.2 !important;
    }
}