/* About Us hero */
.remark-about-hero.remark-section {
    padding: 60px 24px 0; /* tightened top spacing */
    min-height: 720px;
    background-color: #F4F4F4;
    display: flex;
    flex-wrap: wrap; /* allow inner + media to stack when needed */
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

.remark-about-hero__inner {
    /* Limit the content width on desktop so title line wrapping matches
       editorial expectations (3-line title). Use 1200px as the desktop
       max-width to provide slightly more horizontal space than the title
       itself and ensure alignment of neighboring media. */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    flex: 1 1 100%; /* occupy full row within the hero so media can sit below */
    display: flex;
    flex-direction: column;
    align-items: center; /* center badge and title horizontally */
    text-align: center;  /* center text like title and subtitle */
    gap: 32px;
    position: relative;
    z-index: 1;
}

/* Ensure badges in the About hero have a white background so they read on the
   hero's gray background. Use !important to override any data-on-white
   detection styling that may otherwise invert the color. */
.remark-about-hero .g-badge {
    background-color: var(--remark-color-white) !important;
    box-shadow: none;
}

.remark-about-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 999px;
    background-color: var(--remark-color-white);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: var(--remark-font-body);
    box-shadow: none; /* flattened */
}

.remark-about-hero__badge {
    margin: 0 auto; /* ensure badge centers inside the inner container */
}

.remark-about-hero__inner--center,
.remark-about-hero__inner.center {
    align-items: center;
    text-align: center;
}

.remark-about-hero__badge--center,
.remark-about-hero__badge.center {
    margin-left: auto;
    margin-right: auto;
}

.remark-about-hero__badge-text,
.remark-about-hero__highlight {
    background-image: linear-gradient(90deg, var(--remark-color-highlight-start), var(--remark-color-highlight-end));
    background-size: 200% 100%;
    background-position: 200% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.remark-about-hero__title {
    /* allow up to 1200px wide on desktop so long title lines don't wrap
       unexpectedly. We keep a min width and responsive clamp for smaller
       viewports. */
    max-width: 1200px;
    width: clamp(540px, 70vw, 1200px);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 400; /* 400 requested */
    line-height: 72px; /* explicit 72px line-height requested */
    color: var(--remark-color-primary);
}

/* Desktop-only: constrain the very first title span to 1200px max-width
   using the full elementor selector from the template. The span must be
   inline-block for width constraints to apply without forcing full width
   on the inline text. This targets the desktop title only (non-mobile)
   so mobile behavior remains unchanged. */
@media (min-width: 1025px) {
    #content > div.page-content > div > div.elementor-element.elementor-element-ec64b27.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > section > div > h1.remark-about-hero__title.remark-about-hero__title--desktop > span:nth-child(1) {
        display: inline-block;
        max-width: 1200px;
        width: 100%;
        box-sizing: border-box; /* ensure padding doesn't exceed max width */
    }
}

/* Ensure the title in desktop uses the full inner container width and the
   first line doesn't wrap. We use a class-only selector so this doesn't
   break if Elementor replaces the elementor-id. */
@media (min-width: 1025px) {
    .remark-about-hero__inner .remark-about-hero__title.remark-about-hero__title--desktop {
        /* Allow the title to expand to the inner container's max-width */
        width: 100%;
        max-width: 1200px;
    }

    .remark-about-hero__title.remark-about-hero__title--desktop > span:first-child,
    .remark-about-hero__title.remark-about-hero__title--desktop > .remark-about-hero__title-line:first-child {
        display: inline-block; /* so width and no-wrap can apply */
        white-space: nowrap; /* force it to stay on one line */
        overflow-wrap: normal;
        word-break: keep-all;
        max-width: none; /* don't cap it further here */
    }
}

.remark-about-hero__title-line {
    display: block;
    font-size: 64px; /* explicit 64px font-size requested */
    line-height: 72px; /* ensure each line span matches the requested line height */
}

/* When lines are programmatically merged we allow a slightly smaller font-size
   and prevent wrapping so the combined phrase is more likely to render on one row. */
.remark-about-hero__title-line--merged {
    white-space: nowrap;
    font-size: 56px; /* slightly reduced to help fitting merged phrases */
    line-height: 72px;
    display: block;
}

.remark-about-hero__title--mobile {
    display: none;
}

.remark-about-hero__subtitle {
    margin: 0;
    width: clamp(360px, 45vw, 540px);
    font-family: var(--remark-font-body);
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.7;
    color: var(--remark-color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.remark-about-highlight__badge-dot svg {
    width: 34px;
    height: 34px;
    display: block;
}

.remark-about-hero__media {
    /* Make the hero media part of the normal flow so it renders after the
       title/inner content. Keep a fixed visual width on large screens but
       allow it to shrink responsively. Keep it visually behind text via
       z-index and non-interactive on desktop. */
    position: relative;
    /* make the media occupy its own row in the flex container so it
       always renders after the inner content */
    /* allow the media to sit on its own row but be capped to 1000px */
    flex: 0 0 100%;
    width: auto; /* don't force full-width */
    max-width: 1000px; /* container capped at 1000px */
    margin: 32px auto 0; /* space above and center horizontally */
    display: flex; /* center the inner image horizontally */
    justify-content: center;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: none; /* flattened hero media */
    z-index: 0; /* inner content remains z-index:1 so text sits above */
    pointer-events: none; /* keep non-interactive on desktop */
    background: transparent;
}

.remark-about-hero__image {
    max-width: 1000px; /* never exceed 1000px */
    width: 100%;
    height: auto;
    object-fit: cover; /* keep object-fit for cases where the img is taller/wider */
    display: block;
}

/* Shared button pattern brought over from home hero */
.button {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 6.25rem;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.2rem;
    font-weight: 600;
    gap: 0.36em;
    justify-content: center;
    letter-spacing: -0.01em;
    line-height: 1.04;
    overflow: hidden;
    padding: 0.9375rem 1.5rem;
    position: relative;
    text-decoration: none;
    word-break: break-word;
}

@media (hover: hover) {
    .button:hover {
        color: var(--remark-color-white);
        text-decoration: none;
    }
}

.button__label {
    position: relative;
    z-index: 1;
    text-align: center;
    transition: color 0.15s var(--ease-in-out-quart);
    display: inline-flex;
    align-items: center;
}

.button__label::after {
    /* decorative arrow removed; handled by global override */
    content: none;
    display: none;
}

.button:hover .button__label {
    transition: color 0.15s var(--ease-in-out-quart);
}

.button__flair {
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.button .button__flair {
    transform: scale(0);
    transform-origin: 0 0;
    will-change: transform;
}

.button__flair:before {
    /* Match the global button flair sizing/position so animation behaves
       identically between About and Home BD. Use the larger 280% size and
       center the pseudo-element so GSAP transforms look the same. */
    aspect-ratio: 1/1;
    background-color: #D71921;
    border-radius: 50%;
    content: '';
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    width: 280%;
    height: 280%;
    transition: transform 0.6s var(--ease-out-cubic), opacity 0.6s var(--ease-out-cubic);
}

.remark-about-hero__cta {
    background-color: var(--remark-color-primary);
    color: var(--remark-color-white);
}

/* per-page arrow decorations removed; global override will hide ::after pseudo-elements */

@media (max-width: 991px) {
    .remark-about-hero__title--desktop {
        display: none;
    }

    .remark-about-hero__title--mobile {
        display: flex;
    }
}

/* Mobile: make the hero title act like a paragraph (no manual line breaks) and
   ensure 20px side padding. We override the per-line block behaviour used on
   desktop so the title wraps naturally within the viewport. */
@media (max-width: 991px) {
    /* Use a 20px page gutter for the hero on mobile */
    .remark-about-hero.remark-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Ensure the mobile title container flows like a paragraph */
    .remark-about-hero__title--mobile {
        display: block; /* it is a block-level heading that should wrap */
        width: 100%;
        max-width: none;
        margin: 0 auto;
        text-align: left; /* paragraph style; change to center if preferred */
    }

    /* Title lines were set to display:block on desktop; make them inline on mobile
       so they wrap naturally. Remove any forced no-wrap styles too. */
    .remark-about-hero__title--mobile .remark-about-hero__title-line {
        display: inline; /* inline paragraphs wrap by words inside the container */
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    /* If line fragments were merged and explicitly set to nowrap, allow them
       to wrap on mobile for paragraph behavior. */
    .remark-about-hero__title--mobile .remark-about-hero__title-line--merged {
        white-space: normal !important;
    }
}

/* Enforce specific mobile typography for hero title — set exact 36px and line-height 1.1
   across mobile and small tablet sizes so we get consistent paragraph behavior.
   This should override earlier clamp rules because it is declared after them. */
@media (max-width: 991px) {
    .remark-about-hero__title--mobile,
    .remark-about-hero__title--mobile .remark-about-hero__title-line {
        font-size: 36px !important;
        line-height: 1.1 !important;
    }
}

@media (max-width: 1200px) {
    .remark-about-hero.remark-section {
        min-height: 620px;
    }

    .remark-about-hero__media {
        /* reduce the max width on medium screens but keep the media in-flow */
        max-width: clamp(320px, 38vw, 460px);
    }
}

@media (max-width: 1024px) {
    .remark-about-hero.remark-section {
        padding: 80px 24px 0;
        min-height: auto;
        flex-direction: column;
        gap: 48px;
    }

    .remark-about-hero__media {
        /* On narrower screens place the image in the flow and center it
           so it no longer overlaps the title/text. Also restore pointer
           events so the image behaves naturally on touch devices. */
        position: relative;
        right: auto;
        bottom: auto;
        align-self: center;
        max-width: clamp(320px, 70vw, 520px);
        border-radius: 28px;
        z-index: 0;
        pointer-events: auto;
        margin-top: 8px;
    }

    .remark-about-hero__inner {
        align-items: center;
        text-align: center;
    }

    .remark-about-hero__title {
        align-items: center;
    }

    .remark-about-hero__subtitle {
        width: 100%;
        max-width: 640px;
        line-clamp: unset;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .remark-about-hero__cta-wrapper {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .remark-about-hero.remark-section {
        padding: 60px 20px 0;
    }

    .remark-about-hero__badge {
        font-size: 0.95rem;
        padding: 8px 16px;
    }

    .remark-about-hero__title-line {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .remark-about-hero__media {
        border-radius: 24px;
    }

    .button {
        width: 100%;
        justify-content: center;
    }
}

/* Intro section */
.remark-about-intro {
    position: relative;
    padding: clamp(60px, 10vw, 120px) 24px; /* slightly tightened spacing */
    background-color: #ffffff;
    overflow: hidden;
}

.remark-about-intro__inner {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.remark-about-intro__title {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 2.8rem);
    font-weight: 600;
    line-height: 1.2;
    color: #101828;
}

.remark-about-intro__title-line {
    display: block;
}

.remark-about-intro__content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--remark-color-text-muted);
}

.remark-about-intro__content p {
    margin: 0 0 1.4em;
}

.remark-about-intro__content p:last-child {
    margin-bottom: 0;
}

.remark-about-intro__shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}

.remark-about-intro__shape--left {
    left: clamp(-160px, -12vw, -80px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(220px, 30vw, 360px);
}

.remark-about-intro__shape--right {
    right: clamp(-120px, -9vw, -40px);
    bottom: clamp(10%, 18vw, 24%);
    width: clamp(160px, 24vw, 260px);
}

.remark-about-intro__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: transparent; /* flatten intro images */
    border: none;
    box-shadow: none;
}

@media (max-width: 1024px) {
    .remark-about-intro__shape--left {
        left: clamp(-120px, -14vw, -60px);
        width: clamp(200px, 40vw, 320px);
    }

    .remark-about-intro__shape--right {
        right: clamp(-80px, -10vw, -20px);
        bottom: 12%;
        width: clamp(140px, 32vw, 220px);
    }
}

@media (max-width: 640px) {
    .remark-about-intro {
        padding: 64px 16px;
    }

    .remark-about-intro__inner {
        gap: 24px;
    }

    .remark-about-intro__shape {
        opacity: 0.2;
    }

    .remark-about-intro__shape--left,
    .remark-about-intro__shape--right {
        left: 50%;
        transform: translate(-50%, -50%);
        top: 15%;
        right: auto;
        bottom: auto;
        width: clamp(240px, 70vw, 320px);
    }

    .remark-about-intro__shape--right {
        top: auto;
        bottom: -20%;
        transform: translate(-50%, 0);
    }
}

/* Highlight section */
.remark-about-highlight {
    padding: clamp(80px, 11vw, 140px) 24px;
    /* Apply requested linear gradient: #003B77 top-left to #000C6B bottom-left */
    background: linear-gradient(180deg, #003B77 0%, #000C6B 100%) !important;
    background-image: linear-gradient(180deg, #003B77 0%, #000C6B 100%) !important;
    background-color: transparent !important;
}

.remark-about-highlight__inner {
    max-width: 1000px;
    margin: 0 auto;
    background: transparent; /* removed gradient background per request */
    border-radius: 40px;
    padding: 0; /* removed padding as requested */
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-shadow: none; /* flattened highlight */
}

.remark-about-highlight__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background-color: #ffffff; /* solid white background for badge */
    align-self: flex-start; /* don't stretch to container width; fit content */
    font-size: 0.925rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.remark-about-highlight__badge-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.remark-about-highlight__badge-text {
    color: #000000; /* badge text should be black */
    font-weight: 700;
}

.remark-about-highlight__title {
    margin: 0;
    font-size: clamp(2.4rem, 4.5vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
}

.remark-about-highlight__title-line {
    display: block;
    /* Make title lines white so they read on the gradient background */
    color: #ffffff !important;
    font-weight: 400;
}

.remark-about-highlight__media {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: none; /* flattened highlight media */
}

.remark-about-highlight__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .remark-about-highlight__inner {
        padding: clamp(36px, 8vw, 48px);
        gap: 28px;
    }
}

@media (max-width: 480px) {
    .remark-about-highlight__inner {
        gap: 24px;
    }

    .remark-about-highlight__badge {
        font-size: 0.85rem;
        padding: 8px 14px;
    }
}

/* Milestones */
.remark-about-milestones {
    padding: clamp(80px, 10vw, 140px) 24px;
    background-color: #ffffff;
}

/* Force background white when the milestones section is used with the
   generic remark-section and the page-specific modifier. This increases
   specificity to override any theme/global rules that might set a
   different background on remark-section elements. */
.remark-about-milestones.remark-section.remark-section--about {
    background-color: #ffffff !important;
}

.remark-about-milestones__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 72px);
}

.remark-about-milestones__heading {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 600;
    color: #101828;
}

.remark-about-milestones__heading-line {
    display: block;
}

.remark-about-milestones__intro {
    margin-top: 24px;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(16, 24, 40, 0.75);
}

.remark-about-milestones__intro p {
    margin: 0;
}

.remark-about-milestones__timeline {
    position: relative;
    z-index: 0; /* baseline stacking for the timeline and gaps */
    padding-left: 28px;
    /* default padding used when computing how far the timeline should extend
       beyond the last milestone. JS reads this variable so it can be responsive. */
    --timeline-line-padding: 12px;
    /* shorten the drawn timeline by this amount (line will be this much
       shorter than the measured span). Use a positive value to make the
       line shorter. */
    --timeline-line-shorten: 5px;
}

/* Overlay used by JS to create precise gaps in the vertical timeline line */
.remark-about-timeline-gap {
    background-color: #ffffff; /* same as section background to mask the line */
    position: absolute; /* positioned by JS */
    pointer-events: none; /* don't block interactions */
    border-radius: 6px; /* soften masking edges */
    z-index: 1; /* sit above the line but below text (text has higher stacking in this layout) */
}

.remark-about-milestones__timeline::before {
    content: '';
    position: absolute;
    top: 0;
    /* Allow JS to control the bottom offset so the line can stop near
       the last milestone's content. Defaults to 0 (full height). */
    bottom: calc(var(--timeline-line-bottom, 0px) + var(--timeline-line-shorten, 0px));
    left: 12px;
    width: 2px;
    background: linear-gradient(180deg, #E11F5A 0%, #F97316 100%);
    border-radius: 2px;
    z-index: 0; /* keep the drawn line beneath masking gaps and content */
}

.remark-about-milestones__item {
    position: relative;
    padding-bottom: 36px;
    z-index: 2; /* ensure milestone content sits above gap masks */
}

.remark-about-milestones__item:last-child {
    padding-bottom: 0;
}

/* Decorative milestone marker removed as requested */

.remark-about-milestones__year {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #F43F5E;
    margin-bottom: 8px;
}

.remark-about-milestones__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: #101828;
}

.remark-about-milestones__description {
    margin-top: 12px;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(16, 24, 40, 0.78);
}

.remark-about-milestones__description p {
    margin: 0 0 0.9em;
}

.remark-about-milestones__description p:last-child {
    margin-bottom: 0;
}

@media (max-width: 960px) {
    .remark-about-milestones__inner {
        grid-template-columns: 1fr;
    }

    .remark-about-milestones__intro {
        margin-top: 16px;
    }

    .remark-about-milestones__timeline {
        padding-left: 20px;
    }

    .remark-about-milestones__timeline::before {
        left: 8px;
    }

    .remark-about-milestones__item::before {
        left: -20px;
    }
}

@media (max-width: 640px) {
    .remark-about-milestones {
        padding: 64px 16px;
    }

    .remark-about-milestones__item {
        padding-bottom: 28px;
    }

    .remark-about-milestones__title {
        font-size: 1.2rem;
    }
}

/* Our Mission section */
.remark-about-mission {
    padding: clamp(80px, 12vw, 140px) 24px;
    background-color: #f9f9f9;
    overflow: hidden;
}

/* Force white background when used as a page section variant */
.remark-about-mission.remark-section.remark-section--about {
    background-color: #ffffff !important;
}

.remark-about-mission__inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 64px;
}

.remark-about-mission__content {
    flex: 1;
}

.remark-about-mission__title {
    margin: 0 0 24px;
    font-size: clamp(2.2rem, 4vw, 2.8rem);
    font-weight: 600;
    line-height: 1.2;
    color: #101828;
}

.remark-about-mission__subtitle {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--remark-color-text-muted);
}

.remark-about-mission__media {
    flex: 1;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: none; /* flattened mission media */
}

.remark-about-mission__image {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991px) {
    .remark-about-mission__inner {
        flex-direction: column;
        gap: 48px;
    }
}

/* Our Vision section */
.remark-about-vision {
    padding: clamp(80px, 12vw, 140px) 24px;
    background-color: #ffffff;
    overflow: hidden;
}

.remark-about-vision__inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 64px;
}

.remark-about-vision__content {
    flex: 1;
}

.remark-about-vision__title {
    margin: 0 0 24px;
    font-size: clamp(2.2rem, 4vw, 2.8rem);
    font-weight: 600;
    line-height: 1.2;
    color: #101828;
}

.remark-about-vision__subtitle {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--remark-color-text-muted);
}

.remark-about-vision__media {
    flex: 1;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: none; /* flattened vision media */
}

.remark-about-vision__image {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991px) {
    .remark-about-vision__inner {
        flex-direction: column;
        gap: 48px;
    }
}

/* CTA Banner */
.remark-about-cta {
    padding: 80px 24px; /* tightened spacing */
    background-color: var(--remark-color-white);
}

/* Force white backgrounds for vision and CTA when used as page sections */
.remark-about-vision.remark-section.remark-section--about,
.remark-about-cta.remark-section.remark-section--about {
    background-color: #ffffff !important;
}

.remark-about-cta__inner {
    --remark-about-cta-bg: #00357A;
    max-width: 1180px;
    margin: 0 auto;
    background-color: var(--remark-about-cta-bg);
    border-radius: 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    position: relative;
    overflow: hidden;
    box-shadow: none; /* flattened CTA */
}

.remark-about-cta__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(140% 140% at 80% 20%, rgba(255, 255, 255, 0.12), transparent 70%);
    pointer-events: none;
}

.remark-about-cta__media {
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.remark-about-cta__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.remark-about-cta__content {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 48px 64px 48px 48px;
    color: var(--remark-color-white);
    position: relative;
    z-index: 1;
}

.remark-about-cta__title {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--remark-color-white);
}

.remark-about-cta__description {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.86);
    max-width: 440px;
}

.remark-about-cta__cta-wrapper {
    display: inline-flex;
    align-items: center;
}

.remark-about-cta__button {
    background-color: var(--remark-color-white);
    color: var(--remark-color-primary);
}

/* Force CTA button font-size to 16px for consistency */
.remark-about-cta__button,
.remark-about-cta__button .button__label {
    font-size: 16px;
}

.remark-about-cta__button .button__label {
    color: var(--remark-color-primary);
}

.remark-about-cta__button .button__label::after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMjQ0NDcgNy4wNjYyM0M5Ljk1NTI5IDYuNTMzMTEgOS45NTUyOSA1LjQ2Njg3IDkuMjQ0NDcgNC45MzM3NUwzLjAyNDc2IDAuMjY4OTcxQzIuMTQ2MTMgLTAuMzkgMC44OTIyODUgMC4yMzY5MjIgMC44OTIyODUgMS4zMzUyMUwwLjg5MjI4NSAxMC42NjQ4QzAuODkyMjg1IDExLjc2MzEgMi4xNDYxMyAxMi4zOSAzLjAyNDc2IDExLjczMUw5LjI0NDQ3IDcuMDY2MjNaIiBmaWxsPSIjRTMzRDNCIi8+PC9zdmc+');
}

.remark-about-cta__button:hover .button__label {
    color: var(--remark-color-white);
}

.remark-about-cta__button:hover .button__label::after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMjQ0NDcgNy4wNjYyM0M5Ljk1NTI5IDYuNTMzMTEgOS45NTUyOSA1LjQ2Njg3IDkuMjQ0NDcgNC45MzM3NUwzLjAyNDc2IDAuMjY4OTcxQzIuMTQ2MTMgLTAuMzkgMC44OTIyODUgMC4yMzY5MjIgMC44OTIyODUgMS4zMzUyMUwwLjg5MjI4NSAxMC42NjQ4QzAuODkyMjg1IDExLjc2MzEgMi4xNDYxMyAxMi4zOSAzLjAyNDc2IDExLjczMUw5LjI0NDQ3IDcuMDY2MjNaIiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+');
}

.remark-about-cta__button .button__flair:before {
    background-color: #D71921;
}

/* Mirror Home BD CTA behavior for the About CTA so they appear the same */
.remark-about-cta__content .white-g-btn .button__flair {
    display: block;
}

.remark-about-cta__content .white-g-btn .button__flair:before {
    background-color: #D71921;
    transition: transform 0.6s var(--ease-out-cubic), opacity 0.6s var(--ease-out-cubic);
}

.remark-about-cta__content .white-g-btn:hover .button__label {
    color: var(--remark-color-white) !important;
}

.remark-about-cta__button .button__label::after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMjQ0NDcgNy4wNjYyM0M5Ljk1NTI5IDYuNTMzMTEgOS45NTUyOSA1LjQ2Njg3IDkuMjQ0NDcgNC45MzM3NUwzLjAyNDc2IDAuMjY4OTcxQzIuMTQ2MTMgLTAuMzkgMC44OTIyODUgMC4yMzY5MjIgMC44OTIyODUgMS4zMzUyMUwwLjg5MjI4NSAxMC42NjQ4QzAuODkyMjg1IDExLjc2MzEgMi4xNDYxMyAxMi4zOSAzLjAyNDc2IDExLjczMUw5LjI0NDQ3IDcuMDY2MjNaIiBmaWxsPSIjRTMzRDNCIi8+PC9zdmc+');
}

.remark-about-cta__button:hover .button__label::after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMjQ0NDcgNy4wNjYyM0M5Ljk1NTI5IDYuNTMzMTEgOS45NTUyOSA1LjQ2Njg3IDkuMjQ0NDcgNC45MzM3NUwzLjAyNDc2IDAuMjY4OTcxQzIuMTQ2MTMgLTAuMzkgMC44OTIyODUgMC4yMzY5MjIgMC44OTIyODUgMS4zMzUyMUwwLjg5MjI4NSAxMC42NjQ4QzAuODkyMjg1IDExLjc2MzEgMi4xNDYxMyAxMi4zOSAzLjAyNDc2IDExLjczMUw5LjI0NDQ3IDcuMDY2MjNaIiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+');
}

.remark-about-cta__button .button__flair:before {
    background-color: #D71921;
}

/* Enforce hero media max width: high-specificity override to ensure the
   image never exceeds 1000px even if another stylesheet or cache applies
   a different rule. */
.remark-about-hero__media {
    width: auto !important;
    max-width: 1000px !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.remark-about-hero__media .remark-about-hero__image,
.remark-about-hero__image {
    max-width: 1000px !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.remark-about-cta__shape {
    position: absolute;
    width: 157px;
    height: 157px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 157.06 157.06'%3E%3Crect x='14.33' y='14.33' width='128.39' height='128.39' rx='32' ry='32' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
}

.remark-about-cta__shape--tl {
    top: -60px;
    right: 28%;
    width: 130px;
    height: 130px;
    transform: rotate(45deg);
}

.remark-about-cta__shape--br {
    bottom: -50px;
    right: 40px;
    transform: rotate(45deg);
}

@media (max-width: 991px) {
    .remark-about-cta {
        padding: 80px 20px;
    }

    .remark-about-cta__inner {
        grid-template-columns: 1fr;
        padding: 40px 32px;
        gap: 32px;
        text-align: left;
    }

    .remark-about-cta__description {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .remark-about-cta {
        padding: 64px 16px;
    }

    .remark-about-cta__inner {
        padding: 32px 24px;
    }
}