/**
 * Choose / Approach Section Styles - Custom Agency
 * Matches React Choose.jsx & index.css
 */
.choose-section {
    background: linear-gradient(
        to bottom,
        #181717 0%,
        #181717 50%,
        #1f1d1b 65%,
        #1f1d1b 75%,
        #1f1d1b 85%,
        #1f1d1b 90%,
        #2b2825 100%
    );
    width: 100%;
    color: #f4efe7;
}

/* Only one copy is rendered at a time. This overrides any conflicting utility
   display rule that could otherwise expose both desktop and mobile headings. */
.choose-desktop-copy { display: none; }
.choose-mobile-copy { display: block; }

@media (min-width: 768px) {
    .choose-desktop-copy { display: block; }
    .choose-mobile-copy { display: none; }
}

.choose-title-break {
    /* The reveal copy is the only visible copy; the source line stays present
       for the animation but can never show as duplicated text. */
    color: transparent !important;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.choose-title-clip {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    color: #f4efe7 !important;
    clip-path: inset(100% 0 0 0);
    white-space: wrap;
    transition: none;
    z-index: 10;
}

.title-part {
    overflow: hidden;
}