/* Shared mobile refinement for the approved JYL header, service navigation,
   utilities and footer. Desktop presentation remains owned by each page. */
.mobile-header-language,
.mobile-nav-search-item,
.mobile-header-search,
.mobile-primary-nav {
  display: none !important;
}

html:root:root:root body :is(#dk-frozen-header, .navbar) .nav-links > .mobile-nav-search-item {
  display: none !important;
}

@media (max-width: 768px) {
  html body {
    --jyl-mobile-header-height: 68px;
    --jyl-mobile-primary-height: 46px;
  }

  /* The three sticky mobile navigation rows already occupy document flow. */
  html body[data-page="projects"] .projects-page-header {
    margin-top: 0 !important;
  }

  html body[data-page="about"] main {
    padding-top: 0 !important;
  }

  html body[data-page="projects"] .project-results-toolbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  html body[data-page="projects"] .project-sort-control {
    min-width: 0;
    max-width: 100%;
  }

  html body[data-page="projects"] .project-sort-control select {
    min-width: 0;
    max-width: 100%;
  }

  /* Legacy page dialogs must sit above all three mobile navigation rows. */
  html body :is(#contactModal, #quoteModal, #dkExistingConsultationModal, .dk-consultation-overlay) {
    z-index: 10000 !important;
  }

  html body .navbar,
  html body:not(.page-scrolled) .navbar,
  html body.page-scrolled .navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 4000 !important;
    min-height: var(--jyl-mobile-header-height) !important;
    background: #0b2231 !important;
  }

  html body .navbar .nav-inner {
    width: 100% !important;
    height: var(--jyl-mobile-header-height) !important;
    min-height: var(--jyl-mobile-header-height) !important;
    padding: 6px 10px !important;
    gap: 8px !important;
  }

  html:root:root:root:root body .navbar .logo-hi {
    width: auto !important;
    max-width: 194px !important;
    min-width: 0 !important;
    height: 56px !important;
    flex: 1 1 194px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root body .navbar .logo-hi img,
  html:root:root:root:root body .navbar .logo-hi .dk-mark-img {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 44px !important;
    object-fit: contain !important;
    flex: 0 0 50px !important;
  }

  html:root:root:root:root body .navbar .logo-hi-text {
    min-width: 0 !important;
    max-width: 138px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root body .navbar .logo-hi-text strong {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html:root:root:root:root:root:root body :is(#dk-frozen-header, .navbar) .logo-hi .logo-hi-text strong {
    /* Match the supplied logo mark's median opaque gold, not the UI accent. */
    color: #bd9356 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    /* Scale the desktop wordmark's optical offset to the mobile logo. */
    transform: translateY(2px) !important;
  }

  html:root:root:root:root:root:root body :is(#dk-frozen-header, .navbar) .logo-hi {
    width: max-content !important;
    max-width: 228px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 1 auto !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root body :is(#dk-frozen-header, .navbar) .logo-hi :is(img, .dk-mark-img) {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 44px !important;
    flex: 0 0 50px !important;
    object-fit: contain !important;
  }

  html:root:root:root:root:root:root body :is(#dk-frozen-header, .navbar) .logo-hi .logo-hi-text {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }

  html:root:root:root:root body .navbar .nav-actions {
    position: static !important;
    min-width: 116px !important;
    height: 56px !important;
    margin: 0 0 0 auto !important;
    flex: 0 0 116px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    order: 2 !important;
  }

  html body .navbar .header-quote-btn {
    width: 80px !important;
    min-width: 80px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 7px !important;
    display: inline-flex !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body .navbar .mobile-header-search {
    width: 32px !important;
    min-width: 32px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #e7c478 !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  html body .navbar .mobile-header-search svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
  }

  html:root:root:root:root body :is(#dk-frozen-header, .navbar) .nav-links > .mobile-nav-search-item {
    display: list-item !important;
  }

  html:root:root:root:root body .mobile-menu-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 25px !important;
    flex: 0 0 36px !important;
    order: 3 !important;
  }

  html body .mobile-primary-nav {
    position: sticky !important;
    top: var(--jyl-mobile-header-height) !important;
    z-index: 3500 !important;
    width: 100% !important;
    height: var(--jyl-mobile-primary-height) !important;
    min-height: var(--jyl-mobile-primary-height) !important;
    padding: 0 4px 0 8px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: #0f2a3c !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
    scrollbar-width: none !important;
  }

  html body .mobile-primary-nav::-webkit-scrollbar {
    display: none !important;
  }

  html body .mobile-primary-nav a {
    min-width: max-content !important;
    min-height: var(--jyl-mobile-primary-height) !important;
    padding: 0 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, .86) !important;
    position: relative !important;
    font: 800 11.25px/1 "Manrope", "Noto Sans SC", sans-serif !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border-bottom: 0 !important;
  }

  html body .mobile-primary-nav a.active {
    color: #f0cf83 !important;
  }

  html body .mobile-primary-nav a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 2px !important;
    right: 2px !important;
    bottom: 4px !important;
    height: 3px !important;
    background: #c4933f !important;
  }

  html body .mobile-primary-nav .mobile-primary-nav__language {
    margin-left: 0 !important;
    padding-left: 7px !important;
    padding-right: 0 !important;
    color: #e7c478 !important;
    border-left: 1px solid rgba(255, 255, 255, .14) !important;
  }

  html body .mobile-primary-nav .mobile-primary-nav__language::after {
    content: none !important;
  }

  html[lang^="zh"] body .mobile-primary-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr)) 38px !important;
    padding-inline: 10px !important;
    display: grid !important;
    overflow-x: hidden !important;
  }

  html[lang^="zh"] body .mobile-primary-nav > a {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 0 !important;
  }

  html[lang^="zh"] body .mobile-primary-nav > .mobile-primary-nav__language {
    width: 38px !important;
    min-width: 38px !important;
    padding-inline: 6px 0 !important;
  }

  html:root:root:root body[data-page="home"] .floating-contact-dock,
  html:root:root:root body[data-page="home"]:not(.page-scrolled) .floating-contact-dock {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html:root:root:root body .navbar .nav-links.open {
    position: fixed !important;
    inset: var(--jyl-mobile-header-height) 0 0 !important;
    width: 100% !important;
    height: calc(100dvh - var(--jyl-mobile-header-height)) !important;
    min-height: 0 !important;
    padding: 18px 22px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow-y: auto !important;
    background: rgba(11, 34, 49, .985) !important;
  }

  html body .navbar .nav-links.open > li {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  html body .navbar .nav-links.open > li > a {
    min-height: 44px !important;
    padding: 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    border-bottom: 0 !important;
  }

  html body .navbar .nav-links.open > li > a.active {
    color: #e7c478 !important;
  }

  html body .navbar .nav-services-mobile .dropdown {
    position: static !important;
    width: 100% !important;
    padding: 0 0 7px 18px !important;
    display: grid !important;
    gap: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:root:root:root body .navbar .nav-services-mobile .dropdown li {
    min-height: 0 !important;
    padding: 0 !important;
  }

  html:root:root:root body .navbar .nav-services-mobile .dropdown a {
    min-height: 38px !important;
    margin: 0 !important;
    padding: 7px 0 !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  html body .navbar .nav-services-mobile .dropdown a::after {
    content: none !important;
    display: none !important;
  }

  html:root:root:root body .navbar .homepage-language-item {
    display: none !important;
  }

  html body .navbar .mobile-nav-search-item {
    order: 20 !important;
    margin-top: 10px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, .14) !important;
  }

  html body .navbar .mobile-nav-search {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font: 700 16px/1.2 "Manrope", "Noto Sans SC", sans-serif !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  html body .navbar .mobile-nav-search svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: #e7c478 !important;
    stroke-width: 1.8 !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar,
  html:root:root:root:root body:not(.page-scrolled) #dk-frozen-service-nav.cat-bar,
  html:root:root:root:root body.page-scrolled #dk-frozen-service-nav.cat-bar {
    position: sticky !important;
    top: calc(var(--jyl-mobile-header-height) + var(--jyl-mobile-primary-height)) !important;
    z-index: 3000 !important;
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    background: #fff !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(11, 34, 54, .1) !important;
    box-shadow: 0 5px 16px rgba(11, 34, 49, .06) !important;
    transform: none !important;
    scrollbar-width: none !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar::-webkit-scrollbar {
    display: none !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item {
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 60px !important;
    padding: 0 4px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 0 !important;
    color: #0b2231 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item > .cat-title-link {
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    color: inherit !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item > .cat-title-link strong {
    color: inherit !important;
    font-size: 14.5px !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item.active,
  html:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item.is-mobile-open {
    color: #fff !important;
    background: #0b2231 !important;
    box-shadow: inset 0 3px 0 #c4933f !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar.has-mobile-open > .cat-item.active:not(.is-mobile-open) {
    color: #0b2231 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item > .cat-arrow {
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 44px !important;
    height: 24px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 44px !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    transform: translateX(-50%) !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item > .cat-arrow::after {
    content: "" !important;
    width: 8px !important;
    height: 5px !important;
    display: block !important;
    background: currentColor !important;
    border: 0 !important;
    clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 38%, 50% 100%, 0 38%) !important;
    transform: translateY(-1px) !important;
    transition: transform 180ms ease !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item.is-mobile-open > .cat-arrow::after {
    transform: translateY(-1px) !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item > .cat-menu {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item.is-mobile-open > .cat-menu {
    position: fixed !important;
    top: calc(var(--jyl-mobile-header-height) + var(--jyl-mobile-primary-height) + 60px) !important;
    left: 50vw !important;
    right: auto !important;
    width: min(360px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(56vh, 420px) !important;
    padding: 8px !important;
    display: grid !important;
    overflow-y: auto !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #0b2231 !important;
    border: 1px solid rgba(196, 147, 63, .38) !important;
    border-radius: 6px !important;
    box-shadow: 0 18px 40px rgba(11, 34, 49, .28) !important;
    z-index: 5000 !important;
  }

  html:root:root:root:root:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item.is-mobile-open > .cat-menu a {
    min-height: 44px !important;
    padding: 10px 12px !important;
    color: rgba(255, 255, 255, .94) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    border: 0 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  html:root:root:root:root:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item.is-mobile-open > .cat-menu a.cat-menu__overview {
    color: #f0cf83 !important;
    background: rgba(196, 147, 63, .12) !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
  }

  html:root:root:root:root:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item.is-mobile-open > .cat-menu a.is-current-page:not(.cat-menu__overview) {
    color: #0b2231 !important;
    background: #f7e7c2 !important;
    font-weight: 800 !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item.is-mobile-open > .cat-menu .dropdown-arrow {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    border: 0 !important;
    color: #e7c478 !important;
    text-decoration: none !important;
  }

  html:root:root:root:root:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item.is-mobile-open > .cat-menu a :is(.dropdown-copy, .dropdown-copy strong, .dropdown-copy small),
  html:root:root:root:root:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item.is-mobile-open > .cat-menu a > strong {
    color: inherit !important;
    border: 0 !important;
    text-decoration: none !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-phone {
    display: none !important;
  }

  html:root:root:root body.has-shared-mobile-contact-dock .floating-contact-dock {
    flex-direction: column !important;
  }

  html:root:root:root body.has-shared-mobile-contact-dock .floating-contact-dock.is-expanded > .floating-contact-dock__item--quote {
    display: none !important;
  }

  html:root:root:root body.has-shared-mobile-contact-dock .floating-contact-dock__item--call {
    order: 1 !important;
  }

  html:root:root:root body.has-shared-mobile-contact-dock .floating-contact-dock__item--email {
    order: 2 !important;
  }

  html:root:root:root body.has-shared-mobile-contact-dock .floating-contact-dock__item--whatsapp {
    order: 3 !important;
  }

  html:root:root:root body.has-shared-mobile-contact-dock .floating-contact-dock__toggle {
    order: 4 !important;
  }

  html body[data-page="home"] .hero-slogan__separator {
    display: none !important;
  }

  html body[data-page="home"] .home-service-areas__map {
    height: 280px !important;
    min-height: 280px !important;
    padding-top: 0 !important;
    display: block !important;
    background: transparent !important;
  }

  html body[data-page="home"] .home-service-areas__map > .dk-coverage__map-image {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    object-fit: cover !important;
  }

  html body[data-page="home"] .home-service-areas__map::before,
  html body[data-page="home"] .home-service-areas__map::after {
    display: none !important;
    content: none !important;
  }

  html body .footer-bottom-v13 > span {
    display: grid !important;
    gap: 4px !important;
    color: rgba(255, 255, 255, .76) !important;
    line-height: 1.45 !important;
  }

  html body .footer-company-name,
  html body .footer-company-registration,
  html body .footer-rights,
  html body .footer-bottom-v13 > span a,
  html body .footer-bottom-v13 > span a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
  }

  html body .footer-company-registration {
    white-space: nowrap !important;
  }
}

@media (max-width: 399px) {
  html:root:root:root:root body .navbar .logo-hi {
    max-width: 194px !important;
  }

  html:root:root:root:root body .navbar .logo-hi img,
  html:root:root:root:root body .navbar .logo-hi .dk-mark-img {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    flex-basis: 50px !important;
  }

  html:root:root:root:root:root:root:root:root body :is(#dk-frozen-header, .navbar) .logo-hi .logo-hi-text strong {
    font-size: 12px !important;
  }
}

@media (min-width: 351px) and (max-width: 374px) {
  html:root:root:root:root:root:root:root:root body :is(#dk-frozen-header, .navbar) .logo-hi .logo-hi-text strong {
    font-size: 10px !important;
  }
}

@media (max-width: 350px) {
  html:root:root:root:root:root:root body :is(#dk-frozen-header, .navbar) .logo-hi .logo-hi-text {
    display: none !important;
  }

  html:root:root:root:root:root:root body :is(#dk-frozen-header, .navbar) .logo-hi {
    width: 58px !important;
    max-width: 58px !important;
    flex: 0 0 58px !important;
  }

  html:root:root:root:root body #dk-frozen-service-nav.cat-bar > .cat-item > .cat-title-link strong {
    font-size: 12.5px !important;
  }
}