/*
 * monday.digip-solutions.com (theme "awdpmonday").
 *
 * Values come from the "视觉基础" (foundations) board of the site design: one navy, one CTA blue, a brand green used only
 * for marks (never for text), a 1200px container with 40px gutters (20px on phones), 72px section rhythm (44px on phones)
 * and 44px+ touch targets. Layout is Bootstrap 5 (row/col, d-flex, gap utilities); this file only adds what Bootstrap
 * cannot express: the type scale, the colour tokens and the few component skins below.
 */

:root {
    --md-navy: #0B163F;
    --md-navy-deep: #070F2C;
    --md-blue: #0060FE;
    --md-blue-2: #156FF3;
    --md-green: #6AB04C;
    --md-light: #F4F8FB;
    --md-alt: #F7F9FC;
    --md-line: #E3E8F0;
    --md-line-strong: #CBD5E6;
    --md-input-line: #D7DEEA;
    --md-text: #3C4A63;
    --md-text-strong: #243352;
    --md-muted: #6B7A94;
    --md-caption: #7A8BA5;
    --md-dot: #C3CCDD;
    --md-required: #C0392B;
    --md-font: Figtree, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

body { margin: 0; background: #FFFFFF; }

/* body.jsp wraps the whole page in .md-site: the decorator owns <body>'s class (THEME settings). */
.md-site {
    background: #FFFFFF;
    color: var(--md-navy);
    font-family: var(--md-font);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

.md-site a { color: var(--md-blue); text-decoration: none; }
.md-site a:hover { color: var(--md-navy); }
.md-site img { max-width: 100%; }

/* ---------- Layout ---------- */

.md-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
/* Vertical padding only: .md-section often sits on the same element as .md-wrap, whose side gutters it must keep. */
.md-section { padding-top: 72px; padding-bottom: 72px; }
.md-section-top { padding-top: 64px; }
.md-section-bottom { padding-bottom: 72px; }
.md-hero { padding: 64px 0 0; }

.md-dark { background: var(--md-navy); color: #FFFFFF; }
.md-dark p { color: rgba(255, 255, 255, .84); }
.md-alt { background: var(--md-alt); border-top: 1px solid var(--md-line); border-bottom: 1px solid var(--md-line); }

/* ---------- Type ---------- */

.md-eyebrow { margin: 0 0 20px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--md-blue); }
.md-h1 { margin: 0; max-width: 980px; font-size: 56px; line-height: 1.14; font-weight: 800; letter-spacing: -.025em; }
.md-h1-home { font-size: 60px; line-height: 1.12; }
.md-h2 { margin: 0; font-size: 38px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.md-h2-sm { font-size: 32px; line-height: 1.3; }
.md-h3 { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 700; letter-spacing: -.01em; }
.md-lead { margin: 26px 0 0; max-width: 820px; font-size: 19px; line-height: 1.75; color: var(--md-text); }
.md-body { font-size: 16.5px; line-height: 1.85; color: var(--md-text); }
.md-body p { margin: 0; }
.md-body p + p { margin-top: 16px; }
.md-small { font-size: 15px; line-height: 1.8; color: var(--md-text); }
.md-muted { color: var(--md-muted); }

.md-breadcrumb { margin: 0 0 24px; font-size: 13.5px; color: var(--md-muted); }
.md-breadcrumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.md-breadcrumb li + li::before { content: "/"; margin: 0 8px; color: var(--md-dot); }
.md-site .md-breadcrumb a { color: var(--md-muted); }

/* ---------- Figures (transparent @2x PNGs, shown at half their pixel width) ---------- */

.md-figure { margin: 52px 0 0; }
.md-figure img { display: block; width: 100%; height: auto; }
.md-figure figcaption { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--md-caption); }
.md-dark .md-figure figcaption { color: rgba(255, 255, 255, .6); }

/* ---------- Buttons (44px+ targets) ---------- */

.md-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 0 28px; border-radius: 9px; border: 1.5px solid transparent;
    font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer;
}
.md-site a.md-btn-primary, .md-btn-primary { background: var(--md-blue); border-color: var(--md-blue); color: #FFFFFF; }
.md-site a.md-btn-primary:hover, .md-btn-primary:hover { background: #0050D6; border-color: #0050D6; color: #FFFFFF; }
.md-site a.md-btn-outline, .md-btn-outline { background: #FFFFFF; border-color: var(--md-line-strong); color: var(--md-navy); font-weight: 600; }
.md-site a.md-btn-outline:hover, .md-btn-outline:hover { border-color: var(--md-navy); color: var(--md-navy); }
.md-site a.md-btn-white, .md-btn-white { background: #FFFFFF; border-color: #FFFFFF; color: var(--md-navy); min-height: 56px; padding: 0 32px; font-size: 16.5px; }
.md-site a.md-btn-white:hover, .md-btn-white:hover { background: var(--md-light); color: var(--md-navy); }
.md-btn-sm { min-height: 48px; padding: 0 24px; font-size: 15.5px; }

/* ---------- Header ---------- */

.md-header { background: #FFFFFF; border-bottom: 1px solid var(--md-line); }
.md-header .navbar { padding: 0; min-height: 104px; }
/* Never shrinks: a squeezed .md-brand let "AWDP Solutions" run under the nav. The nav gaps below are sized so the row fits instead. */
.md-brand { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.md-site a.md-brand, .md-site a.md-brand:hover { color: var(--md-navy); }
.md-brand img { width: 80px; height: 80px; display: block; }
.md-brand-name { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.md-brand-sub { display: block; font-size: 14px; font-weight: 500; color: var(--md-muted); line-height: 1.3; }
.md-nav-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; }
.md-site a.md-nav-link { color: var(--md-text); }
.md-site a.md-nav-link:hover { color: var(--md-navy); }
.md-site a.md-nav-link.active { color: var(--md-navy); font-weight: 700; box-shadow: inset 0 -2px 0 var(--md-blue); }
.md-lang { display: flex; align-items: center; gap: 4px; }
.md-lang-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.md-site a.md-lang-link { color: var(--md-muted); }
.md-site a.md-lang-link:hover, .md-site a.md-lang-link:focus-visible { color: var(--md-navy); }
.md-lang-link.current { color: var(--md-navy); font-weight: 700; box-shadow: inset 0 -2px 0 var(--md-blue); }

.md-header .md-btn { min-height: 44px; padding: 0 20px; border-radius: 8px; font-size: 14.5px; }
.md-header .md-nav-link, .md-header .md-btn, .md-brand-name, .md-brand-sub { white-space: nowrap; }
.md-menu-toggle { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--md-line); border-radius: 9px; background: #FFFFFF; }

/* The content column is 1200px at every desktop width, and the English row with the 22px brand name needs ~1190px at these gaps. */
@media (min-width: 1200px) {
    .md-header .navbar-nav { gap: 16px !important; margin-left: 16px !important; }
    .md-lang { border-left: 1px solid var(--md-line); padding-left: 16px; }
}

/* 1200-1399px: the full nav row plus the 80px logo is ~1170px, so the gaps tighten rather than the logo shrinking. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .md-header .navbar-nav { gap: 12px !important; margin-left: 12px !important; }
    .md-header .md-btn { padding: 0 12px; }
    .md-brand-name { font-size: 20px; }
    .md-lang { gap: 0; padding-left: 10px; }
    .md-lang-link { min-width: 40px; }
}

/* ---------- Trust strip ---------- */

.md-trust { margin-top: 40px; background: var(--md-alt); border-top: 1px solid var(--md-line); border-bottom: 1px solid var(--md-line); }
.md-trust ul { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin: 0; padding: 22px 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--md-text); }

/* ---------- Cards ---------- */

.md-card { height: 100%; border: 1px solid var(--md-line); border-radius: 12px; padding: 26px 24px 28px; background: #FFFFFF; }
.md-card .md-icon { width: 32px; height: 32px; display: block; margin-bottom: 16px; }
.md-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.8; color: var(--md-text); }

.md-point { height: 100%; background: var(--md-light); border-radius: 14px; padding: 34px 32px 36px; }
.md-point p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.8; color: var(--md-text-strong); }
.md-point .md-h3 { font-size: 20px; }
.md-bar { display: block; width: 34px; height: 4px; border-radius: 2px; background: var(--md-blue); margin-bottom: 20px; }
.md-bar-navy { background: var(--md-navy); }
.md-bar-green { background: var(--md-green); }
.md-bar-blue2 { background: var(--md-blue-2); }

.md-rule { border-top: 2px solid var(--md-navy); padding-top: 20px; height: 100%; }
.md-rule p { margin: 12px 0 0; font-size: 16px; line-height: 1.8; color: var(--md-text); }

.md-box { border: 1px solid var(--md-line); border-radius: 16px; padding: 44px; }
.md-panel-dark { background: var(--md-navy); color: #FFFFFF; border-radius: 18px; padding: 56px; }
.md-panel-dark p { color: rgba(255, 255, 255, .84); }

.md-chip { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1.5px solid var(--md-line); font-size: 16px; font-weight: 600; }

/* Services page: one row per service, icon + H2 on the left, copy on the right */
.md-service { border-top: 1px solid var(--md-line); padding: 40px 0; }
.md-service:last-child { border-bottom: 1px solid var(--md-line); }
.md-service .md-icon { width: 32px; height: 32px; flex: none; display: block; margin-top: 2px; }
.md-service .md-h2 { font-size: 26px; line-height: 1.3; letter-spacing: -.018em; }
.md-service-highlight { background: var(--md-light); margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
.md-service-highlight .md-body { color: var(--md-text-strong); }

/* Construction page: Procore comparison rows */
.md-compare { border-top: 1px solid var(--md-line); }
.md-compare-row { padding: 22px 0; border-bottom: 1px solid var(--md-line); }
.md-compare-row .md-h3 { font-size: 16.5px; }
.md-compare-row p { margin: 0; font-size: 15.5px; line-height: 1.8; color: #56657F; }

/* ---------- FAQ (native disclosure, so every answer stays in the page) ---------- */

.md-faq { border-top: 1px solid var(--md-line); }
.md-faq details { border-bottom: 1px solid var(--md-line); }
.md-faq summary { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 18px 0; cursor: pointer; list-style: none; }
.md-faq summary::-webkit-details-marker { display: none; }
.md-faq summary .md-h3 { flex: 1; }
.md-faq summary::after {
    content: ""; flex: none; width: 18px; height: 18px; transition: transform .15s ease;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8BA5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.md-faq details[open] summary::after { transform: rotate(180deg); }
.md-faq details p { margin: 0 0 26px; font-size: 16.5px; line-height: 1.8; color: var(--md-text); }

/* ---------- Contact form ---------- */

.md-form label, .md-form legend { font-size: 14px; font-weight: 600; color: var(--md-navy); margin-bottom: 8px; }
.md-form .md-required { color: var(--md-required); }
.md-form .md-optional { font-weight: 500; color: var(--md-caption); }
.md-form .form-control { min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--md-input-line); border-radius: 9px; font-size: 16px; color: var(--md-navy); }
.md-form textarea.form-control { padding: 12px 14px; resize: vertical; }
.md-form .form-control:focus { border-color: var(--md-blue); box-shadow: 0 0 0 3px rgba(0, 96, 254, .15); }
/* Leave margin/padding to .row > *: zeroing them here strips the g-4 gutter, so fieldsets sat 12px left of the inputs. */
.md-form fieldset { min-width: 0; border: 0; }
.md-form legend { float: none; width: auto; padding: 0; }
.md-pill { position: relative; display: inline-flex; }
.md-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.md-form .md-pill label {
    display: inline-flex; align-items: center; gap: 9px; min-height: 46px; margin: 0; padding: 0 18px;
    border: 1.5px solid var(--md-input-line); border-radius: 999px; font-size: 15px; font-weight: 500; cursor: pointer;
}
.md-form .md-pill label::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--md-line-strong); background: #FFFFFF; flex: none; }
.md-pill input:checked + label { border-color: var(--md-blue); color: var(--md-navy); }
.md-pill input:checked + label::before { border: 4px solid var(--md-blue); }
.md-pill input:focus-visible + label { outline: 2px solid var(--md-blue); outline-offset: 2px; }
.md-form .is-invalid .md-pill label { border-color: var(--md-required); }
.md-alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 10px; font-size: 14.5px; }
.md-alert-success { background: #E9F7EF; color: #15603A; }
.md-alert-error { background: #FDECEA; color: #8F2A22; }
.md-aside { background: var(--md-light); border-radius: 16px; padding: 34px 32px 36px; }
.md-aside h3 { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--md-muted); }
.md-aside p { margin: 0; font-size: 16px; color: var(--md-text); }

/* ---------- Footer ---------- */

.md-footer { background: var(--md-navy-deep); color: rgba(255, 255, 255, .72); }
.md-footer .md-wrap { padding-top: 56px; padding-bottom: 48px; }
.md-footer-title { margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.md-footer p { margin: 0; font-size: 15px; line-height: 1.8; }
.md-footer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.md-site .md-footer a { color: rgba(255, 255, 255, .82); }
.md-site .md-footer a:hover { color: #FFFFFF; }
.md-footer-brand { display: flex; align-items: center; gap: 12px; }
.md-footer-brand img { width: 80px; height: 80px; display: block; }
.md-footer-brand span { font-size: 20px; font-weight: 800; color: #FFFFFF; }
.md-footer-partner { margin: 28px 0 0; display: flex; align-items: center; }
.md-footer-partner img { height: 22px; width: auto; display: block; }
.md-footer-legal { margin-top: 52px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-direction: column; gap: 14px; }
.md-footer-legal p { font-size: 13px; line-height: 1.75; color: rgba(255, 255, 255, .56); }

/* ---------- Back to top ---------- */
/* The digip-solutions.com block (awdp/css/style-dp-20261027-2.css), shown and scrolled by awdp/js/style-dp.js: a round secondary
   button stacked on the tawk.to chat bubble and centred on it. tawk's desktop bubble is a 64x60 frame at right/bottom 20px
   (centre 52px from the right). On phones tawk's bubble is larger and placed differently, so the button is hidden there. */

#back-top { display: none; }
#back-top div {
    position: fixed; z-index: 100; bottom: 96px; right: 30px; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    font-size: 18px; color: var(--md-navy); background: var(--md-light); border: 1px solid var(--md-line-strong);
    box-shadow: 0 4px 14px rgba(11, 22, 63, .12); transition-duration: .3s;
}
#back-top:hover { cursor: pointer; }
#back-top:hover div { background: #FFFFFF; border-color: var(--md-navy); }
/* !important: style-dp.js fades it in with an inline display. */
@media (max-width: 767.98px) {
    #back-top { display: none !important; }
}

/* ---------- Phones ---------- */

/* Below 1200px the header collapses to the menu button (navbar-expand-xl). */
@media (max-width: 1199.98px) {
    .md-header .navbar { min-height: 76px; }
    .md-header .md-brand { padding: 10px 0; }
    .md-header .md-brand img { width: 56px; height: 56px; }
    .md-header .navbar-collapse { padding: 8px 0 20px; }
    .md-header .navbar-nav { gap: 0 !important; }
    .md-header .md-btn { width: 100%; min-height: 52px; }
}

@media (max-width: 767.98px) {
    .md-wrap { padding: 0 20px; }
    .md-section { padding-top: 44px; padding-bottom: 44px; }
    .md-section-top { padding-top: 44px; }
    .md-section-bottom { padding-bottom: 44px; }
    .md-hero { padding-top: 32px; }
    .md-h1, .md-h1-home { font-size: 34px; line-height: 1.2; }
    .md-h2 { font-size: 27px; line-height: 1.3; }
    .md-h2-sm, .md-service .md-h2 { font-size: 24px; }
    .md-lead { margin-top: 20px; font-size: 16px; }
    .md-eyebrow { font-size: 11px; margin-bottom: 14px; }
    .md-figure { margin-top: 32px; }
    .md-figure figcaption { font-size: 11.5px; }
    .md-hero .md-btn { width: 100%; }
    .md-trust { margin-top: 32px; }
    .md-trust ul { gap: 8px 16px; padding: 18px 0; font-size: 13px; }
    .md-box, .md-panel-dark { padding: 28px 24px; }
    .md-point { padding: 26px 22px 28px; }
    .md-service { padding: 28px 0; }
    .md-service-highlight { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
    .md-faq summary .md-h3 { font-size: 16.5px; }
    .md-faq details p { font-size: 15.5px; }
    .md-footer .md-wrap { padding-top: 48px; padding-bottom: 40px; }

    /* A row wider than the viewport must never make the whole page drag sideways. */
    html, body { overflow-x: hidden; }

    /* Board and diagram images scroll sideways at a readable width instead of shrinking to 350px; the hint says so. */
    figure.md-figure-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
    .md-site figure.md-figure-wide img { max-width: none; width: 900px; }
    figure.md-figure-wide figcaption { position: sticky; left: 0; }
    figure.md-figure-wide::before { content: "Scroll to view \2192"; position: sticky; left: 0; display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--md-caption); }
    html:lang(zh) figure.md-figure-wide::before { content: "\5DE6\53F3\6ED1\52A8\67E5\770B \2192"; }
    .md-dark figure.md-figure-wide::before { color: rgba(255, 255, 255, .6); }
}