.contact-system-page{position:relative;padding:34px 0 88px;color:#15242b}.contact-system-page .mud-container{display:grid;gap:24px}.contact-section-nav{display:flex;gap:6px;overflow-x:auto;padding:7px;background:rgba(14,29,37,.82);border:1px solid rgba(174,201,213,.22);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));scrollbar-width:thin}.contact-section-nav a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 18px;color:#dce8ed;font-size:15.5px;font-weight:600;letter-spacing:.01em;text-decoration:none;white-space:nowrap;border-left:2px solid transparent}.contact-section-nav a:hover,.contact-section-nav a:focus-visible{background:rgba(97,197,250,.1);color:#fff;outline:none}.contact-section-nav a.active{background:rgba(21,157,235,.18);border-left-color:#61c5fa;color:#fff}.engineering-panel,.contact-route-card,.contact-form-panel,.contact-content-panel{background:rgba(248,250,250,.9);border:1px solid rgba(150,170,180,.34);backdrop-filter:blur(18px) saturate(.92);box-shadow:0 18px 46px rgba(3,13,18,.13)}.contact-intro{padding:clamp(28px,4vw,48px);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}.contact-intro>div{max-width:760px}.section-kicker{display:block;margin-bottom:9px;color:#167eb8;font:600 14px/1.2 "IBM Plex Sans",sans-serif;letter-spacing:.14em}.contact-system-page h2{margin:0 0 12px;font-size:clamp(26px,3vw,36px);font-weight:700;line-height:1.18}.contact-system-page h3{margin:0;font-size:20px;font-weight:650;line-height:1.3}.contact-system-page p{margin:0;color:#41545e;font-size:16.5px;line-height:1.72}.contact-route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.contact-route-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:15px;min-height:272px;padding:28px;color:#15242b;text-decoration:none;overflow:hidden;transition:transform .3s ease,border-color .3s ease,background .3s ease}.contact-route-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#159deb;transform:scaleY(.35);transform-origin:bottom;transition:transform .3s ease}.contact-route-card:hover,.contact-route-card:focus-visible{transform:translateY(-3px);border-color:rgba(21,157,235,.56);background:rgba(252,253,253,.96);outline:none}.contact-route-card:hover:before,.contact-route-card:focus-visible:before{transform:scaleY(1)}.contact-route-card .route-number{color:#6d838d;font:600 14px/1 "IBM Plex Sans",sans-serif;letter-spacing:.12em}.contact-route-card>.ks-icon{color:#167eb8}.contact-route-card h3,.contact-route-card p,.contact-route-card .route-link{grid-column:1/-1}.route-link{display:flex;align-items:center;gap:8px;margin-top:auto;color:#116c9d;font-size:15.5px;font-weight:600}.contact-direct-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}.contact-details,.contact-map{padding:clamp(24px,3vw,36px)}.contact-details dl{display:grid;gap:0;margin:20px 0 0}.contact-details dl>div{display:grid;grid-template-columns:minmax(145px,.7fr) 1.3fr;gap:18px;padding:16px 0;border-top:1px solid rgba(112,139,151,.2)}.contact-details dt{display:flex;align-items:center;gap:9px;font-weight:600}.contact-details dd{margin:0;color:#41545e}.contact-details a{color:#116c9d;font-weight:600}.contact-map{display:flex;flex-direction:column;gap:18px}.map-consent{display:flex;min-height:220px;flex-direction:column;align-items:center;justify-content:center;gap:11px;border:1px dashed rgba(21,157,235,.55);background:linear-gradient(135deg,rgba(14,38,49,.9),rgba(21,55,69,.84));color:#eff8fb;font:600 15px "IBM Plex Sans",sans-serif;cursor:pointer}.map-consent:hover,.map-consent:focus-visible{border-style:solid;background:linear-gradient(135deg,#102d39,#174b60);outline:3px solid rgba(97,197,250,.3);outline-offset:2px}.contact-map-frame{width:100%;min-height:220px;border:0}.engineering-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border:1px solid #167eb8;background:#159deb;color:#fff!important;font-weight:600;text-decoration:none;cursor:pointer}.engineering-button.secondary{background:transparent;color:#116c9d!important}.engineering-button:disabled{opacity:.55;cursor:not-allowed}.contact-content-panel,.contact-form-panel{padding:clamp(24px,4vw,46px)}.contact-content-panel{display:grid;gap:25px}.contact-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.contact-info-tile{padding:22px;border:1px solid rgba(113,143,156,.24);background:rgba(238,244,246,.7)}.contact-info-tile h3{margin:11px 0 8px}.contact-info-tile p{font-size:15.5px}.process-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(99,129,143,.24);border:1px solid rgba(99,129,143,.24)}.process-step{padding:22px;background:rgba(248,250,250,.95)}.process-step strong{display:block;margin-bottom:8px;color:#167eb8;font:600 14px "IBM Plex Sans",sans-serif;letter-spacing:.1em}.process-step p{font-size:14.5px}.contact-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label,.file-field legend{color:#20333c;font-size:15.5px;font-weight:600}.field input,.field select,.field textarea{width:100%;min-height:48px;padding:11px 13px;border:1px solid #9caeb6;border-radius:0;background:rgba(255,255,255,.95);color:#15242b;font:500 15.5px/1.4 inherit}.field textarea{min-height:132px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#159deb;outline:3px solid rgba(21,157,235,.16)}.file-field{grid-column:1/-1;margin:0;padding:17px;border:1px dashed #8ba5b1}.file-field input{display:block;margin-top:10px}.file-note,.form-note{color:#526873!important;font-size:14.5px!important}.consent-row{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;padding:15px;background:rgba(228,238,242,.72);font-size:14.5px;line-height:1.55}.consent-row input{width:18px;height:18px;margin-top:2px}.consent-row a{color:#116c9d}.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:16px}.submission-message{padding:14px 16px;border-left:3px solid #159deb;background:#eaf5fa;color:#17343f;font-weight:500}.submission-message.error{border-left-color:#b43b3b;background:#f9eded;color:#762929}.job-list{display:grid;gap:12px}.job-card{padding:21px;border-left:3px solid #159deb;background:rgba(235,243,246,.82)}.job-card h3{margin-bottom:6px}.job-meta{display:flex;gap:12px;flex-wrap:wrap;color:#516873;font-size:14.5px}.empty-register{padding:26px;border:1px dashed #8fa8b3;background:rgba(236,243,245,.66)}.privacy-copy{max-width:900px}.privacy-copy h2{margin-top:28px;font-size:25px}.privacy-copy ul{color:#41545e;font-size:16px;line-height:1.75}.privacy-copy li+li{margin-top:7px}
@media(max-width:959px){.contact-system-page{padding:24px 0 60px}.contact-route-grid,.contact-columns{grid-template-columns:1fr}.contact-route-card{min-height:220px}.contact-direct-grid{grid-template-columns:1fr}.process-list{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-section-nav{margin-inline:-4px}.contact-section-nav a{padding-inline:14px}.contact-form-grid{grid-template-columns:1fr}.field.full,.file-field,.consent-row,.form-actions{grid-column:1}}
@media(max-width:599px){.contact-system-page .mud-container{padding-inline:16px!important;gap:18px}.contact-section-nav{clip-path:none}.contact-section-nav a{min-height:44px;padding-inline:12px;font-size:14.5px}.contact-intro,.contact-content-panel,.contact-form-panel,.contact-details,.contact-map{padding:22px}.contact-route-card{min-height:0;padding:22px}.contact-details dl>div{grid-template-columns:1fr;gap:6px}.process-list{grid-template-columns:1fr}.form-actions{align-items:stretch;flex-direction:column}.form-actions .engineering-button{width:100%}}

/* Contact navigation and form refinements */
.contact-route-card{min-height:190px}
.contact-route-card .route-meta{align-self:end;color:#526873;font-size:14.5px;line-height:1.5}
.contact-map-frame{display:block;min-height:270px;aspect-ratio:16/10;background:#dce6ea}
.form-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.form-heading h2{margin-bottom:0}
.required-note{flex:0 0 auto;padding-top:4px;color:#7b3131!important;font-size:14.5px!important;font-weight:600;line-height:1.4!important}
.required-mark{color:#a72e2e;font-weight:700}

@media(min-width:960px){
    .contact-section-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:8px 22px;overflow:visible}
    .contact-section-nav a{width:100%;padding-inline:16px;border-left:1px solid rgba(174,201,213,.15)}
    .contact-section-nav a:first-child{border-left-color:transparent}
    .contact-section-nav a.active{border-left-color:#61c5fa}
}

@media(max-width:959px){
    .contact-route-card{min-height:176px}
    .contact-section-nav{display:flex;padding:7px;overflow-x:auto;clip-path:none}
    .contact-section-nav a{flex:0 0 auto;min-width:150px}
}

@media(max-width:599px){
    .contact-route-card{min-height:150px}
    .contact-map-frame{min-height:250px;aspect-ratio:4/3}
    .form-heading{align-items:flex-start;flex-direction:column;gap:7px;margin-bottom:20px}
    .required-note{padding-top:0}
}
.contact-form-grid>*{min-width:0}.file-field input[type=file]{display:block;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Direct contact actions: the complete row is the native protocol link. */
.contact-channel-list {
    display: grid;
    gap: 8px;
    margin-top: 22px;
}

.contact-details .contact-channel {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 64px;
    padding: 10px 13px;
    border: 1px solid rgba(112, 139, 151, .25);
    background: rgba(237, 244, 246, .72);
    color: #15242b;
    font-weight: 500;
    text-decoration: none;
    transition: background .24s ease, border-color .24s ease, transform .24s ease;
}

.contact-channel-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #116c9d;
    background: rgba(21, 157, 235, .09);
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.contact-channel-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.contact-channel-copy strong {
    font-size: 15.5px;
    font-weight: 650;
    line-height: 1.25;
}

.contact-channel-copy > span {
    overflow-wrap: anywhere;
    color: #41545e;
    font: 500 15.5px/1.35 "IBM Plex Sans", "Noto Sans HK", sans-serif;
}

.contact-channel-action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    color: #116c9d;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}

.contact-details .contact-channel:hover,
.contact-details .contact-channel:focus-visible {
    border-color: rgba(21, 157, 235, .58);
    background: rgba(250, 252, 252, .96);
    color: #15242b;
    transform: translateX(2px);
    outline: none;
}

.contact-details .contact-channel:focus-visible {
    box-shadow: 0 0 0 3px rgba(21, 157, 235, .18);
}

.contact-channel-whatsapp .contact-channel-icon {
    color: #14745d;
    background: rgba(37, 211, 102, .09);
}

@media(max-width:599px) {
    .contact-details .contact-channel {
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 66px;
    }

    .contact-channel-action {
        grid-column: 2;
        justify-content: flex-start;
        margin-top: -2px;
        font-size: 14px;
    }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.engineering-panel,.contact-route-card,.contact-form-panel,.contact-content-panel{background:#f8fafa}}

/* Charcoal public contact system. Layout remains unchanged; only the material,
   contrast and action hierarchy are replaced. */
body:has(.public-layout) .contact-system-page {
    color: var(--public-ink);
}

body:has(.public-layout) .contact-section-nav {
    color: var(--public-ink);
    background: rgba(10, 15, 18, .88);
    border-color: var(--public-line);
}

body:has(.public-layout) .contact-section-nav a {
    color: var(--public-muted);
}

body:has(.public-layout) .contact-section-nav a:hover,
body:has(.public-layout) .contact-section-nav a:focus-visible,
body:has(.public-layout) .contact-section-nav a.active {
    color: var(--public-ink);
    background: rgba(29, 42, 48, .92);
}

body:has(.public-layout) :is(.engineering-panel, .contact-route-card, .contact-form-panel, .contact-content-panel) {
    color: var(--public-ink);
    background: var(--public-glass-strong);
    border-color: var(--public-line);
    box-shadow: 0 20px 52px rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(16px) saturate(100%);
    backdrop-filter: blur(16px) saturate(100%);
}

body:has(.public-layout) .contact-system-page :is(h2, h3, dt, .contact-route-card, .field label, .file-field legend) {
    color: var(--public-ink);
}

body:has(.public-layout) .contact-system-page :is(p, dd, .route-meta, .file-note, .form-note, .privacy-copy ul, .job-meta) {
    color: var(--public-muted) !important;
}

body:has(.public-layout) .section-kicker,
body:has(.public-layout) :is(.route-link, .contact-details a, .consent-row a, .contact-channel-action) {
    color: #61c5fa;
}

body:has(.public-layout) .contact-route-card:hover,
body:has(.public-layout) .contact-route-card:focus-visible {
    color: var(--public-ink);
    background: var(--public-panel-hover);
    border-color: var(--public-line-strong);
}

body:has(.public-layout) .contact-route-card .route-number {
    color: var(--public-dim);
}

body:has(.public-layout) .contact-details dl > div {
    border-top-color: var(--public-line);
}

body:has(.public-layout) :is(.contact-info-tile, .process-step, .job-card, .empty-register, .consent-row) {
    color: var(--public-ink);
    background: rgba(29, 42, 48, .78);
    border-color: var(--public-line);
}

body:has(.public-layout) .process-list {
    background: var(--public-line);
    border-color: var(--public-line);
}

body:has(.public-layout) .field :is(input, select, textarea) {
    color: var(--public-ink);
    background: var(--public-raised);
    border-color: rgba(183, 199, 205, .36);
    color-scheme: dark;
}

body:has(.public-layout) .field :is(input, textarea)::placeholder {
    color: var(--public-dim);
    opacity: 1;
}

body:has(.public-layout) .field select option {
    color: var(--public-ink);
    background: var(--public-frame);
}

body:has(.public-layout) .field :is(input, select, textarea):focus {
    border-color: var(--ks-primary);
    outline-color: rgba(21, 157, 235, .28);
}

body:has(.public-layout) .file-field {
    border-color: rgba(183, 199, 205, .34);
}

body:has(.public-layout) .engineering-button:not(.secondary) {
    color: var(--public-silver-ink) !important;
    background: linear-gradient(180deg, var(--public-silver-top), var(--public-silver-bottom));
    border-color: rgba(232, 239, 241, .76);
}

body:has(.public-layout) .engineering-button:not(.secondary):hover,
body:has(.public-layout) .engineering-button:not(.secondary):focus-visible {
    color: var(--public-canvas) !important;
    background: linear-gradient(180deg, #e7edef, #cad4d8);
}

body:has(.public-layout) .engineering-button.secondary {
    color: var(--public-ink) !important;
    background: var(--public-raised);
    border-color: var(--public-line-strong);
}

body:has(.public-layout) .submission-message {
    color: var(--public-ink);
    background: #1c3039;
}

body:has(.public-layout) .submission-message.error {
    color: #ffd7d7;
    background: #3a2022;
    border-left-color: #e27272;
}

body:has(.public-layout) .required-note,
body:has(.public-layout) .required-mark {
    color: #ffb2b2 !important;
}

body:has(.public-layout) .contact-map-frame {
    background: var(--public-raised);
}

body:has(.public-layout) .contact-details .contact-channel {
    color: var(--public-ink);
    background: rgba(29, 42, 48, .78);
    border-color: var(--public-line);
}

body:has(.public-layout) .contact-channel-copy > span {
    color: var(--public-muted);
}

body:has(.public-layout) .contact-channel-icon {
    color: #61c5fa;
    background: rgba(21, 157, 235, .10);
}

body:has(.public-layout) .contact-details .contact-channel:hover,
body:has(.public-layout) .contact-details .contact-channel:focus-visible {
    color: var(--public-ink);
    background: var(--public-panel-hover);
    border-color: var(--public-line-strong);
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    body:has(.public-layout) :is(.engineering-panel, .contact-route-card, .contact-form-panel, .contact-content-panel) {
        background: var(--public-frame);
    }
}

body:has(.public-layout) .contact-section-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--public-line-rgb, 183, 199, 205), .34) rgba(var(--public-canvas-rgb, 10, 15, 18), .56);
}

body:has(.public-layout) .contact-section-nav::-webkit-scrollbar { height: 4px; }
body:has(.public-layout) .contact-section-nav::-webkit-scrollbar-track { background: rgba(var(--public-canvas-rgb, 10, 15, 18), .56); }
body:has(.public-layout) .contact-section-nav::-webkit-scrollbar-thumb { background: rgba(var(--public-line-rgb, 183, 199, 205), .34); }