/* จังหวะของทั้งหน้า หลังฉากเปิด (2026-10-16)
   โหลดหลัง door.css/stage.css จึงทับกฎเดิมได้ — ภาษา motion ต่างกันตามเนื้อหา:
   ผลงาน = scrub ตามการเลื่อน (--in), ขั้นตอน = เส้นวาดต่อเนื่อง (--draw), หัวข้อ/รายการ = reveal ครั้งเดียว (.is-in) */

/* ── ภาพขายหนังสือ: คงโทนเข้ม แต่สว่างขึ้นเล็กน้อยให้เข้ากับภาพอื่น ── */
.layer-ui img, .lineup img[src*="books"], #case-books .portfolio-thumb img,
.review-work[src*="books"], .case-dialog img[src*="books"]{ filter:brightness(1.14) contrast(.97) saturate(1.05) }

/* ── หัวข้อทุก section ใช้สเกลเดียวกับฉากเปิด ────────────────── */
#portfolio .section-tag, #demo .section-tag, #why .section-tag, #review .section-tag, #process .section-tag, #pricing .section-tag, #faq .section-tag{
  font-size:.8rem; font-weight:600; letter-spacing:.02em; margin-bottom:.9rem;
}
#portfolio .section-title, #why .section-title, #review .section-title, #process .section-title, #pricing .section-title, #faq .section-title{
  font-size:clamp(2.1rem,4.2vw,3.5rem); line-height:1.22; letter-spacing:-.02em; max-width:20ch; margin-bottom:1rem; text-wrap:balance;
}
#why .section-sub, #review .section-sub, #process .section-sub, #pricing .section-sub, #faq .section-sub{ font-size:1.02rem; line-height:1.75; max-width:36rem }

/* ── reveal ครั้งเดียว: หัวข้อและรายการ (JS ใส่ .reveal-item และ .is-in) ── */
.reveal-item{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .75s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0s) }
.is-in .reveal-item, .is-in.reveal-item{ opacity:1; transform:none }

/* ── ผลงาน: ภาพเลื่อนเข้าแล้วคลายมุมเอียง ข้อความตามมาทีหลัง ─────── */
#portfolio .portfolio-grid > .portfolio-card{ --in:1; --side:-1 }
#portfolio .portfolio-grid > .portfolio-card:nth-child(even){ --side:1 }
#portfolio .portfolio-grid > .portfolio-card > .portfolio-thumb{
  transform:perspective(1400px) translateY(calc((1 - var(--in))*44px)) rotateY(calc((1 - var(--in))*var(--side)*12deg)) scale(calc(.93 + var(--in)*.07));
  transform-origin:center; opacity:calc(.25 + var(--in)*.75); will-change:transform;
}
#portfolio .portfolio-grid > .portfolio-card > .portfolio-body{
  transform:translateY(calc((1 - var(--in))*28px)); opacity:calc(.15 + var(--in)*.85);
}
#portfolio .portfolio-grid > .portfolio-card > .portfolio-thumb img{ box-shadow:0 30px 50px -24px rgba(38,23,42,.45) }

/* ── เหตุผล: เลิกการ์ด ใช้เส้นคั่นและตัวหนังสือ ────────────────── */
#why{ background:#f6efec; padding-block:6rem }
#why .why-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 3rem; margin-top:2.75rem }
#why .why-card{ background:none; border:0; border-top:1px solid #c9b3bf; border-radius:0; box-shadow:none; padding:1.4rem 0 2rem; min-height:0; display:flex; flex-direction:column; align-items:flex-start }
#why .why-card h3{ color:var(--text); font-size:1.18rem; line-height:1.35; margin-bottom:.55rem; font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif }
#why .why-card p{ font-size:.92rem; line-height:1.75; color:var(--muted) }
#why .why-card .why-proof{ margin-top:auto; padding-top:1rem }

/* ── รีวิว: คำโปรยเป็นสีทึบ ไม่ไล่เฉดตัวหนังสือ ───────────────── */
#review{ padding-block:6rem }
#review .review-pull{ background:none; -webkit-text-fill-color:currentColor; color:var(--text); font-size:clamp(1.45rem,2.6vw,2rem); line-height:1.4; letter-spacing:-.01em }
#review .review-card{ border-radius:6px; box-shadow:none; border:1px solid var(--border) }

/* ── ขั้นตอน: เส้นวาดข้ามห้าขั้นตามการเลื่อน (--draw จาก JS) ───── */
#process{ padding-block:6rem }
#process .process-steps{ --draw:1; position:relative; margin-top:3rem; padding-top:1.4rem }
#process .process-steps::before{ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:#cdb8c4 }
#process .process-steps::after{ content:''; position:absolute; left:0; top:0; height:3px; margin-top:-1px; width:calc(var(--draw)*100%); background:linear-gradient(90deg, var(--accent), var(--accent2)); transition:none }
#process .process-step{ border-top:0; padding-top:.4rem; --k:0 }
#process .process-step:nth-child(2){ --k:1 } #process .process-step:nth-child(3){ --k:2 } #process .process-step:nth-child(4){ --k:3 } #process .process-step:nth-child(5){ --k:4 }
#process .process-step::before{ font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.04em;
  color:var(--muted); opacity:calc(.45 + min(1, max(0, (var(--draw)*5 - var(--k))))*.55); margin-bottom:.8rem }
#process .process-step .step-content{ opacity:calc(.35 + min(1, max(0, (var(--draw)*5 - var(--k))))*.65); transform:translateY(calc((1 - min(1, max(0, (var(--draw)*5 - var(--k)))))*10px)) }
#process .step-content h3{ font-size:1.08rem; line-height:1.4; margin-bottom:.45rem }
#process .step-content p{ font-size:.86rem; line-height:1.7 }
#process .step-artifact{ box-shadow:none; border-radius:4px; background:#fffaf6; border-color:#dccbd3; margin-right:.6rem }

/* ── ราคา: โทนเดียวกับฉากเปิด ตัวเลขใหญ่ ───────────────────── */
#pricing{ background:
    radial-gradient(55% 60% at 85% 20%, rgba(232,67,127,.16), transparent 70%),
    radial-gradient(45% 50% at 12% 90%, rgba(107,63,204,.12), transparent 70%),
    linear-gradient(165deg, #fff8f6, #fbf4f2 55%, #f7e7ec);
  color:var(--text); padding-block:7rem }
#pricing .section-tag{ color:var(--accent) } #pricing .section-sub{ color:var(--muted) }
#pricing .price-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 2.5rem; margin-top:3rem }
#pricing .price-card{ border:0; border-top:1px solid #c9b3bf; border-right:0; padding:1.6rem 0 2.2rem; background:none; box-shadow:none; display:flex; flex-direction:column }
#pricing .price-card h3{ color:var(--text); font-size:1.25rem; margin-bottom:.6rem }
#pricing .price-eg{ color:var(--muted); font-size:.92rem; line-height:1.75; min-height:0; flex:1; margin-bottom:1.6rem }
#pricing .price-num{ color:var(--text); font-size:clamp(2.7rem,4.6vw,4.1rem); line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
#pricing .price-num span{ color:var(--accent); font-size:.8rem; font-weight:600; margin-bottom:.35rem; letter-spacing:.02em }
#pricing .price-example{ color:var(--accent); font-size:.84rem; margin-top:1.2rem }
#pricing .price-example-note{ color:var(--muted) }
#pricing .price-note{ color:var(--muted); font-size:.95rem; line-height:1.75; max-width:40rem; margin:3rem 0 0; text-align:left }
#pricing .container > div[style]{ text-align:left!important; margin-top:1.5rem!important }

/* ── FAQ: เส้นคั่น ตัวใหญ่ขึ้น ───────────────────────────────── */
#faq{ padding-block:6rem }
#faq .faq-list{ margin-top:2.5rem; gap:0; border-top:1px solid #d7c4cd }
#faq .faq-item{ border-bottom:1px solid #d7c4cd; background:none; border-radius:0; box-shadow:none }
#faq .faq-item summary{ font-size:1.06rem; padding:1.25rem 0 }
#faq .faq-item summary::after{ font-size:1.6rem; transition:transform .25s cubic-bezier(.16,1,.3,1) }
#faq .faq-item[open] summary::after{ transform:rotate(45deg) }
#faq .faq-item p{ padding:0 0 1.4rem; max-width:62ch; font-size:.95rem; line-height:1.8 }
#faq .faq-item[open] p{ animation:faq-open .35s cubic-bezier(.16,1,.3,1) both }
@keyframes faq-open{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* ── เดโมบิล: ใบแจ้งยอดพิมพ์ทีละบรรทัด ─────────────────────── */
#demoBill.demo-printed .demo-receipt > *{ animation:row-print .42s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--r,0)*.11s + .18s) }
#demoBill.demo-printed .demo-receipt > :nth-child(1){ --r:0 } #demoBill.demo-printed .demo-receipt > :nth-child(2){ --r:1 }
#demoBill.demo-printed .demo-receipt > :nth-child(3){ --r:2 } #demoBill.demo-printed .demo-receipt > :nth-child(4){ --r:3 }
#demoBill.demo-printed .demo-receipt > :nth-child(5){ --r:4 } #demoBill.demo-printed .demo-receipt > :nth-child(6){ --r:5 }
#demoBill.demo-printed .demo-receipt > :nth-child(7){ --r:6 } #demoBill.demo-printed .demo-receipt > :nth-child(8){ --r:7 }
#demoBill.demo-printed .demo-receipt > :nth-child(9){ --r:8 }
#demoBill.demo-printed .demo-next{ animation:row-print .4s ease-out 1.2s both }
@keyframes row-print{ from{ opacity:0; transform:translateY(-8px); clip-path:inset(0 0 100% 0) } to{ opacity:1; transform:none; clip-path:inset(0 0 -4px 0) } }
#demoBill.demo-printed .demo-row.total strong{ animation:none }
.demo-estimate strong.tick{ animation:num-tick .45s cubic-bezier(.16,1,.3,1) }
@keyframes num-tick{ 0%{ color:#ff5aa5; transform:translateY(-3px) } 100%{ color:inherit; transform:none } }

/* ── บั๊ก: รีวิวใบแรกถูกบีบเหลือ 11px บนมือถือ ─────────────────
   ฐานใน index.html ตั้ง .review-track เป็นรางเลื่อนแนวนอน (grid-auto-flow:column + grid-auto-columns:90%)
   ส่วน door.css ที่ ≤600px ตั้ง grid-template-columns:1fr เพื่อให้เรียงลง แต่ไม่ได้สลับทิศทางการไหล
   ผลคือใบแรกไปอยู่คอลัมน์ 1fr ที่เหลือพื้นที่แค่ 11px ส่วนใบสองไปอยู่คอลัมน์ 90% ที่งอกใหม่ */
@media (max-width:600px){
  #review .review-track{ grid-auto-flow:row; grid-auto-columns:auto; overflow-x:visible; scroll-snap-type:none }
  #review .review-nav{ display:none } /* เรียงลงแล้ว ปุ่มเลื่อนซ้ายขวาไม่มีความหมาย */
}

/* ── ติดต่อ: สองคอลัมน์ ซ้ายเล่า ขวากรอก ─────────────────────── */
#contact > .container{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:3rem 4.5rem; align-items:start; max-width:1160px }
.contact-intro{ position:sticky; top:100px; min-width:0 }
#contact .contact-intro h2{ max-width:none; font-size:clamp(1.9rem,3.2vw,3.1rem); line-height:1.25 }
.contact-steps{ list-style:none; margin:2.25rem 0 0; padding:0; counter-reset:step; border-top:1px solid #d9c3cf }
.contact-steps li{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:.15rem .9rem; align-items:start; padding:1rem 0; border-bottom:1px solid #d9c3cf; counter-increment:step }
.contact-steps li > *{ grid-column:2 }
.contact-steps li::before{ content:counter(step); grid-column:1; grid-row:1 / span 2; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-size:.8rem; font-weight:700; display:grid; place-items:center; margin-top:.1rem }
.contact-steps b{ display:block; font-size:1rem; color:var(--text); font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif }
.contact-steps span{ font-size:.86rem; color:var(--muted); line-height:1.6 }
#contact .contact-options--social{ margin-top:1.75rem; justify-content:flex-start }
.contact-panel{ min-width:0 }
.contact-panel form{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:2rem; box-shadow:0 30px 60px -34px rgba(61,44,51,.4); max-width:none!important; margin:0!important }
#contact .form-success{ max-width:none; margin:0 }
#contact .form-hint{ text-align:left }
@media (max-width:960px){ #contact > .container{ grid-template-columns:1fr; gap:2.5rem } .contact-intro{ position:static } }
@media (max-width:640px){ .contact-panel form{ padding:1.25rem; border-radius:10px } }

/* ── ขั้นตอน: การ์ดชิ้นงานเรียงเสมอกันทุกคอลัมน์ ─────────────── */
#process .process-step{ display:flex; flex-direction:column }
#process .process-step .step-content{ display:flex; flex-direction:column; flex:1 }
#process .step-artifact{ margin-top:auto; padding-top:1rem }
#process .step-content p{ margin-bottom:1.1rem }

/* ── ท้ายเว็บ: โทนครีมเดียวกับหน้า โลโก้ไม่มีกรอบ ────────────── */
footer{ background:#f6eae8; color:var(--muted); border-top:1px solid var(--border) }
footer .footer-logo{ background:none; padding:0; border-radius:0; width:120px }

/* ── บริการ: จากพลัมเข้มเป็นบลัช ให้ทั้งหน้าสว่างต่อเนื่อง ───── */
#services{ background:linear-gradient(180deg, #f7e7ec, #f3e3e8); color:var(--text) }
#services .section-tag{ color:var(--accent) } #services .section-sub{ color:var(--muted) }
#services .service-chooser button{ color:var(--text); border-color:#c9a9bb; background:rgba(255,255,255,.5) }
#services .service-chooser button[aria-pressed="true"]{ background:var(--text); color:#fff; border-color:var(--text) }
#services .service-group{ border-top-color:#c9b3bf }
#services .service-group > h3{ color:var(--text) }
#services .service-problem{ color:var(--muted) }
#services .service-card{ border-color:#d9c3cf }
#services .service-card h3{ color:var(--text) }
#services .service-card p, #services .service-tags .tag, #services .service-related, #services .service-group-examples, #services .usecase-intro{ color:var(--muted) }
#services .service-group-examples{ border-color:#d9c3cf }
#services .talk-service{ background:var(--accent); color:#fff }
#services .talk-service:hover{ background:#b9005a }
#services .other-uses{ border-color:#d9c3cf } #services .other-uses summary{ color:var(--accent) }
#services .usecase-chips span{ color:var(--muted); border-color:#d9c3cf; background:rgba(255,255,255,.5) }
#services .service-visual{ background:#fff; color:var(--text); border:1px solid var(--border); border-radius:10px; box-shadow:0 20px 40px -28px rgba(61,44,51,.4) }
#services .service-visual span{ color:var(--muted) }
#services .service-visual b{ border-color:var(--border); color:var(--text) }
#services .service-visual-0, #services .service-visual-1, #services .service-visual-2{ background:#fff; border-top:1px solid var(--border); border-radius:10px }

/* ── รีลงานโมชัน: หลักฐานของบริการใหม่ วางต่อจากตารางบริการ ──── */
.reel{ margin:2.5rem 0 0; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:1.6rem 2.2rem; align-items:center }
.reel-frame{ position:relative; border-radius:10px; overflow:hidden; background:#07070B;
  box-shadow:0 30px 60px -34px rgba(61,44,51,.55) }
.reel-frame video{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover }
.reel-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(7,7,11,.72); color:#fff; border:1px solid rgba(255,255,255,.45);
  border-radius:999px; min-height:44px; padding:.7rem 1.5rem; font-size:.9rem; font-weight:600;
  backdrop-filter:blur(6px); transition:opacity .25s, background .2s;
}
.reel-btn:hover{ background:rgba(7,7,11,.88) }
.reel-frame.is-playing .reel-btn{ opacity:0; pointer-events:none }
.reel-frame.is-playing:hover .reel-btn,
.reel-frame.is-playing:focus-within .reel-btn{ opacity:1; pointer-events:auto }
.reel figcaption{ font-size:.92rem; line-height:1.8; color:var(--muted) }
.reel figcaption strong{ display:block; margin-bottom:.5rem; font-size:1.05rem; color:var(--text);
  font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif }
@media (max-width:860px){ .reel{ grid-template-columns:1fr; gap:1.1rem } }

/* ── เดโมบิล: แผงกรอกเป็นครีม ไม่ใช่พลัมเข้ม ────────────────── */
#demo{ background:#efe9f1 }
#demo .demo-workbench{ background:#fffdfa; color:var(--text); border:1px solid var(--border) }
.demo-workbench-head{ border-bottom-color:var(--border) }
.demo-workbench-head > span{ color:var(--accent) }
.demo-workbench-head h3{ color:var(--text) }
.demo-workbench-head p, .demo-workbench .demo-field label{ color:var(--muted) }
.demo-workbench input, .demo-workbench select{ background:#fff; border-color:#d9c3cf }
.meter-group{ border-top-color:var(--border) } .meter-group legend{ color:var(--text) }
.meter-arrow{ color:var(--accent) }
.meter-usage{ background:#f3e3ea; color:var(--accent) }
.demo-estimate{ background:#f7eef3; border-top:2px solid var(--accent) }
.demo-estimate span, .demo-estimate p{ color:var(--muted) } .demo-estimate strong{ color:var(--text) } .demo-estimate small{ color:var(--muted) }
.demo-output-shell{ background:#e4dde8 }
.demo-output-heading{ color:var(--muted) }
#demoBill{ border-top:6px solid var(--accent); box-shadow:0 24px 44px -30px rgba(61,44,51,.4) }
.room-ticket{ background:#f7eef3; border-top-color:var(--text) }

/* ── ติดต่อ: ซ่อนช่องทางที่ยังไม่มีลิงก์จริง ───────────────── */
#contact .social-coming{ display:none }

/* ── ขนาดพื้นที่กดบนมือถือ ให้นิ้วกดได้สบาย (เป้าหมาย 44px) ──── */
.case-tools a, .case-detail-button{ display:inline-flex; align-items:center; min-height:44px; padding:.35rem 0 }
.case-tools p{ margin-top:.1rem!important }
.stage-actions .btn-primary, .stage-link, .nav-cta, #services .talk-service, .contact-interests button{ min-height:44px; display:inline-flex; align-items:center; justify-content:center }
.stage-link{ padding-block:.65rem }
.case-navigation a, .case-navigation button, .room-map-grid button{ min-height:44px }
.portfolio-more > summary, #faq .faq-item summary, #review .review-card details summary{ min-height:44px; display:flex; align-items:center }
.why-proof, .price-example, .contact-line-direct{ display:inline-flex; align-items:center; min-height:44px }

/* ── จอแคบ ───────────────────────────────────────────────── */
@media (max-width:899px){
  #why .why-grid{ grid-template-columns:1fr 1fr; gap:0 2rem }
  #pricing .price-grid{ grid-template-columns:1fr; gap:0 }
  #pricing .price-card{ padding:1.4rem 0 1.8rem }
}
@media (max-width:640px){
  #why .why-grid{ grid-template-columns:1fr }
  #process .process-steps{ grid-template-columns:1fr; gap:.4rem; padding-top:1.2rem }
  #process .process-step{ padding:.9rem 0 .6rem }
  #pricing{ padding-block:4.5rem } #why, #review, #process, #faq{ padding-block:4rem }
}

/* ── ลดการเคลื่อนไหว / ไม่มี JavaScript: ทุกอย่างอยู่ที่สถานะสุดท้าย ── */
html.no-js .reveal-item, html.reduce-stage .reveal-item{ opacity:1; transform:none; transition:none }
html.reduce-stage #portfolio .portfolio-grid > .portfolio-card{ --in:1 }
html.reduce-stage #process .process-steps{ --draw:1 }
html.reduce-stage #demoBill.demo-printed .demo-receipt > *, html.reduce-stage #demoBill.demo-printed .demo-next, html.reduce-stage #faq .faq-item[open] p, html.reduce-stage .demo-estimate strong.tick{ animation:none }