/* =========================================================
   Metahome — style
   Palette pulled from the work itself: chalk render walls,
   sage façade, OSB timber, the lavender planted around
   every house.
   ========================================================= */

:root {
  --chalk: #EEEAE3;
  --paper: #F6F3EE;
  --ink: #1C1E1B;
  --ink-2: #63665F;
  --line: rgba(28, 30, 27, .14);

  --sage: #2E3630;
  --sage-2: #8E9A8A;
  --osb: #C89B5E;
  --lav: #A898D6;
  --lav-2: #CFC6EC;
  --night: #121413;

  --bg: var(--chalk);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --rule: var(--line);

  --display: "Outfit", "Geist", system-ui, sans-serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gut: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
}

body[data-theme="sage"]  { --bg: var(--sage);  --fg: #ECE8DF; --fg-2: #A9B2A5; --rule: rgba(236,232,223,.16); }
body[data-theme="night"] { --bg: var(--night); --fg: #ECE8DF; --fg-2: #8F928B; --rule: rgba(236,232,223,.12); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.6 var(--sans);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  transition: background-color .9s var(--ease), color .9s var(--ease);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: normal; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--lav); color: var(--ink); }
:focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; }

.mono { font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: fixed; top: -100px; left: 16px; z-index: 200; background: var(--ink); color: var(--chalk); padding: 10px 14px; }
.skip:focus { top: 16px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

.grain {
  position: fixed; inset: -50%; z-index: 150; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); }
  60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}

/* ---------- header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gut);
  color: #fff; mix-blend-mode: difference;
  transition: transform .6s var(--ease);
}
.hdr.is-up { transform: translateY(-110%); }
.hdr__logo { display: block; transition: opacity .5s var(--ease); transform: scale(var(--ls, 1)); transform-origin: 0 50%; }
:has(.hero) .hdr__logo { --ls: 4; }   /* home page: logo starts at 4× its normal size, JS shrinks it on scroll */
@media (max-width: 860px) { :has(.hero) .hdr__logo { --ls: 1.9; } }
.logo { display: block; height: 14px; width: calc(14px * 8.764); fill: currentColor; }
.hdr__nav { margin-left: auto; display: flex; gap: clamp(18px, 2.4vw, 36px); font-size: .9375rem; }
.hdr__nav a { position: relative; }
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.hdr__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr__cta { padding-left: clamp(18px, 2.4vw, 36px); border-left: 1px solid currentColor; }
.lang { display: flex; margin-left: clamp(18px, 2.4vw, 36px); }
.lang button { padding: 8px 6px; opacity: .45; transition: opacity .3s; position: relative; }
.lang button:hover { opacity: .8; }
.lang button[aria-pressed="true"] { opacity: 1; }
.lang button[aria-pressed="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 1px; background: currentColor; }
.hdr__burger { display: none; width: 44px; height: 44px; position: relative; }
.hdr__burger span:not(.sr) { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.hdr__burger span:nth-child(1) { top: 18px; } .hdr__burger span:nth-child(2) { top: 25px; }
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--sage); color: #ECE8DF;
  display: flex; flex-direction: column; justify-content: space-between; padding: 110px var(--gut) 32px;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-io);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font: 300 clamp(2.2rem, 9vw, 3.4rem)/1.15 var(--display); border-bottom: 1px solid rgba(236,232,223,.16); padding: 10px 0; display: flex; align-items: baseline; gap: 16px; }
.menu nav i { font: 400 .75rem var(--mono); font-style: normal; opacity: .6; }
.menu__foot { opacity: .7; line-height: 1.8; }

/* ---------- hero ---------- */
/* On load the elevation drawing (flat-roofed house and tree), the logo and the menu fade
   in together. On scroll the drawing's black lines turn into lines through which the
   picture shows (black & white, soft) — the picture is only ever seen through the
   drawing. The view then dives into the thick roof slab until it fills the screen,
   and the picture inside it turns to colour. Placement is set in main.js, VISTA. */
.hero { height: 240vh; position: relative; }
.hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero__frame { position: absolute; inset: 0; overflow: hidden; }
.hero__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* one drawing used twice: in black ink, and in white as the mask the picture shows through */
#heroInk { color: var(--ink); }
#heroMaskDraw { color: #fff; }
html:not(.js) #heroImage { mask: none; }
html:not(.js) #heroInk { display: none; }
.hero__copy {
  position: absolute; left: var(--gut); bottom: 14vh; max-width: calc(46vw - var(--gut));
  opacity: var(--copy, 1); transform: translateY(calc((1 - var(--copy, 1)) * -40px)); z-index: 2;
}
.eyebrow { color: var(--fg-2); margin-bottom: 28px; }
.hero__title { font: 300 clamp(2.6rem, 4.4vw, 6rem)/1 var(--display); letter-spacing: -.03em; margin: 0; white-space: nowrap; }
.hero__title em { color: var(--sage); font-weight: 200; }
.line { display: block; padding-bottom: .08em; }
.line > span { display: block; }

/* page entrance: drawing, logo and menu fade in together */
.js .hdr, .js .hero__sticky { opacity: 0; }
.js.is-ready .hdr, .js.is-ready .hero__sticky { opacity: 1; transition: opacity 3s var(--ease), transform .6s var(--ease); }

/* ---------- statement ---------- */
.statement { padding-block: clamp(110px, 18vw, 240px) clamp(80px, 12vw, 160px); }
.statement__text {
  font: 300 clamp(1.6rem, 3.4vw, 3.5rem)/1.14 var(--display); letter-spacing: -.018em;
  max-width: 1080px;
}
.reveal-words .w { display: inline-block; opacity: .14; transition: opacity .5s linear; }
.reveal-words .w.on { opacity: 1; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(64px, 9vw, 120px); }
.fact { border-top: 1px solid var(--rule); padding-top: 18px; }
.fact dt { margin-bottom: 14px; color: var(--fg); display: flex; align-items: center; gap: 10px; }
.fact dt::before { content: ""; width: 7px; height: 7px; background: var(--lav); border-radius: 50%; }
.fact:nth-child(2) dt::before { background: var(--osb); }
.fact:nth-child(3) dt::before { background: var(--sage-2); }
.fact dd { color: var(--fg-2); max-width: 34ch; }

/* reveal */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .fact.reveal:nth-child(2) { transition-delay: .1s; }
.js .fact.reveal:nth-child(3) { transition-delay: .2s; }

/* ---------- section heads ---------- */
.sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 24px; border-bottom: 1px solid var(--rule); padding-bottom: 22px; margin-bottom: 0; }
.sec-num { color: var(--fg-2); grid-column: 1 / -1; }
.sec-title { font: 300 clamp(2.8rem, 7.6vw, 7.6rem)/.95 var(--display); letter-spacing: -.03em; }
.sec-lede { grid-column: 1 / -1; max-width: 46ch; color: var(--fg-2); font-size: 1.125rem; margin-top: 18px; }
@media (min-width: 900px) {
  .sec-head:has(.sec-lede) { grid-template-columns: 1fr minmax(0, 40ch); }
  .sec-head .sec-lede { grid-column: 2; grid-row: 2; margin: 0; align-self: end; }
}

/* ---------- black & white -> colour ---------- */
/* Images rest in soft greyscale; colour spreads from the pointer as a circle.
   On touch screens the image turns to colour while it sits mid-screen. */
.duo { position: relative; overflow: hidden; margin: 0; background: #d9d5cd; }
.duo img { display: block; width: 100%; height: auto; }
.duo__g { filter: grayscale(1) contrast(.9) brightness(1.04); transition: transform 1.6s var(--ease); }
.duo__c {
  position: absolute; inset: 0; height: 100% !important; object-fit: cover;
  clip-path: circle(0% at var(--mx, 50%) var(--my, 50%));
  transition: clip-path 1s var(--ease), transform 1.6s var(--ease);
}
.duo.is-color .duo__c { clip-path: circle(142% at var(--mx, 50%) var(--my, 50%)); }
.js .reveal.duo, .js .gal__item.reveal .duo { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease-io); }
.js .reveal.duo.in, .js .gal__item.reveal.in .duo { clip-path: inset(0 0 0 0); }
.js .reveal.duo { opacity: 1; transform: none; }

/* ---------- projects gallery ---------- */
.projects { padding-bottom: clamp(100px, 14vw, 200px); }

.gallery {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut);
  row-gap: clamp(56px, 8vw, 120px); margin-top: clamp(48px, 6vw, 88px); align-items: start;
}
.gal__item { grid-column: 1 / -1; }
.gal__item.is-hidden { display: none; }
.gal__item[data-l="0"] { grid-column: 1 / -1; }
.gal__item[data-l="1"] { grid-column: 1 / span 7; }
.gal__item[data-l="2"] { grid-column: 9 / span 4; margin-top: clamp(80px, 14vw, 220px); }
.gal__item[data-l="3"] { grid-column: 2 / span 5; }
.gal__item[data-l="4"] { grid-column: 7 / span 6; margin-top: clamp(60px, 10vw, 160px); }
.js .gal__item.reveal { opacity: 1; transform: none; }
.gal__btn { display: block; width: 100%; cursor: pointer; }
.gal__btn:focus-visible { outline-offset: 6px; }
.gal__btn:hover .duo__g, .gal__btn:hover .duo__c { transform: scale(1.015); }
.gal__cap {
  display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 12px; align-items: baseline;
  padding-top: 16px; border-top: 1px solid var(--rule); margin-top: 16px;
}
.gal__num { color: var(--fg-2); }
.gal__title { font: 300 clamp(1.15rem, 1.7vw, 1.6rem)/1.2 var(--display); letter-spacing: -.01em; }
.gal__title em { font-weight: 200; color: var(--fg-2); }
.gal__title small { display: block; font: 400 .875rem var(--sans); color: var(--fg-2); letter-spacing: 0; margin-top: 4px; }
.gal__status { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); white-space: nowrap; }
.gal__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--lav)); }
.gal__item[data-status="gradnja"] { --c: var(--osb); }
.gal__item[data-status="izvedeno"] { --c: var(--sage-2); }

/* ---------- construction ---------- */
.build { padding-block: clamp(100px, 13vw, 180px); }
.build .duo { background: #3a433c; }
.site-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut);
  row-gap: clamp(28px, 4vw, 56px); margin-top: clamp(48px, 7vw, 96px); align-items: start;
}
.site-grid .duo:nth-child(1) { grid-column: 1 / span 8; }
.site-grid .duo:nth-child(2) { grid-column: 9 / span 4; margin-top: clamp(60px, 12vw, 200px); }
.site-grid .duo:nth-child(3) { grid-column: 2 / span 5; }
.site-grid .duo:nth-child(4) { grid-column: 7 / span 6; margin-top: clamp(40px, 6vw, 100px); }

/* ---------- propuh ---------- */
.propuh { padding-block: clamp(110px, 14vw, 200px); color: var(--fg); }
.propuh__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.propuh__logo { margin: 22px 0 36px; }
.propuh__logo img { display: block; width: min(100%, 440px); height: auto; }
.propuh__claim { font: 300 clamp(1.3rem, 2vw, 1.85rem)/1.22 var(--display); max-width: 24ch; margin-bottom: 24px; }
.propuh__claim em { font-weight: 200; color: var(--lav-2); }
.propuh__text { color: var(--fg-2); max-width: 46ch; }
.propuh__note { color: var(--fg-2); max-width: 46ch; line-height: 1.7; }

.stores { display: flex; gap: 10px; flex-wrap: wrap; margin: 36px 0 26px; }
.store {
  display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px 11px 16px; border-radius: 14px;
  border: 1px solid var(--rule); background: rgba(236,232,223,.04); transition: border-color .3s, background .3s;
}
.store:hover { border-color: var(--lav); background: rgba(168,152,214,.08); }
.store svg { width: 22px; height: 22px; flex: none; }
.store span { display: flex; flex-direction: column; font-weight: 500; font-size: 1rem; line-height: 1.15; }
.store small { font: 400 .625rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--lav); margin-bottom: 2px; }
.propuh__toast { color: var(--lav); min-height: 1.4em; margin-top: 12px; text-transform: none; }
.btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; border-radius: 100px;
  font-size: .9375rem; font-weight: 500; transition: transform .4s var(--ease), background .3s, color .3s;
}
.btn span { transition: transform .4s var(--ease); }
.btn:hover span { transform: translateX(4px); }
.btn--lav { background: var(--lav); color: var(--ink); }
.btn--lav:hover { background: var(--lav-2); }
.btn--ghost { border: 1px solid var(--rule); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--ink { background: var(--ink); color: var(--chalk); }
.btn--ink:hover { background: var(--sage); }

.app {
  background: #1B1E1C; border: 1px solid rgba(236,232,223,.1); border-radius: 18px; padding: 14px;
  box-shadow: 0 40px 120px -40px rgba(168,152,214,.35); transform: perspective(1400px) rotateY(-6deg) rotateX(3deg);
  transition: transform 1.2s var(--ease);
}
.app:hover { transform: none; }
.app__bar { display: flex; align-items: center; gap: 6px; padding: 4px 6px 14px; color: var(--fg-2); }
.app__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(236,232,223,.16); }
.app__bar span { margin-left: auto; font-size: .6875rem; }
.app__search { display: flex; align-items: center; gap: 10px; background: #252926; border-radius: 10px; padding: 14px 16px; }
.app__search svg { width: 18px; height: 18px; color: var(--lav); flex: none; }
.app__q { text-transform: none; font-size: .875rem; color: var(--fg); letter-spacing: .01em; }
.app__caret { width: 1.5px; height: 18px; background: var(--lav); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.app__map { margin: 12px 0; height: 150px; border-radius: 10px; overflow: hidden; background: #202421; color: var(--fg-2); }
.app__map svg { width: 100%; height: 100%; }
.app__parcel { fill: rgba(168,152,214,.18); stroke: var(--lav); stroke-width: 1.4; opacity: 0; transform-origin: 215px 60px; transform: scale(.85); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.app.found .app__parcel { opacity: 1; transform: none; }
.app__rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(236,232,223,.08); border-radius: 10px; overflow: hidden; }
.app__rows div { background: #1B1E1C; padding: 14px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.app.found .app__rows div { opacity: 1; transform: none; }
.app__rows dt { font: 400 .6875rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--fg-2); margin-bottom: 4px; }
.app__rows dd { font: 300 1.25rem/1.15 var(--display); }
.app__src { color: var(--fg-2); font-size: .625rem; padding: 12px 4px 2px; }

/* ---------- contact ---------- */
.contact { padding-block: clamp(110px, 14vw, 200px) clamp(80px, 10vw, 140px); }
.contact__title { font: 300 clamp(2.6rem, 7.2vw, 7.6rem)/.98 var(--display); letter-spacing: -.03em; margin: 22px 0 clamp(56px, 7vw, 100px); }
.contact__title em { font-weight: 200; color: var(--sage); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); border-top: 1px solid var(--rule); padding-top: 40px; }
.contact__mail {
  font: 300 clamp(1.4rem, 2.6vw, 2.4rem)/1 var(--display); letter-spacing: -.02em; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  text-align: left; margin-bottom: 36px;
}
.contact__mail span { color: var(--fg-2); border: 1px solid var(--rule); border-radius: 100px; padding: 5px 10px; font-size: .625rem; transition: background .3s, color .3s; }
.contact__mail:hover span { background: var(--ink); color: var(--chalk); }
.team { display: flex; gap: 14px; margin: 0 0 28px; }
.team__p { width: 160px; border-radius: 3px; }
.team__p img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
.team__p .duo__c { object-position: 50% 22%; }
.team__p figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; color: #fff;
  font: 400 .8125rem/1.2 var(--sans); background: linear-gradient(transparent, rgba(0,0,0,.45)); z-index: 1; }
address { font-style: normal; color: var(--fg-2); line-height: 1.7; margin-bottom: 28px; }
.contact__small { color: var(--fg-2); max-width: 38ch; font-size: .9375rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot for bots */
.form { display: flex; flex-direction: column; gap: 6px; }
.form__chips { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.form__chips legend { color: var(--fg-2); margin-bottom: 12px; }
.form__chips input { position: absolute; opacity: 0; pointer-events: none; }
.form__chips span { display: inline-block; border: 1px solid var(--rule); border-radius: 100px; padding: 9px 16px; font-size: .875rem; cursor: pointer; transition: all .3s; }
.form__chips input:checked + span { background: var(--lav); border-color: var(--lav); color: var(--ink); }
.form__chips input:focus-visible + span { outline: 2px solid var(--lav); outline-offset: 2px; }
.field { position: relative; display: block; }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--fg);
  font: 400 1.125rem var(--sans); padding: 26px 0 12px; resize: vertical; border-radius: 0; transition: border-color .3s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--fg); }
.field span { position: absolute; left: 0; top: 26px; color: var(--fg-2); pointer-events: none; transition: transform .35s var(--ease), font-size .35s; transform-origin: left; }
.field input:focus + span, .field input:not(:placeholder-shown) + span,
.field textarea:focus + span, .field textarea:not(:placeholder-shown) + span { transform: translateY(-22px) scale(.78); }
.field.err input { border-color: #B5543C; }
.form .btn { align-self: flex-start; margin-top: 26px; }
.form__msg { color: var(--fg-2); min-height: 1.4em; margin-top: 10px; text-transform: none; }

/* ---------- footer ---------- */
.ftr { overflow: hidden; padding-top: 24px; }
.ftr__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; color: var(--fg-2); border-top: 1px solid var(--rule); padding-top: 22px; }
.ftr__row a:hover { color: var(--fg); }
.ftr__logo { display: block; width: 100%; aspect-ratio: 1050.62 / 119.88; fill: var(--sage); margin: clamp(48px, 7vw, 96px) 0 clamp(28px, 4vw, 48px); }

/* ---------- viewer ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 120; background: rgba(18,20,19,.96); color: #ECE8DF;
  display: grid; place-items: center; padding: 72px var(--gut) 40px;
  opacity: 0; transition: opacity .5s var(--ease);
}
.viewer.on { opacity: 1; }
.viewer[hidden] { display: none; }
.viewer__fig { width: min(1200px, 100%, (100vh - 230px) * 16 / 9); }
.viewer__img { overflow: hidden; border-radius: 3px; aspect-ratio: 16 / 9; background: #000; }
.viewer__img img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease-io), transform 1.4s var(--ease); }
.viewer__img img.swap { clip-path: inset(0 0 0 100%); transform: scale(1.06); transition: none; }
.viewer__cap { display: grid; grid-template-columns: 4rem 1fr 1.2fr auto; gap: 8px 24px; align-items: baseline; padding-top: 18px; }
.viewer__cap strong { font: 300 clamp(1.25rem, 2vw, 1.9rem)/1.15 var(--display); }
.viewer__cap span:not(.mono) { color: #A9ABA4; font-size: .9375rem; }
.viewer__meta { color: var(--lav); }
.viewer__btn { position: absolute; padding: 12px 16px; font-size: .9375rem; }
.viewer__close { top: 18px; right: var(--gut); }
.viewer__prev, .viewer__next { top: 50%; transform: translateY(-50%); font-size: 1.5rem; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(236,232,223,.2); }
.viewer__prev { left: 14px; } .viewer__next { right: 14px; }
.viewer__prev:hover, .viewer__next:hover { background: #ECE8DF; color: var(--ink); }

/* ---------- cursor ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 140; pointer-events: none;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--lav);
  display: grid; place-items: center; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), opacity .3s;
  opacity: 0;
}
.cursor.on { opacity: 1; }
.cursor span { font: 500 .6875rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor.big { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
.cursor.big span { opacity: 1; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: block; }
  .hero { height: 200vh; }
  .hero__copy { max-width: none; right: var(--gut); bottom: 9vh; }
  .hero__title { white-space: normal; font-size: clamp(2.6rem, 11vw, 4rem); }
  .lang { margin-left: auto; }
  .facts { grid-template-columns: 1fr; }
  .gallery, .site-grid { grid-template-columns: 1fr; row-gap: 44px; }
  .gal__item[data-l], .site-grid .duo:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .site-grid { row-gap: 14px; }
  .team__p { width: calc(50% - 7px); max-width: 160px; }
  .sec-head { grid-template-columns: 1fr; }
  .propuh__grid { grid-template-columns: 1fr; }
  .app { transform: none; }
  .app__rows { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: 1fr; }
  .viewer__cap { grid-template-columns: 1fr; }
  .viewer__prev, .viewer__next { top: auto; bottom: 18px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  html { scroll-behavior: auto; }
  .grain { animation: none; }
}