/**
 * Site header and fullscreen menu.
 *
 * Visually matches the existing site. Structural changes: colours come from
 * tokens, the logo is a single currentColor SVG rather than two swapped images,
 * and the layering uses the shared z-index scale instead of ad-hoc values in the
 * millions.
 */

/* Sentinel just above the fold. An IntersectionObserver watches it instead of
   running a handler on every scroll event. */
.deka-header__sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--deka-header-height);
  pointer-events: none;
}

.deka-header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--deka-header-height);
  z-index: var(--deka-z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--deka-duration-base) var(--deka-ease-out),
    border-color var(--deka-duration-base) var(--deka-ease-out);
  /* Over-the-hero by default: contents are light. */
  color: var(--deka-white);
}

.deka-header__inner {
  max-width: 112.5rem; /* 1800px — wider than the content container by design */
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--deka-space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--deka-space-md);
}

.deka-header__side {
  display: flex;
  align-items: center;
  gap: var(--deka-space-md);
  flex: 1 1 0;
}

.deka-header__side--end {
  justify-content: flex-end;
}

/* --- scrolled state ------------------------------------------------------- */

/* --- header on a light background ---------------------------------------- *
 * Two ways in, one appearance: interior pages are solid from the first paint
 * (site-header.php adds --solid), and the front page and single projects earn
 * the same look once they scroll past their hero. Every rule below keys off
 * both, so the two can never drift apart.
 */
:is(.deka-header.is-scrolled, .deka-header--solid) {
  background: var(--deka-sand-100);
  border-bottom-color: var(--deka-sand-300);
  color: var(--deka-black);
}

/* No transition on the solid variant: it is already in this state when the page
   paints, so there is nothing to animate — and without this the header visibly
   faded in from transparent on every interior page load. */
.deka-header--solid {
  transition: none;
}

/* The fixed header is out of flow, so the main content needs its own band back.
   The sibling selector keeps this off the front page even once it picks up
   .is-scrolled — there the hero is meant to run under the header. */
.deka-header--solid ~ .deka-main {
  padding-top: var(--deka-header-height);
}

/*
 * The admin bar pushes the document down with `html { margin-top }`, which a
 * fixed element does not see — so for logged-in users the header sat at
 * viewport 0 while the content below it started 32px lower, leaving a visible
 * strip between the two. Only admins ever saw it.
 */
.admin-bar .deka-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .deka-header {
    /* The bar is taller on small screens, and stops being fixed. */
    top: 46px;
  }
}

/* While the menu is open the header sits on the overlay, so it goes light again
   regardless of scroll position. */
.deka-header.is-menu-open {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--deka-white);
}

/* --- logo ----------------------------------------------------------------- */

.deka-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  color: inherit;
}

.deka-header__logo-mark {
  width: 9.375rem; /* 150px */
  height: auto;
  color: currentColor;
  transition: color var(--deka-duration-base) var(--deka-ease-out);
}

:is(.deka-header.is-scrolled, .deka-header--solid) .deka-header__logo-mark {
  color: var(--deka-oxblood-700);
}

.deka-header.is-menu-open .deka-header__logo-mark {
  color: var(--deka-white);
}

/* --- language switcher ---------------------------------------------------- */

.deka-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--deka-space-xs);
  font-size: var(--deka-text-sm);
  font-family: var(--deka-font-body);
  text-transform: uppercase;
}

.deka-lang__item {
  color: currentColor;
  opacity: 0.7;
  font-weight: var(--deka-weight-regular);
  text-decoration: none;
  transition: opacity var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-lang__item.is-current {
  opacity: 1;
  font-weight: var(--deka-weight-semibold);
}

.deka-lang__item:hover {
  opacity: 1;
  color: currentColor;
}

.deka-lang__divider {
  opacity: 0.55;
}

:is(.deka-header.is-scrolled, .deka-header--solid) .deka-lang__item:not(.is-current),
:is(.deka-header.is-scrolled, .deka-header--solid) .deka-lang__divider {
  color: var(--deka-taupe-500);
  opacity: 1;
}

/* --- WhatsApp contact ----------------------------------------------------- */

.deka-header__contact {
  display: flex;
  align-items: center;
  gap: var(--deka-space-2xs);
  color: inherit;
  text-decoration: none;
  transition: opacity var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-header__contact:hover {
  opacity: 0.7;
  color: inherit;
}

.deka-header__contact-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: currentColor;
}

:is(.deka-header.is-scrolled, .deka-header--solid) .deka-header__contact-icon {
  color: var(--deka-oxblood-700);
}

.deka-header__contact-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  font-family: var(--deka-font-body);
}

.deka-header__contact-label {
  font-size: var(--deka-text-xs);
  opacity: 0.8;
}

:is(.deka-header.is-scrolled, .deka-header--solid) .deka-header__contact-label {
  color: var(--deka-taupe-500);
  opacity: 1;
}

.deka-header__contact-number {
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-medium);
}

/* --- call-to-action ------------------------------------------------------- */

.deka-header__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--deka-space-2xs);
  height: 2.625rem;
  padding-inline: 1.125rem 0.9375rem;
  border: 1.5px solid currentColor;
  border-radius: var(--deka-radius-pill);
  color: inherit;
  font-family: var(--deka-font-body);
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--deka-duration-base) var(--deka-ease-out),
    color var(--deka-duration-base) var(--deka-ease-out),
    border-color var(--deka-duration-base) var(--deka-ease-out),
    transform var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-header__cta:hover {
  background: rgb(255 255 255 / 20%);
  color: inherit;
  transform: translateY(-1px);
}

.deka-header__cta-icon {
  width: 1.125rem;
  height: 1.125rem;
}

:is(.deka-header.is-scrolled, .deka-header--solid) .deka-header__cta {
  color: var(--deka-oxblood-500);
  border-color: var(--deka-oxblood-500);
}

:is(.deka-header.is-scrolled, .deka-header--solid) .deka-header__cta:hover {
  background: var(--deka-oxblood-500);
  color: var(--deka-white);
}

/* --- menu toggle ---------------------------------------------------------- */

.deka-header__toggle {
  width: 2.1875rem;
  height: 2.1875rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  color: inherit;
}

.deka-header__toggle-bar {
  display: block;
  width: 2.1875rem;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--deka-duration-base) var(--deka-ease-out);
}

/* Target the bars by position among themselves: the button also contains a
   visually-hidden label span, so :last-of-type would match that instead and
   leave the second bar unrotated — half an X. */
.deka-header.is-menu-open .deka-header__toggle-bar:nth-of-type(1) {
  transform: translateY(4.75px) rotate(45deg);
}

.deka-header.is-menu-open .deka-header__toggle-bar:nth-of-type(2) {
  transform: translateY(-4.75px) rotate(-45deg);
}

/* ==========================================================================
   Fullscreen menu
   ========================================================================== */

.deka-menu {
  position: fixed;
  inset: 0;
  z-index: var(--deka-z-overlay);
  background: var(--deka-oxblood-700);
  color: var(--deka-white);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--deka-duration-slow) var(--deka-ease-out),
    visibility 0s linear var(--deka-duration-slow);
}

.deka-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* `hidden` keeps it out of the accessibility tree until opened; the class
   controls the transition. */
.deka-menu[hidden] {
  display: none;
}

.deka-menu__inner {
  min-height: 100%;
  max-width: 100rem;
  margin-inline: auto;
  padding: 7.5rem var(--deka-space-xl) var(--deka-space-2xl);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.deka-menu__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--deka-space-3xl);
  width: 100%;
  align-items: center;
}

/* Columns and items ease in once the overlay opens. */
.deka-menu__col {
  opacity: 0;
  transform: translateX(-1.875rem);
  transition:
    opacity var(--deka-duration-slow) var(--deka-ease-out),
    transform var(--deka-duration-slow) var(--deka-ease-out);
}

.deka-menu__col--projects {
  transform: translateX(1.875rem);
}

.deka-menu.is-open .deka-menu__col {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}

.deka-menu__list {
  list-style: none;
  margin: 0 0 var(--deka-space-xl);
  padding: 0;
}

.deka-menu__list li {
  opacity: 0;
  transform: translateX(-1.5625rem);
  transition:
    opacity var(--deka-duration-slow) var(--deka-ease-out),
    transform var(--deka-duration-slow) var(--deka-ease-out);
}

.deka-menu.is-open .deka-menu__list li {
  opacity: 1;
  transform: none;
}

/* Stagger without hard-coding a rule per item. */
.deka-menu.is-open .deka-menu__list li:nth-child(1) { transition-delay: 0.35s; }
.deka-menu.is-open .deka-menu__list li:nth-child(2) { transition-delay: 0.42s; }
.deka-menu.is-open .deka-menu__list li:nth-child(3) { transition-delay: 0.49s; }
.deka-menu.is-open .deka-menu__list li:nth-child(4) { transition-delay: 0.56s; }
.deka-menu.is-open .deka-menu__list li:nth-child(5) { transition-delay: 0.63s; }
.deka-menu.is-open .deka-menu__list li:nth-child(6) { transition-delay: 0.70s; }
.deka-menu.is-open .deka-menu__list li:nth-child(n + 7) { transition-delay: 0.77s; }

.deka-menu__list a {
  display: block;
  position: relative;
  padding-block: var(--deka-space-xs);
  font-family: var(--deka-font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  font-weight: var(--deka-weight-regular);
  color: rgb(255 255 255 / 80%);
  text-decoration: none;
  transition:
    color var(--deka-duration-fast) var(--deka-ease-out),
    padding-left var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-menu__list a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: rgb(255 255 255 / 40%);
  transition: width var(--deka-duration-base) var(--deka-ease-out);
}

.deka-menu__list a:hover {
  color: var(--deka-white);
  padding-left: 0.5rem;
  font-weight: var(--deka-weight-medium);
}

.deka-menu__list a:hover::after {
  width: 2.1875rem;
}

.deka-menu__contact {
  opacity: 0;
  transform: translateY(0.9375rem);
  transition:
    opacity var(--deka-duration-slow) var(--deka-ease-out),
    transform var(--deka-duration-slow) var(--deka-ease-out);
}

.deka-menu.is-open .deka-menu__contact {
  opacity: 1;
  transform: none;
  transition-delay: 0.8s;
}

.deka-menu__contact-line {
  margin-block-end: var(--deka-space-xs);
  font-family: var(--deka-font-body);
  font-size: var(--deka-text-sm);
  color: rgb(255 255 255 / 60%);
  line-height: var(--deka-leading-normal);
}

.deka-menu__contact-line a {
  color: inherit;
  text-decoration: none;
}

.deka-menu__contact-line a:hover {
  color: rgb(255 255 255 / 95%);
}

.deka-menu__heading {
  font-family: var(--deka-font-body);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: var(--deka-weight-medium);
  letter-spacing: 0.03em;
  margin-block-end: var(--deka-space-md);
  color: var(--deka-white);
}

/* --- project cards -------------------------------------------------------- */

.deka-menu__projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--deka-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.deka-project-card {
  position: relative;
  height: 26.25rem;
  border-radius: 3px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(1.5625rem);
  transition:
    opacity var(--deka-duration-slow) var(--deka-ease-out),
    transform var(--deka-duration-slow) var(--deka-ease-out);
  background: var(--deka-oxblood-900);
}

.deka-menu.is-open .deka-project-card:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.55s; }
.deka-menu.is-open .deka-project-card:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.65s; }
.deka-menu.is-open .deka-project-card:nth-child(n + 3) { opacity: 1; transform: none; transition-delay: 0.75s; }

.deka-project-card__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--deka-duration-slow) var(--deka-ease-out);
}

.deka-project-card:hover .deka-project-card__image {
  transform: scale(1.06);
}

.deka-project-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 90%) 0%, rgb(0 0 0 / 20%) 50%, transparent 100%);
  transition: background var(--deka-duration-base) var(--deka-ease-out);
}

.deka-project-card:hover .deka-project-card__scrim {
  background: linear-gradient(to top, rgb(0 0 0 / 80%) 0%, rgb(0 0 0 / 15%) 50%, transparent 100%);
}

.deka-project-card__body {
  position: absolute;
  inset: auto 0 0;
  padding: 1.75rem;
  transition: transform var(--deka-duration-base) var(--deka-ease-out);
}

.deka-project-card:hover .deka-project-card__body,
.deka-project-card:focus-within .deka-project-card__body {
  transform: translateY(-3.4375rem);
}

.deka-project-card__meta {
  display: flex;
  align-items: center;
  margin-block-end: var(--deka-space-2xs);
  font-family: var(--deka-font-body);
  font-size: var(--deka-text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 60%);
}

.deka-project-card__units {
  margin-inline-start: 0.6875rem;
  padding-inline-start: var(--deka-space-2xs);
  border-inline-start: 1px solid rgb(255 255 255 / 25%);
}

.deka-project-card__title {
  margin: 0 0 var(--deka-space-3xs);
  font-family: var(--deka-font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
  font-weight: var(--deka-weight-regular);
  letter-spacing: 0.02em;
  color: var(--deka-white);
}

/* :hover pinned too: the global a:hover (base.css) outranks a bare class and
   turned the white title grey over the dark render. */
.deka-project-card__link,
.deka-project-card__link:hover {
  color: inherit;
  text-decoration: none;
}

/* The title link covers the card, so the whole surface is clickable without a
   second empty anchor overlaying it. The CTA sits above via z-index. */
.deka-project-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.deka-project-card__location {
  margin: 0;
  font-family: var(--deka-font-body);
  font-size: var(--deka-text-sm);
  color: rgb(255 255 255 / 65%);
}

.deka-project-card__arrow {
  position: absolute;
  top: 1.375rem;
  right: 1.375rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  color: rgb(255 255 255 / 85%);
  opacity: 0;
  transform: translate(0.5rem, -0.5rem);
  transition:
    opacity var(--deka-duration-base) var(--deka-ease-out),
    transform var(--deka-duration-base) var(--deka-ease-out);
}

.deka-project-card:hover .deka-project-card__arrow,
.deka-project-card:focus-within .deka-project-card__arrow {
  opacity: 1;
  transform: none;
}

.deka-project-card__cta {
  position: absolute;
  inset: auto 1.75rem 1.75rem;
  z-index: 2;
  padding: var(--deka-space-xs) var(--deka-space-md);
  background: rgb(255 255 255 / 95%);
  color: var(--deka-oxblood-700);
  font-family: var(--deka-font-body);
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-medium);
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  transform: translateY(0.625rem);
  pointer-events: none;
  transition:
    opacity var(--deka-duration-base) var(--deka-ease-out),
    transform var(--deka-duration-base) var(--deka-ease-out),
    background var(--deka-duration-base) var(--deka-ease-out),
    color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-project-card:hover .deka-project-card__cta,
.deka-project-card:focus-within .deka-project-card__cta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.deka-project-card__cta:hover {
  background: var(--deka-oxblood-700);
  color: var(--deka-white);
  transform: translateY(-2px);
}

/* --- social --------------------------------------------------------------- */

.deka-menu__social {
  display: flex;
  justify-content: flex-end;
  gap: var(--deka-space-md);
  margin: var(--deka-space-xl) 0 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transform: translateY(0.9375rem);
  transition:
    opacity var(--deka-duration-slow) var(--deka-ease-out),
    transform var(--deka-duration-slow) var(--deka-ease-out);
}

.deka-menu.is-open .deka-menu__social {
  opacity: 1;
  transform: none;
  transition-delay: 0.85s;
}

.deka-menu__social a {
  display: flex;
  color: rgb(255 255 255 / 35%);
  transition:
    color var(--deka-duration-fast) var(--deka-ease-out),
    transform var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-menu__social a:hover {
  color: rgb(255 255 255 / 95%);
  transform: translateY(-2px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 75rem) {
  .deka-menu__grid { gap: var(--deka-space-2xl); }
  .deka-menu__projects { grid-template-columns: 1fr; }
  .deka-project-card { height: 23.75rem; }
}

@media (max-width: 64rem) {
  .deka-header__inner { padding-inline: var(--deka-space-md); }
  .deka-header__contact,
  .deka-header__cta { display: none; }

  .deka-menu__inner {
    padding: 6.25rem var(--deka-space-lg) var(--deka-space-2xl);
    align-items: flex-start;
  }

  .deka-menu__grid { grid-template-columns: 1fr; gap: var(--deka-space-2xl); }
  .deka-project-card { height: 21.25rem; }
  .deka-project-card__body { transform: translateY(-3.4375rem); }
  .deka-menu__social { justify-content: flex-start; }
}

@media (max-width: 40rem) {
  :root { --deka-header-height: 3.75rem; }

  .deka-header__inner { padding-inline: 1.25rem; } /* 20 — the live phone header */
  .deka-header__logo-mark { width: 7.5rem; }
  .deka-header__toggle,
  .deka-header__toggle-bar { width: 1.875rem; }

  .deka-menu__inner { padding: 5rem var(--deka-space-sm) var(--deka-space-lg); }
  .deka-project-card { height: 20rem; }
  .deka-project-card__body { padding: var(--deka-space-md); }

  /* No hover on touch, so the CTA is always visible. */
  .deka-project-card__cta {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .deka-menu__social { justify-content: center; }
}

/* Reduced motion: state changes still happen, movement does not. */
@media (prefers-reduced-motion: reduce) {
  .deka-menu__col,
  .deka-menu__list li,
  .deka-menu__contact,
  .deka-menu__social,
  .deka-project-card {
    opacity: 1;
    transform: none;
    transition-duration: 1ms;
    transition-delay: 0s;
  }

  .deka-project-card:hover .deka-project-card__image,
  .deka-project-card:hover .deka-project-card__body {
    transform: none;
  }
}

/* ==========================================================================
   Phone / tablet menu (<= 64rem): one screen, no scroll.
   Lives at the end of site-header.css.
   Authored with the .deka-menu.deka-menu--m placeholder = ".deka-menu.deka-menu--m" (expand with sed, as for
   apartment-browser-m.css): one class more than the brand layer's ".deka-brand .deka-menu__x",
   so these win by specificity whatever the print order, and removing deka-menu--m from the
   template restores the old phone menu (kill switch).
   ========================================================================== */

/* desktop never shows the phone-only parts */
.deka-menu__edge,
.deka-menu__dock,
.deka-project-card__facts { display: none; }

@media (max-width: 64rem) {

  /* ---- header controls: 44px targets without moving anything ------------ */
  .deka-header__toggle { width: 2.75rem; height: 2.75rem; margin-inline-end: -.28125rem; }   /* bars 35 -> 44 box */
  .deka-header__toggle-bar { transition: transform .4s cubic-bezier(.22, 1, .36, 1), scale .12s; }
  .deka-header__toggle:active .deka-header__toggle-bar { scale: .8 1; }
  .deka-lang__item { position: relative; }
  .deka-lang__item::after { content: ""; position: absolute; inset: -.875rem -.625rem; }

  /* ---- panel: a shutter that drops from under the header ---------------- */
  .deka-menu.deka-menu--m {
    container: deka-menu / size;
    background: var(--dk-black, #222122);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    /* close: retract upward after the contents have faded */
    transition: clip-path .38s cubic-bezier(.65, 0, .35, 1) .08s, visibility 0s linear .46s;
  }
  .deka-menu.deka-menu--m.is-open {
    clip-path: inset(0 0 0 0);
    transition: clip-path .56s cubic-bezier(.22, 1, .36, 1), visibility 0s;
  }
  .deka-menu.deka-menu--m[hidden] { display: none; }

  /* A band under the (transparent) header, so content scrolled up on short
     screens passes beneath it rather than under the logo. Takes no space. */
  .deka-menu.deka-menu--m::before {
    content: "";
    position: sticky;
    top: 0;
    z-index: 4;
    display: block;
    height: var(--deka-header-height);
    margin-bottom: calc(-1 * var(--deka-header-height));
    background: var(--dk-black, #222122);
    pointer-events: none;
  }

  /* The brand's focus ring is black: invisible on the open menu. */
  .deka-header.is-menu-open :is(a, button):focus-visible {
    outline: 2px solid var(--dk-cashmere, #BCAA7D);
    outline-offset: 2px;
  }

  /* cashmere leading edge riding the shutter */
  .deka-menu.deka-menu--m .deka-menu__edge {
    display: block;
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--dk-cashmere, #BCAA7D);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
  }
  .deka-menu.deka-menu--m.is-open .deka-menu__edge {
    animation: deka-menu-edge .56s cubic-bezier(.22, 1, .36, 1) both;
  }
  @keyframes deka-menu-edge {
    0%   { transform: translateY(0);                     opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(calc(100cqh - 1px));    opacity: 0; }
  }

  /* ---- layout tokens (tiers below override them) -------------------------- */
  .deka-menu.deka-menu--m .deka-menu__inner {
    --m-ink: var(--dk-off, #FAF7F6);
    --m-acc: var(--dk-cashmere, #BCAA7D);
    --m-stone: var(--dk-stone, #D1CDC3);
    --m-panel: var(--dk-charcoal, #2D2D2D);
    --m-line: rgba(250, 247, 246, .16);
    --m-ease: cubic-bezier(.22, 1, .36, 1);
    --m-ease-in: cubic-bezier(.55, 0, 1, .45);
    --m-gut: 1.25rem;          /* 20: the phone header's gutter */
    --m-R: 3rem;               /* nav row (fluid with cqh below) */
    /* Sized so the longest item ("კომპანიის შესახებ", ~10.75em wide) fits its
       row at every phone width instead of ending in an ellipsis. */
    --m-fs: clamp(1.25rem, calc(9vw - 9px), 1.75rem);
    --m-top: .75rem;
    --m-g1: 1.5rem;            /* nav -> projects */
    --m-tk-min: 8.25rem;       /* ticket: image 88 + band 44 */
    --m-tk-max: 11.5rem;       /* ticket: image 140 + band 44 */
    --m-band: 2.75rem;
    --m-cta: 3.25rem;

    box-sizing: border-box;
    min-height: 100%;
    max-width: none;
    margin: 0;
    padding:
      calc(var(--deka-header-height) + var(--m-top))
      max(var(--m-gut), env(safe-area-inset-right))
      max(1rem, env(safe-area-inset-bottom))
      max(var(--m-gut), env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  @supports (height: 1cqh) {
    .deka-menu.deka-menu--m .deka-menu__inner { --m-R: clamp(2.75rem, 6.2cqh, 3.5rem); --m-tk-max: clamp(11.5rem, 34cqh, 26rem); }
  }

  .deka-menu.deka-menu--m .deka-menu__grid { display: contents; }
  .deka-menu.deka-menu--m .deka-menu__col { opacity: 1; transform: none; transition: none; }
  .deka-menu.deka-menu--m .deka-menu__contact,
  .deka-menu.deka-menu--m .deka-menu__social { display: none; }

  /* ---- 1. navigation: a floor directory ----------------------------------- */
  .deka-menu.deka-menu--m .deka-menu__col--nav { flex: none; }
  .deka-menu.deka-menu--m .deka-menu__list { margin: 0; padding: 0; counter-reset: dk-nav; }
  .deka-menu.deka-menu--m .deka-menu__list > li {
    position: relative;
    counter-increment: dk-nav;
    opacity: 1;
    transform: none;
    transition: none;
    --m-d: calc(120ms + var(--m-i, 6) * 45ms);
  }
  .deka-menu.deka-menu--m .deka-menu__list > li:nth-child(1) { --m-i: 0; }
  .deka-menu.deka-menu--m .deka-menu__list > li:nth-child(2) { --m-i: 1; }
  .deka-menu.deka-menu--m .deka-menu__list > li:nth-child(3) { --m-i: 2; }
  .deka-menu.deka-menu--m .deka-menu__list > li:nth-child(4) { --m-i: 3; }
  .deka-menu.deka-menu--m .deka-menu__list > li:nth-child(5) { --m-i: 4; }
  .deka-menu.deka-menu--m .deka-menu__list > li:nth-child(6) { --m-i: 5; }

  .deka-menu.deka-menu--m .deka-menu__list a,
  .deka-menu.deka-menu--m .deka-menu__list a:hover {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--m-R);
    padding: 0 1.25rem 0 2rem;
    overflow: hidden;
    font-family: var(--dk-display);
    font-stretch: 72%;
    font-weight: 600;
    font-size: var(--m-fs);
    line-height: 1;
    color: var(--m-ink);
    text-decoration: none;
    background: transparent;
    transition: background-color .3s;
  }
  /* index: 01 ... 06 — on the item, not the link, so it is not read as part
     of the link's name (the empty alt text hides it where that is supported) */
  .deka-menu.deka-menu--m .deka-menu__list > li::after {
    content: counter(dk-nav, decimal-leading-zero);
    content: counter(dk-nav, decimal-leading-zero) / "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -.5em;
    font: 500 11px/1 var(--dk-mono);
    letter-spacing: 0;
    color: rgba(250, 247, 246, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s, color .2s;
  }
  /* hairline under the row: drawn left to right on open, Cashmere when pressed */
  .deka-menu.deka-menu--m .deka-menu__list a::after,
  .deka-menu.deka-menu--m .deka-menu__list a:hover::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    width: auto;
    height: 1px;
    background: var(--m-line);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .2s var(--m-ease-in), background-color .2s;
  }
  .deka-menu.deka-menu--m .deka-menu__label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    line-height: var(--m-R);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(100%);
    transition: transform .18s var(--m-ease-in), translate .3s var(--m-ease);
  }

  .deka-menu.deka-menu--m.is-open .deka-menu__label {
    transform: none;
    transition: transform .56s var(--m-ease) var(--m-d), translate .12s var(--m-ease);
  }
  .deka-menu.deka-menu--m.is-open .deka-menu__list a::after {
    transform: none;
    transition: transform .6s var(--m-ease) var(--m-d), background-color .2s;
  }
  .deka-menu.deka-menu--m.is-open .deka-menu__list > li::after {
    opacity: 1;
    transition: opacity .3s linear calc(var(--m-d) + 120ms), color .2s;
  }
  .deka-menu.deka-menu--m .deka-menu__list > li:has(> a:active)::after,
  .deka-menu.deka-menu--m .deka-menu__list > .is-current::after { color: var(--m-acc); }

  /* pressed */
  .deka-menu.deka-menu--m .deka-menu__list a:active { background: rgba(250, 247, 246, .04); transition: none; }
  .deka-menu.deka-menu--m .deka-menu__list a:active .deka-menu__label { translate: 6px 0; }
  .deka-menu.deka-menu--m .deka-menu__list a:active::after { background: var(--m-acc); }

  /* current section: Cashmere label + index, and a lit "floor" square at the right */
  .deka-menu.deka-menu--m .deka-menu__list > .is-current > a { color: var(--m-acc); }
  .deka-menu.deka-menu--m .deka-menu__list > .is-current > a::after { background: rgba(188, 170, 125, .45); }
  .deka-menu.deka-menu--m .deka-menu__list > .is-current::before {
    content: "";
    position: absolute;
    top: 50%;
    right: .25rem;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background: var(--m-acc);
    transform: scale(0);
    transition: transform .15s;
    pointer-events: none;
    z-index: 1;
  }
  .deka-menu.deka-menu--m.is-open .deka-menu__list > .is-current::before {
    transform: none;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1) calc(var(--m-d) + 380ms);
  }

  /* ---- 2. current projects: two tickets ----------------------------------- */
  .deka-menu.deka-menu--m .deka-menu__col--projects {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(1.75rem + var(--m-tk-max));
    display: flex;
    flex-direction: column;
    margin: var(--m-g1) 0 1rem;
  }
  .deka-menu.deka-menu--m .deka-menu__heading {
    flex: none;
    display: flex;
    align-items: center;
    height: 1.75rem;
    margin: 0;
    line-height: 1;
    color: var(--m-acc);
    opacity: 0;
    transform: translateY(.5rem);
    transition: opacity .15s, transform .15s;
  }
  .deka-menu.deka-menu--m.is-open .deka-menu__heading {
    opacity: 1;
    transform: none;
    transition: opacity .4s linear .28s, transform .5s var(--m-ease) .28s;
  }
  .deka-menu.deka-menu--m .deka-menu__projects {
    flex: 1 1 auto;
    min-height: var(--m-tk-min);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: .5rem;
  }

  .deka-menu.deka-menu--m .deka-project-card {
    --m-d: .32s;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: minmax(0, 1fr) var(--m-band);
    height: auto;
    min-height: 0;
    border-radius: 0;
    overflow: hidden;
    opacity: 1;
    transform: none;
    clip-path: inset(100% 0 0 0);
    transition: clip-path .2s var(--m-ease-in), scale .3s var(--m-ease);
  }
  .deka-menu.deka-menu--m .deka-project-card:nth-child(2) { --m-d: .39s; }
  .deka-menu.deka-menu--m .deka-project-card:nth-child(n + 3) { --m-d: .46s; }
  .deka-menu.deka-menu--m.is-open .deka-project-card {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
    transition: clip-path .64s var(--m-ease) var(--m-d), scale .14s var(--m-ease);
  }

  .deka-menu.deka-menu--m .deka-project-card__image,
  .deka-menu.deka-menu--m .deka-project-card:hover .deka-project-card__image {
    inset: 0 0 var(--m-band) 0;
    z-index: -1;
    transform: scale(1.15);
    transition: transform .3s var(--m-ease);
  }
  .deka-menu.deka-menu--m.is-open .deka-project-card__image {
    transform: none;
    transition: transform 1.1s var(--m-ease) var(--m-d);
  }
  .deka-menu.deka-menu--m .deka-project-card__scrim,
  .deka-menu.deka-menu--m .deka-project-card:hover .deka-project-card__scrim {
    inset: 0 0 var(--m-band) 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(34, 33, 34, .9) 0%, rgba(34, 33, 34, .25) 55%, rgba(34, 33, 34, 0) 100%);
  }

  /* body back in flow so the title link's overlay spans the ticket, not the body */
  .deka-menu.deka-menu--m .deka-project-card__body,
  .deka-menu.deka-menu--m .deka-project-card:hover .deka-project-card__body,
  .deka-menu.deka-menu--m .deka-project-card:focus-within .deka-project-card__body {
    position: static;
    grid-row: 1;
    align-self: end;
    min-width: 0;
    padding: 0 .625rem .5rem;
    transform: none;
  }
  /* status and total give way to what a buyer asks first: how many are left, from what price */
  .deka-menu.deka-menu--m .deka-project-card__meta { display: none; }
  .deka-menu.deka-menu--m .deka-project-card__facts {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin: 0 0 .1875rem;
    font: 500 10px/1.2 var(--dk-mono);
    letter-spacing: 0;
    white-space: nowrap;
  }
  .deka-menu.deka-menu--m .deka-project-card__free { color: var(--m-acc); }
  .deka-menu.deka-menu--m .deka-project-card__price { color: var(--m-ink); font-size: 11px; font-variant-numeric: tabular-nums; }
  /* the name is carried by the DEKA | name lockup; the text stays for screen readers and the lockup script */
  .deka-menu.deka-menu--m .deka-project-card__title { margin: 0; font-size: 0; line-height: 0; }
  .deka-menu.deka-menu--m .deka-project-card__location {
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .deka-menu.deka-menu--m .deka-project-card__arrow { display: none; }

  .deka-menu.deka-menu--m .deka-project-card > .dk-lockup {
    --dk-lh: 22px;
    top: .625rem;
    left: .625rem;
    opacity: 0;
    transition: opacity .15s;
  }
  .deka-menu.deka-menu--m.is-open .deka-project-card > .dk-lockup {
    opacity: 1;
    transition: opacity .4s linear calc(var(--m-d) + .25s);
  }

  /* band: the second destination (apartments of this project) */
  .deka-menu.deka-menu--m .deka-project-card__cta,
  .deka-menu.deka-menu--m .deka-project-card:hover .deka-project-card__cta,
  .deka-menu.deka-menu--m .deka-project-card:focus-within .deka-project-card__cta {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    height: var(--m-band);
    padding: 0 .75rem;
    border-top: 1px solid var(--m-line);
    background: var(--m-panel);
    color: var(--m-ink);
    text-align: left;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .deka-menu.deka-menu--m .deka-project-card__cta::after {
    content: "\2192";
    color: var(--m-acc);
    transition: translate .2s var(--m-ease);
  }
  .deka-menu.deka-menu--m .deka-project-card__cta:hover { background: var(--m-panel); color: var(--m-ink); }
  .deka-menu.deka-menu--m .deka-project-card__cta:active { background: var(--m-acc); color: var(--dk-black, #222122); transition: none; }
  .deka-menu.deka-menu--m .deka-project-card__cta:active::after { color: inherit; translate: 4px 0; }
  .deka-menu.deka-menu--m .deka-project-card:has(.deka-project-card__link:active) { scale: .97; }
  .deka-menu.deka-menu--m .deka-project-card:has(.deka-project-card__link:focus-visible) { outline: 2px solid var(--m-acc); outline-offset: 2px; }
  .deka-menu.deka-menu--m .deka-project-card.is-current::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 3;
    height: 2px;
    background: var(--m-acc);
    pointer-events: none;
  }

  /* ---- 3. dock: call, write, follow --------------------------------------- */
  .deka-menu.deka-menu--m .deka-menu__dock {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: none;
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid var(--m-line);
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity .18s, transform .18s var(--m-ease-in);
  }
  .deka-menu.deka-menu--m.is-open .deka-menu__dock {
    opacity: 1;
    transform: none;
    transition: opacity .4s linear .38s, transform .52s var(--m-ease) .38s;
  }

  .deka-menu.deka-menu--m .deka-menu__actions { display: flex; gap: .5rem; }
  .deka-menu.deka-menu--m .deka-menu__call,
  .deka-menu.deka-menu--m .deka-menu__call:hover {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .625rem;
    height: var(--m-cta);
    padding: 0 1rem;
    background: var(--m-acc);
    color: var(--dk-black, #222122);
    font: 500 11px/1 var(--dk-mono);
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .25s, scale .14s var(--m-ease);
  }
  .deka-menu.deka-menu--m .deka-menu__call-icon { width: 1.125rem; height: 1.125rem; flex: none; }
  .deka-menu.deka-menu--m .deka-menu__call::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    background: linear-gradient(100deg, rgba(250, 247, 246, 0), rgba(250, 247, 246, .5), rgba(250, 247, 246, 0));
    transform: translateX(-120%);
    pointer-events: none;
  }
  .deka-menu.deka-menu--m.is-open .deka-menu__call::after { animation: deka-menu-sheen .9s var(--m-ease) .95s 1; }
  @keyframes deka-menu-sheen { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
  .deka-menu.deka-menu--m .deka-menu__call:active { background: var(--m-ink); scale: .98; transition: none; }
  .deka-menu.deka-menu--m .deka-menu__call:active .deka-menu__call-icon { animation: deka-menu-ring .45s var(--m-ease); }
  @keyframes deka-menu-ring { 0% { rotate: 0deg; } 25% { rotate: -16deg; } 50% { rotate: 12deg; } 75% { rotate: -6deg; } 100% { rotate: 0deg; } }

  .deka-menu.deka-menu--m .deka-menu__quick {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--m-cta);
    height: var(--m-cta);
    border: 1px solid rgba(250, 247, 246, .24);
    color: var(--m-ink);
    transition: border-color .2s, color .2s, background-color .2s;
  }
  .deka-menu.deka-menu--m .deka-menu__quick:hover { color: var(--m-ink); }
  .deka-menu.deka-menu--m .deka-menu__quick svg { width: 1.25rem; height: 1.25rem; }
  .deka-menu.deka-menu--m .deka-menu__quick:active { border-color: var(--m-acc); color: var(--m-acc); background: rgba(188, 170, 125, .12); transition: none; }
  .deka-menu.deka-menu--m .deka-menu__quick--tel { display: none; }

  .deka-menu.deka-menu--m .deka-menu__tels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .deka-menu.deka-menu--m .deka-menu__tel,
  .deka-menu.deka-menu--m .deka-menu__tel:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    border: 1px solid var(--m-line);
    font: 500 12px/1 var(--dk-mono);
    letter-spacing: 0;
    color: var(--m-ink);
    text-decoration: none;
    white-space: nowrap;
  }
  .deka-menu.deka-menu--m .deka-menu__tel:active { border-color: var(--m-acc); color: var(--m-acc); }

  .deka-menu.deka-menu--m .deka-menu__utility {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    height: 2.75rem;
  }
  .deka-menu.deka-menu--m .deka-menu__mail,
  .deka-menu.deka-menu--m .deka-menu__mail:hover {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
    font: 500 11px/1 var(--dk-mono);
    letter-spacing: 0;
    color: var(--m-stone);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .deka-menu.deka-menu--m .deka-menu__mail:active { color: var(--m-acc); }
  .deka-menu.deka-menu--m .deka-menu__follow { display: flex; margin: 0 -.8125rem 0 0; padding: 0; list-style: none; }
  .deka-menu.deka-menu--m .deka-menu__follow a,
  .deka-menu.deka-menu--m .deka-menu__follow a:hover {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--m-stone);
  }
  .deka-menu.deka-menu--m .deka-menu__follow a:active { color: var(--m-acc); }

  .deka-menu.deka-menu--m .deka-menu__info {
    display: flex;
    flex-direction: column;
    margin: 0;
    font: 400 11px/16px var(--dk-mono);
    letter-spacing: 0;
    color: rgba(209, 205, 195, .6);
  }

  /* focus: one ring for everything in the menu */
  .deka-menu.deka-menu--m :is(a, button):focus-visible { outline: 2px solid var(--m-acc); outline-offset: 2px; }
  .deka-menu.deka-menu--m .deka-menu__list a:focus-visible { outline-offset: -2px; }

  /* pointer devices (tablets with a mouse) get the pressed look on hover */
  @media (hover: hover) {
    .deka-menu.deka-menu--m .deka-menu__list a:hover { background: rgba(250, 247, 246, .04); }
    .deka-menu.deka-menu--m .deka-menu__list a:hover .deka-menu__label { translate: 6px 0; }
    .deka-menu.deka-menu--m .deka-menu__list a:hover::after { background: var(--m-acc); }
    .deka-menu.deka-menu--m .deka-project-card__cta:hover { background: var(--m-acc); color: var(--dk-black, #222122); }
    .deka-menu.deka-menu--m .deka-menu__call:hover { background: var(--m-ink); }
    .deka-menu.deka-menu--m .deka-menu__quick:hover, .deka-menu.deka-menu--m .deka-menu__tel:hover, .deka-menu.deka-menu--m .deka-menu__mail:hover, .deka-menu.deka-menu--m .deka-menu__follow a:hover { color: var(--m-acc); border-color: var(--m-acc); }
  }

  /* ---- height tiers: things leave in order of importance ------------------ */

  /* B: < 820 tall — address and hours go (they live on /contact/ and in the footer) */
  @container deka-menu (max-height: 51.1875rem) {
    .deka-menu.deka-menu--m .deka-menu__inner { --m-g1: 1.25rem; }
    .deka-menu.deka-menu--m .deka-menu__info { display: none; }
  }
  /* C: < 700 — the two numbers fold into one call button beside WhatsApp */
  @container deka-menu (max-height: 43.6875rem) {
    .deka-menu.deka-menu--m .deka-menu__inner { --m-top: .5rem; --m-g1: 1rem; --m-fs: clamp(1.25rem, calc(9vw - 9px), 1.625rem); --m-tk-min: 7rem; }
    .deka-menu.deka-menu--m .deka-menu__tels,
    .deka-menu.deka-menu--m .deka-project-card__location { display: none; }
    .deka-menu.deka-menu--m .deka-menu__quick--tel { display: grid; }
  }
  /* D: <= 636 — tickets become lockup chips on their picture (one link: the project) */
  @container deka-menu (max-height: 39.75rem) {
    .deka-menu.deka-menu--m .deka-menu__inner { --m-g1: .75rem; --m-cta: 3rem; --m-band: 0px; --m-tk-min: 3rem; --m-tk-max: 6rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
    .deka-menu.deka-menu--m .deka-project-card__cta,
    .deka-menu.deka-menu--m .deka-project-card__location,
    .deka-menu.deka-menu--m .deka-project-card__facts,
    .deka-menu.deka-menu--m .deka-project-card__meta { display: none; }
    .deka-menu.deka-menu--m .deka-project-card__scrim { background: rgba(34, 33, 34, .55); }
    .deka-menu.deka-menu--m .deka-project-card > .dk-lockup { top: 50%; translate: 0 -50%; }
  }
  /* E: < 544 — mail and socials go; the dock sticks if the list still overflows */
  @container deka-menu (max-height: 33.9375rem) {
    .deka-menu.deka-menu--m .deka-menu__utility { display: none; }
    .deka-menu.deka-menu--m .deka-menu__dock {
      position: sticky;
      bottom: 0;
      margin-inline: calc(-1 * var(--m-gut));
      padding: .75rem var(--m-gut) max(.75rem, env(safe-area-inset-bottom));
      margin-bottom: calc(-1 * max(.75rem, env(safe-area-inset-bottom)));
      background: var(--dk-black, #222122);
    }
  }

  /* narrow phones (320) */
  @container deka-menu (max-width: 22.4375rem) {
    .deka-menu.deka-menu--m .deka-menu__inner { --m-gut: 1rem; }
    .deka-menu.deka-menu--m .deka-menu__mail { font-size: 10px; }
    .deka-menu.deka-menu--m .deka-menu__tel { font-size: 11px; }
  }

  /* ---- wider than 40rem: the header's 24px gutter; portrait tablets scale the phone layout up ---- */
  @container deka-menu (min-width: 40.0625rem) {
    .deka-menu.deka-menu--m .deka-menu__inner {
      --m-gut: 1.5rem;
      --m-R: clamp(2.75rem, 6.2cqh, 4rem);
      --m-fs: clamp(1.75rem, 5.4cqw, 2.75rem);
      --m-tk-max: 16rem;
    }
  }

  /* ---- landscape: two columns, nav left, projects and dock right --------- */
  @container deka-menu (orientation: landscape) {
    .deka-menu.deka-menu--m .deka-menu__inner {
      --m-R: 2.75rem;
      --m-fs: clamp(1.25rem, 3.6cqw, 1.75rem);
      --m-band: 2.75rem;
      --m-tk-min: 3rem;
      --m-tk-max: 100cqh;
      --m-cta: 3rem;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr) auto;
      column-gap: 2rem;
      align-content: start;
      height: 100%;
      min-height: 0;
    }
    .deka-menu.deka-menu--m .deka-menu__col--nav { grid-column: 1; grid-row: 1 / 4; }
    .deka-menu.deka-menu--m .deka-menu__col--projects { grid-column: 2; grid-row: 1 / 3; margin: 0 0 .75rem; }
    .deka-menu.deka-menu--m .deka-menu__dock { grid-column: 2; grid-row: 3; position: static; margin: 0; padding: .75rem 0 0; background: none; }
    .deka-menu.deka-menu--m .deka-menu__utility { display: flex; }
    .deka-menu.deka-menu--m .deka-menu__tels, .deka-menu.deka-menu--m .deka-menu__info { display: none; }
    .deka-menu.deka-menu--m .deka-menu__quick--tel { display: grid; }
    .deka-menu.deka-menu--m .deka-project-card__cta { display: flex; }
    .deka-menu.deka-menu--m .deka-project-card__facts { display: flex; }
    .deka-menu.deka-menu--m .deka-project-card > .dk-lockup { top: .625rem; translate: none; }
    .deka-menu.deka-menu--m .deka-project-card__scrim { background: linear-gradient(to top, rgba(34, 33, 34, .9) 0%, rgba(34, 33, 34, .25) 55%, rgba(34, 33, 34, 0) 100%); }
  }
  /* small landscape: the column is too narrow for the address beside the icons */
  @container deka-menu (orientation: landscape) and (max-width: 49.9375rem) {
    .deka-menu.deka-menu--m .deka-menu__mail { display: none; }
    .deka-menu.deka-menu--m .deka-menu__utility { justify-content: flex-end; }
  }
  /* tall landscape (tablets): bigger rows and type, both numbers back */
  @container deka-menu (orientation: landscape) and (min-height: 43.75rem) {
    .deka-menu.deka-menu--m .deka-menu__inner { --m-R: clamp(2.75rem, 8cqh, 4.5rem); --m-fs: clamp(1.25rem, 3.6cqw, 2.25rem); --m-cta: 3.25rem; }
    .deka-menu.deka-menu--m .deka-menu__tels { display: grid; }
    .deka-menu.deka-menu--m .deka-menu__quick--tel { display: none; }
  }
}

@media (max-width: 40rem) {
  .deka-header__toggle { width: 2.75rem; margin-inline-end: -.4375rem; }                     /* bars 30 -> 44 box */
}

/* reduced motion: a 200 ms cross-fade, nothing moves */
@media (max-width: 64rem) and (prefers-reduced-motion: reduce) {
  .deka-menu.deka-menu--m, .deka-menu.deka-menu--m.is-open { clip-path: none; opacity: 0; transition: opacity .15s linear, visibility 0s linear .15s; }
  .deka-menu.deka-menu--m.is-open { opacity: 1; transition: opacity .2s linear, visibility 0s; }
  .deka-menu.deka-menu--m .deka-menu__edge { display: none; }
  .deka-menu.deka-menu--m :is(.deka-menu__label, .deka-menu__heading, .deka-project-card, .deka-project-card__image, .deka-project-card > .dk-lockup, .deka-menu__dock),
  .deka-menu.deka-menu--m .deka-menu__list a::after, .deka-menu.deka-menu--m .deka-menu__list > li::after, .deka-menu.deka-menu--m .deka-menu__list > .is-current::before {
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
  .deka-menu.deka-menu--m .deka-menu__call::after { display: none; }
  .deka-menu.deka-menu--m .deka-menu__call:active .deka-menu__call-icon { animation: none; }
}