/* Revision 2: cinematic product stories, owner-selected artwork. */
.site-header .nav{padding-inline:0}
.portfolio-shot[src*="aimarket-brand"],.portfolio-shot[src*="promptthai-logo"],.project-cover img[src*="aimarket-brand"],.project-cover img[src*="promptthai-logo"]{object-fit:contain!important}
.portfolio-thumb:has(img[src*="aimarket-brand"]),.project-cover:has(img[src*="aimarket-brand"]){background:#061127}
.portfolio-thumb:has(img[src*="promptthai-logo"]),.project-cover img[src*="promptthai-logo"]{background:#fff}
:root{--ink-900:#090b0e;--ink-800:#111419;--ink-700:#191b22;--text-hi:#f7f7fa;--text-mid:#a9aab5;--signal:#c6afff;--brand:#c6afff;--line:#ffffff20;--container:1392px;--gutter:5vw;--header-h:92px}
html{background:#090b0e}body.studio-v2{background:#090b0e;color:#f7f7fa}body{overflow-x:clip}.container{width:calc(100% - var(--gutter)*2);max-width:var(--container)}.section{padding-block:100px}.section-flush-top{padding-top:0}.section--alt{background:#101216}.hero{background:transparent}.section--paper{background:#eeedf1;color:#191a21}h1,h2,h3{letter-spacing:-.045em}h2,.section-title{font-size:clamp(34px,3.9vw,60px);font-weight:600;line-height:1.24}p{line-height:1.85}.small-label{display:block;font-size:10px;letter-spacing:.24em;font-weight:500;color:#b5b3c3;margin-bottom:25px}.section--paper .small-label{color:#625779}
.site-header{height:92px;border-bottom:1px solid #ffffff0a;background:#090b0e90;backdrop-filter:blur(24px)}.site-header.is-scrolled{background:#090b0eda;border-color:#ffffff19;box-shadow:0 12px 35px #0002}.nav{height:92px;max-width:1536px;padding-inline:5vw;gap:32px}.logo-badge{display:none}.studio-wordmark{font-size:23px;letter-spacing:.015em;font-weight:800}.studio-wordmark em{font-weight:600;color:#cbb6fa}.nav-links{gap:18px}.nav-links>li>a{font-size:14px;padding:13px 8px;color:#bfc0c9;position:relative}.nav-links>li>a:hover{color:#fff}.nav-links>li>a::before{content:'';position:absolute;inset:3px -5px;border-radius:30px;background:#ffffff08;opacity:0;transition:opacity .25s;z-index:-1}.nav-links>li>a:hover::before{opacity:1}.nav-links>li>a.is-active{color:#fff}.nav-links>li>a.is-active::after{height:3px;border-radius:3px;width:14px;left:calc(50% - 7px);bottom:0;background:#c6afff}.nav-actions{gap:22px}.lang-toggle button{border-bottom-width:1px}.nav-toggle{border-radius:50%;border-color:#ffffff30}.btn{position:relative;overflow:hidden;isolation:isolate;min-height:54px;padding:14px 28px;letter-spacing:-.015em;transition:transform .3s,box-shadow .3s,background .3s}.btn-primary{background:linear-gradient(115deg,#e4d5ff,#ba9bfa);border:1px solid #decaff;color:#1d1232;box-shadow:inset 0 1px 1px #fff9,0 5px 20px #0003}.btn-primary:hover{background:linear-gradient(115deg,#f0e7ff,#ccb5ff);box-shadow:0 10px 40px #bd91ff28;transform:translateY(-3px);color:#1d1232}.btn svg{width:21px;height:21px}.btn:hover svg{transform:translate(3px,-2px)}.btn-secondary{border-color:#ffffff30;background:#ffffff03;backdrop-filter:blur(8px)}.nav-cta{min-height:47px;padding:10px 23px;font-size:13px}.round-arrow{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #ffffff40;border-radius:50%;color:#fff;transition:background .35s,color .35s,transform .35s;flex-shrink:0}.round-arrow svg{width:22px;height:22px}a:hover .round-arrow{background:#c6afff;color:#1a1326;border-color:#c6afff;transform:rotate(5deg)}.click-ripple{position:absolute;pointer-events:none;border:1px solid currentColor;border-radius:50%;width:16px;height:16px;opacity:.4;transform:translate(-50%,-50%) scale(0);animation:click-wave .7s ease-out forwards;z-index:5}@keyframes click-wave{to{transform:translate(-50%,-50%) scale(20);opacity:0}}
/* One composed scene: actual text stays native; product art is independent. */
.cinema-hero{background:#090b0e;padding-top:0;position:relative;overflow:hidden}.cinema-hero>.container{position:relative}.home-hero-grid{position:relative;display:block;min-height:640px}.home-copy{width:48%;padding:98px 0 72px;position:relative;z-index:3;pointer-events:none}.home-copy a{pointer-events:auto}.home-copy h1{font-size:clamp(60px,6.25vw,100px);line-height:1.22;letter-spacing:-.055em;font-weight:600;margin-bottom:29px;text-wrap:nowrap}.home-copy h1 em{font-weight:600;background:linear-gradient(130deg,#eddcff 10%,#c3a0fb 75%);color:transparent;background-clip:text}.home-copy>p{font-size:19px;line-height:1.8;color:#c4c2cf;margin-bottom:35px}.home-copy .btn-group{gap:27px;flex-direction:row}.home-copy .btn{font-size:15px;min-height:56px}.home-copy .text-link{font-size:15px}.stage-wrap{position:absolute;inset:4px -7vw 0 auto;width:75%;height:100%;perspective:1600px;isolation:auto}.stage-wrap::before{display:none}.product-stage{position:absolute;inset:0;animation:cinema-arrive .65s cubic-bezier(.2,.75,.25,1);transform-origin:center}.cinema-art{position:absolute;inset:0;display:flex;align-items:center;transform:perspective(1600px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .5s cubic-bezier(.2,.75,.25,1);will-change:transform}.hero-product-art{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;animation:product-breathe 7s ease-in-out infinite;mask-image:linear-gradient(to right,transparent,#000 10%,#000 96%,transparent);filter:drop-shadow(0 20px 30px #0005)}.cinema-caption{position:absolute;left:29%;right:13%;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#fff;text-decoration:none;padding:17px 20px 17px 24px;background:linear-gradient(120deg,#25212c90,#090b0ed9);border:1px solid #ffffff20;border-radius:18px;backdrop-filter:blur(18px);z-index:4}.cinema-caption b{display:block;font-size:16px;font-weight:500}.cinema-caption small{display:block;color:#adabb8;font-size:11px;margin-top:3px}.cinema-caption .round-arrow{width:36px;height:36px}.cinema-caption .round-arrow svg{width:18px;height:18px}.cinema-caption:hover{text-decoration:none;color:#fff;border-color:#d2b7ff65}
.project-selector{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #ffffff1a;border-bottom:1px solid #ffffff26;margin-top:25px}.project-selector button{min-height:105px;padding:16px 30px;gap:16px;font-size:19px;border:0;color:#92919c}.project-selector button>span:first-child{font-size:13px;font-weight:400;width:auto;align-self:center}.project-selector button .selector-title{font-size:19px;flex:1}.project-selector button img{width:48px;height:48px;object-fit:cover;border-radius:50%;opacity:.65;filter:saturate(.6);transition:transform .4s,opacity .4s,filter .4s}.project-selector button[aria-selected=true]{color:#fff;background:linear-gradient(0deg,#b98af907,transparent)}.project-selector button[aria-selected=true] img{opacity:1;filter:none;transform:scale(1.12)}.project-selector button .selector-arrow{display:flex;width:25px}.selector-arrow svg{width:19px;height:19px;opacity:0;transform:translate(-5px,5px);transition:.35s}.project-selector button[aria-selected=true] .selector-arrow svg{opacity:1;transform:none}.project-selector button:not(:last-child)::after{height:36px;background:#ffffff20}.selector-track{position:absolute;bottom:-1px;left:0;width:33.333%;height:2px;background:linear-gradient(90deg,#f0e3ff,#ad84ff);transform:translateX(calc(var(--selected-index,0)*100%));transition:transform .65s cubic-bezier(.22,1,.36,1);box-shadow:0 0 14px #c6afff35;pointer-events:none}
@keyframes cinema-arrive{from{opacity:0;transform:translateX(32px) scale(.97);filter:none}to{opacity:1;transform:none;filter:blur(0)}}@keyframes product-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* Reference-aligned editorial work, not a stack of boxed summaries. */
.selected-work{padding-top:95px}.work-lead-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;align-items:start}.work-lead-copy{padding-top:20px;position:sticky;top:140px}.work-lead-copy h2{font-size:clamp(38px,3.9vw,62px);margin:0 0 27px;line-height:1.22}.work-lead-copy p{font-size:17px;color:#b8b6c4;margin:0 0 26px}.work-lead-copy .text-link{color:#dfd0ff;font-size:14px}.work-lead-card{color:inherit;text-decoration:none;min-width:0}.work-lead-card:hover{text-decoration:none}.project-art-frame{border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 50% 75%,#403624,#131516 70%);border:1px solid #ffffff16;aspect-ratio:1.6}.project-art-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1);mix-blend-mode:lighten}.work-lead-card:hover .project-art-frame img{transform:scale(1.05)}.work-card-caption{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:22px}.work-card-caption h3{font-size:29px;margin:0 0 3px}.work-card-caption p{font-size:14px;color:#aaa8b4;margin:0}.selected-pair{margin:64px 0 0;gap:32px}.selected-image{aspect-ratio:1.5;border-radius:24px;border:1px solid #ffffff16;background:#12151b}.selected-image img{object-fit:cover;mix-blend-mode:lighten;transition:transform .9s cubic-bezier(.22,1,.36,1)}.selected-image .round-arrow{right:22px;bottom:22px;background:#0d1016bb;backdrop-filter:blur(16px)}.selected-card:hover .selected-image img{transform:scale(1.05)}.selected-caption{padding-top:22px}.selected-caption h3{font-size:30px}.selected-caption p{font-size:14px}.baanmart-story{display:block;position:relative;overflow:hidden;border-radius:24px;margin-top:64px;aspect-ratio:2.1;background:#282119;color:#fff}.baanmart-story>img{width:100%;height:100%;object-fit:cover;transition:transform 1s}.baanmart-story>div{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:42px;background:linear-gradient(0deg,#120c07db,transparent 75%)}.baanmart-story h3{font-size:36px;line-height:1.3;margin-bottom:16px}.baanmart-story .small-label{color:#eed9c3;font-size:10px;margin-bottom:12px}.baanmart-story .text-link{justify-content:flex-start;font-size:14px}.baanmart-story:hover>img{transform:scale(1.035)}.baanmart-story:hover{text-decoration:none;color:#fff}
.studio-services{border-top:1px solid #ffffff20}.editorial-split{grid-template-columns:.7fr 1.3fr;gap:60px}.editorial-split h2{font-size:clamp(36px,3.8vw,58px);line-height:1.24}.studio-services .editorial-split>div:first-child>p{font-size:17px;line-height:1.8}.service-row{border-color:#ffffff26;transition:background .4s}.service-row[open]{background:linear-gradient(110deg,#c5a0ff06,transparent)}.service-row summary{padding:26px 12px;gap:22px;min-height:100px}.service-row h3{font-size:25px;letter-spacing:-.03em}.service-line-icon{width:33px;height:33px;stroke-width:1.5;color:#d9c8fb;filter:drop-shadow(0 2px 8px #c9b0ff15);transition:transform .4s}.service-row:hover .service-line-icon{transform:translateY(-3px) rotate(-4deg)}.service-index{font-size:12px;color:#bca5e8}.service-plus{border-radius:50%;width:28px;height:28px}.service-description{padding:0 38px 28px 107px}.service-description p{font-size:16px;line-height:1.85}.service-description .text-link{color:#d3bafc;font-size:14px}.studio-story{background:radial-gradient(ellipse at 22% 50%,#44316425,transparent 45%);border-top:1px solid #ffffff16}.studio-art{border:1px solid #ffffff1b;background:linear-gradient(135deg,#ffffff07,#0001);border-radius:50%;width:320px;height:320px;min-height:0;margin:auto;box-shadow:inset 0 0 55px #c5a7ff08,0 25px 75px #0005;transform:rotate(-8deg)}.studio-art img{width:150px;height:150px;filter:drop-shadow(15px 22px 20px #0009)}.studio-art span{letter-spacing:.3em;font-size:10px}.process-num{box-shadow:0 8px 30px #55436519}.section--paper .card{background:transparent;border:0;border-top:1px solid #24212c25;border-radius:0;padding:24px 0}.section--paper .icon-box{background:#dfd8eb;color:#6a459e}.section--paper .btn-secondary{color:#282033;border-color:#61556d55}.section--paper .badge{color:#625279;border-color:#62527944}.section--paper .feat{border-color:#64567830}
/* Portfolio: image first, compact well-defined controls. */
.work-intro{padding-top:68px;padding-bottom:48px}.work-intro .editorial-head{align-items:flex-end;margin-bottom:0}.work-intro h1{font-size:clamp(50px,5.7vw,86px);line-height:1.12}.work-intro .editorial-head>p{font-size:17px;max-width:440px}.work-toolbar{padding-top:28px;border-top:1px solid #ffffff20}.work-search{background:#ffffff05;border:1px solid #ffffff25;max-width:460px;transition:border .2s,box-shadow .2s}.work-search:focus-within{border-color:#c6afff;box-shadow:0 0 0 4px #c6afff0c}.work-search input{font-size:14px;height:54px}.filter-bar{gap:9px;margin:25px 0 36px}.filter-btn{font-size:12px;min-height:42px;padding:9px 18px;border-color:#ffffff25;background:transparent;position:relative;overflow:hidden;transition:all .25s}.filter-btn.is-active{background:#d1bbff;color:#1c1230;border-color:#d1bbff;box-shadow:0 4px 20px #c6afff15}.filter-btn:hover{transform:translateY(-2px);border-color:#c6afff}.portfolio-grid{gap:48px 28px}.portfolio-thumb{aspect-ratio:1.4;background:#101318;border:1px solid #ffffff1a;border-radius:20px;position:relative;overflow:hidden}.portfolio-shot{object-fit:cover!important;transition:transform .7s cubic-bezier(.22,1,.36,1)}.portfolio-item:hover .portfolio-shot{transform:scale(1.05)}.portfolio-item .portfolio-thumb::after{content:'↗';position:absolute;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e1d1ff;color:#211632;font-size:24px;opacity:0;transform:translateY(12px);transition:.35s}.portfolio-item:hover .portfolio-thumb::after,.portfolio-item:focus-within .portfolio-thumb::after{opacity:1;transform:none}.portfolio-badge{top:16px;left:16px}.portfolio-badge .badge{background:#090b0ec9;border-color:#ffffff29;font-size:10px;backdrop-filter:blur(10px)}.portfolio-title{font-size:25px;line-height:1.3}.portfolio-overlay{padding-top:20px}.portfolio-cat{font-size:9px;letter-spacing:.15em}.portfolio-tagline{font-size:13px;line-height:1.75}.portfolio-overlay .btn{font-size:12px;padding:0;min-height:40px;border:0;color:#c6afff;background:none;box-shadow:none}.portfolio-overlay .btn::after{content:'↗';margin-left:15px;font-size:18px}.portfolio-item.is-hidden{display:none!important}.work-empty{background:#ffffff02}
/* All generated cases use a real editorial layout and visible content hierarchy. */
.phero{padding-top:30px;padding-bottom:60px}.phero__back{font-size:12px!important;min-height:40px!important}.case-heading{display:flex;justify-content:space-between;align-items:center;gap:35px;margin:23px 0 36px}.case-heading h1{font-size:clamp(38px,4.6vw,70px);letter-spacing:-.04em;margin:0 0 10px;overflow-wrap:anywhere}.case-heading .hero-lead{font-size:17px;line-height:1.65;max-width:760px;margin:0;color:#b8b5c3}.case-badges{display:flex;flex-wrap:wrap;gap:10px;flex-shrink:0}.case-badges .badge{font-size:11px;border-color:#ffffff26;background:#ffffff03;padding:8px 13px}.case-layout{display:grid;grid-template-columns:1.8fr 1fr;gap:48px;align-items:start}.case-summary>div:not(.btn-group){padding:0 0 22px;margin-bottom:23px;border-bottom:1px solid #ffffff1c}.case-summary h2{font-size:19px;letter-spacing:-.02em;margin:0 0 10px}.case-summary p{font-size:13px;line-height:1.8;color:#afadb8;margin:0}.case-summary .small-label{font-size:9px;margin-bottom:14px;color:#c6afff}.case-summary .btn-group{gap:9px;display:flex;flex-wrap:wrap}.case-summary .btn{font-size:12px;padding:10px 17px;min-height:42px}.phero__media{width:100%;min-width:0}.project-cover img{max-height:none;aspect-ratio:1.5;object-fit:cover;background:#11141b;border-radius:22px;border:1px solid #ffffff18}.project-cover figcaption{font-size:10px;line-height:1.6;margin-top:10px;color:#8d8c99}.case-layout .showcase{padding:22px 26px 70px;background:radial-gradient(ellipse at 50% 90%,#52457950,#111318 70%);border:1px solid #ffffff17;border-radius:24px}.case-layout .showcase__phone{right:2%;bottom:5%;width:24%}.phero .stats{margin-top:32px;border-radius:0;border-block:1px solid #ffffff20;border-inline:0;background:none;max-width:none!important}.phero .stat{padding:23px 25px}.phero .stat-num{font-size:34px;color:#e2d4fb}.phero .stat-label{font-size:11px}.pnav{top:92px!important;background:#0d1013dc!important;backdrop-filter:blur(25px);border-block:1px solid #ffffff18}.pnav a{font-size:12px;color:#b0aebd;padding:14px 20px}.pnav a.is-active{background:#c6afff17;color:#dfcaff;border-color:#c6afff30}.presentation-section{background:#0c0e12}.presentation-gallery{display:flex;gap:25px;overflow-x:auto;padding-bottom:20px;scroll-snap-type:x mandatory;scrollbar-color:#b8a0e0 #1a1a24;align-items:stretch}.presentation-shot{flex:0 0 auto;max-width:88%;scroll-snap-align:start;background:#17191e;border:1px solid #ffffff19;box-shadow:0 15px 35px #0003}.presentation-shot .gallery-open{height:530px;width:auto;max-width:100%}.presentation-shot img{height:100%;max-height:530px;width:auto;max-width:100%;object-fit:contain}.presentation-shot figcaption{font-size:11px;padding:13px 18px}.feat-grid{gap:20px}.feat{border-radius:16px;background:linear-gradient(145deg,#ffffff05,transparent);border-color:#ffffff1a;padding:25px}.icon-box{border-radius:12px;border:1px solid #ffffff25;background:linear-gradient(145deg,#d7baff12,#d7baff02);color:#d8bffc;box-shadow:inset 0 1px 1px #ffffff12}.feat .icon-box svg{stroke-width:1.5}.feat__num{color:#898293}.feat p{font-size:14px}.shot{border:1px solid #ffffff1c;background:#15171d}.cta-band{background:radial-gradient(ellipse at 70% 50%,#6d42962c,transparent 70%),#16151d;border:1px solid #ffffff18;border-radius:24px;padding:50px}.cta-band .section-title{font-size:clamp(32px,3.5vw,54px)}
/* Functional screens share the same tactile surfaces and polished spacing. */
.contact-opening{padding-top:65px}.contact-intro h1{font-size:clamp(45px,4.7vw,72px)}.contact-opening .brief-form,.brief-form{border:1px solid #ffffff24;border-radius:24px;background:linear-gradient(145deg,#202028,#111217);box-shadow:0 24px 60px #0003,inset 0 1px 0 #ffffff0a}.input,.textarea,.select,.form input,.form textarea,.form select{border-color:#ffffff25;background:#090b0e85;border-radius:12px;transition:border .25s,box-shadow .25s}.input:focus,.textarea:focus,.select:focus,.form input:focus,.form textarea:focus,.form select:focus{border-color:#c6afff;box-shadow:0 0 0 4px #c6afff0b;outline:none}.faq-item{border-color:#ffffff26}.section--paper .faq-item{border-color:#211c2a25}.faq-q{font-weight:500}.card{border-radius:20px;border-color:#ffffff1a}.card:hover{border-color:#c6afff42}.site-footer{background:#090b0e;padding-top:65px;border-top:1px solid #ffffff20}.footer-top{padding-bottom:40px;border-color:#ffffff1d}.footer-wordmark{font-size:clamp(38px,6.5vw,94px);font-weight:700}.footer-wordmark em{color:#c6afff}.footer-col a{transition:color .2s,transform .25s}.footer-col a:hover{transform:translateX(4px)}.footer-bottom{border-color:#ffffff1d}.read-progress{background:linear-gradient(90deg,#8c5fde,#e8d3ff);height:2px}.zx-pet{filter:drop-shadow(0 5px 12px #0007)}.zx-panel{box-shadow:0 20px 60px #0008;background:#17151ee8;backdrop-filter:blur(25px)}
@media(min-width:901px){.nav-links{margin-inline:auto}.nav-links .nav-cta-mobile{display:none}.portfolio-grid,.portfolio-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1200px){.nav{gap:15px}.nav-links{gap:4px}.nav-actions{gap:10px}.studio-wordmark{font-size:20px}.home-hero-grid{min-height:565px}.home-copy{padding-top:88px;width:49%}.home-copy h1{font-size:6.2vw}.home-copy>p{font-size:16px}.stage-wrap{width:72%;right:-7vw}.cinema-caption{left:28%;right:15%;bottom:8px}.project-selector button{padding-inline:20px}.work-lead-layout,.editorial-split{gap:40px}.case-layout{gap:32px;grid-template-columns:1.5fr 1fr}.case-summary p{font-size:12px}.case-heading .hero-lead{max-width:600px}}
@media(max-width:900px){:root{--header-h:76px;--gutter:26px}.site-header,.nav{height:76px}.nav{padding-inline:26px}.nav-links{inset:76px 0 0;height:calc(100dvh - 76px);background:#090b0ef7;backdrop-filter:blur(28px);padding:30px;gap:7px}.nav-links>li>a{font-size:30px;min-height:64px;padding:12px 4px}.nav-links>li>a svg{display:block;width:25px;height:25px;margin-left:auto;color:#bca7ed}.nav-links>li>a::before{display:none}.nav-links>li>a.is-active::after{display:none}.nav-links .nav-cta-mobile{display:block}.nav-links .nav-cta-mobile>a{padding:15px 23px;font-size:18px}.nav-toggle{display:flex}.nav-cta{display:none}.home-hero-grid{min-height:480px}.home-copy{padding:70px 0 60px;width:49%}.home-copy h1{font-size:6.5vw;letter-spacing:-.06em}.home-copy>p{font-size:13px;line-height:1.8}.home-copy>p br{display:none}.home-copy .btn-group{gap:15px;flex-wrap:wrap}.home-copy .btn{font-size:13px;padding:12px 22px;min-height:49px}.home-copy .text-link{font-size:13px;min-height:40px}.stage-wrap{width:69%;right:-8vw}.cinema-caption{padding:11px 13px;left:20%;right:15%;bottom:8px}.cinema-caption b{font-size:14px}.cinema-caption small{font-size:10px}.project-selector{margin-top:10px}.project-selector button{padding:14px 13px;min-height:90px;gap:10px}.project-selector button .selector-title{font-size:16px}.project-selector button img{width:38px;height:38px}.project-selector button .selector-arrow{display:none}.section{padding-block:70px}.section-flush-top{padding-top:0}.work-lead-layout{grid-template-columns:.85fr 1.15fr;gap:30px}.work-lead-copy h2{font-size:37px}.work-lead-copy p{font-size:14px}.small-label{font-size:9px;letter-spacing:.16em}.work-card-caption h3{font-size:25px}.work-card-caption p{font-size:12px}.project-art-frame{aspect-ratio:1.25}.selected-pair{gap:24px;margin-top:44px}.selected-image{aspect-ratio:1.3}.selected-caption h3{font-size:25px}.baanmart-story{margin-top:44px;aspect-ratio:1.8}.baanmart-story h3{font-size:28px}.baanmart-story>div{padding:30px}.editorial-split{grid-template-columns:1fr 1.3fr;gap:35px}.editorial-split h2{font-size:36px}.studio-services .editorial-split>div:first-child>p{font-size:14px}.service-row summary{padding:22px 0;gap:13px;min-height:85px}.service-line-icon{width:26px;height:26px}.service-row h3{font-size:20px}.service-description{padding:0 15px 23px 67px}.service-description p{font-size:14px}.studio-art{width:240px;height:240px}.studio-art img{width:125px;height:125px}.portfolio-grid,.portfolio-grid--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 24px}.work-intro h1{font-size:58px}.work-intro .editorial-head>p{font-size:14px;max-width:300px}.work-intro{padding-top:48px;padding-bottom:38px}.case-heading{display:block}.case-heading h1{font-size:48px}.case-badges{margin-top:20px}.case-layout{grid-template-columns:1fr}.case-summary{display:grid;grid-template-columns:1fr 1fr;gap:25px}.case-summary>div:not(.btn-group){margin:0;padding-bottom:15px}.case-summary p{font-size:14px}.case-summary .btn-group{align-content:start;align-items:flex-start}.project-cover img{max-height:560px;object-fit:contain;aspect-ratio:1.6}.pnav{top:76px!important}.presentation-shot .gallery-open{height:420px}.presentation-shot img{max-height:420px}.contact-opening .editorial-split{grid-template-columns:1fr 1.15fr;gap:28px}.contact-intro h1{font-size:40px}.cta-band{padding:36px}}
@media(max-width:600px){:root{--gutter:22px}.nav{padding-inline:22px;gap:10px}.studio-wordmark{font-size:17px;letter-spacing:.01em}.nav-actions{gap:6px}.nav-toggle{width:40px;min-width:40px}.lang-toggle button{font-size:10px;min-width:27px}.home-hero-grid{display:flex;flex-direction:column;min-height:0}.home-copy{width:100%;padding:35px 0 0;pointer-events:auto}.home-copy h1{font-size:clamp(42px,11.9vw,69px);line-height:1.18;margin-bottom:20px;letter-spacing:-.055em}.home-copy>p{font-size:14px;line-height:1.75;margin-bottom:24px;max-width:360px}.home-copy>p br{display:block}.home-copy .btn-group{gap:20px;flex-direction:row!important;flex-wrap:nowrap}.home-copy .btn{width:auto;min-height:49px;padding:12px 21px;font-size:13px}.home-copy .text-link{width:auto;font-size:12px;gap:10px;white-space:nowrap}.home-copy .text-link svg{width:18px}.stage-wrap{position:relative;inset:auto;width:calc(100% + 44px);margin:0 -22px;height:340px;min-height:340px}.product-stage{inset:0}.cinema-art{inset:-7px -12px 15px}.hero-product-art{object-fit:contain;mask-image:linear-gradient(to right,transparent,#000 7%,#000 94%,transparent)}.cinema-caption{bottom:0;left:22px;right:22px;border-radius:13px;padding:10px 15px;background:#17141ed9}.cinema-caption b{font-size:13px}.cinema-caption small{font-size:10px}.cinema-caption .round-arrow{width:31px;height:31px}.project-selector{margin-top:18px}.project-selector button{min-height:77px;padding:12px 8px;display:grid;grid-template-columns:1fr 28px;grid-template-rows:18px 23px;gap:4px}.project-selector button>span:first-child{font-size:9px;width:auto;align-self:auto;grid-column:1;grid-row:1}.project-selector button .selector-title{font-size:12px;grid-column:1/-1;grid-row:2}.project-selector button img{width:27px;height:27px;grid-column:2;grid-row:1/3;align-self:center;opacity:.7}.project-selector button[aria-selected=true] img{transform:none}.project-selector button .selector-title{padding-right:25px}.project-selector button:not(:last-child)::after{height:32px}.project-selector button .selector-arrow{display:none}.section{padding-block:57px}.section-flush-top{padding-top:0}.work-lead-layout{display:block}.work-lead-copy{position:static;padding:0;margin-bottom:27px}.work-lead-copy h2{font-size:37px;margin-bottom:16px}.work-lead-copy p{font-size:14px;margin-bottom:10px}.work-lead-copy .small-label{font-size:9px;margin-bottom:17px}.work-lead-copy .text-link{font-size:13px}.project-art-frame{aspect-ratio:1.45;border-radius:18px}.work-card-caption{padding-top:16px;gap:15px}.work-card-caption h3{font-size:25px}.work-card-caption p{font-size:12px;line-height:1.6}.round-arrow{width:41px;height:41px}.selected-pair{grid-template-columns:1fr;gap:32px;margin-top:33px}.selected-image{aspect-ratio:1.5;border-radius:18px}.selected-image .round-arrow{right:16px;bottom:16px}.selected-caption{padding-top:16px}.selected-caption h3{font-size:26px}.selected-caption p{font-size:13px}.baanmart-story{margin-top:36px;aspect-ratio:.95;border-radius:18px}.baanmart-story>img{object-position:35% center}.baanmart-story>div{padding:22px;background:linear-gradient(0deg,#120c07e8,transparent 100%)}.baanmart-story h3{font-size:27px}.baanmart-story .small-label{font-size:9px}.editorial-split{grid-template-columns:1fr;gap:27px}.editorial-split h2{font-size:36px}.service-row summary{gap:13px;min-height:84px}.service-row h3{font-size:19px}.service-line-icon{width:27px;height:27px}.service-description{padding-left:63px;padding-right:0}.service-description p{font-size:13px}.service-description .text-link{font-size:12px}.service-index{font-size:10px}.studio-art{width:210px;height:210px;margin-bottom:12px}.studio-art img{width:110px;height:110px}.studio-story .editorial-split{gap:35px}.work-intro{padding-top:40px;padding-bottom:25px}.work-intro h1{font-size:52px;margin-bottom:18px}.work-intro .editorial-head>p{font-size:14px;max-width:none}.work-toolbar{padding-top:22px;gap:15px}.work-search{max-width:none}.work-search input{height:48px;font-size:12px}.filter-bar{gap:7px;margin:20px 0 28px}.filter-btn{min-height:39px;font-size:11px;padding:7px 12px}.portfolio-grid,.portfolio-grid--3{grid-template-columns:1fr;gap:32px}.portfolio-thumb{aspect-ratio:1.45;border-radius:18px}.portfolio-overlay{padding-top:17px}.portfolio-title{font-size:25px}.portfolio-tagline{font-size:13px}.portfolio-item .portfolio-thumb::after{opacity:1;transform:none;width:35px;height:35px;right:14px;bottom:14px;font-size:21px}.phero{padding-top:20px;padding-bottom:35px}.case-heading{margin-top:16px;margin-bottom:24px}.case-heading h1{font-size:37px}.case-heading .hero-lead{font-size:15px;line-height:1.75}.case-badges{margin-top:15px}.case-badges .badge{font-size:10px;padding:6px 10px}.case-layout{gap:29px}.project-cover img{aspect-ratio:1.4;border-radius:17px}.project-cover figcaption{font-size:9px}.case-summary{grid-template-columns:1fr;gap:20px}.case-summary h2{font-size:19px}.case-summary p{font-size:13px}.case-summary .small-label{font-size:9px}.phero .stats{margin-top:30px;grid-template-columns:repeat(2,1fr)}.phero .stat{padding:16px}.phero .stat-num{font-size:30px}.phero .stat-label{font-size:10px}.pnav .container{width:100%;padding-inline:16px}.pnav a{font-size:11px;padding:12px 15px;white-space:nowrap}.presentation-gallery{gap:16px}.presentation-shot .gallery-open{height:390px}.presentation-shot img{max-height:390px}.presentation-shot{max-width:100%}.presentation-shot figcaption{font-size:10px}.presentation-section .section-title{font-size:32px}.presentation-section .section-head>p{font-size:13px}.feat{padding:22px}.feat p{font-size:13px}.contact-opening .editorial-split{grid-template-columns:1fr;gap:30px}.contact-opening{padding-top:38px}.contact-intro h1{font-size:43px}.brief-form{border-radius:19px}.section-title{font-size:32px}.cta-band{padding:30px 23px;border-radius:19px}.cta-band .section-title{font-size:31px}.footer-wordmark{font-size:42px}.site-footer{padding-top:43px}.footer-top{padding-bottom:27px}.footer-top>p{font-size:12px}.lightbox{padding:65px 12px}.lightbox img{max-height:calc(100dvh - 125px)}}
@media(prefers-reduced-motion:reduce){.hero-product-art,.product-stage{animation:none!important}.cinema-art{transform:none!important}.selector-track{transition:none!important}}
.motion-off .hero-product-art,.motion-off .product-stage{animation:none!important}.motion-off .cinema-art{transform:none!important}.motion-off .selector-track{transition:none!important}
.presentation-gallery{--gallery-height:530px}
.presentation-shot .gallery-open{width:calc(var(--gallery-height) * var(--art-ratio));height:var(--gallery-height)}
.presentation-shot img{width:100%;height:100%;object-fit:contain}
@media(max-width:900px){.presentation-gallery{--gallery-height:420px}}
@media(max-width:600px){.presentation-gallery{--gallery-height:390px}}
.project-art-frame img,.selected-image img,.project-cover img{object-fit:contain}
.portfolio-shot--editorial{object-fit:contain!important}
@media(min-width:601px) and (max-width:900px){.home-copy{width:45%}.home-copy>p{max-width:285px;font-size:15px}.home-copy>p br{display:block}.stage-wrap{width:63%;right:-6vw}.home-hero-grid{min-height:500px}}
/* Reading pages retain a light canvas, with the same restrained studio materials. */
.zx-side-head{background:#292532;box-shadow:none;border:1px solid #443c53}
.zx-main .zx-hero{background:#191b21;box-shadow:0 16px 40px #17122212;border:1px solid #ffffff15}
.zx-main .zx-hero::after{border-color:#ffffff05}
.zx-main .zx-body{box-shadow:0 10px 35px #17122208;border-color:#dedce4}
.chapter-item.active{background:#e7def8!important;color:#4a386a!important;box-shadow:none!important}
.chapter-item.active .zx-state{border-color:#8b6cb6}
.zx-stage-num{box-shadow:none}
.studio-wordmark{color:#f7f7fa}
@media(min-width:1201px){.home-copy{padding:85px 0 26px}.home-copy h1{font-size:clamp(80px,6.7vw,104px);margin-bottom:24px}.home-copy>p{font-size:21px;margin-bottom:26px}.home-copy .btn{font-size:18px;min-height:60px;padding:15px 30px}.home-copy .text-link{font-size:17px}.studio-wordmark{font-size:26px}.nav-links>li>a{font-size:15px}}

/* Owner-requested logo palette, 7 October 2026. */
:root{
  --ink-900:#05091d;--ink-800:#0a1230;--ink-700:#111b3b;
  --text-hi:#f6f7ff;--text-mid:#b5bfdd;--line:#839de333;
  --signal:#72dfff;--brand:#b898ff;
  --brand-cyan:#58ddff;--brand-violet:#a785ff;--brand-pink:#f38bd9;--brand-gold:#f4cb85;
  --brand-spectrum:linear-gradient(105deg,#58ddff 0%,#a785ff 38%,#f38bd9 72%,#f4cb85 100%);
  --brand-action:linear-gradient(115deg,#4a39bc 0%,#702fbe 52%,#a02a7d 100%);
}
html,body.studio-v2{background:#05091d;color:#f6f7ff}
body.studio-v2{background-image:radial-gradient(ellipse 80% 600px at 95% 5%,#54248519,transparent 75%)}
.section--alt{background:#0a1230}
.section--paper{background:#edf2ff;color:#182348}
.site-header{background:#05091de8;border-bottom-color:#869dff24}
.site-header.is-scrolled{background:#05091df5;border-bottom-color:#9575e549}
.logo{gap:10px}
.logo-badge{display:block;width:40px;height:40px;border-radius:10px;object-fit:contain;flex-shrink:0;box-shadow:0 0 20px #9b47e326}
.studio-wordmark{color:#f6f7ff}
.studio-wordmark em,.footer-wordmark em{background:var(--brand-spectrum);background-clip:text;-webkit-background-clip:text;color:transparent}
.nav-links>li>a{color:#c5cce5}
.nav-links>li>a.is-active::after,.read-progress{background:var(--brand-spectrum)}
.nav-links>li>a:hover,.text-link:hover{color:#83e7ff}
.lang-toggle button.is-active,.lang-toggle button[aria-pressed=true]{border-bottom-color:#72dfff}
.nav-toggle{background:#0d1735;border-color:#839de34d}
.btn-primary,.filter-btn.is-active{background:var(--brand-action);color:#fff;border-color:#b797ee70;box-shadow:inset 0 1px 0 #f9dfff35,0 7px 25px #722edb28}
.btn-primary:hover{background:linear-gradient(115deg,#5140c5,#7939c5 52%,#a83285);color:#fff;border-color:#e1b8fa;box-shadow:0 9px 30px #9929c345,inset 0 1px 0 #ffffff45}
.btn-secondary{background:#0c173680;border-color:#8097d747;color:#e3eaff}
.btn-secondary:hover{background:#19214b;border-color:#a992e8;color:#fff}
.nav-links .nav-cta-mobile>a{color:#fff!important}
.cinema-hero{background:radial-gradient(ellipse 58% 70% at 82% 37%,#45238140,transparent 75%),radial-gradient(ellipse 47% 65% at 8% 33%,#14367845,transparent 78%),#05091d}
.home-copy h1 em{background:var(--brand-spectrum);background-clip:text;-webkit-background-clip:text;color:transparent}
.home-copy>p,.work-lead-copy p,.case-heading .hero-lead,.case-summary p{color:#bcc6e3}
.cinema-caption{background:linear-gradient(120deg,#142349e8,#161032ed);border-color:#9581d859;box-shadow:inset 0 1px 0 #bdcfff12,0 12px 36px #02061b55}
.cinema-caption small{color:#bbc6e5}
.cinema-caption:hover{border-color:#ec9bdf9c}
.project-selector{border-color:#8097d732}
.project-selector button{color:#a1aecf}
.project-selector button[aria-selected=true]{background:linear-gradient(0deg,#692ec321,transparent);color:#fff}
.selector-track{height:3px;background:var(--brand-spectrum);box-shadow:0 0 18px #af63ec60}
.selector-arrow,.service-line-icon{color:#7ce1ff}
.project-art-frame,.selected-image,.portfolio-thumb{background:#0a1230;border-color:#839de32e}
.round-arrow{border-color:#8ea4e84f;background:#0d16364a;color:#d8e9ff}
a:hover .round-arrow,.portfolio-item .portfolio-thumb::after{background:var(--brand-action);color:#fff;border-color:#bda0f7}
.work-lead-copy .text-link,.service-description .text-link{color:#83dfff}
.studio-services{border-color:#839de333}
.editorial-split h2 em,.work-lead-copy h2 em,.contact-intro h1 em{color:#d4b2ff}
.service-row{border-color:#839de344}
.service-row[open]{background:linear-gradient(110deg,#6331a519,transparent)}
.service-index{color:#e6a3df}
.studio-story{background:radial-gradient(ellipse at 22% 50%,#6735ab28,transparent 50%);border-color:#839de32e}
.studio-art{background:linear-gradient(135deg,#14347155,#46205d44);border-color:#967ce752;box-shadow:inset 0 0 55px #8053bd14,0 25px 75px #02041470}
.icon-box{background:linear-gradient(145deg,#21477844,#75399522);border-color:#839de344;color:#8ee6ff}
.section--paper .icon-box{background:#dce6ff;color:#5638a3}
.section--paper .text-link{color:#553392}
.section--paper .process-num{background:#fff;color:#6536a9;border-color:#a297d1}
.work-search{background:#0c1736;border-color:#8199d54a}
.work-search:focus-within{border-color:#7bddff;box-shadow:0 0 0 4px #58ddff12}
.filter-btn:hover{border-color:#bca0ef}
.portfolio-badge .badge{background:#070d26e6;border-color:#9fb3e844}
.portfolio-cat,.case-summary .small-label{color:#81dfff}
.case-badges .badge{border-color:#839de344;background:#111b3b}
.phero .stat-num{color:#d6b9ff}
.pnav{background:#080f2aeF!important;border-color:#839de333}
.pnav a{color:#bcc6e3}
.pnav a.is-active{background:#6d3dba26;color:#e0c4ff;border-color:#a47be64d}
.presentation-section{background:#080f29}
.presentation-shot,.shot{background:#111b3b;border-color:#839de32e}
.presentation-gallery{scrollbar-color:#a785ff #111b3b}
.cta-band{background:radial-gradient(ellipse at 80% 30%,#8136ac32,transparent 65%),#0e1734;border-color:#997bd249}
.contact-opening .brief-form,.brief-form{background:linear-gradient(145deg,#172442,#0a122d);border-color:#8298d24d}
.input,.textarea,.select,.form input,.form textarea,.form select{background:#050c258c;border-color:#8199d54a;color:#f6f7ff}
.input:focus,.textarea:focus,.select:focus,.form input:focus,.form textarea:focus,.form select:focus{border-color:#78ddff;box-shadow:0 0 0 4px #58ddff12}
.card{border-color:#839de32e}
.card:hover{border-color:#c17be461}
.site-footer{background:linear-gradient(165deg,#0b1430,#080b23 65%,#1b1032);border-color:#839de333}
.footer-top,.footer-bottom{border-color:#839de333}
.footer-col a:hover{color:#84e3ff}
.read-progress{height:3px}
:where(a,button,input,textarea,select,summary):focus-visible{outline:2px solid #7fe5ff;outline-offset:4px}
@media(max-width:900px){.nav-links{background:#070d26fa}.nav-links>li>a svg{color:#a18bef}}
@media(max-width:600px){.logo{gap:7px}.logo-badge{width:30px;height:30px;border-radius:7px}.studio-wordmark{font-size:15px}.cinema-caption{background:linear-gradient(120deg,#142349f2,#161032f2)}}
/* Course chrome follows the brand; the reading canvas stays light. */
:root{--bg:#05091d;--bg-2:#0a1230;--panel:#111b3b;--text:#f6f7ff;--muted:#b5bfdd;--purple:#a785ff;--violet:#c496f5;--cyan:#72dfff;--grad:var(--brand-spectrum);--grad-cool:linear-gradient(110deg,#58ddff,#a785ff);--zx-primary:#703dba;--zx-primary-2:#ae69ce;--zx-primary-deep:#45227b;--zx-canvas:#f1f4fc;--zx-line:#d8dff0}
header:not(.zx-header):not(.site-header),header.zx-header{background:#05091df2!important;border-color:#839de333!important}
body>.hero{background:radial-gradient(ellipse at 80% 30%,#7135a32b,transparent 65%),#05091d}
body:not(.studio-v2) .btn-primary,.zx-vip-btn{background:var(--brand-action)!important;color:#fff!important;border-color:#b797ee70!important}
body:not(.studio-v2) .btn-primary:hover{background:linear-gradient(115deg,#5140c5,#a83285)!important}
.grad-text,.zx-logo-text b{background:var(--brand-spectrum);background-clip:text;color:transparent}
.logo-mark,.zx-logo-mark{background:var(--brand-action)!important;color:#fff!important}
.pill,.zx-header .zx-progress-chip{background:#17203e;border-color:#8298d24d;color:#d8d8f6}
.zx-header #searchBox{background:#111b3b!important;border-color:#8298d24d!important}
.zx-side-head{background:linear-gradient(115deg,#15264f,#342050);border-color:#839de34d}
.zx-main .zx-hero{background:linear-gradient(115deg,#112448,#301b47);border-color:#839de34d}
.chapter-item.active{background:#e6dcfa!important;color:#512780!important}
.chapter-item.active .zx-state{border-color:#9860c3}

/* Blend the composited product plane into the midnight canvas. */
.cinema-art{mix-blend-mode:lighten}


.hero-product-art{mask-image:linear-gradient(to right,transparent,#000 10%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}

/* ── logo-cards-2610: โลโก้แอปซ้อนขอบล่างของรูปปก (การ์ดผลงาน + หัวหน้าเคส) ── */
.portfolio-item.has-logo .portfolio-overlay{position:relative;padding-top:46px}
.portfolio-logo{position:absolute;left:18px;top:-34px;width:68px;height:68px;border-radius:18px;object-fit:cover;background:#0a1230;border:3px solid #05091d;box-shadow:0 12px 28px #0009,0 0 0 1px #ffffff1f;z-index:2;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.portfolio-item:hover .portfolio-logo{transform:translateY(-4px) rotate(-3deg)}
.section--paper .portfolio-logo{border-color:#f4f2f7}
.case-logo{display:block;width:88px;height:88px;border-radius:24px;object-fit:cover;margin:0 0 20px;box-shadow:0 16px 40px #0008,0 0 0 1px #ffffff1f}
.app-tile__logo{position:absolute;left:18px;bottom:-30px;width:64px;height:64px;border-radius:17px;object-fit:cover;border:3px solid #0a1230;box-shadow:0 12px 28px #0009;z-index:2}
@media (max-width:640px){.portfolio-logo{width:56px;height:56px;top:-28px;border-radius:15px}.portfolio-item.has-logo .portfolio-overlay{padding-top:38px}.case-logo{width:72px;height:72px;border-radius:20px}}
@media (prefers-reduced-motion:reduce){.portfolio-item:hover .portfolio-logo{transform:none}}

/* ── app-lineup-2610: หน้าบริการแอปมือถือ — ปกส่งไว + ไอคอน 4 แอปบนสโตร์ + การ์ดแอป ── */
.app-lineup{display:grid;gap:18px}
.app-lineup__cover{margin:0;border-radius:24px;overflow:hidden;border:1px solid #ffffff1f;box-shadow:0 30px 80px #0009;position:relative}
.app-lineup__cover img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.app-lineup__cover figcaption{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.04em;color:#e8e4f5;background:#05091dcc;padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.app-lineup__row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.app-lineup__app{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:18px;background:#0a1230;border:1px solid #ffffff17;color:#f4f2f7;text-decoration:none;font-size:13px;font-weight:600;transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s}
.app-lineup__app img{width:60px;height:60px;border-radius:16px;object-fit:cover;box-shadow:0 8px 20px #0008}
.app-lineup__app:hover,.app-lineup__app:focus-visible{transform:translateY(-4px);border-color:#a785ff}
.app-lineup__note{margin:0;font-size:12px;color:#a9a6b8;text-align:center}
.bento--apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.app-tile .tile__shot{position:relative;display:block;aspect-ratio:16/10;overflow:visible}
.app-tile .tile__shot>img:first-child{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.app-tile .tile__body{padding-top:44px}
.store-pills{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.store-pill{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid #ffffff2e;color:#f4f2f7;font-size:12px;font-weight:600;text-decoration:none;transition:border-color .2s,background .2s}
.store-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:#58ddff;margin-right:8px}
.store-pill:hover,.store-pill:focus-visible{border-color:#a785ff;background:#a785ff1a}
@media (max-width:900px){.bento--apps{grid-template-columns:1fr}}
@media (max-width:520px){.app-lineup__row{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.app-lineup__app:hover{transform:none}}
.bento.bento--apps>*{grid-column:auto}
.app-tile .tile__shot .app-tile__logo{position:absolute;left:18px;bottom:-30px;width:64px;height:64px;border-radius:17px;object-fit:cover;object-position:center}
.app-tile .tile__shot>img:first-child{object-position:center}

/* ── case-2610: หน้าเคสโปรเจกต์ — สีประจำโปรเจกต์ (--ac/--ac2 จาก projects.json) + โจทย์ / ฟีเจอร์ / วิธีเริ่ม ── */
.case-page{--ac:#a785ff;--ac2:#58ddff;--ink:#15122a;--ink-2:#4a4560}
.case-page .cs-head{margin-bottom:44px;max-width:860px}
.case-page .cs-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}
.cs-kicker{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--ac);margin-bottom:14px}
.cs-kicker::before{content:'';width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--ac),var(--ac2))}
.cs-title{font-size:clamp(34px,4.2vw,58px);line-height:1.15;letter-spacing:-.02em;margin:0}
.cs-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;background:color-mix(in srgb,var(--ac) 14%,#fff);color:color-mix(in srgb,var(--ac) 75%,#111)}
.cs-chip svg{width:18px;height:18px}
.cs-chip--light{background:#ffffff2e;color:#fff}

/* 01 · โจทย์ */
.cs-brief{background:radial-gradient(1200px 500px at 85% 0%,color-mix(in srgb,var(--ac) 16%,transparent),transparent 60%),#f4f2fb;color:var(--ink)}
.cs-brief .cs-title{color:var(--ink)}
.cs-brief .cs-kicker{color:color-mix(in srgb,var(--ac) 80%,#000)}
.cs-brief__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:stretch}
.cs-brief__problem,.cs-brief__who{border-radius:28px;padding:44px 44px 48px;display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden}
.cs-brief__problem{background:#fff;box-shadow:0 30px 70px -30px #1b14404d,0 0 0 1px #1b14400f}
.cs-brief__problem::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--ac),var(--ac2))}
.cs-lead{font-size:clamp(19px,1.6vw,23px);line-height:1.8;color:var(--ink);margin:0;font-weight:500}
.cs-brief__who{background:linear-gradient(140deg,var(--ac),color-mix(in srgb,var(--ac2) 85%,#000) 140%);color:#fff;box-shadow:0 30px 70px -30px color-mix(in srgb,var(--ac) 60%,transparent)}
.cs-brief__who::after{content:'';position:absolute;right:-80px;bottom:-80px;width:240px;height:240px;border-radius:50%;background:#ffffff1f}
.cs-brief__who p{font-size:clamp(18px,1.45vw,21px);line-height:1.75;margin:0;color:#fff;font-weight:500;position:relative;z-index:1}
.cs-link{margin-top:auto;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:12px 22px;border-radius:999px;background:#fff;color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;position:relative;z-index:1;transition:transform .25s,box-shadow .25s}
.cs-link svg{width:18px;height:18px;transition:transform .25s}
.cs-link:hover,.cs-link:focus-visible{transform:translateY(-2px);box-shadow:0 12px 26px #0003}
.cs-link:hover svg{transform:translateX(4px)}

/* 02 · ฟีเจอร์ */
.cs-features{background:radial-gradient(900px 480px at 0% 0%,color-mix(in srgb,var(--ac) 22%,transparent),transparent 65%),radial-gradient(800px 420px at 100% 100%,color-mix(in srgb,var(--ac2) 16%,transparent),transparent 60%),#060b22}
.cs-features .cs-title{color:#fff}
.cs-count{display:inline-flex;align-items:baseline;gap:10px;color:#cfcbe0;font-size:15px}
.cs-count b{font-size:46px;line-height:1;font-weight:800;background:linear-gradient(120deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cs-feat{position:relative;padding:34px 30px 36px;border-radius:24px;background:linear-gradient(180deg,#ffffff0d,#ffffff05);border:1px solid #ffffff17;display:flex;flex-direction:column;gap:22px;min-height:230px;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,background .35s}
.cs-feat:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ac) 60%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 14%,transparent),#ffffff05)}
.cs-feat .icon-box{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;box-shadow:0 14px 30px -10px color-mix(in srgb,var(--ac) 70%,transparent);border:0}
.cs-feat:nth-child(even) .icon-box{background:linear-gradient(135deg,var(--ac2),var(--ac))}
.cs-feat .icon-box svg{width:26px;height:26px}
.cs-feat__num{position:absolute;top:26px;right:28px;font-size:44px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.5px #ffffff26}
.cs-feat p{margin:0;font-size:clamp(17px,1.3vw,19px);line-height:1.7;color:#f1eff8;font-weight:500}

/* 04 · วิธีเริ่ม */
.cs-start{background:radial-gradient(1000px 520px at 100% 0%,color-mix(in srgb,var(--ac2) 18%,transparent),transparent 60%),#f4f2fb;color:var(--ink)}
.cs-start .cs-title{color:var(--ink)}
.cs-start .cs-kicker{color:color-mix(in srgb,var(--ac) 80%,#000)}
.cs-start__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.cs-sub{font-size:18px;line-height:1.8;color:var(--ink-2);margin:22px 0 32px;max-width:520px}
.cs-actions{display:flex;flex-wrap:wrap;gap:12px}
.cs-actions .btn{min-height:52px;padding:12px 24px;font-size:15px;border-radius:999px}
.cs-actions .btn-primary{background:linear-gradient(120deg,var(--ac),color-mix(in srgb,var(--ac2) 70%,var(--ac)));color:#fff;border:0;box-shadow:0 14px 30px -12px color-mix(in srgb,var(--ac) 80%,transparent)}
.cs-actions .btn-secondary{background:#0e1430;color:#fff;border:1px solid #0e1430}
.cs-actions .btn-secondary:hover,.cs-actions .btn-secondary:focus-visible{background:#1c2450;border-color:#1c2450;color:#fff}
.cs-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:none;position:relative}
.cs-steps::before{content:'';position:absolute;left:35px;top:40px;bottom:40px;width:2px;background:linear-gradient(180deg,var(--ac),var(--ac2));opacity:.35}
.cs-step{display:flex;align-items:center;gap:22px;padding:24px 28px 24px 18px;border-radius:22px;background:#fff;box-shadow:0 22px 50px -28px #1b14404d,0 0 0 1px #1b14400f;position:relative;transition:transform .3s}
.cs-step:hover{transform:translateX(6px)}
.cs-step__num{flex:none;width:36px;height:36px;margin-left:0;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff;background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:0 0 0 7px #fff,0 8px 18px -6px color-mix(in srgb,var(--ac) 80%,transparent)}
.cs-step p{margin:0;font-size:clamp(17px,1.3vw,19px);line-height:1.65;color:var(--ink);font-weight:500}

@media (max-width:980px){.cs-brief__grid,.cs-start__grid{grid-template-columns:1fr}.cs-feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-start__grid{gap:40px}}
@media (max-width:640px){.cs-feat-grid{grid-template-columns:1fr}.cs-brief__problem,.cs-brief__who{padding:30px 26px 34px;border-radius:22px}.case-page .cs-head--row{flex-direction:column;align-items:flex-start}.cs-feat{min-height:0}.cs-actions .btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.cs-feat,.cs-step,.cs-link{transition:none}.cs-feat:hover,.cs-step:hover{transform:none}}
.cs-chip{align-self:flex-start}
.case-page .eyebrow{color:var(--ac)}
.case-page .eyebrow::before{background:linear-gradient(90deg,var(--ac),var(--ac2))}
.case-page .phero .stat-num{background:linear-gradient(120deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.case-page .case-summary .btn-primary,.case-page #cta .btn-primary{background:linear-gradient(120deg,var(--ac),color-mix(in srgb,var(--ac2) 70%,var(--ac)));border:0;color:#fff}
.case-page .case-summary .small-label{color:var(--ac2)}
.case-page .case-summary h2{font-size:21px;line-height:1.35;margin:0 0 8px;color:#fff}
.case-page .case-summary p{font-size:16.5px;line-height:1.75;color:#d4d1e2}
.case-page .case-summary .small-label{font-size:12px;letter-spacing:.14em}
.case-page .hero-lead{font-size:19px}
.case-page .phero .stat-label{font-size:13px;color:#c9c6d8}
.case-page .gallery figcaption,.case-page .presentation-shot figcaption{font-size:14px;line-height:1.6;color:#c9c6d8}

/* ── readable-2610: ขนาดตัวหนังสือขั้นต่ำทั้งเว็บ (ภาษาไทยต้องใหญ่กว่าอังกฤษ) — เจ้าของติว่าตัวเล็กอ่านยาก ── */
html body{font-size:16px}
html body main p,html body main li{line-height:1.75}
html body .eyebrow,html body .small-label,html body .cs-kicker{font-size:14px;letter-spacing:.06em}
html body .portfolio-cat{font-size:12px;letter-spacing:.08em}
html body .portfolio-title{font-size:clamp(21px,1.7vw,25px);line-height:1.3}
html body .portfolio-tagline{font-size:15px;line-height:1.65;color:#cfcbe0}
html body .section--paper .portfolio-tagline{color:#4a4560}
html body .btn{font-size:15px}
html body .btn-sm{font-size:14px;min-height:44px}
html body .badge{font-size:12.5px}
html body .stat-label{font-size:14px;line-height:1.5}
html body .scope-list,html body .scope-list li,html body .tile__gets li{font-size:16px}
html body .scope-meta,html body .svc-source,html body .compare-eg,html body .price-ribbon{font-size:13px}
html body .card p,html body .tile__body,html body .tile__body p,html body .get-card p,html body .product-desc,html body .team-bio{font-size:16px;line-height:1.75}
html body .price-name,html body .process-meta,html body .pc-price-note,html body .pc-track__note,html body .team-role{font-size:14px}
html body p.small,html body .small{font-size:15px;line-height:1.7}
html body .svc-switch,html body .svc-switch a{font-size:15px}
html body table.compare,html body table.compare td,html body table.compare th{font-size:15px}
html body .pc-tl__facts,html body .pc-tl__facts li,html body .pgroup__list li{font-size:16px}
html body .pc-toc,html body .pc-toc a{font-size:15px}
html body .f-label{font-size:15px}
html body .learn-more,html body .text-link{font-size:15px}
html body .selected-caption p,html body .selected-caption{font-size:16px}
html body figure figcaption{font-size:14px;line-height:1.6}
html body .mono{font-size:13px}
html body .lead{font-size:clamp(17px,1.35vw,19px);line-height:1.8}
html body .tagrow .badge,html body .tagrow span{font-size:13px}
html body .timeline__when{font-size:14px}
html body .timeline__row{font-size:16px}
/* หน้าเคส: ส่วน "ตอนนี้ไปถึงไหนแล้ว" ของโปรเจกต์ที่ยังไม่มีภาพหน้าจอ */
.case-page #screens .card{border-radius:24px;padding:30px 32px;border-color:color-mix(in srgb,var(--ac) 30%,#ffffff1a);background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 10%,transparent),#ffffff05)}
.case-page #screens .stats{border-color:color-mix(in srgb,var(--ac) 30%,#ffffff1a)}
.case-page #screens .stat-num{background:linear-gradient(120deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
html body .portfolio-overlay .btn,html body .portfolio-overlay .btn-sm{font-size:14px}
html body .svc-switch *{font-size:15px}
html body ul.pgroup__list,html body ul.pgroup__list *{font-size:16px}
html body .case-page .phero .stat-label{font-size:14px}
html body .pc-track__note,html body .showcase__caption,html body .svc-crumb,html body .pc-chan__row{font-size:14px}
html body .pc-tl__shot,html body .command-center__status{font-size:13px}
html body .text-link{font-size:15px}
html body main p.small.mb-0,html body .command-center__status{font-size:14px}
.pc-tl__shot img[src*="logos/"]{object-fit:contain;background:#fff;padding:8px}

/* ── audit-2610-A: หน้าแรก / ผลงาน / เกี่ยวกับเรา / ติดต่อ / สถานะ / 404 / ฟุตเตอร์ ── */
.contact-opening~section .pc-chan__row{grid-template-columns:48px minmax(0,1fr);gap:18px;padding:26px 24px;border:1px solid #839de333;border-radius:22px;background:#0a1230}
.contact-opening~section .pc-chan__row .icon-box{display:grid;place-items:center;width:48px;height:48px}
.contact-opening~section .pc-chan__row:nth-child(3n+1) .icon-box{color:#58ddff}
.contact-opening~section .pc-chan__row:nth-child(3n+2) .icon-box{color:#f38bd9}
.contact-opening~section .pc-chan__row:nth-child(3n) .icon-box{color:#f4cb85}
.contact-opening~section .pc-chan__row p,.contact-opening~section .pc-chan__row a{font-size:15px}
.contact-opening~section .pc-chan__row h3{font-size:20px}
.section--paper .card{background:#fff;border:1px solid #1b14401a;border-radius:24px;padding:28px 28px 30px;box-shadow:0 24px 60px -32px #1b14404d}
.section--paper .grid-3>.card:nth-child(3n+1){border-top:4px solid #a785ff}
.section--paper .grid-3>.card:nth-child(3n+2){border-top:4px solid #f38bd9}
.section--paper .grid-3>.card:nth-child(3n){border-top:4px solid #58ddff}
.section--paper .card .price-name{font-size:14px;letter-spacing:.04em;text-transform:none;font-weight:600;color:#5b3fb0}
.section--paper .card .stat-num{font-family:'IBM Plex Sans Thai',Manrope,sans-serif;font-size:clamp(26px,2.4vw,34px);font-weight:700;letter-spacing:-.02em;color:#182348}
.section--paper .card.pgroup{padding:22px 22px 26px}
.portfolio-thumb .portfolio-thumb__placeholder{display:grid;place-items:center;width:100%;height:100%;font-size:clamp(26px,2.4vw,34px);font-weight:800;letter-spacing:-.02em;color:#fff;text-align:center;padding:24px;text-shadow:0 10px 40px #0006;background:radial-gradient(ellipse at 25% 20%,color-mix(in srgb,var(--ac,#a785ff) 70%,transparent),transparent 60%),radial-gradient(ellipse at 85% 90%,color-mix(in srgb,var(--ac2,#f38bd9) 55%,transparent),transparent 55%),linear-gradient(135deg,#142349,#0a1230)}
.portfolio-item .portfolio-thumb::after{inset:auto 18px 18px auto}
@media(max-width:600px){.portfolio-item .portfolio-thumb::after{inset:auto 14px 14px auto}}
.team-social a.learn-more{width:auto;height:auto;min-height:44px;padding:10px 20px;border-radius:999px;gap:10px;white-space:nowrap;display:inline-flex;align-items:center;color:#83dfff;border-color:#58ddff55;font-size:15px}
#team .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
@media(max-width:700px){#team .team-grid{grid-template-columns:1fr}}
@media(min-width:901px){.hero .diagram-wrap .diagram{min-width:0}}
.pc-tl__shots{gap:18px}
.pc-tl__shot,.pc-tl__shot img{width:150px}
.pc-tl__shot img{height:110px}
.pc-tl__shot{font-family:inherit;font-size:14px;letter-spacing:.01em;line-height:1.45;overflow-wrap:anywhere;color:#4a4560}
.pc-tl__when .pc-tl__yr{font-size:13px}
.brief-section{background:radial-gradient(ellipse at 15% 30%,#45238133,transparent 60%),#0a1230}
.cinema-caption b{font-size:18px;font-weight:600}
.cinema-caption small{font-size:14px}
.baanmart-story .small-label,.work-lead-copy .small-label{font-size:13px;letter-spacing:.14em}
.studio-services .service-index{font-size:14px;color:#f38bd9}
.studio-story .studio-art span{font-size:12px}
.work-card-caption p{font-size:16px}
@media(max-width:600px){.cinema-caption small{font-size:13px}.work-card-caption p{font-size:15px}
 .project-selector button{grid-template-columns:1fr;grid-template-rows:auto auto;padding:12px 10px}.project-selector button img{display:none}.project-selector button .selector-title{font-size:15px;padding-right:0}.project-selector button>span:first-child{font-size:12px}
 .home-copy>p{font-size:16px}.home-copy .text-link,.work-lead-copy .text-link{font-size:14px}.studio-services .service-description p{font-size:15px}.service-description .text-link{font-size:14px}.faq-a-inner{font-size:15px}}
.process-step p{font-size:16px;line-height:1.75}
.process-step .process-meta{font-size:14px;letter-spacing:.04em}
.section--paper .process-step:nth-of-type(1) .process-num{color:#6536a9;border-color:#a785ff}
.section--paper .process-step:nth-of-type(2) .process-num{color:#a02a7d;border-color:#f38bd9}
.section--paper .process-step:nth-of-type(3) .process-num{color:#0b7fa6;border-color:#58ddff}
.section--paper .process-step:nth-of-type(4) .process-num{color:#9a6a12;border-color:#f4cb85}
.portfolio-badge .badge{font-size:13px;padding:6px 12px}
.filter-bar .filter-btn{font-size:14px}
#work-count{font-size:14px}
.portfolio-thumb{aspect-ratio:1.5}
@media(max-width:600px){.filter-bar .filter-btn{font-size:13px}}
.pgroup .pgroup__list{margin-top:6px}
.pgroup>p{min-height:3.6em}
.pgroup .pgroup__list .mono{font-size:12px;font-weight:700;letter-spacing:.08em;padding:3px 9px;border-radius:999px;background:#e6f9ff;color:#0b7fa6}
.command-center__status small{font-family:inherit;font-size:14px;letter-spacing:0;line-height:1.5}
.command-center__status>div:nth-child(1) strong{color:#a785ff}
.command-center__status>div:nth-child(2) strong{color:#58ddff}
.command-center__status>div:nth-child(3) strong{color:#f38bd9}
.command-center__status>div:nth-child(4) strong{color:#f4cb85}
.site-footer .footer-col h4{font-size:14px;color:#a785ff;letter-spacing:.06em}
.site-footer .footer-col a{font-size:15px}
.site-footer .footer-bottom,.site-footer .footer-bottom a,.site-footer .footer-bottom span,.site-footer .motion-toggle{font-size:13px}
.site-footer .footer-top>p,.site-footer .footer-brand a{font-size:15px}
.editorial-split h2{margin-bottom:22px}
.studio-story .editorial-split p{max-width:620px}
.studio-services .editorial-split>div:first-child>p{font-size:17px}
.section-head--row:has(>.section-subtitle){grid-template-columns:minmax(0,1fr);align-items:start}
.pc-track span.pc-track__note{font-size:15px;line-height:1.6}
.pc-track__mark{color:#a785ff;border-color:#a785ff66}
.contact-opening .form .small{font-size:14px;line-height:1.7}
form[data-contact-form] .btn-secondary{background:var(--brand-action,#7c4dff);color:#fff;border-color:#b797ee70}
.split:has(form[data-contact-form]){align-items:start}
.pc-404-links small{font-size:15px;line-height:1.6}
.pc-404-links a:nth-child(2) .icon-box{background:#fde3f5;color:#a02a7d}
.pc-404-links a:nth-child(3) .icon-box{background:#dff6ff;color:#0b7fa6}
.pc-404-links a:nth-child(4) .icon-box{background:#fdf1dc;color:#8a5a00}

/* ── audit-2610-B: หน้าบริการ / สโตร์ / นโยบาย / ข้อกำหนด ── */
.section--paper a.btn-primary,.section--paper a.btn-primary:hover{color:#fff}
.section--paper a.btn-secondary{background:#0e1430;border-color:#0e1430;color:#fff}
.section--paper a.btn-secondary:hover{background:#1c2450;border-color:#1c2450;color:#fff}
#sell .card{background:#fff;border:1px solid #1b144014;border-radius:20px;padding:28px 28px 30px;box-shadow:0 20px 50px -30px #1b14404d}
#sell .card .price-name{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;font-size:15px;font-weight:700;letter-spacing:0;background:linear-gradient(135deg,#a785ff,#6d3fd0)}
#sell .card:nth-child(2) .price-name{background:linear-gradient(135deg,#58ddff,#1279b0)}
#sell .card:nth-child(3) .price-name{background:linear-gradient(135deg,#f38bd9,#b33a93)}
#sell .card h3{font-size:24px;margin-top:6px}
#sell .card p{color:#3f4560}
html[data-lang="th"] :is(table th,.process-meta,.price-name,.scope-meta,.svc-crumb,.compare-eg,.price-ribbon,.svc-source,.pc-price-note,.pc-toc>strong,.footer-col h4,.stat-label,.portfolio-cat,.eyebrow,.small-label,.cs-kicker){letter-spacing:0;text-transform:none}
html[data-lang="th"] table th{font-size:14px;font-weight:600;color:#c3cbe6}
.feature-item>.feature-icon{width:22px;height:22px;min-width:22px;border:0;border-radius:50%;background:#58ddff1f;color:#58ddff;margin-top:5px;display:grid;place-items:center;box-shadow:none}
.feature-item>.feature-icon svg{width:13px;height:13px}
.feature-list{gap:10px}
.feature-item{gap:12px;font-size:16px;color:#cdd4ec}
.tile__body>.badge,.tile__body>.learn-more{justify-self:start}
.section-head>.badge{justify-self:start;align-self:flex-start;width:max-content}
@media(max-width:640px){
 .table-wrap:has(.compare){border:0;overflow:visible}
 .compare{min-width:0}.compare thead{display:none}
 .compare,.compare tbody,.compare tr,.compare td{display:block;width:100%}
 .compare tr{background:#0a1230;border:1px solid #839de333;border-radius:18px;padding:18px 20px;margin-bottom:14px}
 .compare td{border:0;padding:6px 0;font-size:15px}
 .compare td:first-child{background:none;font-size:20px;padding-bottom:8px}
 .compare td:not(:first-child)::before{display:block;font-size:12px;font-weight:600;color:#58ddff;margin-bottom:2px}
 html[data-lang="th"] .compare td:nth-child(2)::before{content:'เหมาะกับ'}
 html[data-lang="th"] .compare td:nth-child(3)::before{content:'ระยะเวลาโดยทั่วไป'}
 html[data-lang="th"] .compare td:nth-child(4)::before{content:'สิ่งที่ส่งมอบ'}
 html[data-lang="th"] .compare td:nth-child(5)::before{content:'ตัวอย่างจริง'}
 html[data-lang="en"] .compare td:nth-child(2)::before{content:'Right for'}
 html[data-lang="en"] .compare td:nth-child(3)::before{content:'Typical duration'}
 html[data-lang="en"] .compare td:nth-child(4)::before{content:'What you receive'}
 html[data-lang="en"] .compare td:nth-child(5)::before{content:'Real example'}
}
.tile__shot:has(img[src*="pf-flashagent"]),.tile__shot:has(img[src*="pf-buffetqr"]){background:#f1f3f7}
.tile__shot img[src*="pf-flashagent"],.tile__shot img[src*="pf-buffetqr"]{object-fit:contain;object-position:center;padding:14px}
@media(min-width:961px){.card.tile--row .tile__shot{background:radial-gradient(ellipse at 50% 60%,#2a1d5c,#0a1230 70%)}.card.tile--row .tile__shot img{object-fit:contain;padding:28px}}
.price-card .price-name{font-size:16px;font-weight:700;color:#7fe3ff}
.price-card .price-amount--text{font-size:24px;color:#f6f7ff}
.price-card .scope-meta{font-size:15px;line-height:1.65;color:#c3cbe6}
html body .price-card .scope-list li{font-size:16px;color:#d4daf0}
@media(min-width:961px){.bento>.tile:first-child:nth-last-child(2),.bento>.tile:first-child:nth-last-child(2)~.tile{grid-column:span 6}}
.bento>.card.tile:not(:has(.tile__shot))::before{content:'';display:block;aspect-ratio:16/10;background:radial-gradient(ellipse at 15% 0%,#58ddff40,transparent 60%),radial-gradient(ellipse at 90% 100%,#f38bd940,transparent 60%),linear-gradient(135deg,#142a5c,#2b1650);border-bottom:1px solid #839de333}
.hero .stats:not(.stats--3){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:780px){.stats--3>.stat:last-child:nth-child(odd){grid-column:1/-1}}
.section--paper .process-step .process-num{border:0;color:#fff;font-weight:700;background:linear-gradient(135deg,#a785ff,#6d3fd0);box-shadow:0 10px 24px -10px #6d3fd099}
.section--paper .process-step:nth-of-type(2) .process-num{color:#fff;background:linear-gradient(135deg,#58ddff,#1279b0)}
.section--paper .process-step:nth-of-type(3) .process-num{color:#fff;background:linear-gradient(135deg,#f38bd9,#b33a93)}
.section--paper .process-step:nth-of-type(4) .process-num{color:#fff;background:linear-gradient(135deg,#f4cb85,#b97c12)}
.section--paper .process-step:nth-of-type(5) .process-num{color:#fff;background:linear-gradient(135deg,#a785ff,#58ddff)}
html body .section--paper .process-meta{font-size:14px;font-weight:600;color:#6536a9}
.section--paper .process-step p{font-size:16px;color:#3f4560}
.svc-switch a{padding:26px 28px;gap:10px;position:relative;box-shadow:inset 0 3px 0 var(--sw,#58ddff)}
.svc-switch a:nth-child(2){--sw:#f38bd9}
.svc-switch a:nth-child(3){--sw:#f4cb85}
.svc-switch a::after{content:'→';position:absolute;top:22px;right:24px;font-size:20px;color:var(--sw,#58ddff)}
html body .svc-switch strong,html body .svc-switch strong *{font-size:20px;padding-right:28px}
html body .svc-switch a>span,html body .svc-switch a>span *{font-size:16px;color:#c3cbe6}
.grid .get-card h3{font-size:20px}
.grid>.get-card:nth-child(4n+2) .icon-box{color:#f38bd9;border-color:#f38bd955;background:#f38bd914}
.grid>.get-card:nth-child(4n+3) .icon-box{color:#f4cb85;border-color:#f4cb8555;background:#f4cb8514}
.grid>.get-card:nth-child(4n+4) .icon-box{color:#a785ff;border-color:#a785ff55;background:#a785ff14}
.pc-prose{max-width:820px}
.pc-prose p{font-size:17px;line-height:1.9;color:#cdd4ec}
html body .pc-toc a{font-size:16px}
#products .card.spot.mt-4{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:56px;padding:36px 40px;border-color:#f4cb8566;background:radial-gradient(ellipse at 100% 0%,#f4cb8522,transparent 55%),var(--card-bg,#0a1230)}
#products .card.spot.mt-4>*{grid-column:1}
#products .card.spot.mt-4>.feature-list{grid-column:2;grid-row:1/span 4;align-self:center}
@media(max-width:780px){#products .card.spot.mt-4{grid-template-columns:1fr;padding:26px 22px}#products .card.spot.mt-4>.feature-list{grid-column:1;grid-row:auto}}
#products .card.spot>.product-price-row{margin-top:auto;padding-top:12px}
#products .product-name{font-size:19px;line-height:1.4}
.howpay>.card::before{color:transparent;-webkit-text-stroke:1.5px #a785ff80;font-size:40px;font-weight:800}
.howpay>.card:nth-child(2)::before{-webkit-text-stroke-color:#58ddff80}
.howpay>.card:nth-child(3)::before{-webkit-text-stroke-color:#f38bd980}

/* ── audit-2610-C: หน้าเคสโปรเจกต์ (เทมเพลตเดียว 22 หน้า) + หน้าคู่มือ AI ── */
.case-page .case-badges{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.case-page .case-heading h1{line-height:1.15;margin-bottom:16px}
html body .case-page .case-summary .btn{font-size:15px;min-height:46px;padding:12px 20px}
html body .case-page .phero__back{font-size:14px!important;padding:10px 18px 10px 14px!important;gap:6px}
html body .case-page .case-badges .badge{font-size:13px;padding:8px 14px}
html body .case-page .project-cover figcaption{font-size:13px;color:#a9a6bd}
html body .pnav a{font-size:14px}
html body .case-page .case-summary .btn-secondary{background:color-mix(in srgb,var(--ac) 14%,#0c1636);border:1px solid color-mix(in srgb,var(--ac) 55%,transparent);color:#fff}
html body .case-page .case-summary .btn-secondary:hover{background:color-mix(in srgb,var(--ac) 28%,#0c1636)}
@media(max-width:600px){.case-page .case-summary .btn-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.case-page .case-summary .btn-group .btn-primary{grid-column:1/-1}}
.case-page .case-summary{align-self:center}
.case-page .case-summary p{font-size:17px}
.portfolio-item .portfolio-thumb::after{top:auto;left:auto}
.case-page .portfolio-grid--3 .portfolio-item:not(.has-logo) .portfolio-overlay{padding-top:46px}
@media(max-width:640px){.case-page .portfolio-grid--3 .portfolio-item:not(.has-logo) .portfolio-overlay{padding-top:38px}}
/* โปสเตอร์ของโปรเจกต์ที่ยังไม่มีภาพ */
.case-poster{position:relative;overflow:hidden;border-radius:28px;min-height:420px;padding:44px 44px 40px;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;color:#fff;background:radial-gradient(120% 90% at 20% 0%,color-mix(in srgb,var(--ac) 75%,#0a1230),transparent 70%),radial-gradient(90% 80% at 100% 100%,color-mix(in srgb,var(--ac2) 55%,#0a1230),transparent 70%),#0a1230;box-shadow:0 40px 90px -40px color-mix(in srgb,var(--ac) 70%,transparent),inset 0 0 0 1px #ffffff1f}
.case-poster::before{content:'';position:absolute;inset:0;background-image:radial-gradient(#ffffff22 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 75%);pointer-events:none}
.case-poster__icon{position:absolute;top:40px;left:44px;width:96px;height:96px;border-radius:26px;object-fit:cover;box-shadow:0 20px 40px -12px #0009}
.case-poster strong{font-size:clamp(34px,3.6vw,52px);line-height:1.1;letter-spacing:-.02em;position:relative}
.case-poster ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative}
.case-poster li{font-size:16px;line-height:1.55;padding-left:26px;position:relative;color:#f1eff8}
.case-poster li::before{content:'';position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:4px;background:linear-gradient(135deg,var(--ac2),#fff)}
.case-poster__note{font-size:13px;color:#ffffffb3;position:relative}
@media(max-width:640px){.case-poster{min-height:360px;padding:30px 24px 28px}.case-poster__icon{top:26px;left:24px;width:72px;height:72px;border-radius:20px}}
/* แกลเลอรีภาพมือถือ */
.case-page .gallery__phones{justify-content:center}
.case-page .gallery__phone{flex:1 1 0;min-width:170px;max-width:250px;width:auto}
@media(max-width:600px){.case-page .gallery__phones{display:grid;grid-template-columns:1fr 1fr;gap:16px}.case-page .gallery__phone{max-width:none;min-width:0}.case-page .gallery__phone:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 8px)}}
.case-page .gallery__rest .shot img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.case-page .presentation-gallery{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent);padding-right:80px}
.case-page .presentation-section{background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 10%,#080f29),#080f29 60%)}
.case-page #screens:has(.gallery){background:#f4f2fb}
.case-page #screens:has(.gallery) .section-title{color:#14122a}
.case-page #screens:has(.gallery) .shot{background:#fff;border-color:#1b14401a;box-shadow:0 22px 50px -28px #1b14404d}
html body .case-page #screens:has(.gallery) figcaption{color:#4a4560}
.case-page #screens:has(.gallery) .badge{color:#14122a;border-color:#1b144026}
.case-page #screens .split .lead{padding:18px 22px;border-left:3px solid var(--ac);background:#ffffff06;border-radius:0 14px 14px 0;color:#d4d1e2}
.case-page .timeline__row{align-items:center}
html body .case-page .timeline__when{padding-top:0}

/* หน้าคู่มือ AI */
html body.course-page .final{background:radial-gradient(600px 300px at 50% 0%,#ffffff22,transparent 70%),linear-gradient(120deg,#3b1d8f,#7c3aed 50%,#be185d)}
html body.course-page .final .btn-ghost{background:transparent;color:#fff;border:1.5px solid #fff}
html body.course-page .final .btn-ghost:hover{background:#ffffff1f}
html body.course-page .price .btn-ghost{background:transparent;border:1.5px solid #bdadff;color:#ece6ff}
html body.course-page .price .btn-ghost:hover{background:#bdadff1f}
html body.course-page .addon{border-style:solid;font-size:16px;color:#c9cce3;padding:20px 22px}
@media(max-width:600px){html body.course-page .std{grid-template-columns:1fr}html body.course-page .std div{display:grid;grid-template-columns:30px 1fr;column-gap:14px}html body.course-page .std em{grid-row:span 2;margin:0}}
@media(max-width:760px){html body.course-page .stage{position:relative}html body.course-page .node{position:absolute;top:-16px;left:16px;width:44px;height:44px;border-radius:14px;z-index:2}html body.course-page .node b{font-size:1.2rem}html body.course-page .stage-card{padding:36px 16px 18px}html body.course-page .mod{padding:12px}}
html body.course-page .feat p,html body.course-page .persona p,html body.course-page .std p,html body.course-page .mod{font-size:16px;line-height:1.7}
html body.course-page .feat p,html body.course-page .persona p,html body.course-page .std p{color:#bcc2dc}
#vip-page li.text-gray-400{color:#6b7280}
#vip-page ul.text-sm,#vip-page ul.text-sm li,#vip-page p.text-sm{font-size:15px;color:#374151}
#vip-page p.text-xs{font-size:13px;color:#6b7280}
#vip-page .text-vip{color:#92400e}
/* น้อง Zzax ขยาย 2 เท่าตามเจ้าของสั่ง 10 ต.ค. 69 — เดิม 68px (คอม) / 56px (มือถือ) จาก studio-2026 · สัดส่วนสไปรต์ 201:256 */
:root{--zx-h:136px;--zx-w:106.78px}
@media(max-width:600px){:root{--zx-h:112px;--zx-w:87.94px}}