/* A quality-led opening: one composition, refined through three scroll states. */
.quality-hero{height:162svh;min-height:1100px;background:#15132d;isolation:isolate;overflow:clip}
.quality-stage{position:sticky;top:0;min-height:100svh;display:flex;align-items:center}
.quality-inner{width:100%;max-width:1520px;box-sizing:border-box;margin:auto;padding:145px 40px 38px;display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:65px;row-gap:36px}
.quality-copy{min-width:0}.quality-copy h1{font-size:clamp(45px,4.9vw,74px);line-height:1.07;letter-spacing:-.035em;margin:0 0 28px}.quality-copy>p:not(.case-eyebrow){font:15px/1.85 Arial,sans-serif;color:#c7bfd3;max-width:460px;margin:0 0 30px}.quality-copy .case-actions{gap:22px}.quality-copy .case-primary{border-radius:50px;padding:15px 23px;min-height:54px}.quality-principle{margin-top:38px;min-height:76px;padding-left:18px;border-left:1px solid #f26528}.quality-caption{margin:0;max-width:380px;animation:quality-copy-in .55s ease both}.quality-caption strong{display:block;color:#fff;font:700 18px/1.4 'Chakra Petch',Arial,sans-serif;margin-bottom:8px}.quality-caption span{display:block;color:#aca0bc;font:12px/1.7 Arial,sans-serif}.quality-caption[hidden]{display:none}
.quality-visual{position:relative;min-width:0;min-height:450px;display:flex;align-items:center;justify-content:center;perspective:1200px;--quality-pointer-x:0deg;--quality-pointer-y:0deg}
.quality-orbit{position:absolute;width:94%;aspect-ratio:1;border:1px solid #a18eb21c;border-radius:50%;transform:rotateX(60deg) rotate(-27deg);pointer-events:none}.quality-orbit-two{width:115%;transform:rotateX(30deg) rotateY(50deg) rotate(-30deg);border-color:#f265281f}
.quality-coordinate{position:absolute;font:8px/1.5 Arial,sans-serif;letter-spacing:.15em;color:#887a9b}.coordinate-top{top:0;right:7%}.coordinate-bottom{bottom:8px;left:5%}
.quality-composition{position:relative;width:92%;max-width:560px;transform:rotateX(calc(5deg + var(--quality-pointer-y))) rotateY(calc(-10deg + var(--quality-pointer-x))) rotate(-3deg);transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.quality-browser{position:relative;border:1px solid #9a88b167;border-radius:14px;background:#211c3d66;box-shadow:16px 25px 70px #07051640;overflow:hidden;transition:background 1s,border-color 1s,box-shadow 1s}.quality-browser-bar{display:flex;align-items:center;gap:5px;padding:12px 18px;border-bottom:1px solid #aa8cbb27}.quality-browser-bar img{margin-right:auto;object-fit:contain}.quality-browser-bar>span{width:25%;height:3px;background:#ab9eb038;margin-right:18px}.quality-browser-bar i{height:4px;width:4px;border:1px solid #8b799e;border-radius:50%}
.quality-design{position:relative;padding:27px 27px 0;min-height:295px;overflow:hidden}.quality-design-label{color:#ac9cb9;font:7px/1.5 Arial,sans-serif;letter-spacing:.12em}.quality-design-title{position:relative;z-index:1;font:700 clamp(27px,3vw,42px)/1.1 'Chakra Petch',Arial,sans-serif;letter-spacing:-.035em;color:#e5ddec;margin:25px 0 20px;transition:color .9s}.quality-design-title span{color:#9685a6;transition:color .9s}.quality-design-line{height:3px;width:48%;background:#a48fa72d;margin-bottom:8px}.quality-design-line.short{width:34%}.quality-design-button{display:flex;justify-content:space-between;align-items:center;width:142px;border:1px solid #b498c154;border-radius:30px;color:#cfc0de;padding:10px 13px;margin-top:20px;font:8px/1.5 Arial,sans-serif;transition:background .9s,color .9s,border-color .9s}.quality-design-button b{font:17px/1 Arial,sans-serif}.quality-design-symbol{position:absolute;width:41%;right:-7%;top:45px;transform:rotate(-9deg);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}.quality-design-symbol svg{width:100%;fill:none;stroke:#f26528;stroke-width:.5;opacity:.55;transition:fill 1s,opacity 1s}.quality-design-symbol path:nth-child(2){stroke:#a58bbb}.quality-design-symbol path:nth-child(3){fill:#f2652833}.quality-design-rule{display:flex;justify-content:space-between;margin-top:32px;padding:13px 0;border-top:1px solid #c7a6db24;font:7px/1.5 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#ad9bbd}
.quality-guide{position:absolute;background:#a080b325;pointer-events:none;transition:opacity .9s}.guide-horizontal{left:-26px;right:-26px;top:61px;height:1px}.guide-vertical{top:-28px;bottom:-26px;left:28px;width:1px}.quality-corner{position:absolute;width:14px;height:14px;border-color:#f26528;border-style:solid;transition:opacity .9s,transform 1s}.corner-tl{top:-9px;left:-9px;border-width:1px 0 0 1px}.corner-tr{top:-9px;right:-9px;border-width:1px 1px 0 0}.corner-bl{bottom:-9px;left:-9px;border-width:0 0 1px 1px}.corner-br{bottom:-9px;right:-9px;border-width:0 1px 1px 0}
.quality-detail-lens{position:absolute;right:-20px;bottom:53px;width:120px;height:120px;display:flex;flex-direction:column;justify-content:center;padding:18px;box-sizing:border-box;border:1px solid #f2652877;background:linear-gradient(140deg,#40233b,#241a34);border-radius:22px;box-shadow:0 15px 50px #09051155;opacity:0;transform:translate(20px,15px) scale(.9);transition:opacity .9s,transform 1.1s cubic-bezier(.22,1,.36,1)}.quality-detail-lens span{font:700 14px/1.35 'Chakra Petch',Arial,sans-serif;color:#fff}.quality-detail-lens svg{width:22px;margin-top:9px;stroke:#f26528;stroke-width:1.3;fill:none}.quality-review-marker{position:absolute;inset:0;pointer-events:none;display:flex;align-items:flex-end;justify-content:flex-end;padding:15px 20px;gap:7px;background:linear-gradient(transparent 70%,#15132d);opacity:0;transition:opacity .8s}.quality-review-marker svg{width:15px;fill:none;stroke:#f26528;stroke-width:1.5;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .7s .3s}.quality-review-marker span{font:8px/1.8 Arial,sans-serif;letter-spacing:.03em;color:#e7dfeb}
.quality-signature{position:absolute;right:7%;bottom:-24px;display:flex;align-items:center;gap:10px;transition:transform 1.2s,opacity 1s;opacity:.3;transform:translate(-22px,8px)}.quality-signature-line{height:1px;width:50px;background:#f2652866}.quality-signature img{object-fit:contain;transform:rotate(-13deg);transition:transform 1s}.quality-signature>span:last-child{font:7px/1.7 Arial,sans-serif;letter-spacing:.14em;color:#b8a7c7;max-width:85px}
.quality-visual[data-quality-state="1"] .quality-design-title span,.quality-visual[data-quality-state="2"] .quality-design-title span{color:#f26528}.quality-visual[data-quality-state="1"] .quality-design-button,.quality-visual[data-quality-state="2"] .quality-design-button{color:#fff;background:#f26528;border-color:#f26528}.quality-visual[data-quality-state="1"] .quality-browser,.quality-visual[data-quality-state="2"] .quality-browser{background:linear-gradient(135deg,#2a2245,#19152e);border-color:#bba1d16b}.quality-visual[data-quality-state="1"] .quality-design-symbol,.quality-visual[data-quality-state="2"] .quality-design-symbol{transform:rotate(0deg) scale(1.1)}.quality-visual[data-quality-state="1"] .quality-design-symbol svg,.quality-visual[data-quality-state="2"] .quality-design-symbol svg{opacity:1;fill:#f265280c}.quality-visual[data-quality-state="1"] .quality-detail-lens{opacity:1;transform:none}.quality-visual[data-quality-state="2"] .quality-composition{transform:rotateX(0deg) rotateY(0deg) rotate(0deg)}.quality-visual[data-quality-state="2"] .quality-guide,.quality-visual[data-quality-state="2"] .quality-corner{opacity:0}.quality-visual[data-quality-state="2"] .quality-review-marker{opacity:1}.quality-visual[data-quality-state="2"] .quality-review-marker svg{stroke-dashoffset:0}.quality-visual[data-quality-state="2"] .quality-signature{opacity:1;transform:none}.quality-visual[data-quality-state="2"] .quality-signature img{transform:rotate(0)}
.quality-controls{grid-column:1/-1;display:flex;align-items:center;gap:34px;border-top:1px solid #b39dc127;padding-top:20px;margin-top:6px}.quality-controls button{position:relative;display:flex;align-items:center;gap:11px;flex:1;border:0;background:none;color:#a798b7;font:12px/1.7 Arial,sans-serif;padding:0 0 12px;text-align:left;cursor:pointer;transition:color .4s}.quality-controls button small{font-size:8px;color:#887697}.quality-controls button i{position:absolute;left:0;right:0;bottom:0;height:1px;background:#a98bb62c}.quality-controls button i:after{content:'';display:block;height:1px;background:#f26528;transform:scaleX(0);transform-origin:left;transition:transform .75s cubic-bezier(.22,1,.36,1)}.quality-controls button[aria-pressed="true"]{color:#fff}.quality-controls button[aria-pressed="true"] i:after{transform:scaleX(1)}.quality-controls button:hover{color:#f26528}.quality-scroll-note{margin-left:auto;flex:1.4;text-align:right;font:7px/1.6 Arial,sans-serif;letter-spacing:.12em;color:#a18db3}.quality-scroll-note>span{color:#f26528;margin-left:14px;font-size:16px}
@keyframes quality-copy-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.quality-inner{row-gap:55px}.quality-visual{min-height:490px}}
@media(max-width:1050px){.quality-inner{column-gap:30px;padding-inline:30px}.quality-copy h1{font-size:clamp(40px,5.2vw,56px)}.quality-visual{min-height:390px}.quality-design{padding:22px 20px 0;min-height:270px}.quality-design-title{font-size:34px}.quality-detail-lens{right:-12px}.quality-controls{gap:22px}.quality-scroll-note{flex:1.5}}
@media(max-width:700px){.quality-hero{height:auto;min-height:0}.quality-stage{position:relative;min-height:0}.quality-inner{display:flex;flex-direction:column;padding:132px 20px 48px;gap:34px;align-items:stretch}.quality-copy h1{font-size:clamp(37px,9.8vw,55px);line-height:1.07;max-width:530px}.quality-copy>p:not(.case-eyebrow){font-size:14px;max-width:480px}.quality-copy .case-primary{font-size:12px;padding:13px 19px}.quality-copy .case-text-link{font-size:11px}.quality-principle{margin-top:27px;min-height:70px}.quality-caption strong{font-size:17px}.quality-caption span{font-size:12px}.quality-visual{min-height:350px;margin:10px 0 20px}.quality-composition{width:90%;max-width:440px;transform:rotateY(-5deg) rotate(-2deg)}.quality-design{padding:20px 19px 0;min-height:245px}.quality-design-title{font-size:32px;margin-block:19px}.quality-browser-bar{padding:10px 15px}.quality-detail-lens{width:102px;height:102px;right:-12px;padding:14px;border-radius:17px}.quality-detail-lens span{font-size:12px}.quality-coordinate{font-size:6px}.quality-signature{right:2%;bottom:-32px}.quality-signature img{width:42px;height:30px}.quality-design-label{font-size:6px}.quality-controls{gap:18px;padding-top:18px;margin-top:3px;flex-wrap:wrap}.quality-controls button{font-size:12px;gap:8px}.quality-scroll-note{display:none}.quality-orbit-two{width:102%}}
@media(prefers-reduced-motion:reduce){.quality-hero{height:auto;min-height:0}.quality-stage{position:relative}.quality-inner{min-height:760px}.quality-visual *,.quality-controls *{transition:none!important;animation:none!important}.quality-caption{animation:none}.quality-composition{transform:none!important}.quality-orbit{display:none}.quality-scroll-note{display:none}}