/* =========================================================
   CTA BAND + GOOGLE RATING STRIP (just above the footer, every page)
   "Let's Build Your Success Story" band in the site colours (navy/black like the
   header and footer, brand red accent; orange + blue glow in the dark theme) with two
   pill buttons, then a light strip with the Google rating.
========================================================= */

.dm-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 42px clamp(20px, 3.4vw, 48px);
    color: #ffffff;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    background: #0b1424;
}
/* faded photo behind the navy */
.dm-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("images/business.jpg") center 40% / cover no-repeat;
    opacity: .22;
    filter: grayscale(.6);
}
.dm-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at 88% 50%, rgba(233, 29, 43, .28), transparent 55%),
        linear-gradient(90deg, rgba(8, 14, 26, .97) 0%, rgba(16, 39, 68, .9) 55%, rgba(16, 39, 68, .82) 100%);
}

.dm-cta-inner {
    max-width: 1450px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px 48px;
    flex-wrap: wrap;
}

.dm-cta-text { flex: 1 1 520px; min-width: 0; }
.dm-cta-text h2 {
    margin: 0 0 12px;
    color: #ffffff;
    /* same font style and size as the Our Services heading (style.css .dm-services-heading h2) */
    font: 700 clamp(30px, 4vw, 48px)/1.15 Arial, Helvetica, sans-serif;
}
.dm-cta-text p {
    max-width: 820px;
    margin: 0;
    color: rgba(255, 255, 255, .94);
    font: 500 clamp(15px, 1.15vw, 19px)/1.7 'Montserrat', Arial, Helvetica, sans-serif;
}

.dm-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-right: clamp(0px, 8vw, 200px);
}

/* pill buttons: label | divider | chevron */
.dm-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: 56px;
    padding: 0 22px 0 24px;
    border-radius: 999px;
    font: 800 15px/1 'Montserrat', Arial, Helvetica, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.dm-cta-btn::after {
    content: "";
    width: 1px;
    height: 28px;
    background: currentColor;
    opacity: .4;
    order: 1;
}
.dm-cta-btn svg {
    order: 2;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease;
}
.dm-cta-btn:hover,
.dm-cta-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.dm-cta-btn:hover svg { transform: translateX(3px); }
.dm-cta-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

.dm-cta-btn.is-primary { background: #e91d2b; color: #ffffff; }   /* brand red, as the top contact strip */
.dm-cta-btn.is-primary:hover { background: #f32932; }
.dm-cta-btn.is-light { background: #ffffff; color: #111827; }

/* ---------- Google rating strip ---------- */
.dm-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 24px;
    padding: 22px 20px;
    background: #f8fafc;
    border-top: 3px solid #e91d2b;
    color: #111827;
    font: 500 clamp(15px, 1.15vw, 19px)/1.3 'Montserrat', Arial, Helvetica, sans-serif;
}
.dm-rating-brand { display: inline-flex; align-items: center; gap: 18px; }
.dm-rating-brand svg { width: 42px; height: 42px; flex: 0 0 auto; }
.dm-rating-brand span { font-weight: 600; color: #333; }

.dm-rating-stars { display: inline-flex; gap: 4px; }
.dm-rating-stars i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: #f6c40a;
}
.dm-rating-stars i svg { width: 24px; height: 24px; fill: #ffffff; }

.dm-rating-text b { font-weight: 700; }

/* dark theme */
/* dark theme: black band with the site's blue + orange glow, orange main button */
html[data-theme="dark"] .dm-cta { background: #000; }
html[data-theme="dark"] .dm-cta::after {
    background:
        radial-gradient(ellipse at 12% 0%, rgba(11, 206, 252, .28), transparent 55%),
        radial-gradient(ellipse at 88% 100%, rgba(167, 139, 250, .22), transparent 55%),
        linear-gradient(90deg, rgba(0, 0, 0, .94), rgba(5, 8, 14, .86));
}
html[data-theme="dark"] .dm-cta-btn.is-primary { background: #a78bfa; }
html[data-theme="dark"] .dm-cta-btn.is-primary:hover { background: #c4b5fd; }
html[data-theme="dark"] .dm-rating { background: #07090f; color: #e8eefc; border-top: 1px solid rgba(167, 139, 250, .55); }
html[data-theme="dark"] .dm-rating-brand span { color: #c9d3e8; }

@media (max-width: 900px) {
    .dm-cta-actions { margin-right: 0; }
}
@media (max-width: 700px) { .dm-cta-text h2 { font-size: 29px; line-height: 1.2; } }
@media (max-width: 420px) { .dm-cta-text h2 { font-size: 26px; } }
@media (max-width: 600px) {
    .dm-cta { padding: 36px 20px; }
    .dm-cta-actions { width: 100%; flex-direction: column; gap: 12px; }
    .dm-cta-btn { height: 52px; font-size: 14px; }
    .dm-cta-btn span { flex: 1; }   /* label fills the pill; divider + arrow sit together on the right */
    .dm-rating { flex-direction: column; text-align: center; padding: 22px 20px 26px; }
    .dm-rating-stars i { width: 32px; height: 32px; }
}

/* "Let's Build Your Success Story" band: white background, red text - in both themes
   (no dark overlay or photo); the white "Talk to an expert" pill becomes a red outline */
html .dm-cta.dm-cta {                  /* doubled class: outranks the dark theme band */
    background: #f4f4f4;                  /* light grey, as the Send Your Query box */
    color: #222;
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
}
html .dm-cta.dm-cta::before,
html .dm-cta.dm-cta::after { display: none; }
html .dm-cta-text h2 { color: #000; }                 /* heading in black */
html .dm-cta-text p { color: #222; }                  /* line under the heading: near-black, as the query box */
html .dm-cta .dm-cta-btn.is-primary { background: #e91d2b; color: #fff; }
html .dm-cta .dm-cta-btn.is-primary:hover { background: #f32932; }
html .dm-cta .dm-cta-btn.is-light {
    background: transparent;
    color: #e91d2b;
    box-shadow: inset 0 0 0 2px #e91d2b;
}
html .dm-cta .dm-cta-btn.is-light:hover,
html .dm-cta .dm-cta-btn.is-light:focus-visible { background: #fff5f5; box-shadow: inset 0 0 0 2px #e91d2b, 0 10px 24px rgba(233, 29, 43, .15); }
html .dm-cta .dm-cta-btn:focus-visible { outline-color: #e91d2b; }
/* no coloured line between the band and the Google rating strip */
html .dm-rating.dm-rating { border-top: 0; }

/* dark theme: the band shows the site's animated space background (stars + network, from
   site-space.js) instead of white - white text, orange main button, white outline button */
html[data-theme="dark"] .dm-cta.dm-cta {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .dm-cta-text h2 { color: #fff; }
html[data-theme="dark"] .dm-cta-text p { color: rgba(255, 255, 255, .86); }
html[data-theme="dark"] .dm-cta .dm-cta-btn.is-primary { background: #a78bfa; color: #fff; }
html[data-theme="dark"] .dm-cta .dm-cta-btn.is-primary:hover { background: #c4b5fd; }
html[data-theme="dark"] .dm-cta .dm-cta-btn.is-light {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}
html[data-theme="dark"] .dm-cta .dm-cta-btn.is-light:hover,
html[data-theme="dark"] .dm-cta .dm-cta-btn.is-light:focus-visible { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px #fff, 0 10px 24px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .dm-cta .dm-cta-btn:focus-visible { outline-color: #fff; }

/* phones: the two pills are compact - sized to their labels, side by side when they fit */
@media (max-width: 600px) {
    .dm-cta .dm-cta-actions { width: auto; flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .dm-cta .dm-cta-btn {
        height: 38px;
        gap: 8px;
        padding: 0 11px 0 14px;
        font-size: 10.5px;
        letter-spacing: .03em;
    }
    .dm-cta .dm-cta-btn span { flex: 0 0 auto; }
    .dm-cta .dm-cta-btn::after { height: 18px; }
    .dm-cta .dm-cta-btn svg { width: 12px; height: 12px; }
}

/* =========================================================
   PILL SHAPE: the band itself is plain (white in light theme, see-through to the animated
   background in dark), and its content sits in a rounded pill (capsule) - light grey like
   the Send Your Query box in light theme, faint glass in dark. On narrow screens, where
   the content stacks, the pill becomes a rounded card (a full capsule would cut the corners).
========================================================= */
html .dm-cta.dm-cta {
    background: #fff;
    border-top: 0;
    border-bottom: 0;
    padding: clamp(28px, 4vw, 44px) clamp(16px, 4vw, 48px);
}
html[data-theme="dark"] .dm-cta.dm-cta { background: transparent; border: 0; }
html .dm-cta .dm-cta-inner {
    max-width: 1280px;
    padding: clamp(26px, 3vw, 38px) clamp(28px, 5vw, 64px);
    border: 1px solid #e4e4e4;
    border-radius: 999px;
    background: #f4f4f4;
    box-shadow: 0 10px 30px rgba(16, 24, 39, .06);
}
html[data-theme="dark"] .dm-cta .dm-cta-inner {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
@media (max-width: 1100px) {
    html .dm-cta .dm-cta-inner { border-radius: 36px; }
}
@media (max-width: 600px) {
    html .dm-cta .dm-cta-inner { padding: 26px 22px; border-radius: 28px; }
}
/* in the pill: text on the left, buttons on the right, on one line where there is room */
html .dm-cta .dm-cta-actions { margin-right: 0; flex: 0 0 auto; }
html .dm-cta .dm-cta-text { flex: 1 1 440px; }

/* slimmer, longer pill with a clear drop shadow (desktop); phones keep the rounded card */
html .dm-cta .dm-cta-inner {
    max-width: 1440px;
    padding: 16px 20px 16px clamp(28px, 4vw, 52px);
    box-shadow: 0 18px 40px rgba(16, 24, 39, .16), 0 4px 12px rgba(16, 24, 39, .08);
}
html[data-theme="dark"] .dm-cta .dm-cta-inner { box-shadow: 0 18px 44px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04); }
html .dm-cta.dm-cta { padding-left: clamp(12px, 2.4vw, 32px); padding-right: clamp(12px, 2.4vw, 32px); }
html .dm-cta .dm-cta-text h2 { margin-bottom: 4px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; }
html .dm-cta .dm-cta-text p { font-size: 14px; line-height: 1.5; }
html .dm-cta .dm-cta-btn { height: 46px; }
@media (max-width: 1100px) {
    html .dm-cta .dm-cta-inner { padding: 22px 28px; }
}
@media (max-width: 600px) {
    html .dm-cta .dm-cta-inner { padding: 22px 20px; }
    html .dm-cta .dm-cta-btn { height: 38px; }
}
/* the line under the heading on a single line where the pill is wide enough: the text
   block keeps its full width (never squeezed under the buttons) and the buttons are a
   little more compact to make room */
@media (min-width: 1340px) {
    html .dm-cta .dm-cta-inner { column-gap: 28px; }
    html .dm-cta .dm-cta-text { flex: 1 0 auto; }
    html .dm-cta .dm-cta-text p { max-width: none; font-size: 13px; white-space: nowrap; }
    html .dm-cta .dm-cta-actions { gap: 12px; }
    html .dm-cta .dm-cta-btn { gap: 12px; padding: 0 16px 0 20px; letter-spacing: .06em; }
}
/* common 1340-1439px laptops: a touch smaller so text + buttons still fit on one line */
@media (min-width: 1340px) and (max-width: 1439px) {
    html .dm-cta .dm-cta-inner { padding-left: 36px; }
    html .dm-cta .dm-cta-text p { font-size: 12.5px; }
}
/* a little wider (taller) pill: more room above and below the content */
@media (min-width: 1101px) {
    html .dm-cta .dm-cta-inner { padding-top: 26px; padding-bottom: 26px; }
}
/* more space between the two buttons */
html .dm-cta .dm-cta-actions { gap: 24px; }
@media (min-width: 1340px) and (max-width: 1439px) {
    html .dm-cta .dm-cta-inner { column-gap: 14px; }   /* keeps the wider button spacing on one line */
}
/* wider pill: nearly edge to edge (16px from the screen edges), up to 1600px */
html .dm-cta.dm-cta { padding-left: 16px; padding-right: 16px; }
html .dm-cta .dm-cta-inner { max-width: 1600px; }
/* card shape (like the reference strip): softly rounded rectangle, white, hairline border, faint shadow */
html .dm-cta .dm-cta-inner { border-radius: 18px; background: #fff; border: 1px solid #ececec; box-shadow: 0 2px 10px rgba(16,24,39,.05); }
html[data-theme="dark"] .dm-cta .dm-cta-inner { border-radius: 18px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); box-shadow: 0 2px 14px rgba(0,0,0,.35); }
@media (max-width:1100px){ html .dm-cta .dm-cta-inner, html[data-theme="dark"] .dm-cta .dm-cta-inner { border-radius: 16px; } }
@media (max-width:600px){ html .dm-cta .dm-cta-actions { gap: 10px; } }
@media (max-width:600px){ html .dm-cta .dm-cta-actions { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; } }

/* dark theme: the rating strip lets the page background (sparklayer-style navy glow) show through,
   with hairline lines above and below in place of a solid black band */
html[data-theme="dark"] .dm-rating.dm-rating { background: rgba(255, 255, 255, .025); border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }