/* Velar Bureau: dot-matrix treatments (js/dots.js) — Skale poster, Galeria pixel type, glass cards */
.dm { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* header: menu items stay hidden over the hero, then drop in one by one from the second block on */
@media (min-width: 1001px) {
  .top .top__nav a { opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .45s var(--ease), transform .55s var(--ease); }
  .top.nav-in .top__nav a { opacity: 1; transform: none; pointer-events: auto; }
  .top.nav-in .top__nav a:nth-child(2) { transition-delay: .05s; } .top.nav-in .top__nav a:nth-child(3) { transition-delay: .1s; }
  .top.nav-in .top__nav a:nth-child(4) { transition-delay: .15s; } .top.nav-in .top__nav a:nth-child(5) { transition-delay: .2s; }
  .top.nav-in .top__nav a:nth-child(6) { transition-delay: .25s; } .top.nav-in .top__nav a:nth-child(7) { transition-delay: .3s; }
}

/* hero: 36px between the lead and the buttons */
.hx .hx__left .hx__sectors { margin-top: 36px; }

/* sectors: colour lens + tilt (fonts and layout untouched) */
.sectors__grid { perspective: 1400px; }
.sectors .sector { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); --lr: 0px; }
.sectors .sector:hover { --lr: clamp(140px, min(16vw, 230.4px), 240px); }
.sector__lens { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; transform: scale(1.1);
  -webkit-mask-image: radial-gradient(circle var(--lr) at var(--mx, 50%) var(--my, 50%), #000 0, #000 60%, transparent 100%);
          mask-image: radial-gradient(circle var(--lr) at var(--mx, 50%) var(--my, 50%), #000 0, #000 60%, transparent 100%);
  filter: saturate(1.15) contrast(1.05); transition: -webkit-mask-size .4s; }
@property --lr { syntax: "<length>"; inherits: true; initial-value: 0px; }
.sectors .sector { transition: transform .5s var(--ease), --lr .6s var(--ease); }
.sector__ring { position: absolute; left: var(--mx, 50%); top: var(--my, 50%); width: calc(var(--lr) * 1.2); height: calc(var(--lr) * 1.2); margin: calc(var(--lr) * -.6) 0 0 calc(var(--lr) * -.6);
  border: 1px solid rgba(227, 231, 237, .5); border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s; }
.sector:hover .sector__ring { opacity: 1; }
.sector__ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--signal); }
@media (hover: none) { .sector__lens, .sector__ring { display: none; } }

/* hero: longer title fits on two lines */
.hx .hx__h { font-size: clamp(2.8rem, min(8.2vw, 118.08px), 10.5rem); }
/* hero: 64px from the bottom edge */
.hx .hx__final { bottom: 64px; }
/* hero on phones: the title fills the width on exactly three lines (divisor = widest line in em) */
@media (max-width: 600px) and (orientation: portrait) {
  .hx .hx__h { font-size: calc((100vw - 2 * var(--gx)) / 5.9); }
  html[lang="bg"] .hx .hx__h { font-size: calc((100vw - 2 * var(--gx)) / 6.62); }
}
/* short phones: tighten the stack so the bigger title stays clear of the header */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 760px) {
  .hx .hx__row { margin-top: 24px; gap: 14px; }
  .hx .hx__left .hx__sectors { margin-top: 16px; gap: 6px; }
  .hx .hx__sector { padding-block: 8px; }
  .hx .hx__cta { min-height: 88px; padding: 16px; }
}
.sector > img.sector__lens, .sector:hover > img.sector__lens { z-index: -1; filter: saturate(1.25) contrast(1.08) brightness(1.02) !important; transform: none !important; transition: none; }

/* hero buttons: icons */
.hx__sector .hx__ic { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: -4px; background: rgba(14, 15, 17, .06); transition: background .25s, color .25s; }
.hx__sector .hx__ic svg { width: 18px; height: 18px; }
.hx__sector:hover .hx__ic { background: var(--signal); color: var(--graphite); }


/* hero → about: a skyline in the page's own grey grows out of the next block's top edge and covers the hero */
.hx .hx__pin { transform: none; }
.hx .hx__final { transform: translateY(calc(var(--hq, 0) * -70px)); opacity: calc(1 - var(--hq, 0) * 2.2); }
.hx .hx__ascii { opacity: calc(.85 * (1 - var(--hq, 0) * 1.8)); }
.mani--light { position: relative; z-index: 2; }
.hxs { position: absolute; left: 0; right: 0; bottom: 100%; height: 80vh; height: 80svh; overflow: hidden; pointer-events: none; }
.hxs__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* phone: the skyline is pinned for a longer scroll */
.hxs-run { position: relative; z-index: 2; height: 230vh; height: 230svh; margin-top: -100svh; pointer-events: none; }
.hxs--pin { position: sticky; top: 0; bottom: auto; height: 100vh; height: 100svh; }
@media (prefers-reduced-motion: reduce) { .hxs { display: none; } }

/* hero lead: one line */
@media (min-width: 601px) { .hx .hx__lead { max-width: 44ch; } }

/* footer: e-mail on the left, phone on the right */
.foot__contacts { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.foot__contacts .foot__tel { justify-self: auto; }
@media (max-width: 720px) { .foot__contacts { flex-direction: column; align-items: flex-start; } }

/* no small section labels above block titles (About us, Services, ...) */
.sec-head .label, .foot__hero > .label, .process__head > .label { display: none !important; }
#about > .sec-head { display: none; }

/* work cards: project photo as the dark background; Monolit uses its own site, softened */
.case__bg--soft { filter: grayscale(1) brightness(.42) blur(6px) !important; }
.case:hover .case__bg--soft { filter: grayscale(.3) brightness(.5) blur(6px) !important; }

/* phones: no sector buttons in the hero, the picture gets the space; the canvas is fully visible */
@media (max-width: 720px) {
  .hx .hx__left .hx__sectors { display: none; }
  .hx .hx__row { margin-top: 24px; gap: 20px; }
  .hx .hx__ascii { opacity: calc(1 - var(--hq, 0) * 1.8) !important; }
}

/* home: blog and contacts sections; the contacts block replaces the big e-mail/phone row of the footer here */
.hsec { padding-block: var(--sec); }
.hsec .posts, .hsec .ct { padding: 0; }
.hsec .h2 .mute { display: block; }
.hsec .post h3 { margin: 0; font-weight: 500; font-size: clamp(1.7rem, min(2.8vw, 40.32px), 2.8rem); line-height: 1.02; letter-spacing: -.04em; }
.foot__hero { display: none; }
/* with the hero row gone the footer needs only the columns' own top padding */
.foot.dark { padding-top: 0; }

/* phones: the tallest home blocks get compact */
@media (max-width: 720px) {
  /* services: a swipe rail instead of five full-height cards */
  .svc3d--light .svc3d__list { grid-auto-flow: column; grid-auto-columns: 84%; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gx); margin-inline: calc(var(--gx) * -1); padding-inline: var(--gx); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .svc3d--light .svc3d__list::-webkit-scrollbar { display: none; }
  .svc3d--light .svc3d__list > li { scroll-snap-align: start; display: flex; min-width: 0; }
  .svc3d--light .svc3d__item { width: 100%; grid-template-rows: auto 1fr; }
  .svc3d__art { aspect-ratio: auto; height: 200px; width: 100%; }
  .svc3d--light .svc3d__tags { display: none; }
  .svc3d--light .svc3d__body { justify-content: flex-start; }
  .svc3d--light .svc3d__go { margin-top: auto; padding-top: 18px; }
  /* cases: picture, name, one paragraph and the button; the spec table lives on the case page */
  .case .case__meta { display: none; }
  .case__info { gap: 20px; padding: 20px; }
  .case__title h3 { margin-bottom: 10px; }
  /* contacts: rows instead of tall cards */
  .hsec .ct__c { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 14px 16px; }
  .hsec .ct__c > span { grid-column: 1; }
  .hsec .ct__c > b { grid-column: 1; font-size: 1.15rem; }
  .hsec .ct__c > i { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 0; gap: 0; }
  .hsec .ct__b { padding: 16px; gap: 6px; }
  .hsec .ct__b > p:not(.ct__time) { display: none; }
  .hsec .ct__b b { font-size: 1.15rem; }
  /* blog and reviews */
  .hsec .post p { display: none; }
  .reviews .rv { min-height: 0; gap: 24px; }
  .reviews .rv--cta { min-height: 110px; }
}

/* Why Velar: titles on one line and on one baseline, whatever the length of the text below */
.why p { min-height: 4.75em; }
@media (max-width: 1300px) { .why p { min-height: 6.25em; } }
@media (max-width: 600px) { .why h3 { font-size: min(1.4rem, min(5.6vw, 80.64px)); } }

/* services: grey dots with no panel behind them */
.svc3d.svc3d--light .svc3d__stage--obj { background: none !important; }
.svc3d__art { background: none !important; }

/* hero CTA: white text and corner; the title starts at the top, level with the corner mark */
.hx .hx__cta { color: #fff; justify-content: space-between; }
.hx .hx__cta span { padding-right: 52px; }
.hx .hx__cta small { opacity: .85; }
.hx .hx__cta.corner::after { top: 27px; right: 24px; border-color: #fff; }
.hx .hx__cta:hover { color: var(--steel); }

/* hero: scrolls with the page (not pinned); layers move at their own speed (js/site.js sets --sy, --px, --py) */
.hx { position: relative; }
.hx .hx__pin { transform: none; filter: none; }
.hx .hx__final { translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * -10px + var(--sy, 0px) * .38); opacity: calc(1 - var(--sq, 0) * 1.1); }
.hx .hx__site { transform: translate3d(0, calc(var(--sy, 0px) * .62), 0); opacity: calc(1 - var(--sq, 0) * .6) !important; }
.js .hx .hx__h .hl { animation-fill-mode: backwards; }   /* no lingering layer above the live canvas */
@media (prefers-reduced-motion: reduce) { .hx .hx__final { translate: none; } .hx .hx__site { transform: none; } }
/* hero: the tag riding on the crane hook */
.hx__tags { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: translate3d(0, calc(var(--sy, 0px) * .62), 0); }
.hx__tag { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; padding: 6px 9px 6px 8px; margin: -38px 0 0 14px;
  font-family: var(--fm); font-size: .7rem; line-height: 1.15; color: var(--graphite); background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .5s var(--ease); white-space: nowrap; will-change: transform; }
.hx__tag.is-on { opacity: 1; }
.hx__tag::before { content: ""; position: absolute; left: -14px; bottom: -10px; width: 14px; height: 1px; background: var(--slate); transform-origin: right center; transform: rotate(-35deg); }
.hx__tag i { grid-row: span 2; width: 7px; height: 7px; background: var(--signal); animation: tagBlink 1.2s steps(2) infinite; }
.hx__tag b { font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.hx__tag em { font-style: normal; color: var(--signal-2); }
.hx__tag small { font-size: .66rem; color: var(--slate); }
.hx__tag.is-done i { animation: none; background: var(--graphite); }
@keyframes tagBlink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .hx__tags { transform: none; } .hx__tag i { animation: none; } }
/* the menu is visible from the first screen (roast v229: people looked for it over the hero) */
@media (min-width: 1001px) { .top .top__nav a { opacity: 1; transform: none; pointer-events: auto; } }