/* Velar Bureau — service pages: "What you get". A list of deliverables with prices on the left; on the right a browser
   window plays an example screen for each one (js/get.js switches them and restarts their animation). */
.gt { padding-block: clamp(72px, min(9vw, 129.6px), 150px) 0; --dur: 7s; }
.gt__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, min(3vw, 43.2px), 48px); align-items: start; }
.gt__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(14, 15, 17, .14); }
.gt__t { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; width: 100%; padding: 22px 0 24px; border: 0; border-bottom: 1px solid rgba(14, 15, 17, .14);
  background: none; color: #8C929C; text-align: left; font: inherit; cursor: pointer; transition: color .3s; }
.gt__t:hover, .gt__t.is-on { color: #0E0F11; }
.gt__n { font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: .78rem; padding-top: .45em; }
.gt__t.is-on .gt__n { color: var(--signal); }
.gt__b { display: grid; gap: 8px; }
.gt__b b { font-weight: 500; font-size: clamp(1.25rem, min(1.7vw, 24.48px), 1.6rem); letter-spacing: -.03em; line-height: 1.15; }
.gt__d { display: block; max-height: 0; overflow: hidden; opacity: 0; color: #646A76; font-size: .98rem; line-height: 1.5; transition: max-height .6s var(--ease), opacity .4s; }
.gt__t.is-on .gt__d { max-height: 120px; opacity: 1; }
.gt__tag { justify-self: start; display: none; padding: 3px 8px; background: rgba(14, 15, 17, .06); color: #0E0F11; font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: .7rem; letter-spacing: .02em; }
.gt__t.is-on .gt__tag { display: inline-block; }
.gt__p { font-style: normal; font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: 1.05rem; white-space: nowrap; padding-top: .1em; }
.gt__t.is-on .gt__p { color: var(--signal); }
.gt__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; }
.gt__t.is-on .gt__bar { animation: gtBar var(--dur) linear forwards; }
.gt.is-paused .gt__t.is-on .gt__bar { animation-play-state: paused; }
@keyframes gtBar { to { transform: scaleX(1); } }

/* the browser window */
.gt__win { position: sticky; top: calc(var(--top-h, 80px) + 24px); background: #F7F8FA; border: 1px solid rgba(14, 15, 17, .12); box-shadow: 0 40px 80px -40px rgba(14, 15, 17, .35); overflow: hidden; }
.gt__chrome { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-bottom: 1px solid rgba(14, 15, 17, .08); background: #fff; }
.gt__chrome i { width: 9px; height: 9px; border-radius: 50%; background: #D3D8DF; }
.gt__chrome span { margin-left: 14px; padding: 4px 12px; background: #EEF1F4; font-size: .74rem; color: #646A76; }
.gt__chrome small { margin-left: auto; font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--signal); }
.gt__scr { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; container-type: inline-size; }
.gt__s { position: absolute; inset: 0; padding: 4.5cqw 5cqw; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; font-size: 1.6cqw; color: #0E0F11; }
.gt__s.is-on { opacity: 1; visibility: visible; transition: opacity .45s; }
.gt__s small { font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: #8C929C; }

/* shared bits */
.m-nav { display: flex; align-items: center; gap: 3cqw; margin-bottom: 4cqw; }
.m-nav b { font-family: var(--fd); font-stretch: 125%; font-size: 1.1em; letter-spacing: .04em; margin-right: auto; }
.m-nav b i { font-style: normal; color: var(--signal); }
.m-nav > span:not(.m-langs) { width: 6cqw; height: .7cqw; background: #D3D8DF; }
.m-nav em { font-style: normal; padding: .8cqw 1.8cqw; background: #0E0F11; color: #fff; font-size: .85em; }
.m-pic { position: relative; background: linear-gradient(160deg, #B9C2CE, #6E7A8A); overflow: hidden; }
.m-pic i { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, .55) 0 .9px, transparent 1.2px) 0 0 / 6px 6px;
  -webkit-mask: linear-gradient(200deg, #000 20%, transparent 75%); mask: linear-gradient(200deg, #000 20%, transparent 75%); }
.m-pic::after { content: ""; position: absolute; left: 18%; right: 30%; bottom: 0; height: 62%; background: linear-gradient(#E3E7ED, #C9D0DA); clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%); }
.m-toast { position: absolute; right: 4cqw; bottom: 4cqw; display: flex; align-items: center; gap: 1.2cqw; padding: 1.6cqw 2.2cqw; background: #0E0F11; color: #fff; font-size: .95em; opacity: 0; transform: translateY(14px); }
.m-toast i { width: 1.4cqw; height: 1.4cqw; background: var(--signal); }
.m-cur { position: absolute; left: 0; top: 0; width: 2.6cqw; height: 2.6cqw; z-index: 5; opacity: 0; pointer-events: none; }

/* 01 landing */
.m-land { display: grid; grid-template-columns: 1.15fr 1fr .9fr; gap: 2.4cqw; align-items: stretch; height: 70%; }
.m-hl { display: flex; flex-direction: column; gap: 1.4cqw; }
.m-hl b { font-weight: 500; font-size: 2.5em; line-height: 1; letter-spacing: -.04em; }
.m-hl p { margin: 0; color: #646A76; }
.m-btn { margin-top: auto; align-self: flex-start; padding: 1.2cqw 2cqw; background: var(--signal); color: #fff; font-size: .9em; }
.m-form { display: flex; flex-direction: column; gap: 1.4cqw; padding: 2.4cqw; background: #fff; border: 1px solid rgba(14, 15, 17, .1); }
.m-in { padding: 1.2cqw 1.4cqw; border: 1px solid rgba(14, 15, 17, .14); color: #8C929C; font-size: .9em; }
.m-send { margin-top: auto; padding: 1.3cqw; background: #0E0F11; color: #fff; text-align: center; font-size: .9em; }

/* 02 apartment search */
.gt__s--floor { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4cqw; align-items: end; }
.m-bld { display: flex; flex-direction: column; gap: .6cqw; padding: 0 2cqw; border-bottom: 3px solid #0E0F11; }
.m-roof { height: 2cqw; margin: 0 4cqw; background: #C9D0DA; }
.m-fl { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: .8cqw; padding: .8cqw; background: #DDE2E8; transition: background .3s; }
.m-fl i { height: 2cqw; background: #F7F8FA; }
.m-fl em { position: absolute; right: -3.2cqw; top: 50%; transform: translateY(-50%); font-style: normal; font-size: .8em; color: #8C929C; }
.m-units { display: flex; flex-direction: column; gap: 1cqw; align-self: center; }
.m-units > b { font-weight: 500; font-size: 2.2em; letter-spacing: -.04em; margin-bottom: 1cqw; }
.m-u { display: grid; grid-template-columns: .6fr 1fr 1fr 1.3fr; align-items: center; padding: 1.2cqw 1.6cqw; background: #fff; border: 1px solid rgba(14, 15, 17, .08); opacity: 0; transform: translateX(16px); }
.m-u em { font-style: normal; justify-self: end; padding: .3cqw 1cqw; font-size: .8em; }
.m-u--sold { color: #9CA2AD; } .m-u--sold em { background: #EEF1F4; }
.m-u--free em { background: rgba(226, 73, 43, .12); color: var(--signal); }
.m-u--res em { background: #0E0F11; color: #fff; }
.m-plan { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: .5cqw; height: 9cqw; margin-top: 1cqw; padding: .5cqw; border: 2px solid #0E0F11; opacity: 0; }
.m-plan i { background: #EEF1F4; } .m-plan i:first-child { grid-row: span 2; }

/* 03 catalogue */
.m-chips { display: flex; gap: 1.2cqw; margin-bottom: 3cqw; }
.m-chips span { padding: .8cqw 1.8cqw; border: 1px solid rgba(14, 15, 17, .16); font-size: .9em; }
.m-chips .is-on { background: #0E0F11; color: #fff; border-color: #0E0F11; }
.m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.m-card { display: flex; flex-direction: column; gap: .8cqw; padding: 2cqw; background: #fff; border: 1px solid rgba(14, 15, 17, .08); opacity: 0; transform: translateY(14px); }
.m-card b { font-weight: 500; font-size: 1.2em; letter-spacing: -.02em; margin-top: 1cqw; }
.m-card > span:not(.m-rq) { color: #8C929C; font-size: .9em; }
.m-rq { margin-top: 1.6cqw; padding: 1.1cqw; border: 1px solid #0E0F11; text-align: center; font-size: .85em; }
.m-ill { position: relative; height: 13cqw; background: #EEF1F4; overflow: hidden; }
.m-ill--bar i { position: absolute; left: 10%; right: 10%; height: 1.1cqw; background: repeating-linear-gradient(90deg, #6E7A8A 0 4px, #8C929C 4px 7px); transform: rotate(-12deg); }
.m-ill--bar i:nth-child(1) { top: 22%; } .m-ill--bar i:nth-child(2) { top: 40%; } .m-ill--bar i:nth-child(3) { top: 58%; } .m-ill--bar i:nth-child(4) { top: 76%; }
.m-ill--mesh { background: linear-gradient(90deg, transparent 44%, #6E7A8A 44% 56%, transparent 56%) 0 0 / 2.4cqw 2.4cqw, linear-gradient(transparent 44%, #6E7A8A 44% 56%, transparent 56%) 0 0 / 2.4cqw 2.4cqw, #EEF1F4; }
.m-ill--bend i { position: absolute; left: 20%; top: 25%; width: 55%; height: 50%; border: 1.1cqw solid #6E7A8A; border-left: 0; }
.m-ill--bend i:nth-child(2) { left: 30%; top: 38%; width: 35%; height: 24%; border-color: #8C929C; }

/* 04 languages */
.m-langs { display: flex; gap: .6cqw; }
.m-langs i { font-style: normal; padding: .5cqw 1cqw; border: 1px solid rgba(14, 15, 17, .16); font-size: .8em; }
.m-lang { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 1.6cqw 3cqw; height: 72%; }
.m-lt, .m-lh { position: relative; display: grid; }
.m-lt span, .m-lh span { grid-area: 1 / 1; opacity: 0; }
.m-lh { font-weight: 500; font-size: 3.2em; line-height: 1; letter-spacing: -.04em; grid-column: 1; }
.m-lang .m-pic { grid-column: 2; grid-row: 1 / span 2; }

/* timelines, played while a screen is on (js/get.js restarts them) */
.gt__s.run .m-nav, .gt__s.run .m-hl, .gt__s.run .m-pic, .gt__s.run .m-form, .gt__s.run .m-chips { animation: mIn .7s var(--ease) both; }
.gt__s.run .m-pic { animation-delay: .1s; } .gt__s.run .m-form { animation-delay: .2s; }
@keyframes mIn { from { opacity: 0; transform: translateY(12px); } }
.gt__s--land.run .m-send { animation: mPress 7s both; }
@keyframes mPress { 0%, 33% { transform: none; background: #0E0F11; } 35% { transform: scale(.94); background: var(--signal); } 40%, 100% { transform: none; background: var(--signal); } }
.gt__s--land.run .m-toast, .gt__s--cat.run .m-toast { animation: mToast 7s both; }
@keyframes mToast { 0%, 38% { opacity: 0; transform: translateY(14px); } 44%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.gt__scr[data-p="0"] .m-cur { animation: cur0 7s var(--ease) both; }
@keyframes cur0 { 0% { opacity: 0; transform: translate(40cqw, 54cqw); } 8% { opacity: 1; } 30% { transform: translate(var(--bx), var(--by)); } 34% { transform: translate(var(--bx), var(--by)) scale(.85); } 38% { transform: translate(var(--bx), var(--by)); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--bx), var(--by)); } }
.gt__s--floor.run .m-fl { animation: flScan 1.6s both; }
.gt__s--floor.run .m-fl:nth-child(2) { animation-delay: .1s; } .gt__s--floor.run .m-fl:nth-child(3) { animation-delay: .2s; } .gt__s--floor.run .m-fl:nth-child(4) { animation-delay: .3s; }
.gt__s--floor.run .m-fl:nth-child(5) { animation: flOn 7s both; } .gt__s--floor.run .m-fl:nth-child(6) { animation-delay: .5s; } .gt__s--floor.run .m-fl:nth-child(7) { animation-delay: .6s; }
.gt__s--floor.run .m-fl:nth-child(8) { animation-delay: .7s; } .gt__s--floor.run .m-fl:nth-child(9) { animation-delay: .8s; }
@keyframes flScan { 0%, 100% { background: #DDE2E8; } 30% { background: #B9C2CE; } }
@keyframes flOn { 0%, 14% { background: #DDE2E8; } 20%, 100% { background: var(--signal); } }
.gt__s--floor.run .m-fl:nth-child(5) i { animation: flWin 7s both; }
@keyframes flWin { 0%, 14% { background: #F7F8FA; } 20%, 100% { background: #F9C9BC; } }
.gt__s--floor.run .m-u { animation: mRow .6s var(--ease) both; }
.gt__s--floor.run .m-u:nth-of-type(1) { animation-delay: 1.5s; } .gt__s--floor.run .m-u:nth-of-type(2) { animation: mRow .6s var(--ease) 1.6s both, mPick 7s both; }
.gt__s--floor.run .m-u:nth-of-type(3) { animation-delay: 1.7s; } .gt__s--floor.run .m-u:nth-of-type(4) { animation-delay: 1.8s; }
@keyframes mRow { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes mPick { 0%, 44% { box-shadow: none; } 48%, 100% { box-shadow: inset 0 0 0 2px var(--signal); } }
.gt__s--floor.run .m-plan { animation: mPlan 7s both; }
@keyframes mPlan { 0%, 48% { opacity: 0; transform: translateY(8px); } 54%, 100% { opacity: 1; transform: none; } }
.gt__s--floor.run .m-plan i:nth-child(2) { animation: mCell 7s both; }
@keyframes mCell { 0%, 55% { background: #EEF1F4; } 60%, 100% { background: rgba(226, 73, 43, .35); } }
.gt__scr[data-p="1"] .m-cur { animation: cur1 7s var(--ease) both; }
@keyframes cur1 { 0% { opacity: 0; transform: translate(20cqw, 20cqw); } 6% { opacity: 1; } 18% { transform: translate(var(--ax), var(--ay)); } 21% { transform: translate(var(--ax), var(--ay)) scale(.85); } 24% { transform: translate(var(--ax), var(--ay)); } 42% { transform: translate(var(--bx), var(--by)); } 45% { transform: translate(var(--bx), var(--by)) scale(.85); } 48% { transform: translate(var(--bx), var(--by)); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--bx), var(--by)); } }
.gt__s--cat.run .m-card { animation: mCard .7s var(--ease) both; }
.gt__s--cat.run .m-card:nth-child(2) { animation-delay: .12s; } .gt__s--cat.run .m-card:nth-child(3) { animation-delay: .24s; }
@keyframes mCard { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gt__s--cat.run .m-card--hit .m-rq { animation: mRq 7s both; }
@keyframes mRq { 0%, 33% { background: transparent; color: inherit; } 35% { background: var(--signal); color: #fff; transform: scale(.95); } 40%, 100% { background: var(--signal); color: #fff; transform: none; } }
.gt__scr[data-p="2"] .m-cur { animation: cur2 7s var(--ease) both; }
@keyframes cur2 { 0% { opacity: 0; transform: translate(14cqw, 50cqw); } 8% { opacity: 1; } 30% { transform: translate(var(--bx), var(--by)); } 34% { transform: translate(var(--bx), var(--by)) scale(.85); } 38% { transform: translate(var(--bx), var(--by)); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--bx), var(--by)); } }
.gt__s--lang.run .m-lt span, .gt__s--lang.run .m-lh span { animation: mLang 7s both; }
.gt__s--lang.run .m-lt span:nth-child(2), .gt__s--lang.run .m-lh span:nth-child(2) { animation-delay: 1.75s; }
.gt__s--lang.run .m-lt span:nth-child(3), .gt__s--lang.run .m-lh span:nth-child(3) { animation-delay: 3.5s; }
.gt__s--lang.run .m-lt span:nth-child(4), .gt__s--lang.run .m-lh span:nth-child(4) { animation-delay: 5.25s; }
@keyframes mLang { 0% { opacity: 0; transform: translateY(10px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-10px); } }
.gt__s--lang.run .m-langs i { animation: mLangOn 7s forwards; }
.gt__s--lang.run .m-langs i:nth-child(2) { animation-delay: 1.75s; } .gt__s--lang.run .m-langs i:nth-child(3) { animation-delay: 3.5s; } .gt__s--lang.run .m-langs i:nth-child(4) { animation-delay: 5.25s; }
@keyframes mLangOn { 0%, 24% { background: #0E0F11; color: #fff; border-color: #0E0F11; } 25%, 100% { background: transparent; color: inherit; } }
.gt__s--lang .m-langs .is-on { background: transparent; color: inherit; }

/* phones and tablets: the window first, the list as tabs under it */
@media (max-width: 900px) {
  .gt__g { grid-template-columns: minmax(0, 1fr); }
  .gt__win { position: relative; top: auto; order: -1; }
  .gt__s { font-size: 2.2cqw; padding: 4cqw; }
  .gt__d { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gt__s.run *, .gt__scr .m-cur { animation: none !important; }
  .m-u, .m-card, .m-plan { opacity: 1; transform: none; }
  .m-lt span:first-child, .m-lh span:first-child { opacity: 1; }
  .gt__t.is-on .gt__bar { animation: none; transform: scaleX(1); }
}