/*
  ArtForm — Shared components
  Reusable building blocks for every page. Depends on tokens.css + base.css.
*/

/* ---------- Navigation ---------- */

.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  color: var(--color-on-dark);
  background: transparent;
  border-bottom: 1px solid var(--color-on-dark-border);
  /* Insurance for the logo/links against busy patches of the hero photo —
     subtle on purpose, removed once the nav has a solid painted background. */
  text-shadow: 0 1px 3px rgba(20,23,22,.35);
  transition: background var(--duration-base) ease,
              color var(--duration-base) ease,
              border-color var(--duration-base) ease;
}

/* Painted state once the page has scrolled past the hero — toggled by main.js */
.nav.is-scrolled,
.nav--solid{
  background: rgba(245,244,240,.94);
  color: var(--color-graphite);
  border-bottom-color: var(--color-on-light-border);
  text-shadow: none;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

/* .nav--solid: for pages whose content starts light (no dark hero image
   under the fixed nav) — e.g. subpages using .page-hero. The transparent/
   light-text nav treatment only makes sense over a dark hero photo; on a
   light page it would be unreadable until the user scrolls past 48px. */

.nav__row{
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-inline: var(--page-padding-x);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
}

.nav__logo{
  color: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: var(--weight-semibold);
  letter-spacing: .26em;
  line-height: 1;
}

.nav__logo-mark{
  display: block;
  width: 16px;
  height: 1px;
  background: var(--color-accent);
}

.nav__links{
  display: none;
  align-items: center;
  gap: clamp(18px, 2.1vw, 34px);
  flex: 1 1 auto;
  justify-content: flex-end;
}

.nav__link{
  color: inherit;
  position: relative;
  padding: 6px 0;
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__link::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity 280ms ease;
}

.nav__link.is-active::after,
.nav__link:hover::after{
  opacity: 1;
}

.nav__cta{
  margin-left: clamp(4px, 1vw, 14px);
  padding: 13px 22px;
  background: var(--color-warm-white);
  color: var(--color-graphite);
  border: 1px solid var(--color-warm-white);
  text-shadow: none;
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

/* Transparent/hero state — light fill so the CTA never dissolves into the photo. */
.nav__cta:hover{
  background: var(--color-concrete);
  border-color: var(--color-concrete);
  color: var(--color-graphite);
}

/* Scrolled/solid state — invert to the graphite treatment. */
.nav.is-scrolled .nav__cta,
.nav--solid .nav__cta{
  background: var(--color-graphite);
  color: var(--color-warm-white);
  border-color: var(--color-graphite);
}

.nav.is-scrolled .nav__cta:hover,
.nav--solid .nav__cta:hover{
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-warm-white);
}

.nav__toggle{
  appearance: none;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  width: 46px;
  height: 46px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.nav__toggle-bar{
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
}

@media (min-width: 1040px){
  .nav__links{ display: flex; }
  .nav__toggle{ display: none; }
}

/* ---------- Mobile menu overlay ---------- */

.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--color-graphite);
  color: var(--color-warm-white);
  display: flex;
  flex-direction: column;
  padding: 0 clamp(20px, 6vw, 56px) clamp(28px, 6vw, 48px);
}

.mobile-menu[hidden]{
  display: none;
}

.mobile-menu__header{
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-on-dark-border);
}

.mobile-menu__close{
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-on-dark-border-strong);
  color: inherit;
  width: 46px;
  height: 46px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.mobile-menu__links{
  display: flex;
  flex-direction: column;
  margin-top: clamp(24px, 6vw, 48px);
}

.mobile-menu__links a{
  color: inherit;
  font-size: clamp(26px, 7vw, 34px);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  padding: 18px 0;
  border-bottom: 1px solid rgba(245,244,240,.12);
}

.mobile-menu__cta{
  margin-top: auto;
  background: var(--color-warm-white);
  color: var(--color-graphite);
  text-align: center;
  padding: 20px;
  font-size: var(--text-button);
  font-weight: var(--weight-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (min-width: 1040px){
  .mobile-menu{ display: none !important; }
}

/* ---------- Buttons ---------- */

.btn{
  display: inline-block;
  padding: 19px 32px;
  font-size: var(--text-button);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.btn--solid-light{
  background: var(--color-warm-white);
  color: var(--color-graphite);
}

.btn--solid-light:hover{
  background: var(--color-accent);
  color: var(--color-warm-white);
}

.btn--outline-dark{
  color: inherit;
  border: 1px solid var(--color-on-dark-border-strong);
}

.btn--outline-dark:hover{
  border-color: var(--color-warm-white);
  background: rgba(245,244,240,.08);
  color: inherit;
}

.btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Text link with an animating underline + arrow, used for "see more" links */
.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-on-light-border-strong);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: .06em;
  transition: border-color var(--duration-fast) ease, gap var(--duration-fast) ease;
}

.link-arrow:hover{
  border-color: var(--color-accent);
  gap: 16px;
  color: inherit;
}

/* ---------- Section scaffolding ---------- */

.section{
  padding-block: var(--section-padding-y);
}

.section--lg{ padding-block: var(--section-padding-y-lg); }
.section--sm{ padding-block: var(--section-padding-y-sm); }
.section--alt{ background: var(--color-surface-alt); }
.section--dark{ background: var(--color-graphite); color: var(--color-warm-white); }

.section-label{
  font-family: var(--font-body);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-label);
  margin-bottom: clamp(16px, 1.8vw, 26px);
}

.section-header{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 72px);
  margin-bottom: clamp(34px, 4.4vw, 66px);
}

.section-header h2{
  font-size: var(--text-display);
  font-weight: var(--weight-medium);
  line-height: 1.06;
  letter-spacing: -.03em;
}

.section-header p{
  flex: 0 1 min(100%, 420px);
  font-size: var(--text-body);
  line-height: 1.62;
  color: var(--color-text-body-1);
}

/* Decorative architectural corner motif — pure CSS, purely ornamental */
.motif-corner{
  position: absolute;
  width: clamp(56px, 7vw, 110px);
  height: clamp(56px, 7vw, 110px);
  pointer-events: none;
  border-color: var(--color-on-light-motif);
}

.motif-corner--tl{ left: 0; top: 0; border-left: 1px solid; border-top: 1px solid; }
.motif-corner--tr{ right: 0; top: 0; border-right: 1px solid; border-top: 1px solid; }
.motif-corner--bl{ left: 0; bottom: 0; border-left: 1px solid; border-bottom: 1px solid; }

/* ---------- Category tile (Objekti grid) ---------- */

.category-tile{
  position: relative;
  overflow: hidden;
  background: var(--color-concrete);
  color: var(--color-warm-white);
  display: block;
  min-height: 165px;
}

.category-tile__media{
  position: absolute;
  inset: 0;
  color: var(--color-text-muted);
  transition: transform var(--duration-media) var(--ease-standard);
}

.category-tile__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-tile:hover .category-tile__media{
  transform: scale(1.03);
}

.category-tile__scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--scrim-tile);
  opacity: .72;
  transition: opacity 420ms ease;
}

.category-tile:hover .category-tile__scrim{
  opacity: 1;
}

.category-tile__body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(16px, 1.5vw, 32px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.category-tile__index{
  font-family: var(--font-body);
  font-size: var(--text-metadata);
  letter-spacing: .2em;
  color: var(--color-on-dark-72);
  margin-bottom: 8px;
}

.category-tile__title{
  font-size: clamp(19px, 1.6vw, 32px);
  font-weight: var(--weight-medium);
  letter-spacing: -.015em;
  line-height: 1.1;
}

.category-tile__arrow{
  flex: 0 0 auto;
  transition: transform 400ms var(--ease-standard);
}

.category-tile:hover .category-tile__arrow{
  transform: translate(5px, -5px);
}

/* ---------- Project card ---------- */

.project-card{
  display: block;
}

.project-card__media{
  position: relative;
  overflow: hidden;
  background: var(--color-concrete);
  color: var(--color-text-muted);
}

.project-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-media) var(--ease-standard);
}

.project-card:hover .project-card__media img{
  transform: scale(1.03);
}

.project-card__meta{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--color-on-light-border);
  margin-top: 18px;
  padding-top: 16px;
}

.project-card__title{
  font-size: clamp(19px, 1.7vw, 27px);
  font-weight: var(--weight-medium);
  letter-spacing: -.02em;
}

.project-card__specs{
  font-family: var(--font-body);
  font-size: var(--text-metadata);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-body-3);
}

/* ---------- LGSF / numbered feature row ---------- */

.feature-row{
  border-top: 1px solid var(--color-on-light-border);
}

.feature-row__item{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 32px);
  padding: clamp(18px, 1.8vw, 26px) 0;
  border-bottom: 1px solid var(--color-on-light-border);
}

.feature-row__index{
  flex: 0 0 auto;
  width: 34px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--tracking-meta);
  color: var(--color-accent);
  padding-top: 3px;
}

.feature-row__title{
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
  letter-spacing: -.01em;
}

.feature-row__desc{
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-body-3);
  max-width: 48ch;
}

/* ---------- Process step ---------- */

.process-step{
  flex: 1 1 19%;
  min-width: min(100%, 190px);
  position: relative;
  border-top: 1px solid var(--color-on-light-border-strong);
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 34px) clamp(8px, 1vw, 14px) 0;
}

.process-step::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 14px;
  background: var(--color-accent);
}

.process-step__index{
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: var(--weight-regular);
  letter-spacing: -.02em;
  color: var(--color-graphite);
  line-height: 1;
}

.process-step__title{
  margin-top: clamp(14px, 1.4vw, 22px);
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: var(--weight-semibold);
  letter-spacing: -.01em;
}

.process-step__desc{
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-body-3);
  max-width: 26ch;
}

/* ---------- CTA band ---------- */

.cta-band{
  position: relative;
  overflow: hidden;
  background: var(--color-graphite);
  color: var(--color-warm-white);
}

.cta-band__media{
  position: absolute;
  inset: 0;
  color: var(--color-on-dark-55);
}

.cta-band__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-band__scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--scrim-cta);
}

.cta-band__content{
  position: relative;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 168px) var(--page-padding-x);
}

.cta-band h2{
  max-width: min(100%, 780px);
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: var(--weight-medium);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
}

.cta-band p{
  margin-top: clamp(20px, 2.2vw, 32px);
  max-width: 56ch;
  font-size: var(--text-body-lg);
  line-height: 1.65;
  color: var(--color-on-dark-78);
}

/* ---------- Footer ---------- */

.site-footer{
  background: var(--color-graphite-deep);
  color: var(--color-warm-white);
  padding: clamp(56px, 6vw, 96px) 0 clamp(24px, 2.4vw, 36px);
}

.site-footer__grid{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 80px);
  justify-content: space-between;
}

.site-footer__heading{
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-on-dark-45);
  margin-bottom: 18px;
}

.site-footer__links{
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15px;
}

.site-footer__links a{
  color: var(--color-on-dark-82);
}

.site-footer__bottom{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(40px, 4.5vw, 72px);
  padding-top: 20px;
  border-top: 1px solid rgba(245,244,240,.14);
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-on-dark-45);
}

/* ---------- Scroll reveal ---------- */

[data-reveal]{
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition: opacity var(--duration-reveal) var(--ease-standard),
              transform var(--duration-reveal) var(--ease-standard);
}

[data-reveal].is-visible{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    opacity: 1;
    transform: none;
  }
}

/* ---------- Homepage section layouts ---------- */
/* Composition classes for the sections on index.html. Built from the
   primitives above (.section, .category-tile, .project-card, .feature-row,
   .process-step) rather than duplicating their rules. */

.hero{
  position: relative;
  min-height: clamp(600px, 92vh, 980px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--color-graphite);
  color: var(--color-warm-white);
  scroll-margin-top: 0;
}

.hero__media{
  position: absolute;
  inset: 0;
}

.hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.hero__scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(20,23,22,.5) 0%, rgba(20,23,22,.14) 18%, rgba(20,23,22,0) 30%),
    linear-gradient(to right, rgba(20,23,22,.62) 0%, rgba(20,23,22,.3) 42%, rgba(20,23,22,.04) 78%, rgba(20,23,22,0) 100%),
    linear-gradient(to top, rgba(20,23,22,.86) 0%, rgba(20,23,22,.6) 30%, rgba(20,23,22,.26) 60%, rgba(20,23,22,.08) 100%);
}

.hero__content{
  position: relative;
  padding-top: clamp(130px, 15vh, 190px);
  padding-bottom: clamp(28px, 3vw, 44px);
}

.hero__eyebrow{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 2vw, 30px);
}

.hero__eyebrow-rule{
  display: block;
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: var(--color-accent);
}

.hero__eyebrow-text{
  font-family: var(--font-body);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-on-dark-82);
}

.hero h1{
  max-width: min(100%, 17ch);
  font-size: var(--text-hero);
  font-weight: var(--weight-medium);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
}

.hero__lede{
  margin-top: clamp(22px, 2.6vw, 36px);
  max-width: min(100%, 54ch);
  font-size: var(--text-body-lg);
  line-height: 1.62;
  color: var(--color-on-dark-80);
}

.hero__actions{
  margin-top: clamp(28px, 3.2vw, 46px);
}

.hero__ticker{
  position: relative;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-inline: var(--page-padding-x);
}

.hero__ticker-row{
  border-top: 1px solid rgba(245,244,240,.22);
  padding: 16px 0 clamp(18px, 2vw, 26px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 34px);
  font-family: var(--font-body);
  font-size: var(--text-metadata);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-on-dark-72);
}

.hero__ticker-row span[aria-hidden]{
  color: var(--color-accent);
}

/* Category grid (Objekti koje gradimo) — asymmetric two-row tile layout */

.category-grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-tile);
}

.category-grid + .category-grid{
  margin-top: var(--gap-tile);
}

.category-tile--kuce{
  flex: 1 1 58%;
  min-width: min(100%, 340px);
  height: clamp(340px, 44vw, 660px);
}

.category-stack{
  flex: 1 1 32%;
  min-width: min(100%, 300px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-tile);
}

.category-stack .category-tile{
  height: clamp(165px, 21.5vw, 322px);
}

.category-tile--vikendice{
  flex: 1 1 30%;
  min-width: min(100%, 280px);
  height: clamp(280px, 27vw, 420px);
}

.category-tile--kuhinje{
  flex: 1 1 42%;
  min-width: min(100%, 280px);
  height: clamp(280px, 27vw, 420px);
}

.category-tile--kamini{
  flex: 1 1 22%;
  min-width: min(100%, 240px);
  height: clamp(280px, 27vw, 420px);
}

.motif-corner--sm{
  width: 44px;
  height: 44px;
}

.motif-corner--lg{
  width: clamp(60px, 8vw, 130px);
  height: clamp(60px, 8vw, 130px);
}

/* Offset outside the block it decorates, top-left / bottom-left */
.motif-corner--offset-tl{
  left: calc(-1 * clamp(14px, 1.6vw, 28px));
  top: calc(-1 * clamp(18px, 2vw, 34px));
}

.motif-corner--offset-bl{
  left: calc(-1 * clamp(10px, 1.2vw, 20px));
  bottom: calc(-1 * clamp(10px, 1.2vw, 20px));
}

.motif-corner--on-dark{
  border-color: rgba(245,244,240,.35);
}

/* Philosophy statement */

.philosophy-grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  align-items: flex-start;
}

.philosophy-grid__heading{
  flex: 1 1 min(100%, 620px);
  position: relative;
}

.philosophy-grid__heading h2{
  max-width: min(100%, 22ch);
  font-size: var(--text-display);
  font-weight: var(--weight-medium);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}

.philosophy-grid__body{
  flex: 1 1 min(100%, 380px);
  padding-top: clamp(6px, 3vw, 54px);
}

.philosophy-grid__body p{
  font-size: var(--text-body-lg);
  line-height: 1.68;
  color: var(--color-text-body-1);
}

.philosophy-grid__body p:first-child{
  color: var(--color-text-body-2);
}

.philosophy-grid__body p + p{
  margin-top: 20px;
}

/* LGSF technology section */

.lgsf-grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  align-items: stretch;
}

.lgsf-grid__media{
  flex: 1 1 46%;
  min-width: min(100%, 320px);
  position: relative;
}

.lgsf-grid__frame{
  position: relative;
  height: clamp(360px, 45vw, 700px);
  background: var(--color-concrete);
  overflow: hidden;
}

.lgsf-grid__frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* This specific technical/annotated photo must show every callout —
   contain instead of cover so no dimension or label is cropped. */
.lgsf-grid__frame--contain img{
  object-fit: contain;
  background: var(--color-concrete);
}

.lgsf-grid__caption{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-label);
}

.lgsf-grid__caption-rule{
  display: block;
  width: clamp(24px, 3vw, 52px);
  height: 1px;
  background: var(--color-accent);
}

.lgsf-grid__content{
  flex: 1 1 44%;
  min-width: min(100%, 320px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lgsf-grid__content h2{
  font-size: var(--text-heading);
  font-weight: var(--weight-medium);
  line-height: 1.07;
  letter-spacing: -.032em;
}

.lgsf-grid__content > p{
  margin-top: clamp(20px, 2vw, 30px);
  max-width: 52ch;
  font-size: var(--text-body);
  line-height: 1.66;
  color: var(--color-text-body-1);
}

/* Featured projects grid */

.project-grid__row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
  margin-top: clamp(40px, 4.5vw, 84px);
  align-items: flex-start;
}

.project-card--feature .project-card__media{
  height: clamp(300px, 44vw, 680px);
}

.project-card--wide{
  flex: 1 1 56%;
  min-width: min(100%, 300px);
}

.project-card--wide .project-card__media{
  height: clamp(280px, 38vw, 560px);
}

.project-card--narrow{
  flex: 1 1 34%;
  min-width: min(100%, 280px);
  padding-top: clamp(0px, 4vw, 72px);
}

.project-card--narrow .project-card__media{
  height: clamp(280px, 32vw, 470px);
}

/* Construction process track */

.process-track{
  display: flex;
  flex-wrap: wrap;
}

/* Credibility / statistics band */

.stats-band{
  display: flex;
  flex-wrap: wrap;
}

.stat{
  flex: 1 1 22%;
  min-width: min(50%, 180px);
  padding: clamp(8px, 1vw, 14px) clamp(16px, 2vw, 36px);
  border-left: 1px solid rgba(245,244,240,.18);
}

.stat:first-child{
  border-left: 0;
  padding-left: 0;
}

.stat__value{
  font-family: var(--font-heading);
  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: var(--weight-regular);
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--color-on-dark);
}

.stat__label{
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: var(--text-metadata);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-on-dark-60);
}

.stats-band__note{
  margin-top: clamp(24px, 2.6vw, 40px);
  padding-top: 16px;
  border-top: 1px solid rgba(245,244,240,.14);
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-on-dark-45);
}

/* Why ArtForm */

.about-grid{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 100px);
  align-items: flex-start;
}

.about-grid__intro{
  flex: 1 1 34%;
  min-width: min(100%, 300px);
  position: sticky;
  top: clamp(90px, 11vw, 140px);
}

.about-grid__intro h2{
  font-size: var(--text-heading);
  font-weight: var(--weight-medium);
  line-height: 1.05;
  letter-spacing: -.032em;
}

.about-grid__intro p{
  margin-top: clamp(20px, 2vw, 30px);
  max-width: 38ch;
  font-size: var(--text-body);
  line-height: 1.66;
  color: var(--color-text-body-1);
}

.about-grid__list{
  flex: 1 1 52%;
  min-width: min(100%, 320px);
}

@media (max-width: 767px){
  .about-grid__intro{
    position: static;
  }
}

/* ---------- Objekti overview page ---------- */

/* Section 01 — light architectural intro hero (as opposed to the dark,
   full-bleed homepage hero). */

.page-hero{
  padding-top: calc(var(--nav-height) + clamp(56px, 7vw, 110px));
  padding-bottom: clamp(56px, 7vw, 110px);
}

.page-hero__row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  align-items: center;
}

.page-hero__text{
  flex: 1 1 min(100%, 560px);
  position: relative;
}

.page-hero__text h1{
  margin-top: clamp(16px, 1.8vw, 26px);
  font-size: var(--text-display);
  font-weight: var(--weight-medium);
  line-height: 1.06;
  letter-spacing: -.03em;
}

.page-hero__text p{
  margin-top: clamp(20px, 2.2vw, 30px);
  max-width: 56ch;
  font-size: var(--text-body-lg);
  line-height: 1.62;
  color: var(--color-text-body-1);
}

.page-hero__media{
  flex: 1 1 min(100%, 420px);
}

.page-hero__media-frame{
  position: relative;
  height: clamp(260px, 30vw, 420px);
  background: var(--color-concrete);
  overflow: hidden;
}

.page-hero__media-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section 02 — editorial category grid. A shared card primitive
   (.category-feature) with size/layout modifiers, not six identical tiles. */

.category-feature{
  display: block;
  color: inherit;
}

.category-feature__media{
  position: relative;
  overflow: hidden;
  background: var(--color-concrete);
  color: var(--color-text-muted);
}

.category-feature__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-media) var(--ease-standard);
}

.category-feature:hover .category-feature__media img{
  transform: scale(1.03);
}

.category-feature__index{
  font-family: var(--font-body);
  font-size: var(--text-metadata);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-label);
}

.category-feature__desc{
  margin-top: 8px;
  max-width: 46ch;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-body-1);
}

.category-feature__row{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
}

.category-feature__info{
  flex: 1 1 420px;
}

/* --lg: Montažne kuće, Hale — the two dominant, full-width horizontal features */

.category-feature--lg .category-feature__media{
  height: clamp(320px, 38vw, 560px);
}

.category-feature--lg .category-feature__title{
  margin-top: 10px;
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: var(--weight-medium);
  letter-spacing: -.02em;
}

.category-feature--lg .category-feature__row{
  margin-top: clamp(18px, 2vw, 26px);
  padding-top: 16px;
  border-top: 1px solid var(--color-on-light-border);
}

/* --pair: Garaže, Vikendice — two medium blocks side by side */

.category-feature-pair{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
}

.category-feature--pair{
  flex: 1 1 min(100%, 380px);
}

.category-feature--pair .category-feature__media{
  height: clamp(240px, 28vw, 360px);
}

.category-feature--pair .category-feature__title{
  margin-top: 10px;
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
  letter-spacing: -.015em;
}

.category-feature--pair .category-feature__cta{
  margin-top: 14px;
}

/* --split: Letnje kuhinje — wide image/text split, vertically centered */

.category-feature--split{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  align-items: center;
}

.category-feature--split .category-feature__media{
  flex: 1 1 50%;
  min-width: min(100%, 340px);
  height: clamp(300px, 32vw, 460px);
}

.category-feature--split .category-feature__body{
  flex: 1 1 42%;
  min-width: min(100%, 320px);
}

.category-feature--split .category-feature__title{
  margin-top: 10px;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: var(--weight-medium);
  letter-spacing: -.02em;
}

.category-feature--split .category-feature__desc{
  max-width: 42ch;
}

.category-feature--split .category-feature__cta{
  margin-top: clamp(18px, 2vw, 26px);
}

/* --closing: Kamini i roštilji — full-bleed dark closing block, image + overlaid copy */

.category-feature--closing{
  position: relative;
  overflow: hidden;
  height: clamp(360px, 42vw, 560px);
  color: var(--color-warm-white);
}

.category-feature--closing .category-feature__media{
  position: absolute;
  inset: 0;
  height: auto;
}

.category-feature--closing .category-feature__scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(20,23,22,.78) 0%, rgba(20,23,22,.52) 40%, rgba(20,23,22,.18) 75%, rgba(20,23,22,.04) 100%);
}

.category-feature--closing .category-feature__body{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 3vw, 48px);
  max-width: min(100%, 560px);
}

.category-feature--closing .category-feature__index{
  color: var(--color-on-dark-72);
}

.category-feature--closing .category-feature__title{
  margin-top: 10px;
  font-size: clamp(26px, 2.8vw, 42px);
  font-weight: var(--weight-medium);
  letter-spacing: -.02em;
}

.category-feature--closing .category-feature__desc{
  color: var(--color-on-dark-80);
}

.category-feature--closing .category-feature__cta{
  margin-top: clamp(18px, 2vw, 26px);
}

.category-feature--closing .link-arrow{
  color: var(--color-warm-white);
  border-bottom-color: rgba(245,244,240,.4);
}

.category-feature--closing .link-arrow:hover{
  border-bottom-color: var(--color-accent);
}

@media (max-width: 767px){
  .category-feature--split{
    flex-direction: column;
    align-items: stretch;
  }
}