/* Design comp v2 refinements */
.page{width:min(100%,1600px);margin:0 auto 12px}
.hero-wave{z-index:2;bottom:-96px;height:160px}
.hero-copy{z-index:7}
.hero-actions{position:relative;z-index:9}

/* chapter transitions: intentionally varied, but held together by one visual system */
.chapter-break{height:150px;position:relative;z-index:12;margin:-1px 0;background:var(--paper);display:flex;align-items:center;justify-content:flex-end;padding:0 8vw;overflow:visible}
.chapter-break:before{content:"";position:absolute;inset:-42px -4% auto;height:90px;background:inherit;z-index:-1}
.chapter-break img{position:absolute;left:8vw;bottom:10px;width:190px;height:220px;object-fit:contain;filter:drop-shadow(0 14px 15px #0002)}
.chapter-break>div{position:relative;min-width:330px;padding:20px 28px;background:var(--white);border:1px solid var(--line);border-radius:42% 58% 48% 52%/52% 45% 55% 48%;box-shadow:0 16px 35px #10282216}
.chapter-break>div:after{content:"";position:absolute;left:-24px;bottom:22px;border:15px solid transparent;border-right-color:var(--white);transform:rotate(-18deg)}
.chapter-break b{font:italic 44px/1 Georgia;color:var(--vermilion);margin-right:16px}
.chapter-break span{font:700 11px Arial;letter-spacing:.18em}
.chapter-break p{margin:7px 0 0;font:600 17px var(--serif)}
.break-wave{background:var(--ink);color:var(--ink)}
.break-wave:before{border-radius:52% 48% 0 0/85% 75% 0 0;transform:rotate(.7deg)}
.break-diagonal{background:var(--paper)}.break-diagonal:before{clip-path:polygon(0 70%,100% 0,100% 100%,0 100%)}
.break-notch{background:#f3f1ec}.break-notch:before{clip-path:polygon(0 35%,47% 35%,50% 0,53% 35%,100% 35%,100% 100%,0 100%)}
.break-curve{background:#fff}.break-curve:before{border-radius:50% 50% 0 0/100% 75% 0 0}
.break-zigzag{background:var(--ink2);color:var(--ink)}.break-zigzag:before{clip-path:polygon(0 45%,8% 5%,16% 45%,24% 5%,32% 45%,40% 5%,48% 45%,56% 5%,64% 45%,72% 5%,80% 45%,88% 5%,96% 45%,100% 25%,100% 100%,0 100%)}
.break-fold{background:var(--paper)}.break-fold:before{clip-path:polygon(0 45%,76% 45%,82% 0,88% 45%,100% 45%,100% 100%,0 100%)}

/* guide comparison */
.guide{padding-bottom:80px}
.transfer-compare{padding-top:55px!important}
.compare-heading{max-width:820px;margin-bottom:35px}
.compare-heading h2{margin-bottom:14px}
.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:24px;background:var(--white);box-shadow:0 24px 60px #10282212}
.transfer-compare table{width:1500px;border-collapse:collapse;font-size:12px;line-height:1.55}
.transfer-compare th,.transfer-compare td{padding:17px 15px;border-right:1px solid #10282212;border-bottom:1px solid #10282212;text-align:left;vertical-align:top}
.transfer-compare thead th{position:sticky;top:0;background:var(--ink);color:white;white-space:nowrap}
.transfer-compare tbody th{position:sticky;left:0;min-width:155px;background:#f7f3e7;color:var(--ink)}

/* exact legacy Canvas/Three.js simulator presentation */
.simulator{display:block!important;background:#f3f1ec!important;color:var(--ink);padding-top:90px}
.simulator-heading{max-width:760px;margin-bottom:55px}
.mug-simulator-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(340px,.7fr);max-width:1400px;margin:0 auto;border-top:1px solid rgba(43,71,63,.22)}
.mug-view-column{min-width:0;padding:50px 50px 0 0}
.mug-viewer{position:relative;width:100%;height:min(70vh,720px);min-height:520px;overflow:hidden;background:#ebe8e1}
.mug-viewer canvas{display:block;width:100%;height:100%;cursor:grab}.mug-viewer canvas:active{cursor:grabbing}
.mug-loading{position:absolute;top:50%;left:50%;z-index:5;transform:translate(-50%,-50%);font:11px Arial;letter-spacing:.22em;color:#2b473f}
.viewer-help{display:flex;gap:30px;padding-top:16px;font-size:11px;letter-spacing:.08em;color:#747a76}
.mug-control-panel{padding:50px 0 0 50px;border-left:1px solid rgba(43,71,63,.22)}
.control-heading{margin-bottom:35px}.control-heading small{font:10px Arial;letter-spacing:.2em;color:#69716d}.control-heading h3{margin:7px 0 10px;font:400 30px var(--serif)}.control-heading p{font-size:13px;color:#6b706d}
.sim-control-block{padding:21px 0;border-top:1px solid rgba(43,71,63,.18)}
.sim-control-label,.range-heading label{font-size:12px;letter-spacing:.08em}
.design-upload{display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px 18px;border:1px solid #2b473f;cursor:pointer}.design-upload small{margin-left:auto;font-size:9px}.upload-icon{font-size:22px}.file-name{margin-top:9px;font-size:10px;color:#777}
.range-heading{display:flex;justify-content:space-between;margin-bottom:14px}.range-heading output{font-size:11px;color:#737975}
.sim-range{width:100%;height:2px;border:0;background:#c7c9c5;appearance:none}.sim-range::-webkit-slider-thumb{width:15px;height:15px;border:2px solid #f3f1ec;border-radius:50%;background:#2b473f;box-shadow:0 0 0 1px #2b473f;appearance:none}
.mug-color-options{display:flex;gap:12px;margin-top:16px}.mug-color-chip{width:38px;height:38px;padding:4px;border:1px solid transparent;border-radius:50%;background:transparent}.mug-color-chip span{display:block;width:100%;height:100%;border:1px solid #9995;border-radius:50%}.mug-color-chip.is-active{border-color:var(--ink)}
.simulator-buttons{display:grid;gap:9px;margin-top:26px}.sim-reset,.sim-contact{min-height:54px;padding:14px 18px;border:1px solid #2b473f;background:transparent;color:#2b473f;font:12px var(--sans);text-decoration:none;display:flex;align-items:center;justify-content:center}.sim-contact{justify-content:space-between;background:#2b473f;color:white}.simulator-note{font-size:10px;color:#777c79}

/* white product gallery */
.lineup{background:#fff!important}
.product-filters{display:flex;gap:9px;flex-wrap:wrap;margin:36px 0}.product-filters button{padding:11px 18px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink);cursor:pointer}.product-filters button.is-active{background:var(--ink);color:#fff}
.product-all{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.product-mini{margin:0;padding:22px;background:#fff;border:1px solid #10282210;border-radius:24px;box-shadow:0 15px 38px #1028220d;transition:.3s}.product-mini:hover{transform:translateY(-8px);box-shadow:0 22px 48px #1028221c}.product-mini img{width:100%;height:240px;object-fit:contain;background:#fff}.product-mini figcaption{padding-top:12px;font-weight:700}.product-mini small{display:block;font:10px Arial;letter-spacing:.12em;color:var(--vermilion);margin-bottom:4px}

/* narrative timeline */
.process{display:grid!important;grid-template-columns:.62fr 1.38fr;gap:8%;padding-top:120px}
.process-heading{position:sticky;top:120px;align-self:start}.process-heading h2{font-size:clamp(2.3rem,4vw,4.8rem)}
.process-timeline{list-style:none;margin:0;padding:0;position:relative}.process-timeline:before{content:"";position:absolute;left:50%;top:20px;bottom:20px;width:1px;background:#ffffff55}
.process-timeline li{position:relative;width:calc(50% - 36px);min-height:330px;margin-bottom:34px;padding:22px;background:#fff;color:var(--ink);border-radius:42px 10px 42px 10px;box-shadow:0 24px 55px #0002}.process-timeline li:nth-child(even){margin-left:calc(50% + 36px);border-radius:10px 42px 10px 42px}.process-timeline li:after{content:"";position:absolute;top:44px;right:-44px;width:15px;height:15px;border:7px solid var(--ink2);border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1px #ffffff88}.process-timeline li:nth-child(even):after{right:auto;left:-44px}.process-timeline img{width:100%;height:170px;object-fit:contain}.process-timeline b{font:italic 13px Georgia;color:var(--vermilion)}.process-timeline h3{margin:5px 0;font:600 25px var(--serif)}.process-timeline p{margin:0;font-size:13px}
.company-copy{position:relative;padding-bottom:120px}.company-shizuo{position:absolute;right:-30px;bottom:-100px;width:250px;height:260px;object-fit:contain;filter:drop-shadow(0 15px 15px #0002)}

/* FAQ and full form */
.faq-extra[hidden]{display:none}.faq-extra{display:block}.faq-more{cursor:pointer}
.contact{display:grid!important;grid-template-columns:.68fr 1.32fr;align-items:start!important}
.contact-intro{position:sticky;top:120px}
.contact-form{display:grid;gap:18px;padding:35px;background:#fff;color:var(--ink);border-radius:34px}
.contact-form label{display:grid;gap:8px;font-size:12px;font-weight:700}.contact-form label>span{color:var(--vermilion)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:14px;border:1px solid #10282235;border-radius:8px;background:#fff;font:inherit;color:var(--ink)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-form small,.form-note{font-size:10px;opacity:.7}.checkline{display:flex!important;align-items:center;grid-template-columns:auto 1fr}.checkline input{width:auto}.submit-button{padding:18px 22px;border:0;background:var(--ink);color:white;display:flex;justify-content:space-between;font-weight:700;cursor:pointer}

@media(max-width:1100px){.product-all{grid-template-columns:repeat(3,1fr)}.chapter-break img{left:4vw;width:160px}.mug-simulator-layout{grid-template-columns:1fr}.mug-view-column{padding-right:0}.mug-control-panel{padding-left:0;border-left:0}.process{grid-template-columns:1fr!important}.process-heading{position:static}.contact{grid-template-columns:1fr!important}.contact-intro{position:static}}
@media(max-width:700px){.chapter-break{height:118px;padding:0 20px}.chapter-break img{left:-10px;width:115px;height:145px}.chapter-break>div{min-width:0;width:78%;padding:14px 17px}.chapter-break b{font-size:28px}.chapter-break p{font-size:13px}.transfer-compare{padding-top:30px!important}.mug-viewer{height:430px;min-height:430px}.viewer-help{display:grid;gap:4px}.product-all{grid-template-columns:repeat(2,1fr);gap:10px}.product-mini{padding:10px;border-radius:15px}.product-mini img{height:150px}.process-timeline:before{left:18px}.process-timeline li,.process-timeline li:nth-child(even){width:calc(100% - 42px);margin-left:42px;border-radius:24px;min-height:0}.process-timeline li:after,.process-timeline li:nth-child(even):after{left:-32px;right:auto}.process-timeline img{height:150px}.company-shizuo{position:relative;right:auto;bottom:auto;width:100%;margin-top:20px}.contact-form{padding:22px}.field-grid{grid-template-columns:1fr}}
@media(min-width:1601px){body{background:var(--ink2)}.page{box-shadow:0 0 0 1px #ffffff0c}}
