/* Approved 29 Oct composition. Only this homepage hero and its overlay header. */
.hero--mockup{height:100svh;min-height:760px;max-height:1300px;padding:0;display:block;background:#041522;overflow:hidden;isolation:isolate}
.hero--mockup .architectural-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;z-index:-3}
.hero--mockup .architectural-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(0,17,29,.97) 0%,rgba(0,17,29,.86) 30%,rgba(0,17,29,.25) 66%,rgba(0,17,29,.12)),linear-gradient(0deg,rgba(0,17,29,.72),transparent 60%,rgba(0,17,29,.3))}
.hero--mockup .architectural-layout{height:100%;max-width:1800px;margin:auto;padding:clamp(164px,22svh,240px) var(--gutter) 70px;position:relative;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;column-gap:6%;align-content:center}
.hero--mockup .architectural-copy{grid-column:1;grid-row:1;align-self:end}
.hero--mockup .hero-facts{display:flex;align-items:center;gap:19px;color:#b1d5ed;font-size:13px;line-height:1.4;margin:0 0 27px;letter-spacing:.015em}
.hero--mockup .hero-facts i{width:44px;height:1px;background:#82bce7}
.hero--mockup h1{font-size:clamp(52px,4.55vw,76px);line-height:1.065;letter-spacing:-.046em;font-weight:800;max-width:none;margin:0;color:#f6f8fa}
.hero--mockup h1 em{font-style:normal;color:#80c2f5}
.hero--mockup .architectural-description{font-size:18px;line-height:1.55;max-width:500px;margin:25px 0 0;color:#edf2f5}
.hero--mockup .architectural-cta{grid-column:1;grid-row:2;display:flex;gap:16px;margin-top:30px;align-items:start}
.hero--mockup .architectural-button{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 24px;min-height:52px;font-size:13px;font-weight:600;line-height:1.3;border:1px solid #d1e0e8;border-radius:7px;text-decoration:none;background:#00111d3d;transition:background .2s,transform .2s}
.hero--mockup .architectural-button.primary{background:#087cf5;border-color:#087cf5}.hero--mockup .architectural-button:hover{background:#19517a;transform:translateY(-2px)}.hero--mockup .architectural-button.primary:hover{background:#2995ff}.hero--mockup a:focus-visible{outline:3px solid #b6e0ff;outline-offset:5px}.hero--mockup .architectural-button>span{font-size:21px;font-weight:400}
.hero--mockup .architectural-sectors{grid-column:1;grid-row:3;display:grid;grid-template-columns:repeat(4,1fr);align-self:start;gap:0;list-style:none;margin:45px 0 0;padding:23px 0 0;border-top:1px solid #d1e0e877;max-width:560px}
.hero--mockup .architectural-sectors li{display:flex;flex-direction:column;gap:6px;padding:0 19px;border-left:1px solid #d1e0e855;font-size:12px;line-height:1.6;text-transform:uppercase}.hero--mockup .architectural-sectors li:first-child{border:0;padding-left:0}.hero--mockup .architectural-sectors li:last-child{padding-right:0}.hero--mockup .architectural-sectors li>span:first-child{color:#91c9f1;font-size:13px}.hero--mockup .architectural-sectors b{display:block;font-weight:400}
.hero--mockup .architectural-projects{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:end;justify-content:end;gap:22px;padding-bottom:0}
.hero--mockup .architectural-card{display:block;position:relative;width:79%;height:clamp(180px,24svh,255px);border:1px solid #ffffff66;border-radius:12px;overflow:hidden;box-shadow:0 18px 50px #00111e44;text-decoration:none;background:#102536;isolation:isolate;transition:transform .3s,border-color .3s}
.hero--mockup .architectural-card.card-merkur{margin-right:35px}.hero--mockup .architectural-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}.hero--mockup .card-merkur img{object-position:50% 40%}.hero--mockup .architectural-card::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#00101ff5,rgba(0,16,31,.35) 42%,transparent 80%)}.hero--mockup .architectural-card:hover{transform:translateY(-4px);border-color:#8ed1ff}.hero--mockup .architectural-card:hover img{transform:scale(1.04)}
.hero--mockup .card-caption{position:absolute;left:20px;bottom:20px;right:65px;display:flex;flex-direction:column;gap:3px;line-height:1.35}.hero--mockup .card-caption strong{font-size:18px;letter-spacing:-.03em}.hero--mockup .card-caption span{font-size:12px}.hero--mockup .card-caption small{font-size:11px;color:#c4cfd7}.hero--mockup .card-arrow{position:absolute;right:18px;bottom:20px;width:36px;height:36px;border:1px solid #65b8f4;border-radius:50%;display:grid;place-items:center;font-size:23px}
.hero-mockup-page .site-header:not(.is-scrolled){height:110px}
@media(min-width:1600px){.hero--mockup .architectural-layout{padding-top:24svh}.hero--mockup .architectural-description{font-size:19px}}
@media(min-width:701px) and (max-width:1100px){.hero--mockup .architectural-layout{column-gap:3%;grid-template-columns:1.3fr 1fr}.hero--mockup h1{font-size:51px}.hero--mockup .architectural-description{font-size:15px}.hero--mockup .architectural-button{padding:15px;font-size:12px}.hero--mockup .architectural-card{width:95%}.hero--mockup .architectural-sectors li{padding-inline:10px;font-size:10px}}
@media(max-width:700px){
.hero-mockup-page .site-header:not(.is-scrolled){height:88px;padding-top:0}.hero-mockup-page .brand img{width:158px}.hero-mockup-page .menu-toggle{--action-surface:transparent}.hero-mockup-page .menu-toggle::before,.hero-mockup-page .menu-toggle::after{background:transparent}
.hero--mockup{height:auto;min-height:100svh;max-height:none;padding:0;display:block}
.hero--mockup .architectural-photo{height:65%;object-position:56% 62%}
.hero--mockup .architectural-shade{background:linear-gradient(0deg,#041522 0%,#041522 28%,rgba(4,21,34,.92) 44%,rgba(4,21,34,.06) 76%,rgba(4,21,34,.5)),linear-gradient(90deg,#04152222,transparent)}
.hero--mockup .architectural-layout{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:0;padding:clamp(265px,35svh,330px) 20px 25px;height:auto;min-height:100svh}
.hero--mockup .architectural-copy{grid-column:1;grid-row:1;align-self:auto}.hero--mockup .hero-facts{font-size:10px;gap:13px;margin-bottom:16px}.hero--mockup .hero-facts i{width:33px}
.hero--mockup h1{font-size:clamp(30px,8.8vw,40px);line-height:1.08;letter-spacing:-.045em}.hero--mockup .architectural-description{font-size:14px;line-height:1.48;margin-top:16px;max-width:100%}
.hero--mockup .architectural-projects{grid-row:2;grid-column:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;margin-top:22px}.hero--mockup .architectural-card{width:100%;height:138px;border-radius:8px}.hero--mockup .architectural-card.card-merkur{margin:0}.hero--mockup .card-caption{left:11px;bottom:12px;right:34px;gap:3px}.hero--mockup .card-caption strong{font-size:14px}.hero--mockup .card-caption .card-full-name{display:none}.hero--mockup .card-caption small{font-size:9px;white-space:nowrap;letter-spacing:-.025em}.hero--mockup .card-arrow{right:9px;bottom:12px;width:27px;height:27px;font-size:19px}
.hero--mockup .architectural-sectors{grid-column:1;grid-row:3;margin:24px 0 0;padding:0;border:0;max-width:none}.hero--mockup .architectural-sectors li{padding:0 9px;font-size:9px;gap:6px;line-height:1.4}.hero--mockup .architectural-sectors li>span:first-child{font-size:12px}.hero--mockup .architectural-sectors b{display:none}
.hero--mockup .architectural-cta{grid-column:1;grid-row:3;margin-top:26px;gap:10px;display:grid;grid-template-columns:1fr 1fr}.hero--mockup .architectural-button{padding:13px 8px;gap:7px;min-height:46px;font-size:10px;border-radius:6px;white-space:nowrap}.hero--mockup .architectural-button>span{font-size:17px}
}
@media(max-width:374px){.hero--mockup .architectural-layout{padding:240px 16px 20px}.hero--mockup .architectural-description{font-size:12px;margin-top:13px}.hero--mockup .hero-facts{margin-bottom:13px}.hero--mockup .architectural-projects{margin-top:18px}.hero--mockup .architectural-card{height:115px}.hero--mockup .card-caption strong{font-size:12px}.hero--mockup .architectural-sectors li{padding-inline:6px;font-size:8px}.hero--mockup .architectural-cta{margin-top:22px}.hero--mockup .architectural-button{font-size:9px;gap:4px}.hero-mockup-page .brand img{width:145px}}


/* DUO CARD DEPTH POLISH 2026-10-29
   Scope: floating project cards + their hero composition only.
   Dominant photograph, project sources, navigation and rest of site unchanged. */
@media (min-width: 1101px) {
  .hero--mockup .architectural-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
    column-gap: clamp(32px, 5.5vw, 94px);
  }
}
.hero--mockup .architectural-projects {
  justify-content: center;
  gap: clamp(14px, 2svh, 21px);
  perspective: 1100px;
}
.hero--mockup .architectural-card {
  width: min(72%, 390px);
  height: clamp(176px, 22svh, 218px);
  max-width: 390px;
  border-radius: 20px;
  border: 1px solid rgba(229, 244, 255, .43);
  box-shadow:
    0 34px 64px rgba(0, 10, 22, .58),
    0 12px 24px rgba(0, 12, 28, .4),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  background: #0c2131;
  will-change: transform;
  transition:
    transform .5s cubic-bezier(.22,.7,.28,1),
    box-shadow .5s cubic-bezier(.22,.7,.28,1),
    border-color .3s;
}
.hero--mockup .architectural-card.card-nsk {
  transform: translate3d(-13px, -5px, 0) rotate(-.65deg);
}
.hero--mockup .architectural-card.card-merkur {
  margin-right: clamp(20px, 3vw, 42px);
  transform: translate3d(-1px, 4px, 0) rotate(.65deg);
}
.hero--mockup .architectural-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .33),
              inset 1px 0 0 rgba(255, 255, 255, .12),
              inset -1px 0 0 rgba(111, 193, 239, .12);
  background: linear-gradient(140deg, rgba(255,255,255,.09), transparent 33%, transparent 72%, rgba(3,19,32,.1));
}
.hero--mockup .architectural-card::after {
  background:
    linear-gradient(0deg, rgba(0, 12, 24, .97) 0%, rgba(0,14,29,.82) 22%,
      rgba(0,19,37,.32) 51%, transparent 82%);
}
.hero--mockup .architectural-card img {
  filter: saturate(.88) contrast(1.055);
  transition: transform .7s cubic-bezier(.22,.7,.28,1), filter .5s;
}
.hero--mockup .architectural-card .card-caption {
  left: 20px;
  right: 64px;
  bottom: 19px;
  z-index: 2;
}
.hero--mockup .architectural-card .card-caption strong {
  font-size: 18px;
  letter-spacing: -.035em;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0, 8, 20, .5);
}
.hero--mockup .architectural-card .card-caption small {
  color: #dbe6ef;
}
.hero--mockup .architectural-card .card-arrow {
  z-index: 2;
  right: 17px;
  bottom: 17px;
  width: 36px;
  height: 36px;
  background: rgba(3, 22, 36, .48);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 4px 14px rgba(0,13,27,.3);
}
.hero--mockup .architectural-card:hover,
.hero--mockup .architectural-card:focus-visible {
  border-color: rgba(166, 220, 255, .86);
  box-shadow:
    0 42px 76px rgba(0, 10, 22, .63),
    0 15px 30px rgba(0, 12, 28, .44),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.hero--mockup .architectural-card.card-nsk:hover,
.hero--mockup .architectural-card.card-nsk:focus-visible {
  transform: translate3d(-13px, -12px, 0) rotate(-.4deg);
}
.hero--mockup .architectural-card.card-merkur:hover,
.hero--mockup .architectural-card.card-merkur:focus-visible {
  transform: translate3d(-1px, -4px, 0) rotate(.4deg);
}
@media (min-width: 701px) and (max-width: 1100px) {
  .hero--mockup .architectural-card {
    width: min(88%, 350px);
    height: clamp(168px, 21svh, 205px);
  }
  .hero--mockup .architectural-card.card-merkur { margin-right: 18px; }
  .hero--mockup .architectural-projects { gap: 14px; }
  .hero--mockup .card-caption .card-full-name { display: none; }
}
@media (max-width: 700px) {
  .hero--mockup .architectural-layout {
    padding-left: clamp(16px, 5.1vw, 22px);
    padding-right: clamp(16px, 5.1vw, 22px);
  }
  .hero--mockup .architectural-projects {
    width: 100%;
    max-width: 340px;
    margin: 20px auto 0;
    gap: 12px;
    perspective: none;
  }
  .hero--mockup .architectural-card {
    width: 100%;
    max-width: none;
    height: clamp(116px, 15.4svh, 134px);
    border-radius: 16px;
    will-change: auto;
  }
  .hero--mockup .architectural-card.card-nsk,
  .hero--mockup .architectural-card.card-merkur {
    transform: none;
    margin: 0;
  }
  .hero--mockup .architectural-card.card-nsk:hover,
  .hero--mockup .architectural-card.card-nsk:focus-visible,
  .hero--mockup .architectural-card.card-merkur:hover,
  .hero--mockup .architectural-card.card-merkur:focus-visible {
    transform: translateY(-3px);
  }
  .hero--mockup .architectural-card .card-caption {
    left: 11px;
    bottom: 12px;
    right: 37px;
    gap: 3px;
  }
  .hero--mockup .architectural-card .card-caption strong { font-size: 13px; }
  .hero--mockup .architectural-card .card-caption small { font-size: 9px; }
  .hero--mockup .architectural-card .card-arrow {
    width: 29px;
    height: 29px;
    right: 9px;
    bottom: 10px;
    font-size: 19px;
  }
  .hero--mockup h1 {
    font-size: clamp(25px, 8.2vw, 32px);
    line-height: 1.13;
    letter-spacing: -.055em;
  }
  .hero--mockup h1 .hero-mobile-join { display: none; }
  .hero--mockup .architectural-description { margin-top: 15px; }
  .hero--mockup .architectural-sectors { margin-top: 21px; }
  .hero--mockup .architectural-cta { margin-top: 22px; }
}
@media (max-width: 374px) {
  .hero--mockup h1 { font-size: clamp(24px, 8.1vw, 27px); }
  .hero--mockup .architectural-card { height: 112px; }
  .hero--mockup .architectural-projects { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--mockup .architectural-card,
  .hero--mockup .architectural-card img { transition: none !important; }
  .hero--mockup .architectural-card.card-nsk,
  .hero--mockup .architectural-card.card-merkur { transform: none; }
}


/* MOBILE CARD CAPTION REGRESSION FIX — 2026-10-29 */
/* Reinstate original mobile width and make the shortened, readable caption
   win over the later shared card-caption selector. Desktop stays unchanged. */
@media (max-width: 700px) {
  .hero--mockup .architectural-projects {
    max-width: none;
    margin: 20px 0 0;
    gap: 10px;
  }
  .hero--mockup .architectural-card {
    height: clamp(128px, 16.5svh, 142px);
    border-radius: 16px;
  }
  .hero--mockup .architectural-card .card-caption {
    left: 11px;
    right: 46px;
    bottom: 13px;
    min-width: 0;
    gap: 3px;
  }
  .hero--mockup .architectural-card .card-caption strong {
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.14;
    overflow-wrap: normal;
  }
  .hero--mockup .architectural-card .card-caption small {
    font-size: clamp(8px, 2.3vw, 9.5px);
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: normal;
    letter-spacing: -.02em;
    max-width: 100%;
  }
  .hero--mockup .architectural-card .card-arrow {
    right: 9px;
    bottom: 11px;
    width: 28px;
    height: 28px;
  }
}
@media (max-width: 374px) {
  .hero--mockup .architectural-card { height: 124px; }
  .hero--mockup .architectural-card .card-caption {
    left: 9px;
    right: 42px;
    bottom: 11px;
  }
  .hero--mockup .architectural-card .card-caption strong { font-size: 12px; }
  .hero--mockup .architectural-card .card-caption small { font-size: 8px; }
  .hero--mockup .architectural-card .card-arrow {
    width: 27px;
    height: 27px;
    right: 8px;
    bottom: 10px;
  }
}


/* DUO PROJECT CARD SVG ARROW POLISH — 2026-10-29 */
/* Keep original circle size/placement; center a fixed-geometry brand SVG instead
   of relying on platform-dependent typographic arrow metrics. */
.hero--mockup .architectural-card .card-arrow {
  display: grid;
  place-items: center;
  padding: 0;
  color: #f0f7fb;
  border: 1px solid rgba(152, 186, 204, .70);
  background: rgba(3, 20, 33, .46);
  box-shadow: 0 4px 12px rgba(0, 13, 27, .22), inset 0 1px rgba(255,255,255,.08);
  line-height: 0;
}
.hero--mockup .architectural-card .card-arrow-icon {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateX(.5px);
  pointer-events: none;
}
.hero--mockup .architectural-card:hover .card-arrow,
.hero--mockup .architectural-card:focus-visible .card-arrow {
  border-color: rgba(193, 228, 247, .95);
  color: #fff;
  background: rgba(8, 43, 67, .72);
}
@media (max-width: 700px) {
  .hero--mockup .architectural-card .card-arrow-icon {
    width: 15px;
    height: 15px;
  }
}

/* DUO ORIGINAL ARCHITECTURAL ACTIONS — approved 2026-10-29 */
/* Hero uses shared ui.css .action component, retaining its chamfered geometry,
   distinct arrow slot and focus states. No global action styles are changed. */
.hero--mockup .architectural-cta .action {
  --duo-action-chamfer: 14px;
  --duo-action-height: 54px;
  --duo-arrow-slot: 44px;
  min-height: 54px;
  font-size: 13px;
  line-height: 1.25;
  gap: 0;
  flex-shrink: 0;
}
.hero--mockup .architectural-cta .action-label {
  padding: 15px 19px;
  white-space: nowrap;
}
.hero--mockup .architectural-cta .action-arrow {
  min-width: var(--duo-arrow-slot);
}
.hero--mockup .architectural-cta .icon {
  width: 18px;
  height: 18px;
}
.hero--mockup .architectural-cta .action--outline {
  --action-surface: rgba(4, 22, 36, .60);
  --line: rgba(177, 210, 229, .78);
}
@media (min-width: 701px) and (max-width: 1100px) {
  .hero--mockup .architectural-cta .action { font-size: 12px; --duo-arrow-slot: 40px; }
  .hero--mockup .architectural-cta .action-label { padding: 13px 14px; }
}
@media (max-width: 700px) {
  .hero--mockup .architectural-cta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 24px;
  }
  .hero--mockup .architectural-cta .action {
    --duo-action-chamfer: 12px;
    --duo-action-height: 49px;
    --duo-arrow-slot: 32px;
    min-height: 49px;
    min-width: 0;
    width: 100%;
    font-size: 11px;
  }
  .hero--mockup .architectural-cta .action-label {
    padding: 12px 7px;
    white-space: nowrap;
  }
  .hero--mockup .architectural-cta .icon { width: 16px; height: 16px; }
}
@media (max-width: 374px) {
  .hero--mockup .architectural-cta { gap: 8px; margin-top: 20px; }
  .hero--mockup .architectural-cta .action {
    --duo-action-chamfer: 10px;
    --duo-arrow-slot: 28px;
    font-size: 10px;
  }
  .hero--mockup .architectural-cta .action-label { padding: 11px 5px; }
  .hero--mockup .architectural-cta .icon { width: 15px; height: 15px; }
}


/* DUO APPROVED TWO-PHOTO HERO — 2026-10-29 */
/* Approved hero photographs only; dark background is the fallback while they load. */

.hero--mockup .architectural-photo {
  width: 100%;
  height: 100%;
  background-color: #041522;
  background-image: url("/assets/hero/duo-hero-approved-desktop.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero--mockup .architectural-shade {
  background:
    linear-gradient(90deg,rgba(0,15,29,.89) 0%,rgba(0,17,29,.73) 32%,rgba(0,17,29,.23) 67%,rgba(0,17,29,.08) 100%),
    linear-gradient(0deg,rgba(0,17,29,.52) 0%,transparent 54%,rgba(0,17,29,.25) 100%);
}
@media (max-width:700px) {
  .hero--mockup .architectural-photo {
    height: 100%;
    background-image: url("/assets/hero/duo-hero-approved-mobile.jpg");
    background-size: cover;
    background-position: center top;
  }
  .hero--mockup .architectural-shade {
    background:
      linear-gradient(0deg,#041522 0%,rgba(4,21,34,.94) 22%,rgba(4,21,34,.77) 44%,rgba(4,21,34,.12) 76%,rgba(4,21,34,.24) 100%),
      linear-gradient(90deg,rgba(4,21,34,.18),rgba(4,21,34,0));
  }
}


/* DUO HERO PHOTO — FULL COLOR, OVERLAY DISABLED (29 OCT 2026) */
/* Both the desktop and mobile originals are shown without any global gradient.
   Keep the shade element dormant for a future, explicitly approved local treatment.
   Project-card gradients are intentionally untouched for legibility. */
.hero--mockup .architectural-shade {
  display: none;
}


/* DUO HERO DESCRIPTION — LOCAL SOFT BLUE READABILITY (2026-10-29) */
/* Apply the faint branded blue veil to the description paragraph only.
   No global photo shading, metadata shading, title shading or visible panel edges. */
.hero--mockup .architectural-description {
  position: relative;
  isolation: isolate;
}
.hero--mockup .architectural-description::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -15px -22px;
  background: radial-gradient(ellipse at 45% 50%,
    rgba(3, 29, 58, .46) 0%,
    rgba(3, 29, 58, .25) 55%,
    rgba(3, 29, 58, 0) 90%);
  filter: blur(12px);
}
@media (max-width: 700px) {
  .hero--mockup .architectural-description::before {
    inset: -14px -12px;
    background: radial-gradient(ellipse at 48% 50%,
      rgba(3, 29, 58, .54) 0%,
      rgba(3, 29, 58, .28) 56%,
      rgba(3, 29, 58, 0) 91%);
    filter: blur(10px);
  }
}


/* DUO DESKTOP FULLSCREEN HERO — 2026-10-29 */
/* Desktop image always reaches the bottom of the visible browser viewport.
   Mobile retains the approved content-driven layout. */
@media (min-width: 701px) {
  .hero--mockup {
    height: 100vh;
    min-height: 100vh;
    max-height: none;
  }
}
@supports (height: 100dvh) {
  @media (min-width: 701px) {
    .hero--mockup {
      height: 100dvh;
      min-height: 100dvh;
    }
  }
}


/* DUO HEADER CTA — COMPACT ARCHITECTURAL (2026-10-29) */
/* Home hero: same chamfered, split-arrow primary action at the top and while
   scrolling. Mobile navigation remains unchanged. */
@media (min-width: 1024px) {
  .hero-mockup-page .site-header .header-contact .action--primary {
    --duo-action-chamfer: 12px;
    --duo-action-height: 44px;
    --duo-arrow-slot: 40px;
    min-height: 44px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 0;
    background: transparent;
  }
  .hero-mockup-page .site-header .header-contact .action-label {
    padding: 12px 15px;
    white-space: nowrap;
  }
  .hero-mockup-page .site-header .header-contact .action--primary::before,
  .hero-mockup-page .site-header .header-contact .action--primary::after {
    display: block;
    background: var(--blue);
  }
  .hero-mockup-page .site-header .header-contact .action--primary:hover::before {
    background: var(--ice);
  }
  .hero-mockup-page .site-header .header-contact .action--primary:hover::after {
    background: #075fc9;
  }
  .hero-mockup-page .site-header .header-contact .action-arrow {
    min-width: 40px;
    border-left: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.035);
  }
  .hero-mockup-page .site-header .header-contact .icon {
    width: 17px;
    height: 17px;
  }
}

/* Desktop-only: NSK hero card uses the same compact two-line caption as Merkur. */
@media (min-width: 1024px) {
  .hero--mockup .architectural-card.card-nsk .card-caption .card-full-name {
    display: none;
  }
}