/* Dialog compositions: blue, pearl and a clear editorial hierarchy. */
#modalOverlay {
    --dialog-surface:#fff; --dialog-wash:#f1f5fd; --dialog-rule:#e1e7f1;
    --dialog-blue:#3154ad; --dialog-ink:#23385d; --dialog-muted:#60708a;
}
#modalOverlay .dp-modal[data-modal] { border-radius:22px !important; border-color:#edf1f8 !important; }
#modalOverlay :is(#modalPage,#modalContact) { width:min(820px,100%) !important; }
#modalOverlay :is(#modalProducts,#modalPortfolio) { width:min(900px,calc(100vw - 48px)) !important; max-width:none!important; box-sizing:border-box!important; }
#modalOverlay .dp-modal__topbar { padding:12px 28px !important; border-bottom:1px solid var(--dialog-rule) !important; }
#modalOverlay .dp-modal__badge { font-size:12px !important; color:var(--dialog-muted) !important; }
#modalOverlay .dp-modal[data-modal] .dp-modal__close { border-radius:10px !important; background:#f7f9fc !important; border-color:var(--dialog-rule) !important; }
#modalOverlay .dp-modal[data-modal] .dp-modal__header { padding:24px 28px 20px !important; background:#fff !important; }
#modalOverlay .dp-modal__title { font-size:27px !important; line-height:1.65 !important; letter-spacing:0 !important; }
#modalOverlay .dp-modal__desc { margin:9px 0 0 !important; color:var(--dialog-muted) !important; font-size:14px !important; line-height:1.9 !important; }
#modalOverlay .dp-modal__editorial-kicker { margin:0 0 6px; color:var(--dialog-blue); font-size:12px; line-height:1.8; font-weight:500; }
#modalOverlay .dp-modal :is(.dp-modal__page-cta,.dp-modal__detail-cta,.dp-modal__you-cta,.dp-modal__footer-cta-btn) {
    min-height:44px !important; padding:10px 14px !important; font-size:13px !important;
    border-radius:8px !important; background:var(--dialog-blue) !important; box-shadow:none !important;
}
#modalOverlay .dp-modal :is(.dp-modal__page-cta,.dp-modal__detail-cta,.dp-modal__you-cta,.dp-modal__footer-cta-btn):hover { background:#274591 !important; }

/* Service and product detail: context beside the actual work, then one action. */
#modalOverlay #modalPage.dp-modal { border-radius:18px !important; }
#modalOverlay #modalPage.dp-modal--service-detail .dp-modal__header { display:block !important; border-bottom:0; }
#modalOverlay #modalPage .dp-modal__service-mark { display:none; }
#modalOverlay #modalPage.dp-modal--service-detail .dp-modal__title { font-size:27px !important; }
#modalOverlay #modalPage.dp-modal--service-detail .dp-modal__desc { margin:9px 0 0 !important; max-width:72ch; }
#modalOverlay #modalPage > .dp-modal__body--overview {
    display:grid !important; grid-template-columns:minmax(170px,.85fr) minmax(0,1.85fr);
    gap:0 26px; align-items:start; padding:0 28px 24px !important;
}
#modalOverlay #modalPage .dp-modal__fit {
    grid-column:1; grid-row:1 / 3; display:flex; flex-direction:column; align-items:flex-start;
    box-sizing:border-box; height:100%; gap:0; margin:0; padding:22px 20px;
    background:var(--dialog-wash); border:1px solid #e5ebf7; border-radius:0 0 16px 16px;
}
#modalOverlay #modalPage .dp-modal__fit-icon {
    display:grid; place-items:center; width:52px; height:52px; margin-bottom:20px;
    color:var(--dialog-blue); border:1px solid #dce5f5; background:#fff; border-radius:15px;
    box-shadow:0 4px 10px rgba(49,84,173,.04);
}
#modalOverlay #modalPage .dp-modal__fit-icon svg { width:27px; height:27px; }
#modalOverlay #modalPage .dp-modal__fit h3 { color:var(--dialog-ink); font-size:13px; line-height:1.8; margin:0 0 9px; font-weight:650; }
#modalOverlay #modalPage .dp-modal__fit p { color:var(--dialog-muted); font-size:13px; line-height:1.95; margin:0; }
#modalOverlay #modalPage .dp-modal__scope-title {
    grid-column:2; grid-row:1; font-size:12px; line-height:1.8; color:var(--dialog-muted);
    margin:0; padding:14px 0 6px; font-weight:500;
}
#modalOverlay #modalPage .dp-modal__deliverables {
    grid-column:2; grid-row:2; display:grid; grid-template-columns:minmax(0,1fr); gap:0;
    padding:0; margin:0; border:0; border-radius:0; background:none;
}
#modalOverlay #modalPage .dp-modal__deliverables li {
    display:grid; grid-template-columns:34px minmax(0,1fr) 16px; gap:12px;
    align-items:start; padding:15px 0; margin:0;
    background:transparent !important; border:0; border-bottom:1px solid var(--dialog-rule); border-radius:0;
}
#modalOverlay #modalPage .dp-modal__deliverables li:last-child { border-bottom:0; padding-bottom:0; }
#modalOverlay #modalPage .dp-modal__deliverable-head { display:contents; }
#modalOverlay #modalPage .dp-modal__deliverable-icon { grid-column:1; grid-row:1; width:34px; height:34px; border-radius:10px; }
#modalOverlay #modalPage .dp-modal__deliverable-number { grid-column:3; grid-row:1; padding-top:3px; font-size:12px; color:#8595af; }
#modalOverlay #modalPage .dp-modal__deliverable-copy { grid-column:2; grid-row:1; }
#modalOverlay #modalPage .dp-modal__deliverable-title { margin:0 0 4px; font-size:14px; line-height:1.7; font-weight:650; }
#modalOverlay #modalPage .dp-modal__deliverable-copy p { font-size:13px; line-height:1.85; color:var(--dialog-muted); }
#modalOverlay #modalPage .dp-modal__next-step {
    grid-column:1/-1; grid-row:3; flex-direction:row; align-items:center; gap:18px;
    margin:24px 0 0; padding:18px 0 0; border:0; border-top:1px solid var(--dialog-rule);
    border-radius:0; background:none;
}
#modalOverlay #modalPage .dp-modal__next-title { font-size:14px; line-height:1.8; margin:0 0 3px; }
#modalOverlay #modalPage .dp-modal__next-desc { font-size:12px; line-height:1.85; color:var(--dialog-muted); }
#modalOverlay #modalPage .dp-modal__next-step .dp-modal__page-cta { width:fit-content !important; flex:none; align-self:center; max-width:100%; }

/* Contact is a compact conversation desk with clear direct channels. */
#modalOverlay #modalContact > .dp-modal__header--contact { display:flex !important; flex-direction:column; align-items:flex-start; gap:0; }
#modalOverlay #modalContact .dp-modal__header-mark { display:none; }
#modalOverlay #modalContact .dp-modal__title { margin:0 !important; font-size:27px !important; }
#modalOverlay #modalContact .dp-modal__desc { margin:8px 0 0 !important; }
#modalOverlay #modalContact .dp-modal__response-note { order:-1; margin:0 0 7px !important; font-size:12px !important; color:var(--dialog-blue) !important; }
#modalOverlay #modalContact > .dp-modal__body {
    display:grid !important; grid-template-columns:minmax(180px,.9fr) minmax(0,1.5fr);
    gap:0 22px; align-items:start; padding:0 28px 24px !important;
}
#modalOverlay #modalContact .contact-intro {
    grid-column:1; grid-row:1 / 3; align-self:stretch; min-width:0;
    border:1px solid #e5ebf7; border-radius:16px; padding:18px;
    text-align:start; background:var(--dialog-wash);
}
#modalOverlay #modalContact .contact-intro img { display:block; width:116px; height:auto; margin:0 0 12px; }
#modalOverlay #modalContact .contact-intro__eyebrow { color:var(--dialog-blue); font-size:11px; line-height:1.8; }
#modalOverlay #modalContact .contact-intro h3 { margin:6px 0 8px; color:var(--dialog-ink); font-size:16px; line-height:1.8; font-weight:650; }
#modalOverlay #modalContact .contact-intro p { margin:0; color:var(--dialog-muted); font-size:13px; line-height:1.95; }
#modalOverlay #modalContact .contact-direct-grid {
    grid-column:2; grid-row:1; display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:8px !important;
}
#modalOverlay #modalContact .contact-direct-card {
    grid-column:auto !important; display:flex !important; flex-direction:row !important; justify-content:flex-start !important;
    align-items:center !important; gap:12px !important; min-height:64px !important; padding:12px 14px !important;
    border-radius:11px !important; border:1px solid var(--dialog-rule) !important;
    background:#fff !important; text-align:start !important; transition:background .18s,border-color .18s !important;
}
#modalOverlay #modalContact .contact-direct-card__content { align-items:flex-start !important; gap:2px !important; }
#modalOverlay #modalContact .contact-direct-card__icon { width:36px !important; height:36px !important; flex:0 0 36px !important; border-radius:10px !important; background:#f1f5fc !important; border:0 !important; color:var(--dialog-blue) !important; }
#modalOverlay #modalContact .contact-direct-card__icon svg { width:20px !important; height:20px !important; }
#modalOverlay #modalContact .contact-direct-card .dp-modal__quick-label { font-size:13px !important; line-height:1.8 !important; font-weight:600 !important; }
#modalOverlay #modalContact .contact-direct-card .dp-modal__quick-val { font-size:11px !important; line-height:1.7 !important; color:var(--dialog-muted) !important; }
#modalOverlay #modalContact .contact-direct-card__arrow { display:block !important; position:static !important; margin-inline-start:auto !important; width:17px !important; height:17px !important; flex:none; color:#7b8eaf !important; }
html[dir=rtl] #modalOverlay #modalContact .contact-direct-card__arrow { transform:rotate(180deg) !important; }
#modalOverlay #modalContact .contact-direct-card--phone {
    min-height:86px !important; padding:16px !important; margin-bottom:4px;
    background:var(--dialog-blue) !important; border-color:var(--dialog-blue) !important; box-shadow:none !important;
}
#modalOverlay #modalContact .contact-direct-card--phone .contact-direct-card__icon { background:rgba(255,255,255,.12) !important; color:#fff !important; }
#modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-label { color:#e3eaff !important; font-size:11px !important; font-weight:400 !important; }
#modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-val { color:#fff !important; font-size:22px !important; line-height:1.7 !important; letter-spacing:.025em !important; }
#modalOverlay #modalContact .contact-direct-card--phone .contact-direct-card__arrow { color:#d5e1ff !important; }
#modalOverlay #modalContact .contact-prepare { grid-column:2; grid-row:2; margin:8px 0 0; border:0; }
#modalOverlay #modalContact .contact-prepare summary { font-size:11px; color:var(--dialog-blue); padding:8px 0; }
#modalOverlay #modalContact .contact-prepare p { font-size:12px; margin-bottom:0; }
#modalOverlay #modalContact .dp-modal__trust-row {
    grid-column:1/-1; grid-row:3; margin:18px 0 0 !important; padding:14px 0 0 !important;
    border-top:1px solid var(--dialog-rule) !important; gap:10px 18px !important;
}
@media(hover:hover) {
    #modalOverlay #modalContact .contact-direct-card:hover { background:#f4f7fe !important; border-color:#b7c9ea !important; transform:none !important; }
    #modalOverlay #modalContact .contact-direct-card--phone:hover { background:#274591 !important; border-color:#274591 !important; }
}

/* Product and project collections use the same quieter surfaces. */
#modalOverlay #modalProducts .dp-modal__product-card {
    min-height:160px !important; padding:20px !important; gap:14px !important;
    grid-template-columns:42px minmax(0,1fr) !important; background:#fff !important; border-radius:14px !important;
}
#modalOverlay #modalProducts .dp-modal__product-icon { width:42px !important; height:42px !important; border-radius:12px !important; background:#f1f5fd !important; border-color:#e0e8f7 !important; color:var(--dialog-blue) !important; }
#modalOverlay #modalProducts .dp-modal__product-icon svg { width:23px !important; height:23px !important; }
#modalOverlay #modalProducts .dp-modal__product-title { margin:5px 0 7px !important; font-size:19px !important; }
#modalOverlay #modalProducts .dp-modal__product-tag { color:#7987a0 !important; font-size:11px !important; }
#modalOverlay #modalProducts .dp-modal__product-desc { font-size:13px !important; }
#modalOverlay #modalProducts .dp-modal__product-card::after { border:0 !important; background:#f4f7fd !important; border-radius:8px !important; width:28px !important; height:28px !important; font-size:18px !important; }
#modalOverlay #modalProducts .dp-modal__footer-cta { padding:16px 18px !important; background:var(--dialog-wash) !important; font-size:13px !important; }
#modalOverlay .dp-modal__detail-hero { background:var(--dialog-wash) !important; border-color:var(--dialog-rule) !important; border-radius:14px !important; }
#modalOverlay .dp-modal__detail-label { color:var(--dialog-blue); }

@media(max-width:600px) {
    #modalOverlay .dp-modal__topbar { padding:10px 18px !important; }
    #modalOverlay .dp-modal[data-modal] .dp-modal__header { padding:19px 20px 18px !important; }
    #modalOverlay .dp-modal__title,
    #modalOverlay #modalPage.dp-modal--service-detail .dp-modal__title,
    #modalOverlay #modalContact .dp-modal__title { font-size:22px !important; line-height:1.65 !important; }
    #modalOverlay .dp-modal__desc { font-size:13px !important; line-height:1.9 !important; }
    #modalOverlay #modalPage > .dp-modal__body--overview { display:block !important; padding:0 20px 22px !important; }
    #modalOverlay #modalPage .dp-modal__fit { display:grid; grid-template-columns:40px minmax(0,1fr); gap:5px 12px; padding:16px; height:auto; margin:0 0 22px; border-radius:0 0 12px 12px; }
    #modalOverlay #modalPage .dp-modal__fit-icon { grid-column:1; grid-row:1/3; width:40px; height:40px; margin:0; border-radius:11px; }
    #modalOverlay #modalPage .dp-modal__fit-icon svg { width:23px; height:23px; }
    #modalOverlay #modalPage .dp-modal__fit h3 { grid-column:2; margin:0; font-size:12px; }
    #modalOverlay #modalPage .dp-modal__fit p { grid-column:2; font-size:12px; line-height:1.9; }
    #modalOverlay #modalPage .dp-modal__scope-title { font-size:12px; margin:0; padding-top:10px; }
    #modalOverlay #modalPage .dp-modal__deliverables li { grid-template-columns:30px minmax(0,1fr) 12px; gap:10px; padding:14px 0; }
    #modalOverlay #modalPage .dp-modal__deliverable-icon { width:30px; height:30px; border-radius:9px; }
    #modalOverlay #modalPage .dp-modal__deliverable-icon svg { width:18px; height:18px; }
    #modalOverlay #modalPage .dp-modal__deliverable-title { font-size:14px; }
    #modalOverlay #modalPage .dp-modal__next-step { flex-direction:column; align-items:flex-start; margin-top:22px; padding-top:16px; gap:14px; }
    #modalOverlay #modalPage .dp-modal__next-step .dp-modal__page-cta { align-self:flex-start; }
    #modalOverlay #modalContact > .dp-modal__body { display:block !important; padding:0 20px 20px !important; }
    #modalOverlay #modalContact .contact-intro { display:grid; grid-template-columns:minmax(0,1fr) 76px; gap:3px 8px; padding:15px; margin:0 0 16px; border-radius:12px; }
    #modalOverlay #modalContact .contact-intro img { grid-column:2; grid-row:1/4; align-self:center; width:86px; max-width:none; margin:0; }
    #modalOverlay #modalContact .contact-intro__eyebrow { grid-column:1; font-size:10px; }
    #modalOverlay #modalContact .contact-intro h3 { grid-column:1; font-size:14px; line-height:1.7; margin:0; }
    #modalOverlay #modalContact .contact-intro p { grid-column:1; font-size:12px; line-height:1.85; }
    #modalOverlay #modalContact .contact-direct-card { min-height:64px !important; }
    #modalOverlay #modalContact .contact-direct-card--phone { min-height:86px !important; }
    #modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-val { font-size:20px !important; }
    #modalOverlay #modalContact .contact-prepare { margin-top:8px; }
    #modalOverlay #modalProducts .dp-modal__product-card { min-height:0 !important; padding:17px !important; gap:12px !important; }
}
@media(prefers-reduced-motion:reduce) {
    #modalOverlay .contact-direct-card { transition:none !important; }
}

/* Include padding in touch-target sizes and remove legacy narrow dialog caps. */
#modalOverlay :is(#modalPage,#modalContact) { max-width:none !important; box-sizing:border-box !important; }
#modalOverlay #modalContact .contact-direct-card { box-sizing:border-box !important; }
#modalOverlay #modalContact .dp-modal__title { max-width:none !important; }

/* Preserve the overlay gutter at every viewport size. */
#modalOverlay #modalPage.dp-modal,
#modalOverlay #modalContact.dp-modal { width:min(820px,calc(100vw - 48px)) !important; max-width:none !important; }
#modalOverlay #modalContact > .dp-modal__header--contact { padding:18px 28px 16px !important; }
#modalOverlay #modalContact .dp-modal__title { font-size:25px !important; line-height:1.55 !important; }
#modalOverlay #modalContact .dp-modal__desc { max-width:none !important; font-size:13px !important; line-height:1.85 !important; margin-top:6px !important; }
#modalOverlay #modalContact .dp-modal__response-note { line-height:1.7 !important; margin-bottom:4px !important; }
#modalOverlay #modalContact .contact-direct-card--phone { padding:12px 14px !important; }
#modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-val { font-size:21px !important; line-height:1.45 !important; }
#modalOverlay #modalContact .dp-modal__trust-row { margin-top:12px !important; padding-top:12px !important; }
@media(max-width:600px) {
    #modalOverlay #modalPage.dp-modal,
    #modalOverlay #modalContact.dp-modal { width:calc(100vw - 24px) !important; }
    #modalOverlay #modalContact > .dp-modal__header--contact { padding:18px 20px 16px !important; }
    #modalOverlay #modalContact .dp-modal__title { font-size:22px !important; }
    #modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-val { font-size:20px !important; }
}

/* Optional scope details: one quiet disclosure keeps the main decision readable. */
#modalOverlay #modalPage .dp-modal__brief {
    grid-column:1/-1; grid-row:3; min-width:0; margin:20px 0 0;
    border:1px solid var(--dialog-rule); border-radius:12px; background:#f8faff;
}
#modalOverlay #modalPage .dp-modal__brief summary {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    min-height:44px; box-sizing:border-box; padding:12px 16px;
    color:var(--dialog-blue); font-size:13px; font-weight:600; line-height:1.8;
    list-style:none; cursor:pointer; border-radius:inherit;
}
#modalOverlay #modalPage .dp-modal__brief summary::-webkit-details-marker { display:none; }
#modalOverlay #modalPage .dp-modal__brief summary::after {
    content:''; flex:none; width:7px; height:7px; border-inline-end:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin:0 4px 4px;
}
html[dir=rtl] #modalOverlay #modalPage .dp-modal__brief summary::after { transform:rotate(-45deg); }
#modalOverlay #modalPage .dp-modal__brief[open] summary::after { transform:rotate(225deg); margin-bottom:-3px; }
html[dir=rtl] #modalOverlay #modalPage .dp-modal__brief[open] summary::after { transform:rotate(135deg); }
#modalOverlay #modalPage .dp-modal__brief summary:focus-visible { outline:3px solid #7999e3; outline-offset:3px; }
#modalOverlay #modalPage .dp-modal__brief dl {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;
    padding:16px; margin:0; border-top:1px solid var(--dialog-rule);
}
#modalOverlay #modalPage .dp-modal__brief dl > div { min-width:0; }
#modalOverlay #modalPage .dp-modal__brief dt { margin:0 0 6px; color:var(--dialog-ink); font-size:12px; line-height:1.8; font-weight:650; }
#modalOverlay #modalPage .dp-modal__brief dd { margin:0; color:#51627d; font-size:13px; line-height:1.95; overflow-wrap:anywhere; }
#modalOverlay #modalPage .dp-modal__body--brief .dp-modal__next-step { grid-row:4; margin-top:16px; }
#modalOverlay #modalContact .contact-intro .contact-topic {
    grid-column:1/-1; padding:10px 0 0; margin:14px 0 0; border-top:1px solid #d8e2f4;
    color:var(--dialog-blue); font-size:12px; line-height:1.9;
}
#modalOverlay #modalContact .contact-topic span { display:block; color:var(--dialog-muted); font-size:11px; }
#modalOverlay #modalContact .contact-topic strong { display:block; font-weight:600; }
#modalOverlay #modalContact .contact-topic[hidden] { display:none !important; }
@media(hover:hover) {
    #modalOverlay #modalPage .dp-modal__brief summary:hover { background:#edf3fd; }
}
@media(max-width:600px) {
    #modalOverlay #modalPage .dp-modal__brief { margin-top:18px; }
    #modalOverlay #modalPage .dp-modal__brief summary { padding:12px; font-size:12px; }
    #modalOverlay #modalPage .dp-modal__brief dl { grid-template-columns:minmax(0,1fr); gap:14px; padding:14px 12px; }
    #modalOverlay #modalPage .dp-modal__brief dd { font-size:12px; }
    #modalOverlay #modalContact .contact-intro .contact-topic { margin-top:8px; padding-top:8px; }
}

/* Reserve the narrow phone card for its full, selectable contact number. */
@media(max-width:380px) {
    #modalOverlay #modalContact .contact-direct-card--phone { gap:10px !important; }
    #modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-val { font-size:17px !important; letter-spacing:0 !important; }
    #modalOverlay #modalContact .contact-direct-card--phone .contact-direct-card__arrow { display:none !important; }
}

/* 2026 catalog polish: generous entry rhythm, clear actions and quiet medical editorial cards. */
#modalOverlay #modalPortfolio .dp-modal__body,#modalOverlay #modalBlog .dp-modal__body,#modalOverlay #modalProducts .dp-modal__body{padding-top:24px!important}
#modalOverlay #modalPortfolio .portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#modalOverlay #modalPortfolio .portfolio-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid #dbe3f1;border-radius:20px;background:linear-gradient(160deg,#fff,#fbfcff);box-shadow:0 12px 30px rgba(35,56,93,.055);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
#modalOverlay #modalPortfolio .portfolio-card:hover{transform:translateY(-4px);border-color:#b8c9e8;box-shadow:0 18px 36px rgba(35,56,93,.11)}
#modalOverlay #modalPortfolio .portfolio-card:focus-within{outline:3px solid rgba(67,97,178,.24);outline-offset:3px}
#modalOverlay #modalPortfolio .portfolio-card__visual{position:relative;display:grid;height:172px;min-height:0;box-sizing:border-box;place-items:center;overflow:hidden;padding:15px 18px 8px;border-bottom:1px solid #e1e8f4;background:radial-gradient(circle at 12% 12%,rgba(75,113,193,.11),transparent 42%),linear-gradient(150deg,#f2f6ff,#e9f0fc)}
#modalOverlay #modalPortfolio .portfolio-card__visual:after{content:"";position:absolute;inset:auto 14% 9px;height:12px;border-radius:50%;background:rgba(46,76,139,.12);filter:blur(8px)}
#modalOverlay #modalPortfolio .portfolio-card__visual svg{position:relative;z-index:1;display:block;width:100%;height:100%;max-height:147px;filter:drop-shadow(0 9px 12px rgba(27,57,113,.08))}
#modalOverlay #modalPortfolio .portfolio-card__number{position:absolute;z-index:2;inset-block-start:17px;inset-inline-end:19px;color:#7890bd;font:600 16px/1 var(--dp-font-en),sans-serif;letter-spacing:.06em}
#modalOverlay #modalPortfolio .portfolio-card__content{display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start;padding:21px 22px 20px}
#modalOverlay #modalPortfolio .portfolio-tag{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border:1px solid #d8e2f3;border-radius:999px;color:#34549a;background:#f0f4fc;font-size:11px;line-height:1.6}
#modalOverlay #modalPortfolio .portfolio-card h3{margin:12px 0 7px;color:#213861;font-size:19px;line-height:1.65}
#modalOverlay #modalPortfolio .portfolio-card p{margin:0;color:#657795;font-size:13px;line-height:1.9}
#modalOverlay #modalPortfolio .portfolio-card__result{display:flex;align-items:flex-start;gap:8px;width:100%;margin:16px 0 18px;padding-top:13px;border-top:1px solid #e5eaf3;color:#536b9a;font-size:12px;line-height:1.8}
#modalOverlay #modalPortfolio .portfolio-card__result svg{flex:none;width:18px;height:18px;margin-top:2px;color:#4264b4}
#modalOverlay .catalog-action{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:9px;padding:9px 13px;border:1px solid #cbd7ed;border-radius:10px;color:#3154ad;background:#fff;font-family:inherit;font-size:13px;font-weight:600;line-height:1.6;box-sizing:border-box;text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
#modalOverlay .catalog-action:hover{border-color:#3154ad;color:#fff;background:#3154ad}
#modalOverlay .catalog-action:focus-visible{outline:3px solid rgba(67,97,178,.27);outline-offset:3px}
#modalOverlay .catalog-action--primary{border-color:#3154ad;color:#fff;background:#3154ad}
#modalOverlay .catalog-action--primary:hover{background:#274591;border-color:#274591}
#modalOverlay .catalog-arrow{flex:none}html[dir=rtl] #modalOverlay .catalog-arrow{transform:scaleX(-1)}
#modalOverlay #modalPortfolio .portfolio-card__open{margin-top:auto}
#modalOverlay #modalPortfolio .portfolio-invite{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;margin-top:20px;padding:17px 19px;border:1px solid #d7e2f3;border-radius:18px;background:linear-gradient(110deg,#f4f7fe,#fff)}
#modalOverlay #modalPortfolio .portfolio-invite__icon,#modalOverlay #modalPortfolio .portfolio-case__icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #cbd9f0;border-radius:13px;color:#3154ad;background:#eaf0fc}
#modalOverlay #modalPortfolio .portfolio-invite h3{margin:0 0 3px;color:#253c68;font-size:15px;line-height:1.7}
#modalOverlay #modalPortfolio .portfolio-invite p{margin:0;color:#6a7894;font-size:12px;line-height:1.8}
#modalOverlay #modalPortfolio .portfolio-case{animation:modalDetailIn .28s cubic-bezier(.19,1,.22,1) both}
#modalOverlay #modalPortfolio .portfolio-case__nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}
#modalOverlay #modalPortfolio .portfolio-case__back{min-height:44px}
#modalOverlay #modalPortfolio .portfolio-case__hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(260px,1.08fr);gap:24px;align-items:center;padding:22px;border:1px solid #d9e3f2;border-radius:20px;background:linear-gradient(135deg,#f5f8ff,#edf3fd)}
#modalOverlay #modalPortfolio .portfolio-case__eyebrow{display:block;margin-bottom:8px;color:#4b67a7;font-size:11px;line-height:1.7}
#modalOverlay #modalPortfolio .portfolio-case__hero h3{margin:0 0 8px;color:#20365e;font-size:26px;line-height:1.6}
#modalOverlay #modalPortfolio .portfolio-case__hero p{margin:0;color:#5e708e;font-size:14px;line-height:1.95}
#modalOverlay #modalPortfolio .portfolio-case__visual{margin:0;padding:11px 11px 8px;border:1px solid rgba(185,202,232,.8);border-radius:15px;background:rgba(255,255,255,.72)}
#modalOverlay #modalPortfolio .portfolio-case__visual svg{display:block;width:100%;height:auto}
#modalOverlay #modalPortfolio .portfolio-case__visual figcaption{margin:4px 2px 0;color:#63758f;font-size:11px;line-height:1.7}
#modalOverlay #modalPortfolio .portfolio-case__approach{margin-top:18px;padding:18px 20px;border-inline-start:3px solid #5c78bd;border-radius:14px;background:#f6f8fd}
#modalOverlay #modalPortfolio .portfolio-case__approach h4,#modalOverlay #modalPortfolio .portfolio-case__facts h4{margin:0 0 7px;color:#2f4d91;font-size:12px;line-height:1.7}
#modalOverlay #modalPortfolio .portfolio-case__approach p,#modalOverlay #modalPortfolio .portfolio-case__facts p{margin:0;color:#536985;font-size:13px;line-height:1.95}
#modalOverlay #modalPortfolio .portfolio-case__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:15px}
#modalOverlay #modalPortfolio .portfolio-case__facts>div{padding:16px;border:1px solid #dbe4f2;border-radius:15px;background:#fff}
#modalOverlay #modalPortfolio .portfolio-case__icon{width:34px;height:34px;margin-bottom:10px;border-radius:10px}
#modalOverlay #modalPortfolio .portfolio-case__footer{display:flex;justify-content:flex-end;margin-top:17px}
#modalOverlay #modalBlog .dp-modal__body,#modalOverlay #modalProducts .dp-modal__body{padding-top:30px!important}
#modalOverlay #modalBlog .dp-modal__blog-list{display:grid;gap:13px}
#modalOverlay #modalBlog .dp-modal__blog-item{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:start;gap:12px 16px;min-height:0;padding:19px 20px;border:1px solid #dce4f1!important;border-radius:17px!important;background:linear-gradient(120deg,#fff,#f8faff)!important;box-shadow:0 8px 24px rgba(35,56,93,.04)!important;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
#modalOverlay #modalBlog .dp-modal__blog-item:hover{transform:translateY(-2px);border-color:#b9c9e8!important;box-shadow:0 13px 28px rgba(35,56,93,.08)!important}
#modalOverlay #modalBlog .dp-modal__blog-num{display:grid;place-items:center;width:40px;height:40px;border:1px solid #cbd9ef;border-radius:13px;color:#4161ad;background:#edf3fd}
#modalOverlay #modalBlog .dp-modal__blog-num svg{width:20px;height:20px}
#modalOverlay #modalBlog .dp-modal__blog-content{min-width:0}
#modalOverlay #modalBlog .dp-modal__blog-meta{margin-bottom:6px}
#modalOverlay #modalBlog .dp-modal__blog-title{margin:0 0 5px}
#modalOverlay #modalBlog .dp-modal__blog-aside{grid-column:2;display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;padding-top:12px;border-top:1px solid #e6ebf4;color:#63758f;font-size:11px}
#modalOverlay #modalBlog .catalog-link-label{display:inline-flex;align-items:center;gap:7px;margin-inline-start:auto;color:#3154ad;font-size:11px}
#modalOverlay #modalBlog .catalog-link-label .catalog-arrow{width:15px;height:15px}
#modalOverlay #modalProducts .dp-modal__product-card{min-height:194px!important;padding:22px!important;background:linear-gradient(140deg,#fff,#f8faff)!important}
#modalOverlay #modalProducts .dp-modal__product-card .catalog-link-label{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;align-self:end;margin:4px 0 0;padding-top:13px;border-top:1px solid #e1e7f2;color:#3154ad;font-size:12px;font-weight:500}
#modalOverlay #modalProducts .dp-modal__product-card .catalog-arrow{width:15px;height:15px}
@media(max-width:700px){
#modalOverlay #modalPortfolio .portfolio-grid,#modalOverlay #modalPortfolio .portfolio-case__facts{grid-template-columns:minmax(0,1fr)}
#modalOverlay #modalPortfolio .portfolio-card__visual{height:170px}
#modalOverlay #modalPortfolio .portfolio-invite{grid-template-columns:auto minmax(0,1fr)}
#modalOverlay #modalPortfolio .portfolio-invite .catalog-action{grid-column:1/-1;justify-self:stretch}
#modalOverlay #modalPortfolio .portfolio-case__hero{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px}
#modalOverlay #modalPortfolio .portfolio-case__hero h3{font-size:22px}
#modalOverlay #modalBlog .dp-modal__blog-item{grid-template-columns:38px minmax(0,1fr);align-items:start;padding:16px}
#modalOverlay #modalBlog .dp-modal__blog-num{width:34px;height:34px;border-radius:10px}
#modalOverlay #modalBlog .dp-modal__blog-aside{grid-column:2;justify-content:space-between;margin-top:7px}
#modalOverlay #modalProducts .dp-modal__product-card{min-height:0!important;padding:19px!important}
}
@media(prefers-reduced-motion:reduce){#modalOverlay #modalPortfolio .portfolio-card,#modalOverlay #modalBlog .dp-modal__blog-item,#modalOverlay .catalog-action{transition:none}}

#modalOverlay #modalProducts .dp-modal__product-card::after { display:none!important; }
#modalOverlay #modalProducts .dp-modal__product-desc { padding-inline-end:0!important; }
#modalOverlay #modalProducts .dp-modal__product-card { grid-template-columns:42px minmax(0,1fr)!important; }
#modalOverlay #modalBlog .dp-modal__blog-desc { margin:0; }
#modalOverlay #modalBlog .dp-modal__blog-meta { flex-wrap:wrap; row-gap:6px; }
#modalOverlay #modalBlog .dp-modal__blog-item:focus-visible { outline:3px solid #9fb7e5; outline-offset:3px; }
#modalOverlay #modalPortfolio .portfolio-case__back .catalog-arrow { transform:rotate(180deg); }
html[dir=rtl] #modalOverlay #modalPortfolio .portfolio-case__back .catalog-arrow { transform:none; }
@media (hover:none) {
    #modalOverlay #modalPortfolio .portfolio-card:hover { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
    #modalOverlay #modalPortfolio .portfolio-case { animation:none; }
    #modalOverlay #modalPortfolio .portfolio-card:hover { transform:none; }
}

/* Keep the list header compact while preserving a clear inset above the cards. */
#modalOverlay #modalBlog .dp-modal__blog-list .dp-modal__blog-dot { display:none; }
@media(max-width:600px) {
    #modalOverlay :is(#modalProducts,#modalPortfolio) { width:calc(100vw - 24px)!important; }
}

#modalOverlay #modalPortfolio .dp-modal__desc { max-width:none!important; }
#modalOverlay #modalBlog .dp-modal__detail-content {
    padding:24px!important; text-align:start; border:1px solid #dce4f1;
    background:linear-gradient(145deg,#f8faff,#fff)!important;
}
#modalOverlay #modalBlog .dp-modal__detail-kicker {
    display:inline-flex; width:auto; margin:16px 0 0; padding:0;
    border:0; background:none!important; color:#60708a!important; font-size:11px;
}
#modalOverlay #modalBlog .dp-modal__detail-title { font-size:24px; line-height:1.75; margin:10px 0; }
#modalOverlay #modalBlog .dp-modal__detail-text { padding-top:18px; margin:18px 0; border-top:1px solid #e1e7f1; }
@media(max-width:600px) {
    #modalOverlay #modalBlog .dp-modal__detail-content { padding:18px!important; }
    #modalOverlay #modalBlog .dp-modal__detail-title { font-size:20px; }
}

/* ==========================================================================
   MODERN DIALOG EXPERIENCE
   A calm clinical surface with sharper hierarchy, safer touch targets and
   a compact bottom-sheet rhythm on phones.
   ========================================================================== */
#modalOverlay.dp-modal-overlay {
    --modal-ink: #13294b;
    --modal-ink-strong: #0c2245;
    --modal-muted: #657794;
    --modal-soft: #f3f7fd;
    --modal-soft-strong: #e8f0fc;
    --modal-line: #dbe5f3;
    --modal-line-strong: #c6d5eb;
    --modal-primary: #2e58b8;
    --modal-primary-dark: #214493;
    --modal-cyan: #16a6b4;
    --modal-shadow: 0 32px 90px rgba(8, 28, 66, .22);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
    background:
        radial-gradient(circle at 50% 8%, rgba(62, 131, 217, .2), transparent 38%),
        radial-gradient(circle at 8% 96%, rgba(22, 166, 180, .16), transparent 32%),
        linear-gradient(135deg, rgba(13, 35, 65, .78), rgba(17, 32, 66, .9)) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
    transition: opacity .28s ease, visibility .28s ease !important;
}
#modalOverlay.dp-modal-overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: .22 !important;
    background-image: radial-gradient(rgba(255,255,255,.26) .65px, transparent .65px) !important;
    background-size: 18px 18px !important;
    mask-image: linear-gradient(to bottom, black, transparent 84%) !important;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 84%) !important;
}
#modalOverlay .dp-modal[data-modal] {
    position: relative !important;
    isolation: isolate !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: min(860px, calc(100vw - 40px)) !important;
    max-width: 100% !important;
    max-height: min(880px, calc(100dvh - 40px)) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.8) !important;
    border-radius: 28px !important;
    color: var(--modal-ink) !important;
    background:
        radial-gradient(circle at 94% -8%, rgba(95, 149, 224, .12), transparent 34%),
        linear-gradient(180deg, #fbfdff 0%, #f6f9fd 100%) !important;
    box-shadow:
        0 0 0 1px rgba(53, 97, 169, .08),
        var(--modal-shadow),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
    transform: translateY(14px) scale(.975) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .24s ease, visibility .24s ease !important;
}
#modalOverlay .dp-modal[data-modal]::before,
#modalOverlay .dp-modal[data-modal]::after {
    content: none !important;
}
#modalOverlay .dp-modal[data-modal].dp-modal--active {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
#modalOverlay :is(#modalProducts, #modalPortfolio) {
    width: min(980px, calc(100vw - 40px)) !important;
}
#modalOverlay :is(#modalPage, #modalContact) {
    width: min(900px, calc(100vw - 40px)) !important;
}
#modalOverlay .dp-modal__topbar {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 auto !important;
    min-height: 66px !important;
    box-sizing: border-box !important;
    padding: 12px 24px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(211, 224, 241, .8) !important;
    border-radius: 28px 28px 0 0 !important;
    background: rgba(255,255,255,.78) !important;
    box-shadow: 0 8px 22px rgba(25, 67, 125, .04) !important;
}
#modalOverlay .dp-modal__topbar::before {
    content: "" !important;
    position: absolute !important;
    inset-inline: 24px !important;
    inset-block-end: -1px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(46,88,184,.52), rgba(22,166,180,.4), transparent) !important;
    opacity: .75 !important;
}
#modalOverlay .dp-modal__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 30px !important;
    box-sizing: border-box !important;
    padding: 5px 11px !important;
    border: 1px solid #d6e2f4 !important;
    border-radius: 999px !important;
    color: #45628f !important;
    background: #f4f8fe !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
}
#modalOverlay .dp-modal__badge::before {
    content: "" !important;
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--modal-cyan) !important;
    box-shadow: 0 0 0 4px rgba(22,166,180,.1) !important;
}
#modalOverlay .dp-modal[data-modal] .dp-modal__close {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid #d5e0ef !important;
    border-radius: 14px !important;
    color: #46618b !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(32, 75, 138, .06) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transform: none !important;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
#modalOverlay .dp-modal[data-modal] .dp-modal__close:hover {
    color: var(--modal-primary) !important;
    border-color: #9fb6dd !important;
    background: #f2f6fd !important;
    box-shadow: 0 8px 18px rgba(46,88,184,.12) !important;
    transform: rotate(6deg) !important;
}
#modalOverlay .dp-modal[data-modal] .dp-modal__header {
    position: relative !important;
    isolation: isolate !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    padding: 30px 34px 25px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: start !important;
}
#modalOverlay .dp-modal[data-modal] .dp-modal__header::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, rgba(232,240,252,.82), transparent 48%),
        radial-gradient(circle at 92% 12%, rgba(69,131,215,.11), transparent 28%) !important;
}
#modalOverlay .dp-modal[data-modal] .dp-modal__header::after {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 34px !important;
    inset-block-end: 0 !important;
    width: 76px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--modal-primary), var(--modal-cyan)) !important;
    opacity: .9 !important;
}
#modalOverlay .dp-modal__title,
#modalOverlay .dp-modal[data-modal="contact"] .dp-modal__title {
    max-width: 720px !important;
    margin: 0 !important;
    color: var(--modal-ink-strong) !important;
    font-size: clamp(25px, 3vw, 34px) !important;
    font-weight: 750 !important;
    line-height: 1.5 !important;
    letter-spacing: -.025em !important;
    text-shadow: none !important;
}
#modalOverlay .dp-modal__desc,
#modalOverlay .dp-modal[data-modal="contact"] .dp-modal__desc {
    max-width: 68ch !important;
    margin: 10px 0 0 !important;
    color: var(--modal-muted) !important;
    font-size: 14px !important;
    font-weight: 450 !important;
    line-height: 1.95 !important;
}
#modalOverlay .dp-modal__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 0 34px 30px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: #aec0dc transparent !important;
}
#modalOverlay .dp-modal__body::-webkit-scrollbar {
    width: 7px !important;
}
#modalOverlay .dp-modal__body::-webkit-scrollbar-track {
    margin-block: 12px !important;
    background: transparent !important;
}
#modalOverlay .dp-modal__body::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 99px !important;
    background: #b4c4df !important;
    background-clip: padding-box !important;
}

/* Product catalog */
#modalOverlay #modalProducts .dp-modal__products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 15px !important;
}
#modalOverlay #modalProducts .dp-modal__product-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-rows: 1fr auto !important;
    align-items: start !important;
    min-height: 206px !important;
    box-sizing: border-box !important;
    gap: 0 15px !important;
    padding: 21px !important;
    overflow: hidden !important;
    border: 1px solid var(--modal-line) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #fff 0%, #f8fbff 100%) !important;
    box-shadow: 0 9px 24px rgba(32,74,135,.055) !important;
    color: var(--modal-ink) !important;
    text-decoration: none !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease !important;
}
#modalOverlay #modalProducts .dp-modal__product-card::before {
    content: "" !important;
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline-start: 0 !important;
    width: 4px !important;
    border-radius: inherit !important;
    background: linear-gradient(180deg, var(--modal-primary), var(--modal-cyan)) !important;
    opacity: .72 !important;
}
#modalOverlay #modalProducts .dp-modal__product-card::after {
    content: "" !important;
    position: absolute !important;
    inset-inline-end: -44px !important;
    inset-block-start: -50px !important;
    width: 130px !important;
    height: 130px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(62,126,213,.13), transparent 67%) !important;
    pointer-events: none !important;
}
#modalOverlay #modalProducts .dp-modal__product-card:hover,
#modalOverlay #modalProducts .dp-modal__product-card:focus-visible {
    border-color: #a5bde3 !important;
    background: #fff !important;
    box-shadow: 0 16px 32px rgba(32,74,135,.12) !important;
    transform: translateY(-3px) !important;
}
#modalOverlay #modalProducts .dp-modal__product-icon {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    box-sizing: border-box !important;
    border: 1px solid #d6e2f5 !important;
    border-radius: 15px !important;
    color: var(--modal-primary) !important;
    background: linear-gradient(145deg, #f1f6ff, #e8f0fd) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important;
}
#modalOverlay #modalProducts .dp-modal__product-icon svg {
    width: 23px !important;
    height: 23px !important;
}
#modalOverlay #modalProducts .dp-modal__product-content {
    min-width: 0 !important;
}
#modalOverlay #modalProducts .dp-modal__product-tag {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 23px !important;
    box-sizing: border-box !important;
    padding: 3px 8px !important;
    border: 1px solid #d8e4f4 !important;
    border-radius: 999px !important;
    color: #54709c !important;
    background: #f4f8fe !important;
    font-size: 11px !important;
    font-weight: 550 !important;
    line-height: 1.55 !important;
}
#modalOverlay #modalProducts .dp-modal__product-title {
    margin: 8px 0 5px !important;
    color: var(--modal-ink-strong) !important;
    font-size: 18px !important;
    font-weight: 750 !important;
    line-height: 1.65 !important;
}
#modalOverlay #modalProducts .dp-modal__product-desc {
    margin: 0 !important;
    color: var(--modal-muted) !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
}
#modalOverlay #modalProducts .dp-modal__product-card .catalog-link-label {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    align-self: end !important;
    min-height: 35px !important;
    margin-top: 17px !important;
    padding-top: 12px !important;
    border-top: 1px solid #e7edf6 !important;
    color: var(--modal-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
}
#modalOverlay .catalog-arrow {
    flex: 0 0 auto !important;
    transition: transform .2s ease !important;
}
#modalOverlay .dp-modal a:hover .catalog-arrow,
#modalOverlay .dp-modal button:hover .catalog-arrow {
    transform: translateX(3px) !important;
}
html[dir="rtl"] #modalOverlay .dp-modal a:hover .catalog-arrow,
html[dir="rtl"] #modalOverlay .dp-modal button:hover .catalog-arrow {
    transform: translateX(-3px) scaleX(-1) !important;
}

/* Portfolio and newsroom cards */
#modalOverlay #modalPortfolio .portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}
#modalOverlay #modalPortfolio .portfolio-card,
#modalOverlay #modalBlog .dp-modal__blog-item {
    border: 1px solid var(--modal-line) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #fff, #f8fbff) !important;
    box-shadow: 0 9px 24px rgba(32,74,135,.05) !important;
}
#modalOverlay #modalPortfolio .portfolio-card:hover,
#modalOverlay #modalBlog .dp-modal__blog-item:hover {
    border-color: #a6bde2 !important;
    box-shadow: 0 16px 32px rgba(32,74,135,.11) !important;
}
#modalOverlay #modalPortfolio .portfolio-card__visual {
    height: 178px !important;
    border-bottom: 1px solid #e2eaf5 !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(74,128,213,.14), transparent 38%),
        linear-gradient(145deg, #f3f7ff, #e8f0fc) !important;
}
#modalOverlay #modalPortfolio .portfolio-card__content {
    padding: 20px 21px 19px !important;
}
#modalOverlay #modalPortfolio .portfolio-card h3 {
    margin: 11px 0 6px !important;
    color: var(--modal-ink-strong) !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}
#modalOverlay #modalPortfolio .portfolio-card p {
    color: var(--modal-muted) !important;
    font-size: 13px !important;
    line-height: 1.85 !important;
}
#modalOverlay #modalPortfolio .portfolio-card__result {
    margin: 15px 0 17px !important;
    padding-top: 12px !important;
    border-top-color: #e3eaf4 !important;
    color: #55709e !important;
    font-size: 12px !important;
}
#modalOverlay #modalPortfolio .portfolio-invite {
    margin-top: 18px !important;
    padding: 17px 19px !important;
    border: 1px solid #d6e2f3 !important;
    border-radius: 18px !important;
    background: linear-gradient(110deg, #eff5ff, #fbfdff) !important;
}

/* Newsroom content gets a strong featured state without adding noise. */
#modalOverlay #modalBlog .dp-modal__blog-list {
    display: grid !important;
    gap: 13px !important;
}
#modalOverlay #modalBlog .dp-modal__blog-item {
    position: relative !important;
    padding: 18px 19px !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
#modalOverlay #modalBlog .dp-modal__blog-item--featured {
    border-color: #a9c0e6 !important;
    background: linear-gradient(110deg, #eef5ff, #fff 68%) !important;
    box-shadow: 0 12px 28px rgba(46,88,184,.09) !important;
}
#modalOverlay #modalBlog .dp-modal__blog-item--featured::before {
    content: "" !important;
    position: absolute !important;
    inset-block: 18px !important;
    inset-inline-start: 0 !important;
    width: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, var(--modal-primary), var(--modal-cyan)) !important;
}
#modalOverlay #modalBlog .dp-modal__blog-num {
    border-color: #cedcf1 !important;
    background: #f0f5fd !important;
    color: var(--modal-primary) !important;
}
#modalOverlay #modalBlog .dp-modal__blog-title {
    color: var(--modal-ink-strong) !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
}
#modalOverlay #modalBlog .dp-modal__blog-desc {
    color: var(--modal-muted) !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
}
#modalOverlay #modalBlog .dp-modal__blog-aside {
    border-top-color: #e4ebf5 !important;
    color: #71829d !important;
}
#modalOverlay #modalBlog .catalog-link-label {
    color: var(--modal-primary) !important;
    font-weight: 700 !important;
}

/* Service and product detail view */
#modalOverlay #modalPage.dp-modal {
    border-radius: 28px !important;
}
/* The detail shell owns scrolling; its grid must allow wheel input through. */
#modalOverlay #modalPage > .dp-modal__body {
    overflow: visible !important;
    overscroll-behavior: auto !important;
}
#modalOverlay #modalPage.dp-modal--service-detail .dp-modal__header {
    padding-bottom: 22px !important;
}
#modalOverlay #modalPage > .dp-modal__body--overview {
    grid-template-columns: minmax(190px, .82fr) minmax(0, 1.78fr) !important;
    gap: 0 28px !important;
    padding: 0 34px 30px !important;
}
#modalOverlay #modalPage .dp-modal__fit {
    padding: 22px 20px !important;
    border: 1px solid #d9e5f4 !important;
    border-radius: 20px !important;
    background: radial-gradient(circle at 78% 4%, rgba(74,130,215,.14), transparent 42%), linear-gradient(160deg, #eef4fd, #f8fbff) !important;
}
#modalOverlay #modalPage .dp-modal__fit-icon {
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 22px !important;
    border: 1px solid #d1def1 !important;
    border-radius: 16px !important;
    color: var(--modal-primary) !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 8px 18px rgba(42,86,166,.08) !important;
}
#modalOverlay #modalPage .dp-modal__fit h3 {
    color: var(--modal-ink-strong) !important;
    font-size: 14px !important;
}
#modalOverlay #modalPage .dp-modal__fit p {
    color: var(--modal-muted) !important;
    font-size: 13px !important;
    line-height: 1.95 !important;
}
#modalOverlay #modalPage .dp-modal__scope-title {
    padding: 8px 0 8px !important;
    color: #6d7f9d !important;
    font-size: 12px !important;
}
#modalOverlay #modalPage .dp-modal__deliverables li {
    padding: 16px 0 !important;
    border-bottom-color: #e1e9f4 !important;
}
#modalOverlay #modalPage .dp-modal__deliverable-icon {
    border: 1px solid #d4e1f3 !important;
    border-radius: 11px !important;
    color: var(--modal-primary) !important;
    background: #f0f5fd !important;
}
#modalOverlay #modalPage .dp-modal__deliverable-title {
    color: var(--modal-ink-strong) !important;
    font-size: 14px !important;
}
#modalOverlay #modalPage .dp-modal__deliverable-copy p {
    color: var(--modal-muted) !important;
    font-size: 13px !important;
}
#modalOverlay #modalPage .dp-modal__next-step {
    margin-top: 25px !important;
    padding-top: 19px !important;
    border-top-color: #dfe7f3 !important;
}
#modalOverlay #modalPage .dp-modal__next-title {
    color: var(--modal-ink-strong) !important;
    font-size: 14px !important;
}
#modalOverlay #modalPage .dp-modal__next-desc {
    color: var(--modal-muted) !important;
}

/* Contact desk */
#modalOverlay #modalContact.dp-modal {
    width: min(900px, calc(100vw - 40px)) !important;
}
#modalOverlay #modalContact > .dp-modal__header--contact {
    padding-bottom: 23px !important;
}
#modalOverlay #modalContact .dp-modal__response-note {
    order: -1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 0 8px !important;
    color: var(--modal-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.8 !important;
}
#modalOverlay #modalContact .dp-modal__response-note::before {
    content: "" !important;
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #21b486 !important;
    box-shadow: 0 0 0 4px rgba(33,180,134,.12) !important;
}
#modalOverlay #modalContact > .dp-modal__body {
    grid-template-columns: minmax(200px, .86fr) minmax(0, 1.4fr) !important;
    gap: 0 24px !important;
    padding: 0 34px 30px !important;
}
#modalOverlay #modalContact .contact-intro {
    padding: 20px !important;
    border: 1px solid #d8e4f4 !important;
    border-radius: 20px !important;
    background: radial-gradient(circle at 80% 8%, rgba(60,124,210,.12), transparent 38%), linear-gradient(160deg, #eef4fd, #f8fbff) !important;
}
#modalOverlay #modalContact .contact-intro img {
    width: min(150px, 70%) !important;
    margin: 0 0 15px !important;
    opacity: .95 !important;
}
#modalOverlay #modalContact .contact-intro__eyebrow {
    color: var(--modal-primary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
#modalOverlay #modalContact .contact-intro h3 {
    color: var(--modal-ink-strong) !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
}
#modalOverlay #modalContact .contact-intro p {
    color: var(--modal-muted) !important;
    font-size: 13px !important;
    line-height: 1.95 !important;
}
#modalOverlay #modalContact .contact-direct-grid {
    gap: 9px !important;
}
#modalOverlay #modalContact .contact-direct-card {
    min-height: 68px !important;
    padding: 13px 14px !important;
    border: 1px solid var(--modal-line) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 6px 16px rgba(31,73,132,.04) !important;
}
#modalOverlay #modalContact .contact-direct-card:hover {
    border-color: #a8bfe4 !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(31,73,132,.1) !important;
    transform: translateY(-2px) !important;
}
#modalOverlay #modalContact .contact-direct-card__icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border: 1px solid #dce7f5 !important;
    border-radius: 12px !important;
    color: var(--modal-primary) !important;
    background: #f0f5fd !important;
}
#modalOverlay #modalContact .contact-direct-card--phone {
    min-height: 90px !important;
    border-color: var(--modal-primary) !important;
    background: linear-gradient(135deg, #315fbe, #274b9f) !important;
    box-shadow: 0 12px 26px rgba(41,81,164,.2) !important;
}
#modalOverlay #modalContact .contact-direct-card--phone .contact-direct-card__icon {
    color: #fff !important;
    border-color: rgba(255,255,255,.2) !important;
    background: rgba(255,255,255,.13) !important;
}
#modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-label {
    color: #dce8ff !important;
}
#modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-val {
    color: #fff !important;
    font-size: 23px !important;
    font-weight: 750 !important;
}
#modalOverlay #modalContact .contact-direct-card--phone .contact-direct-card__arrow {
    color: #dce8ff !important;
}
#modalOverlay #modalContact .dp-modal__trust-row {
    grid-column: 2 !important;
    margin-top: 17px !important;
    padding-top: 16px !important;
    border-top: 1px solid #e1e9f3 !important;
}
#modalOverlay #modalContact .dp-modal__trust-item {
    color: #6d7e99 !important;
    font-size: 12px !important;
}

/* All primary actions share one clear visual language. */
#modalOverlay .dp-modal :is(.dp-modal__page-cta, .dp-modal__detail-cta, .dp-modal__you-cta, .dp-modal__footer-cta-btn, .catalog-action--primary) {
    min-height: 46px !important;
    box-sizing: border-box !important;
    padding: 11px 17px !important;
    border: 1px solid var(--modal-primary) !important;
    border-radius: 12px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #315fbe, #274b9f) !important;
    box-shadow: 0 8px 16px rgba(42,82,167,.16) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    text-shadow: none !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
#modalOverlay .dp-modal :is(.dp-modal__page-cta, .dp-modal__detail-cta, .dp-modal__you-cta, .dp-modal__footer-cta-btn, .catalog-action--primary):hover {
    background: linear-gradient(135deg, #2d56ac, #1f418d) !important;
    box-shadow: 0 12px 22px rgba(42,82,167,.23) !important;
    transform: translateY(-2px) !important;
}
#modalOverlay .dp-modal :is(.dp-modal__detail-back, .portfolio-case__back) {
    min-height: 44px !important;
    border: 1px solid #d2deef !important;
    border-radius: 12px !important;
    color: #426196 !important;
    background: #f5f8fd !important;
    box-shadow: none !important;
}
#modalOverlay .dp-modal :is(button, a, [role="button"]):focus-visible {
    outline: 3px solid rgba(52,100,190,.38) !important;
    outline-offset: 3px !important;
}

/* Make the audio control feel like part of the dialog chrome. */
.sound-btn.sound-btn--modal-open {
    z-index: 10002 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    border: 4px solid rgba(255,255,255,.9) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #1d438e, #122f71) !important;
    box-shadow: 0 12px 26px rgba(6,31,78,.3), 0 0 0 1px rgba(67,118,209,.25) !important;
}
.sound-btn.sound-btn--modal-open span {
    border-radius: 99px !important;
    background: #dceaff !important;
}

/* Mobile: use a near-edge sheet with comfortable reading width. */
@media (max-width: 700px) {
    #modalOverlay.dp-modal-overlay {
        align-items: flex-end !important;
        padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    }
    #modalOverlay .dp-modal[data-modal],
    #modalOverlay :is(#modalProducts, #modalPortfolio, #modalPage, #modalContact) {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(92dvh, 760px) !important;
        border-radius: 26px 26px 20px 20px !important;
    }
    #modalOverlay .dp-modal__topbar {
        min-height: 62px !important;
        padding: 10px 17px !important;
        border-radius: 26px 26px 0 0 !important;
    }
    #modalOverlay .dp-modal[data-modal] .dp-modal__header {
        padding: 24px 20px 21px !important;
    }
    #modalOverlay .dp-modal[data-modal] .dp-modal__header::after {
        inset-inline-start: 20px !important;
        width: 58px !important;
    }
    #modalOverlay .dp-modal__title,
    #modalOverlay .dp-modal[data-modal="contact"] .dp-modal__title {
        font-size: 24px !important;
        line-height: 1.55 !important;
    }
    #modalOverlay .dp-modal__desc,
    #modalOverlay .dp-modal[data-modal="contact"] .dp-modal__desc {
        font-size: 13px !important;
        line-height: 1.9 !important;
    }
    #modalOverlay .dp-modal__body {
        padding: 0 20px 24px !important;
    }
    #modalOverlay #modalProducts .dp-modal__products-grid,
    #modalOverlay #modalPortfolio .portfolio-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }
    #modalOverlay #modalProducts .dp-modal__product-card {
        min-height: 0 !important;
        padding: 18px !important;
    }
    #modalOverlay #modalPortfolio .portfolio-card__visual {
        height: 166px !important;
    }
    #modalOverlay #modalPage > .dp-modal__body--overview,
    #modalOverlay #modalContact > .dp-modal__body {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 0 20px 24px !important;
    }
    #modalOverlay #modalPage .dp-modal__fit,
    #modalOverlay #modalContact .contact-intro {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    #modalOverlay #modalPage .dp-modal__fit {
        min-height: 0 !important;
        padding: 17px !important;
    }
    #modalOverlay #modalPage .dp-modal__fit-icon {
        width: 46px !important;
        height: 46px !important;
        margin-bottom: 14px !important;
    }
    #modalOverlay #modalPage .dp-modal__scope-title,
    #modalOverlay #modalPage .dp-modal__deliverables,
    #modalOverlay #modalPage .dp-modal__next-step {
        grid-column: 1 !important;
    }
    #modalOverlay #modalContact .contact-intro {
        padding: 17px !important;
    }
    #modalOverlay #modalContact .contact-intro img {
        width: 110px !important;
    }
    #modalOverlay #modalContact .contact-direct-grid,
    #modalOverlay #modalContact .dp-modal__trust-row {
        grid-column: 1 !important;
    }
    #modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-val {
        font-size: 20px !important;
    }
    #modalOverlay .dp-modal :is(.dp-modal__page-cta, .dp-modal__detail-cta, .dp-modal__you-cta, .dp-modal__footer-cta-btn) {
        width: 100% !important;
    }
    .sound-btn.sound-btn--modal-open {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 14px !important;
    }
}
@media (max-width: 380px) {
    #modalOverlay .dp-modal__topbar {
        min-height: 58px !important;
    }
    #modalOverlay .dp-modal[data-modal] .dp-modal__header {
        padding-inline: 17px !important;
    }
    #modalOverlay .dp-modal__body {
        padding-inline: 17px !important;
    }
    #modalOverlay .dp-modal__title,
    #modalOverlay .dp-modal[data-modal="contact"] .dp-modal__title {
        font-size: 22px !important;
    }
    #modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-val {
        font-size: 17px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    #modalOverlay.dp-modal-overlay,
    #modalOverlay .dp-modal[data-modal],
    #modalOverlay .dp-modal :is(a, button, [role="button"]),
    #modalOverlay .catalog-arrow,
    #modalOverlay #modalContact .contact-direct-card {
        transition: none !important;
    }
    #modalOverlay .dp-modal[data-modal],
    #modalOverlay .dp-modal[data-modal].dp-modal--active,
    #modalOverlay .dp-modal :is(a, button, [role="button"]):hover {
        transform: none !important;
    }
}


/* Contact keeps one scroll context so its toolbar stays visible while reading. */
#modalOverlay #modalContact.dp-modal {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
#modalOverlay #modalContact > .dp-modal__topbar {
    position: sticky !important;
    inset-block-start: 0 !important;
    z-index: 5 !important;
}
#modalOverlay #modalContact > .dp-modal__body {
    flex: 0 0 auto !important;
    overflow: visible !important;
}

/* Only the active dialog participates in the overlay layout. */
#modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal]:not(.dp-modal--active) { display:none!important; }


/* Final width guard: landscape dialogs keep enough room for detail layouts. */
#modalOverlay :is(#modalProducts, #modalPortfolio, #modalBlog).dp-modal[data-modal] {
    width: min(980px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    flex: 0 0 auto !important;
}
#modalOverlay :is(#modalPage, #modalContact).dp-modal[data-modal] {
    width: min(900px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    flex: 0 0 auto !important;
}
@media (max-width: 700px) {
    #modalOverlay :is(#modalProducts, #modalPortfolio, #modalBlog, #modalPage, #modalContact).dp-modal[data-modal] {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* Reset the legacy absolute offset now that the overlay centers dialogs with flex. */
#modalOverlay .dp-modal[data-modal] {
    inset: auto !important;
}

/* Reading and interaction refinements, shared by every dialog. */
#modalOverlay.dp-modal-overlay {
    --modal-muted: #536783;
    --dialog-muted: #536783;
}
#modalOverlay .dp-modal :is(.dp-modal__blog-date,.dp-modal__blog-read,.dp-modal__blog-aside,.dp-modal__scope-title,.dp-modal__next-desc,.dp-modal__trust-item,.dp-modal__deliverable-number) {
    color: #586c8c !important;
}
#modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog) .dp-modal__body {
    padding-top: 24px !important;
}
#modalOverlay #modalProducts .dp-modal__product-card {
    --product-accent: #3154ad;
    --product-wash: #edf3ff;
}
#modalOverlay #modalProducts .dp-modal__product-card--meet { --product-accent:#4568af; --product-wash:#eff4ff; }
#modalOverlay #modalProducts .dp-modal__product-card--peyma { --product-accent:#3154ad; --product-wash:#edf3ff; }
#modalOverlay #modalProducts .dp-modal__product-card--search { --product-accent:#216d96; --product-wash:#eef8fd; }
#modalOverlay #modalProducts .dp-modal__product-card--panel { --product-accent:#197775; --product-wash:#edf8f6; }
#modalOverlay #modalProducts .dp-modal__product-card--site { --product-accent:#6552a3; --product-wash:#f4f1fd; }
#modalOverlay #modalProducts .dp-modal__product-card .dp-modal__product-icon {
    color: var(--product-accent) !important;
    background: var(--product-wash) !important;
}
#modalOverlay #modalProducts .dp-modal__product-card::before {
    display: block !important;
    background: var(--product-accent) !important;
    inset: 20px auto 20px 0 !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    width: 3px !important;
    height: auto !important;
    border-radius: 999px !important;
    transform: none !important;
}
#modalOverlay #modalProducts .dp-modal__product-card::after { display:none!important; }
#modalOverlay #modalProducts .dp-modal__product-card .catalog-link-label {
    color: var(--product-accent) !important;
}
#modalOverlay #modalContact .contact-direct-card.contact-direct-card--phone:hover {
    border-color: #244995 !important;
    background: linear-gradient(135deg,#294fa5,#203f87) !important;
    box-shadow: 0 12px 24px rgba(41,81,164,.23) !important;
}
#modalOverlay .dp-modal :is(a,button,[role=button]):active {
    transform: translateY(1px) !important;
}
#modalOverlay .dp-modal__header::after { display:block!important; }
#modalOverlay #modalPage .dp-modal__brief {
    margin-top: 18px !important;
    border-color: #d7e3f3 !important;
    border-radius: 14px !important;
    background: #f1f6fd !important;
}
#modalOverlay #modalPage .dp-modal__brief summary { min-height:48px; }
#modalOverlay #modalPage .dp-modal__brief dd { color:var(--modal-muted)!important; }
#modalOverlay #modalPage .dp-modal__fit { height:auto!important; align-self:stretch; }
#modalOverlay #modalPage .dp-modal__deliverables li:nth-child(2) .dp-modal__deliverable-icon {
    color: #216d96 !important; background:#eef8fd!important;
}
#modalOverlay #modalPage .dp-modal__deliverables li:nth-child(3) .dp-modal__deliverable-icon {
    color: #6552a3 !important; background:#f4f1fd!important;
}
#modalOverlay #modalPage .dp-modal__next-step {
    padding: 18px 20px !important; gap:18px!important;
    border: 1px solid #d6e2f3 !important; border-radius:18px!important;
    background: linear-gradient(110deg,#eef4ff,#fbfdff)!important;
}
#modalOverlay #modalPage .dp-modal__next-step .dp-modal__page-cta {
    min-height:48px!important;
}
#modalOverlay #modalPortfolio .portfolio-case__back:hover .catalog-arrow { transform:rotate(180deg)!important; }
html[dir=rtl] #modalOverlay #modalPortfolio .portfolio-case__back:hover .catalog-arrow { transform:none!important; }

/* Compact introductions let phone visitors reach contact choices sooner. */
@media(max-width:700px) {
    #modalOverlay #modalContact .contact-intro {
        display:grid!important; grid-template-columns:minmax(0,1fr) 64px!important;
        align-items:start; gap:4px 12px!important; padding:16px!important;
    }
    #modalOverlay #modalContact .contact-intro img {
        grid-column:2; grid-row:1/4; width:64px!important;
        align-self:center; max-width:100%!important; margin:0!important;
    }
    #modalOverlay #modalContact .contact-intro h3 { font-size:15px!important; line-height:1.7!important; }
    #modalOverlay #modalContact .contact-intro p { font-size:12px!important; line-height:1.85!important; }
    #modalOverlay #modalContact .contact-intro .contact-topic {
        grid-column:1/-1; margin-top:10px!important; padding-top:10px!important;
    }
    #modalOverlay #modalProducts .dp-modal__product-card {
        grid-template-columns:42px minmax(0,1fr)!important; gap:0 12px!important;
        padding:16px!important; min-height:0!important;
    }
    #modalOverlay #modalProducts .dp-modal__product-icon { width:42px!important; height:42px!important; }
    #modalOverlay #modalProducts .dp-modal__product-card .catalog-link-label {
        margin-top:12px!important; padding-top:10px!important; min-height:32px!important;
    }
    #modalOverlay #modalPage .dp-modal__fit {
        display:grid!important; grid-template-columns:44px minmax(0,1fr)!important;
        gap:6px 12px; margin-bottom:14px!important; padding:16px!important;
    }
    #modalOverlay #modalPage .dp-modal__fit-icon {
        grid-column:1; grid-row:1/3; width:44px!important; height:44px!important;
        margin:0!important;
    }
    #modalOverlay #modalPage .dp-modal__fit h3,
    #modalOverlay #modalPage .dp-modal__fit p { grid-column:2; }
    #modalOverlay #modalPage .dp-modal__next-step {
        flex-direction:column!important; align-items:stretch!important;
        padding:16px!important;
    }
    #modalOverlay #modalPage .dp-modal__next-step .dp-modal__page-cta {
        width:100%!important; align-self:stretch!important;
    }
}
@media(max-height:500px) {
    #modalOverlay .dp-modal[data-modal] .dp-modal__header {
        padding:16px 26px!important;
    }
    #modalOverlay .dp-modal[data-modal] .dp-modal__title { font-size:24px!important; }
    #modalOverlay .dp-modal[data-modal] .dp-modal__desc {
        font-size:13px!important; line-height:1.75!important; margin-top:6px!important;
    }
    #modalOverlay .dp-modal__topbar { min-height:58px!important; padding-block:7px!important; }
}
@media(hover:none) {
    #modalOverlay #modalProducts .dp-modal__product-card:hover,
    #modalOverlay #modalPortfolio .portfolio-card:hover,
    #modalOverlay #modalBlog .dp-modal__blog-item:hover,
    #modalOverlay #modalContact .contact-direct-card:hover { transform:none!important; }
}
@media(prefers-reduced-motion:reduce) {
    #modalOverlay .dp-modal *,
    #modalOverlay .dp-modal[data-modal].dp-modal--active { animation:none!important; transition:none!important; }
    #modalOverlay #modalProducts .dp-modal__product-card:is(:hover,:focus-visible),
    #modalOverlay #modalPortfolio .portfolio-card:hover,
    #modalOverlay #modalBlog .dp-modal__blog-item:hover,
    #modalOverlay #modalContact .contact-direct-card:hover { transform:none!important; }
}

/* Decision-first dialogs: concise context, scrollable content and visible actions. */
#modalOverlay.dp-modal-overlay {
    --modal-ink:#1b3054; --modal-ink-strong:#10264a; --modal-muted:#536783;
    --modal-primary:#345bc0; --modal-line:#dce5f3;
    background:radial-gradient(ellipse at 15% 90%,rgba(23,137,154,.12),transparent 45%),linear-gradient(145deg,rgba(15,31,61,.68),rgba(15,30,58,.84))!important;
    backdrop-filter:blur(12px) saturate(.9)!important; -webkit-backdrop-filter:blur(12px) saturate(.9)!important;
}
#modalOverlay.dp-modal-overlay::before { display:none!important; }
#modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal] {
    display:flex!important; flex-direction:column!important; overflow:hidden!important; background:var(--modal-surface,#f8faff)!important;
    width:min(720px,calc(100vw - 40px))!important; max-width:calc(100vw - 40px)!important; border-radius:24px!important;
    border:1px solid rgba(255,255,255,.85)!important;
    box-shadow:0 28px 80px rgba(8,22,48,.3),0 2px 8px rgba(8,22,48,.08)!important;
}
#modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal]:not(.dp-modal--active) { display:none!important; }
#modalOverlay #modalPage.dp-modal[data-modal] { width:min(660px,calc(100vw - 40px))!important; }
#modalOverlay #modalBlog.dp-modal[data-modal] { width:min(680px,calc(100vw - 40px))!important; }
#modalOverlay .dp-modal[data-modal] .dp-modal__topbar {
    position:relative!important; min-height:60px!important; padding:8px 24px!important; background:var(--modal-chrome,#fff)!important; box-shadow:none!important;
}
#modalOverlay .dp-modal__topbar::before { content:none!important; }
#modalOverlay .dp-modal__badge {
    border:0!important; background:transparent!important; padding-inline:0!important;
    color:#4b6082!important; font-size:13px!important; font-weight:650!important;
}
#modalOverlay .dp-modal__badge::before {
    width:6px!important; height:6px!important; flex-basis:6px!important; background:#536bb7!important; box-shadow:none!important;
}
#modalOverlay .dp-modal[data-modal] .dp-modal__close {
    border-radius:12px!important; box-shadow:none!important; background:#f7f9fd!important; color:#526789!important;
}
#modalOverlay .dp-modal[data-modal] .dp-modal__close[data-modal-close-mode=back] {
    display:flex!important; gap:7px; width:auto!important; padding:0 12px!important; font-size:12px!important;
}
#modalOverlay .dp-modal__back-label { white-space:nowrap; font-weight:600; }
#modalOverlay .dp-modal[data-modal] .dp-modal__close:hover { transform:none!important; }
#modalOverlay .dp-modal[data-modal] .dp-modal__header {
    padding:22px 26px 24px!important; background:var(--modal-header,linear-gradient(120deg,#fff,#f5f8fe))!important; border-bottom:1px solid #e4ebf6!important;
}
#modalOverlay .dp-modal[data-modal] .dp-modal__header::before,
#modalOverlay .dp-modal[data-modal] .dp-modal__header::after { content:none!important; display:none!important; }
#modalOverlay .dp-modal[data-modal] .dp-modal__title {
    font-size:25px!important; line-height:1.6!important; letter-spacing:0!important; font-weight:750!important;
}
#modalOverlay .dp-modal[data-modal] .dp-modal__desc {
    font-size:14px!important; line-height:1.85!important; margin-top:8px!important; max-width:58ch!important;
}
#modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact) > .dp-modal__body {
    flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important;
    overscroll-behavior:contain!important; padding:24px 26px 28px!important; scrollbar-gutter:stable;
}
#modalOverlay .dp-modal__sr-only {
    position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important;
    padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
#modalOverlay .dp-modal__filters {
    display:flex; align-items:center; gap:8px; flex:0 0 auto;
    padding:14px 26px; border-bottom:1px solid #e4ebf6; background:#fff;
}
#modalOverlay .dp-modal__filter {
    display:inline-flex; justify-content:center; align-items:center; gap:8px;
    min-height:44px; padding:9px 15px; border:1px solid transparent; border-radius:12px;
    background:#f0f4fa; color:#506581; font:inherit; font-size:13px; font-weight:550; cursor:pointer;
    transition:color .18s,background .18s,border-color .18s;
}
#modalOverlay .dp-modal__filter[aria-pressed=true] { color:#234791; background:#eaf0ff; border-color:#b9caf3; font-weight:700; }
#modalOverlay .dp-modal__filter:hover { background:#e9eef8; }
#modalOverlay .dp-modal__filter-count {
    display:grid; place-items:center; min-width:20px; height:20px; border-radius:6px;
    background:rgba(255,255,255,.8); font-size:11px; line-height:1;
}
#modalOverlay #modalProducts .dp-modal__product-card {
    min-height:0!important; padding:20px!important; border-radius:16px!important; background:var(--modal-card,#fff)!important;
    box-shadow:0 2px 5px rgba(27,54,95,.025)!important; gap:0 14px!important;
}
#modalOverlay #modalProducts .dp-modal__product-card[hidden] { display:none!important; }
#modalOverlay #modalProducts .dp-modal__product-card:last-child { grid-column:auto!important; }
#modalOverlay #modalProducts .dp-modal__product-card::before { display:none!important; }
#modalOverlay #modalProducts .dp-modal__product-title { margin:8px 0!important; font-size:18px!important; }
#modalOverlay #modalProducts .dp-modal__product-desc { line-height:1.85!important; font-size:14px!important; }
#modalOverlay #modalProducts .dp-modal__product-tag {
    padding:0!important; border:0!important; background:none!important; border-radius:0!important; font-size:12px!important; color:#536783!important;
}
#modalOverlay #modalProducts .dp-modal__product-card .catalog-link-label {
    min-height:38px!important; margin-top:16px!important; padding-top:12px!important; font-size:13px!important; border-top:1px solid #e9eef7!important;
}
#modalOverlay #modalProducts .dp-modal__product-card:hover {
    border-color:#a8bee8!important; box-shadow:0 10px 22px rgba(35,68,120,.07)!important; transform:translateY(-2px)!important;
}
#modalOverlay :is(#modalPage,#modalProducts) > .dp-modal__actionbar {
    position:relative!important; z-index:3; display:flex!important; flex:0 0 auto!important;
    align-items:center!important; justify-content:space-between!important; gap:16px!important;
    margin:0!important; padding:16px 26px!important; border:0!important; border-top:1px solid #dce5f4!important;
    border-radius:0!important; background:var(--modal-action,#fff)!important; box-shadow:0 -8px 24px rgba(34,67,120,.045)!important;
}
#modalOverlay #modalPage .dp-modal__actionbar .dp-modal__next-copy { min-width:0; }
#modalOverlay #modalPage .dp-modal__actionbar .dp-modal__next-title { margin:0 0 4px!important; font-size:14px!important; line-height:1.65!important; }
#modalOverlay #modalPage .dp-modal__actionbar .dp-modal__next-desc { margin:0!important; font-size:12px!important; line-height:1.75!important; }
#modalOverlay :is(#modalPage,#modalProducts) .dp-modal__actionbar :is(.dp-modal__page-cta,.dp-modal__footer-cta-btn) {
    display:inline-flex!important; align-items:center!important; justify-content:center!important;
    flex:0 0 auto; min-height:48px!important; width:auto!important; padding-inline:24px!important;
    border-radius:12px!important; background:linear-gradient(110deg,#345bc0,#27469b)!important;
    box-shadow:0 6px 14px rgba(48,83,169,.14)!important; white-space:nowrap;
}
#modalOverlay #modalPage > .dp-modal__body--overview {
    display:block!important;
}
#modalOverlay #modalPage .dp-modal__fit { display:grid!important; grid-template-columns:44px minmax(0,1fr)!important; gap:5px 14px; height:auto!important; padding:18px!important; margin-bottom:24px!important; background:#edf3fd!important; }
#modalOverlay #modalPage .dp-modal__fit h3,
#modalOverlay #modalPage .dp-modal__fit p { grid-column:2!important; }
#modalOverlay #modalPage .dp-modal__fit h3 { margin:0 0 4px!important; }
#modalOverlay #modalPage .dp-modal__fit-icon { grid-column:1!important; grid-row:1/3!important; width:44px!important; height:44px!important; margin:0!important; }
#modalOverlay #modalPage .dp-modal__scope-title { padding:0 0 12px!important; font-size:13px!important; color:#445a7c!important; font-weight:600; }
#modalOverlay #modalPage .dp-modal__deliverables { gap:12px!important; }
#modalOverlay #modalPage .dp-modal__deliverables li {
    grid-template-columns:36px minmax(0,1fr)!important; padding:16px!important;
    border:1px solid #e1e8f4!important; border-radius:14px!important; background:var(--modal-card,#fff)!important;
}
#modalOverlay #modalPage .dp-modal__deliverable-copy p { font-size:14px!important; line-height:1.85!important; margin:0!important; }
#modalOverlay #modalPage .dp-modal__deliverable-number { display:none!important; }
#modalOverlay #modalPage .dp-modal__brief { grid-column:1/-1; grid-row:3; margin-top:24px!important; }
#modalOverlay #modalPage .dp-modal__brief summary { font-size:13px!important; }
/* Contact starts with the channels; supporting context is optional. */
#modalOverlay #modalContact.dp-modal[data-modal] { width:min(560px,calc(100vw - 40px))!important; max-width:calc(100vw - 40px)!important; }
#modalOverlay #modalContact .dp-modal__response-note { font-size:12px!important; margin-bottom:8px!important; color:#526c9d!important; }
#modalOverlay #modalContact > .dp-modal__body { display:flex!important; flex-direction:column!important; gap:24px!important; }
#modalOverlay #modalContact .contact-topic {
    display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; padding:9px 12px!important; margin:14px 0 0!important;
    border:1px solid #d9e5f8!important; border-radius:10px!important; background:var(--modal-card,#fff)!important; font-size:12px!important; line-height:1.8;
}
#modalOverlay #modalContact .contact-topic[hidden] { display:none!important; }
#modalOverlay #modalContact .contact-topic span { font-size:12px!important; color:#62738d!important; }
#modalOverlay #modalContact .contact-topic strong { color:#234791!important; font-size:13px!important; }
#modalOverlay #modalContact .contact-direct-grid {
    display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:16px!important; margin:0!important; width:100%;
}
#modalOverlay #modalContact .contact-direct-card {
    display:flex!important; flex-direction:column!important; justify-content:center!important;
    align-items:center!important; gap:12px!important; min-height:112px!important;
    padding:18px 12px!important; border-radius:16px!important; text-align:center!important;
}
#modalOverlay #modalContact .contact-direct-card:not(.contact-direct-card--phone) .contact-direct-card__content { align-items:center!important; gap:3px!important; }
#modalOverlay #modalContact .contact-direct-card:not(.contact-direct-card--phone) .dp-modal__quick-label { font-size:14px!important; line-height:1.65!important; }
#modalOverlay #modalContact .contact-direct-card .contact-direct-card__arrow { display:none!important; }
#modalOverlay #modalContact .contact-direct-card--phone {
    grid-column:1/-1!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important;
    min-height:102px!important; padding:22px!important; margin:0!important; gap:16px!important;
}
#modalOverlay #modalContact .contact-direct-card--phone .contact-direct-card__icon { width:48px!important; height:48px!important; flex-basis:48px!important; }
#modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-val { font-size:26px!important; line-height:1.5!important; letter-spacing:.015em!important; }
#modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-label { font-size:12px!important; line-height:1.75!important; }
#modalOverlay #modalContact .contact-direct-card--phone .contact-direct-card__arrow { display:block!important; margin-inline-start:auto!important; }

/* Clip disclosure hover surfaces to the same corners in every state. */
#modalOverlay #modalPage .dp-modal__brief,
#modalOverlay #modalContact .contact-prepare {
    width:100%; box-sizing:border-box; padding:0!important;
    border:1px solid #dce5f3!important; border-radius:14px!important;
    background:var(--modal-card,#fff)!important; overflow:hidden!important;
}
#modalOverlay #modalContact .contact-prepare { margin:0!important; }
#modalOverlay #modalPage .dp-modal__brief summary,
#modalOverlay #modalContact .contact-prepare summary {
    display:flex!important; align-items:center; justify-content:space-between; gap:16px;
    min-height:54px!important; box-sizing:border-box; margin:0!important;
    padding:14px 16px!important; list-style:none!important; cursor:pointer;
    border-radius:13px!important; color:#304d7b!important;
    font-size:13px!important; line-height:1.8!important; font-weight:600!important;
    transition:background .18s,color .18s;
}
#modalOverlay #modalPage .dp-modal__brief[open] summary,
#modalOverlay #modalContact .contact-prepare[open] summary { border-radius:13px 13px 0 0!important; background:#f4f7fd!important; }
#modalOverlay #modalPage .dp-modal__brief summary:hover,
#modalOverlay #modalContact .contact-prepare summary:hover { background:#edf3fc!important; }
#modalOverlay #modalPage .dp-modal__brief summary:focus-visible,
#modalOverlay #modalContact .contact-prepare summary:focus-visible { outline:3px solid #7999e3!important; outline-offset:-3px!important; }
#modalOverlay #modalPage .dp-modal__brief summary::-webkit-details-marker,
#modalOverlay #modalContact .contact-prepare summary::-webkit-details-marker { display:none!important; }
#modalOverlay #modalPage .dp-modal__brief summary::after,
#modalOverlay #modalContact .contact-prepare summary::after {
    content:''!important; flex:0 0 16px!important; width:16px!important; height:16px!important;
    border:0!important; margin:0!important; background:currentColor!important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    transform:none!important; transition:transform .18s;
}
#modalOverlay #modalPage .dp-modal__brief[open] summary::after,
#modalOverlay #modalContact .contact-prepare[open] summary::after { transform:rotate(180deg)!important; }
#modalOverlay #modalContact .contact-prepare p {
    padding-inline:16px!important; margin:14px 0!important; color:#536783!important;
    font-size:13px!important; line-height:1.95!important;
}
#modalOverlay #modalContact .contact-channel-divider {
    grid-column:1/-1; display:flex; align-items:center; gap:12px; margin:4px 0 0;
    color:#61738f; font-size:12px; font-weight:500; line-height:1.8;
}
#modalOverlay #modalContact .contact-channel-divider::before,
#modalOverlay #modalContact .contact-channel-divider::after { content:''; flex:1; height:1px; background:#e0e7f3; }
#modalOverlay #modalContact .dp-modal__trust-row {
    display:flex!important; justify-content:center!important; flex-wrap:wrap; gap:12px 20px!important;
    width:100%; margin:0!important; padding:20px 0 0!important; border:0!important; border-top:1px solid #e2e9f4!important;
}
#modalOverlay #modalContact .dp-modal__trust-item { font-size:11px!important; }
#modalOverlay #modalContact .contact-direct-card:hover { transform:none!important; }
#modalOverlay #modalContact .contact-direct-card--phone:hover {
    background:linear-gradient(135deg,#2b56b5,#22428f)!important; border-color:#2b56b5!important;
}
#modalOverlay :is(#modalPortfolio,#modalBlog).dp-modal--detail > .dp-modal__header { display:none!important; }
#modalOverlay #modalPortfolio .portfolio-card__visual { height:150px!important; }
#modalOverlay #modalPortfolio .portfolio-card__content { padding:22px!important; }
#modalOverlay #modalPortfolio .portfolio-card { box-shadow:none!important; }
#modalOverlay #modalBlog .dp-modal__blog-title { font-size:18px!important; }
#modalOverlay #modalBlog .dp-modal__blog-desc { font-size:14px!important; }
#modalOverlay #modalBlog .dp-modal__detail-text { font-size:15px!important; line-height:2!important; }
body .sound-btn.sound-btn--modal-open {
    top:auto!important; bottom:20px!important; right:20px!important; left:auto!important;
    width:40px!important; height:40px!important; opacity:.85; box-shadow:none!important;
}
@media(max-width:700px) {
    #modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal] {
        width:100%!important; max-width:100%!important; border-radius:24px!important; max-height:calc(100dvh - 24px)!important;
    }
    #modalOverlay .dp-modal[data-modal] .dp-modal__topbar { min-height:60px!important; padding:8px 18px!important; }
    #modalOverlay .dp-modal[data-modal] .dp-modal__header { padding:18px 20px!important; }
    #modalOverlay .dp-modal[data-modal] .dp-modal__title { font-size:21px!important; }
    #modalOverlay .dp-modal[data-modal] .dp-modal__desc { font-size:13px!important; line-height:1.85!important; }
    #modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact) > .dp-modal__body { padding:20px 20px 22px!important; }
    #modalOverlay .dp-modal__filters { padding:12px 16px; gap:6px; }
    #modalOverlay .dp-modal__filter { gap:5px; padding:8px 9px; font-size:12px; flex:1 1 0; white-space:normal; text-align:center; line-height:1.55; }
    #modalOverlay .dp-modal__filter-count { display:none; }
    #modalOverlay #modalProducts .dp-modal__product-card { padding:18px!important; gap:0 12px!important; }
    #modalOverlay #modalProducts .dp-modal__product-title { font-size:18px!important; }
    #modalOverlay #modalProducts .dp-modal__product-desc { font-size:13px!important; }
    #modalOverlay :is(#modalPage,#modalProducts) > .dp-modal__actionbar {
        padding:12px 20px max(12px,env(safe-area-inset-bottom))!important;
        flex-direction:column!important; align-items:stretch!important; gap:8px!important;
    }
    #modalOverlay #modalProducts > .dp-modal__actionbar > span { font-size:12px!important; text-align:center; line-height:1.7; }
    #modalOverlay #modalPage .dp-modal__actionbar .dp-modal__next-desc { display:none!important; }
    #modalOverlay #modalPage .dp-modal__actionbar .dp-modal__next-title { font-size:12px!important; margin:0!important; text-align:center; }
    #modalOverlay :is(#modalPage,#modalProducts) .dp-modal__actionbar :is(.dp-modal__page-cta,.dp-modal__footer-cta-btn) {
        width:100%!important; flex:0 0 auto; align-self:stretch!important; font-size:13px!important; padding-inline:14px!important;
    }
    #modalOverlay #modalPage > .dp-modal__body--overview { display:block!important; }
    #modalOverlay #modalPage .dp-modal__fit {
        display:grid!important; grid-template-columns:40px minmax(0,1fr)!important; padding:16px!important;
        gap:5px 12px; margin-bottom:18px!important;
    }
    #modalOverlay #modalPage .dp-modal__fit-icon { width:40px!important; height:40px!important; margin:0!important; }
    #modalOverlay #modalPage .dp-modal__scope-title { padding-bottom:12px!important; }
    #modalOverlay #modalPage .dp-modal__deliverables li { padding:14px!important; gap:10px; }
    #modalOverlay #modalPage .dp-modal__deliverable-copy p { font-size:13px!important; }
    #modalOverlay #modalContact > .dp-modal__body { gap:22px!important; }
    #modalOverlay #modalContact .contact-direct-grid { grid-template-columns:minmax(0,1fr)!important; gap:12px!important; }
    #modalOverlay #modalContact .contact-direct-card { flex-direction:row!important; justify-content:flex-start!important; min-height:72px!important; padding:14px 16px!important; gap:14px!important; border-radius:14px!important; text-align:start!important; }
    #modalOverlay #modalContact .contact-direct-card:not(.contact-direct-card--phone) .contact-direct-card__content { align-items:flex-start!important; gap:3px!important; }
    #modalOverlay #modalContact .contact-direct-card .contact-direct-card__arrow { display:block!important; margin-inline-start:auto!important; }
    #modalOverlay #modalContact .contact-channel-divider { margin-block:8px 2px; }
    #modalOverlay #modalContact .contact-direct-card--phone { min-height:94px!important; padding:16px!important; gap:12px!important; }
    #modalOverlay #modalContact .contact-direct-card--phone .contact-direct-card__icon { width:40px!important; height:40px!important; flex-basis:40px!important; }
    #modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-val { font-size:22px!important; }
    #modalOverlay #modalContact .contact-direct-card:not(.contact-direct-card--phone) .dp-modal__quick-label { font-size:14px!important; }
    #modalOverlay #modalContact .contact-direct-card:not(.contact-direct-card--phone) .dp-modal__quick-val { font-size:12px!important; }
    #modalOverlay #modalContact .dp-modal__trust-row { gap:8px 12px!important; }
    #modalOverlay #modalPortfolio .portfolio-card__visual { height:140px!important; }
    #modalOverlay #modalPortfolio .portfolio-card__content { padding:18px!important; }
    #modalOverlay #modalBlog .dp-modal__blog-title { font-size:17px!important; }
    #modalOverlay #modalBlog .dp-modal__blog-desc { font-size:13px!important; }
    body .sound-btn.sound-btn--modal-open { display:none!important; }
}
@media(max-height:500px) and (min-width:701px) {
    #modalOverlay .dp-modal[data-modal] .dp-modal__header { padding:14px 24px!important; }
    #modalOverlay .dp-modal[data-modal] .dp-modal__desc { font-size:12px!important; margin-top:4px!important; }
    #modalOverlay :is(#modalPage,#modalProducts) > .dp-modal__actionbar { padding:10px 24px!important; }
    #modalOverlay #modalPage .dp-modal__actionbar .dp-modal__next-desc { display:none!important; }
}
@media(hover:none) { #modalOverlay #modalProducts .dp-modal__product-card:hover { transform:none!important; } }
@media(prefers-reduced-motion:reduce) {
    #modalOverlay .dp-modal__filter,
    #modalOverlay summary, #modalOverlay summary::after { transition:none!important; }
    #modalOverlay #modalProducts .dp-modal__product-card:hover { transform:none!important; }
}

/* Contact keeps one scroll surface so the toolbar and channels stay predictable. */
#modalOverlay #modalContact.dp-modal[data-modal] { overflow-y:auto!important; overflow-x:hidden!important; }
#modalOverlay #modalContact > .dp-modal__body { flex:0 0 auto!important; overflow:visible!important; overscroll-behavior:auto!important; }
#modalOverlay #modalContact > .dp-modal__header { flex:0 0 auto!important; }
#modalOverlay #modalContact > .dp-modal__topbar { position:sticky!important; top:0!important; z-index:8!important; }

@media(max-width:700px) {
 #modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-info { min-width:0!important; }
 #modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-val { font-size:20px!important; letter-spacing:0!important; white-space:nowrap!important; }
}

@media(max-width:360px) {
 #modalOverlay #modalContact .contact-direct-card--phone { gap:8px!important; padding-inline:12px!important; }
 #modalOverlay #modalContact .contact-direct-card--phone .contact-direct-card__arrow { display:none!important; }
 #modalOverlay #modalContact .contact-direct-card--phone .dp-modal__quick-val { font-size:16px!important; }
}

/* Liquid glass: one shell, legible content, and short entrance motion. */
#modalOverlay.dp-modal-overlay {
    --modal-muted:#445879; --dialog-muted:#445879;
    --modal-chrome:rgba(255,255,255,.97);
    --modal-header:linear-gradient(120deg,#fff,#f7faff);
    --modal-card:rgba(255,255,255,.98);
    --modal-action:#fff;
    --modal-content:#fbfdff;
    background:radial-gradient(ellipse at 12% 85%,rgba(54,134,160,.18),transparent 48%),linear-gradient(145deg,rgba(23,42,72,.44),rgba(23,42,72,.6))!important;
    backdrop-filter:blur(10px) saturate(1.05)!important;
    -webkit-backdrop-filter:blur(10px) saturate(1.05)!important;
}
#modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal] {
    --glass-x:76%; --glass-y:4%;
    border-color:rgba(255,255,255,.88)!important;
    box-shadow:0 26px 68px rgba(15,40,78,.2),0 4px 14px rgba(15,40,78,.07),inset 0 1px 0 rgba(255,255,255,.95),inset 1px 0 0 rgba(255,255,255,.38)!important;
}
#modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal]::before {
    content:''!important; display:block!important; position:absolute; inset:0; width:auto!important; height:auto!important; transform:none!important; animation:none!important;
    z-index:-1; pointer-events:none; border-radius:inherit;
    background:radial-gradient(ellipse at var(--glass-x) var(--glass-y),rgba(255,255,255,.68),rgba(255,255,255,.1) 40%,transparent 70%);
}
#modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal]::after {
    content:''!important; display:block!important; position:absolute; inset:0; width:auto!important; height:auto!important; transform:none!important; animation:none!important;
    z-index:9; pointer-events:none; border-radius:inherit; background:none!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset -1px 0 0 rgba(255,255,255,.2);
}
#modalOverlay .dp-modal__close:not([data-modal-close-mode=back]) svg { transition:rotate .22s cubic-bezier(.2,.8,.2,1); }
#modalOverlay .dp-modal__close:not([data-modal-close-mode=back]):is(:hover,:focus-visible) svg { rotate:90deg; }
#modalOverlay #modalContact :is(.contact-channel-divider,.dp-modal__trust-item) { color:#445879!important; }
#modalOverlay .dp-modal__filters { background:var(--modal-chrome)!important; }
#modalOverlay #modalPage .dp-modal__fit { background:linear-gradient(145deg,#f0f6ff,#f6fafc)!important; border-color:#dce7f5!important; }
#modalOverlay #modalPage .dp-modal__deliverables li { background:var(--modal-card)!important; }
#modalOverlay :is(#modalProducts,#modalPage) .dp-modal__actionbar :is(.dp-modal__page-cta,.dp-modal__footer-cta-btn) {
    border:1px solid rgba(36,69,153,.44)!important;
    box-shadow:0 6px 16px rgba(48,83,169,.18),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    #modalOverlay.dp-modal-overlay {
        --modal-surface:linear-gradient(135deg,rgba(255,255,255,.98),rgba(247,250,255,.97) 60%,rgba(252,252,255,.98));
    }
    #modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal] {
        backdrop-filter:blur(20px) saturate(135%); -webkit-backdrop-filter:blur(20px) saturate(135%);
    }
}
@keyframes dp-glass-arrive {
    from { translate:0 16px; scale:.972; }
    76% { translate:0 -1px; scale:1.003; }
    to { translate:0 0; scale:1; }
}
@keyframes dp-glass-content {
    from { opacity:0; translate:0 8px; }
    to { opacity:1; translate:0 0; }
}
@media(prefers-reduced-motion:no-preference) {
    #modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal].dp-modal--active {
        animation:dp-glass-arrive .34s cubic-bezier(.16,1,.3,1) both!important;
    }
    #modalOverlay .dp-modal.dp-modal--active > .dp-modal__body {
        animation:dp-glass-content .24s .04s cubic-bezier(.16,1,.3,1) both!important;
    }
}
@media(max-width:700px) {
    #modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal] {
        backdrop-filter:blur(12px) saturate(125%); -webkit-backdrop-filter:blur(12px) saturate(125%);
    }
}
@media(prefers-reduced-motion:reduce) {
    #modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal].dp-modal--active,
    #modalOverlay .dp-modal.dp-modal--active > .dp-modal__body {
        animation:none!important; translate:none!important; scale:none!important;
    }
    #modalOverlay .dp-modal__close:not([data-modal-close-mode=back]) svg,
    #modalOverlay .dp-modal__close:not([data-modal-close-mode=back]):is(:hover,:focus-visible) svg { transition:none!important; rotate:none!important; }
}
@media(prefers-reduced-transparency:reduce) {
    #modalOverlay.dp-modal-overlay {
        --modal-surface:#f8faff; --modal-chrome:#fff; --modal-header:#f5f8fe; --modal-card:#fff; --modal-action:#fff; --modal-content:#fff;
    }
    #modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal] {
        backdrop-filter:none; -webkit-backdrop-filter:none;
    }
    #modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal]::before { display:none!important; }
}
@media(forced-colors:active) {
    #modalOverlay.dp-modal-overlay { --modal-surface:Canvas; --modal-chrome:Canvas; --modal-header:Canvas; --modal-card:Canvas; --modal-action:Canvas; --modal-content:Canvas; }
    #modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal]::before,
    #modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal]::after { display:none!important; }
}

/* Compact services: scan the scope first, expand the full brief when needed. */
#modalOverlay #modalPortfolio .portfolio-case__category { display:flex; margin-bottom:14px; }
#modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__header { padding:16px 24px 18px!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__title { font-size:26px!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__desc { margin-top:5px!important; font-size:15px!important; }
#modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__body--overview {
    display:grid!important; grid-template-columns:minmax(170px,.8fr) minmax(0,1.5fr);
    align-items:start; gap:0 16px; padding:18px 24px 22px!important;
}
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__fit {
    grid-column:1; grid-row:1/3; display:flex!important; flex-direction:column; align-items:flex-start;
    height:100%!important; gap:0; padding:16px!important; margin:0!important;
}
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__fit-icon { width:40px!important; height:40px!important; margin:0 0 10px!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__fit-icon svg { width:24px!important; height:24px!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__fit h3 { font-size:13px!important; margin:0 0 5px!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__fit p { font-size:14px!important; line-height:1.85!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__scope-title { padding-bottom:10px!important; font-size:14px!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__deliverables { gap:8px!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__deliverables li {
    grid-template-columns:36px minmax(0,1fr)!important; align-items:center!important;
    gap:12px!important; padding:12px 14px!important;
}
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__deliverable-icon { width:36px!important; height:36px!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__deliverable-icon svg { width:21px!important; height:21px!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__deliverable-title { margin:0!important; font-size:16px!important; line-height:1.65!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__brief { margin-top:16px!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__brief summary { min-height:52px!important; padding:12px 14px!important; font-size:14px!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__brief :is(dt,dd) { font-size:14px!important; line-height:1.85!important; }
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__actionbar .dp-modal__page-cta { font-size:14px!important; }
#modalOverlay #modalPage .dp-modal__brief-scope { display:grid; gap:14px; padding:16px; border-bottom:1px solid var(--dialog-rule); }
#modalOverlay #modalPage .dp-modal__brief-scope h4 { margin:0 0 4px; color:var(--dialog-ink); font-size:14px; font-weight:650; line-height:1.8; }
#modalOverlay #modalPage .dp-modal__brief-scope p { margin:0; color:var(--modal-muted); font-size:14px; line-height:1.9; }
@media(max-width:700px) {
    #modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__header { padding:14px 18px 16px!important; }
    #modalOverlay #modalPage.dp-modal--service-compact .dp-modal__title { font-size:23px!important; }
    #modalOverlay #modalPage.dp-modal--service-compact .dp-modal__desc { font-size:14px!important; }
    #modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__body--overview { display:block!important; padding:16px 18px 18px!important; }
    #modalOverlay #modalPage.dp-modal--service-compact .dp-modal__fit {
        display:grid!important; grid-template-columns:40px minmax(0,1fr)!important;
        gap:3px 12px; padding:12px 14px!important; height:auto!important; margin-bottom:16px!important;
    }
    #modalOverlay #modalPage.dp-modal--service-compact .dp-modal__fit-icon { margin:0!important; align-self:center; }
    #modalOverlay #modalPage.dp-modal--service-compact .dp-modal__fit h3 { margin:0!important; }
    #modalOverlay #modalPage.dp-modal--service-compact .dp-modal__actionbar .dp-modal__next-copy { display:none!important; }
}

@media(max-height:500px) and (min-width:701px) {
    #modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__topbar { min-height:52px!important; padding:4px 20px!important; }
    #modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__header { padding:10px 20px!important; }
    #modalOverlay #modalPage.dp-modal--service-compact .dp-modal__title { font-size:20px!important; line-height:1.45!important; }
    #modalOverlay #modalPage.dp-modal--service-compact .dp-modal__desc { display:none!important; }
    #modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__body--overview { padding:14px 20px 18px!important; }
    #modalOverlay #modalPage.dp-modal--service-compact .dp-modal__actionbar .dp-modal__next-copy { display:none!important; }
    #modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__actionbar { padding:10px 20px!important; }
    #modalOverlay #modalPage.dp-modal--service-compact .dp-modal__actionbar .dp-modal__page-cta { width:100%!important; }
}

/* Pearl surfaces keep content bright; the glass remains in the shell and rim. */
#modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal] > .dp-modal__body {
    background:var(--modal-content,#fbfdff)!important;
}
#modalOverlay :is(#modalProducts,#modalPortfolio,#modalBlog,#modalPage,#modalContact).dp-modal[data-modal] > .dp-modal__header {
    background:var(--modal-header,#f8fbff)!important;
}
/* Intrinsic rows prevent an expanded brief from overflowing its grid track. */
#modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__body--overview {
    grid-template-rows:repeat(3,max-content)!important; grid-auto-rows:max-content!important;
    align-content:start!important; padding-bottom:32px!important;
}
#modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__actionbar {
    padding:18px 24px max(24px,env(safe-area-inset-bottom))!important;
    background:var(--modal-action,#fff)!important;
    box-shadow:0 -2px 12px rgba(35,66,110,.035)!important;
}
#modalOverlay #modalPage.dp-modal--service-compact .dp-modal__brief dl { padding:18px 16px 24px!important; }
#modalOverlay #modalPage.dp-modal--service-art > .dp-modal__body--overview {
    grid-template-columns:minmax(190px,.95fr) minmax(0,1.5fr)!important;
}
#modalOverlay #modalPage.dp-modal--service-art .dp-modal__fit-icon {
    width:72px!important; height:72px!important; padding:0!important; margin:0 0 8px!important;
    border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important;
}
#modalOverlay #modalPage .dp-modal__fit-icon .service-card__art {
    display:block; width:100%; height:100%; max-width:none; object-fit:contain;
}
@media(max-width:700px) {
    #modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__body--overview { padding-bottom:28px!important; }
    #modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__actionbar {
        padding:16px 20px max(22px,env(safe-area-inset-bottom))!important;
    }
    #modalOverlay #modalPage.dp-modal--service-art .dp-modal__fit { grid-template-columns:64px minmax(0,1fr)!important; }
    #modalOverlay #modalPage.dp-modal--service-art .dp-modal__fit-icon { width:64px!important; height:64px!important; margin:0!important; }
}
@media(max-height:500px) and (min-width:701px) {
    #modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__body--overview { padding-bottom:24px!important; }
    #modalOverlay #modalPage.dp-modal--service-compact > .dp-modal__actionbar {
        padding:12px 20px max(16px,env(safe-area-inset-bottom))!important;
    }
    #modalOverlay #modalPage.dp-modal--service-art .dp-modal__fit-icon { width:56px!important; height:56px!important; }
}


/* Contact location is part of the header rhythm rather than another card. */
#modalOverlay #modalContact .contact-location {
    display:inline-flex; align-items:center; gap:7px; max-width:100%; margin-top:8px;
    color:var(--dialog-muted); font-size:12px; line-height:1.8; text-align:start;
}
#modalOverlay #modalContact .contact-location svg {
    flex:none; width:16px; height:16px; color:var(--dialog-blue);
}
@media(max-width:600px) {
    #modalOverlay #modalContact .contact-location { margin-top:7px; font-size:11px; line-height:1.75; }
}

/* Farnam Dental project screenshot: keep the complete page visible at every size. */
#modalOverlay #modalPortfolio .portfolio-grid { grid-template-columns:minmax(0,1fr)!important; }
#modalOverlay #modalPortfolio .portfolio-card--featured {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); align-items:stretch;
}
#modalOverlay #modalPortfolio .portfolio-card--featured .portfolio-card__content { order:1; justify-content:center; }
#modalOverlay #modalPortfolio .portfolio-card--featured .portfolio-card__visual { order:2; }
#modalOverlay #modalPortfolio .portfolio-card__visual--screenshot {
    height:auto!important; padding:12px!important; align-content:center; border-bottom:0!important;
    border-inline-start:1px solid var(--modal-line); background:#f7f7f0!important;
}
#modalOverlay #modalPortfolio .portfolio-preview {
    display:block; width:100%; height:auto; aspect-ratio:1283 / 837; object-fit:contain;
    border-radius:10px; background:#f7f7f0;
}
#modalOverlay #modalPortfolio .portfolio-card__visual--screenshot::after { display:none; }
#modalOverlay #modalPortfolio .portfolio-card__visual--screenshot .portfolio-card__number { display:none; }
#modalOverlay #modalPortfolio .portfolio-case__hero { grid-template-columns:minmax(0,1fr); }
#modalOverlay #modalPortfolio .portfolio-case__visual--screenshot { overflow:hidden; }
#modalOverlay #modalPortfolio .portfolio-case__footer { flex-wrap:wrap; gap:10px; }
@media(max-width:700px) {
    #modalOverlay #modalPortfolio .portfolio-card--featured { grid-template-columns:minmax(0,1fr); }
    #modalOverlay #modalPortfolio .portfolio-card--featured .portfolio-card__visual { order:0; border-inline-start:0; border-bottom:1px solid var(--modal-line)!important; }
    #modalOverlay #modalPortfolio .portfolio-case__footer .catalog-action { flex:1 1 auto; }
}