/* Graphic design and UI service. Native interactions; no external runtime. */
.services-overview .hub-area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.graphic-board{padding:34px;background:#202b48;color:#fff;border-radius:18px;box-shadow:0 30px 65px -40px #202b48}
.graphic-board-top,.graphic-board-bottom{display:flex;justify-content:space-between;gap:15px;font-size:11px;letter-spacing:.04em}
.graphic-board>strong{font-size:116px;line-height:1.3;display:block;color:#fff;letter-spacing:-.06em}
.graphic-board>strong span{color:#ffb805}.graphic-board>p{font-size:29px;line-height:1.25;color:#fff;margin:0 0 30px}
.graphic-swatches{display:flex;gap:12px;margin:25px 0 32px}.graphic-swatches span{width:56px;height:56px;border-radius:50%;background:#ffb805}.graphic-swatches span:nth-child(2){background:#a6b4d6}.graphic-swatches span:nth-child(3){background:#f0eafa}.graphic-swatches span:nth-child(4){background:#fff}
.graphic-leaf>div{display:flex;gap:8px}.graphic-leaf>div span{width:18px;height:18px;border-radius:4px;background:#4b5c92}.graphic-leaf>div span:nth-child(2){background:#ffb805}.graphic-leaf>div span:nth-child(3){background:#a6b4d6}
.ui-page [hidden]{display:none!important}.ui-page{--ui-border:#dce2ee;--ui-muted:#536078;--ui-yellow:#ffb805;--ui-ink:#202b48}
.ui-page button{font:inherit;cursor:pointer;letter-spacing:normal;text-transform:none;line-height:1.4;min-height:44px;touch-action:manipulation}
.ui-page button,.ui-page a,.ui-page summary{-webkit-tap-highlight-color:transparent}
.ui-page :is(a,button,summary,[tabindex]):focus-visible{outline:3px solid #202b48;outline-offset:4px;box-shadow:0 0 0 4px #fff}
.ui-page .pd-hero-grid{gap:45px;grid-template-columns:1fr 1.12fr}.ui-page .pd-hero{padding-bottom:65px}
.ui-page .pd-hero h1{font-size:clamp(34px,3.8vw,53px);line-height:1.13}.ui-page .pd-hero h1 span{margin-top:22px;line-height:1.25}
.ui-page .ui-hero-note{margin-top:24px;color:#536078;font-size:12px}
.ui-studio{background:#fff;border:1px solid #dce2ee;border-radius:18px;overflow:hidden;box-shadow:0 25px 65px -35px #344a7680}
.ui-studio-head{display:flex;align-items:center;gap:9px;padding:17px 20px;border-bottom:1px solid #e5e9f1;font-size:11px;color:#536078}
.ui-studio-dot{width:8px;height:8px;background:#4b5c92;border-radius:50%;flex:none}.ui-pill{margin-left:auto;white-space:nowrap;background:#f0f2f8;color:#38466b;border-radius:6px;padding:4px 8px;font-size:10px}
.ui-preview-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 20px;font-size:11px;color:#536078}
.ui-preview-controls>div{display:flex;padding:3px;background:#edf0f6;border-radius:9px;gap:3px}.ui-preview-controls button{border:0;background:transparent;color:#3d4961;border-radius:6px;padding:8px 10px;font-size:12px}.ui-preview-controls button[aria-pressed=true]{color:#fff;background:#4b5c92;box-shadow:0 2px 4px #202b481a}
.ui-preview-stage{padding:8px 18px 20px;min-height:374px;background:linear-gradient(#fff,#f5f6fb);display:flex;align-items:flex-start;justify-content:center}
.ui-preview{width:100%;max-width:480px;background:#fff;border:1px solid #dce2ee;border-radius:12px;overflow:hidden;transition:max-width .35s ease,box-shadow .25s ease;box-shadow:0 12px 28px -21px #202b4890}
.ui-preview.is-compact{max-width:285px}.ui-preview-brand{padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:15px}.ui-preview-brand strong{font-size:17px}.ui-preview-brand strong span{color:#a76f00}.ui-preview-brand>span{font-size:10px;color:#536078}
.ui-preview-picture{line-height:0}.ui-preview-picture svg{display:block;width:100%;height:auto;max-height:145px}
.ui-preview-body{padding:20px;display:grid;grid-template-columns:minmax(0,1fr) 137px;gap:17px;align-items:center}
.ui-preview.is-compact .ui-preview-body{grid-template-columns:1fr}
.ui-page .ui-preview h2{font-size:22px;line-height:1.2;margin:6px 0 10px;letter-spacing:-.02em}
.ui-page .ui-preview-body p{font-size:12px;line-height:1.7;color:#536078;margin:0}
.ui-page .ui-preview-body .ui-kicker{font-size:9px;letter-spacing:.1em;color:#4b5c92}
.ui-preview-action>span{display:block;font-size:10px;margin-bottom:9px;color:#536078}
.ui-preview-action button{display:block;width:100%;background:#202b48;color:#fff;border:1px solid #202b48;border-radius:8px;padding:10px 7px;font-size:12px;transition:background .18s}
.ui-preview-action button[aria-pressed=true]{background:#e8eef8;color:#202b48;border-color:#afbdd5}
.ui-save-icon{display:inline-block;font-size:16px;vertical-align:middle;line-height:1}.ui-save-icon.is-animated{animation:ui-check .3s ease-out}
.ui-page .ui-preview-body #ui-save-status{font-size:10px;min-height:34px;margin-top:10px;line-height:1.6}
.ui-page .ui-demo-caption{font-size:11px;padding:14px 20px;margin:0;color:#536078;border-top:1px solid #e5e9f1;line-height:1.6}
.ui-section-nav{display:flex;flex-wrap:wrap;gap:7px 23px;padding-block:20px;border-bottom:1px solid #dce2ee}
.ui-section-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:#39496e;text-decoration:none;border-bottom:1px solid transparent}.ui-section-nav a:hover{border-color:currentColor}
.ui-intro{display:grid;grid-template-columns:1fr 1.4fr;gap:70px}
.ui-principles{padding:70px 0;background:#202b48;color:#fff}.ui-page .ui-principles h2,.ui-page .ui-principles h3{color:#fff}.ui-page .ui-principles .pd-eyebrow{color:#ffcf60}
.ui-principle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 35px;margin-top:42px}
.ui-principle-grid article{position:relative;border-top:1px solid #586079;padding-top:25px}.ui-principle-grid svg{width:30px;height:30px;color:#ffcf60;margin-bottom:20px}
.ui-number{font-size:10px;letter-spacing:.09em;color:#526284}.ui-principle-grid .ui-number{position:absolute;right:0;top:32px;color:#b9c6e2}
.ui-page .ui-principle-grid h3{font-size:21px;line-height:1.35;margin:0 0 14px}.ui-page .ui-principle-grid p{color:#d6ddeb;font-size:14px;line-height:1.85;margin:0}
.ui-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px;margin-top:35px}.ui-project{border:1px solid #dce2ee;border-radius:12px;overflow:hidden;background:#fff}
.ui-project figure{margin:0;position:relative;background:#f2f4f9;overflow:hidden}.ui-project img{display:block;width:100%;height:auto;aspect-ratio:580/400;object-fit:contain}
.ui-page .ui-enlarge{display:flex;justify-content:space-between;align-items:center;border:0;border-top:1px solid #dce2ee;width:100%;padding:10px 18px;background:#f5f6fa;color:#304365;font-size:12px;text-align:left;transition:background .2s}
.ui-enlarge:hover{background:#e9edf6}.ui-project-copy{padding:25px}.ui-page .ui-project-copy .pd-eyebrow{font-size:10px;margin-bottom:12px}.ui-page .ui-project-copy h3{font-size:23px;margin:0 0 15px;line-height:1.25}.ui-page .ui-project-copy p{font-size:14px;color:#536078;line-height:1.8}
.ui-project-lesson{border-top:1px solid #dce2ee;padding-top:18px;margin-top:22px}.ui-project-lesson>strong{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#34476d}.ui-page .ui-project-lesson p{margin:10px 0 0;font-size:13px}
.ui-lab-band{background:#f0f3f9}.ui-lab-heading{display:flex;align-items:center;justify-content:space-between;gap:25px}.ui-page .ui-motion{flex:none;border:1px solid #697997;color:#263b60;border-radius:25px;background:#fff;padding:11px 18px;font-size:12px}.ui-motion[aria-pressed=true]{background:#202b48;color:white}
.ui-page .ui-motion-status{color:#536078;font-size:12px;min-height:20px;margin-top:14px}
.ui-lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}.ui-demo{padding:28px;background:#fff;border:1px solid #dce2ee;border-radius:12px}.ui-page .ui-demo h3{font-size:23px;line-height:1.3;margin:15px 0}.ui-page .ui-demo p{font-size:14px;color:#536078;line-height:1.8}.ui-page .ui-demo a{font-size:13px;min-height:44px;display:inline-flex;align-items:center}.ui-page .ui-demo-why{font-size:12px;border-top:1px solid #dce2ee;margin-top:23px;padding-top:18px}
.ui-reveal button{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid #b8c3d7;border-radius:8px;background:#f4f6fa;color:#253b60;font-size:12px;padding:12px;width:100%;text-align:left}
.ui-reveal button span{font-size:19px;transition:transform .25s}.ui-reveal.is-open button span{transform:rotate(45deg)}
.ui-reveal.is-ready #ui-reveal-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .28s ease,visibility .28s;opacity:0}
.ui-reveal.is-ready.is-open #ui-reveal-panel{grid-template-rows:1fr;visibility:visible;opacity:1}
#ui-reveal-panel>div{min-height:0;overflow:hidden}.ui-page #ui-reveal-panel p{font-size:13px;margin:15px 0 0}
.ui-deliverables{margin-top:40px;border:1px solid #dce2ee;border-radius:10px}.ui-deliverables caption{text-align:left;font-weight:700;padding:20px;color:#202b48}.ui-deliverables th[scope=row]{font-size:14px;text-align:left}
.ui-evidence{background:#f3f5f9;padding:65px 0}.ui-service-facts{margin:0 0 24px}.ui-service-facts>div{border-bottom:1px solid #d4dce9;padding:0 0 15px;margin-bottom:15px}.ui-service-facts dt{font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:#384a6e}.ui-service-facts dd{font-size:14px;margin:7px 0 0;color:#536078;line-height:1.8}
.ui-page .ui-dialog{box-sizing:border-box;border:1px solid #dce2ee;border-radius:16px;padding:24px;width:min(760px,calc(100% - 36px));max-height:90vh;overflow:auto;background:#fff;color:#202b48;box-shadow:0 20px 70px #111b3750}
.ui-dialog::backdrop{background:#101a36bf}.ui-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.ui-page .ui-dialog-head h2{font-size:24px;margin:0}.ui-dialog button{border:1px solid #71809e;color:#202b48;background:white;border-radius:8px;padding:9px 15px;font-size:13px}.ui-dialog img{display:block;width:100%;max-width:580px;height:auto;margin:auto}.ui-page .ui-dialog>p{font-size:12px;color:#536078;line-height:1.6;margin:18px 0 0}
.ui-dialog[open]{animation:ui-dialog-in .2s ease-out}
.ui-skip{position:fixed;top:10px;left:10px;transform:translateY(-200%);z-index:100000;background:#202b48;color:#fff;padding:14px 20px}.ui-skip:focus{transform:none;color:#fff;outline:3px solid #ffb805}
@keyframes ui-check{0%{transform:scale(.6) rotate(-20deg)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes ui-dialog-in{from{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:none}}
.ui-page.ui-reduce-motion *,.ui-page.ui-reduce-motion *::before,.ui-page.ui-reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.ui-page *,.ui-page *::before,.ui-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:1050px){.ui-page .pd-hero-grid{grid-template-columns:1fr;gap:35px}.ui-studio{max-width:620px;width:100%;margin:auto}.ui-intro{gap:30px}.ui-projects,.ui-lab-grid{gap:15px}.ui-project-copy,.ui-demo{padding:22px}.ui-page .ui-project-copy h3,.ui-page .ui-demo h3{font-size:21px}}
@media(max-width:780px){.ui-projects,.ui-lab-grid{grid-template-columns:1fr}.ui-project{display:grid;grid-template-columns:1fr 1.1fr}.ui-project figure{align-self:start}.ui-principle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-lab-heading{align-items:start;flex-direction:column}}
@media(max-width:680px){.services-overview .hub-area-grid,.ui-intro{grid-template-columns:1fr}.ui-section-nav{gap:0 19px}.ui-page .pd-hero{padding-bottom:35px}.ui-intro{gap:22px}.ui-principles,.ui-evidence{padding-block:45px}.ui-principle-grid{gap:30px 22px}.ui-page .ui-principle-grid h3{font-size:19px}.ui-page .ui-principle-grid p{font-size:13px}.ui-project{display:block}.graphic-board{padding:25px}.ui-page .ui-dialog{padding:18px}}
@media(max-width:430px){.ui-preview-body{grid-template-columns:1fr;padding:17px}.ui-preview-stage{padding:8px 12px 16px}.ui-preview-controls{padding:12px}.ui-studio-head{padding:14px 12px;font-size:10px}.ui-preview-action>span{display:none}.ui-page .ui-preview-body #ui-save-status{min-height:0}.ui-preview-action button{width:auto;min-width:150px}.ui-principle-grid{grid-template-columns:1fr}.ui-preview-controls button{padding:8px}.ui-page .pd-hero h1{font-size:36px}}

/* Keep the visual board within narrow grid tracks. */
.graphic-page .pd-hero-grid>div{min-width:0}
.graphic-swatches span{flex:1 1 0;min-width:0;max-width:56px;width:auto;height:auto;aspect-ratio:1}