/* ==========================================================================
   Double Kay Co. — Design Tokens
   ========================================================================== */
:root {
    --dk-black: #0a0908;
    --dk-charcoal: #1c1a18;
    --dk-white: #ffffff;
    --dk-off-white: #fafafa;
    --dk-gray: #63615e;
    --dk-line: #e4e2df;
    --dk-brick: #111111;
    --dk-brick-dark: #000000;
    --font-latin: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-titling: 'Aptos Titling', system-ui, sans-serif;
    --font-arabic: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* Standardized spacing scale — used for card/section padding so
       everything steps down consistently across breakpoints instead of
       ad-hoc rem values per component. */
    --space-2xs: .5rem;
    --space-xs: .75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6.5rem;

    /* Container gutter — matches Bootstrap's default but named for reuse */
    --container-pad: 1.5rem;
}

.container { padding-inline: var(--container-pad); }
@media (max-width: 575.98px) {
    :root { --container-pad: 1.15rem; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--dk-white);
    color: var(--dk-black);
    -webkit-font-smoothing: antialiased;
    position: relative;
}
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0;
    background: url('/images/backgrounds/line-bg.png') repeat;
    background-size: 240px auto;
    opacity: .1;
    pointer-events: none;
}
.dk-header, .dk-hero, .dk-section, .dk-footer { position: relative; z-index: 1; }
main, .dk-footer { max-width: 100vw; overflow-x: hidden; }

body.font-latin { font-family: var(--font-latin); }
body.font-arabic { font-family: var(--font-arabic); }
body.font-titling { font-family: var(--font-titling); }

body.is-rtl { direction: rtl; text-align: right; }
body.is-ltr { direction: ltr; text-align: left; }

h1, h2, h3, h4, h5 { font-weight: 800; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; color: var(--dk-gray); line-height: 1.7; }
a { text-decoration: none; color: inherit; }

.dk-skip-link {
    position: absolute; top: 0; z-index: 2000;
    background: var(--dk-black); color: #fff; padding: .75rem 1.25rem;
}

/* Preloader */
#dk-preloader {
    position: fixed; inset: 0; z-index: 3000;
    background: var(--dk-white) url('/images/backgrounds/line-bg.png') repeat;
    background-size: 240px auto;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.dk-preloader-inner {
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
    animation: dk-preloader-in .8s var(--ease) both;
}
.dk-preloader-mark {
    height: 44px; width: auto; animation: dk-pulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 0 rgba(10,9,8,0));
}
.dk-preloader-bar {
    position: relative; display: block; width: 140px; height: 2px;
    background: var(--dk-line); overflow: hidden; border-radius: 2px;
}
.dk-preloader-bar-fill {
    position: absolute; inset: 0; width: 46%;
    background: linear-gradient(90deg, transparent, var(--dk-black) 50%, transparent);
    animation: dk-bar-sweep 1.3s cubic-bezier(.4,0,.2,1) infinite;
}
#dk-preloader.dk-hidden { opacity: 0; visibility: hidden; }
#dk-preloader.dk-hidden .dk-preloader-inner {
    transform: scale(.94); filter: blur(2px); transition: transform .5s var(--ease), filter .5s var(--ease);
}
@keyframes dk-preloader-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dk-pulse {
    0%, 100% { transform: scale(1); opacity: .6; filter: drop-shadow(0 0 0 rgba(10,9,8,0)); }
    50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 2px 10px rgba(10,9,8,.12)); }
}
@keyframes dk-bar-sweep { 0% { transform: translateX(-160%); } 100% { transform: translateX(360%); } }

/* ==========================================================================
   Header
   ========================================================================== */
.dk-header {
    position: sticky; top: 0; z-index: 900;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--dk-line);
}
.dk-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-sm) 0; gap: var(--space-sm);
}
.dk-logo { display: flex; align-items: center; }
.dk-logo-full { height: 35px; width: auto; }

.dk-nav-desktop { display: none; gap: 2.25rem; }
.dk-nav-desktop a { font-size: .93rem; font-weight: 500; color: var(--dk-black); opacity: .8; transition: opacity .2s; }
.dk-nav-desktop a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.dk-header-actions { display: flex; align-items: center; gap: 1rem; margin-right: 20px; margin-left: 20px; }

.dk-lang-btn {
    display: flex; align-items: center; gap: .5rem;
    background: none; border: 1px solid var(--dk-line); border-radius: 999px;
    padding: .4rem .9rem; font-size: .82rem; font-weight: 600; color: var(--dk-black);
    cursor: pointer; transition: border-color .25s, background .25s;
}
.dk-lang-btn:hover { border-color: var(--dk-black); background: var(--dk-off-white); }
.dk-lang-caret { transition: transform .3s var(--ease); }
.dk-lang-switch.show .dk-lang-caret { transform: rotate(180deg); }
.dk-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex-shrink: 0; }

.dk-lang-menu {
    border-radius: 14px; border: 1px solid var(--dk-line); padding: .5rem; min-width: 230px;
    max-width: min(260px, calc(100vw - 2 * var(--container-pad)));
    box-shadow: 0 16px 40px rgba(0,0,0,.12); margin-top: .6rem !important;
    inset-inline-end: 0; inset-inline-start: auto !important;
    opacity: 0; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.dk-lang-menu.show { opacity: 1; transform: translateY(0); }
.dk-lang-menu .dropdown-item {
    display: flex; align-items: center; gap: .7rem; border-radius: 10px; padding: .55rem .7rem;
    transition: background .2s;
}
.dk-lang-menu .dropdown-item:hover { background: var(--dk-off-white); }
.dk-lang-menu .dropdown-item.active { background: var(--dk-black); color: #fff; }
.dk-lang-item-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.dk-lang-item-native { font-size: .88rem; font-weight: 600; }
.dk-lang-item-label { font-size: .72rem; opacity: .6; }
.dk-lang-check { flex-shrink: 0; color: #fff; }

.dk-btn-cta {
    background: var(--dk-brick); color: #fff !important; border: none;
    padding: .65rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .88rem;
    display: inline-flex; align-items: center; transition: background .25s, transform .25s;
}
.dk-btn-cta:hover { background: var(--dk-charcoal); transform: translateY(-1px); color:#fff; }

.dk-btn-outline-light {
    border: 1px solid rgba(255,255,255,.55); color: #fff !important;
    padding: .65rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .88rem;
    display: inline-flex; align-items: center; transition: background .25s, border-color .25s;
}
.dk-btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.dk-burger { width: 34px; height: 34px; border: none; background: none; display: flex; flex-direction: column; justify-content: center; gap: 6px; cursor: pointer; }
.dk-burger span { display: block; height: 2px; background: var(--dk-black); border-radius: 2px; transition: transform .3s, opacity .3s; }
.dk-burger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.dk-burger.active span:nth-child(2) { opacity: 0; }
.dk-burger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.dk-nav-mobile {
    max-height: 0; overflow: hidden; transition: max-height .4s var(--ease);
    background: var(--dk-black); display: flex; flex-direction: column; padding: 0 1.25rem;
}
.dk-nav-mobile.open { max-height: 420px; padding: 1.25rem; }
.dk-nav-mobile a { color: #fff; padding: .8rem 0; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.08); }

@media (min-width: 992px) {
    .dk-nav-desktop { display: flex; }
    .dk-burger { display: none; }
}
/* ==========================================================================
   Hero
   ========================================================================== */
.dk-hero { position: relative; min-height: 92vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff; text-align: center; }
.dk-hero-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    filter: grayscale(1) contrast(1.05); transform: scale(1.02);
}
.dk-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.94) 100%);
}
.dk-hero-content { position: relative; z-index: 2; padding-top: 6rem; padding-bottom: 4rem; display: flex; flex-direction: column; align-items: center; }
.dk-hero-logo { height: 110px; width: auto; margin-bottom: 1.75rem; }
.dk-hero-title { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05; margin: 1rem 0 1.4rem; font-weight: 900; }
.dk-hero-subtitle { max-width: 640px; font-size: 1.05rem; color: rgba(255,255,255,.82); margin-bottom: 2rem; padding: 0px 60px; }
.dk-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

.dk-hero-content .reveal:nth-child(1), .dk-hero-content .reveal-heading:nth-child(1) { transition-delay: .05s; }
.dk-hero-content .reveal:nth-child(2), .dk-hero-content .reveal-heading:nth-child(2) { transition-delay: .15s; }
.dk-hero-content .reveal:nth-child(3), .dk-hero-content .reveal-heading:nth-child(3) { transition-delay: .25s; }
.dk-hero-content .reveal:nth-child(4), .dk-hero-content .reveal-heading:nth-child(4) { transition-delay: .35s; }
.dk-hero-content .reveal:nth-child(5), .dk-hero-content .reveal-heading:nth-child(5) { transition-delay: .45s; }

.dk-hero-stats { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.18); margin-top: auto; padding: 1.75rem 0; }
.dk-hero-stats-row { display: flex; gap: 2.5rem; flex-wrap: wrap; justify-content: center; }
.dk-stat { display: flex; flex-direction: column; align-items: center; }
.dk-stat-num { font-size: 1.6rem; font-weight: 800; }
.dk-stat-label { font-size: .8rem; color: rgba(255,255,255,.68); }

.dk-eyebrow {
    display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--dk-brick); margin-bottom: 1rem;
}
.dk-eyebrow-light { color: rgba(255,255,255,.65); }

/* ==========================================================================
   Sections
   ========================================================================== */
.dk-section { padding: var(--space-3xl) 0; scroll-margin-top: 84px; }
.dk-hero { scroll-margin-top: 0; }
.dk-section-dark { background: var(--dk-black); color: #fff; }
.dk-section-dark p { color: rgba(255,255,255,.68); }
.dk-section-title { font-size: 1.60rem; font-weight: 700; line-height: 1.2; max-width: 720px; font-family: var(--font-titling);}

/* Top projects teaser */
.dk-top-projects-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
    flex-wrap: wrap; margin-bottom: 2.5rem;
}
.dk-view-all-link {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem;
    color: var(--dk-black); border-bottom: 1.5px solid var(--dk-black); padding-bottom: .25rem;
    white-space: nowrap; transition: gap .25s;
}
.dk-view-all-link:hover { gap: .8rem; }
body.is-rtl .dk-view-all-link svg { transform: scaleX(-1); }
.dk-title-light { color: #fff; }
.dk-section-body { margin-top: 1.25rem; max-width: 560px; font-size: 1.02rem; }
.dk-body-light { color: rgba(255,255,255,.7); }

.dk-mv-card { border-top: 1px solid var(--dk-line); padding: 1.5rem 0; }
.dk-mv-card:nth-of-type(2) { transition-delay: .12s; }
.dk-mv-icon {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border-radius: 50%; border: 1px solid var(--dk-line); color: var(--dk-black); margin-bottom: 1rem;
}
.dk-mv-card h3 { font-size: 1.1rem; margin-bottom: .6rem; font-family: var(--font-titling); }
.dk-mv-card p { font-size: .95rem; }

.dk-about-features { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-direction: column; gap: 1rem; }
.dk-about-features li { display: flex; align-items: center; gap: .85rem; font-size: .95rem; font-weight: 500; }
.dk-about-features li:nth-child(2) { transition-delay: .08s; }
.dk-about-features li:nth-child(3) { transition-delay: .16s; }
.dk-about-feature-icon {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 50%; background: var(--dk-off-white); color: var(--dk-black);
}

.dk-service-card {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px; padding: var(--space-xl); height: 100%; transition: border-color .3s, transform .3s;
}
.dk-service-card:hover { border-color: rgba(255,255,255,.4); transform: translateY(-4px); }
.dk-service-index { font-size: .8rem; color: rgba(255,255,255,.55); font-weight: 700; }
.dk-service-card h3 { color: #fff; font-size: 1.2rem; margin: .8rem 0 .6rem; font-family: var(--font-titling); }
.dk-service-card p { font-size: .92rem; }
.dk-work-grid .col-lg-4:nth-child(3n+1) .reveal,
.dk-top-projects .col-lg-4:nth-child(3n+1) .reveal,
.row.gy-4.mt-4 .col-lg-4:nth-child(3n+1) .reveal { transition-delay: 0s; }
.dk-work-grid .col-lg-4:nth-child(3n+2) .reveal,
.dk-top-projects .col-lg-4:nth-child(3n+2) .reveal,
.row.gy-4.mt-4 .col-lg-4:nth-child(3n+2) .reveal { transition-delay: .1s; }
.dk-work-grid .col-lg-4:nth-child(3n) .reveal,
.dk-top-projects .col-lg-4:nth-child(3n) .reveal,
.row.gy-4.mt-4 .col-lg-4:nth-child(3n) .reveal { transition-delay: .2s; }

/* Work / Filters */
.dk-filters { position: relative; display: flex; gap: .6rem; flex-wrap: wrap; margin: 2rem 0 2.5rem; }
.dk-filter-pill {
    position: absolute; top: 0; left: 0; z-index: 0;
    background: var(--dk-black); border-radius: 999px;
    transition: transform .45s cubic-bezier(.65,0,.35,1), width .45s cubic-bezier(.65,0,.35,1), height .45s cubic-bezier(.65,0,.35,1);
    pointer-events: none;
}
.dk-filter-btn {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .45rem;
    background: none; border: 1px solid var(--dk-line); border-radius: 999px;
    padding: .5rem 1.1rem; font-size: .85rem; font-weight: 600; color: var(--dk-gray);
    cursor: pointer; transition: color .3s ease, border-color .3s ease, transform .2s ease;
}
.dk-filter-btn:hover:not(.active) { color: var(--dk-black); border-color: var(--dk-black); }
.dk-filter-btn:active { transform: scale(.96); }
.dk-filter-btn.active { color: #fff; border-color: transparent; }
.dk-filter-icon {
    width: 15px; height: 15px; flex-shrink: 0;
    stroke: currentColor; transition: transform .35s var(--ease);
}
.dk-filter-btn.active .dk-filter-icon { transform: scale(1.12) rotate(-4deg); }

.dk-work-card { display: block; border-radius: 18px; overflow: hidden; position: relative; transition: box-shadow .35s var(--ease); }
.dk-work-card:hover { box-shadow: 0 20px 44px rgba(0,0,0,.25); }
.dk-work-img-wrap { position: relative; overflow: hidden; height: 380px; }
.dk-work-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .7s var(--ease), filter .7s var(--ease); filter: grayscale(.4); }
.dk-work-card:hover .dk-work-img { transform: scale(1.08); filter: grayscale(0); }
.dk-work-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.88) 100%); }
.dk-work-badge {
    position: absolute; top: 1rem; inset-inline-start: 1rem; z-index: 2;
    background: rgba(255,255,255,.92); color: var(--dk-black); font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; padding: .35rem .8rem; border-radius: 999px;
}
.dk-work-meta { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; padding: 1.5rem; color: #fff; }
.dk-work-year { font-size: .78rem; color: rgba(255,255,255,.7); font-weight: 700; }
.dk-work-meta h3 { font-size: 1.15rem; margin: .5rem 0 .4rem; color: #fff; }
.dk-work-loc { font-size: .85rem; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: .35rem; }
.dk-work-item { display: block; }
.dk-work-item.dk-work-extra { display: none; }
.dk-work-grid.dk-show-all .dk-work-item.dk-work-extra { display: block; }
/* dk-hide means "JS says hide this right now" and must always win, regardless
   of how many classes any other visibility rule above stacks up — hence
   !important here specifically (the one deliberate use in this file). */
.dk-work-item.dk-hide { display: none !important; }

.dk-work-more-wrap { display: flex; justify-content: center; margin-top: var(--space-xl); }
.dk-btn-more {
    background: none; border: 1.5px solid var(--dk-black); color: var(--dk-black);
    padding: .75rem 1.75rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
    cursor: pointer; transition: background .25s, color .25s;
}
.dk-btn-more:hover { background: var(--dk-black); color: #fff; }
.dk-btn-more.dk-hide { display: none; }

/* Contact */
.dk-contact-list { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-direction: column; gap: 1.1rem; }
.dk-contact-list li { display: flex; flex-direction: column; gap: .2rem; font-size: .95rem; }
.dk-contact-list a { color: #fff; }
.dk-contact-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.55); font-weight: 700; }
.dk-directions-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: #fff; font-size: .88rem; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: .3rem; transition: border-color .25s; }
.dk-directions-link:hover { border-color: #fff; }
.dk-contact-map { margin-top: 2rem; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); height: 200px; filter: grayscale(.5) contrast(1.05); transition: filter .3s; }
.dk-contact-map:hover { filter: grayscale(0) contrast(1); }
.dk-contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.dk-form { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: var(--space-xl); }
.dk-label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .45rem; color: rgba(255,255,255,.85); }
.dk-input {
    width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px; padding: .75rem .9rem; color: #fff; font-family: inherit; font-size: .95rem;
}
.dk-input:focus { outline: none; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.09); }
.dk-input::placeholder { color: rgba(255,255,255,.4); }
.dk-select-wrap { position: relative; }
.dk-select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 2.4rem;
}
.dk-select option { background: var(--dk-black); color: #fff; }
.dk-select-caret {
    position: absolute; top: 50%; inset-inline-end: 1rem; transform: translateY(-50%);
    color: rgba(255,255,255,.5); pointer-events: none;
}
.dk-alert-success { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 1rem 1.25rem; border-radius: 12px; margin-bottom: 1.25rem; font-size: .92rem; }
.dk-alert-error { background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.4); color: #fff; padding: 1rem 1.25rem; border-radius: 12px; margin-bottom: 1.25rem; font-size: .92rem; }

/* ==========================================================================
   Project Detail
   ========================================================================== */
.dk-detail-hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.dk-detail-hero-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(.3);
    animation: dk-hero-zoom-in 1.6s var(--ease) both;
}
@keyframes dk-hero-zoom-in {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}
.dk-detail-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.9) 100%); }
.dk-detail-hero-content { position: relative; z-index: 2; padding: 6rem 0 3rem; }
.dk-back-link { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.75); font-size: .88rem; font-weight: 600; margin-bottom: 2rem; transition: color .25s; }
.dk-back-link:hover { color: #fff; }
.dk-back-link svg { transform: scaleX(1); transition: transform .3s var(--ease); }
.dk-back-link:hover svg { transform: scaleX(1) translateX(-4px); }
body.is-rtl .dk-back-link svg { transform: scaleX(-1); }
body.is-rtl .dk-back-link:hover svg { transform: scaleX(-1) translateX(4px); }

/* Breadcrumb — sits above the back-link, gives the page a clear place
   in the site hierarchy without inventing any new translated copy
   (reuses the same nav labels shown in the header/footer). */
.dk-detail-breadcrumb {
    display: flex; align-items: center; gap: .4rem; font-size: .78rem;
    color: rgba(255,255,255,.55); margin-bottom: 1.1rem; flex-wrap: wrap;
}
.dk-detail-breadcrumb a { color: rgba(255,255,255,.55); transition: color .2s; }
.dk-detail-breadcrumb a:hover { color: #fff; }
.dk-detail-breadcrumb span[aria-hidden] { opacity: .45; }
.dk-detail-breadcrumb .dk-breadcrumb-current { color: rgba(255,255,255,.85); font-weight: 600; }

/* Scroll cue — small bouncing chevron inviting a scroll, common on
   full-bleed hero sections; purely decorative (aria-hidden). */
.dk-detail-scroll-cue {
    position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
    z-index: 2; color: rgba(255,255,255,.55); animation: dk-scroll-bounce 2.2s ease-in-out infinite;
}
@keyframes dk-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: .55; }
    50% { transform: translateX(-50%) translateY(6px); opacity: .9; }
}

.dk-detail-year { display: inline-block; color: rgba(255,255,255,.65); font-weight: 700; font-size: .85rem; margin-bottom: .6rem; }
.dk-detail-title { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: .75rem; color: #fff; position: relative; }
.dk-detail-loc { color: rgba(255,255,255,.7); font-size: .95rem; }

.dk-detail-summary { font-size: 1.15rem; line-height: 1.8; color: var(--dk-black); }
.dk-detail-facts { border-top: 1px solid var(--dk-line); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.dk-detail-facts .dk-contact-label { color: var(--dk-black); }
.dk-detail-facts > div { display: flex; flex-direction: column; gap: .3rem; }
.dk-detail-facts span:last-child { color: var(--dk-black); font-weight: 500; }

/* Project gallery — cascades in on scroll, same reveal system as the
   rest of the site, just staggered per grid cell instead of all at once. */
.dk-gallery {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3.5rem;
}
.dk-gallery-item {
    position: relative; border: none; padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
    aspect-ratio: 1 / 1; background: var(--dk-off-white);
}
.dk-gallery-item-lg { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
.dk-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease), filter .6s var(--ease); filter: grayscale(.3); }
.dk-gallery-item:hover img { transform: scale(1.06); filter: grayscale(0); }
.dk-gallery-item::after {
    content: ''; position: absolute; inset: 0; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; pointer-events: none;
}
.dk-gallery-item::before {
    content: ''; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.15); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none;
}
.dk-gallery-item:hover::before { opacity: 1; }
.dk-gallery-item-expand {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.8);
    width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--dk-black);
    display: flex; align-items: center; justify-content: center; opacity: 0;
    transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; z-index: 1;
}
.dk-gallery-item:hover .dk-gallery-item-expand { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dk-gallery-item-index {
    position: absolute; top: .7rem; inset-inline-start: .7rem; color: #fff; font-size: .72rem; font-weight: 700;
    letter-spacing: .03em; opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease);
    text-shadow: 0 1px 4px rgba(0,0,0,.4); z-index: 1;
}
.dk-gallery-item:hover .dk-gallery-item-index { opacity: 1; transform: translateY(0); }
.dk-gallery-item:nth-child(1) .reveal, .dk-gallery-item:nth-child(1) { transition-delay: 0s; }
.dk-gallery-item:nth-child(2) { transition-delay: .06s; }
.dk-gallery-item:nth-child(3) { transition-delay: .12s; }
.dk-gallery-item:nth-child(4) { transition-delay: .18s; }
.dk-gallery-item:nth-child(5) { transition-delay: .24s; }
.dk-gallery-item:nth-child(6) { transition-delay: .3s; }
.dk-gallery-item:nth-child(n+7) { transition-delay: .36s; }

/* Lightbox */
.dk-lightbox {
    position: fixed; inset: 0; z-index: 3500; background: rgba(10,9,8,.96);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.dk-lightbox.dk-open { opacity: 1; visibility: visible; }
.dk-lightbox img { max-width: 85vw; max-height: 82vh; object-fit: contain; border-radius: 6px; transition: opacity .2s ease; }
.dk-lightbox img.dk-lightbox-fading { opacity: 0; }
.dk-lightbox-close {
    position: absolute; top: 1.75rem; inset-inline-end: 1.75rem; background: none; border: none; color: #fff;
    opacity: .7; cursor: pointer; padding: .5rem; transition: opacity .2s, transform .3s var(--ease);
}
.dk-lightbox-close:hover { opacity: 1; transform: rotate(90deg); }
.dk-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
    color: #fff; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .25s, transform .25s var(--ease);
}
.dk-lightbox-nav:hover { background: rgba(255,255,255,.18); }
.dk-lightbox-prev { inset-inline-start: 1.75rem; }
.dk-lightbox-next { inset-inline-end: 1.75rem; }
.dk-lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.dk-lightbox-next:hover { transform: translateY(-50%) translateX(3px); }
body.is-rtl .dk-lightbox-prev:hover { transform: translateY(-50%) translateX(3px); }
body.is-rtl .dk-lightbox-next:hover { transform: translateY(-50%) translateX(-3px); }
.dk-lightbox-count { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: .82rem; letter-spacing: .04em; }

.dk-detail-nav { display: flex; gap: 1rem; margin-top: 4rem; flex-wrap: wrap; }
.dk-detail-nav-card {
    flex: 1 1 260px; display: flex; align-items: center; gap: 1rem;
    border: 1px solid var(--dk-line); border-radius: 16px; padding: 1.25rem 1.5rem;
    transition: border-color .25s, background .25s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dk-detail-nav-card:hover { border-color: var(--dk-brick); background: var(--dk-off-white); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.dk-detail-nav-thumb {
    width: 56px; height: 56px; border-radius: 10px; background-size: cover; background-position: center;
    flex-shrink: 0; transition: transform .3s var(--ease);
}
.dk-detail-nav-card:hover .dk-detail-nav-thumb { transform: scale(1.08); }
.dk-detail-nav-next { justify-content: flex-end; text-align: end; }
.dk-detail-nav-label { display: block; font-size: .75rem; color: var(--dk-gray); text-transform: uppercase; letter-spacing: .05em; }
.dk-detail-nav-name { display: block; font-weight: 700; margin-top: .2rem; }


/* ==========================================================================
   Footer
   ========================================================================== */
.dk-footer { background: var(--dk-white); color: var(--dk-gray); padding: 5rem 0 2rem; border-top: 1px solid var(--dk-line); }
.dk-footer .dk-logo-full { height: 62px; }
.dk-footer-tagline { margin-top: 1rem; font-size: .92rem; max-width: 260px; }
.dk-footer-heading { color: var(--dk-black); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1.1rem; font-weight: 800; }
.dk-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; font-size: .9rem; }
.dk-footer-links a { color: var(--dk-gray); }
.dk-footer-links a:hover { color: var(--dk-black); text-decoration: underline; }
.dk-footer-top { border-bottom: 1px solid var(--dk-line); padding-bottom: 3rem; margin-bottom: 2rem; }
.dk-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .82rem; }
.dk-footer-lang { display: flex; gap: .9rem; }
.dk-footer-lang a { opacity: .55; font-weight: 600; color: var(--dk-black); }
.dk-footer-lang a.active, .dk-footer-lang a:hover { opacity: 1; text-decoration: underline; }

/* Brand wordmark ticker */
.dk-brand-marquee {
    background: var(--dk-black); overflow: hidden; padding: 1.75rem 0;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.dk-brand-track { display: flex; width: max-content; animation: dk-marquee-scroll 26s linear infinite; will-change: transform; }
.dk-brand-marquee:hover .dk-brand-track { animation-play-state: paused; }
.dk-brand-item {
    display: flex; align-items: center; gap: 1.25rem; font-family: var(--font-latin);
    font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: #fff;
    text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; padding-inline-end: 2.5rem;
}
.dk-brand-item img { height: 1.1em; width: auto; filter: invert(1); }
.dk-brand-item span { opacity: .25; }

/* Clients logo grid (static — no auto-scroll) */
.dk-clients { padding: 4rem 0; border-bottom: 1px solid var(--dk-line); }
.dk-clients-label { text-align: center; font-weight: 700; font-size: 1.60rem; color: var(--dk-black); margin-bottom: 2.4rem; font-family: var(--font-titling);}
.dk-clients-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.25rem;
    max-width: 1100px; margin-inline: auto;
}
.dk-client-card {
    aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--dk-line); border-radius: 18px; padding: 1.4rem;
    box-shadow: 0 1px 3px rgba(10,9,8,.04);
    transition: border-color .3s, box-shadow .3s, transform .3s;
}
.dk-client-card:hover { border-color: var(--dk-black); box-shadow: 0 16px 32px rgba(10,9,8,.1); transform: translateY(-5px); }
.dk-client-logo { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(.35); opacity: .92; transition: filter .3s, opacity .3s; }
.dk-client-card:hover .dk-client-logo { filter: grayscale(0); opacity: 1; }

@keyframes dk-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.is-rtl .dk-brand-track { animation-direction: reverse; }

/* Footer project thumbnails */
.dk-footer-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.dk-footer-project {
    aspect-ratio: 1 / 1; border-radius: 8px; background-size: cover; background-position: center;
    filter: grayscale(.6); transition: filter .3s, transform .3s; display: block;
}
.dk-footer-project:hover { filter: grayscale(0); transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 20px rgba(0,0,0,.15); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Titles and subtitles get a slightly more considered entrance than the
   plain fade-up above: a touch more distance, a soft blur that clears as
   it settles, and a hair of scale — reads as a deliberate reveal rather
   than just a scroll-triggered fade, without being showy about it. */
.reveal-heading {
    opacity: 0; transform: translateY(34px) scale(.985); filter: blur(6px);
    transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.reveal-heading.in-view { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.reveal-heading.reveal-heading-body { transition-delay: .1s; }

/* ==========================================================================
   RTL adjustments
   ========================================================================== */
body.is-rtl .dk-hero-actions,
body.is-rtl .dk-filters,
body.is-rtl .dk-header-actions,
body.is-rtl .dk-nav-desktop { direction: rtl; }
body.is-rtl .dk-work-card,
body.is-rtl .dk-contact-list li { text-align: right; }

/* ==========================================================================
   Media core — responsive rules for the whole site, grouped by breakpoint
   tier and then by component, so every section's mobile behavior lives
   in one place instead of scattered next to each component's base rules.

   Tiers: ≤1199.98 (small desktop/tablet landscape), ≤991.98 (tablet),
   ≤767.98 (large phone), ≤575.98 (phone).
   ========================================================================== */

@media (max-width: 1199.98px) {
    /* Header — a touch less breathing room right as the desktop nav
       first appears, before it has a full 1200px+ to work with. */
    .dk-nav-desktop { gap: 1.5rem; }
}

@media (max-width: 991.98px) {
    /* Hero */
    .dk-hero { min-height: 100vh; }

    /* Sections (About, Services, Top Projects, Work, Contact) */
    .dk-section { padding: var(--space-2xl) 0; }
    .dk-service-card { padding: var(--space-lg); }

    /* Work grid + Top Projects (shared card component) */
    .dk-work-img-wrap { height: 320px; }

    /* Contact form */
    .dk-form { padding: var(--space-lg); }
}

@media (max-width: 767.98px) {
    /* Preloader */
    .dk-preloader-mark { height: 36px; }
    .dk-preloader-bar { width: 130px; }

    /* Hero */
    .dk-hero-content { padding-top: 5rem; padding-bottom: 3rem; }
    .dk-hero-stats-row { gap: 1.6rem 2rem; }

    /* Top Projects */
    .dk-top-projects-head { align-items: flex-start; }

    /* Work grid */
    .dk-work-img-wrap { height: 280px; }

    /* Filters — a single fixed-height scroll strip instead of wrapping
       to multiple rows: the buttons stay put at full size and the row
       itself scrolls sideways, which reads better on a touch screen than
       a tall stack of pills. Edges fade slightly as a scroll affordance,
       symmetrically on both sides so it looks correct in RTL too. */
    .dk-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-block: .2rem .4rem;
        mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }
    .dk-filters::-webkit-scrollbar { display: none; }
    .dk-filter-btn { flex: 0 0 auto; white-space: nowrap; }

    /* Gallery (project detail page) */
    .dk-gallery { grid-template-columns: repeat(2, 1fr); }
    .dk-gallery-item-lg { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }

    /* Project detail hero + prev/next nav */
    .dk-detail-hero { min-height: 46vh; }
    .dk-detail-nav-card { flex: 1 1 100%; }
    .dk-detail-nav-next { justify-content: flex-start; text-align: start; }

    /* Lightbox */
    .dk-lightbox-nav { width: 40px; height: 40px; }
    .dk-lightbox-prev { inset-inline-start: .75rem; }
    .dk-lightbox-next { inset-inline-end: .75rem; }
    .dk-lightbox-close { top: 1rem; inset-inline-end: 1rem; }
    .dk-lightbox img { max-width: 92vw; max-height: 74vh; }

    /* Contact section map */
    .dk-contact-map { height: 170px; }
}

@media (max-width: 575.98px) {
    /* Header */
    .dk-header-inner { padding: var(--space-xs) 0; }
    .dk-logo-full { height: 40px;  margin-left: 20px; margin-right: 20px; }
    .dk-logo-footer { height: 45px;  margin-left: 20px; margin-right: 20px; }
    .dk-lang-btn span { display: none; }
    .dk-lang-btn { padding: .4rem .6rem; gap: .35rem; }
    .dk-lang-menu { min-width: 200px; }

    /* Preloader */
    .dk-preloader-mark { height: 30px; }
    .dk-preloader-bar { width: 110px; }

    /* Hero */
    .dk-hero-title { font-size: clamp(2rem, 9vw, 2.8rem); }
    .dk-hero-subtitle { font-size: .85rem; padding: 0px 20px; margin-top: -10px; }
    .dk-hero-logo { height: 75px; width: auto; margin-bottom: 1.75rem; }
    .dk-hero-actions { flex-direction: column; align-items: stretch; }
    .dk-hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
    .dk-stat-num { font-size: 1.3rem; }

    /* Section headings (shared across About, Services, Top Projects, Work, Contact) */
    .dk-section-title { font-size: clamp(1.5rem, 6vw, 2rem); }

    /* Top Projects */
    .dk-view-all-link { font-size: .85rem; }


    .dk-footer .dk-logo-full { height: 60px;  margin-left: -22px; margin-right: -25px; }

    /* Work grid + filters */
    .dk-work-img-wrap { height: 240px; }
    .dk-filters { gap: .45rem; }
    .dk-filter-btn { padding: .45rem .85rem; font-size: .8rem; }

    /* Gallery (project detail page) */
    .dk-gallery { gap: .6rem; }
    .dk-detail-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }

    /* Clients grid + brand ticker */
    .dk-clients-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .85rem; }
    .dk-client-card { padding: 1rem; }
    .dk-brand-item { font-size: 1.5rem; gap: .8rem; }

    /* Contact form */
    .dk-form { padding: var(--space-md); }
}



/* Filter Count */
.dk-filter-count {
    display: inline-block; font-size: .72rem; font-weight: 700; opacity: .55;
    margin-inline-start: .1rem; transition: opacity .25s;
}
.dk-filter-btn.active .dk-filter-count,
.dk-filter-btn:hover .dk-filter-count { opacity: .85; }

/* Work grid — filtered show/hide runs as a cascade: items leave with a
   quick shrink-fade, items enter with a slightly larger rise-fade so the
   grid never looks like it's popping, and a per-item transition-delay
   (set in JS) staggers the cascade one card at a time. */
.dk-work-item {
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.dk-work-item.dk-filtering-out { opacity: 0 !important; transform: scale(.92) !important; pointer-events: none; }
.dk-work-item.dk-enter-init { opacity: 0 !important; transform: translateY(28px) scale(.94) !important; }

.dk-work-empty {
    display: none; text-align: center; padding: 3rem 1rem; color: var(--dk-gray); font-size: .95rem;
    opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.dk-work-empty.dk-show { display: block; }
.dk-work-empty.dk-show.dk-in { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Custom cursor — a small dot plus a trailing outlined ring, only on
   devices with a real mouse (fine pointer + hover capability), and only
   when the visitor hasn't asked for reduced motion. Native cursor stays
   untouched everywhere else (touch, keyboard-only, reduced-motion).
   ========================================================================== */
.dk-cursor-enabled { cursor: none; }
.dk-cursor-enabled a, .dk-cursor-enabled button, .dk-cursor-enabled .dk-gallery-item,
.dk-cursor-enabled .dk-filter-btn, .dk-cursor-enabled input, .dk-cursor-enabled textarea,
.dk-cursor-enabled select { cursor: none; }

.dk-cursor-dot, .dk-cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
    border-radius: 50%; transform: translate(-50%, -50%); will-change: transform;
}
.dk-cursor-dot {
    width: 6px; height: 6px; background: var(--dk-black);
    transition: opacity .2s, background .25s;
}
.dk-cursor-ring {
    width: 36px; height: 36px; border: 1.5px solid rgba(10,9,8,.35);
    transition: width .25s var(--ease), height .25s var(--ease), border-color .25s, background .25s, opacity .2s;
}
/* Hovering an interactive element: ring grows and fills faintly, dot hides —
   a clear, quiet signal that the thing under the cursor is clickable. */
.dk-cursor-ring.dk-cursor-hover {
    width: 56px; height: 56px; background: rgba(10,9,8,.06); border-color: rgba(10,9,8,.15);
}
.dk-cursor-dot.dk-cursor-hover { opacity: 0; }
/* On dark sections (hero, services, contact) the ring switches to light
   so it stays visible against a dark background. */
.dk-cursor-ring.dk-cursor-on-dark { border-color: rgba(255,255,255,.5); }
.dk-cursor-ring.dk-cursor-on-dark.dk-cursor-hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.dk-cursor-dot.dk-cursor-on-dark { background: #fff; }
.dk-cursor-dot, .dk-cursor-ring { opacity: 0; }
.dk-cursor-ready .dk-cursor-dot, .dk-cursor-ready .dk-cursor-ring { opacity: 1; }

@media (hover: none), (pointer: coarse) {
    .dk-cursor-dot, .dk-cursor-ring { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .dk-cursor-dot, .dk-cursor-ring { display: none !important; }
    .dk-cursor-enabled { cursor: auto; }
}

/* Magnetic buttons — primary CTAs nudge slightly toward the cursor when
   it's nearby, snapping back on mouseleave. JS sets transform/transition
   inline (instant while tracking, eased spring-back on release). */