/* ============================================================
   "Need To Sell Your House?" (DynamicPages?id=34) - isolated hero.
   Every rule is scoped under .sell-hero so no other DynamicPage /
   TemplateID layout sharing the same view is affected.

   Content boundary: the headline, both paragraphs, and the
   "CLICK HERE TO SELL YOUR HOUSE" link are raw CMS HTML (rendered from
   the page's description field) - this file only centers and styles
   them. No copy is added, removed, or edited here.

   Typography: the site body face ('Source Sans Pro'), same as Contact /
   RealtorIndex, so this page matches every other page on the branch.
   ============================================================ */

.sell-hero {
    --sell-bg: #f7f5f157;
    --sell-heading: #252525;
    --sell-text: #707070;
    --sell-green: #21b389;
    --sell-green-dark: #1a9873;
    --sell-navy: #16233a;
    --sell-border: #e8e4dc;
    background: var(--sell-bg);
    color: var(--sell-text);
    font-family: 'Source Sans Pro', sans-serif;
    padding: 64px 24px 76px;
    text-align: center;
}

.sell-hero-inner {
    max-width: 820px;
    margin: 0 auto;
}

/* ---------- Headline ----------
   Rendered from the CMS heading field (CHeading/LHeading) into .sell-title;
   any heading tag that happens to live inside the description blob gets
   the same treatment. Color is forced so CMS inline styles can't override
   the page palette. */
.sell-title,
.sell-hero-body :is(h1, h2, h3, h4) {
    color: #252525 !important;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.15;
    margin: 0 0 20px;
    text-wrap: balance;
}

/* Green accent bar under the headline - same treatment as the Our Services
   and Realtor pages, so the dynamic pages read as part of the same set. */
.sell-title {
    margin-bottom: 0;
}

.sell-rule {
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: var(--sell-green);
    margin: 14px auto 20px;
}

.sell-hero-body p,
.sell-hero-body form.SubmitDynamicForm {
    font-size: 1rem;
    line-height: 1.65;
    max-width: 760px;
    margin: 0 auto 16px;
}

    .sell-hero-body p:last-of-type {
        margin-bottom: 0;
    }

/* The CMS copy opens with an empty first paragraph (just <span><br></span>)
   that only adds vertical space - hide it. */
.sell-hero-body > p:first-child {
    display: none !important;
}

/* Force the muted-grey body color + 600 weight from the reference,
   overriding any inline color/weight the CMS wrapped the copy in. The
   CTA link and everything inside it are re-styled below so this never
   touches the button. */
.sell-hero-body :is(p, span, font, div, b, strong, em, i, li, form.SubmitDynamicForm) {
    color: #707070 !important;
    font-weight: 500 !important;
}

/* The "CLICK HERE TO SELL YOUR HOUSE" link -> prominent green pill.
   Scoped to links inside the hero copy; text/href/target stay exactly as
   the CMS renders them. */
.sell-hero-body a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
    background: var(--sell-green);
    color: #fff !important;
    text-decoration: none !important;
    /* Render the CMS link text as authored, instead of the ALL-CAPS a
       site-wide rule was forcing on it. */
    text-transform: none !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 15px 32px;
    border-radius: 10px;
    transition: background-color .15s ease, transform .1s ease;
}

    .sell-hero-body a:hover,
    .sell-hero-body a:focus {
        background: var(--sell-green-dark) !important;
        color: #fff !important;
        transform: translateY(-1px);
    }

    /* Keep the button label (and any span/icon inside it) white and bold,
       winning over the grey/600 body-text rule above. */
    .sell-hero-body a,
    .sell-hero-body a :is(span, b, strong, em, i, font, div) {
        color: #fff !important;
        font-weight: 500 !important;
    }

@media (max-width: 800px) {
    .sell-hero {
        padding: 44px 20px 56px;
    }

    /* Tighter CTA on narrow screens - less gap above it and a smaller pill,
       so the button doesn't dominate the stacked layout. */
    .sell-hero-body a {
        margin-top: 20px;
        padding: 13px 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sell-hero-body a:hover,
    .sell-hero-body a:focus {
        transform: none;
    }
}