@import url("tokens.css");

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-marble);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--c-marble-2); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-head);
  margin: 0;
  letter-spacing: -.015em;
}
h1 { font-size: var(--fs-900); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-600); }
p { margin: 0; }

a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--c-brass-deep);
  outline-offset: 3px;
  border-radius: 1px;
}
.section--dark :focus-visible, .footer :focus-visible, .hero :focus-visible {
  outline-color: var(--c-brass-light);
}

[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: var(--s4); top: -100%;
  z-index: 200; padding: var(--s3) var(--s5);
  background: var(--c-graphite); color: var(--c-on-dark);
  text-decoration: none; border-radius: var(--radius);
}
.skip-link:focus { top: var(--s4); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Layout primitives
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--s10); }
.section--tight { padding-block: var(--s9); }
.section--alt { background: var(--c-marble-2); }
.section--dark { background: var(--c-graphite); color: var(--c-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-on-dark); }

.section__head { max-width: 46rem; margin-bottom: var(--s8); }
.section__head--wide { max-width: 60rem; }
.section__lead {
  margin-top: var(--s4);
  font-size: var(--fs-500);
  color: var(--c-ink-soft);
  max-width: 62ch;
}
.section--dark .section__lead { color: var(--c-on-dark-soft); }

/* Scale-bar rule: the measure mark under the logo, reused as a divider */
.rule {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s5);
}
.rule::before {
  content: ""; width: 3.25rem; height: 1px;
  background: var(--c-brass);
  box-shadow: 0 -3px 0 -2px var(--c-brass), 0 3px 0 -2px var(--c-brass);
}
.rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--c-line-brass), transparent);
}
.section--dark .rule::before { background: var(--c-brass-light); box-shadow: 0 -3px 0 -2px var(--c-brass-light), 0 3px 0 -2px var(--c-brass-light); }

/* Strata rule: the soil cross-section from the mark, as a hairline stack */
.strata { height: 3px; border: 0; margin: 0; padding: 0;
  background: linear-gradient(180deg,
    var(--c-brass) 0 1px, var(--c-sold) 1px 2px, var(--c-free) 2px 3px);
  opacity: .55;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --btn-bg: var(--c-brass);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s3);
  min-height: 3rem;
  padding: var(--s3) var(--s6);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg); border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-300); font-weight: 600;
  letter-spacing: var(--caps-ls-sm); text-transform: uppercase;
  text-decoration: none; text-align: center;
  /* Long Croatian CTA labels must wrap rather than force horizontal scroll:
     "Provjerite dostupnost za vašu lokaciju" is wider than a 360px screen. */
  white-space: normal; max-width: 100%;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
/* The header row is the one place a wrap looks broken (BASE.md nav contract). */
.header .btn, .nav .btn { white-space: nowrap; }
.btn:hover { background: var(--c-brass-deep); border-color: var(--c-brass-deep); transform: translateY(-1px); }
.btn svg { width: 1rem; height: 1rem; flex: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); border-color: var(--c-line-strong); }
.btn--ghost:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-marble); }

.btn--onDark { --btn-bg: transparent; --btn-fg: var(--c-on-dark); border-color: var(--c-line-dark-strong); }
.btn--onDark:hover { background: var(--c-on-dark); border-color: var(--c-on-dark); color: var(--c-graphite); }

.btn--block { width: 100%; }
.btn--sm { min-height: 2.5rem; padding: var(--s2) var(--s4); font-size: var(--fs-200); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--c-brass-deep);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-300); letter-spacing: var(--caps-ls-sm);
  text-transform: uppercase; text-decoration: none;
}
.link-arrow svg { width: 1rem; height: 1rem; transition: transform .22s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--dark .link-arrow, .footer .link-arrow { color: var(--c-brass-light); }

/* ============================================================
   Topbar + header
   ============================================================ */
.topbar {
  background: var(--c-graphite);
  color: var(--c-on-dark-soft);
  font-size: var(--fs-200);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s5); min-height: var(--topbar-h);
}
.topbar__item {
  display: inline-flex; align-items: center; gap: var(--s2);
  text-decoration: none; white-space: nowrap;
  transition: color .2s var(--ease);
}
.topbar__item:hover { color: var(--c-brass-light); }
.topbar__item svg { width: .95rem; height: .95rem; color: var(--c-brass-light); flex: none; }
.topbar__sep { width: 1px; height: 1rem; background: var(--c-line-dark); }
/* Two nowrap items do not fit a 360px row; keep the phone, which is the one
   people actually tap. Both are still in the drawer and the footer. */
@media (max-width: 560px) {
  .topbar__inner { justify-content: center; }
  .topbar__item:first-child, .topbar__sep { display: none; }
  .topbar__item { min-height: 44px; }
}

/* Above the drawer (z 120) on purpose: the burger has to stay clickable to
   close the panel, which is both the BASE.md nav contract and what qa/audit.mjs
   tests (it clicks the same toggle twice). Modal is 150, so it still wins. */
.header {
  position: sticky; top: 0; z-index: 130;
  background: rgba(237, 239, 232, .96);
  border-bottom: 1px solid var(--c-line);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
/* With the drawer open the header sits on the dark panel, so it goes dark too
   and the burger reads as the close control. */
body[data-locked="true"] .header {
  background: var(--c-graphite);
  border-bottom-color: var(--c-line-dark);
}
body[data-locked="true"] .brand__name { color: var(--c-on-dark); }
body[data-locked="true"] .brand__sub { color: var(--c-brass-light); }
body[data-locked="true"] .burger { border-color: var(--c-line-dark-strong); }
body[data-locked="true"] .burger span { background: var(--c-on-dark); }
.header__inner {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  text-decoration: none; flex: none;
}
.brand__mark {
  width: 4.5rem; height: 3.15rem; object-fit: cover;
  border: 1px solid var(--c-line-brass); border-radius: 1px;
  background: var(--c-paper);
}
.brand__text { display: flex; flex-direction: column; gap: .1rem; }
.brand__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; line-height: 1;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--c-ink); white-space: nowrap;
}
.brand__sub {
  font-family: var(--font-display); font-weight: 500;
  font-size: .5625rem; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-brass-deep); white-space: nowrap;
}

.nav { display: none; align-items: center; gap: var(--s5); margin-left: auto; }
.nav__link {
  font-size: var(--fs-300); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  color: var(--c-ink-soft);
  transition: color .2s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--c-brass-deep); }

.lang { display: inline-flex; align-items: center; gap: var(--s1); flex: none; }
.lang__btn {
  min-width: 2.25rem; min-height: 2.25rem;
  padding: var(--s1) var(--s2);
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-display); font-size: var(--fs-200); font-weight: 600;
  letter-spacing: var(--caps-ls-sm); color: var(--c-ink-faint);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.lang__btn:hover { color: var(--c-ink); }
.lang__btn[aria-pressed="true"] { color: var(--c-ink); border-color: var(--c-line-brass); }
.lang__sep { color: var(--c-line-strong); font-size: var(--fs-200); }
.drawer .lang__btn { color: var(--c-on-dark-soft); min-width: 2.75rem; min-height: 2.75rem; }
.drawer .lang__btn:hover, .drawer .lang__btn[aria-pressed="true"] { color: var(--c-on-dark); }

.burger {
  margin-left: auto; flex: none;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: 0 .55rem;
  background: none; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
}
.burger span {
  display: block; height: 1.5px; width: 100%;
  background: var(--c-ink);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column;
  /* Clears the sticky header, which floats above this panel. */
  padding: calc(var(--header-h) + var(--s6)) var(--gutter) var(--s7);
  background: var(--c-graphite); color: var(--c-on-dark);
  transform: translateX(100%); visibility: hidden;
  transition: transform .32s var(--ease), visibility .32s var(--ease);
  overflow-y: auto;
}
.drawer[data-open="true"] { transform: none; visibility: visible; }
.drawer__link {
  display: block; padding: var(--s4) 0;
  border-bottom: 1px solid var(--c-line-dark);
  font-family: var(--font-display); font-size: var(--fs-600); font-weight: 600;
  letter-spacing: .04em; text-decoration: none;
}
.drawer__foot { margin-top: auto; padding-top: var(--s7); display: grid; gap: var(--s5); justify-items: start; }
.drawer__contact { display: grid; gap: var(--s2); font-size: var(--fs-300); color: var(--c-on-dark-soft); }
.drawer__contact a { text-decoration: none; }

body[data-locked="true"] { overflow: hidden; }

@media (min-width: 1080px) {
  .nav { display: flex; }
  .burger { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; isolation: isolate; color: #fff; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
/* Keep the sky BLUE. An even scrim turned a bright photo grey and read as
   overcast, so the top is nearly clear and the weight sits bottom-left,
   behind the copy, with a text shadow doing the rest of the legibility work. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,32,45,0) 0%, rgba(20,32,45,0) 34%, rgba(17,24,33,.62) 78%, rgba(17,24,33,.88) 100%),
    linear-gradient(90deg, rgba(17,24,33,.60) 0%, rgba(17,24,33,.22) 46%, rgba(17,24,33,0) 78%);
}
.hero__title, .hero__lead { text-shadow: 0 1px 18px rgba(12, 18, 26, .55); }
.hero__inner {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(86svh, 46rem);
  padding-block: var(--s10) var(--s9);
}
.hero__title { max-width: 18ch; color: #fff; text-wrap: balance; }
.hero__title em { font-style: normal; color: var(--c-brass-light); }
.hero__lead {
  margin-top: var(--s5); max-width: 46ch;
  font-size: var(--fs-500); color: rgba(255,255,255,.86);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s7); }
.hero .rule::before { background: var(--c-brass-light); box-shadow: 0 -3px 0 -2px var(--c-brass-light), 0 3px 0 -2px var(--c-brass-light); }
.hero .rule::after { background: linear-gradient(90deg, rgba(127,176,221,.55), transparent); }

/* Stat strip sitting on the hero seam */
.stats { background: var(--c-graphite); color: var(--c-on-dark); }
.stats__grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--c-line-dark);
}
.stat { background: var(--c-graphite); padding: var(--s6) var(--s2); text-align: center; }
.stat__num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); line-height: 1;
  color: var(--c-brass-light); letter-spacing: -.02em;
}
.stat__label {
  margin-top: var(--s3); font-size: var(--fs-200);
  letter-spacing: var(--caps-ls-sm); text-transform: uppercase;
  color: var(--c-on-dark-soft);
}
@media (min-width: 640px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   Services
   ============================================================ */
.services { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .services { grid-template-columns: repeat(4, 1fr); } }

.service {
  display: flex; flex-direction: column;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--c-line-brass); }
.service__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.service__media img { width: 100%; height: 100%; object-fit: cover; }
.service__tag {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  padding: var(--s2) var(--s4);
  background: var(--c-brass); color: #fff;
  font-family: var(--font-display); font-size: var(--fs-100); font-weight: 600;
  letter-spacing: var(--caps-ls-sm); text-transform: uppercase;
}
.service__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.service__title { font-size: var(--fs-600); }
.service__text { color: var(--c-ink-soft); font-size: var(--fs-300); }
.service__list { display: grid; gap: var(--s2); margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--c-line); }
.service__list li {
  display: flex; align-items: flex-start; gap: var(--s2);
  font-size: var(--fs-200); color: var(--c-ink-soft);
}
.service__list li::before {
  content: ""; flex: none; width: .75rem; height: 1px; margin-top: .72rem;
  background: var(--c-brass);
}
.service__note {
  margin-top: var(--s3); padding: var(--s3);
  background: var(--c-marble-2); border-radius: var(--radius);
  font-size: var(--fs-200); color: var(--c-ink-faint);
}

/* ============================================================
   Promise / why us
   ============================================================ */
.promise { display: grid; gap: var(--s8); align-items: center; }
@media (min-width: 980px) { .promise { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s10); } }

.promise__figure { position: relative; }
.promise__figure img { width: 100%; border-radius: var(--radius-lg); }
/* Two crops side by side: a wide site photo and a tall construction detail.
   The tall one sets the height, so the column reads as one composed image. */
.promise__figure--stack { display: grid; gap: var(--s4); grid-template-columns: 1.15fr 1fr; align-items: end; }
/* width:100% is required: with height:100% instead, the aspect-ratio and the
   auto row height resolve against each other and the pair collapses to a
   fraction of the column. Let the width fill the track and derive height. */
.promise__figure--stack img { width: 100%; height: auto; object-fit: cover; }
.promise__figure--stack img:first-child { aspect-ratio: 4 / 5; }
.promise__figure--stack img:last-child { aspect-ratio: 5 / 8; }
/* Side by side is only worth it once each half has real width. */
@media (max-width: 560px) {
  .promise__figure--stack { grid-template-columns: 1fr; }
  .promise__figure--stack img:first-child { aspect-ratio: 4 / 3; }
  .promise__figure--stack img:last-child { aspect-ratio: 4 / 3; }
}

.features { display: grid; gap: var(--s6); }
.feature { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.feature__icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; flex: none;
  border: 1px solid var(--c-line-brass); border-radius: var(--radius);
  color: var(--c-brass-deep);
}
.feature__icon svg { width: 1.35rem; height: 1.35rem; }
.feature__title { font-size: var(--fs-500); font-family: var(--font-display); font-weight: 600; }
.feature__text { margin-top: var(--s2); font-size: var(--fs-300); color: var(--c-ink-soft); }
.section--dark .feature__icon { border-color: var(--c-line-dark-strong); color: var(--c-brass-light); }
.section--dark .feature__text { color: var(--c-on-dark-soft); }

/* ============================================================
   Process
   ============================================================ */
.process { position: relative; isolation: isolate; color: var(--c-on-dark); }
.process__media { position: absolute; inset: 0; z-index: -2; }
.process__media img { width: 100%; height: 100%; object-fit: cover; }
.process::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(23,26,23,.93), rgba(23,26,23,.88));
}
.steps { display: grid; gap: 1px; background: var(--c-line-dark); border-block: 1px solid var(--c-line-dark); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.step { background: var(--c-graphite); padding: var(--s6) var(--s5); }
.step__num {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300);
  letter-spacing: var(--caps-ls); color: var(--c-brass-light);
}
.step__title { margin-top: var(--s4); font-size: var(--fs-500); font-family: var(--font-display); font-weight: 600; }
.step__text { margin-top: var(--s2); font-size: var(--fs-300); color: var(--c-on-dark-soft); }

/* ============================================================
   Projects
   ============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.filter {
  min-height: 2.5rem; padding: var(--s2) var(--s4);
  background: none; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  font-family: var(--font-display); font-size: var(--fs-200); font-weight: 600;
  letter-spacing: var(--caps-ls-sm); text-transform: uppercase;
  color: var(--c-ink-soft); white-space: nowrap;
  transition: all .2s var(--ease);
}
.filter:hover { border-color: var(--c-brass); color: var(--c-ink); }
.filter[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-marble); }

.projects { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 680px) { .projects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .projects { grid-template-columns: repeat(3, 1fr); } }

.project {
  display: block; width: 100%; text-align: left;
  padding: 0; background: var(--c-paper);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.project:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--c-line-brass); }
/* display:block is load-bearing: these are <span>s inside a <button>, and an
   inline box ignores aspect-ratio, so the card collapsed and overflow:hidden
   clipped the body away. */
.project__media { display: block; position: relative; aspect-ratio: 23 / 16; overflow: hidden; }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.project:hover .project__media img { transform: scale(1.035); }
.project__state {
  position: absolute; z-index: 2; top: var(--s3); left: var(--s3);
  display: block;
  padding: .3rem var(--s3);
  background: rgba(23, 26, 23, .88); color: #fff;
  font-family: var(--font-display); font-size: var(--fs-100); font-weight: 600;
  letter-spacing: var(--caps-ls-sm); text-transform: uppercase;
  border-radius: var(--radius);
}
.project__state--live { background: var(--c-free); }
.project__body { display: block; padding: var(--s5); }
.project__kicker {
  display: block; font-size: var(--fs-200); color: var(--c-brass-deep);
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: var(--caps-ls-sm); text-transform: uppercase;
}
.project__title { display: block; margin-top: var(--s2); font-size: var(--fs-600); font-family: var(--font-display); font-weight: 600; }
.project__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--c-line); }
.project__meta span { display: block; font-size: var(--fs-200); color: var(--c-ink-faint); }

/* Modal */
.modal {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: var(--gutter);
  background: rgba(23, 26, 23, .72);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.modal[data-open="true"] { opacity: 1; visibility: visible; }
.modal__panel {
  position: relative;
  width: min(60rem, 100%); max-height: min(86svh, 46rem);
  background: var(--c-paper); border-radius: var(--radius-lg);
  overflow: auto;
  transform: translateY(12px);
  transition: transform .25s var(--ease);
}
.modal[data-open="true"] .modal__panel { transform: none; }
.modal__close {
  position: absolute; z-index: 3; top: var(--s3); right: var(--s3);
  width: 2.75rem; height: 2.75rem;
  background: rgba(247, 248, 243, .92); border: 1px solid var(--c-line);
  border-radius: var(--radius); font-size: 1.35rem; line-height: 1;
}
.modal__media { aspect-ratio: 2 / 1; }
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: var(--s7) var(--s6) var(--s6); }
.modal__title { font-size: var(--fs-700); }
.modal__text { margin-top: var(--s4); color: var(--c-ink-soft); }
.modal__specs {
  display: grid; gap: var(--s4); margin-top: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  padding-top: var(--s5); border-top: 1px solid var(--c-line);
}
.modal__specs dt { font-size: var(--fs-200); color: var(--c-ink-faint); letter-spacing: var(--caps-ls-sm); text-transform: uppercase; }
.modal__specs dd { margin: var(--s1) 0 0; font-family: var(--font-display); font-weight: 600; }
.modal__actions { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s4); }

/* ============================================================
   Coverage band
   ============================================================ */
.coverage { position: relative; isolation: isolate; color: var(--c-on-dark); overflow: hidden; }
.coverage__media { position: absolute; inset: 0; z-index: -2; }
.coverage__media img { width: 100%; height: 100%; object-fit: cover; }
.coverage::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(23,26,23,.94) 0%, rgba(23,26,23,.80) 52%, rgba(23,26,23,.55) 100%);
}
.coverage__grid { display: grid; gap: var(--s8); }
@media (min-width: 900px) { .coverage__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; } }
.regions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.regions li {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--c-line-dark-strong); border-radius: 100px;
  font-size: var(--fs-200); color: var(--c-on-dark);
}

/* ============================================================
   Apartments
   ============================================================ */
.units { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 680px) { .units { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .units { grid-template-columns: repeat(3, 1fr); } }

.unit {
  display: flex; flex-direction: column;
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.unit--sold { opacity: .78; }
.unit__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-marble-2); }
.unit__media img { width: 100%; height: 100%; object-fit: cover; }
.unit__body { padding: var(--s5); display: grid; gap: var(--s3); }
.unit__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.unit__code { font-family: var(--font-display); font-size: var(--fs-600); font-weight: 600; }
.unit__project { font-size: var(--fs-200); color: var(--c-ink-faint); }
.unit__specs { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding-top: var(--s4); border-top: 1px solid var(--c-line); }
.unit__spec { font-size: var(--fs-200); color: var(--c-ink-soft); }
.unit__spec b { display: block; font-family: var(--font-display); font-size: var(--fs-400); color: var(--c-ink); font-weight: 600; }
.unit__price { font-family: var(--font-display); font-size: var(--fs-600); font-weight: 600; }

.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: .25rem var(--s3); flex: none;
  border: 1px solid currentColor; border-radius: 100px;
  font-family: var(--font-display); font-size: var(--fs-100); font-weight: 600;
  letter-spacing: var(--caps-ls-sm); text-transform: uppercase;
}
.chip::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.chip--free { color: var(--c-free); }
.chip--held { color: var(--c-held); }
.chip--sold { color: var(--c-sold); }

.empty {
  display: grid; gap: var(--s4); justify-items: start;
  padding: var(--s8) var(--s6);
  background: var(--c-paper);
  border: 1px dashed var(--c-line-strong); border-radius: var(--radius-lg);
}
.empty__title { font-family: var(--font-display); font-size: var(--fs-600); font-weight: 600; }
.empty__text { color: var(--c-ink-soft); max-width: 54ch; }

/* Floor accordion (stanovi page) */
.floor { border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-paper); }
.floor + .floor { margin-top: var(--s4); }
.floor__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  width: 100%; padding: var(--s5); min-height: 3.5rem;
  background: var(--c-marble-2); border: 0; text-align: left;
  font-family: var(--font-display); font-size: var(--fs-500); font-weight: 600;
  letter-spacing: var(--caps-ls-sm); text-transform: uppercase;
  transition: background .2s var(--ease);
}
.floor__btn:hover { background: var(--c-marble); }
.floor__count { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--fs-300); letter-spacing: 0; text-transform: none; color: var(--c-ink-soft); }
.floor__chev { transition: transform .25s var(--ease); }
.floor__btn[aria-expanded="true"] .floor__chev { transform: rotate(180deg); }
.floor__panel { padding: var(--s4) var(--s5) var(--s6); }

.table-wrap { overflow-x: auto; }
.utable { width: 100%; border-collapse: collapse; min-width: 40rem; }
.utable th, .utable td { padding: var(--s4) var(--s3); text-align: left; border-bottom: 1px solid var(--c-line); }
.utable th {
  font-family: var(--font-display); font-size: var(--fs-200); font-weight: 600;
  letter-spacing: var(--caps-ls-sm); text-transform: uppercase; color: var(--c-ink-faint);
}
.utable tbody tr:last-child td { border-bottom: 0; }
.utable td:first-child { font-family: var(--font-display); font-weight: 600; }

/* ============================================================
   Instagram
   ============================================================ */
.ig__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s7); }
.ig__grid { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .ig__grid { grid-template-columns: repeat(4, 1fr); } }
.ig__item {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--c-line-dark);
  background: var(--c-graphite-2); text-decoration: none;
  aspect-ratio: 1;
}
.ig__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), opacity .3s var(--ease); }
.ig__item:hover img { transform: scale(1.05); opacity: .5; }
.ig__overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s4);
  background: linear-gradient(180deg, transparent 45%, rgba(23,26,23,.9));
  opacity: 0; transition: opacity .3s var(--ease);
}
.ig__item:hover .ig__overlay, .ig__item:focus-visible .ig__overlay { opacity: 1; }
/* Touch devices never hover, so the caption would be unreachable. Only the
   opacity changes here: moving the overlay out of the tile would break the
   aspect-ratio box it is clipped by. */
@media (hover: none) {
  .ig__item .ig__overlay { opacity: 1; }
  .ig__item:hover img { transform: none; opacity: 1; }
}
.ig__caption { font-size: var(--fs-200); color: var(--c-on-dark); line-height: 1.45; }
.ig__date { margin-top: var(--s2); font-size: var(--fs-100); color: var(--c-brass-light); letter-spacing: var(--caps-ls-sm); text-transform: uppercase; }
.ig__handle {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-500);
  color: var(--c-on-dark); text-decoration: none;
}
.ig__handle svg { width: 1.25rem; height: 1.25rem; color: var(--c-brass-light); }

/* ============================================================
   Contact
   ============================================================ */
.contact { position: relative; isolation: isolate; }
.contact__grid { display: grid; gap: var(--s8); }
@media (min-width: 980px) { .contact__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: var(--s10); } }

.contact-card { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.contact-card + .contact-card { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--c-line); }
.contact-card__icon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none;
  border: 1px solid var(--c-line-brass); border-radius: var(--radius); color: var(--c-brass-deep);
}
.contact-card__icon svg { width: 1.15rem; height: 1.15rem; }
.contact-card__label { font-size: var(--fs-200); letter-spacing: var(--caps-ls-sm); text-transform: uppercase; color: var(--c-ink-faint); }
.contact-card__value { margin-top: var(--s1); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-500); text-decoration: none; word-break: break-word; }
a.contact-card__value:hover { color: var(--c-brass-deep); }

.form { display: grid; gap: var(--s5); }
.form__row { display: grid; gap: var(--s5); }
@media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, 1fr); } }
.field { display: grid; gap: var(--s2); }
.field__label { font-size: var(--fs-200); letter-spacing: var(--caps-ls-sm); text-transform: uppercase; color: var(--c-ink-faint); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: var(--s3) var(--s4);
  background: var(--c-paper);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-brass); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-brass-deep); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7269' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s4) center; background-size: 1.1rem; padding-right: var(--s8); }

.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; font-size: var(--fs-300); color: var(--c-ink-soft); }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: .28rem; accent-color: var(--c-brass-deep); }

.form__success {
  display: grid; gap: var(--s3);
  padding: var(--s6);
  background: var(--c-paper); border: 1px solid var(--c-free); border-radius: var(--radius-lg);
}
.form__success h3 { color: var(--c-free); }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--c-graphite); color: var(--c-on-dark-soft); padding-block: var(--s9) var(--s6); }
.footer__grid { display: grid; gap: var(--s8); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .footer__grid { grid-template-columns: 1.35fr 1fr 1fr 1.15fr; gap: var(--s7); } }

.footer__brand { display: flex; flex-direction: column; gap: var(--s2); text-decoration: none; }
.footer__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-on-dark);
}
.footer__sub { font-family: var(--font-display); font-size: .625rem; letter-spacing: .24em; text-transform: uppercase; color: var(--c-brass-light); }
.footer__blurb { margin-top: var(--s4); font-size: var(--fs-300); max-width: 34ch; }
.footer__title {
  font-family: var(--font-display); font-size: var(--fs-300); font-weight: 600;
  letter-spacing: var(--caps-ls-sm); text-transform: uppercase;
  color: var(--c-brass-light); margin-bottom: var(--s4);
}
.footer__list { display: grid; gap: var(--s3); }
.footer__list a { font-size: var(--fs-300); text-decoration: none; transition: color .2s var(--ease); }
.footer__list a:hover { color: var(--c-on-dark); }
.footer__contact { display: grid; gap: var(--s3); font-size: var(--fs-300); }
.footer__contact a { text-decoration: none; }
.footer__contact a:hover { color: var(--c-brass-light); }
.footer__social { display: flex; gap: var(--s3); margin-top: var(--s5); }
.footer__social a {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--c-line-dark-strong); border-radius: var(--radius);
  color: var(--c-on-dark); transition: all .2s var(--ease);
}
.footer__social a:hover { border-color: var(--c-brass-light); color: var(--c-brass-light); }
.footer__social svg { width: 1.1rem; height: 1.1rem; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid var(--c-line-dark);
  font-size: var(--fs-200);
}
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--c-brass-light); }

/* ============================================================
   Reveal on scroll
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   Touch targets
   Inline text links (footer lists, contact values, breadcrumb, the
   Instagram handle) are ~20px tall from line-height alone. On touch
   pointers they get vertical padding so the hit area clears 44px.
   Padding only, so nothing is repositioned out of a clipped parent.
   ============================================================ */
@media (hover: none), (max-width: 767px) {
  .footer__list a,
  .footer__contact a,
  .crumbs a,
  .contact-card__value,
  .ig__handle,
  .footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__list { gap: 0; }
  .consent input { width: 1.35rem; height: 1.35rem; margin-top: .55rem; }
  .consent { padding-block: var(--s2); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   Sub-page hero (stanovi)
   ============================================================ */
.pagehero { position: relative; isolation: isolate; color: #fff; }
.pagehero__media { position: absolute; inset: 0; z-index: -2; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(23,26,23,.66), rgba(23,26,23,.82));
}
.pagehero__inner { padding-block: var(--s10); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); font-size: var(--fs-200); letter-spacing: var(--caps-ls-sm); text-transform: uppercase; color: rgba(255,255,255,.72); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--c-brass-light); }
.crumbs [aria-current] { color: var(--c-brass-light); }