/* S1 Frosted atelier: three scopes remain visible without interaction. */
.atelier { --shadow: 0 18px 65px -25px #34465733; --ease: cubic-bezier(.22,.8,.22,1); color: #192024; }
.atelier { max-width: 1540px; padding: 70px 5vw 55px; margin: auto; }
.atelier .section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.atelier .eyebrow { font-size: 10px; letter-spacing: 0.14em; font-weight: 500; }
.atelier .section-intro h2 { font-size: 32px; line-height: 1.6; font-weight: 500; letter-spacing: -0.06em; margin-top: 14px; }
.atelier .section-intro > p { font-size: 12px; line-height: 1.9; color: var(--muted); padding-bottom: 5px; }
.atelier .service-label { display: flex; gap: 12px; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; }
.atelier .service-label > span { font-size: 9px; font-family: Arial, sans-serif; letter-spacing: 0.05em; color: rgb(138, 149, 157); }
.atelier h3 { font-size: 28px; line-height: 1.65; font-weight: 500; letter-spacing: -0.045em; }
.atelier .glass-surface { background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55)); box-shadow: inset 0 1px 1px #fff,var(--shadow); backdrop-filter: blur(24px) saturate(1.12); border-radius: 24px; }
.atelier .ambient { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(60px); z-index: 0; }
.atelier .ambient-a { width: 500px; height: 500px; background: radial-gradient(rgba(204, 220, 229, 0.667), rgba(216, 233, 222, 0.376) 40%, rgba(255, 255, 255, 0) 70%); left: -120px; top: 120px; }
.atelier .ambient-b { width: 600px; height: 600px; background: radial-gradient(rgba(217, 211, 226, 0.44), rgba(238, 223, 199, 0.376) 30%, rgba(255, 255, 255, 0) 75%); right: -60px; top: -70px; }
.atelier .frosted-chip { background: linear-gradient(125deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.66)); box-shadow: rgba(40, 55, 69, 0.082) 0px 10px 24px, rgb(255, 255, 255) 0px 1px 0px inset; backdrop-filter: blur(16px); border-radius: 14px; }

.atelier .scope-list { padding: 0px; margin: 0px; list-style: none; font-size: 10px; line-height: 2.1; color: rgb(88, 99, 107); }
.atelier .scope-list li::before { content: "·"; display: inline-block; margin-right: 7px; color: rgb(136, 150, 159); font-size: 13px; }
.atelier .estimate { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 32px; padding: 20px; border-radius: 14px; background: rgb(247, 248, 249); }
.atelier .estimate p { font-size: 12px; line-height: 1.8; color: rgb(102, 112, 120); }
.atelier .estimate strong { font-weight: 500; color: rgb(48, 56, 63); margin-left: 3px; }
.atelier .estimate > span:last-child { font-size: 10px; color: rgb(116, 125, 131); line-height: 1.8; }
.atelier .atelier-field { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; position: relative; padding: 16px; border-radius: 32px; background: linear-gradient(130deg, rgb(239, 243, 246), rgb(245, 245, 246) 47%, rgb(242, 241, 237)); isolation: isolate; }
.atelier .atelier-launch,
.atelier .atelier-right { position: relative; min-width: 0px; }
.atelier .atelier-launch { overflow: hidden; padding: 30px 32px 24px; display: flex; flex-direction: column; }
.atelier .atelier-launch-copy h3 { margin: 18px 0px 12px; }
.atelier .atelier-launch-copy > p:last-child { max-width: 370px; font-size: 12px; color: rgb(92, 102, 112); line-height: 1.9; }
.atelier .atelier-store { margin: 26px 0px 22px; position: relative; min-height: 238px; display: flex; justify-content: center; }
.atelier .atelier-store .store-visual { width: 330px; transform: perspective(1000px) rotateY(-8deg) rotateZ(-3deg); box-shadow: rgba(38, 59, 80, 0.4) 12px 20px 30px -16px; transition: transform .6s var(--ease); }
.atelier .atelier-launch:hover .atelier-store .store-visual { transform: perspective(1000px) rotateY(-2deg) rotateZ(-1deg); }
.atelier .floating-chip { position: absolute; font-size: 8px; letter-spacing: 0.1em; padding: 14px 16px; right: 0px; bottom: 22px; transform: rotate(3deg); }
.atelier .atelier-launch-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; }
.atelier .atelier-right { display: grid; grid-template-rows: 1.07fr 1fr; gap: 22px; }
.atelier .atelier-renew { padding: 28px 28px 22px; display: grid; grid-template-columns: 1fr; gap: 16px; overflow: hidden; }
.atelier .compact-copy h3 { font-size: 23px; margin: 14px 0px 8px; }
.atelier .compact-copy > p:last-child { font-size: 11px; line-height: 1.95; color: rgb(98, 109, 117); max-width: 350px; }
.atelier .atelier-renew .migration-visual { height: 117px; padding: 0px 16px 0px 10px; }
.atelier .compact-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.atelier .compact-foot p { font-size: 9px; color: rgb(106, 116, 125); line-height: 1.8; }

.atelier .atelier-creative { position: relative; display: grid; grid-template-columns: 1.03fr 1fr; gap: 4px; padding: 28px 0px 26px 28px; overflow: hidden; align-items: center; }
.atelier .atelier-creative .compact-copy { position: relative; z-index: 2; }
.atelier .atelier-creative .compact-copy h3 { white-space: nowrap; font-size: 21px; }
.atelier .atelier-creative .compact-copy > p { font-size: 10px; line-height: 1.9; color: rgb(98, 109, 117); margin-bottom: 17px; }

.atelier .atelier-creative .creative-visual { height: 205px; transform: translateX(16px) rotate(7deg); }
.atelier .atelier-creative .creative-note { font-size: 6px; bottom: -14px; right: 20px; }
.atelier .atelier-creative .creative-before { width: 45%; height: 75%; align-self: flex-end; margin-bottom: 10px; z-index: 2; }
.atelier .atelier-creative .creative-after { width: 58%; margin-left: -20px; box-shadow: rgba(37, 49, 59, 0.145) 0px 8px 24px; }
.atelier .store-visual { background: rgb(255, 255, 255); border-radius: 9px; overflow: hidden; box-shadow: rgba(38, 59, 80, 0.3) 0px 18px 36px -18px; position: relative; }
.atelier .store-browser { height: 22px; background: rgb(248, 250, 251); display: flex; align-items: center; justify-content: space-between; padding: 0px 10px; color: rgb(122, 131, 137); font-size: 5px; letter-spacing: 0.07em; }
.atelier .window-dots { display: flex; gap: 3px; }
.atelier .window-dots i { height: 3px; width: 3px; border-radius: 50%; background: rgb(212, 218, 222); }
.atelier .mini-bag { font-size: 6px; }
.atelier .store-nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.atelier .store-nav strong { font-family: Georgia, serif; font-size: 13px; letter-spacing: -0.04em; }
.atelier .store-nav > span { font-size: 4px; letter-spacing: 0.03em; color: rgb(122, 130, 137); }
.atelier .store-content { display: grid; grid-template-columns: 1fr 1fr; min-height: 188px; }
.atelier .store-content > img { height: 188px; width: 100%; object-fit: cover; object-position: 50% 25%; }
.atelier .store-copy { padding: 19px 14px; background: rgb(245, 242, 236); display: flex; flex-direction: column; align-items: flex-start; }
.atelier .store-copy > span { font-size: 5px; letter-spacing: 0.07em; }
.atelier .store-copy > p { font-family: Georgia, serif; font-size: 35px; line-height: 0.94; letter-spacing: -0.065em; margin-top: 12px; }
.atelier .store-copy em { font-weight: 400; }
.atelier .store-copy .store-shop { margin-top: auto; font-size: 4px; padding: 5px 8px; background: rgb(28, 33, 28); color: rgb(255, 255, 255); letter-spacing: 0.01em; }
.atelier .store-bottom { padding: 10px 12px; display: flex; justify-content: space-between; font-size: 4px; letter-spacing: 0.08em; color: rgb(123, 129, 133); }
.atelier .migration-visual { display: flex; align-items: center; position: relative; min-width: 0px; width: 100%; height: 150px; }
.atelier .migration-sources { width: 35%; display: flex; flex-direction: column; gap: 7px; z-index: 1; }
.atelier .migration-sources > span { display: flex; justify-content: space-between; align-items: center; font-size: 8px; background: rgba(255, 255, 255, 0.863); box-shadow: rgba(52, 70, 87, 0.035) 0px 3px 16px; border-radius: 8px; padding: 9px 12px; white-space: nowrap; }
.atelier .migration-sources i { width: 5px; height: 5px; border-radius: 50%; background: rgb(180, 197, 207); }
.atelier .migration-route { width: 12%; height: 88px; display: flex; justify-content: center; flex-direction: column; gap: 27px; opacity: 0.6; }
.atelier .migration-route > i { height: 1px; background: linear-gradient(90deg, rgba(173, 186, 193, 0), rgb(151, 179, 192)); position: relative; }
.atelier .migration-route > i::after { content: ""; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; background: rgb(122, 158, 172); border-radius: 50%; }
.atelier .migration-target { width: 53%; padding: 12px; background: rgb(253, 254, 254); box-shadow: rgba(32, 56, 75, 0.08) 0px 7px 25px; border-radius: 12px; transform: rotate(-2deg); }
.atelier .migration-title { font-size: 6px; letter-spacing: 0.05em; display: flex; gap: 5px; align-items: center; }

.atelier .product-tile { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.atelier .product-tile img { width: 40px; height: 42px; object-fit: cover; border-radius: 4px; }
.atelier .product-tile > span { font-size: 8px; line-height: 1.9; color: rgb(94, 107, 116); }
.atelier .product-tile b { font-weight: 400; font-size: 6px; white-space: nowrap; }
.atelier .migration-checks { display: flex; gap: 5px; margin-top: 9px; }
.atelier .migration-checks > span { font-size: 5px; flex: 1 1 0%; text-align: center; background: rgb(237, 243, 241); color: rgb(94, 129, 114); padding: 3px; border-radius: 3px; }
.atelier .creative-visual { display: flex; align-items: center; position: relative; min-width: 0px; height: 250px; gap: 12px; }
.atelier .creative-visual figure { position: relative; flex-shrink: 0; overflow: hidden; border-radius: 8px; background: rgb(248, 248, 247); }
.atelier .creative-before { width: 44%; height: 78%; box-shadow: rgba(19, 34, 46, 0.055) 0px 10px 25px; }
.atelier .creative-after { width: 52%; height: 100%; box-shadow: rgba(19, 34, 46, 0.15) 0px 12px 26px; }
.atelier .creative-visual img { width: 100%; height: 100%; object-fit: cover; }
.atelier .creative-visual figcaption { position: absolute; bottom: 8px; left: 10px; font-size: 6px; letter-spacing: 0.12em; padding: 5px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.79); backdrop-filter: blur(12px); }
.atelier .creative-note { position: absolute; bottom: -19px; right: 0px; font-size: 8px; color: rgb(137, 145, 152); }
@media (min-width: 1550px) {
.atelier .atelier-launch-copy h3 { font-size: 34px; }
.atelier .atelier-store { margin-top: 35px; margin-bottom: 32px; }
.atelier .atelier-store .store-visual { width: 370px; }
.atelier .store-content > img { height: 220px; }
.atelier .store-copy > p { font-size: 43px; }
.atelier .atelier-right { grid-template-rows: 1fr 1fr; }
.atelier .atelier-creative .creative-visual { height: 235px; }
}
@media (max-width: 1190px) {
.atelier .section-intro h2 { font-size: 29px; }
.atelier .atelier-field { gap: 16px; padding: 13px; }
.atelier .atelier-launch { padding: 27px 25px 22px; }
.atelier .atelier-launch-copy h3 { font-size: 26px; }
.atelier .atelier-launch-copy > p:last-child { font-size: 11px; }
.atelier .atelier-store .store-visual { width: 290px; }
.atelier .atelier-launch-foot { align-items: flex-start; flex-direction: column; }
.atelier .atelier-right { gap: 16px; }
.atelier .atelier-renew { padding: 25px 23px 21px; }
.atelier .compact-foot p { display: none; }
.atelier .compact-foot { justify-content: flex-end; }
.atelier .atelier-creative { padding: 25px 0px 25px 23px; grid-template-columns: 1.1fr 0.9fr; }
.atelier .atelier-creative .compact-copy h3 { font-size: 19px; }
.atelier .atelier-creative .creative-visual { height: 180px; }
.atelier .atelier-creative .service-label { font-size: 10px; gap: 8px; }
}
@media (max-width: 900px) {
.atelier { padding-top: 46px; }
.atelier .section-intro { align-items: flex-start; }
.atelier .section-intro > p { font-size: 10px; padding-top: 22px; }
.atelier .section-intro h2 { font-size: 27px; }
.atelier .atelier-field { grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px; border-radius: 25px; }
.atelier .atelier-launch { padding: 24px 20px; }
.atelier .service-label { font-size: 9px; gap: 8px; }
.atelier .atelier-launch-copy h3 { font-size: 22px; }
.atelier .atelier-store { margin: 30px -3px; min-height: 210px; }
.atelier .atelier-store .store-visual { width: 245px; }
.atelier .store-content > img { height: 170px; }
.atelier .store-copy > p { font-size: 30px; }
.atelier .floating-chip { right: -10px; font-size: 6px; padding: 12px 10px; }
.atelier .atelier-launch-foot .scope-list { font-size: 8px; }

.atelier .atelier-right { gap: 12px; }
.atelier .atelier-renew { padding: 24px 18px; gap: 14px; }
.atelier .compact-copy h3 { font-size: 20px; }
.atelier .compact-copy > p:last-child { font-size: 10px; }
.atelier .atelier-renew .migration-visual { padding: 0px; height: 125px; }
.atelier .migration-sources > span { font-size: 7px; padding: 8px; }
.atelier .migration-target { padding: 10px; }
.atelier .product-tile { gap: 7px; }
.atelier .product-tile img { width: 30px; height: 36px; }
.atelier .product-tile > span { font-size: 6px; }
.atelier .product-tile b { font-size: 5px; white-space: normal; }
.atelier .atelier-creative { grid-template-columns: 1fr; padding: 24px 20px; min-height: 255px; }
.atelier .atelier-creative .compact-copy { z-index: 2; max-width: 165px; }
.atelier .atelier-creative .compact-copy h3 { font-size: 19px; white-space: nowrap; }
.atelier .atelier-creative .compact-copy > p { font-size: 9px; max-width: 135px; }
.atelier .atelier-creative .creative-visual { position: absolute; right: -30px; top: 50px; height: 180px; width: 165px; opacity: 0.67; z-index: 1; }
.atelier .atelier-creative .compact-copy > p,
.atelier .atelier-creative .compact-copy h3 { text-shadow: rgb(255, 255, 255) 0px 1px 8px, rgb(255, 255, 255) 0px 0px 6px; }
.atelier .atelier-creative .creative-note { display: none; }
.atelier .estimate { flex-wrap: wrap; gap: 10px; }
.atelier .estimate > span:last-child { flex-basis: 100%; text-align: center; font-size: 9px; }
}
@media (max-width: 600px) {
.atelier { padding: 38px 20px 35px; }
.atelier .section-intro { display: block; margin-bottom: 26px; }
.atelier .eyebrow { font-size: 8px; letter-spacing: 0.12em; }
.atelier .section-intro h2 { font-size: 25px; margin-top: 11px; }
.atelier .section-intro > p { font-size: 11px; padding: 0px; margin-top: 13px; line-height: 1.9; }
.atelier .atelier-field { display: block; padding: 10px; background: linear-gradient(140deg, rgb(237, 243, 246), rgb(245, 246, 244)); border-radius: 26px; }
.atelier .atelier-launch { padding: 26px 24px 25px; border-radius: 20px; }
.atelier .service-label { font-size: 10px; gap: 10px; }
.atelier h3 { font-size: 25px; }
.atelier .atelier-launch-copy h3 { margin-top: 16px; margin-bottom: 10px; }
.atelier .atelier-launch-copy > p:last-child { font-size: 11px; line-height: 1.95; }
.atelier .atelier-store { margin: 28px 0px 27px; min-height: 0px; }
.atelier .atelier-store .store-visual { width: 100%; max-width: 280px; transform: perspective(1000px) rotateY(-5deg) rotateZ(-2deg); }
.atelier .store-content > img { height: 180px; }
.atelier .store-content { min-height: 180px; }
.atelier .store-copy > p { font-size: 34px; }
.atelier .floating-chip { right: -5px; font-size: 6px; bottom: 15px; padding: 12px 11px; }
.atelier .atelier-launch-foot { gap: 18px; align-items: flex-start; }
.atelier .atelier-launch-foot .scope-list { font-size: 10px; }

.atelier .atelier-right { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.atelier .atelier-renew { padding: 26px 24px; gap: 20px; border-radius: 20px; }
.atelier .compact-copy h3 { font-size: 24px; margin: 16px 0px 10px; }
.atelier .compact-copy > p:last-child { font-size: 11px; line-height: 1.95; }
.atelier .atelier-renew .migration-visual { height: 140px; padding: 0px; }
.atelier .migration-sources > span { font-size: 8px; padding: 10px; }
.atelier .migration-target { padding: 12px; }
.atelier .product-tile img { width: 38px; height: 41px; }
.atelier .product-tile b { font-size: 5px; }
.atelier .compact-foot { display: block; }
.atelier .compact-foot p { display: block; font-size: 9px; margin-bottom: 17px; }

.atelier .atelier-creative { display: flex; flex-direction: column; padding: 26px 24px; min-height: 0px; align-items: stretch; border-radius: 20px; }
.atelier .atelier-creative .compact-copy { max-width: none; }
.atelier .atelier-creative .compact-copy h3 { font-size: 24px; white-space: normal; text-shadow: none; }
.atelier .atelier-creative .compact-copy > p { font-size: 11px; max-width: none; text-shadow: none; }

.atelier .atelier-creative .creative-visual { position: relative; inset: auto; opacity: 1; transform: rotate(4deg); height: 235px; width: 100%; max-width: 290px; align-self: center; margin: 28px 0px 20px; order: -1; }
.atelier .atelier-creative .creative-note { display: block; bottom: -17px; font-size: 7px; }
.atelier .atelier-creative .creative-before { height: 78%; width: 44%; }
.atelier .atelier-creative .creative-after { width: 58%; }
.atelier .ambient-a { width: 250px; height: 450px; left: -50px; top: 200px; }
.atelier .ambient-b { width: 290px; height: 400px; right: 0px; top: 600px; }
.atelier .estimate { display: grid; grid-template-columns: 20px 1fr; padding: 20px; gap: 12px; margin-top: 22px; text-align: left; align-items: start; }
.atelier .estimate p { font-size: 11px; line-height: 1.9; }
.atelier .estimate strong { display: block; margin-left: 0px; font-size: 13px; }
.atelier .estimate > span:last-child { grid-column: 2; font-size: 9px; text-align: left; line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
.atelier .atelier-launch:hover .atelier-store .store-visual { transform: perspective(1000px) rotateY(-5deg) rotateZ(-2deg); }

}
@media (prefers-reduced-transparency: reduce) {
.atelier .glass-surface,
.atelier .frosted-chip { background: rgb(246, 248, 250); }
}
.atelier .section-intro > p { font-size: 16px; color: rgb(89, 100, 110); }
.atelier .service-label { font-size: 14px; }
.atelier .service-label > span { font-size: 12px; color: rgb(109, 123, 133); }
.atelier .atelier-launch-copy > p:last-child,
.atelier .compact-copy > p:last-child,
.atelier .atelier-creative .compact-copy > p { font-size: 16px; line-height: 1.9; color: rgb(86, 98, 108); }
.atelier .scope-list,
.atelier .atelier-launch-foot .scope-list { font-size: 14px; color: rgb(86, 98, 108); line-height: 1.95; }

.atelier .compact-foot p { font-size: 14px; color: rgb(90, 104, 114); }
.atelier .compact-foot { flex-wrap: wrap; gap: 16px; }
.atelier .atelier-launch-foot { align-items: flex-start; flex-direction: column; gap: 20px; }
.atelier .atelier-launch-copy h3 { font-size: 31px; }
.atelier .atelier-store { margin: auto 0px; padding: 34px 0px; }
.atelier .atelier-store .store-visual { width: 370px; }
.atelier .floating-chip { font-size: 10px; right: 0px; bottom: 50px; }
.atelier .atelier-right { grid-template-rows: auto auto; }
.atelier .atelier-creative { min-height: 340px; padding: 30px 0px 30px 28px; grid-template-columns: 1.2fr 1fr; }
.atelier .atelier-creative .compact-copy h3 { font-size: 24px; white-space: normal; }
.atelier .atelier-creative .compact-copy > p { max-width: 300px; margin-bottom: 24px; }
.atelier .atelier-creative .creative-visual { height: 240px; transform: translateX(25px) rotate(7deg); }
.atelier .atelier-creative .creative-note { font-size: 10px; right: 8px; bottom: -25px; max-width: 190px; }
.atelier .atelier-renew .migration-visual { height: 140px; }
.atelier .estimate p { font-size: 16px; color: rgb(86, 98, 108); }
.atelier .estimate > span:last-child { font-size: 14px; color: rgb(101, 115, 125); }
.atelier .estimate { flex-wrap: wrap; padding: 23px 26px; gap: 14px; }
.atelier .estimate strong { color: rgb(34, 46, 55); }
@media (max-width: 1190px) {
.atelier .atelier-creative { grid-template-columns: 1fr; min-height: 400px; padding: 26px; }
.atelier .atelier-creative .compact-copy { max-width: 300px; }
.atelier .atelier-creative .creative-visual { position: absolute; width: 190px; height: 205px; right: -15px; bottom: 15px; transform: rotate(7deg); opacity: 0.5; }
.atelier .atelier-creative .compact-copy { z-index: 2; }
.atelier .atelier-creative .compact-copy h3,
.atelier .atelier-creative .compact-copy > p { text-shadow: rgb(255, 255, 255) 0px 0px 20px, rgb(255, 255, 255) 0px 2px 12px; }
.atelier .atelier-launch-copy h3 { font-size: 27px; }
.atelier .atelier-store .store-visual { width: 310px; }
}
@media (max-width: 900px) {
.atelier .section-intro { display: block; }
.atelier .section-intro > p { margin-top: 15px; padding-top: 0px; }
.atelier .atelier-field { display: block; }
.atelier .atelier-launch { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 30px; }
.atelier .atelier-launch-copy { grid-area: 1 / 1; }
.atelier .atelier-store { grid-area: 1 / 2 / 3; margin: 0px; padding: 25px 0px; align-items: center; }
.atelier .atelier-launch-foot { grid-area: 2 / 1; }
.atelier .atelier-store .store-visual { width: 100%; max-width: 300px; }
.atelier .atelier-right { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.atelier .atelier-renew { padding: 25px; }
.atelier .atelier-creative { padding: 25px; min-height: 0px; }
.atelier .atelier-creative .compact-copy { max-width: none; align-self: start; }
.atelier .atelier-creative .compact-copy h3 { font-size: 23px; }
.atelier .atelier-creative .compact-copy > p { max-width: none; }
.atelier .atelier-creative .creative-visual { top: auto; bottom: 15px; right: 5px; width: 200px; height: 190px; opacity: 0.9; }

.atelier .atelier-creative .service-label { font-size: 14px; }
.atelier .compact-foot p { display: block; }

.atelier .compact-copy h3 { font-size: 23px; }
.atelier .atelier-launch-copy h3 { font-size: 26px; }
}
@media (max-width: 600px) {
.atelier .section-intro h2 { font-size: 25px; }
.atelier .section-intro > p { font-size: 16px; line-height: 1.85; }
.atelier .service-label { font-size: 14px; line-height: 1.7; }
.atelier .service-label > span { font-size: 12px; }
.atelier .atelier-launch { display: flex; flex-direction: column; gap: 0px; padding: 26px 24px; }
.atelier .atelier-launch-copy h3 { font-size: 25px; }
.atelier .atelier-launch-copy > p:last-child,
.atelier .compact-copy > p:last-child,
.atelier .atelier-creative .compact-copy > p { font-size: 16px; line-height: 1.85; }
.atelier .atelier-store { padding: 0px; margin: 30px 0px; }
.atelier .atelier-store .store-visual { max-width: 280px; }
.atelier .floating-chip { bottom: 20px; font-size: 9px; }
.atelier .atelier-launch-foot { gap: 22px; }
.atelier .scope-list,
.atelier .atelier-launch-foot .scope-list { font-size: 14px; line-height: 1.95; }

.atelier .atelier-right { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.atelier .atelier-renew { padding: 26px 24px; }
.atelier .compact-copy h3 { font-size: 24px; margin-top: 17px; }
.atelier .compact-foot p { font-size: 14px; margin-bottom: 20px; }

.atelier .atelier-creative { display: flex; padding: 26px 24px; }
.atelier .atelier-creative .compact-copy h3 { font-size: 24px; text-shadow: none; }
.atelier .atelier-creative .compact-copy > p { text-shadow: none; margin-bottom: 23px; }
.atelier .atelier-creative .creative-visual { position: relative; inset: auto; width: 100%; height: 240px; max-width: 280px; margin: 15px 0px 30px; transform: rotate(4deg); opacity: 1; order: -1; }
.atelier .atelier-creative .creative-note { font-size: 11px; max-width: none; right: 0px; bottom: -18px; }
.atelier .estimate { display: grid; grid-template-columns: 18px 1fr; padding: 23px 20px; gap: 14px; }
.atelier .estimate p { font-size: 16px; line-height: 1.8; }
.atelier .estimate strong { font-size: 16px; margin: 0px; }
.atelier .estimate > span:last-child { font-size: 14px; line-height: 1.85; color: rgb(96, 113, 125); }
}
@media (max-width: 600px) {
}
.atelier .atelier-field > .ambient { max-width: 70%; right: 0px; left: auto; }
.atelier .atelier-field > .ambient-a { left: 0px; right: auto; }
/* Contain the decorative light without hiding any service content. */
.atelier .atelier-field { overflow: clip; }
.atelier .glass-surface { -webkit-backdrop-filter: blur(24px) saturate(1.12); }
.atelier .frosted-chip { -webkit-backdrop-filter: blur(16px); }
.atelier .estimate strong { font-size: inherit; }
.atelier .estimate > span:last-child { max-width: 43em; }

@media (prefers-reduced-motion: reduce) { .atelier .store-visual { transition: none; } .atelier .atelier-launch:hover .atelier-store .store-visual { transform: perspective(1000px) rotateY(-8deg) rotateZ(-3deg); } }
@media (prefers-reduced-transparency: reduce) { .atelier .glass-surface,
.atelier .frosted-chip { background: #f9fbfc; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@supports not (backdrop-filter: blur(1px)) { .atelier .glass-surface { background: #f9fbfc; } }