@font-face{font-family:'Anuphan';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/anuphan-thai-400.woff2?v=1fed8bc2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Anuphan';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/anuphan-thai-500.woff2?v=fba1bafc) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Anuphan';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/anuphan-thai-600.woff2?v=20b1e949) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Anuphan';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/anuphan-latin-400.woff2?v=4bfe70ea) format('woff2');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:'Anuphan';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/anuphan-latin-500.woff2?v=c6a75dbe) format('woff2');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:'Anuphan';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/anuphan-latin-600.woff2?v=d5832efe) format('woff2');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:'Noto Serif Thai';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/noto-serif-thai-thai-500.woff2?v=d8dbaef7) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/cormorant-garamond-latin-500.woff2?v=8197bf53) format('woff2');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:'Cormorant Garamond';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/cormorant-garamond-latin-600.woff2?v=ae062b6d) format('woff2');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}
/* Circle Law Office — main stylesheet (font-face rules are prepended by build.py) */
:root{--bg:#f3f6fa;--paper:#fff;--ink:#10284c;--text:#34445c;--muted:#5a687d;--line:#d7dfeb;--accent:#216493;--soft:#e7eff7;--line-green:#00833a;--line-green-hover:#006b30;--m1:#0a2549;--m2:#155789;--m3:#2070a4;--serif:'Cormorant Garamond','Noto Serif Thai',Georgia,serif;--sans:'Anuphan',Tahoma,system-ui,sans-serif;--brand:'Cormorant Garamond',Georgia,serif;color-scheme:light}
html[data-theme=dark]{--bg:#0b1729;--paper:#10213a;--ink:#e9f0fa;--text:#c4d0e0;--muted:#a0b1c8;--line:#30425b;--accent:#86bde8;--soft:#1a3450;--m1:#6384ae;--m2:#5b94c6;--m3:#86b8e2;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.8 var(--sans)}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:5px}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{color:var(--ink);text-wrap:balance}
p,li,dd{text-wrap:pretty}
h1,h2{font-family:var(--serif);font-weight:500;line-height:1.4}
h1{font-size:clamp(2.05rem,4.2vw,3.75rem);letter-spacing:-.02em}
h1 em{color:var(--accent);font-style:normal}
h2{font-size:clamp(1.7rem,3vw,2.5rem)}
h3,h4{font-size:1.15rem;font-weight:600;line-height:1.55}
p+p{margin-top:1em}
small{font-size:.9rem}
.nw{white-space:nowrap}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

.wrap{width:min(1200px,100% - 64px);margin-inline:auto}
.section{padding:88px 0}
.surface{background:var(--paper);border-block:1px solid var(--line)}
.eyebrow{font-size:.88rem;font-weight:600;color:var(--accent);margin-bottom:12px;letter-spacing:0}
.eyebrow:lang(en){font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.skip{position:fixed;top:-80px;left:16px;background:var(--paper);color:var(--ink);z-index:99;padding:12px 16px;border-radius:5px}
.skip:focus{top:8px}

/* header */
.header{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);background:var(--paper)}
.header-inner{display:flex;align-items:center;min-height:80px;gap:24px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand:hover{text-decoration:none}
.mark-svg{--f1:var(--m1);--f2:var(--m2);--f3:var(--m3)}
.brand .mark-svg{width:40px;height:40px;flex:none}
.brand-word{font-family:var(--brand);line-height:1.05;color:var(--ink);text-align:center}
.brand-word b{display:block;font-size:1.55rem;letter-spacing:.22em;font-weight:600;margin-right:-.22em}
.brand-word small{display:block;font-size:.65rem;letter-spacing:.32em;margin-top:4px;font-weight:600;margin-right:-.32em}
.nav-tagline{margin-left:6px;padding-left:20px;border-left:1px solid var(--line);font-family:var(--brand);font-size:1.08rem;font-weight:500;line-height:1.3;color:var(--accent);white-space:nowrap}
.menu-tagline{display:none}
.nav{display:flex;align-items:center;gap:24px;margin-left:auto;font-size:.94rem}
.tools{display:flex;align-items:center;gap:8px}
.language{display:flex;border:1px solid var(--line);border-radius:5px;padding:3px}
.language a{font-size:.82rem;padding:6px 10px;min-height:36px;display:grid;place-items:center;border-radius:3px;line-height:1}
.language a:hover{text-decoration:none;background:var(--soft)}
.language a[aria-current=page]{background:var(--ink);color:var(--paper)}
.iconbtn{width:44px;height:44px;border:1px solid var(--line);background:none;border-radius:5px;display:grid;place-items:center}
.iconbtn svg{width:19px;height:19px}
.menu{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 22px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:5px;font-weight:500;font-size:.98rem;line-height:1.4;transition:background .2s,transform .2s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);text-decoration:none;transform:translateY(-1px)}
.btn svg{width:20px;height:20px;flex:none}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.secondary:hover{background:var(--soft)}
.btn.line{background:var(--line-green);border-color:var(--line-green);color:#fff}
.btn.line:hover{background:var(--line-green-hover);border-color:var(--line-green-hover)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* hero */
.hero{padding:72px 0 64px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:64px}
.hero .lede{max-width:640px;margin-top:22px;font-size:1.05rem}
.hero-note{margin-top:18px;font-size:.92rem;line-height:1.75;color:var(--muted)}
.hero-note strong{color:var(--ink);font-weight:600}
.hero-art{position:relative;aspect-ratio:1;display:grid;place-items:center;max-width:440px;width:100%;margin:auto}
.orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:spin 140s linear infinite reverse}
.orbit text{font-family:var(--sans);font-size:13px;letter-spacing:.3em;fill:var(--muted);font-weight:500}
.orbit text:lang(th),.orbit tspan:lang(th){letter-spacing:.06em;font-size:14px}
.ring-line{fill:none;stroke:var(--line);stroke-width:1}
.hero-art .mark{position:absolute;inset:17%;width:66%;height:66%;animation:spin 90s linear infinite}
.hero-art .brand-word{position:relative}
.hero-art .brand-word b{font-size:clamp(1rem,1.9vw,1.6rem)}
.hero-art .brand-word small{font-size:clamp(.5rem,.7vw,.64rem)}
@keyframes spin{to{transform:rotate(360deg)}}

/* trust bar */
.trust{border-block:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 24px}
.trust-item+.trust-item{border-left:1px solid var(--line)}
.trust-item .kicker{font-size:.7rem;font-weight:600;letter-spacing:.16em;color:var(--accent);margin-bottom:2px}
.trust-item strong{font-family:"Noto Serif Thai",var(--serif);font-size:1.55rem;font-weight:500;color:var(--ink);line-height:1.5}
html[lang=en] .trust-item strong{font-family:var(--serif);font-size:1.7rem}
.trust-item p{font-size:.92rem;line-height:1.6;color:var(--muted)}

/* section heads */
.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:32px}
.section-head>p{max-width:440px;color:var(--muted);font-size:.97rem}

/* tabs */
.tablist{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:32px}
.tablist button{padding:11px 18px;min-height:48px;border:1px solid var(--line);border-radius:5px;background:transparent;font-size:.95rem;font-weight:500;transition:background .2s}
.tablist button[aria-selected=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tablist button:hover:not([aria-selected=true]){background:var(--soft)}
.panel-lead{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:30px}
.panel-lead h3{font-family:var(--serif);font-size:1.75rem;line-height:1.5;font-weight:500}
.panel-lead>p{color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}
.service-item{padding:24px 0;border-top:1px solid var(--line)}
.service-item p{font-size:.95rem;color:var(--muted);margin-top:8px}
.item-no{font-size:.8rem;color:var(--accent);display:block;margin-bottom:8px;font-variant-numeric:tabular-nums}
.panel-bottom{display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--soft);border-radius:7px;padding:24px 28px;margin-top:22px}
.panel-bottom>div{max-width:680px}
.panel-bottom strong{color:var(--ink)}
.panel-bottom p{font-size:.93rem;color:var(--muted);margin-top:4px}
.panel-bottom .btn{flex-shrink:0}

/* process */
.process-head{margin-bottom:30px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;list-style:none;padding:0;margin:0}
.steps li{border-top:1px solid var(--line);padding-top:20px}
.steps .n{font-family:var(--brand);font-size:2.1rem;color:var(--accent);display:block;margin-bottom:10px;line-height:1.2}
.steps p{color:var(--muted);font-size:.94rem;margin-top:8px}

/* team */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.person{border-top:1px solid var(--line);padding-top:28px;display:grid;grid-template-columns:118px 1fr;gap:24px}
.portrait{width:118px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;background:var(--soft)}
.role{font-size:.9rem;color:var(--accent);margin-bottom:4px}
.person h3{font-size:1.25rem}
.credentials{padding:0;list-style:none;margin:14px 0 0;color:var(--muted);font-size:.94rem}
.credentials li+li{margin-top:4px}
.team-note{padding:20px 24px;margin-top:36px;border-left:3px solid var(--accent);background:var(--soft);font-size:.95rem}
.experience{margin-top:56px}
.sub-title{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:500;line-height:1.45;margin-bottom:24px}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.case{padding:26px;border:1px solid var(--line);border-radius:5px}
.case small{color:var(--accent)}
.case h4{margin:6px 0 10px}
.case p{font-size:.95rem;color:var(--muted)}
.case-note{font-size:.9rem;color:var(--muted);margin-top:18px}

/* faq */
.faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}
.side-copy{color:var(--muted);margin-top:16px}
.faq-list details{border-bottom:1px solid var(--line);padding:20px 0}
.faq-list details:first-child{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;gap:20px;justify-content:space-between;align-items:baseline;font-size:1.02rem;font-weight:500;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';flex-shrink:0;font-size:1.3rem;line-height:1;color:var(--accent)}
details[open]>summary::after{content:'−'}
.faq-list details p{margin-top:14px;color:var(--muted);font-size:.97rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.contact-copy>p:not(.eyebrow){margin-top:16px;color:var(--muted)}
.line-card{display:flex;gap:22px;align-items:center;margin-top:30px;padding:22px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.line-qr{width:132px;height:132px;flex:none;background:#fff;padding:8px;border-radius:6px;border:1px solid var(--line)}
.line-card strong{color:var(--ink)}
.line-card p{font-size:.93rem;color:var(--muted);margin:4px 0 14px}
.tap-hint{display:none}
.hours{margin-top:26px}
.hours strong{color:var(--ink)}
.hours p{margin-top:4px;font-size:.97rem}
.notice{font-size:.92rem;color:var(--muted);margin-top:20px}
.contact-info{margin:0}
.contact-info>div{padding:16px 0;border-bottom:1px solid var(--line)}
.contact-info>div:first-child{padding-top:0}
.contact-info dt{font-size:.88rem;color:var(--muted);margin-bottom:4px}
.contact-info dd{margin:0;color:var(--ink)}
.contact-info a{overflow-wrap:anywhere}
.phone-list{display:flex;gap:4px 22px;flex-wrap:wrap}
address{font-style:normal}

/* privacy */
.privacy-section{padding:28px 0}
.privacy-section details{max-width:940px}
.privacy-section summary h2{font-family:var(--sans);font-size:1.02rem;font-weight:500;line-height:1.6}
.privacy-body{padding:18px 0 8px}
.privacy-body h3{font-size:1rem;margin-top:22px}
.privacy-body p{margin-top:6px;font-size:.95rem}
.privacy-body .updated{font-size:.9rem;color:var(--muted);margin:0}

/* footer */
.footer{background:#10284c;color:#d8e3f2;padding:40px 0}
.footer-inner{display:flex;justify-content:space-between;gap:32px;align-items:center}
.footer .brand-word{color:#fff}
.footer-copy{font-size:.88rem;max-width:640px;text-align:right;line-height:1.7}
.footer-copy p+p{margin-top:6px}
.footer-copy a{text-decoration:underline;text-underline-offset:4px}

/* mobile quick actions */
.mobile-actions{display:none}

@media(max-width:1149px){.nav-tagline{display:none}}
@media(max-width:1000px){
 .nav{gap:14px}.header-inner{gap:16px}
 .hero-grid{gap:32px;grid-template-columns:1.4fr .6fr}
 .service-grid{grid-template-columns:1fr 1fr}
 .faq-layout,.contact-grid{gap:40px}
 .person{grid-template-columns:105px 1fr;gap:18px}.portrait{width:105px}
 .trust-item{padding:24px 16px}
}
@media(max-width:820px){
 .wrap{width:calc(100% - 40px)}
 .header-inner{min-height:72px}
 .tools{margin-left:auto}
 .menu{display:grid}
 .nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);padding:12px 20px;border-bottom:1px solid var(--line);margin:0}
 .nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .nav a{padding:12px}
 .nav.open .menu-tagline{display:block;margin:6px 12px 4px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--brand);font-size:1.05rem;color:var(--accent);line-height:1.4}
 .hero{padding:40px 0 44px}
 .hero-grid{grid-template-columns:1fr}
 .hero-art{display:none}
 .section{padding:56px 0}
 .section-head{display:block}
 .section-head>p{margin-top:14px;max-width:100%}
 .panel-lead{grid-template-columns:1fr;gap:12px}
 .panel-bottom{display:block}
 .panel-bottom .btn{margin-top:16px}
 .steps{grid-template-columns:1fr 1fr}
 .team-grid,.case-grid,.faq-layout,.contact-grid{grid-template-columns:1fr}
 .faq-layout,.contact-grid{gap:32px}
 .line-qr,.qr-hint{display:none}
 .tap-hint{display:block}
 .line-card{display:block}
 .footer-inner{align-items:start;flex-direction:column}
 .footer-copy{text-align:left}
 .footer{padding-bottom:110px}
 .mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;z-index:30;bottom:0;left:0;right:0;padding:10px 20px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper);transform:translateY(110%);visibility:hidden;transition:transform .25s,visibility .25s}
 .mobile-actions.show{transform:none;visibility:visible}
 .mobile-actions .btn{min-height:46px;padding:9px;font-size:.95rem}
 .tablist{gap:7px}
 .tablist button{padding:10px 14px;font-size:.92rem}
 .contact-copy h2 br{display:none}
}
@media(max-width:389px){
 .mobile-actions{gap:8px;padding-left:12px;padding-right:12px}
 .mobile-actions .btn{font-size:.88rem;white-space:nowrap}
}
@media(max-width:480px){
 body{font-size:16px}
 .wrap{width:calc(100% - 32px)}
 .brand{gap:7px}
 .brand .mark-svg{width:32px;height:32px}
 .brand-word b{font-size:1.18rem}
 .brand-word small{font-size:.52rem}
 .header-inner{gap:6px}
 .tools{gap:5px}
 .iconbtn{width:40px;height:40px}
 .language a{padding:5px 8px;min-height:32px}
 .trust-grid{grid-template-columns:1fr}
 .trust-item{padding:16px 0;gap:2px}
 .trust-item+.trust-item{border-left:0;border-top:1px solid var(--line)}
 .service-grid{grid-template-columns:1fr}
 .panel-lead h3{font-size:1.45rem}
 .steps{grid-template-columns:1fr;gap:20px}
 .cta-row .btn{flex:1 1 100%}
 .panel-bottom{padding:20px}
 .panel-bottom .btn{width:100%}
 .person{grid-template-columns:88px 1fr;gap:16px}.portrait{width:88px}
 .tablist{display:grid;grid-template-columns:1fr 1fr}
 .tablist button{text-align:left}
 .line-card .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
 .header,.mobile-actions,.cta-row,.tablist,.panel-bottom .btn,.line-card,.hero-art{display:none!important}
 .tabpanel[hidden]{display:block!important}
 .section{padding:24px 0}
 .hero-grid,.contact-grid{display:block}
 .wrap{width:100%}
 body{font-size:12pt;color:#111;background:#fff}
 .service-item,.case,.person{break-inside:avoid}
}
a[href^="tel:"]{white-space:nowrap}