/* Afterhouse: a working stage, followed by large evidence and quiet decisions. */
:root{--bg:#fbf7f2;--bg2:#f0e6e1;--text:#342732;--muted:#715d68;--border:#ddcfd2;--stage:#efe5dc}
[hidden]{display:none!important}body{overflow-x:clip}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}section[id],.portfolio-card[id],#story{scroll-margin-top:95px}a,button{touch-action:manipulation}nav{background:#fbf7f2f5;backdrop-filter:none}.section-tag{letter-spacing:.025em;text-transform:none}.section-title{line-height:1.25}.btn-primary,.nav-cta,#submitBtn{background:var(--accent)!important;border-radius:5px!important;box-shadow:none!important}.btn-primary:hover{background:#b9005a!important}:where(a,button,select,input,textarea,summary):focus-visible{outline:3px solid var(--accent2);outline-offset:4px}

.door-scene,.mobile-workflow{display:none!important}.hero-sequence{position:relative;background:var(--bg)}.hero-runway{display:block;height:72vh}

.document-flow::after{content:'▤';position:absolute;left:0;top:-23px;width:25%;text-align:center;color:var(--accent2);font-size:20px;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.document-flow[data-step="1"]::after{transform:translateX(100%)}.document-flow[data-step="2"]::after{transform:translateX(200%)}.document-flow[data-step="3"]::after{transform:translateX(300%)}
.case-tools .document-flow{margin-top:1.6rem}

/* Portfolio: books become the first chapter, then rooms, then documents. */
#portfolio{position:relative;background:#fffdf9;padding:6rem 4vw}#portfolio .container{max-width:1240px}#portfolio .section-title{font-size:clamp(2.1rem,4.5vw,4rem);max-width:900px;line-height:1.23}.case-navigation{display:flex;flex-wrap:wrap;gap:.65rem;margin:2rem 0 1rem}.case-navigation a,.case-navigation button{display:inline-block;padding:.6rem .95rem;border:1px solid var(--border);background:none;color:var(--text);border-radius:3px;text-decoration:none;font-size:.84rem}.case-navigation a:hover,.case-navigation button:hover{border-color:var(--accent);color:var(--accent)}#portfolio .portfolio-card,#portfolio .portfolio-card.featured{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:3rem;padding:3.5rem 0;background:none;box-shadow:none;border-radius:0}#portfolio .portfolio-card:nth-child(even){grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}#portfolio .portfolio-card h3{font-size:clamp(1.65rem,2.5vw,2.4rem);line-height:1.35}#portfolio .portfolio-card p{font-size:.92rem;line-height:1.85}#portfolio .portfolio-thumb{border-radius:5px;height:auto;aspect-ratio:1.6}#portfolio .portfolio-thumb img{object-fit:contain;transform:none!important}#case-books .portfolio-thumb{padding:1rem;background:#0a1824;box-shadow:0 15px 32px #06152220}#case-rooms .portfolio-thumb{padding:1rem;background:#e7edf7}#case-documents .portfolio-thumb{padding:.7rem;background:#efe5dd}.case-tools{margin-top:1.3rem;border-top:1px solid var(--border);padding-top:1rem}.case-tools a,.case-detail-button,.talk-service{font-size:.82rem;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:5px}.case-tools p{font-size:.72rem!important;margin:.5rem 0!important}.case-tools select{margin:.45rem 0;font-size:.84rem}.case-tools label{font-size:.8rem}.case-detail-button{background:none;border:0;padding:.6rem 0;margin-top:.8rem;min-height:44px}.document-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin:.5rem 0 1rem;position:relative}.document-flow span{font-size:.63rem;background:#eee5e9;padding:.7rem .35rem;text-align:center;border-bottom:3px solid transparent}.document-flow[data-step="0"] span:nth-child(1),.document-flow[data-step="1"] span:nth-child(2),.document-flow[data-step="2"] span:nth-child(3),.document-flow[data-step="3"] span:nth-child(4){background:#e7dff8;border-color:#3200a9;color:#3200a9}.case-tools button{background:#342732;color:#fff;border:0;padding:.7rem .8rem;border-radius:4px;font-size:.77rem}.portfolio-more{scroll-margin-top:100px}#portfolio .portfolio-more .portfolio-card{display:block;padding:1rem 0 2rem}#portfolio .portfolio-more .portfolio-card h3{font-size:1.35rem}
.website-showcase{background:#e8e6f0;color:#302744;margin:3rem -1rem 0;padding:3rem 2.5rem;display:grid;grid-template-columns:.75fr 1.25fr;gap:2.8rem;align-items:center}.website-showcase>div>span{font-size:.73rem;color:#49316b}.website-showcase h3{font-size:clamp(1.6rem,3vw,2.7rem);line-height:1.3;margin:.7rem 0 1rem}.website-showcase p{font-size:.8rem;color:#62536e}.responsive-composition{position:relative;padding:0 2rem 3rem 0}.responsive-composition>img{width:100%;height:auto;border:8px solid #fff;border-radius:6px;box-shadow:0 17px 28px #44315318}.phone-composition{position:absolute;right:0;bottom:0;width:30%;min-width:125px;background:#fff;padding:.7rem;border:5px solid #302744;border-radius:15px;box-shadow:0 12px 20px #44315320}.phone-composition span,.phone-composition small{display:block;font-size:.49rem}.phone-composition b{display:block;font-size:.54rem;margin:.7rem 0}.phone-products{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;margin:.6rem 0}.phone-products i{height:40px;background:#afb8ce}.phone-products i:nth-child(2){background:#566485}.phone-products i:nth-child(3){background:#dbe0e9}
.case-dialog{width:min(960px,94vw);max-height:90svh;padding:2rem;border:0;background:#fffdf9;color:var(--text);border-radius:6px;margin:auto;box-shadow:0 25px 90px #271b3655}.case-dialog::backdrop{background:#271b36aa}.case-dialog h2{font-size:1.6rem;padding-right:2rem}.case-dialog img{width:100%;max-height:48svh;object-fit:contain;margin:1rem 0}.close-case{position:absolute;right:1rem;top:1rem;width:44px;height:44px;background:none;border:1px solid var(--border);font-size:1.5rem;border-radius:4px}.case-dialog-note{font-size:.75rem;color:var(--muted)}.case-dialog-copy{font-size:.92rem;margin-top:1rem}.asset-unavailable{height:auto!important;min-height:90px;object-fit:contain}.asset-note{display:block;padding:1rem;font-size:.8rem;background:#eee5e9;color:#4b3545}

.service-visual{grid-column:1;display:grid;grid-template-columns:1fr;max-width:430px;border:1px solid #826375;padding:1.2rem;color:#f5e4ef;background:#4c3847;gap:.3rem;transform-origin:left center;animation:service-enter .35s ease-out}.service-visual span{font-size:.72rem;color:#e4c8da}.service-visual b{font-size:1rem;padding-bottom:.7rem;border-bottom:1px solid #806475}.service-visual b:last-child{border:0;padding-top:.4rem;padding-bottom:0}.service-visual-0{border-radius:0;border-top:12px solid #927181}.service-visual-1{background:#44354d}.service-visual-2{background:#4d3242}@keyframes service-enter{from{transform:translateX(-8px)}to{transform:none}}
@media(min-width:900px){.studio-stage{max-width:none}.studio-drawing svg{max-height:370px}.hero-sequence .hero{gap:2rem}.scene-ledger{padding:.65rem 0}.hero .studio-status{min-height:0}}

/* A real bill has a room, visible formula and a printer-like output tray. */
#demo{background:#ede7e2;padding-block:5rem}#demo .container{max-width:1100px}.room-ticket{display:flex;gap:1rem;align-items:center;border-top:1px solid #bcaeac;border-bottom:1px solid #bcaeac;padding:1rem 0;margin:2rem 0 0}.room-ticket>span{font-size:.8rem}.room-ticket strong{font:700 2rem 'IBM Plex Sans Thai',sans-serif;color:var(--accent2)}.room-ticket small{margin-left:auto;color:var(--muted)}#demo .demo-grid{margin-top:1.5rem}.demo-panel{border:0;border-radius:4px;box-shadow:none;padding:2rem;background:#fffdf9}#demoBill{border-top:10px solid #392b34;position:relative;background:#faf5ed}#demoBill::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(135deg,transparent 50%,#ede7e2 50%) 0 0/12px 12px}.demo-empty{padding:3rem 1rem;color:var(--muted);font-size:1rem}.bill-formula{font-size:.8rem;line-height:1.8;padding:.8rem 0;border-top:1px solid var(--border);color:var(--muted)}.demo-btn{background:var(--accent2);border-radius:4px;min-height:48px}.demo-input-error{color:#a0004e;font-size:.87rem;margin-top:.8rem}input[aria-invalid="true"]{border-color:#a0004e}.demo-receipt{animation:none!important}.demo-printed .demo-row.total{animation:bill-total .4s ease-out}@keyframes bill-total{from{background:#e9dcf6}to{background:transparent}}#demoBill.demo-printed::before{display:none}

/* Three choices, original service descriptions, one clear path into contact. */
#services{background:#392b37;color:#fff5f8;padding-block:6rem}#services .section-tag{color:#f9a9ce}#services .section-sub{color:#e1cbd7}.service-chooser{display:flex;gap:.7rem;flex-wrap:wrap;margin:2.2rem 0}.service-chooser button{background:none;color:#fff;border:1px solid #826375;padding:.85rem 1.2rem;border-radius:4px;font-size:1rem;min-height:48px}.service-chooser button[aria-pressed="true"]{background:#fff3f7;color:#392b37;border-color:#fff3f7}#services .services-grid{display:block;margin:0}#services .service-group{display:grid;grid-template-columns:1fr 1fr;gap:1rem 3.5rem;border-top:1px solid #826375;padding:2rem 0}#services .service-group>h3{grid-column:1;font-size:2rem;line-height:1.3;margin:0;color:#fff}#services .service-problem{grid-column:1;font-size:1.05rem;color:#eddce5;max-width:430px}#services .service-card{grid-column:2;border-color:#705565;margin:0;padding:.2rem 0 1rem}#services .service-card h3{color:#fff;font-size:1.1rem}#services .service-card p,#services .service-tags .tag{color:#e5d1de;font-size:.87rem}#services .service-related{grid-column:1;color:#e5d1de;font-size:.8rem}#services .talk-service{grid-column:1;justify-self:start;background:#f9d9e8;color:#472239;padding:.8rem 1.2rem;border:0;border-radius:4px;text-decoration:none;min-height:44px}#services .service-group-examples{grid-column:2;color:#e5d1de;border-color:#705565}#services .other-uses{border-color:#705565}#services .other-uses summary{color:#fff0f7;min-height:44px;padding:.5rem 0}#services .usecase-intro{color:#e5d1de}#services .usecase-chips{justify-content:flex-start;max-width:none}#services .usecase-chips span{background:none;color:#e5d1de;border-color:#705565;border-radius:4px}

#why{background:#f2eae6;padding-block:4rem}#why .why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 2.5rem}#why .why-card{border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none;background:none;padding:1.2rem 0}#why .why-card h3{font-size:1rem;color:var(--text)}#why .why-card p{font-size:.86rem}#review{background:#fffdf9}#review .review-track{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;overflow:visible;scroll-snap-type:none;padding:0}#review .review-track>.review-card{width:auto;min-width:0;flex:none;padding:0;border:0;box-shadow:none;background:none;border-radius:0;margin-top:2rem}#review .review-pull{background:none;-webkit-text-fill-color:var(--text);color:var(--text);font-size:clamp(1.45rem,2.5vw,2.2rem);line-height:1.5;margin:1.4rem 0}#review .review-work{width:100%;height:175px;object-fit:cover;object-position:top;border-radius:3px}#review .review-nav{display:none}#review .review-ba{grid-template-columns:1fr}#review .review-ba>div{background:none;border:0;border-top:1px solid var(--border);border-radius:0;padding:.8rem 0}.review-by{font-size:.78rem}
#process{background:#f1e9e5!important}.process-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.2rem}.process-step{margin:0;padding:1.5rem 0 0;border:0;border-top:1px solid #baa4b0;display:block}.process-step::before{position:static;box-shadow:none;background:none;color:var(--accent);width:auto;height:auto;display:block;text-align:left;border-radius:0;margin-bottom:1rem;font-size:.85rem}.step-content h3{font-size:1.05rem;line-height:1.5}.step-content p{font-size:.8rem}.step-artifact{display:block;background:#fffdf8;border:1px solid #e2d4ce;box-shadow:3px 5px 0 #d9c8ce;padding:1rem .7rem;margin:1.3rem .3rem 0 0;font-size:.7rem;min-height:62px}.price-grid{gap:0}.price-card{border:0;border-top:1px solid var(--text);border-right:1px solid var(--border);border-radius:0;padding:1.8rem;background:none;box-shadow:none}.price-card:last-child{border-right:0}.price-num{font-size:2.6rem;line-height:1.2}.price-eg{min-height:5rem}.price-example{margin-top:1.4rem;font-size:.83rem;color:var(--accent);text-underline-offset:4px}.faq-item{border-radius:0;background:none;border:0;border-bottom:1px solid var(--border);box-shadow:none}.faq-item summary{padding:1.2rem 0}.faq-item p{padding:0 0 1.2rem}.faq-item summary>span{display:none}
#contact{background:#efe4e9;padding-block:6rem}#contact>.container{max-width:1100px;position:relative}#contact h2{font-size:clamp(2.2rem,4.8vw,4rem);line-height:1.27;max-width:920px}#contact form{max-width:660px!important;margin-top:2rem!important}#contact .contact-line-direct{font-size:1.08rem;margin-top:.4rem}.contact-interests{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.5rem 0}.contact-interests button{border:1px solid #b993a6;background:none;padding:.65rem .9rem;border-radius:3px;color:var(--text);font-size:.84rem;min-height:44px}.prefill-note{font-size:.77rem!important;color:var(--accent2)!important;margin:.5rem 0 0!important}.social-coming{display:inline-block;font-size:.75rem;color:var(--muted);align-self:center}.social-coming::after{display:none}.contact-options{align-items:center}.form-success h3:focus{outline:3px solid var(--accent2);outline-offset:5px}footer{background:#392b37;color:#ecdbe5}footer .footer-logo{background:#fff5f8;padding:12px;border-radius:3px;width:100px}.case-dialog:focus-visible{outline:none}

@media(max-width:1100px){.hero h1{font-size:4rem}.stage-heading{padding:1rem 1rem 0;font-size:.69rem}.scene-actions{gap:.45rem;padding:0 1rem}.hero .studio-status{margin:.7rem 1rem}.scene-ledger{margin:0 1rem}.hero .scene-journey{padding:.5rem 1rem}.scene-actions button{font-size:.72rem}.process-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:899px){.hero-sequence .hero{position:relative;top:auto;height:auto;min-height:0;display:block;padding:7rem 1.25rem 2rem}.hero-copy{max-width:660px}.hero h1{font-size:clamp(2.9rem,10vw,4.7rem)}.hero .hero-lead{font-size:1rem}.hero-path{margin:1.3rem 0 1.5rem}.hero-runway{display:none}.studio-stage{margin-top:1.6rem;width:100%;max-width:750px}.studio-drawing{min-height:0}.stage-heading{font-size:.72rem}.scene-actions button{font-size:.82rem}.scene-ledger{font-size:.65rem}.scene-ledger b{font-size:.84rem}.hero .studio-status{font-size:.73rem}.front-wall{transform:translate(-70px,40px)}.studio-stage:not([data-order="0"]) .front-wall,.studio-stage[data-world="1"] .front-wall,.studio-stage[data-world="2"] .front-wall{transform:translate(-115px,40px);opacity:.1}#portfolio .portfolio-card,#portfolio .portfolio-card.featured,#portfolio .portfolio-card:nth-child(even){grid-template-columns:1fr;display:grid;gap:1.3rem;padding:2rem 0 3rem}#portfolio .portfolio-card:nth-child(even) .portfolio-thumb,#portfolio .portfolio-card:nth-child(even) .portfolio-body{order:initial}#portfolio .portfolio-body{padding:0!important}.website-showcase{grid-template-columns:1fr;padding:2rem 1.5rem}.website-showcase .responsive-composition{max-width:650px}.case-navigation{gap:.4rem}.case-navigation a,.case-navigation button{font-size:.77rem;padding:.6rem .7rem}#why .why-grid{grid-template-columns:1fr 1fr}#review .review-track{gap:1.5rem}.hero-sequence{padding-bottom:1rem}}
@media(max-width:600px){section{padding:3.5rem 1.25rem}#portfolio,#services,#demo,#contact{padding:3.5rem 1.25rem}.hero-sequence .hero{padding-top:6.5rem}.hero h1{font-size:clamp(2.85rem,12vw,4rem)}.hero .hero-btns .btn-primary{font-size:.83rem;padding:.8rem .85rem}.hero-path{font-size:.7rem!important}.stage-heading{padding:1.2rem .8rem 0;gap:.3rem;flex-wrap:wrap}.stage-heading small{font-size:.59rem}.studio-drawing{margin:.2rem -8%;width:116%;overflow:hidden}.studio-drawing svg{overflow:hidden}.scene-actions{gap:.5rem;align-items:center}.scene-actions #studioOrder{flex:1}.scene-actions a{font-size:.69rem}.scene-ledger{gap:.3rem}.scene-ledger>span:last-child{width:100%;margin-top:.35rem}.scene-journey{line-height:1.5}#portfolio .section-title{font-size:2.25rem}.portfolio-more .portfolio-grid{grid-template-columns:1fr}.case-dialog{padding:1.2rem}.case-dialog h2{font-size:1.3rem}.website-showcase{margin:2rem 0 0;padding:1.7rem 1rem}.phone-composition{min-width:104px}.room-ticket{flex-wrap:wrap}.room-ticket small{margin:0}.demo-grid{grid-template-columns:1fr}.demo-panel{padding:1.3rem}.demo-panel input,.demo-panel select,#contact input,#contact select,#contact textarea{font-size:16px}.room-ticket strong{font-size:1.8rem}.service-chooser{gap:.4rem}.service-chooser button{font-size:.82rem;padding:.7rem .65rem;flex:1}#services .service-group{display:block;padding:1.5rem 0}#services .service-group>h3{font-size:1.6rem}#services .service-problem{margin:1rem 0 1.5rem}#services .service-card{margin:1rem 0}#services .service-related{margin:1.2rem 0}#why .why-grid,#review .review-track{grid-template-columns:1fr}#review .review-work{height:170px}#review .review-track>.review-card{margin-top:1rem;padding-bottom:1.8rem;border-bottom:1px solid var(--border)}.process-steps{grid-template-columns:1fr}.process-step{display:grid;grid-template-columns:25px 1fr;gap:1rem;padding:1.4rem 0 0}.process-step::before{margin:0}.step-artifact{max-width:290px;min-height:0;margin:1rem .5rem 0 0}.price-grid{grid-template-columns:1fr}.price-card{border-right:0;padding:1.5rem 0}.price-num{font-size:2.6rem}.price-eg{min-height:0}#contact form>div:first-child{grid-template-columns:1fr!important}#contact h2{font-size:2.2rem}.contact-interests{gap:.4rem}.contact-interests button{font-size:.78rem}.social-coming{display:block}}
@media(max-height:760px) and (min-width:900px){.hero-sequence .hero{position:relative;top:auto;height:auto;padding-top:7rem;min-height:0}.hero-runway{height:0}.studio-stage{max-width:680px}.hero h1{font-size:4.3rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-sequence .hero{position:relative;top:auto;height:auto;padding-top:7rem}.hero-runway{display:none}}

/* ผลงาน: เว็บพลิกกรอบ / ผังห้องเช่า (ฉากเปิดอยู่ใน stage.css) */
#portfolio{padding-top:1.5rem}#portfolio .section-tag{margin-bottom:.25rem}#portfolio .section-title{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.35}#portfolio .section-sub{font-size:.78rem;margin:.4rem 0 0}#portfolio .portfolio-grid{margin-top:.5rem}#case-books{padding-top:1rem!important}#case-books .portfolio-thumb{overflow:hidden}#case-books .portfolio-thumb::after{content:'จากออเดอร์ในฉาก → ระบบที่สร้างจริง';position:absolute;left:1rem;bottom:1rem;background:#fffdf7;color:#332733;font-size:.68rem;padding:.6rem .8rem;box-shadow:3px 5px 0 #d30067}
#case-website .portfolio-thumb{position:relative;isolation:isolate;perspective:900px;overflow:visible;box-shadow:0 22px 35px #26172a20}
#case-website .portfolio-thumb::before{content:'';position:absolute;inset:0;background:#061422 url('portfolio/books.jpg') center/contain no-repeat;transform-origin:50% 50%;transform:rotateY(calc(var(--web-flip,1)*-90deg));backface-visibility:hidden;z-index:1;pointer-events:none}
#case-website .portfolio-thumb img{transform:rotateY(calc((1 - var(--web-flip,1))*75deg))!important;transform-origin:center;backface-visibility:hidden;opacity:calc(.25 + var(--web-flip,1)*.75)}
.website-showcase .responsive-composition{transform:translateY(calc((1 - var(--web-flip,1))*50px));transform-origin:center;opacity:calc(.55 + var(--web-flip,1)*.45)}
.website-showcase .phone-composition{transform:translate(calc((1 - var(--web-flip,1))*-50px),calc((1 - var(--web-flip,1))*35px)) rotate(calc((1 - var(--web-flip,1))*-8deg));box-shadow:8px 18px 26px #30274435}
#case-rooms .portfolio-thumb{position:relative;overflow:hidden}.room-map{position:absolute;right:1rem;bottom:1rem;width:min(52%,310px);background:#fffdf9;box-shadow:8px 12px 24px #20314b35;border-top:4px solid #3869d7;padding:1rem;transform-origin:bottom right;transform:perspective(800px) rotateX(calc((1 - var(--room-unfold,1))*-38deg)) translateY(calc((1 - var(--room-unfold,1))*25px));opacity:calc(.65 + var(--room-unfold,1)*.35)}.room-map>span{font-size:.72rem;font-weight:700;color:#1e3050}.room-map>small{font-size:.56rem;color:#58667c;line-height:1.5}.room-map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;margin:.5rem 0}.room-map-grid button{min-height:44px;background:#e7edf7;border:1px solid #b6c6e4;color:#203150;border-radius:2px;padding:.35rem;font-size:.72rem;text-align:left}.room-map-grid button small{display:block;font-size:.55rem}.room-map-grid button[aria-pressed="true"]{background:#3869d7;color:#fff;border-color:#3869d7}
@media(max-width:600px){.room-map{width:62%;right:.5rem;bottom:.5rem;padding:.6rem}.room-map-grid button{font-size:.64rem}.room-map>small{display:none}#portfolio{padding-top:1rem}#portfolio .section-title{font-size:1.25rem}.website-showcase .phone-composition{transform:translate(calc((1 - var(--web-flip,1))*-20px),calc((1 - var(--web-flip,1))*20px))}}
@media(prefers-reduced-motion:reduce){.case-bridge{display:none}.studio-drawing,#case-website .portfolio-thumb img,#case-website .portfolio-thumb::before,.website-showcase .responsive-composition,.website-showcase .phone-composition,.room-map{transform:none!important;opacity:1!important}#case-website .portfolio-thumb::before{display:none}.room-map{position:relative;right:auto;bottom:auto;width:100%;box-shadow:none}}
html.force-reduced *,html.force-reduced *::before,html.force-reduced *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.force-reduced .hero-runway,html.force-reduced .case-bridge,html.force-reduced #case-website .portfolio-thumb::before{display:none!important}
html.force-reduced .studio-drawing,html.force-reduced #case-website .portfolio-thumb img,html.force-reduced .website-showcase .responsive-composition,html.force-reduced .website-showcase .phone-composition,html.force-reduced .room-map{transform:none!important;opacity:1!important}

/* 2026-10-12: one connected visual language from shop to proof to billing desk. */
#portfolio .portfolio-grid>.portfolio-card:nth-of-type(4){border-bottom:1px solid var(--border)}
#case-documents .portfolio-thumb{background:#efe8e2;padding:.8rem}
#case-documents .document-flow{margin-block:1.7rem 1rem}
#case-documents .document-flow span{background:#e9e3ec;border:0;border-top:2px solid #c8bac7;padding:1rem .4rem}
#case-documents .document-flow[data-step="0"] span:nth-child(1),#case-documents .document-flow[data-step="1"] span:nth-child(2),#case-documents .document-flow[data-step="2"] span:nth-child(3),#case-documents .document-flow[data-step="3"] span:nth-child(4){border-color:#3200a9;background:#e4dcf2}
.website-showcase{background:#e5e8eb;grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);margin:1rem -2rem 2rem;padding:3rem 2rem 3rem 3rem;overflow:hidden}
.website-showcase h3{font-size:clamp(2rem,3.4vw,3.4rem);letter-spacing:-.025em}
.responsive-composition{padding:0 3.3rem 2.2rem 0}
.responsive-composition>img{border:0;border-radius:3px;box-shadow:12px 20px 36px #20283a25}
.phone-composition{width:26%;min-width:130px;background:#fffefb;border:6px solid #192a39;padding:0;border-radius:19px;overflow:hidden;box-shadow:10px 21px 29px #20283a40}
.phone-composition img{display:block;width:100%;height:auto}
#case-website .portfolio-thumb{background:#e5e8eb}
#case-website .portfolio-thumb img{object-fit:contain}
.why-proof{display:inline-block;margin-top:1rem;color:var(--accent);font-size:.8rem;font-weight:700;text-underline-offset:4px}
.price-example-note{display:block;margin-top:.45rem;color:var(--muted);font-size:.72rem;line-height:1.5}
#why .why-card{min-height:180px;display:flex;flex-direction:column;align-items:flex-start}
#why .why-card .why-proof{margin-top:auto}

/* A desk with two work surfaces: meter readings on the left, the printed result on the right. */
#demo{background:#e6e2eb;color:#302536;padding-block:6rem}
#demo .container{max-width:1210px}
#demo .section-title{font-size:clamp(2.2rem,4.5vw,4.3rem);max-width:900px}
#demo .section-sub{max-width:650px;line-height:1.7}
.room-ticket{background:#d9d3e2;padding:1rem 1.4rem;margin-top:2.3rem;border:0;border-top:2px solid #382b3a;display:flex;align-items:baseline;gap:.85rem}
.room-ticket>span:first-child{font-size:.76rem;font-weight:700}
.room-ticket strong{font-size:2.65rem;line-height:1;color:#3200a9}
.room-ticket small{margin:0;color:#382b3a;font-size:.82rem}
.room-ticket-note{margin-left:auto;color:#625768;font-size:.7rem}
#demo .demo-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0;margin-top:0;align-items:stretch}
#demo .demo-panel{box-shadow:none;border-radius:0}
#demo .demo-workbench{background:#382b3a;color:#fffafc;padding:2.1rem 2.3rem 2.3rem}
.demo-workbench-head{border-bottom:1px solid #907b91;padding-bottom:1.2rem;margin-bottom:1.2rem}
.demo-workbench-head>span,.demo-output-heading{font-size:.7rem;letter-spacing:.015em}
.demo-workbench-head>span{color:#f8bddb}
.demo-workbench-head h3{font-size:clamp(1.45rem,2.1vw,2rem);line-height:1.3;margin:.5rem 0!important;color:#fff}
.demo-workbench-head p{font-size:.81rem;color:#efdae7;line-height:1.7}
.demo-workbench .demo-field label{color:#f3deeb;font-size:.8rem;font-weight:600}
.demo-workbench input,.demo-workbench select{background:#fffefb;color:#292230;border:1px solid #d1c3cc;border-radius:3px;min-height:48px;width:100%;padding:.5rem .7rem}
.demo-workbench .demo-room-field{margin-bottom:1.2rem}
.meter-group{border:0;border-top:1px solid #806d80;padding:1rem 0 .6rem;margin:0;min-width:0}
.meter-group legend{font-weight:700;font-size:.94rem;color:#fff;padding:0 .6rem 0 0}
.meter-pair{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:center;gap:.5rem}
.meter-pair .demo-field{margin-bottom:.55rem;min-width:0}
.meter-arrow{align-self:end;padding-bottom:1.45rem;color:#f5bdd7;text-align:center;font-size:1.2rem}
.meter-usage{display:inline-block;margin:.1rem 0 .6rem;background:#634159;color:#fff9fd;padding:.45rem .7rem;font-size:.78rem;font-weight:700;border-radius:2px;font-variant-numeric:tabular-nums}
.demo-estimate{margin:1.2rem 0 .9rem;padding:1rem 1.1rem;background:#5b435a;border-top:2px solid #eb9ac3}
.demo-estimate>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.demo-estimate span{font-size:.8rem;color:#f6deeb}
.demo-estimate strong{font-size:clamp(1.6rem,2.4vw,2.25rem);font-variant-numeric:tabular-nums;color:#fff}
.demo-estimate p{font-size:.78rem;color:#fff5fa;margin:.35rem 0 .2rem;line-height:1.6}
.demo-estimate small{font-size:.68rem;color:#ead2e0;line-height:1.5}
#demo .demo-btn{background:#d30067;width:100%;font-size:.93rem;border-radius:3px;min-height:49px;box-shadow:none;margin-top:.3rem}
#demo .demo-btn:hover{background:#ba005a;opacity:1}
#demo .demo-input-error{background:#fff1f5;color:#9f004b;padding:.75rem;margin-top:.9rem;line-height:1.5;border-radius:2px}
.demo-output-shell{background:#cfc5d4;padding:1.25rem 1.3rem 1.6rem;min-width:0;display:flex;flex-direction:column}
.demo-output-heading{display:flex;justify-content:space-between;gap:1rem;padding:.2rem .5rem 1.1rem;color:#4e3c50;font-weight:700}
#demoBill{background:#fffdfa;border:0;border-top:13px solid #382b3a;min-height:540px;padding:2.1rem;scroll-margin-top:90px;overflow:hidden;box-shadow:8px 14px 22px #382b3a19}
#demoBill::after{display:none}
#demoBill.demo-printed::before{display:none}
.demo-empty{display:flex;min-height:450px;align-items:center;justify-content:center;flex-direction:column;gap:.8rem;padding:2rem;color:#5e5363}
.demo-empty>span{font-size:3rem;color:#735f73}
.demo-empty strong{font-size:1.2rem;color:#382b3a}
.demo-empty p{max-width:22rem;line-height:1.7;font-size:.83rem}
.receipt-masthead{display:flex;justify-content:space-between;gap:1rem;font-size:.65rem;color:#725d70;border-bottom:1px solid #d8cbd5;padding-bottom:.8rem;letter-spacing:.04em}
#demoBill .demo-receipt h3{font-size:clamp(1.5rem,2vw,2.2rem);line-height:1.35;color:#35283a;margin:1.6rem 0 .4rem}
.receipt-tenant{font-size:.85rem;color:#635466;margin-bottom:1.4rem}
#demoBill .demo-row{border-bottom:1px solid #e2d9df;padding:.85rem 0;color:#3a303d;font-size:.9rem;align-items:baseline}
#demoBill .demo-row span:last-child{font-weight:700;font-variant-numeric:tabular-nums}
#demoBill .demo-row .demo-detail{display:block;font-size:.73rem;color:#6f6370;font-weight:400}
#demoBill .demo-row.total{border:0;border-top:2px solid #382b3a;margin-top:1.5rem;padding:1rem 0 0;color:#302536;display:flex;align-items:baseline}
#demoBill .demo-row.total span{font-size:.95rem;white-space:normal}
#demoBill .demo-row.total strong{font-size:clamp(2.3rem,4vw,3.3rem);line-height:1.1;color:#d30067;font-variant-numeric:tabular-nums}
#demoBill .demo-note{border:0;background:none;padding:1rem 0 0;margin-top:1.5rem;border-top:1px solid #e2d9df;color:#665a66;font-size:.73rem;line-height:1.65;border-radius:0}
#demoBill.demo-printed .demo-receipt{animation:receipt-unfold .52s cubic-bezier(.16,1,.3,1) both!important}
#demoBill.demo-printed .demo-row.total strong{animation:total-mark .35s .22s cubic-bezier(.16,1,.3,1) both}
@keyframes receipt-unfold{from{opacity:.75;transform:translateY(-16px);clip-path:inset(0 0 48% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes total-mark{from{transform:translateY(5px);opacity:.5}to{transform:none;opacity:1}}
.demo-next{display:flex;gap:.75rem;flex-wrap:wrap;border-top:1px solid #e2d9df;padding-top:1.2rem;margin-top:1.3rem}
.demo-next button,.demo-next a{font:600 .78rem 'Noto Sans Thai',sans-serif;text-decoration:none;border:1px solid #7d6c7d;padding:.65rem .75rem;color:#382b3a;background:#fff;min-height:44px;border-radius:2px;display:inline-flex;align-items:center}
.demo-next a{border-color:#d30067;color:#b90059}
#demoResultTitle:focus-visible{outline:3px solid #3200a9;outline-offset:5px}

@media(max-width:900px){.website-showcase{grid-template-columns:1fr;margin-inline:0;padding:2rem 1.5rem}.responsive-composition{max-width:700px}.room-ticket-note{display:none}#demo .demo-grid{grid-template-columns:1fr}.demo-output-shell{padding:1rem}}
@media(max-width:600px){#demo{padding:4.3rem 1.25rem}.room-ticket{padding:.9rem .7rem;align-items:center;flex-wrap:wrap;gap:.45rem;margin-top:1.5rem}.room-ticket strong{font-size:2.2rem}.room-ticket small{font-size:.78rem}#demo .demo-workbench{padding:1.4rem 1.1rem}.demo-workbench-head h3{font-size:1.5rem}.meter-pair{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:.25rem}.meter-pair input{font-size:16px}.demo-estimate{padding:.85rem}.demo-estimate>div{align-items:center}.demo-estimate strong{font-size:1.7rem}.demo-output-shell{padding:.8rem .55rem 1rem}#demoBill{padding:1.25rem;min-height:370px}.demo-empty{min-height:300px}#demoBill .demo-receipt{display:flex;flex-direction:column}#demoBill .receipt-masthead{order:0}#demoBill .demo-receipt h3{order:1}#demoBill .receipt-tenant{order:2;margin-bottom:.3rem}#demoBill .demo-row.total{order:3;margin:.4rem 0 .8rem;padding:.6rem 0;border-top:0;border-bottom:2px solid #382b3a}#demoBill .demo-row:not(.total){order:4}#demoBill .demo-note{order:5}#demoBill .demo-row.total strong{font-size:2.4rem}.demo-next{display:grid;grid-template-columns:1fr}.demo-next button,.demo-next a{justify-content:center;text-align:center}.website-showcase{padding:1.7rem 1rem}.website-showcase h3{font-size:2rem}.responsive-composition{padding:0 1.1rem 2rem 0}.phone-composition{width:31%;min-width:110px;border-width:4px}.room-map{width:62%}}
@media(prefers-reduced-motion:reduce){#demoBill.demo-printed .demo-receipt,#demoBill.demo-printed .demo-row.total strong{animation:none!important;clip-path:none!important;opacity:1!important;transform:none!important}}
html.force-reduced #demoBill.demo-printed .demo-receipt,html.force-reduced #demoBill.demo-printed .demo-row.total strong{animation:none!important;clip-path:none!important;opacity:1!important;transform:none!important}