/* C "Celá budova": yellow + navy, one idea: each floor of the building is a service */
body { background: var(--yel); color: var(--navy-2); }
:focus-visible { outline-color: var(--navy); }

.head { display: flex; align-items: center; gap: 28px; padding: 22px var(--pad); }
.logo { margin-right: auto; }
.logo img { height: 44px; width: auto; }
.nav { display: flex; gap: 28px; font: 650 16px/1 var(--disp); font-stretch: 88%; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.btn { display: inline-flex; align-items: center; padding: 17px 28px; background: var(--navy-2); color: #fff; text-decoration: none; font: 650 16px/1 var(--disp); font-stretch: 90%; letter-spacing: .03em; transition: translate .2s, box-shadow .2s; }
.btn:hover { translate: -3px -3px; box-shadow: 3px 3px 0 var(--navy-2); }
.btn.line { background: none; color: var(--navy-2); box-shadow: inset 0 0 0 2px var(--navy-2); }
.btn.line:hover { box-shadow: inset 0 0 0 2px var(--navy-2), 3px 3px 0 var(--navy-2); }

h1, h2, h3 { font-family: var(--disp); font-weight: 750; font-stretch: 76%; letter-spacing: -.015em; }
h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; text-wrap: balance; }

.hero { padding: clamp(40px, 7vw, 100px) var(--pad) clamp(64px, 8vw, 120px); }
.eyebrow { font-size: 15px; font-weight: 600; margin-bottom: 20px; }
h1 { font-size: clamp(52px, 9.4vw, 150px); line-height: .9; max-width: 15ch; }
.hero-row { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 56px); }
.lead { max-width: 46ch; font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.svc { display: grid; grid-template-columns: 1fr 1fr; background: var(--navy-2); color: #fff; }
.svc :focus-visible { outline-color: var(--yel); }
.stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: 48px var(--pad); }
.bld { width: min(100%, 460px); height: auto; max-height: 82svh; overflow: visible; }
.bld .body, .bld .cap { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .42); stroke-width: 1.5; transition: fill .45s; }
.bld .det rect, .bld .det circle, .bld .det path { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 1.5; transition: stroke .45s; }
.bld .ant, .bld .ground { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.bld .ant-dot { fill: var(--yel); animation: blink 1.6s steps(1) infinite; }
.bld text { font: 700 13px/1 var(--body); fill: rgba(255, 255, 255, .6); transition: fill .45s; }
.bld .base .body { fill: rgba(255, 255, 255, .02); stroke-dasharray: 5 4; }
.bld .floor.on .body, .bld .floor.on .cap { fill: var(--yel); stroke: var(--yel); }
.bld .floor.on .det rect, .bld .floor.on .det circle, .bld .floor.on .det path { stroke: var(--navy-2); }
.bld .floor.on text { fill: var(--navy-2); }
.bld .floor { cursor: pointer; }
@keyframes blink { 50% { opacity: .2; } }

.list { padding: clamp(72px, 9vw, 120px) var(--pad) 18vh 0; }
.list ol { margin-top: 24px; }
.list li { position: relative; min-height: 46svh; display: flex; flex-direction: column; justify-content: center; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .18); opacity: .42; transition: opacity .45s; }
.list li.on { opacity: 1; }
.list .n { font-size: 14px; font-weight: 600; color: var(--yel); letter-spacing: .04em; }
.list h3 { font-size: clamp(40px, 4.6vw, 72px); line-height: 1; }
.list p { max-width: 42ch; color: rgba(255, 255, 255, .86); }
.list a { font-size: 14px; font-weight: 600; color: var(--yel); text-underline-offset: 4px; width: fit-content; }

.refs { padding: clamp(80px, 10vw, 140px) var(--pad); }
.big { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.big li { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 3px solid var(--navy-2); }
.big b { font: 750 clamp(34px, 3.8vw, 58px)/1 var(--disp); font-stretch: 76%; }
.big span { font-weight: 600; font-size: 17px; }
.more { margin-top: 40px; max-width: 70ch; font-size: 17px; }
.more a { font-weight: 700; text-underline-offset: 4px; }

.doors { display: grid; grid-template-columns: 1fr 1fr; }
.door { display: flex; flex-direction: column; gap: 16px; padding: clamp(56px, 7vw, 104px) var(--pad); background: #fff; }
.door.job { background: var(--navy-2); color: #fff; }
.door.job :focus-visible { outline-color: var(--yel); }
.tag { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.door.job .tag { color: var(--yel); }
.door > p:not(.tag):not(.hit) { max-width: 40ch; }
.hit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-top: auto; padding-top: 24px; }
.hit a { font: 750 clamp(24px, 2.4vw, 34px)/1.1 var(--disp); font-stretch: 82%; text-underline-offset: 6px; }
.door.job .hit a { font-size: clamp(44px, 5vw, 76px); color: var(--yel); }
.door.job .hit span { color: rgba(255, 255, 255, .8); font-weight: 600; }

.foot { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 32px var(--pad) 44px; font-size: 15px; background: var(--navy-2); color: rgba(255, 255, 255, .8); border-top: 1px solid rgba(255, 255, 255, .15); }
.foot :focus-visible { outline-color: var(--yel); }
.foot b { color: #fff; }
.foot .note { flex-basis: 100%; }

@media (max-width: 1000px) {
  .big { grid-template-columns: repeat(2, 1fr); }
  .doors { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .head { flex-wrap: wrap; gap: 14px; }
  .head .langs { display: none; }
  .nav { order: 9; width: 100%; flex-direction: column; gap: 0; border-top: 2px solid var(--navy-2); }
  .nav a { padding: 15px 0; border-bottom: 1px solid rgba(0, 29, 59, .2); font-size: 19px; }
  .svc { grid-template-columns: 1fr; }
  .stage { top: 0; z-index: 2; height: auto; padding: 14px var(--pad); background: var(--navy-2); border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .bld { width: auto; height: 30svh; }
  .list { padding: 40px var(--pad) 12vh; }
  .list li { min-height: 52svh; }
}
@media (max-width: 480px) {
  .big b { font-size: 32px; }
  .btn { padding: 15px 22px; }
}