@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("assets/fonts/Manrope-Variable.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/IBMPlexMono-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/IBMPlexMono-Medium.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/IBMPlexSansThai-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/IBMPlexSansThai-Medium.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/IBMPlexSansThai-SemiBold.woff2") format("woff2")}

/* R20: fixes from the measured skills audit; established identities preserved. */
#brief{overscroll-behavior:contain;scrollbar-gutter:stable}
#brief .brief-field-error{display:block;margin:7px 0 0;color:#82352e;font-size:1rem;line-height:1.5}
#brief textarea[aria-invalid="true"]{border-color:#82352e;border-width:2px}
#brief-form[aria-busy="true"] button[type="submit"]{cursor:progress;opacity:.72}
#brief-status{min-height:1.65em}
.office-room-rail small{font-size:12px;color:#576875;line-height:1.5}
.office-room-rail span{font-size:13px;line-height:1.5}
.healthcare .story-index{color:#4f5f55;font-size:13px;line-height:1.5}
.healthcare .asset-result small{color:#4f5445;font-size:12px;line-height:1.5}
#field-notes > .r19-finder-return{margin-inline:6vw}
.r20-finder-count{color:#405548;font-size:var(--reading-size);line-height:1.6;margin:0 0 16px;font-variant-numeric:tabular-nums}
.health-kpis strong,.measure-head b,.cohort b,#care-time{font-variant-numeric:tabular-nums}
.health-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.health-kpis article{min-width:0}
@media(max-width:480px){.health-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.health-kpis article:first-child{grid-column:1/-1;grid-template-columns:1fr 1fr;align-items:center}.health-kpis article:first-child strong{font-size:30px}.health-kpis article:first-child span{text-align:right}.health-kpis span{font-size:12px;line-height:1.5}.health-kpis article{padding:14px 12px}}
@media(max-width:760px){#field-notes > .r19-finder-return{margin-inline:5vw}.office-room-rail span{padding:10px 7px}}
@media(forced-colors:active){#brief textarea[aria-invalid="true"]{border:2px dashed CanvasText}}

/* R20 immediate welcome: the text does not wait for WebGL or globe data. */
body:not([data-chapter]) #hello{visibility:visible}
body:not(.capture) #hello h1{animation:hello-in 1.5s cubic-bezier(.15,.65,.2,1) both}
@media(prefers-reduced-motion:reduce){body:not(.capture) #hello h1{animation:none}}

/* Keep the original story ratio reserved before native-lazy stills decode. */
.simple-chapter img.simple-art{height:auto;aspect-ratio:1920/1086}

/* A13: preserve the Thai company name as one word, without changing copy. */
.r20-brand-word{white-space:nowrap}
/* A12: one intentional action group; original colors and wording retained. */
.r20-hero-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:28px}
.r20-hero-actions > :is(.r18-primary,.button,.office-start,.text-link){margin:0;min-height:56px;padding:16px 20px;font-family:inherit;font-size:14px;font-weight:600;line-height:1.5;display:inline-flex;align-items:center;justify-content:center;gap:16px}
@media(max-width:480px){.r20-hero-actions > :is(.r18-primary,.button,.office-start,.text-link){flex:1 1 auto}}

.r20-hero-actions .office-start > span:last-child{font-size:1.25em;line-height:1}

/* R21: recognizable places, explicit care routes, and local-first delivery. */
.office-hero-photo{aspect-ratio:4/3}.office-hero-photo picture{display:block;width:100%;height:100%}
.office-hero-photo picture img{height:100%;aspect-ratio:4/3;object-fit:cover}
#portals .portal{height:510px;isolation:isolate;overflow:hidden}
#portals .card-top{z-index:4;position:relative}
#portals .portal-art{display:none}
.r21-portal-scene{position:absolute;inset:65px 0 125px;overflow:hidden;z-index:0}
.r21-portal-scene img{width:100%;height:100%;object-fit:cover;object-position:70% center;opacity:.92;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .6s}
.r21-portal-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--portal-bottom) 0%,transparent 62%)}
.portal.heritage{--portal-bottom:#101a30}.portal.healthcare{--portal-bottom:#e8e8e3}.portal.software{--portal-bottom:#141416}
.portal.healthcare .r21-portal-scene{inset:70px 0 155px;background:#06111a}
.portal.healthcare .r21-portal-scene:after{background:linear-gradient(0deg,#e8e8e3,transparent 35%)}
.portal:is(:hover,:focus-visible) .r21-portal-scene img{transform:scale(1.06);opacity:1}
#portals .card-copy{z-index:3;bottom:28px}#portals .card-copy h3{font-size:clamp(28px,2.7vw,40px);margin-bottom:12px}
.r21-scene-signal{position:absolute;width:8px;height:8px;background:#ead4a2;border-radius:50%;top:38%;left:66%;box-shadow:0 0 20px #edcf97;animation:r21-beacon 3s ease-in-out infinite;z-index:2}
@keyframes r21-beacon{50%{opacity:.35;box-shadow:0 0 25px 8px #edcf971c}}
.health-hero .health-image{border-radius:0;min-height:0;height:auto;background:#f5f4ed;overflow:visible;margin-right:0}
.living-care.r21-care{min-height:0;height:auto;background:#f5f4ed;overflow:visible;display:flex;flex-direction:column;padding:0 24px 24px}
.r21-care .r21-care-image{position:relative;display:block;aspect-ratio:1;width:100%;height:auto;object-fit:contain;inset:auto;mix-blend-mode:multiply}
.r21-care .living-top{position:relative;inset:auto;display:flex;justify-content:space-between;padding:14px 0;font-size:11px;letter-spacing:.08em}
.r21-care .r21-care-places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:-35px;z-index:3}
.r21-care .living-node{position:relative;inset:auto!important;border-radius:3px;padding:12px 8px;min-height:58px;justify-content:center;font-size:13px;backdrop-filter:none;box-shadow:none;background:#fafaf5;border:1px solid #809b87}
.r21-care .living-node[aria-pressed=true]{background:#2e4d3b;color:white}
.r21-care .living-node svg{flex:none;width:20px;height:24px}
.r21-care .living-note{position:relative;inset:auto;display:grid;margin:18px 0 0;padding-top:16px;min-height:105px}
.r21-care .living-note p{min-height:0;font:17px/1.5 'Manrope','IBM Plex Sans Thai',sans-serif}.r21-care .living-note small{font-size:12px}
.r21-care:after{content:'';position:absolute;left:16%;top:53%;width:16px;height:16px;border:2px solid #335f45;border-radius:50%;box-shadow:0 0 0 7px #466d3c24;transition:left .7s,top .7s;pointer-events:none}
.r21-care[data-focus="1"]:after{left:53%;top:36%}.r21-care[data-focus="2"]:after{left:79%;top:21%}
.r21-scenario{margin:32px 0 0;padding:28px;background:#f8f9f2;border:1px solid #9eafa1;color:#263e32}
.r21-scenario h4{font-size:24px;font-weight:500;line-height:1.25;margin:0 0 12px;letter-spacing:-.03em}.r21-scenario p{margin-bottom:16px}
.r21-switches{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.r21-switches button,.r21-steps button{min-height:46px;padding:10px 15px;border:1px solid #7c9583;background:transparent;color:#2c4636;border-radius:4px;font-size:14px;line-height:1.4}
.r21-switches button[aria-pressed=true],.r21-steps button[aria-pressed=true]{background:#2d4c39;color:#fff;border-color:#2d4c39}
.r21-geofence-map{position:relative;aspect-ratio:1.5;background:#e6ece2;border:1px solid #b7c5b7;overflow:hidden}
.r21-geofence-map svg{display:block;width:100%;height:100%}.r21-geofence-map .geo-room{fill:#fafbf5;stroke:#9cac9e;stroke-width:2}.r21-geofence-map .geo-wall{fill:#bccbbf}.r21-geofence-map .geo-boundary{fill:#d9e6cd66;stroke:#5c7e48;stroke-width:3;stroke-dasharray:9 7}
.r21-geofence-map[data-alert=true] .geo-boundary{fill:#d5ac6935;stroke:#a65e22}
.r21-zone-labels{position:absolute;inset:0;pointer-events:none}.r21-zone-labels span{position:absolute;font-size:12px;line-height:1.35;max-width:35%;padding:5px;background:#fafbf5e6}.r21-zone-labels span:nth-child(1){left:6%;top:6%}.r21-zone-labels span:nth-child(2){left:58%;top:7%}.r21-zone-labels span:nth-child(3){left:62%;top:74%}
.r21-track-marker{transition:transform .7s cubic-bezier(.2,.7,.2,1)}.r21-track-marker circle{fill:#294c3c;stroke:#fff;stroke-width:4}.r21-track-marker text{fill:#fff;font:600 16px 'Manrope',sans-serif;text-anchor:middle}
.r21-staff-marker{transition:transform .9s cubic-bezier(.2,.7,.2,1)}.r21-staff-marker circle{fill:#edf4e9;stroke:#486748;stroke-width:3}
.r21-map-controls{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}.r21-map-controls label{font-size:14px;display:grid;gap:8px}.r21-map-controls select{width:100%;min-height:46px;border:1px solid #829b88;background:white;padding:8px;color:#263e32;font:inherit}.r21-map-controls input[type=range]{width:100%;min-height:44px;accent-color:#355b40}
.r21-event{border-left:3px solid #64805b;padding:16px 18px;background:#e7ecdf;min-height:124px;margin:16px 0}.r21-event strong{display:block;margin-bottom:6px}.r21-event p{margin:0}.r21-event[data-alert=true]{border-color:#a45a21;background:#f0e6d4}
.r21-ack{border:1px solid #34563b;background:#34563b;color:white;padding:12px 18px;min-height:48px;font:inherit}.r21-ack:disabled{opacity:.55;cursor:default}.r21-demo-note{font-size:16px!important;line-height:1.6;color:#4c6252;margin-top:18px!important}
#home-care-route{background:#e7ece2}.r21-home-heading{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:end;margin-bottom:28px}.r21-home-heading h2{margin:0}.r21-home-heading p{margin:0;max-width:560px}
.r21-home-workspace{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid #a7b6a5;background:#f9faf5;min-width:0}.r21-home-picture{position:relative;background:#dce5d5;display:flex;align-items:center;justify-content:center;padding:28px;min-height:380px;overflow:hidden}
.r21-route-graphic{width:100%;max-width:620px;aspect-ratio:1.35;position:relative}.r21-route-graphic>svg{width:100%;height:100%}.r21-route-path{stroke:#739879;stroke-width:3;fill:none;stroke-dasharray:5 6}.r21-route-path.active{stroke:#31583e;stroke-dasharray:12 12;animation:r21-flow 2s linear infinite}
@keyframes r21-flow{to{stroke-dashoffset:-48}}
.r21-home-device{position:absolute;left:5%;top:27%;width:27%;height:36%;object-fit:contain!important;background:#fff;border-radius:4px;padding:10px;border:1px solid #afbfac;box-shadow:0 8px 24px #1c39251a}
.r21-home-scene-label{position:absolute;text-align:center;font-size:13px;font-weight:600;line-height:1.5}.r21-home-scene-label.person{left:2%;top:70%;width:35%}.r21-home-scene-label.doctor{right:0;top:70%;width:40%}
.r21-receipt{position:absolute;left:36%;top:7%;width:33%;min-height:38px;padding:7px 10px;background:#f8faf5;border:1px solid #8fa286;border-radius:3px;font-size:12px;text-align:center}
.r21-return-label{position:absolute;left:32%;bottom:2%;width:40%;text-align:center;font-size:12px;color:#3d6045}
.r21-home-details{padding:34px;min-width:0}.r21-home-details h3{font-size:26px;line-height:1.25;margin:14px 0}.r21-home-details p{min-height:115px}.r21-home-details .r21-model{font-family:'IBM Plex Mono','IBM Plex Sans Thai',monospace;font-size:13px}.r21-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}.r21-steps button{text-align:left;display:flex;gap:8px;align-items:start}.r21-steps button b{font-family:monospace;font-size:12px;padding-top:3px}.r21-home-details .r21-demo-note{min-height:0;border-top:1px solid #b6c4b4;padding-top:16px}
.r21-home-details a{display:inline-block;min-height:44px;padding:10px 0;text-decoration:underline;text-underline-offset:5px}.r21-route-graphic[data-step="0"] .r21-route-path{opacity:.25}.r21-route-graphic[data-step="3"] .r21-call{fill:#355b40;stroke:#355b40}.r21-route-graphic[data-step="3"] .r21-call-icon{stroke:white}
.r21-load-state{padding:20px;font-size:14px;line-height:1.6}.r21-load-state button{margin-left:10px}
.media-paused .r21-route-path,.media-paused .r21-scene-signal,.r21-away .r21-route-path,.r21-away .r21-scene-signal{animation-play-state:paused!important}.media-paused .r21-care:after,.media-paused :is(.r21-track-marker,.r21-staff-marker,.r21-portal-scene img){transition:none}
@media(max-width:1000px){#portals .portal{height:460px}.r21-scenario{padding:20px}.r21-home-workspace{grid-template-columns:1fr}.r21-home-picture{min-height:330px}.r21-home-heading{grid-template-columns:1fr;gap:24px}.r21-home-details p{min-height:0}}
@media(max-width:760px){#portals .portal{height:420px}.r21-portal-scene{inset:45px 0 125px}#portals .card-copy h3{font-size:30px}.portal.healthcare .r21-portal-scene{inset:45px 0 140px}.health-hero .health-image{height:auto;min-height:0;margin-top:35px;margin-right:-6vw}.living-care.r21-care{padding:0 18px 24px;min-height:0}.r21-care .r21-care-places{margin-top:-10px}.r21-care .living-node{font-size:12px;flex-direction:column;gap:5px}.r21-care .living-top{font-size:10px}.r21-care .living-note{min-height:125px}.r21-care .living-note p{font-size:16px}.r21-geofence-map{aspect-ratio:1.25}.r21-zone-labels span{font-size:11px}.r21-scenario{padding:16px}.r21-switches button{flex:1 1 auto}.r21-home-details{padding:24px 20px}.r21-steps{grid-template-columns:1fr 1fr}.r21-home-picture{padding:16px;min-height:300px}.r21-home-scene-label{font-size:12px}.r21-receipt{font-size:11px}.r21-home-details h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){.r21-route-path,.r21-scene-signal{animation:none!important}.r21-track-marker,.r21-staff-marker,.r21-care:after,.r21-portal-scene img{transition:none!important}}

.r21-zone-labels>span>span{position:static;padding:0;max-width:none;background:none;font:inherit}

.r21-home-device{left:0;top:4%;width:20%;height:24%;padding:6px}.r21-home-person{transition:opacity .4s}.r21-route-graphic[data-step="2"] .r21-home-person{opacity:.5}.r21-route-graphic[data-step="3"] .r21-home-person{opacity:1}

.r21-map-controls select{font-size:16px}.media-paused .r21-home-person{transition:none}@media(prefers-reduced-motion:reduce){.r21-home-person{transition:none}}

#geo-replay{border:0;border-bottom:1px solid #607b64;background:transparent;color:#2c4636;padding:10px 4px;margin:8px 0 0 12px;font:14px/1.5 Manrope,'IBM Plex Sans Thai',sans-serif;min-height:44px}.r21-zone-labels>span{font-size:12px}@media(max-width:420px){#geo-replay{margin-left:0;display:block}}

.r21-software-scene{perspective:800px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 50%,#3b162433,transparent 65%)}
.r21-terminal-window{width:78%;max-width:330px;background:#11161b;border:1px solid #64747c;border-radius:6px;transform:rotateY(-12deg) rotateX(8deg);box-shadow:14px 18px 0 #060a0d,15px 19px 0 #39444b,0 28px 50px #0007;z-index:1;transition:transform .8s}
.r21-terminal-chrome{display:flex;align-items:center;gap:5px;border-bottom:1px solid #364047;padding:10px;font:9px 'IBM Plex Mono',monospace;color:#a6b0b6}.r21-terminal-chrome i{width:4px;height:4px;border-radius:50%;background:#777}.r21-terminal-chrome span{margin-left:auto}
.r21-terminal-body{padding:20px;display:grid;grid-template-columns:76px 1fr;gap:18px;align-items:center}.r21-terminal-body .r21-terminal-mark{width:76px;height:76px;object-fit:contain;opacity:1;filter:drop-shadow(0 0 16px #e51d3440)}
.r21-terminal-lines{display:grid;gap:10px}.r21-terminal-lines i{height:3px;background:#8d9ea4;width:90%;opacity:.65}.r21-terminal-lines i:nth-child(2){width:60%;background:#df3246}.r21-terminal-lines i:nth-child(3){width:75%}.r21-terminal-lines i:nth-child(4){width:45%}
.r21-terminal-output{grid-column:1/-1;border-top:1px solid #364047;padding-top:14px;display:grid;grid-template-columns:18px 1fr;gap:8px 10px;font:9px monospace;color:#9eacb2}.r21-terminal-output i{background:#53616a;height:3px;align-self:center;width:85%}.r21-terminal-output i:last-child{width:60%}
.r21-terminal-network{position:absolute;inset:0;width:100%;height:100%;stroke:#ab4c59;stroke-width:1;fill:none;opacity:.6}.r21-terminal-network circle{fill:#d6213e;stroke:none}
.portal:is(:hover,:focus-visible) .r21-terminal-window{transform:rotateY(0) rotateX(0) translateY(-5px)}.portal:is(:hover,:focus-visible) .r21-terminal-mark{transform:none!important}
@media(prefers-reduced-motion:reduce){.r21-terminal-window{transition:none}}.media-paused .r21-terminal-window{transition:none}
.r21-software-scene{bottom:185px}.r21-terminal-window{width:70%}.r21-terminal-body{padding:16px;gap:12px}.r21-terminal-output{gap:5px 10px;padding-top:10px}

/* Review: give every portal title a quiet, opaque reading surface. */
#portals .card-copy{background:var(--portal-bottom);padding-top:10px}
#portals .card-copy:before{content:'';position:absolute;left:-26px;right:-26px;top:-42px;height:43px;background:linear-gradient(transparent,var(--portal-bottom));z-index:-1;pointer-events:none}
#portals .software :is(.card-copy,.card-copy h3,.card-copy p,.card-copy>span){font-family:'IBM Plex Mono','IBM Plex Sans Thai',monospace}
.r21-zone-labels>span:nth-child(3){left:72%;top:78%;max-width:23%;padding:2px}
.r21-rule-summary{display:grid;gap:8px;font-size:14px}.r21-rule-summary strong{font-size:16px;font-weight:500;border-left:2px solid #6d876b;padding:7px 12px;background:#edf1e7}
html[lang=th] .r21-care .living-node{font-size:14px}html[lang=th] .r21-zone-labels>span{font-size:13px}html[lang=th] :is(.r21-receipt,.r21-home-scene-label,.r21-return-label){font-size:13px}
#portals .card-copy{background:transparent}#portals .card-copy:after{content:'';position:absolute;left:-26px;right:-26px;top:0;bottom:-32px;background:var(--portal-bottom);z-index:-1;pointer-events:none}

/* Keep the welcome readable during its entrance instead of waiting for blur/opacity. */
@keyframes r21-readable-arrival{from{transform:translateY(12px)}to{transform:translateY(0)}}
body:not(.capture) #hello h1{animation:r21-readable-arrival .75s cubic-bezier(.2,.7,.2,1) backwards}
.trio-intro h2{animation:r21-readable-arrival .6s cubic-bezier(.2,.7,.2,1) backwards}
body.media-paused #hello h1,.media-paused .trio-intro h2{animation:none}
@media(prefers-reduced-motion:reduce){body:not(.capture) #hello h1,.trio-intro h2{animation:none}}

/* Final independent-review follow-ups: retain readable Thai words and separate art from navigation. */
html[lang=th] [data-th]{letter-spacing:normal}
.r21-th-word{white-space:nowrap}
.r21-zone-labels>span:nth-child(3){top:72%;line-height:1.1;padding:0 2px}
.r21-terminal-chrome{font-size:11px}
.r21-device-frame{position:absolute;left:0;top:4%;width:20%;height:24%;overflow:hidden;background:#fff;border:1px solid #afbfac;border-radius:4px;box-shadow:0 8px 24px #1c39251a}
.r21-device-frame .r21-home-device{position:static;display:block;width:100%;height:100%;padding:6px;border:0;box-shadow:none;object-fit:contain!important}
.r21-device-frame[data-product=q21r]{height:auto;aspect-ratio:1.25}
.r21-device-frame[data-product=q21r] .r21-home-device{position:absolute;width:700%;max-width:none;height:auto;padding:0;left:-72%;top:-272%;object-fit:contain!important}
@media(max-width:760px){.r21-software-scene{top:88px;bottom:170px}.r21-terminal-window{width:78%}.r21-terminal-body{padding:10px;grid-template-columns:56px 1fr;gap:10px}.r21-terminal-body .r21-terminal-mark{width:56px;height:56px}.r21-terminal-output{display:none}.r21-terminal-chrome{padding:8px}}

html[lang=th] #portals :is(.card-top>span,.card-copy>span){letter-spacing:normal}
@media(max-width:760px){.r21-software-scene{top:78px;align-items:flex-start}}