/**
 * Qing Hero Split widget.
 *
 * Two-column hero: statement on the left, image with an overlapping stat
 * badge on the right. Ported from the static About page.
 *
 * Layout values that the Elementor controls drive are read from CSS custom
 * properties, declared here as the standalone defaults. The widget writes
 * the same properties inline on the wrapper, so a control that has not been
 * touched falls back to these rather than to nothing.
 */

.qing-heroSplit {
    /* ---- Defaults, overridden inline by the widget controls ---- */
    --qing-hs-gap: 70px;
    --qing-hs-cols: 1fr 1fr;
    --qing-hs-radius: 4px;
    --qing-hs-accent: #b3946f;
    --qing-hs-text: #2f2b28;
    --qing-hs-muted: #7a736c;

    width: 100%;
    font-family: var(--qing-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
}

/* ============================================================
 * Layout
 * ============================================================ */
.qing-heroSplit__inner {
    display: grid;
    grid-template-columns: var(--qing-hs-cols);
    gap: var(--qing-hs-gap);
    align-items: center;
}

/* Image first on the right-hand side. Explicit column indexes rather than
   direction:rtl, which would also flip the text alignment. */
.qing-heroSplit--mediaLeft .qing-heroSplit__media {
    grid-column: 1;
    grid-row: 1;
}

.qing-heroSplit--mediaLeft .qing-heroSplit__text {
    grid-column: 2;
    grid-row: 1;
}

/* ============================================================
 * Text column
 * ============================================================ */
.qing-heroSplit__text {
    min-width: 0;
}

/* Small caps label above the heading. The letter-spacing is what makes it
   read as editorial rather than as a generic label. */
.qing-heroSplit__eyebrow {
    margin: 0 0 18px;
    color: var(--qing-hs-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* clamp() keeps the display size proportional between phone and desktop
   without a stack of breakpoints. */
.qing-heroSplit__title {
    margin: 0 0 26px;
    font-family: var(--qing-font-heading, Georgia, "Songti SC", "SimSun", serif);
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--qing-hs-text);
}

/* The accent word. <em> is what the editor types, so style the element
   itself rather than requiring a wrapper class. */
.qing-heroSplit__title em,
.qing-heroSplit__title i {
    font-style: italic;
    color: var(--qing-hs-accent);
}

.qing-heroSplit__lede {
    margin: 0;
    max-width: 46ch;
    color: var(--qing-hs-muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ============================================================
 * Buttons
 * ============================================================ */
.qing-heroSplit__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

/* :empty guards against the margin showing when both buttons are off. */
.qing-heroSplit__actions:empty {
    display: none;
    margin-top: 0;
}

.qing-heroSplit__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 34px;
    border: 1px solid transparent;
    border-radius: var(--qing-hs-radius);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.qing-heroSplit__btn:hover,
.qing-heroSplit__btn:focus-visible {
    text-decoration: none;
}

.qing-heroSplit__btn--solid {
    background-color: var(--qing-hs-accent);
    color: #fff;
}

.qing-heroSplit__btn--ghost {
    border-color: #eae5df;
    background-color: transparent;
    color: var(--qing-hs-text);
}

/* ============================================================
 * Media column
 * ============================================================ */
.qing-heroSplit__media {
    position: relative;
    margin: 0;
    min-width: 0;
}

/* height comes from the responsive Height control; 540px is the fallback for
   when the widget is rendered before any control has been saved. */
.qing-heroSplit__media img {
    display: block;
    width: 100%;
    height: 540px;
    object-fit: cover;
    border-radius: var(--qing-hs-radius);
}

/* ============================================================
 * Stat badge
 *
 * Pulled outside the image on the left so the composition is not a plain
 * rectangle. Positioned with logical offsets set by the controls.
 * ============================================================ */
.qing-heroSplit__badge {
    position: absolute;
    bottom: 34px;
    left: -34px;
    padding: 22px 30px;
    background-color: #fff;
    border-radius: var(--qing-hs-radius);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.qing-heroSplit__badgeNum {
    display: block;
    font-family: var(--qing-font-heading, Georgia, "Songti SC", "SimSun", serif);
    font-size: 2rem;
    line-height: 1;
    color: var(--qing-hs-accent);
}

.qing-heroSplit__badgeLabel {
    display: block;
    margin-top: 6px;
    color: var(--qing-hs-muted);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 1024px) {

    .qing-heroSplit__inner {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    /* Image above the words once stacked. The markup keeps the text first so
       the reading order is correct for screen readers and with CSS off;
       `order` only changes the visual sequence. */
    .qing-heroSplit__media {
        order: -1;
    }

    /* Reset the desktop column swap: with one column those indexes would
       leave a gap where column 2 used to be. */
    .qing-heroSplit--mediaLeft .qing-heroSplit__media,
    .qing-heroSplit--mediaLeft .qing-heroSplit__text {
        grid-column: auto;
        grid-row: auto;
    }

    /* Height is set by the responsive Height control, which writes its own
       per-breakpoint rule. Overriding it here would beat that rule, because
       these media queries come later in the file. */

    /* The overlap only works when there is room beside the image. */
    .qing-heroSplit__badge {
        left: 24px;
        bottom: 24px;
    }
}

@media (max-width: 600px) {

    .qing-heroSplit__lede {
        max-width: none;
    }

    /* Full-width buttons stack more predictably than wrapped inline ones. */
    .qing-heroSplit__btn {
        width: 100%;
    }

    .qing-heroSplit__badge {
        left: 16px;
        right: 16px;
        bottom: 16px;
        padding: 18px 22px;
    }
}

/* Respect a reduced-motion preference: the only motion here is the hover
   colour transition, which is cheap but still a transition. */
@media (prefers-reduced-motion: reduce) {

    .qing-heroSplit__btn {
        transition-duration: 0.01ms;
    }
}

/* Enquiry popup */
.qing-heroSplit__dialog{width:min(560px,calc(100% - 30px));max-height:calc(100vh - 30px);padding:0;border:0;border-radius:4px;background:#fff;color:var(--qing-hs-text);box-shadow:0 24px 80px rgba(35,29,24,.24);overflow:auto}.qing-heroSplit__dialog::backdrop{background:rgba(25,22,20,.64);backdrop-filter:blur(3px)}.qing-heroSplit__dialogInner{position:relative;padding:46px}.qing-heroSplit__dialogClose{position:absolute;top:14px;right:16px;width:36px;height:36px;padding:0;border:0;background:transparent;color:#716a64;font-size:30px;line-height:1;cursor:pointer}.qing-heroSplit__dialogTitle{margin:0 40px 10px 0;font:400 34px/1.2 Georgia,"Songti SC",SimSun,serif}.qing-heroSplit__dialogIntro{margin:0 0 28px;color:var(--qing-hs-muted);line-height:1.65}.qing-heroSplit__form,.qing-heroSplit__form label{display:grid;gap:8px}.qing-heroSplit__form{gap:18px}.qing-heroSplit__formGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.qing-heroSplit__form label>span{font-size:13px;font-weight:600}.qing-heroSplit__form input,.qing-heroSplit__form textarea{width:100%;padding:12px 14px;border:1px solid #ddd5cc;border-radius:2px;background:#fff;color:#2f2b28;font:inherit;outline:0}.qing-heroSplit__form input:focus,.qing-heroSplit__form textarea:focus{border-color:var(--qing-hs-accent);box-shadow:0 0 0 2px rgba(179,148,111,.14)}.qing-heroSplit__form textarea{resize:vertical}.qing-heroSplit__formSubmit{justify-self:start;padding:14px 28px;border:1px solid var(--qing-hs-accent);border-radius:2px;background:var(--qing-hs-accent);color:#fff;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.qing-heroSplit__formSubmit:disabled{opacity:.6;cursor:wait}.qing-heroSplit__formFeedback{margin:0;font-size:14px}.qing-heroSplit__formFeedback:empty{display:none}.qing-heroSplit__formFeedback.is-success{color:#287a45}.qing-heroSplit__formFeedback.is-error{color:#b13b32}@media(max-width:600px){.qing-heroSplit__dialogInner{padding:38px 22px 26px}.qing-heroSplit__formGrid{grid-template-columns:1fr}}

/* Polished compact layout; specificity deliberately isolates theme-wide form rules. */
.qing-heroSplit .qing-heroSplit__dialog{width:min(620px,calc(100% - 32px));border-radius:10px;background:#fcfaf7;box-shadow:0 30px 90px rgba(31,25,20,.3)}
.qing-heroSplit .qing-heroSplit__dialogInner{padding:44px 48px 46px;border-top:4px solid var(--qing-hs-accent)}
.qing-heroSplit .qing-heroSplit__dialogClose{top:18px;right:20px;display:grid;place-items:center;width:34px;height:34px;margin:0;padding:0;border:1px solid #e5ded6;border-radius:50%;background:#fff;color:#746c65;font:400 24px/1 Arial,sans-serif;transition:border-color .2s,color .2s,transform .2s}
.qing-heroSplit .qing-heroSplit__dialogClose:hover,.qing-heroSplit .qing-heroSplit__dialogClose:focus-visible{border-color:var(--qing-hs-accent);color:var(--qing-hs-accent);transform:rotate(5deg);outline:0}
.qing-heroSplit .qing-heroSplit__dialogTitle{margin:0 48px 9px 0;color:#302b27;font-family:var(--qing-font-heading,Georgia,"Songti SC",SimSun,serif);font-size:38px;font-weight:400;line-height:1.15;letter-spacing:-.02em}
.qing-heroSplit .qing-heroSplit__dialogIntro{max-width:46ch;margin:0 0 28px;padding-bottom:24px;border-bottom:1px solid #e8e1da;color:#7a736c;font-size:15px;line-height:1.65}
.qing-heroSplit .qing-heroSplit__form{display:grid;gap:17px;margin:0}
.qing-heroSplit .qing-heroSplit__formGrid{gap:14px}
.qing-heroSplit .qing-heroSplit__form label{display:grid;gap:7px;margin:0;padding:0;color:#3d3732}
.qing-heroSplit .qing-heroSplit__form label>span{margin:0;color:#5f5852;font-size:13px;font-weight:500;line-height:1.35;letter-spacing:.01em}
.qing-heroSplit .qing-heroSplit__form input[type="text"],.qing-heroSplit .qing-heroSplit__form input[type="email"],.qing-heroSplit .qing-heroSplit__form input[type="tel"],.qing-heroSplit .qing-heroSplit__form textarea{display:block;width:100%;min-height:0;margin:0;padding:11px 13px;border:1px solid #dcd3ca;border-radius:5px;background:#fff;box-shadow:none;color:#302b27;font-family:var(--qing-font-body,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif);font-size:15px;font-weight:400;line-height:1.45;appearance:none}
.qing-heroSplit .qing-heroSplit__form input[type="text"],.qing-heroSplit .qing-heroSplit__form input[type="email"],.qing-heroSplit .qing-heroSplit__form input[type="tel"]{height:46px}
.qing-heroSplit .qing-heroSplit__form textarea{height:118px;min-height:118px;resize:vertical}
.qing-heroSplit .qing-heroSplit__form input:focus,.qing-heroSplit .qing-heroSplit__form textarea:focus{border-color:var(--qing-hs-accent);box-shadow:0 0 0 3px rgba(179,148,111,.13);outline:0}
.qing-heroSplit .qing-heroSplit__formSubmit{width:100%;min-height:48px;margin:3px 0 0;padding:12px 24px;border:1px solid var(--qing-hs-accent);border-radius:5px;background:var(--qing-hs-accent);box-shadow:none;color:#fff;font-family:var(--qing-font-body,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif);font-size:12px;font-weight:600;letter-spacing:.12em;text-align:center;text-transform:uppercase;transition:background .2s,border-color .2s,transform .2s}
.qing-heroSplit .qing-heroSplit__formSubmit:hover,.qing-heroSplit .qing-heroSplit__formSubmit:focus-visible{border-color:#96774f;background:#96774f;transform:translateY(-1px);outline:0}
.qing-heroSplit .qing-heroSplit__formFeedback{padding:0;text-align:center;line-height:1.5}
@media(max-width:600px){.qing-heroSplit .qing-heroSplit__dialog{width:calc(100% - 20px);max-height:calc(100vh - 20px)}.qing-heroSplit .qing-heroSplit__dialogInner{padding:34px 22px 26px}.qing-heroSplit .qing-heroSplit__dialogTitle{font-size:31px}.qing-heroSplit .qing-heroSplit__dialogIntro{margin-bottom:22px;padding-bottom:19px}.qing-heroSplit .qing-heroSplit__formGrid{grid-template-columns:1fr}.qing-heroSplit .qing-heroSplit__form textarea{height:105px;min-height:105px}}