/* One contact sheet, shared by the homepage, services and case studies. */
html.connect-open,html.connect-open body{overflow:hidden}
.connect-dialog{width:min(880px,calc(100vw - 48px));max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid #d7d7d7;border-radius:0;background:#fff;color:#161616;color-scheme:light;overflow:auto;overscroll-behavior:contain;box-shadow:0 24px 100px #0007;font-family:Arial,sans-serif}
.connect-dialog::backdrop{background:#000b;backdrop-filter:blur(7px)}
.connect-dialog *{box-sizing:border-box}
.connect-top{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:1;background:#fff;padding:12px 24px;border-bottom:1px solid #dedede}
.connect-top>span{font-size:10px;letter-spacing:.12em}
.connect-close{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;min-width:44px;padding:10px 0 10px 14px;border:0;background:transparent;color:inherit;font:12px/1.3 Arial,sans-serif;cursor:pointer}
.connect-close svg{width:20px;height:20px}
.connect-content{padding:38px 40px 32px;text-align:center}
.connect-content h2{font:clamp(52px,7.5vw,96px)/.95 ThinkingNarrow,Impact,sans-serif;letter-spacing:-.025em;margin:0}
.connect-description{font:21px/1.4 Georgia,serif;margin:18px auto 0;max-width:30ch}
.connect-context{display:inline-block;margin:14px 0 0;padding:7px 10px;border:1px solid #bdbdbd;font:11px/1.45 Arial,sans-serif;max-width:100%;overflow-wrap:anywhere}
.connect-context[hidden]{display:none}
.connect-methods{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:34px 0 26px}
.connect-method{flex:0 0 calc((100% - 48px)/5);min-width:0;min-height:124px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 8px;border:1px solid #bcbcbc;background:transparent;color:#202020;text-decoration:none;font:14px/1.3 Arial,sans-serif}
.connect-method svg{width:30px;height:30px;flex:none}
.connect-method small{font-size:10px;line-height:1.4}
.connect-method-live{background:#181818;border-color:#181818;color:#fff;cursor:pointer}
.connect-method-live:hover{background:#333;border-color:#333}
.connect-method[aria-expanded="true"]{background:#fff;border-color:#161616;color:#161616}
.connect-panel{margin:0 auto 26px;padding:24px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;text-align:left;max-width:520px;scroll-margin-top:80px}
.connect-panel[hidden]{display:none}
.connect-panel h3{margin:0;font:40px/1.05 ThinkingNarrow,Impact,sans-serif;letter-spacing:-.015em}
.connect-panel-description{margin:10px 0 22px;font:16px/1.5 Georgia,serif}
.connect-panel label{display:block;margin-bottom:8px;font:13px/1.5 Arial,sans-serif}
.connect-panel label span{color:#555}
.connect-panel input[type="tel"],.connect-panel select{display:block;width:100%;min-width:0;min-height:50px;padding:12px 14px;border:1px solid #777;border-radius:0;background:#fff;color:#161616;font:16px/1.5 Arial,sans-serif;scroll-margin-top:80px}
.connect-panel input::placeholder{color:#666;opacity:1}
.connect-panel input[aria-invalid="true"]{border:2px solid #9b271d;padding:11px 13px}
.connect-field-hint,.connect-field-error{font:12px/1.5 Arial,sans-serif;margin:8px 0 0}
.connect-field-hint{color:#555}
.connect-field-error{color:#9b271d}
.connect-field-error:empty{margin:0}
.connect-action{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:48px;padding:12px 18px;border:1px solid #161616;border-radius:0;background:#161616;color:#fff;font:13px/1.5 Arial,sans-serif;cursor:pointer}
.connect-action:hover{background:#333}
.connect-action svg{width:20px;height:20px;flex:none}
#callback-form .connect-action{margin-top:20px;width:100%}
.callback-channel-row{margin-top:20px}
.connect-panel select{font-family:Arial,sans-serif;cursor:pointer}
.callback-send-hint{text-align:center;margin-top:12px}
.connect-number-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:10px}
#wechat-number{font:22px/1.5 Arial,sans-serif;white-space:nowrap;user-select:all}
.connect-email-address{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 18px;font-size:12px;line-height:1.5}
.connect-email-address a{color:inherit;text-underline-offset:4px;overflow-wrap:anywhere;min-height:44px;display:inline-flex;align-items:center}
.connect-email-address button{min-height:44px;padding:10px 0;border:0;background:transparent;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer;font:inherit}
.connect-copy-status{font-size:12px;line-height:1.5;margin:0;min-height:18px;color:#555}
.connect-dialog :is(a,button,input,select):focus-visible{outline:2px solid currentColor;outline-offset:4px}
.connect-dialog :is(.connect-method-live,.connect-action):focus-visible{outline-color:#161616}
@media(max-width:590px){
 .connect-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
 .connect-top{padding:8px 16px}
 .connect-top>span{font-size:9px;letter-spacing:.06em}
 .connect-content{padding:28px 20px 22px}
 .connect-content h2{font-size:clamp(44px,12vw,64px)}
 .connect-description{font-size:19px;margin-top:14px}
 .connect-methods{gap:10px;margin:24px 0 18px}
 .connect-method{flex-basis:calc((100% - 20px)/3);min-height:112px;font-size:12px;padding:14px 4px;gap:10px}
 .connect-method svg{width:27px;height:27px}
 .connect-method small{font-size:9px}
 .connect-panel{padding:20px 0;margin-bottom:20px;scroll-margin-top:72px}
 .connect-panel h3{font-size:36px}
 .connect-number-row .connect-action{width:100%}
}
@media(max-height:500px) and (min-width:591px){
 .connect-content{padding:18px 24px}
 .connect-content h2{font-size:52px}
 .connect-description{margin-top:10px;font-size:18px}
 .connect-methods{margin:18px 0 10px}
 .connect-method{min-height:100px;padding:12px 8px;gap:8px}
}

/* Direct messenger contacts beneath the closing invitation. */
#contact .contact-messengers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:min(500px,100%);margin:24px auto 12px}
#contact .contact-messenger{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;min-width:0;min-height:100px;padding:10px 4px;border:0;background:transparent;color:inherit;text-decoration:none;text-align:center;font:13px/1.4 var(--sans);cursor:pointer}
#contact .contact-messenger svg{display:block;width:28px;height:28px;flex:none;margin-bottom:3px;transition:transform 200ms ease}
#contact .contact-messenger small{display:block;max-width:100%;font:11px/1.5 var(--sans);color:#62655f;overflow-wrap:anywhere}
#contact .contact-messenger:hover svg{transform:translateY(-2px)}
#contact .contact-messenger:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:590px){#contact .contact-messengers{gap:8px;margin-top:20px}#contact .contact-messenger{padding-inline:2px}}
@media(prefers-reduced-motion:reduce){#contact .contact-messenger svg{transition:none}}

/* The confirmed portrait accompanies the conversation, on every page. */
.connect-intro{display:flex;align-items:center;justify-content:center;gap:26px;margin:0 auto;max-width:680px;text-align:left}
.connect-portrait{display:block;flex:none;width:104px;height:130px;object-fit:cover;object-position:center 20%;background:#080909;filter:grayscale(1)}
.connect-intro-copy{min-width:0}
.connect-intro .connect-description{margin:14px 0 0;max-width:30ch}
.connect-intro .connect-context{margin-top:12px}
@media(max-width:590px){.connect-intro{gap:18px;align-items:flex-start}.connect-portrait{width:68px;height:85px;margin-top:4px}.connect-intro .connect-description{font-size:16px;line-height:1.4}.connect-intro h2{font-size:clamp(36px,9.6vw,54px)}}
@media(max-height:500px) and (min-width:591px){.connect-portrait{width:64px;height:80px}.connect-intro .connect-description{margin-top:8px}}