/* Selective additions: retain the original studio direction. */
.web-mosaic-stage{min-width:0;position:relative;padding:65px 0 85px 20px;align-self:center;width:100%;isolation:isolate}
.web-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:15px;transform:rotate(-8deg);margin-right:-4%;position:relative}
.web-mosaic a{position:relative;display:block;box-shadow:4px 18px 25px #122c392b;transition:transform .45s cubic-bezier(.2,.7,.2,1);overflow:hidden;background:#d2dde1;aspect-ratio:1.28}
.web-mosaic a:nth-child(even){transform:translateY(40px)}
.web-mosaic a:hover{transform:translateY(-8px)}.web-mosaic a:nth-child(even):hover{transform:translateY(32px)}
.web-mosaic img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}.web-mosaic a:hover img{transform:scale(1.025)}
.web-mosaic a>span{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#102733eb;color:#fff;font-size:11px;opacity:0;transition:opacity .2s}.web-mosaic a:hover>span,.web-mosaic a:focus-visible>span{opacity:1}.web-mosaic a>span>b{font-size:20px;font-weight:400}
.design-hero-foot.mosaic-footer p{font-size:12px;color:#415f6e}.mosaic-footer>span{font:9px monospace;letter-spacing:.04em;color:#516e7c}.web-design-hero .design-hero-grid{grid-template-columns:.95fr 1.05fr;gap:4%;overflow:visible}.web-design-hero{overflow:hidden}
.design-edition .edition-plans .plan-pair>article{display:flex;flex-direction:column;align-items:flex-start}.design-edition .edition-plans .plan-pair .plan-action{display:flex;justify-content:space-between;align-items:center;min-height:58px;padding:18px 24px;gap:22px;font-size:14px;font-weight:600;line-height:1.5;border:1px solid #143c4f;border-radius:2px;margin-top:30px;transition:background .2s,color .2s,transform .2s;width:100%;max-width:410px;text-align:left;white-space:normal}
.design-edition .edition-plans .plan-action-primary{background:#143c4f;color:#fff}.design-edition .edition-plans .plan-action-secondary{background:#fff;color:#143c4f}.design-edition .edition-plans .plan-pair .plan-action:hover{background:#185f7d;border-color:#185f7d;color:#fff;transform:translateY(-2px)}
.atelier-site .footer-form-link{display:inline-flex;align-items:center;border:1px solid #3a5c6a;border-radius:2px;padding:12px 16px;color:#153b4d;font-size:12px;line-height:1.5;background:transparent;white-space:nowrap}.atelier-site .footer-form-link:hover{background:#153b4d;color:#fff}
/* Form remains the only contact route, including failure states. */
#contact-retry{padding:12px 16px;border:1px solid #8cb6c8;color:#d9f0f8;min-height:44px;margin-top:12px}.contact-dialog #contact-mode-note{color:#bacbd5}.contact-dialog .solid-btn:disabled{opacity:1;background:#30454f;color:#d7e3e9}
/* The pale IoT section previously inherited pale text from the dark page. */
.atelier-iot .easy-iot{color:#153544}.atelier-iot .easy-iot .section-top h2,.atelier-iot .easy-iot .field-console h3,.atelier-iot .easy-iot .field-story-phone h3{color:#153544}
.atelier-iot .easy-iot .section-top .eyebrow,.atelier-iot .easy-iot .field-console>.eyebrow{color:#32647c}
.atelier-iot .easy-iot .section-top p,.atelier-iot .easy-iot .vision-lead,.atelier-iot .easy-iot .field-caption,.atelier-iot .easy-iot .illustration-note{color:#415e6d}
.atelier-iot .easy-iot .vision-status{color:#2c5368}.atelier-iot .easy-iot .vision-steps button{color:#294f63;background:#f3f7f8;border-color:#708e9d}.atelier-iot .easy-iot .vision-steps button[aria-pressed=true]{background:#173f55;color:#fff;border-color:#173f55}
.atelier-iot .easy-iot .vision-screen{color:#e7f3f8}.atelier-iot .easy-iot .vision-route{color:#d0e4ed}.atelier-iot .easy-iot .notice-card{color:#163c4c}
/* Four task flows, taken from the alternative and fitted to this studio. */
.workflow-demo{background:#10212b;color:#e8f2f5}.workflow-demo .section-top{margin-bottom:48px}.workflow-demo .section-top h2{font-size:clamp(32px,4vw,60px);font-weight:500;line-height:1.35;margin-top:20px}.workflow-demo .section-top>p{font-size:14px;color:#aec5d0;max-width:390px}.workflow-demo .section-top .eyebrow{color:#99cadd;margin-bottom:15px}.workflow-demo .app-playground{display:grid;grid-template-columns:280px 1fr;gap:45px}
.workflow-demo .app-tabs{display:flex;flex-direction:column}.workflow-demo .app-tabs button{display:grid;grid-template-columns:27px 1fr;gap:3px 10px;text-align:left;padding:24px 17px;border-top:1px solid #65869470;color:#ecf5f8;transition:background .2s}.workflow-demo .app-tabs button>span{grid-row:1/3;font-size:11px;color:#98b8c9;padding-top:3px}.workflow-demo .app-tabs strong{font-size:18px;font-weight:500}.workflow-demo .app-tabs small{font-size:12px;color:#a7beca;line-height:1.7}.workflow-demo .app-tabs button[aria-pressed=true]{background:#d9edf4;color:#143545;border-color:#d9edf4}.workflow-demo .app-tabs button[aria-pressed=true] small,.workflow-demo .app-tabs button[aria-pressed=true]>span{color:#3c6376}.workflow-demo .app-tabs button:hover:not([aria-pressed=true]){background:#1c3542}
.workflow-demo .app-demo-screen{background:#f2f5f3;color:#163643;border-radius:4px;overflow:hidden;min-height:465px}.workflow-demo .screen-top{display:flex;justify-content:space-between;gap:12px;padding:17px 25px;border-bottom:1px solid #c9d8dc;font-size:10px;color:#52717f}.workflow-demo .window-dots{letter-spacing:4px;color:#698b9b}.workflow-demo #app-demo-content{padding:35px 40px}.workflow-demo .demo-app-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.workflow-demo .demo-app-heading h3{font-size:27px}.workflow-demo .demo-app-heading>span{font-size:10px;border-radius:20px;padding:6px 12px;background:#d7e8e9;color:#385f6a}.workflow-demo .demo-task{background:#fff;border:1px solid #bfcfd5;padding:23px;margin:23px 0}.workflow-demo .demo-task h4{font-size:18px;font-weight:500;margin:0 0 15px}.workflow-demo .demo-task p{font-size:14px;color:#3d5a69}.workflow-demo .task-detail{display:flex;justify-content:space-between;gap:20px;margin-top:18px;padding-top:17px;border-top:1px solid #d5e0e2;font-size:13px}.workflow-demo .button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;background:#185f7d;color:#fff;border:1px solid #185f7d;padding:15px 22px;font-size:13px;min-height:48px;line-height:1.5;transition:background .2s}.workflow-demo .button:hover{background:#103d52}.workflow-demo .button>span{font-size:21px}.workflow-demo .demo-status{font-size:12px;color:#325f52;line-height:1.9;margin-top:20px;min-height:24px}.workflow-demo select{display:block;width:100%;background:white;color:#183e50;border:1px solid #9cb4bf;padding:12px;margin-top:12px}.workflow-demo .plain-explanation{font-size:13px;line-height:2;color:#a8c3d0;margin-top:34px;max-width:780px}.workflow-demo .plain-explanation strong{color:#e7f2f7}
@media(max-width:1100px){.web-mosaic-stage{padding:65px 0 75px}.web-mosaic{gap:10px}.web-mosaic a:nth-child(even){transform:translateY(25px)}.workflow-demo .app-playground{grid-template-columns:240px 1fr;gap:28px}.workflow-demo .app-tabs strong{font-size:16px}}
@media(max-width:800px){.workflow-demo .app-playground{grid-template-columns:1fr;gap:24px}.workflow-demo .app-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.workflow-demo .app-tabs button{padding:18px 15px}.workflow-demo .section-top{display:block}.workflow-demo .section-top>p{margin-top:25px}.mosaic-footer>span{font-size:8px}.design-hero-foot.mosaic-footer p{font-size:10px}}
@media(max-width:600px){.web-design-hero .design-hero-grid{display:flex;gap:0}.web-mosaic-stage{padding:45px 0 60px;width:calc(100% + 5%)}.web-mosaic{gap:10px;margin-right:-6%;margin-left:0}.web-mosaic a{aspect-ratio:1.18}.web-mosaic a:nth-child(even){transform:translateY(25px)}.web-mosaic a>span{font-size:8px;padding:7px;left:7px;right:7px;bottom:7px}.web-mosaic a>span>b{font-size:12px}.design-hero-foot.mosaic-footer{gap:12px}.design-hero-foot.mosaic-footer p{font-size:11px;line-height:1.9}.design-edition .edition-plans .plan-pair .plan-action{font-size:13px;min-height:56px;padding:17px 19px;max-width:none}.workflow-demo .section-top{margin-bottom:28px}.workflow-demo .section-top h2{font-size:32px}.workflow-demo .section-top>p{font-size:12px}.workflow-demo .app-tabs button{grid-template-columns:22px 1fr;padding:15px 10px;gap:2px 5px}.workflow-demo .app-tabs strong{font-size:13px}.workflow-demo .app-tabs small{font-size:10px}.workflow-demo .app-tabs button>span{font-size:9px}.workflow-demo .screen-top{padding:14px 17px;font-size:8px}.workflow-demo #app-demo-content{padding:25px 20px}.workflow-demo .demo-app-heading h3{font-size:22px}.workflow-demo .demo-app-heading>span{font-size:8px;white-space:nowrap;padding:6px 8px}.workflow-demo .demo-task{padding:17px;margin:20px 0}.workflow-demo .demo-task h4{font-size:16px}.workflow-demo .demo-task p{font-size:12px}.workflow-demo .task-detail{font-size:11px;gap:10px}.workflow-demo .demo-status{font-size:11px}.workflow-demo .plain-explanation{font-size:12px}.atelier-site .footer-form-link{font-size:12px;padding:12px 16px}.atelier-site .site-head .brand{font-size:22px}}
@media(prefers-reduced-motion:reduce){.web-mosaic a,.web-mosaic img,.workflow-demo *{transition:none!important}}
/* Keep the black/blue palette; use separate ink tones on pale and dark surfaces. */
.atelier-site .skip{background:#163f53;color:#fff}
.atelier-site .site-head nav .package-nav{color:#1b6586}
.atelier-site .package-footer-link span,.atelier-site .package-footer-link p{color:#415e6d}
.atelier-site .atelier-footer .footer-cta span{color:#1d7697}
.atelier-site .work-info p span{color:#9aadb8}
.atelier-hero-copy .eyebrow{color:#386373}
.atelier-services .section-top .eyebrow{color:#3c667b}
.service-tabs>button>span{color:#47616e}.service-tabs small{color:#4b6470}
.web-visual>span{color:#3e515a}.lab-art-caption{color:#081f2b}.lab-letter span{color:#fff}
.design-hero-copy .eyebrow{color:#3c6376}
.web-edition .edition-collection .collection-index{color:#9bb6c3}
.design-edition .manifesto-label,.design-edition .manifesto-label .eyebrow{color:#365d70}
.design-edition .manifesto-body>p,.design-edition .craft-steps p{color:#415d6d}
.design-edition .craft-steps article>span{color:#365d70}
.design-edition .manifesto-body h2 span{color:#1e7294}
.design-edition .edition-plans .plan-pair>article>span{color:#366074}
.design-edition .edition-plans .plan-pair p{color:#415d6d}
.design-edition .edition-plans .plan-pair .plan-action{margin-top:auto}
/* Small UI labels must remain readable inside the phone mockups. */
.atelier-app .app-copy-foot,.atelier-app .app-editorial-bottom>span{color:#97afbd}
.atelier-app .app-scene-controls button>span,.atelier-app .app-scene-controls button p,.atelier-app .app-scene-controls button>i{color:#9ab5c7}
.atelier-app .screen-bottom{opacity:1}.atelier-app .screen-bottom .selected{background:transparent}
.atelier-app .screen-chat .screen-bottom{color:#466373}
.atelier-app .screen-booking .screen-bottom{color:#506b70}
.atelier-app .screen-members>span,.atelier-app .thread-date>span,.atelier-app .message-person,.atelier-app .studio-message.mine>small,.atelier-app .message-reaction{color:#466373}
.atelier-app .message-person small{opacity:1}.atelier-app .screen-members i:nth-child(2){color:#294931}
.atelier-app .chat-screen-title h2 span{color:#466373}
.atelier-app .screen-booking .screen-brand>b>span{color:#48727a}.atelier-app .booking-total{color:#416d78}
.atelier-app .booking-week>span:not(.selected){color:#526b70}
.atelier-app .booking-slot>time{color:#506870}
.atelier-app .booking-slot>div>span,.atelier-app .booking-slot small,.atelier-app .booking-slot small>i{color:#46606a}
.workflow-demo .window-dots{color:#55717e}
.atelier-app .prototype-section .section-top .eyebrow{color:#365b70}
.atelier-app .prototype-section .section-top p,.atelier-app .prototype-section .section-top p span,
.atelier-app .prototype-section .work-info p,.atelier-app .prototype-section .work-info p span,
.atelier-app .prototype-section .work-desc,.atelier-app .prototype-section .consumer-intro p,
.atelier-app .prototype-section .consumer-intro span,.atelier-app .prototype-section .demo-note,.atelier-app .prototype-section .demo-note span{color:#415d6d}
.atelier-work .collection-index{color:#527d90}.atelier-work .collection-index span{color:#466675}
.atelier-work .intro-foot p span{color:#4b6370}
/* Pricing is intentionally detailed; secondary information needs real contrast. */
.package-edition .package-design-hero .design-hero-copy>small,
.package-edition .object-label,.package-edition .object-angle,.package-edition .price-mast-label,
.package-edition .masthead-tax,.package-edition .masthead-tax b,
.package-edition .masthead-includes>span,.package-edition .masthead-includes p,.package-edition .masthead-small,
.package-edition .package-pricing .package-section-head>p,
.package-edition .package-cap p,.package-edition .package-price-row div:first-child>span,
.package-edition .package-price-row small,.package-edition .package-external p,
.package-edition .package-receipt-top>span,.package-edition .package-estimate-total>span,.package-edition .package-receipt>p,
.package-edition .package-assurance .package-section-head>p,
.package-edition .assurance-zero>small,.package-edition .assurance-zero>span,
.package-edition .package-assurance-body p,.package-edition .package-process li>span,.package-edition .package-process p,
.package-edition .package-faq summary span,.package-edition .package-faq details p{color:#415f70}
.package-edition .package-cap strong>span,.package-edition .package-cap strong>b small{color:#28637b}
.atelier-iot .cost-reasons article>span{color:#27556d}
.atelier-lab .industry-field label span,.atelier-lab .contact-footnote{color:#a6bfcc}
/* Image-backed demo copy has a local dark scrim, independent of the selected image. */
.atelier-lab .sample-shade,.atelier-lab .lab[data-theme=bold] .sample-shade,.atelier-lab .lab[data-theme=warm] .sample-shade{background:linear-gradient(90deg,#071d2ccb,#071d2c35 82%),linear-gradient(180deg,#071d2c77,transparent 35%,transparent 70%,#071d2c77)}
.atelier-lab .sample-nav,.atelier-lab .sample-copy,.atelier-lab .sample-index{text-shadow:0 1px 8px #071d2c99}
.atelier-site:not(.atelier-app):not(.atelier-iot) .package-nav{color:#1b6586!important}
.web-edition .edition-collection .collection-index span{color:#9bb6c3}
.design-edition .edition-plans .plan-pair>article>small{margin-bottom:26px}
.atelier-lab .sample-copy{width:84%;right:7%}.atelier-lab .sample-copy h3{max-width:100%}
@media(max-width:600px){.atelier-lab .sample-copy{width:84%;left:8%;right:8%}.atelier-lab .sample-copy h3{font-size:clamp(26px,7.5vw,42px)}}
.design-edition .edition-plans .plan-pair>article>p.fine{margin-bottom:28px}