@charset "UTF-8";
:root {--blue:#123d78;--ink:#182b40;--muted:#697887;--line:#dce4ec;--paper:#f4f6f8;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:78px}
body {margin:0}
button,a {-webkit-tap-highlight-color:transparent}
button {font:inherit;cursor:pointer;min-width:44px;min-height:44px}
a {color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible {outline:3px solid #e7ac44;outline-offset:4px}
img {max-width:100%;height:auto}
h1,h2,h3,p,figure {margin:0}
h2 {font-size:clamp(24px,3vw,34px);letter-spacing:-1px}
[v-cloak],[hidden] {display:none!important}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#brand-app {max-width:1080px;margin:auto;background:#fff;min-height:100vh}
.masthead {height:78px;padding:18px 40px;display:flex;align-items:center;gap:16px}
.masthead img {display:block;width:110px;height:44px;object-fit:contain}
.brand-lockup {display:inline-flex;align-items:center;gap:22px}
.brand-tagline {font-size:20px;font-weight:600;letter-spacing:1px;color:var(--blue);white-space:nowrap}
.cover-panel {background:#123d78}
.cover-panel>img {display:block;width:100%;height:auto}
.section-nav {position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);background:#fffffff5;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.section-nav a {text-align:center;padding:20px 4px;font-size:14px}
.section-nav a:hover {color:var(--blue);background:#eef3f8}
.poster-sequence {display:flex;flex-direction:column;gap:24px;padding:32px 32px 0;background:#f4f6f8}
.brand-panel {width:100%;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.brand-panel>a,.brand-panel img {display:block;width:100%}
.brand-panel img {height:auto}
.section {padding:46px 40px}
.section-title {display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:26px}
.eyebrow {font-size:11px;letter-spacing:2.5px;font-weight:600;color:#6e879e;margin-bottom:12px}
.section-title>span,.section-title>a {font-size:12px;color:var(--muted);flex-shrink:0}
.products-section {background:#f4f6f8}
.product-menu {display:flex;flex-direction:column;gap:14px}
.product-menu-item {display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:#edf2f7;transition:box-shadow .18s ease}
.product-menu-item:hover {box-shadow:0 4px 18px #123d7826}
.product-menu-slice {display:block;position:relative;width:100%;overflow:hidden}
.product-menu-slice img {position:absolute;left:0;width:100%;height:auto;max-width:none;display:block;pointer-events:none}
.product-dialog {width:calc(100% - 32px);max-width:1060px;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:8px;box-shadow:0 20px 80px #0005;background:#fff;color:var(--ink);overflow:auto;overscroll-behavior:contain}
.product-dialog::backdrop {background:#0a1e39bb}
.product-dialog-heading {position:sticky;top:0;z-index:2;background:#fffffff5;backdrop-filter:blur(12px);padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line)}
.product-dialog-heading h2 {font-size:22px;letter-spacing:0}
.product-dialog-heading button {border:1px solid var(--line);border-radius:50%;font-size:26px;line-height:1;background:#fff;flex-shrink:0}
.product-detail-image {display:block;width:100%;height:auto}
.product-dialog-actions {padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px;color:var(--blue)}
.product-dialog-actions button {border:1px solid var(--line);background:#f4f6f8;border-radius:4px;padding:10px 16px}
/* Match the online proposal's case proof and video cards. */
.cases-section,.films-section {background:#f4f6f8}
.cases-section {padding-bottom:12px}
.films-section {padding-top:12px}
.customer-trust-case-proof {display:grid;gap:12px;border:1px solid #c9dccc;border-radius:12px;background:#f5faf7;padding:15px}
.customer-trust-case-heading {display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.customer-trust-case-heading>div {display:grid;gap:5px}
.customer-trust-case-heading small {color:#8c681d;font-weight:800;letter-spacing:.04em}
.customer-trust-case-heading h3 {margin:0;color:#333e39;font-size:1.17em}
.customer-trust-case-heading>span {flex:0 0 auto;border-radius:999px;background:#e4efe8;color:#326c50;padding:6px 10px;font-size:12px;font-weight:800;max-width:100%;overflow-wrap:anywhere}
.customer-trust-case-map-embed {overflow:hidden;border:1px solid #ccddd2;border-radius:12px;background:#fff}
.customer-trust-case-map-embed iframe {display:block;width:100%;height:560px;border:0}
.customer-trust-case-map-embed>small {display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid #e1ebe4;color:#707a74;padding:8px 12px;line-height:1.5}
.customer-trust-case-map-embed>small>a {color:#326c50}
.films-section .customer-share-section {display:grid;gap:12px;padding:18px;border:1px solid #dbe5f3;border-radius:8px;background:#fff;min-width:0}
.customer-section-heading {display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.customer-section-heading small {display:block;margin-bottom:5px;color:#0b62b4;font-weight:800}
.customer-section-heading h2 {margin:0;color:#172f4e;font-size:20px;letter-spacing:0}
.customer-section-heading>span {flex:0 0 auto;border:1px solid #cae0f5;border-radius:999px;background:#f3f9ff;color:#175b96;padding:6px 10px;font-size:12px;font-weight:700}
.customer-video-dialog.without-social .customer-video-slide {padding-bottom:calc(62px + env(safe-area-inset-bottom))}
.video-track {display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative}
.video-track::-webkit-scrollbar {display:none}
.video-card {flex:0 0 100%;min-width:0;scroll-snap-align:start}
.video-card video {display:block;width:100%;aspect-ratio:16/9;background:#0e1c2c;border-radius:4px}
.video-card>p {display:flex;gap:14px;margin:16px 0;font-size:14px;line-height:1.5}
.video-card>p span {color:#6e879e;font-size:12px}
.video-controls {display:flex;align-items:center;justify-content:space-between}
.video-controls>button {border:1px solid #bdcddd;background:transparent;border-radius:50%;font-size:20px}
.video-dots {display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.video-dots button {position:relative;border:0;background:transparent;min-width:28px;width:28px}
.video-dots button:after {content:"";position:absolute;width:6px;height:6px;background:#bccbda;border-radius:50%;top:19px;left:11px}
.video-dots button.active:after {background:var(--blue)}
.empty {padding:32px 20px;border:1px dashed #becbda;color:var(--muted);font-size:14px;line-height:1.9;border-radius:4px}
.state {padding:80px 24px;text-align:center;line-height:2}
.state h1 {font-size:24px}
.state button {margin-top:20px;padding:8px 20px;background:var(--blue);color:#fff;border:0;border-radius:4px}
.media-unavailable:after {content:attr(data-error);display:block;font-size:13px;color:var(--muted);padding:24px;text-align:center}
.media-error {color:#7b3a23}
footer {text-align:center;font-size:11px;color:var(--muted);padding:24px 20px calc(100px + env(safe-area-inset-bottom))}
.bottom-bar {position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:1080px;background:#fffffff5;border-top:1px solid var(--line);padding:12px 24px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:10}
.bottom-bar a,.bottom-bar button {font-size:14px;text-align:center;padding:14px 12px;flex:1}
.bottom-bar .primary {background:var(--blue);color:#fff;min-width:0;border:0;border-radius:5px}
@media(max-width:600px) {
 .masthead {height:66px;padding:14px 20px}
 .masthead img {width:92px;height:38px}
 .brand-lockup {gap:14px}
 .brand-tagline {font-size:16px;letter-spacing:0}
 .section-nav a {font-size:13px;padding:17px 2px}
 .poster-sequence {padding:18px 12px 0;gap:16px}
 .section {padding:32px 12px}
 .section-title {gap:8px;margin-bottom:22px}
 .section-title>span,.section-title>a {font-size:10px}
 .section-title .eyebrow {font-size:9px;letter-spacing:1.7px}
 .section-title h2 {font-size:24px}
 .product-menu {gap:12px}
 .product-menu-item {border-radius:8px}
 .product-dialog {width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
 .product-dialog-heading {padding:10px 12px}
 .product-dialog-heading h2 {font-size:18px}
 .product-dialog-actions {padding:14px 12px;gap:8px;font-size:12px}
 .product-dialog-actions button {padding:8px 12px}
 .films-section .customer-share-section {padding:14px}
 .bottom-bar {padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:8px}
 .bottom-bar a,.bottom-bar button {font-size:13px;padding:14px 6px}
 .bottom-bar .primary {min-width:0}
}
@media(max-width:540px) {
 .customer-trust-case-heading {display:grid;grid-template-columns:1fr}
 .customer-trust-case-heading>span {justify-self:start}
 .customer-trust-case-map-embed iframe {height:460px}
}
@media(max-width:520px) {
 .customer-section-heading {display:grid}
 .customer-section-heading>span {justify-self:start}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}.product-menu-item {transition:none}}
.brand-share-dialog {width:min(500px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid var(--line);border-radius:18px;padding:30px 22px;color:var(--ink);background:#fff}
.brand-share-dialog::backdrop {background:#0a234bb0;backdrop-filter:blur(4px)}
.brand-share-dialog h2 {font-size:24px;line-height:1.4;margin:10px 0 20px}
.share-kicker {font-size:12px;color:var(--blue);letter-spacing:2px;padding-right:36px}
.share-close {position:absolute;right:10px;top:10px;background:#f0f4f8;border:0;border-radius:50%;font-size:28px;color:var(--ink)}
.share-card-preview {display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:10px;background:#f7f9fc}
.share-card-preview>img {flex:0 0 72px;width:72px;height:72px;object-fit:contain;background:#fff;border-radius:4px}
.share-card-preview b {font-size:15px;line-height:1.5}
.share-card-preview p {font-size:12px;line-height:1.6;color:var(--muted);margin-top:7px}
.share-status {margin:20px 0 8px;font-size:14px;line-height:1.8}
.share-preview-note {font-size:11px;color:var(--muted)}
.share-dialog-actions {display:flex;gap:10px;margin:20px 0 12px}
.share-dialog-actions button {flex:1;padding:10px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:13px;color:var(--ink)}
.share-dialog-actions .primary {background:var(--blue);border-color:var(--blue);color:#fff}
.share-url {display:block;overflow-wrap:anywhere;font-size:12px;color:var(--blue);padding-top:10px}
#brand-share-feedback {min-height:20px;font-size:13px;color:#236b56}