@font-face{font-family:'Bai Jamjuree';src:url('/assets/fonts/bai-jamjuree-thai-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Bai Jamjuree';src:url('/assets/fonts/bai-jamjuree-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bai Jamjuree';src:url('/assets/fonts/bai-jamjuree-thai-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Bai Jamjuree';src:url('/assets/fonts/bai-jamjuree-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Thai Looped';src:url('/assets/fonts/ibm-plex-sans-thai-looped-thai-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Sans Thai Looped';src:url('/assets/fonts/ibm-plex-sans-thai-looped-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Thai Looped';src:url('/assets/fonts/ibm-plex-sans-thai-looped-thai-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Sans Thai Looped';src:url('/assets/fonts/ibm-plex-sans-thai-looped-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#F2F4F3;--white:#FFFFFF;--soft:#E5EBE8;
  --ink:#1F2A27;--muted:#52615B;--green:#225C43;
  --dark:#1E2629;--on-dark:#F2F4F3;--muted-dark:#CAD7D0;
  --line:#CDD7D1;--border:#52615B;--focus:#225C43;
  --warning:#F5E6B8;--warning-ink:#60440C;--error:#225C43;
  --amber:#F0A537;
  font-family:'IBM Plex Sans Thai Looped',Tahoma,sans-serif;
  font-size:100%;line-height:1.7;color:var(--ink);background:var(--paper);color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-size:1.125rem;overflow-wrap:anywhere}
img{display:block;width:100%;max-width:100%;height:auto}
picture{display:block}
a{color:var(--green);text-underline-offset:.25em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px;box-shadow:0 0 0 4px var(--paper)}
h1,h2,h3,p,figure,dl{margin-top:0}
h1,h2,h3{font-family:'Bai Jamjuree',Tahoma,sans-serif;text-wrap:balance}
h1{font-size:2rem;line-height:1.35;font-weight:700;margin-bottom:1rem}
h2{font-size:1.625rem;line-height:1.4;font-weight:600;margin-bottom:1rem}
h3{font-size:1.25rem;line-height:1.45;font-weight:600;margin-bottom:.5rem}
p{margin-bottom:1rem}
p:last-child{margin-bottom:0}
small,.small,.source-note{font-size:1rem;line-height:1.6}
.small,.source-note{color:var(--muted)}
ul{padding-left:1.3rem}
li+li{margin-top:.5rem}
strong{font-weight:600}
.wrap{width:min(calc(100% - 2.5rem),1184px);margin-inline:auto}
.section{padding-block:3rem}
.lead{font-size:1.25rem;line-height:1.7;max-width:40rem;color:var(--muted)}
.section-intro{max-width:40rem;color:var(--muted);margin-bottom:2rem}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem;margin-bottom:1.5rem}
.section-head h2{margin-bottom:0}
.skip-link{position:absolute;z-index:5;top:.5rem;left:1rem;max-width:calc(100% - 2rem);padding:.75rem 1rem;min-height:48px;background:var(--white);transform:translateY(-200%)}
.skip-link:focus{transform:none}
.preview-banner{background:var(--warning);color:var(--warning-ink);font-size:1rem}
.preview-banner .wrap{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding-block:.5rem}
.review-status{display:block;width:fit-content;max-width:100%;font-size:1rem;font-weight:400;line-height:1.6;padding:.15rem .5rem;margin-top:.4rem;border-radius:4px;background:var(--warning);color:var(--warning-ink)}
.fact{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}

/* Native details keep the menu in normal document flow. */
.header-top{background:var(--dark);color:var(--on-dark)}
.masthead{display:grid;align-items:start;padding-block:.75rem}
.wordmark{font-family:'Bai Jamjuree',Tahoma,sans-serif;font-size:1.5rem;font-weight:700;line-height:1.35;color:inherit;text-decoration:none;min-height:48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.masthead>.wordmark{grid-area:1/1;max-width:57%;position:relative;z-index:1}
.mobile-menu{grid-area:1/1;min-width:0}
.mobile-menu>summary{width:fit-content;max-width:40%;margin-left:auto;min-height:48px;padding:.55rem .25rem;cursor:pointer;list-style-position:inside;font-size:1.125rem}
.mobile-menu .main-nav{padding-top:1rem;margin-top:.75rem;border-top:1px solid var(--muted-dark);display:grid;gap:.25rem}
.main-nav a{display:flex;align-items:center;min-height:48px;padding:.5rem .75rem;color:var(--on-dark);text-decoration:none;border-left:3px solid transparent;font-size:1.125rem}
.main-nav a[aria-current],.main-nav a.current-section{border-color:var(--muted-dark);font-weight:600;text-decoration:underline}
.main-nav a:hover{text-decoration:underline}
.desktop-nav{display:none}
.header-contact{border-bottom:1px solid var(--line);background:var(--paper)}
.header-contact-inner{padding-block:.75rem}
.header-descriptor{display:none}
.header-actions,.contact-actions,.hero-actions{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:.75rem}
.header-phone{min-width:0}
.header-phone .button{width:100%;height:100%}
.button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem .75rem;min-height:56px;padding:.6rem .75rem;max-width:100%;border:1px solid var(--green);border-radius:8px;font-size:1.125rem;font-weight:600;line-height:1.45;text-decoration:none;text-align:center}
.button.primary{background:var(--green);color:var(--white)}
.button.primary:hover{background:var(--dark);border-color:var(--dark)}
.button.secondary{background:var(--white);color:var(--green)}
.button.secondary:hover{background:var(--soft)}
.phone-number{font-size:1.125rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.channel-id{font-size:1.125rem;font-weight:400}
.external-arrow{font-size:1rem;white-space:nowrap}
.text-link{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.3rem .5rem;min-height:48px;min-width:48px;max-width:100%;padding-block:.5rem;font-size:1.125rem;font-weight:600}
.phone-pair{display:flex;flex-wrap:wrap;align-items:center;gap:0 1rem}
.external-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.unavailable{border-color:var(--border);color:var(--muted);background:var(--soft)}

.hero{padding-block:2.5rem 3rem}
.hero-grid{display:grid;gap:2rem;align-items:start}
.hero h1{font-size:2.25rem;line-height:1.3;max-width:38rem}
.hero-subtitle{font-family:'Bai Jamjuree',Tahoma,sans-serif;font-size:1.375rem;font-weight:600;line-height:1.5;margin-bottom:1rem}
.hero-copy>.lead{margin-bottom:1.5rem}
.hero-actions{margin-top:1.5rem}
.brands{border-block:1px solid var(--line);padding-block:1rem;margin-bottom:2rem}
.brands>p{font-size:1rem;color:var(--muted);margin-bottom:.5rem}
.brand-list{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.brand-list span{font-size:1.125rem;font-weight:600}
.hero .brands{margin-bottom:0}

/* Amber appears only in the six warning lights on graphite. */
.symptom-band{background:var(--dark);color:var(--on-dark);padding-block:2rem}
.symptom-heading{margin-bottom:1.5rem}
.symptom-heading h2{margin-bottom:.5rem}
.symptom-heading p{color:var(--muted-dark)}
.symptom-links{display:grid;gap:.75rem}
.symptom-link{display:flex;align-items:center;gap:1rem;min-height:64px;padding:.75rem 1.25rem;border:1px solid var(--muted-dark);border-radius:999px;color:var(--on-dark);font-size:1.125rem;font-weight:600;text-decoration:underline}
.symptom-link:hover{background:#2D383B;border-color:var(--on-dark)}
.warning-light{display:block;flex:0 0 10px;width:10px;height:10px;margin-inline:.25rem;background:var(--amber);border-radius:50%;outline:1px solid var(--amber);outline-offset:4px}
.header-top :focus-visible,.symptom-band :focus-visible,.site-footer :focus-visible{outline-color:var(--on-dark);box-shadow:0 0 0 4px var(--dark)}

.policy-list{display:grid;gap:1.5rem;margin-bottom:1.5rem}
.policy-item{border-top:2px solid var(--green);padding-top:1.25rem}
.policy-item p{color:var(--muted)}
.services-section{background:var(--soft)}
.service-list{display:grid;gap:1.5rem}
.service-item{border-left:3px solid var(--green);padding-left:1.25rem}
.service-item p{color:var(--muted)}

/* A record is the one recurring card shape; other sections use simple rules. */
.work-record{min-width:0;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:8px}
.record-heading{padding:1.25rem 1.25rem 1rem}
.record-heading h3{margin-bottom:0}
.record-heading h3 a{color:var(--ink);text-decoration:underline}
.case-meta{display:flex;flex-wrap:wrap;gap:.25rem .4rem;font-size:1rem;line-height:1.6;color:var(--muted);margin-bottom:.5rem}
.work-photo{margin:0}
.work-photo figcaption{padding:.75rem 1.25rem;font-size:1rem;line-height:1.6;color:var(--muted);border-bottom:1px solid var(--line)}
.record-copy{padding:1.25rem}
.record-fields{margin-bottom:0}
.record-fields dt{font-weight:600;margin-bottom:.25rem}
.record-fields dd{margin:0 0 1.25rem;color:var(--ink);line-height:1.7}
.record-fields dd:last-child{margin-bottom:0}
.record-fields dt:not(:first-child){padding-top:1rem;border-top:1px solid var(--line)}
.record-more{margin-top:1rem;border-block:1px solid var(--line)}
.record-more summary{cursor:pointer;min-height:48px;padding:.75rem 0;font-size:1.125rem;line-height:1.6;list-style-position:inside}
.record-more .record-fields{padding-block:.5rem 1rem}
.record-copy>.text-link{margin-top:.5rem}
.featured-record{width:100%;max-width:32rem;justify-self:center}
.featured-record picture{max-width:480px;margin-inline:auto}
.featured-record .historical-note{margin-top:1rem;margin-bottom:0;padding-left:.75rem;font-size:1rem}
.case-grid{display:grid;gap:1.5rem;align-items:start}
.image-placeholder{display:flex;flex-direction:column;justify-content:center;gap:.75rem;min-height:180px;padding:1.5rem;background:var(--soft);color:var(--muted);border-block:1px solid var(--line)}
.historical-note{border-left:2px solid var(--green);padding-left:1rem;color:var(--muted);max-width:49rem;font-size:1rem;line-height:1.6}
.prepare-section{padding-bottom:3rem}
.prepare{padding:1.5rem;background:var(--soft);border-radius:8px}
.prepare ul{margin-block:1rem 1.25rem}
.prepare li{color:var(--ink)}
.prepare .small{max-width:40rem}

.page-intro{padding-block:2.5rem 1.5rem}
.page-intro h1{max-width:55rem}
.page-intro .lead{margin-bottom:0}
.page-content{padding-top:1rem}
.two-column{display:grid;gap:2rem;align-items:start}
.content-block{border-top:1px solid var(--line);padding-top:2rem;margin-top:2rem}
.tool-list{list-style:none;padding:0;margin-block:1rem 1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.tool-list li{margin:0}
.legacy-section{padding:1.5rem;background:var(--soft);border-radius:8px;scroll-margin-top:1.5rem}
.legacy-section h2{font-size:1.375rem}
.legacy-section p{color:var(--muted)}
.question-list{list-style:none;padding:0;margin:0 0 1.5rem}
.question-list li{border-bottom:1px solid var(--line);padding-block:1rem;margin:0}
.work-context{margin-bottom:1.5rem}
.work-context .historical-note{margin-bottom:.5rem}
.archive-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;background:var(--soft);padding:1.5rem;margin-top:2rem;border-radius:8px}
.archive-link h2{font-size:1.375rem}
.archive-link p{color:var(--muted);max-width:39rem}
.archive-list{border-top:1px solid var(--border);margin-block:1.5rem}
.archive-list>details{border-bottom:1px solid var(--line);scroll-margin-top:1.5rem}
.archive-list>details>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem;align-items:start;padding:1.25rem .5rem;min-height:48px;cursor:pointer;list-style:none}
.archive-list summary::-webkit-details-marker{display:none}
.archive-year{grid-column:1/-1;font-size:1rem;line-height:1.6;color:var(--muted)}
.summary-title{display:flex;flex-direction:column;gap:.25rem;font-size:1.125rem;font-weight:600}
.expand{font-size:1.375rem;line-height:1.4;color:var(--green)}
.archive-list>details[open] .expand{transform:rotate(45deg)}
.archive-list>details[open],.archive-list>details:target{background:var(--white)}
.archive-list>details:target{border-left:3px solid var(--green)}
.archive-detail{padding:0 1.25rem 1.5rem;max-width:54rem}
.source-note{margin-top:1.5rem}

.case-intro .text-link{margin-bottom:1rem}
.case-intro .historical-note{margin-top:1rem;margin-bottom:0}
.case-lead{display:grid;gap:2rem;align-items:start}
.lead-photo{width:100%;max-width:480px}
.lead-photo figcaption,.case-gallery figcaption{padding:.75rem 0;border-bottom:0}
.full-record{padding:1.5rem}
.full-record h2{font-size:1.375rem;margin-bottom:1.5rem}
.full-record .source-note{margin-bottom:0}
.case-gallery{display:grid;gap:1.5rem 2rem;margin-top:2rem}
.case-gallery .work-photo{max-width:576px;width:100%}
.case-end{display:flex;flex-direction:column;align-items:stretch;gap:1rem;border-top:1px solid var(--line);padding-top:1.5rem;margin-top:2rem}
.case-end>.text-link{align-self:flex-start}

.contact-grid{display:grid;gap:2rem}
.contact-channels .contact-actions{margin-bottom:.75rem}

.address-section{border-top:2px solid var(--green);padding-top:1.5rem}
.address-section h3{margin-top:1.5rem}
.map-section{border-top:1px solid var(--line);padding-top:1.5rem;margin-top:1.5rem}
.map-section h3{margin-top:0}
.map-section .small{margin-top:1rem}
.status-code{font-size:1.25rem;font-weight:600;color:var(--green);margin-bottom:.75rem}
.status-actions{display:flex;flex-wrap:wrap;gap:.75rem 2rem;padding-bottom:3rem}

.site-footer{background:var(--dark);color:var(--on-dark);padding-block:2.5rem 1.5rem}
.footer-top{display:grid;gap:2rem}
.footer-address .wordmark{margin-bottom:.75rem}
.footer-address p{color:var(--muted-dark);max-width:26rem}
.footer-contact h2{font-size:1.625rem;margin-bottom:.5rem}
.footer-contact>p{color:var(--muted-dark)}
.site-footer .button.primary{border-color:var(--muted-dark)}
.site-footer .button.primary:hover{color:var(--dark);background:var(--white);border-color:var(--white)}
.site-footer .button.secondary{background:transparent;border-color:var(--muted-dark);color:var(--on-dark)}
.site-footer .button.secondary:hover{color:var(--dark);background:var(--white)}
.site-footer .text-link{color:var(--on-dark)}
.site-footer .unavailable{color:var(--muted-dark);background:var(--dark)}
.footer-bottom{display:flex;flex-direction:column;gap:1rem;border-top:1px solid var(--muted-dark);padding-top:1.5rem;margin-top:2rem}
.footer-bottom p{margin-bottom:.5rem}
.site-footer .small{color:var(--muted-dark)}

@media(min-width:641px){
  .section{padding-block:4rem}
  h1{font-size:2.75rem}h2{font-size:2rem}h3{font-size:1.375rem}
  .hero{padding-block:3rem 4rem}
  .hero h1{font-size:3.5rem}
  .hero-copy{max-width:40rem}
  .hero-subtitle{font-size:1.625rem}
  .hero-actions{display:flex;flex-wrap:wrap;max-width:36rem}
  .hero-actions .button{flex-direction:row;padding:.75rem 1rem}
  .service-list,.case-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
  .symptom-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prepare{padding:2rem}
  .prepare-section{padding-bottom:4rem}
  .page-intro{padding-block:3rem 1.5rem}
  .page-content{padding-top:1.5rem}
  .archive-list>details>summary{grid-template-columns:16rem minmax(0,1fr) auto;gap:1.5rem;padding:1.5rem .75rem}
  .archive-year{grid-column:auto}
  .archive-detail{padding:0 2rem 2rem;margin-left:17.5rem}
  .case-gallery{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:3rem}
  .case-end{flex-direction:row;justify-content:space-between;align-items:center;margin-top:3rem}
  .case-end .contact-actions{min-width:28rem}
  .site-footer{padding-block:3rem 1.5rem}
}
@media(min-width:1024px){
  .masthead{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1rem}
  .masthead>.wordmark{max-width:none;font-size:1.75rem}
  .mobile-menu{display:none}
  .desktop-nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
  .desktop-nav a{border-left:0;border-bottom:2px solid transparent;padding:.5rem .25rem}
  .header-contact-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .header-descriptor{display:block}
  .header-actions{display:flex;gap:.75rem}
  .header-actions .button{flex-direction:row;padding:.75rem 1rem}
  .header-actions .secondary{min-width:12rem}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}
  .hero-copy{padding-top:2rem}
  .hero-copy>.lead{max-width:32rem}
  .hero-actions .button{flex-direction:column}
  .hero-actions .primary{min-width:16rem}
  .hero-actions .secondary{min-width:12rem}
  .symptom-band{padding-block:2.5rem}
  .symptom-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem}
  .symptom-heading h2,.symptom-heading p{margin-bottom:0}
  .symptom-links{grid-template-columns:repeat(3,minmax(0,1fr))}
  .policy-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
  .case-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-records{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-records .work-record{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start}
  .home-records .record-heading{grid-column:1/-1}
  .home-records .work-photo{padding-left:1.25rem}
  .home-records .work-photo figcaption{padding:.75rem 0;border-bottom:0}
  .home-records .record-copy{padding-top:0}
  .two-column{grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem}
  .content-block{margin-top:3rem;padding-top:3rem}
  .case-lead{grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:3rem}
  .full-record{padding:2rem}
  .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}
  .contact-channels{grid-column:1;grid-row:1}
  .contact-grid>.prepare{grid-column:1;grid-row:2}
  .contact-grid>.address-section{grid-column:2;grid-row:1/3}
  .contact-channels .contact-actions{max-width:30rem}
  .footer-top{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4rem}
  .footer-contact .contact-actions .button{flex-direction:row}
  .footer-bottom{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem}
}
@media(max-width:767px) and (min-width:641px){
  .archive-list>details>summary{grid-template-columns:12rem minmax(0,1fr) auto}
  .archive-detail{margin-left:0}
  .case-end{flex-direction:column;align-items:stretch}
  .case-end .contact-actions{min-width:0}
}
@media(max-width:350px){
  .wrap{width:calc(100% - 2rem)}
  .header-actions,.contact-actions,.hero-actions{grid-template-columns:1fr}
  .phone-number{white-space:normal}
  .symptom-link{padding-inline:1rem}
  .full-record,.prepare,.legacy-section{padding:1.25rem}
}
/* Cowork 2 ต.ค. 2569: ขัดเกลาหลังตรวจภาพ — ตัดปุ่มติดต่อซ้ำในจอแรกมือถือ · ชิปอาการเรียงตามความยาว · หัวข้อพับตัดบรรทัดที่จุดคั่น */
.record-more summary .summary-part{display:inline-block}
@media(max-width:640px){
  .hero-actions{display:none}
  .symptom-links{display:flex;flex-wrap:wrap;gap:.625rem}
  .symptom-link{min-height:52px;padding:.5rem 1rem;gap:.625rem}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}