/********** Template CSS **********/

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
.da-work-thumb.is-portrait
.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

/*** Button ***/
.btn {
    transition: .5s;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.sticky-top {
    top: -150px;
    transition: .5s;
}

.navbar {
    padding: 15px 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
}

.navbar .navbar-nav .nav-link {
    margin-left: 30px;
    padding: 0;
    outline: none;
    color: var(--bs-dark);
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--bs-primary)
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item.active {
    color: var(--bs-white);
    background: var(--bs-primary);
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-left: 0;
        padding: 10px 0;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Hero Header ***/
.hero-header {
    margin-top: -100px;
    padding-top: 150px;
    background: url(../img/hero-bg.jpg) top center no-repeat;
    background-size: cover;
}

.hero-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}

.header-carousel {
    position: relative;
    padding: 45px 90px 45px 0;
}

.header-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: calc(50% + 45px);
    height: 100%;
    background: var(--bs-primary);
    z-index: -1;
}

.header-carousel .owl-dots {
    position: absolute;
    top: 50%;
    right: 38px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 5px 0;
    width: 15px;
    height: 15px;
    border: 2px solid var(--bs-white);
    transition: .5s;
}

.header-carousel .owl-dot.active {
    height: 30px;
    background: var(--bs-white);
}


/*** About ***/



/*** Project ***/
.project-item img {
    transition: .5s;
}
  
.project-item:hover img {
    transform: scale(1.2);
}
  
.project-overlay {
    position: absolute;
    padding: 25px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    background: linear-gradient(rgba(255, 255, 255, .1) 50%, var(--bs-dark));
    z-index: 1;
}


/*** Service ***/
.service-item {
    position: relative;
    padding: 30px 25px;
    transition: .5s;
}

.service-item.bg-primary:hover {
    background: var(--bs-light) !important;
}

.service-item.bg-primary p {
    color: var(--bs-light);
    transition: .5s;
}

.service-item.bg-primary:hover p {
    color: var(--bs-secondary);
}

.service-item.bg-light:hover {
    background: var(--bs-primary) !important;
}

.service-item.bg-light p {
    color: var(--bs-secondary);
    transition: .5s;
}

.service-item.bg-light:hover p {
    color: var(--bs-light);
}


.service-item .service-img h3 {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 12px 7px 0;
}

.service-item.bg-primary .service-img h3 {
    background: var(--bs-primary);
    color: var(--bs-white);
    transition: .5s;
}

.service-item.bg-primary:hover .service-img h3 {
    background: var(--bs-light);
    color: var(--bs-dark);
}

.service-item.bg-light .service-img h3 {
    background: var(--bs-light);
    color: var(--bs-dark);
    transition: .5s;
}

.service-item.bg-light:hover .service-img h3 {
    background: var(--bs-primary);
    color: var(--bs-white);
}


/*** Our Team ***/
.team-item img {
    transition: .5s;
}
  
.team-item:hover img {
    transform: scale(1.2);
}
  
.team-overlay {
    position: absolute;
    padding: 30px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    background: linear-gradient(rgba(255, 255, 255, .1) 50%, var(--bs-dark));
    z-index: 1;
}

.team-overlay small {
    display: inline-block;
    padding: 3px 15px;
    color: var(--bs-white);
    background: var(--bs-primary);
}


/*** Testimonial ***/
.testimonial-img {
    position: relative;
    padding: 45px 0 45px 90px;
}

.testimonial-img::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: calc(50% + 45px);
    height: 100%;
    background: var(--bs-primary);
    z-index: -1;
}

.testimonial-text h5 {
    position: relative;
    padding-left: 45px;
}

.testimonial-text h5::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 40px;
    height: 2px;
    background: var(--bs-primary);
}

.testimonial-carousel .owl-dots {
    position: absolute;
    height: 17px;
    bottom: 0;
    right: 0;
    left: auto;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    width: 15px;
    height: 15px;
    background: var(--bs-white);
    border: 2px solid var(--bs-primary);
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    width: 30px;
    background: var(--bs-primary);
}

@media (max-width: 768px) {
    .testimonial-carousel .owl-dots {
        left: 0;
        right: auto;
    }

    .testimonial-carousel .owl-dot {
        margin-right: 10px;
        margin-left: 0;
    }
}


/*** Newsletter ***/
.newsletter {
    background: url(../img/hero-bg.jpg) bottom right no-repeat;
    background-size: cover;
}

@media (min-width: 992px) {
    .newsletter .container {
        max-width: 100% !important;
    }

    .newsletter .newsletter-text  {
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .newsletter .newsletter-text  {
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .newsletter .newsletter-text  {
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    text-align: left;
    color: rgba(255,255,255,.5);
    font-weight: normal;
    transition: .3s;
}

.footer .btn.btn-link:hover {
    color: var(--bs-white);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 14px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: rgba(255,255,255,.5);
}

.footer .copyright a:hover {
    color: var(--bs-white);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}/**********  Duo Arms — additions on top of the template stylesheet  **********
 *  The template palette is untouched: everything below reuses --bs-primary
 *  (#09688d), --bs-light and --bs-dark so colours stay consistent.
 ******************************************************************************/

/*** Brand wordmark ***
 *  Rendered as a <span> so each page keeps a single, topical <h1>, while looking
 *  identical to the template's original navbar/footer heading.
 */
:root {
    /* Brighter companion to --bs-primary (#09688d), taken from the logo's glow.
       Used for the wordmark accent and the category accents. */
    --da-bright: #0d9bdb;
}

.da-brand-text {
    display: inline-block;
    margin-bottom: 0;
    text-transform: lowercase;
    letter-spacing: -0.5px;
    /* the wordmark is Latin: keep it left-to-right inside the Arabic layout */
    direction: ltr;
    unicode-bidi: isolate;
    font-family: 'Space Grotesk', 'Cairo', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    font-size: calc(1.375rem + 1.5vw);
    color: var(--bs-dark);
}

@media (min-width: 1200px) {
    .da-brand-text {
        font-size: 2.5rem;
    }
}

.footer .da-brand-text {
    font-size: calc(1.325rem + .9vw);
}

@media (min-width: 1200px) {
    .footer .da-brand-text {
        font-size: 2rem;
    }
}

.da-brand-accent {
    color: var(--bs-primary);
}

.da-brand-logo {
    height: 60px;
    width: auto;
}

/* <picture> is an inline wrapper; keep it from adding baseline gap inside the
   flex navbar brand and inside the hero carousel. */
.navbar-brand picture {
    display: flex;
    align-items: center;
}

.header-carousel picture {
    display: block;
}

/*** Skip link (keyboard + screen-reader entry point) ***/
.da-skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 100001;
    background: var(--bs-primary);
    color: #fff;
    padding: 12px 22px;
    text-decoration: none;
    font-weight: 600;
}

.da-skip-link:focus {
    inset-inline-start: 12px;
    top: 12px;
    color: #fff;
}

/*** Nav links a little heavier ***
 *  Template default is a plain 400 weight — same as the lang-switch button's
 *  own 600 below, "medium" rather than full bold so it doesn't compete with
 *  the lang-switch pill or crowd the links together on medium screens. */
.navbar .navbar-nav .nav-link {
    font-weight: 600;
}

/*** Language switch ***/
.navbar-light .navbar-nav .nav-link.lang-switch {
    color: var(--bs-primary);
    font-weight: 600;
    border: 2px solid rgba(9, 104, 141, .25);
    border-radius: 2px;
    padding: 6px 14px;
    margin-left: 12px;
    line-height: 1.2;
}

.navbar-light .navbar-nav .nav-link.lang-switch:hover,
.navbar-light .navbar-nav .nav-link.lang-switch:focus {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link.lang-switch {
        display: inline-block;
        margin: 8px 0 4px;
    }
}

/*** Hero ***/
.hero-header .hero-cta .btn {
    min-width: 190px;
}

/* Inner pages use the same light hero as the home page. The template's
   breadcrumb divider was var(--light), invisible against it. */
.hero-header .breadcrumb-item + .breadcrumb-item::before {
    color: #7a929c;
}

.hero-header .breadcrumb-item.active {
    color: #5c7480 !important;
}

/*** Hero quick category links ***
 *  Used to be plain icon + <h2>, identical for all three and not a link, so
 *  none of the three read as clickable or as different from one another.
 *  Now a real link per category. Styled like the hero's own "Let's Talk"
 *  outline button — transparent fill, a coloured 2px frame — instead of a
 *  white card, but same footprint and the icon keeps its own category
 *  colour at rest and on hover (only the frame/lift respond to hover).
 */
.da-hero-cat {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 14px 18px;
    background: transparent;
    border: 2px solid var(--da-pill, var(--bs-primary));
    border-radius: 4px;
    text-decoration: none;
    transition: .3s ease;
}

.da-hero-cat-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(9, 104, 141, .1);
    color: var(--da-pill, var(--bs-primary));
    font-size: 18px;
    transition: .3s ease;
}

.da-hero-cat-name {
    flex-grow: 1;
    font-weight: 700;
    color: var(--da-ink);
    font-size: 15px;
}

.da-hero-cat-arrow {
    flex-shrink: 0;
    color: var(--da-pill, var(--bs-primary));
    font-size: 13px;
    opacity: 0;
    transform: translateX(-6px);
    transition: .3s ease;
}

[dir="rtl"] .da-hero-cat-arrow {
    transform: translateX(6px);
}

.da-hero-cat:hover,
.da-hero-cat:focus-visible {
    box-shadow: 0 10px 24px rgba(12, 45, 60, .14);
    transform: translateY(-3px);
}

.da-hero-cat:hover .da-hero-cat-arrow,
.da-hero-cat:focus-visible .da-hero-cat-arrow {
    opacity: 1;
    transform: translateX(0);
}

[dir="rtl"] .da-hero-cat:hover .da-hero-cat-arrow,
[dir="rtl"] .da-hero-cat:focus-visible .da-hero-cat-arrow {
    transform: translateX(0);
}

.da-hero-cat[data-cat="mobile-apps"]   { --da-pill: var(--da-accent-text-mobile); }
.da-hero-cat[data-cat="web"]           { --da-pill: var(--da-accent-text-web); }
.da-hero-cat[data-cat="design-motion"] { --da-pill: var(--da-accent-text-design); }

/*** Service / category cards ***/
.da-card {
    background: #fff;
    height: 100%;
    padding: 40px 32px;
    border-bottom: 4px solid var(--bs-primary);
    transition: .4s;
}

.da-card:hover {
    background: var(--bs-light);
    transform: translateY(-6px);
}

.da-card .da-card-icon {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: #fff;
    font-size: 30px;
    margin-bottom: 26px;
    transition: .4s;
}

.da-card:hover .da-card-icon {
    background: var(--bs-dark);
}

.da-card h4 {
    margin-bottom: 14px;
}

.da-card .da-card-count {
    font-size: 13.5px;
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    min-height: 40px;
    border-radius: 0;
    background: var(--bs-primary);
    transition: .3s ease;
}

.da-card .da-card-count i {
    transition: transform .3s ease;
}

.da-card .da-card-count:hover,
.da-card .da-card-count:focus-visible {
    background: var(--bs-dark);
    color: #fff;
}

.da-card .da-card-count:hover i {
    transform: translateX(4px);
}

[dir="rtl"] .da-card .da-card-count:hover i {
    transform: translateX(-4px);
}

/*** Category cards with a media banner (home page) ***/
.da-card--media {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-bottom-width: 4px;
    /* A wide band in the category colour, above the photo, so the category
       reads instantly — the photo itself is large enough to make the old
       4px bottom border and the small round chip easy to miss. */
    border-top: 7px solid var(--da-accent, var(--bs-primary));
}

.da-card--media .da-card-body {
    padding: 28px 30px 34px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.da-card--media .da-card-body p {
    flex-grow: 1;
}

.da-card-media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--bs-light);
}

.da-card-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 560;
    object-fit: cover;
    transition: transform .6s ease, filter .6s ease;
}

/* The hue-rotate() previously here corrected cat-design.jpg's old purple
   placeholder graphic toward the navy accent. Removed now that the three
   category banners (mobile/web/design) are being replaced with real custom
   artwork — a filter tuned for the old asset's colours would just distort
   whatever image is uploaded in its place. If a future banner still clashes
   with its category's accent stripe, recolour the artwork itself rather
   than re-adding a blind CSS filter here. */

.da-card--media:hover .da-card-media img {
    transform: scale(1.05);
}

/* small round glyph overlapping the banner edge */
.da-card-chip {
    position: absolute;
    inset-inline-start: 26px;
    bottom: -26px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--da-accent, var(--bs-primary));
    font-size: 21px;
    box-shadow: 0 8px 20px rgba(9, 104, 141, .22);
    z-index: 2;
}

.da-card--media .da-card-body h3 {
    margin-top: 22px;
}

/* per-category accent, matching the banner artwork */
.da-card--media[data-cat="mobile-apps"]   { --da-accent: var(--bs-primary); }
.da-card--media[data-cat="web"]           { --da-accent: #09408d; }
.da-card--media[data-cat="design-motion"] { --da-accent: #081d46; }

.da-card--media { border-bottom-color: var(--da-accent, var(--bs-primary)); }
.da-card--media .da-card-count { background: var(--da-accent, var(--bs-primary)); }

/*** Work grid — cover thumbnails ***/
.da-work-item {
    position: relative;
    overflow: hidden;
    display: block;
    background: var(--bs-light);
    text-decoration: none;
    /* Same category-colour band as the service cards, above the screenshot —
       the shot itself is the largest thing on the card, so the accent needs
       to sit above it, not wait until the pill tag under the text.
       Uses --da-pill (the same darker, text-safe twin the .da-work-cta and
       .da-work-cat pills below fill themselves with) rather than the vivid
       --da-accent: with the vivid tone the cyan card's stripe and its own
       pills visibly did not match, while blue's vivid/twin pair happened to
       read as close enough — so this now always matches its own pills
       exactly, for every category, instead of "usually close". */
    border-top: 7px solid var(--da-pill, var(--bs-primary));
}

.da-work-thumb {
    position: relative;
    width: 100%;
    /* Portrait phone captures need a consistent frame rather than raw heights. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* Only ever briefly visible (image still loading) or on a broken image,
       so a plain neutral from the site's own palette instead of two
       one-off pale-blue hex values found nowhere else in the file. */
    background: var(--bs-light);
    display: flex;
    flex-direction: column;
}

/* A raw cover-cropped screenshot reads as an abstract fragment of UI, not
   "a real website" — a fake browser title bar above it is the same signal
   a phone bezel already gives the portrait case below. object-fit changes
   from cover to contain here too: the whole page/app is now visible inside
   the frame instead of an arbitrary cropped slice of it. */
.da-work-browser-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 12px;
    background: #e4edf0;
}

.da-work-browser-bar span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--da-pill, var(--bs-primary));
}

.da-work-thumb picture {
    flex: 1 1 auto;
    display: block;
    min-height: 0; /* a flex child must be told this before it can shrink to fit */
    overflow: hidden;
    background: #fff;
}

.da-work-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    transition: transform .6s ease;
}

/* Tall phone captures: an actual phone bezel (frame + notch + home
   indicator) instead of a bare rounded-corner photo — the shape itself
   now says "mobile app" before anyone reads a word of the card. */
.da-work-thumb.is-portrait {
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.da-work-thumb.is-portrait picture {
    flex: 0 0 auto;
    position: relative;
    height: 84%;
    padding: 9px 9px 20px;
    background: #10151f;
    border-radius: 28px;
    box-shadow: 0 12px 30px rgba(4, 32, 45, .38);
}

.da-work-thumb.is-portrait picture::before {
    content: '';
    position: absolute;
    top: 9px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 42%;
    height: 14px;
    background: #10151f;
    border-radius: 0 0 10px 10px;
    z-index: 2;
}

.da-work-thumb.is-portrait picture::after {
    content: '';
    position: absolute;
    bottom: 7px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 28%;
    height: 4px;
    background: rgba(255, 255, 255, .55);
    border-radius: 2px;
}

.da-work-thumb.is-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.da-work-item:hover .da-work-thumb img {
    transform: scale(1.06);
}

.da-work-thumb.is-portrait img {
    transition: transform .5s ease;
}

.da-work-item:hover .da-work-thumb.is-portrait img {
    transform: scale(1.03);
}

/* Year + Featured badges: used to float on top of the screenshot itself,
   which meant fighting the browser bar / phone bezel drawn on the image for
   space (and needing a manual offset to dodge it). Now a plain bar above
   the image instead — nothing to collide with, no offset math to keep in
   sync with the frame below it. */
.da-work-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #cedce5;
}

.da-work-year {
    background: var(--bs-light);
    color: var(--bs-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 4px 10px;
}

.da-work-open {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    padding: 12px 18px;
    background: linear-gradient(to top, rgba(4, 32, 45, .86), rgba(4, 32, 45, 0));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(8px);
    transition: .35s ease;
}

.da-work-item:hover .da-work-open,
.da-work-item:focus-visible .da-work-open {
    opacity: 1;
    transform: translateY(0);
}

.da-work-item {
    transition: transform .35s ease, box-shadow .35s ease;
}

.da-work-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(9, 104, 141, .16);
}

/* technology chips */
.da-work-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.da-work-tech span {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2px;
    color: #41606d;
    background: var(--bs-light);
    border: 1px solid rgba(9, 104, 141, .14);
    border-radius: 20px;
    padding: 4px 11px;
}

.da-work-tech .da-work-tech-more {
    color: var(--da-accent, var(--bs-primary));
    border-style: dashed;
}

/* accent per category, mirroring the home-page banners */
.da-work-item[data-cat="mobile-apps"]   { --da-accent: var(--bs-primary); }
.da-work-item[data-cat="web"]           { --da-accent: #09408d; }
.da-work-item[data-cat="design-motion"] { --da-accent: #081d46; }

.da-work-item .da-work-body { border-bottom-color: var(--da-accent, var(--bs-primary)); }
.da-work-item .da-work-cat  { color: var(--da-accent, var(--bs-primary)); }
.da-work-item .da-work-cat i { margin-inline-end: 6px; }

.da-work-body {
    padding: 22px 24px 26px;
    background: #fff;
    border-bottom: 3px solid var(--bs-primary);
}

.da-work-body .da-work-cat {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bs-primary);
    font-weight: 700;
    margin-bottom: 8px;
}

.da-work-body h3,
.da-work-body h4 {
    color: var(--bs-dark);
    margin-bottom: 10px;
}

.da-work-body p {
    color: #6b7a80;
    margin-bottom: 0;
    font-size: 15px;
}

.da-badge-featured {
    /* Was plain --bs-primary here while an earlier, now-removed rule tried
       to make it var(--da-accent, --bs-primary) — same specificity, later
       rule always won, so this badge never actually varied by category.
       Fixed in place rather than left as one more inert duplicate. */
    background: var(--da-accent, var(--bs-primary));
    color: #fff;
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 5px 12px;
    font-weight: 700;
}

/*** Project detail — device-framed media ***/
.da-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 28px;
}

.da-device {
    background: linear-gradient(150deg, #eaf2f6 0%, #d3e2ea 100%);
    padding: 18px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 3px solid var(--bs-primary);
}

.da-device-screen {
    position: relative;
    width: 84%;
    aspect-ratio: 9 / 19.5;
    background: #000;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(9, 104, 141, .28);
    cursor: zoom-in;
}

.da-device-screen img,
.da-device-screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.da-device-screen.is-video {
    cursor: pointer;
}

.da-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9, 104, 141, .35);
    color: #fff;
    font-size: 38px;
    transition: .3s;
    pointer-events: none;
}

.da-device-screen:hover .da-play {
    background: rgba(9, 104, 141, .5);
}

.da-device-screen.is-playing .da-play {
    opacity: 0;
}

.da-device-caption {
    font-size: 13.5px;
    color: #4c6672;
    text-align: center;
    padding: 14px 16px 2px;
    margin: 0;
    line-height: 1.6;
}

/*** Lightbox ***/
.da-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(6, 34, 45, .93);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.da-lightbox.is-open {
    display: flex;
}

.da-lightbox img,
.da-lightbox video {
    max-width: min(92vw, 460px);
    max-height: 90vh;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.da-lightbox-close {
    position: absolute;
    top: 18px;
    inset-inline-end: 24px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    padding: 8px 14px;
}

.da-lightbox-close:hover {
    color: var(--bs-primary);
}

/*** Meta list on project pages ***/
.da-meta {
    background: var(--bs-light);
    padding: 30px 32px;
}

.da-meta dt {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bs-primary);
    font-weight: 700;
    margin-bottom: 4px;
}

.da-meta dd {
    margin-bottom: 20px;
    color: var(--bs-dark);
    font-weight: 500;
}

.da-meta dd:last-child {
    margin-bottom: 0;
}

/*** Founders ***/
.da-founder-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top center;
}

/*** Homepage "Featured Work" band ***
 *  Was bg-light like the section above and below it — no different from
 *  either neighbour. Requested colour (#044059, the same navy/teal family
 *  as the rest of the site) instead, so the section itself reads as its
 *  own distinct band while scrolling, not a repeat of "Why Us". Heading,
 *  intro paragraph and the "View All" button all assumed a light backdrop
 *  (navy heading text, dark ink paragraph, solid-teal button) — none of
 *  that survives on a background this dark, so each gets the same
 *  light-on-dark treatment already used for cta_box()/the footer. The "N+"
 *  count badge is untouched: white pill with teal text already works on
 *  any backdrop. */
.da-section-featured {
    background: #044059;
}

.da-section-featured h2 {
    color: #fff;
}

.da-section-featured p {
    color: #b9d3db; /* same family as the footer's #d5e9f2, tuned one shade
                        cooler for this background */
}

/*** Empty states ***
 *  work.php ends each category in a row, and once one has no projects yet
 *  this card lands last, right above the footer — with cta_box() directly
 *  under it, two "get in touch" boxes stacked back to back. cta_box() was
 *  removed from work.php instead, and this card takes over as the page's
 *  own closing box, styled the same gradient as cta_box() everywhere else. */
.da-empty {
    background: linear-gradient(135deg, var(--bs-dark), var(--bs-primary));
    padding: 60px 30px;
    text-align: center;
    color: #fff;
}

.da-empty i {
    font-size: 46px;
    color: #fff;
    margin-bottom: 18px;
}

.da-empty h2,
.da-empty h3 {
    color: #fff;
}

.da-empty p {
    color: #d5e9f2;
}

/*** Prose blocks ***/
.da-prose p {
    margin-bottom: 1.15rem;
    line-height: 1.9;
}

.da-prose p:last-child {
    margin-bottom: 0;
}

/*** Contact ***/
.da-contact-row {
    display: flex;
    align-items: center;
    background: var(--bs-light);
    margin-bottom: 18px;
}

.da-contact-row .da-contact-icon {
    flex-shrink: 0;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: #fff;
    font-size: 22px;
}

.da-contact-row .da-contact-text {
    padding: 0 22px;
}

.da-contact-row .da-contact-text h6 {
    margin-bottom: 2px;
}

.da-contact-row .da-contact-text span,
.da-contact-row .da-contact-text a {
    color: #5c7480;
    text-decoration: none;
    font-size: 15px;
}

.da-contact-row .da-contact-text a:hover {
    color: var(--bs-primary);
}

/*** Contrast & depth pass *****************************************************
 *  Measured before this change:
 *    - h1/h2/h3 all rendered at font-weight 400
 *    - white card vs the #E6F0EF page background = 1.16 contrast, no shadow
 *    - body copy #555; work-card summary #6b7a80 = 4.45 (fails WCAG AA)
 *    - category card link #0891b2 on white = 3.68 (fails WCAG AA)
 *  The brand hue is unchanged: only weight, depth and text darkness move.
 ******************************************************************************/

:root {
    /* Ink scale - replaces the flat #555 */
    --da-ink:        #17262e;   /* primary body copy      */
    --da-ink-soft:   #40575f;   /* secondary / summaries  */
    --da-ink-faint:  #5d747d;   /* captions, meta         */
    --da-line:       rgba(9, 104, 141, .22);
    --da-navy:       #1a2f4f;   /* logo navy — footer button hover     */
    --da-navy-btn:   #0f1c30;   /* footer buttons, deepest logo navy   */
    --da-blue-deep:  #07536f;   /* footer buttons — a step below the footer blue */
    --da-navy-deep:  #142440;   /* the copyright strip, one step down  */

    /* Text-safe accents — mobile's teal was kept ("ممتاز"); web and
       design/motion moved from the green/raspberry jewel-tone pair into the
       navy/blue family instead, per request. Mobile (teal) and web (azure)
       stayed as they were — only design/motion changed again: not a custom
       indigo, but --bs-dark itself (the exact navy in the cta_box gradient),
       nudged a little greener per request (H 231°→220°, same S 79.5%/
       L 15.3% as --bs-dark, so it is still recognizably "that navy", not a
       new colour) so it does not read as near-identical to azure. */
    --da-accent-text-mobile: var(--bs-primary);   /* teal  #09688d - unchanged */
    --da-accent-text-web:    #09408d;              /* azure - unchanged */
    --da-accent-text-design: #081d46;              /* --bs-dark, slightly greener */
}

/* --- 1. Type weight: the single biggest lift in perceived contrast ---
   The .h1-.h6 class variants must be listed too: Bootstrap applies its own
   font-weight through them, and a class beats a bare element selector. */
h1, h2, .h1, .h2,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 700;
}

h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
    font-weight: 600;
}

/* --- 2. Darker, richer body copy --- */
body,
body p,
.da-prose p {
    color: var(--da-ink);
}

.text-muted,
.da-device-caption {
    color: var(--da-ink-faint) !important;
}

.da-work-body p {
    color: var(--da-ink-soft);        /* was #6b7a80 - failed AA at 4.45 */
}

.da-work-tech span {
    color: var(--da-ink-soft);
    border-color: var(--da-line);     /* was .14 alpha - invisible */
}

.da-contact-row .da-contact-text span,
.da-contact-row .da-contact-text a {
    color: var(--da-ink-soft);
}

/* --- 3. Surfaces that actually read as surfaces --- */
.da-card,
.da-card--media,
.da-work-item {
    box-shadow: 0 2px 4px rgba(12, 45, 60, .05),
                0 12px 28px rgba(12, 45, 60, .09);
}

.da-card:hover,
.da-card--media:hover,
.da-work-item:hover {
    box-shadow: 0 6px 12px rgba(12, 45, 60, .08),
                0 22px 46px rgba(12, 45, 60, .16);
}

.da-meta {
    border: 1px solid var(--da-line);
}

/* --- 4. Text-safe category accents (fixes the 3.68 failure) ---
   .da-card-count is now a filled button (white text on the accent), so it
   needs the accent as a *background*. (.da-work-cat's own colour rule here
   is dead code below anyway: section 12 sets it white with !important.) */
.da-card--media[data-cat="mobile-apps"]   .da-card-count { background: var(--da-accent-text-mobile); }
.da-card--media[data-cat="web"]           .da-card-count { background: var(--da-accent-text-web); }
.da-card--media[data-cat="design-motion"] .da-card-count { background: var(--da-accent-text-design); }

/* the round glyph keeps the vivid banner accent - it is a large colour area */
.da-card-chip { box-shadow: 0 8px 20px rgba(12, 45, 60, .2); }

/* --- 5. Stronger section rhythm --- */
.da-work-body .da-work-cat,
.da-card .da-card-count {
    font-weight: 700;
}

.hero-header h1 {
    letter-spacing: -1px;
}

/* Inner-page titles ("Team", "Services", "Our Work"…) in the same blue as
   the primary button fill (e.g. the "See Our Work" button), so the page
   title reads as branded rather than plain dark text. Scoped to page_hero()'s
   own h1, not .hero-header h1 in general: the home page's hero headline
   uses that same wrapper but only highlights one word via .text-primary,
   and this must not recolour the rest of that sentence too. */
.da-page-title {
    color: var(--bs-primary);
}

/* --- 6. Corrections found by the full-page contrast sweep ---
   Sampling missed these; walking every text node caught them.               */

/* `body p` above turned the footer's copy dark-on-dark (measured 1.11).
   Restore light footer text - and slightly brighter than the template's
   text-white-50, which only reached 5.15. */
.footer,
.footer p,
.footer .da-prose p {
    color: #9fb3ba;                     /* 7.87 on the #051e29 footer */
}

.footer .btn.btn-link {
    color: #9fb3ba;
}

.footer .btn.btn-link:hover {
    color: #fff;
}

/* The "+N" chip inherited the vivid banner accent, which is tuned for large
   colour areas: 3.17 on the light chip background. Use the ink tone instead
   and keep the accent only on its dashed edge. */
.da-work-tech .da-work-tech-more {
    color: var(--da-ink-soft);          /* 6.58 on --bs-light */
    border-color: var(--da-pill, var(--bs-primary));
    border-style: dashed;
}

/* --- 7. Form controls ---
   Bootstrap's default #ced4da border measured 1.49 against white. WCAG 1.4.11
   asks for 3.0 on the boundary of a UI component, and a barely-visible field
   edge is a large part of why the page read as washed out. */
.form-control,
.form-select {
    border-color: #7e959f;              /* 3.14 on white */
    color: var(--da-ink);
}

.form-control::placeholder {
    color: var(--da-ink-faint);
    opacity: 1;                         /* Firefox dims placeholders by default */
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(9, 104, 141, .22);
}

.form-label {
    color: var(--da-ink);
}

/* Visible keyboard focus everywhere, not just on form fields */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

/* --- 8. Footer, now echoing the cta_box() gradient above it ---
   Was a flat #09688d (the brand teal). Now the same navy→teal pairing as
   cta_box(), top to bottom, so the footer reads as a continuation of that
   box rather than an unrelated third colour — and navy sits at the very
   top on purpose: the logo lives there, and "arms" (below) needs the
   darker end to stay legible; it measured under 1.2:1 against the flat
   teal this replaces. */
.footer.bg-dark {
    background: linear-gradient(180deg, var(--bs-dark) 0%, var(--bs-primary) 100%) !important;
}

/* The template puts .text-white-50 on the <footer>, and Bootstrap marks that
   utility !important — so every descendant without its own rule inherited
   rgba(255,255,255,.5), which is only 3.36 on the copyright strip. Override the
   utility itself so the inherited value is correct everywhere. */
.footer.text-white-50,
.footer,
.footer p,
.footer .da-prose p,
.footer .copyright,
.footer .copyright div,
.footer .btn.btn-link {
    color: #d5e9f2 !important;           /* 4.97 on #09688d, 6.77 on the strip */
}

/* Requested navy instead of the turquoise tint above. Plain --bs-dark
   (#081146) is the footer's own background colour, so "arms" would vanish
   entirely; this is the closest legible navy — a muted indigo-blue that
   still clears 3:1 against the footer (large decorative wordmark text, not
   body copy, so 3:1 is the applicable bar). */
.footer .da-brand-accent {
    color: #4a63b0 !important;           /* 3.14 against #081146 */
}

.footer .da-brand-text {
    color: #fff !important;
}

.footer h1, .footer h2, .footer h3,
.footer h4, .footer h5, .footer h6 {
    color: #fff !important;              /* 6.22 */
}

.footer .btn.btn-link:hover,
.footer .footer-menu a:hover,
.footer .copyright a:hover {
    color: #fff !important;
}

.footer a {
    color: #d5e9f2;
}

/* --- navy controls inside the footer ---
   (the contact button used to be .btn-primary too, styled here; it is now
   .da-cta-btn/.btn-light, matching the cta_box() button above the footer,
   so only the social icons — .btn-outline-primary — still need this.) */
.footer .btn-outline-primary {
    background-color: var(--da-blue-deep);
    border-color: rgba(255, 255, 255, .6); /* 3.29 against the footer */
    color: #fff;                           /* 8.48 on the fill */
}

.footer .btn-outline-primary:hover,
.footer .btn-outline-primary:focus-visible {
    background-color: #064865;
    border-color: #fff;
    color: #fff;
}

.footer .btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* --- copyright strip: a deeper step of the same blue --- */
.footer .copyright {
    background: transparent;             /* merge into the footer blue */
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.footer .footer-menu a,
.footer .copyright a,
.footer a {
    color: #d5e9f2 !important;
}

.footer .footer-menu a {
    border-inline-end-color: rgba(255, 255, 255, .22);
}

/* --- 8b. Small footer motion ---
   The social icons had a hover animation, but only on team.php: it lived in
   that page's own inline <style> block (below), so the exact same buttons
   in the footer of every OTHER page were static. Moved here, sitewide, and
   split from its old !important colour overrides — those clashed with the
   footer's own tuned navy fill above, so this rule now only ever touches
   transform/shadow, never colour. */
.btn-outline-primary.btn-square {
    position: relative;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2, .9, .4, 1.1), box-shadow .3s ease;
}

.btn-outline-primary.btn-square::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
    transition: left .5s ease;
    pointer-events: none;
}

.btn-outline-primary.btn-square:hover,
.btn-outline-primary.btn-square:focus-visible {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 8px 20px rgba(9, 104, 141, .4);
}

.btn-outline-primary.btn-square:hover::before,
.btn-outline-primary.btn-square:focus-visible::before {
    left: 100%;
}

/* Quick-links / footer-menu: a sliding underline instead of an instant
   colour swap, and a small nudge in the reading direction so a hover feels
   like "this leads somewhere" rather than just "this is text". Medium
   weight to match the navbar links above — same "a little heavier, not
   full bold" treatment, top and bottom of the page in sync. */
.footer .btn.btn-link,
.footer .footer-menu a,
.footer .copyright a {
    position: relative;
    font-weight: 600;
    transition: color .25s ease, transform .25s ease;
}

.footer .btn.btn-link::after,
.footer .footer-menu a::after,
.footer .copyright a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s ease;
}

[dir="rtl"] .footer .btn.btn-link::after,
[dir="rtl"] .footer .footer-menu a::after,
[dir="rtl"] .footer .copyright a::after {
    transform-origin: left;
}

.footer .btn.btn-link:hover,
.footer .footer-menu a:hover,
.footer .copyright a:hover {
    transform: translateX(4px);
}

[dir="rtl"] .footer .btn.btn-link:hover,
[dir="rtl"] .footer .footer-menu a:hover,
[dir="rtl"] .footer .copyright a:hover {
    transform: translateX(-4px);
}

.footer .btn.btn-link:hover::after,
.footer .footer-menu a:hover::after,
.footer .copyright a:hover::after {
    transform: scaleX(1);
}

/* --- 9. Per-partner programming experience list (team page) --- */
.da-lang-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.da-lang-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--da-line);
}

.da-lang-list li:last-child {
    border-bottom: 0;
}

.da-lang-name {
    font-weight: 700;
    color: var(--da-ink);
    font-size: 15px;
    min-width: 190px;
}

.da-lang-note {
    color: var(--da-ink-soft);
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 575.98px) {
    .da-lang-name { min-width: 100%; }
}

/* --- 10. Contain the entrance animations ---
   animate.css slideInLeft/slideInRight start at translateX(-/+100%), which
   sticks out past the viewport and flashes a horizontal scrollbar while the
   hero animates. Clipping the hero band stops that. It is applied here and not
   on <body>, because an overflow container on an ancestor would break the
   sticky navbar. */
.hero-header {
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    .hero-header { overflow-x: hidden; }
}

/* Skip link: standard visually-hidden pattern instead of a -9999px offset,
   so it never participates in the page's scroll width. */
.da-skip-link {
    inset-inline-start: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.da-skip-link:focus {
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    inset-inline-start: 12px;
    top: 12px;
}

/* Respect a reduced-motion preference: no entrance animations at all. */
@media (prefers-reduced-motion: reduce) {
    .animated,
    .wow {
        animation: none !important;
        visibility: visible !important;
        transform: none !important;
    }
}

/* --- 11. Touch target sizes ---
   Measured at 375px: the card links were 21px tall and the footer menu links
   19px. WCAG 2.5.8 asks for at least 24x24 for a pointer target.
   .da-card-count is now a button with its own min-height (see "Service /
   category cards" above), so it no longer needs a rule here. */

.footer .footer-menu a,
.footer .copyright a {
    display: inline-block;
    padding-block: 6px;
    min-height: 24px;
}

.footer .btn.btn-link {
    padding-block: 5px;
    min-height: 30px;
}

@media (max-width: 991.98px) {
    /* collapsed menu: give each row a comfortable thumb target */
    .navbar .navbar-nav .nav-link {
        padding-block: 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* --- 12. Making each work card read as its own page ---
   The only "open me" signal used to be a hover overlay, which a touch screen
   never triggers. This row is always visible and states what is inside. */
.da-work-go {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--da-line);
}

.da-work-count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--da-ink-faint);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.da-work-cta {
    font-size: 12.5px;
    font-weight: 700;
    /* same text-safe twin the category pill above already uses as its fill */
    color: #fff;
    background: var(--da-pill, var(--bs-primary));
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 0;
    white-space: nowrap;
    transition: background .3s ease;
}

.da-work-cta i {
    transition: transform .3s ease;
}

.da-work-item:hover .da-work-cta,
.da-work-item:focus-visible .da-work-cta {
    background: var(--bs-dark);
}

.da-work-item:hover .da-work-cta i {
    transform: translateX(4px);
}

[dir="rtl"] .da-work-item:hover .da-work-cta i {
    transform: translateX(-4px);
}

/* Category badge becomes a filled pill so the three areas are told apart at a
   glance rather than by a small colour difference in the label text. */
.da-work-body .da-work-cat {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 0;
    color: #fff !important;
    /* the vivid banner accent is too light behind white 12px text (3.68);
       --da-pill is the darker text-safe twin */
    background: var(--da-pill, var(--bs-primary));
    letter-spacing: .3px;
}

.da-work-body .da-work-cat i {
    margin-inline-end: 0;
}

/* darker pill fills so the white label clears 4.5 */
.da-work-item[data-cat="mobile-apps"]   { --da-pill: var(--da-accent-text-mobile); } /* 4.76 */
.da-work-item[data-cat="web"]           { --da-pill: var(--da-accent-text-web); }    /* 6.70 */
.da-work-item[data-cat="design-motion"] { --da-pill: var(--da-accent-text-design); } /* 6.32 */

/*** Brand-navy pass ***
 *  Bootstrap's own compiled heading colour (#07013d, baked into
 *  bootstrap.min.css's own h1..h6 rule) reads as plain black, unrelated to
 *  either brand colour. Every heading site-wide now uses --bs-dark instead
 *  — the same navy already used for the cta_box() gradient and the "See Our
 *  Work" family of dark surfaces — so headings, that gradient box and the
 *  footer read as one identity instead of three different dark tones.
 *  (Headings already given their own colour — .da-page-title, .text-white
 *  on a dark band, .text-primary spans — are all more specific than a bare
 *  element selector, so they are untouched by this.)
 */
h1, h2, h3, h4, h5, h6 {
    color: var(--bs-dark);
}

/* cta_box()'s own button: Bootstrap's .btn-light defaults to black text,
   which is the same off-brand black as the old heading colour. Navy text
   instead, in the same family as the outline "Let's Talk" button. */
.da-cta-btn,
.da-cta-btn:hover,
.da-cta-btn:focus {
    color: var(--bs-dark);
}

/* The footer reuses this same button (its "contact us" link is now styled
   like the cta_box() one above it). `.footer a { color: #d5e9f2 !important }`
   would otherwise win on specificity+importance over the rule above, since
   this button is itself an <a>. */
.footer .da-cta-btn,
.footer .da-cta-btn:hover,
.footer .da-cta-btn:focus {
    color: var(--bs-dark) !important;
}