/* ==========================================================================
   MW ARCHITEKTURA — Design Tokens
   ========================================================================== */
:root {
  --color-bg: #f7f5f1;
  --color-bg-alt: #efece5;
  --color-surface: #ffffff;
  --color-ink: #17171a;
  --color-ink-soft: #4a4a46;
  --color-muted: #8a877e;
  --color-line: #ddd9d0;
  --color-accent: #9c6b45;
  --color-accent-soft: #c9a688;
  --color-dark: #121210;
  --color-dark-ink: #f2efe8;
  --color-dark-muted: #a8a49a;

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 144px;

  --container: 1360px;
  --container-narrow: 860px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-med: 450ms;
  --dur-slow: 900ms;

  --radius-sm: 2px;
  --radius-md: 4px;

  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;
}

* { box-sizing: border-box; }

/* Lenis smooth scroll — required overrides per Lenis docs */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

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

html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
}
p { margin: 0; }
.text-muted { color: var(--color-ink-soft); }

.h-display { font-size: clamp(2.6rem, 6vw, 5.4rem); }
.h-xl { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.h-lg { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.h-md { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.body-lg { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.7; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 15px 30px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  overflow: hidden;
  min-height: 44px;
}
.btn svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--color-ink); color: var(--color-bg); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-ink);
  color: var(--color-bg);
}
.btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.btn-light {
  border-color: rgba(247,245,241,0.55);
  color: var(--color-dark-ink);
}
.btn-light:hover { background: var(--color-dark-ink); color: var(--color-dark); border-color: var(--color-dark-ink); }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding: 10px 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  transition: padding var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.nav.is-scrolled {
  padding: 8px 0;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.brand {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.brand-logo {
  height: 62px;
  width: auto;
  display: block;
  mix-blend-mode: multiply;
  transition: height var(--dur-med) var(--ease-out);
}
.nav.is-scrolled .brand-logo { height: 50px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav-links a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0%;
  height: 1px;
  background: currentColor;
  transition: width var(--dur-med) var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a.is-active::after { width: 100%; }
.nav-links a.is-active { color: var(--color-accent); }

.nav-right { display: flex; align-items: center; gap: var(--space-md); }

.lang-toggle {
  display: flex;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  background: rgba(255,255,255,0.5);
}
.lang-toggle button {
  border: none;
  background: transparent;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  color: var(--color-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  min-width: 36px;
}
.lang-toggle button.is-active { background: var(--color-ink); color: var(--color-bg); }

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  flex-direction: column;
  gap: 5px;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  /* Not justify-content:center — that clips the top when the menu is taller than the
     screen, hiding the first item behind the fixed bar on short phones. Auto margins
     centre the same way but give way instead of cutting anything off. */
  justify-content: flex-start;
  overflow-y: auto;
  /* keep clear of the fixed bar sitting above this menu */
  padding: calc(var(--nav-h, 83px) + var(--space-md)) var(--gutter) var(--space-lg);
  transform: translateY(-100%);
  transition: transform var(--dur-med) var(--ease-in-out);
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu ul { display: flex; flex-direction: column; gap: var(--space-md); margin-top: auto; }
.mobile-menu a { font-family: var(--font-display); font-size: 2rem; }
.mobile-menu .lang-toggle { margin-top: var(--space-xl); margin-bottom: auto; align-self: flex-start; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  /* svh, not dvh: dvh grows and shrinks as the mobile URL bar hides, which re-lays out
     everything below the hero and makes the page jump whenever the scroll direction
     changes. svh stays put — the hero is just slightly shorter once the bar is gone. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  color: var(--color-dark-ink);
}
.hero-media {
  position: absolute;
  /* start below the fixed bar — otherwise its top strip hides the roofline */
  inset: var(--nav-h, 83px) 0 0 0;
  z-index: 0;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* anchor to the top edge — wide screens crop from the bottom, keeping the sky and roofline */
  object-position: 50% 0%;
  /* zoom outwards from the top edge so the animation never eats into the sky either */
  transform-origin: 50% 0%;
  transform: scale(1.08);
  animation: heroZoom 12s var(--ease-out) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,8,0.15) 0%, rgba(10,10,8,0.55) 78%, rgba(10,10,8,0.78) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 130px var(--gutter) var(--space-2xl);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; font-weight: 600; margin-bottom: var(--space-md);
}
.hero h1 { font-size: clamp(1.95rem, 5.6vw, 4.6rem); max-width: 16ch; }
.hero-sub {
  max-width: 46ch;
  margin-top: var(--space-md);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--color-dark-muted);
}
.hero-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-xl); flex-wrap: wrap; }

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-lg);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--color-dark-muted);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.scroll-cue .line { width: 1px; height: 46px; background: currentColor; position: relative; overflow: hidden; }
.scroll-cue .line::after {
  content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%;
  background: var(--color-dark-ink);
  animation: scrollLine 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollLine { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }

/* ==========================================================================
   Sections / general
   ========================================================================== */
section { position: relative; }
section[id] { scroll-margin-top: 84px; }
.section { padding: var(--space-3xl) 0; }
.section-tight { padding: var(--space-2xl) 0; }
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-lg) var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.section-head h2 { max-width: 20ch; }
.section-head .lead {
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 500;
  color: var(--color-ink);
}
.dark-section .section-head .lead { color: var(--color-dark-muted); }

.dark-section {
  background: var(--color-dark);
  color: var(--color-dark-ink);
}
.dark-section .text-muted { color: var(--color-dark-muted); }
.dark-section .eyebrow { color: var(--color-accent-soft); }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
[data-stagger].is-visible > * { opacity: 1; transform: translateY(0); }

/* Line-mask reveal — headings slide up from behind a hidden edge */
.reveal-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.reveal-line-i {
  display: block;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition: transform 900ms var(--ease-out) var(--d, 0s), opacity 700ms linear var(--d, 0s);
  will-change: transform;
}
.reveal-line.is-visible .reveal-line-i { transform: none; opacity: 1; }

/* Scroll progress bar — grows across the top as the page scrolls */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: calc(var(--z-nav) + 1);
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-soft));
  pointer-events: none;
  will-change: transform;
}

/* Reduced motion: keep a gentle fade, drop the travel */
@media (prefers-reduced-motion: reduce) {
  .reveal-line-i {
    transform: none;
    transition: opacity 400ms linear var(--d, 0s);
  }
}

/* ==========================================================================
   Project Grid / Cards
   ========================================================================== */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4/3;
  background: var(--color-bg-alt);
}
.project-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter var(--dur-med) var(--ease-out);
}
.project-card:hover img { transform: scale(1.07); }
.project-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,8,0) 40%, rgba(10,10,8,0.82) 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-md);
  opacity: 0.92;
}
.project-card-meta { color: #fff; transform: translateY(6px); transition: transform var(--dur-med) var(--ease-out); }
.project-card:hover .project-card-meta { transform: translateY(0); }
.project-card-tag {
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-soft); font-weight: 600; margin-bottom: 6px; display: block;
}
.project-card-title { font-family: var(--font-display); font-size: 1.4rem; }
.project-card-arrow {
  position: absolute; top: var(--space-md); right: var(--space-md);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(247,245,241,0.9);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(-8px) rotate(-45deg);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.project-card:hover .project-card-arrow { opacity: 1; transform: translateY(0) rotate(0deg); }
.project-card-arrow svg { width: 16px; height: 16px; }

/* Filters */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs);
  margin-bottom: var(--space-xl);
}

/* "Show more" projects */
.projects-more-wrap {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}
#projects-more[hidden], #projects-less[hidden] { display: none; }
#projects-more svg, #projects-less svg {
  width: 16px; height: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}
#projects-more:hover svg { transform: translateY(3px); }
#projects-less:hover svg { transform: translateY(-3px); }
.projects-more-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  margin-left: -2px;
}
.filter-btn {
  border: 1px solid var(--color-line);
  background: transparent;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.filter-btn:hover { border-color: var(--color-ink); color: var(--color-ink); }
.filter-btn.is-active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  color: var(--color-accent);
}
.stat-label { margin-top: var(--space-2xs); font-size: 13.5px; letter-spacing: 0.04em; color: var(--color-ink-soft); }

/* ==========================================================================
   Services
   ========================================================================== */
.services-list { border-top: 1px solid var(--color-line); }
.service-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr auto;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-line);
  transition: padding var(--dur-med) var(--ease-out);
}
.service-row:hover { padding-left: var(--space-sm); }
.service-index { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-accent); }
.service-row h3 { font-size: 1.5rem; }
.service-arrow svg { width: 22px; height: 22px; transition: transform var(--dur-fast) var(--ease-out); }
.service-row:hover .service-arrow svg { transform: translateX(6px) rotate(-45deg); }

/* Process timeline */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); counter-reset: step; }
.timeline-step { position: relative; padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.timeline-step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--color-accent-soft);
  display: block;
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   About / Team
   ========================================================================== */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.team-card { overflow: hidden; border-radius: var(--radius-md); }
.team-photo { aspect-ratio: 3/4; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15); transition: transform var(--dur-slow) var(--ease-out); }
.team-card:hover .team-photo img { transform: scale(1.04); }
.team-info { padding: var(--space-sm) 2px; }
.team-name { font-family: var(--font-display); font-size: 1.25rem; }
.team-role { font-size: 13px; color: var(--color-accent); letter-spacing: 0.03em; margin-top: 2px; }

.founder-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  max-width: 480px;
}
.founder-avatar {
  flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
}

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.value-card { padding: var(--space-lg); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
.value-icon { width: 44px; height: 44px; margin-bottom: var(--space-md); color: var(--color-accent); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials-grid {
  column-count: 3;
  column-gap: var(--space-md);
}
.testimonial-card {
  break-inside: avoid;
  margin-bottom: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.testimonial-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.testimonial-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.testimonial-name { font-weight: 600; font-size: 15px; }
.testimonial-meta { font-size: 12.5px; color: var(--color-muted); margin-top: 2px; }
.testimonial-stars { display: flex; gap: 2px; margin-bottom: var(--space-sm); color: var(--color-accent); }
.testimonial-stars svg { width: 14px; height: 14px; }
.testimonial-text { font-size: 14.5px; line-height: 1.65; color: var(--color-ink-soft); }
.testimonial-reply {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--color-accent-soft);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.testimonial-reply-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px; }
.testimonial-reply-text { font-size: 13.5px; color: var(--color-ink-soft); font-style: italic; }

@media (max-width: 1024px) {
  .testimonials-grid { column-count: 2; }
}
@media (max-width: 640px) {
  .testimonials-grid { column-count: 1; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2xl); align-items: stretch; }
/* Side by side: pin the message box to the map's top and bottom edges.
   The message field drops to the bottom of the column, and the textarea is
   sized so that textarea + gap + button exactly equals the map's height
   (262px map − 48px button − 24px gap = 190px). */
@media (min-width: 1025px) {
  .contact-grid > *:first-child { display: flex; flex-direction: column; }
  #contact-form { display: flex; flex-direction: column; flex: 1; }
  #contact-form .field:has(textarea) { flex: 1; display: flex; flex-direction: column; }
  #contact-form .field:has(textarea) textarea { flex: 1; min-height: 130px; }
  /* the map soaks up any height difference, so both columns finish level */
  .contact-grid > *:last-child { display: flex; flex-direction: column; }
  .contact-grid > *:last-child .map-embed { flex: 1; }
  .contact-grid > *:last-child .map-embed iframe { height: 100%; min-height: 260px; }
}
.field { margin-bottom: var(--space-md); }
.field label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 8px; color: var(--color-ink-soft); }
.field input, .field textarea {
  width: 100%;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-ink);
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(156,107,69,0.14);
}
.field textarea { resize: vertical; min-height: 130px; display: block; }
.field-error { color: #b3402a; font-size: 12.5px; margin-top: 6px; display: none; }
.field.has-error input, .field.has-error textarea { border-color: #b3402a; }
.field.has-error .field-error { display: block; }

.form-success {
  display: none;
  align-items: center; gap: 10px;
  padding: 14px 18px; border-radius: var(--radius-sm);
  background: #eef4ea; color: #33532b; font-size: 14px; font-weight: 600;
  margin-bottom: var(--space-md);
}
.form-success.is-visible { display: flex; }

.form-error {
  display: flex;
  align-items: center; gap: 10px;
  padding: 14px 18px; border-radius: var(--radius-sm);
  background: #f6e9e6; color: #8c2f1c; font-size: 14px; font-weight: 600;
  margin-bottom: var(--space-md);
}
.form-error[hidden] { display: none; }
.form-error svg { flex-shrink: 0; }
#contact-form button[disabled] { opacity: 0.55; cursor: progress; }

.contact-info-card {
  background: var(--color-dark);
  color: var(--color-dark-ink);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.contact-info-card .info-row { display: flex; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.contact-info-card .info-row:last-child { border-bottom: none; }
.contact-info-card .info-row svg { width: 20px; height: 20px; color: var(--color-accent-soft); flex-shrink: 0; margin-top: 2px; }
/* small labels share the icon colour */
.contact-info-card .info-label { font-size: 12.5px; color: var(--color-accent-soft); }

/* IARP chamber-of-architects link — sits under the submit button */
.iarp-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}
.iarp-logo { flex-shrink: 0; display: block; line-height: 0; }
/* the logo file is on white — multiply blends it into the cream page */
.iarp-logo img { width: 86px; height: auto; display: block; mix-blend-mode: multiply; }
.iarp-title {
  display: block;
  font-size: 14.5px;
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.iarp-row:hover .iarp-title { color: var(--color-accent); }
.iarp-sub { display: block; font-size: 12px; color: var(--color-muted); margin-top: 3px; }
.map-embed { border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-md); border: 1px solid var(--color-line); }
.map-embed iframe { width: 100%; height: 260px; border: 0; display: block; filter: grayscale(0.3) contrast(1.05); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--color-dark); color: var(--color-dark-ink); padding: var(--space-2xl) 0 var(--space-md); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-lg); padding-bottom: var(--space-xl); border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: var(--space-sm); }
.footer-brand-logo {
  height: 52px;
  width: auto;
  display: block;
  margin-bottom: var(--space-sm);
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
}
.footer-col h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-dark-muted); margin-bottom: var(--space-sm); font-family: var(--font-body); font-weight: 600; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14.5px; transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--color-accent-soft); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-md); font-size: 12.5px; color: var(--color-dark-muted); flex-wrap: wrap; gap: var(--space-sm); }
.socials { display: flex; gap: var(--space-sm); }
.socials a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.socials a:hover { background: var(--color-accent); border-color: var(--color-accent); }
.socials svg { width: 15px; height: 15px; }

/* ==========================================================================
   Misc components
   ========================================================================== */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-md) 0;
}
.marquee-track { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: var(--space-sm); }
.marquee-track span { font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 2.2rem); padding: 0 var(--space-lg); white-space: nowrap; color: var(--color-ink-soft); }
.marquee-track span:not(:last-child)::after { content: "\2013"; margin-left: var(--space-lg); color: var(--color-accent-soft); }

.page-hero {
  padding: calc(var(--space-3xl) + 40px) 0 var(--space-2xl);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-line);
}
.breadcrumb { font-size: 13px; color: var(--color-muted); margin-bottom: var(--space-md); display: flex; gap: 8px; align-items: center; }
.breadcrumb a:hover { color: var(--color-accent); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
/* Studio section: photo spans the full height of the text column,
   so both columns start and finish level with each other */
.about-split { align-items: stretch; }
.about-split .split-media { aspect-ratio: auto; min-height: 100%; }
.about-title { font-size: clamp(1.8rem, 3vw, 2.7rem); text-wrap: balance; }
.split-media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/5; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }

.cta-band {
  background: var(--color-dark);
  color: var(--color-dark-ink);
  border-radius: var(--radius-md);
  padding: var(--space-2xl) var(--gutter);
  text-align: center;
}
.cta-band h2 { max-width: 22ch; margin: 0 auto var(--space-lg); }

/* Project detail gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-md); }
.gallery-grid img { border-radius: var(--radius-md); width: 100%; height: 100%; object-fit: cover; }
.gallery-grid .g-a { grid-column: span 4; aspect-ratio: 4/3; }
.gallery-grid .g-b { grid-column: span 2; aspect-ratio: 3/4; }
.gallery-grid .g-c { grid-column: span 3; aspect-ratio: 4/3; }
.gallery-grid .g-d { grid-column: span 3; aspect-ratio: 4/3; }
.gallery-grid .g-e { grid-column: span 6; aspect-ratio: 16/8; }

.meta-table { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-lg); }
.meta-item { padding-top: var(--space-sm); border-top: 1px solid var(--color-line); }
.meta-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 6px; }
.meta-value { font-family: var(--font-display); font-size: 1.15rem; }

.next-project { display: block; padding: var(--space-2xl) 0; text-align: center; }
.next-project .eyebrow { justify-content: center; }
.next-project h2 { margin-top: var(--space-sm); transition: color var(--dur-fast) var(--ease-out); }
.next-project:hover h2 { color: var(--color-accent); }

/* Loading screen */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s var(--ease-out);
}
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mark { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.02em; position: relative; }
.preloader-logo {
  display: block;
  height: clamp(90px, 16vw, 130px);
  width: auto;
  /* the logo file has a white background — multiply blends it into the cream backdrop */
  mix-blend-mode: multiply;
}
.preloader-mark::after {
  content: ""; position: absolute; left: 0; bottom: -8px; height: 1px; width: 100%;
  background: var(--color-line);
}
.preloader-bar {
  position: absolute; left: 0; bottom: -8px; height: 1px; width: 0%;
  background: var(--color-accent);
  animation: preload 1.4s var(--ease-in-out) forwards;
}
@keyframes preload { to { width: 100%; } }

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--color-ink); color: var(--color-bg); padding: 12px 20px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Project Modal
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  background: rgba(10,10,8,0.68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 20px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med) var(--ease-out);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal-dialog {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  max-width: 980px;
  width: 100%;
  margin: auto;
  overflow: hidden;
  transform: translateY(24px) scale(0.98);
  opacity: 0;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}
.modal-overlay.is-open .modal-dialog { transform: translateY(0) scale(1); opacity: 1; }
.modal-close {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(247,245,241,0.92);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.modal-close:hover { background: #fff; transform: rotate(90deg); }
.modal-close svg { width: 18px; height: 18px; }
.modal-hero { position: relative; aspect-ratio: 16/8; }
.modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.modal-body { padding: var(--space-lg) var(--gutter) var(--space-2xl); }
.modal-body .meta-table { margin: var(--space-lg) 0; }
/* project title is smaller inside the modal than the page-level h-xl */
.modal-body .h-xl { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
.modal-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xs); margin-top: var(--space-lg); }
.modal-gallery img { border-radius: var(--radius-sm); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.modal-gallery img:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1/1; }
/* description sits under the gallery, set noticeably smaller than the headline copy */
.modal-desc { margin-top: var(--space-lg); max-width: 72ch; }
.modal-desc p { font-size: 14px; line-height: 1.7; color: var(--color-ink-soft); }
.modal-desc p + p { margin-top: 10px; }
body.modal-open { overflow: hidden; }

.modal-gallery img, .modal-hero img { cursor: zoom-in; }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0;
  z-index: 500;
  background: rgba(5,5,4,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med) var(--ease-out);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: min(90vw, 1400px);
  max-height: 88vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  border: none;
  background: rgba(247,245,241,0.12);
  color: var(--color-dark-ink);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background var(--dur-fast) var(--ease-out);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(247,245,241,0.22); }
.lightbox-close { top: 24px; right: 24px; width: 48px; height: 48px; }
.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-prev svg, .lightbox-next svg { width: 24px; height: 24px; }

@media (max-width: 640px) {
  .lightbox-prev, .lightbox-next { width: 44px; height: 44px; }
  .lightbox-close { width: 44px; height: 44px; top: 14px; right: 14px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

@media (max-width: 640px) {
  .modal-gallery { grid-template-columns: repeat(2, 1fr); }
  .modal-gallery img:first-child { grid-column: span 2; aspect-ratio: 16/10; }
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-dialog { border-radius: 0; min-height: 100%; margin: 0; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid, .values-grid { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .service-row { grid-template-columns: 50px 1fr auto; }
  .service-row .service-desc { display: none; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: 1fr; }
  .gallery-grid .g-a, .gallery-grid .g-c, .gallery-grid .g-d { grid-column: span 6; aspect-ratio: 16/10; }
  .gallery-grid .g-b { grid-column: span 3; aspect-ratio: 4/5; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-right .lang-toggle { display: none; }
  .nav-burger { display: flex; }
  .meta-table { grid-template-columns: 1fr 1fr; }
  .section-head { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .team-grid, .values-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: var(--space-lg); }
  .timeline { grid-template-columns: 1fr; }
  .gallery-grid .g-b { grid-column: span 6; aspect-ratio: 4/5; }
  .section { padding: var(--space-2xl) 0; }
  .section-tight { padding: var(--space-xl) 0; }
}

/* RODO note under the contact form — quiet, but legible enough to actually read */
.form-privacy {
  margin-top: var(--space-sm);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 52ch;
}
.form-privacy a {
  color: var(--color-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-privacy a:hover { color: var(--color-accent); }

/* Click-to-load map placeholder — matches the iframe's footprint so nothing shifts */
.map-consent {
  width: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-md);
  text-align: center;
  border: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.015) 12px 24px),
    var(--color-bg-alt);
  color: var(--color-ink-soft);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.map-consent:hover { background-color: var(--color-line); }
.map-consent svg { width: 26px; height: 26px; color: var(--color-accent); }
.map-consent-title {
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-ink);
}
.map-consent-note { font-size: 12px; line-height: 1.5; color: var(--color-muted); max-width: 34ch; }

/* Contact details: tappable on a phone, copyable for webmail users */
.info-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.info-link:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }

.info-mail { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; }
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.copy-btn svg { width: 12px; height: 12px; }
.copy-btn:hover { color: var(--color-ink); border-color: var(--color-ink); }
.copy-btn.is-copied { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }

/* On a phone these are thumb targets, not just links — 20px of text is too small to hit */
@media (max-width: 768px) {
  .info-mail { gap: var(--space-xs); }
  .info-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .copy-btn { min-height: 40px; padding: 8px 15px; font-size: 12px; }
  .copy-btn svg { width: 14px; height: 14px; }
}

/* The e-mail address is one unbreakable 254px word — without this it sets the card's
   minimum width and pushes the whole contact column off a narrow screen. */
.info-mail .info-link { overflow-wrap: anywhere; }