/* ==========================================================================
   Mizarstvo Malovašič — Atelje Edition
   Bespoke joinery studio design system
   ========================================================================== */

:root {
  --color-bg: #faf8f4;
  --color-bg-soft: #f3efe7;
  --color-bg-soft-2: #ede7db;
  --color-paper: #ffffff;
  --color-walnut: #4a3222;
  --color-walnut-deep: #241811;
  --color-walnut-black: #17110c;
  --color-gold: #a9793f;
  --color-gold-deep: #8a5f2e;
  --color-gold-light: #c99a5b;
  --color-gold-pale: #e6c996;
  --color-ink: #241f1b;
  --color-ink-soft: #665c4f;
  --color-ink-faint: #9a9082;
  --color-line: rgba(74, 50, 34, .12);
  --color-line-soft: rgba(74, 50, 34, .07);
  --font-serif: 'Source Serif 4', 'Georgia', serif;
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --container: 1280px;
  --radius: 3px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-2: cubic-bezier(.16,.84,.44,1);
  --shadow-sm: 0 2px 10px rgba(36,24,17,.07);
  --shadow-md: 0 18px 46px rgba(36,24,17,.12), 0 3px 10px rgba(36,24,17,.06);
  --shadow-lg: 0 34px 90px rgba(36,24,17,.16), 0 8px 24px rgba(36,24,17,.07);
  --shadow-gold: 0 18px 44px rgba(169,121,63,.26);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
}
body.is-loading { overflow: hidden; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--color-walnut-deep);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader__mark {
  font-family: var(--font-serif); font-style: italic; font-size: 15px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--color-gold-light);
  opacity: 0; animation: preloaderFade 1.6s var(--ease) both;
}
@keyframes preloaderFade { 0% { opacity: 0; letter-spacing: .6em; } 60% { opacity: 1; } 100% { opacity: .85; letter-spacing: .3em; } }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* Subtle premium grain + linen texture */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.29 0 0 0 0 0.20 0 0 0 0 0.13 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Ambient cursor-follow glow */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 640px; height: 640px; border-radius: 50%;
  pointer-events: none; z-index: 2;
  background: radial-gradient(circle, rgba(169,121,63,.10), rgba(169,121,63,0) 65%);
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .6s ease; will-change: transform;
}
.cursor-glow.is-active { opacity: 1; }
@media (max-width: 900px), (hover: none) { .cursor-glow { display: none; } }

/* Custom dot cursor accent (desktop only) */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-gold-light); pointer-events: none; z-index: 300;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s, transform .18s var(--ease);
  mix-blend-mode: difference;
}
.cursor-dot.is-active { opacity: .85; }
.cursor-dot.is-hover { transform: translate(-50%, -50%) scale(3.2); }
@media (max-width: 900px), (hover: none) { .cursor-dot { display: none; } }

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--color-gold-deep), var(--color-gold-light));
  z-index: 200; transition: width .1s linear;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; margin: 0; color: var(--color-walnut-deep); letter-spacing: -.005em; }
h1 em, h2 em { font-style: normal; color: var(--color-gold-deep); position: relative; }
p { margin: 0; line-height: 1.75; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; position: relative; z-index: 3; }
.container--narrow { max-width: 920px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--color-gold-deep); font-weight: 600; margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--color-gold-deep); display: inline-block; }
.eyebrow--light { color: var(--color-gold-light); }
.eyebrow--center { justify-content: center; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 26px 0;
  transition: background .15s linear, padding .3s var(--ease), box-shadow .3s var(--ease);
  /* Stable, isolated GPU compositing layer so the fixed nav doesn't flicker/repaint
     late during fast momentum scrolling on Safari/mobile. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.nav.is-scrolled {
  /* Solid background (no backdrop-filter): blur+position:fixed is a known trigger for
     repaint/flicker bugs on WebKit/Safari during fast scrolling, so we avoid it entirely
     rather than trying to work around it. */
  background: rgba(250,248,244,.98);
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--color-line), 0 14px 34px rgba(36,24,17,.07);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; }
.nav__logo { display: flex; align-items: center; }
/* Logo is a fixed raster wordmark (the source file is only 352x70), so we only
   refine its finish, never redraw the mark. The thin gold letterforms sit on a
   photographic hero, so legibility comes from the scrim behind them plus a
   shadow; on the scrolled light bar a darker, richer tone reads less muddy. */
.nav__logo-img {
  height: 44px; width: auto; display: block;
  filter: saturate(1.12) brightness(1.06) drop-shadow(0 2px 5px rgba(20,13,8,.65));
  transition: opacity .3s var(--ease), transform .5s var(--ease), height .3s var(--ease), filter .3s var(--ease);
}
.nav__logo:hover .nav__logo-img { opacity: .82; }
.nav.is-scrolled .nav__logo-img { height: 36px; filter: brightness(.58) saturate(1.35) contrast(1.1); }
@media (max-width: 600px) { .nav__logo-img { height: 34px; } .nav.is-scrolled .nav__logo-img { height: 30px; } }
.nav__links { display: flex; align-items: center; gap: 34px; font-size: 12.5px; letter-spacing: .05em; }
.nav__links a { opacity: .82; transition: opacity .3s, color .15s linear; position: relative; color: #f7f2e7; text-transform: uppercase; }
.nav.is-scrolled .nav__links a { color: var(--color-ink); }
.nav__links a:not(.nav__cta)::after {
  content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: var(--color-gold-light);
  transition: width .35s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after { width: 100%; }
.nav__links a:hover { opacity: 1; color: var(--color-gold-light); }
.nav.is-scrolled .nav__links a:hover { color: var(--color-gold-deep); }
.nav__links a.is-current::after { width: 100%; }
.nav__links a.is-current { opacity: 1; color: var(--color-gold-light); }
.nav.is-scrolled .nav__links a.is-current { color: var(--color-gold-deep); }
.nav__cta {
  border: 1px solid var(--color-gold-light); padding: 10px 22px; border-radius: 2px; opacity: 1 !important;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-deep));
  color: #241811 !important; font-weight: 600;
  box-shadow: 0 6px 18px -6px rgba(138, 95, 46, .6);
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), transform .3s var(--ease);
}
.nav.is-scrolled .nav__cta { border-color: var(--color-gold-deep); }
.nav__cta:hover { background: linear-gradient(135deg, var(--color-gold-pale), var(--color-gold-light)); color: var(--color-walnut-deep) !important; box-shadow: 0 10px 24px -6px rgba(138, 95, 46, .75); transform: translateY(-1px); }
.nav__burger { display: none; }
.nav__mobile {
  display: none; position: fixed; inset: 0; background: var(--color-walnut-deep); z-index: 99;
  flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  font-size: 22px; font-family: var(--font-serif); opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease);
}
.nav__mobile a { color: #f7f2e7; }
.nav__mobile.is-open { display: flex; opacity: 1; visibility: visible; }
.nav__mobile .nav__cta { padding: 11px 28px; font-family: var(--font-sans); font-size: 13px; }

/* ---------- Marquee strip ---------- */
.marquee {
  background: var(--color-walnut-deep); overflow: hidden; padding: 13px 0;
  border-bottom: 1px solid rgba(230,201,150,.12);
}
.marquee__track { display: flex; width: max-content; animation: marqueeScroll 70s linear infinite; }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; min-width: 100vw; justify-content: space-around; }
.marquee__track span {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-serif); font-style: italic; font-size: 14px;
  color: var(--color-gold-light); opacity: .8; letter-spacing: .02em;
  padding: 0 28px; white-space: nowrap;
}
.marquee__track span::after { content: '◆'; font-style: normal; font-size: 8px; opacity: .6; margin-left: 28px; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Hero ---------- */
/* The preloader covers the hero for roughly the first second, which is long enough
   to swallow the whole entrance. Hold the hero's animations at their first frame
   until the preloader lifts (body.is-loading is dropped) so the reveal is actually
   seen rather than played to an empty room. */
body.is-loading .hero__kicker,
body.is-loading .hero__line > span,
body.is-loading .hero__rule,
body.is-loading .hero__subtitle,
body.is-loading .hero__actions,
body.is-loading .hero__trust,
body.is-loading .hero__scroll { animation-play-state: paused; }
.hero { position: relative; min-height: 100vh; min-height: 100svh; background: var(--color-walnut-deep); display: flex; align-items: center; overflow: hidden; }
.hero__frame { position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 640px; background: var(--color-walnut-deep); }
.hero__media { position: absolute; inset: -1.5% -1.5% -1.5% -1.5%; will-change: transform; }
.hero__img {
  width: 101%; height: 101%; object-fit: cover; object-position: 60% 38%;
  filter: brightness(1.03) saturate(1.03);
  transform: scale(1.04) translate(0, 0); animation: heroPan 40s ease-in-out infinite alternate;
  background: var(--color-walnut-deep);
  will-change: transform;
}
/* Slow ken-burns drift. The image sits pre-scaled at 1.04 so the pan can move a
   visible distance without ever exposing an edge of the frame. */
@keyframes heroPan {
  0% { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.11) translate(-1.8%, -1%); }
}
.hero__gradient {
  position: absolute; inset: 0;
  background:
    linear-gradient(102deg, rgba(20,13,8,.90) 0%, rgba(20,13,8,.80) 24%, rgba(20,13,8,.56) 40%, rgba(20,13,8,.26) 54%, rgba(20,13,8,.06) 66%, rgba(20,13,8,0) 77%),
    linear-gradient(0deg, rgba(15,10,6,.52) 0%, rgba(15,10,6,.10) 22%, rgba(15,10,6,0) 40%),
    linear-gradient(180deg, rgba(15,10,6,.30) 0%, rgba(15,10,6,0) 18%);
}
.hero__frame::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(230,201,150,.14);
}
.hero__content {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-top: clamp(96px, 14vh, 160px); padding-bottom: clamp(36px, 6vh, 80px);
  padding-left: max(32px, calc((100% - var(--container)) / 2 + 32px)); padding-right: 32px;
  gap: 0;
}
.hero__title { max-width: 600px; }
.hero__kicker {
  display: block; font-family: var(--font-serif); font-style: italic; font-size: clamp(14px, 1.3vw, 17px);
  color: var(--color-gold-pale); margin-bottom: 14px; animation: fadeUp 1.2s var(--ease) both;
  letter-spacing: .01em;
}
.hero__title {
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1.1; letter-spacing: -.015em; margin-bottom: 18px;
  color: #f8f4ea; font-weight: 500;
}
.hero__title em { font-style: normal; color: var(--color-gold-light); }
/* Each line rises out from behind its own mask, the way a printed sheet slides
   into place. The padding/negative-margin pair keeps descenders (j, p) from
   being shaved off by the mask's overflow. */
.hero__line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hero__line > span { display: block; animation: heroLineRise 1.15s var(--ease-2) both; }
.hero__line:nth-child(1) > span { animation-delay: .1s; }
.hero__line:nth-child(2) > span { animation-delay: .22s; }
.hero__line:nth-child(3) > span { animation-delay: .34s; }
@keyframes heroLineRise {
  from { transform: translateY(110%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.hero__rule {
  display: block; width: 38px; height: 1px; background: var(--color-gold-light); opacity: .55;
  margin: 2px 0 18px; transform-origin: left center; animation: heroRuleDraw 1s .62s var(--ease) both;
}
@keyframes heroRuleDraw {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: .55; }
}
.hero__subtitle { font-size: 15.5px; line-height: 1.7; color: #d9d0bf; max-width: 400px; font-weight: 300; margin-bottom: clamp(22px, 3.2vh, 32px); animation: fadeUp 1.3s .3s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
.hero__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; animation: fadeUp 1.3s .35s var(--ease) both; }
.hero__play {
  display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #e9e0cf; opacity: .85; transition: opacity .3s;
}
.hero__play:hover { opacity: 1; }
.hero__play-ring {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(230,201,150,.5);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.hero__play-ring::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(230,201,150,.25);
  animation: pulseRing 2.6s ease-out infinite;
}
@keyframes pulseRing { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.hero__trust {
  display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); margin-top: clamp(22px, 3.2vh, 34px);
  padding-top: 22px; border-top: 1px solid rgba(230,201,150,.18);
  animation: fadeUp 1.3s .5s var(--ease) both; flex-shrink: 0; max-width: 640px;
}
.hero__trust li {
  display: flex; align-items: center; gap: 14px; font-size: 12.5px; line-height: 1.4; color: #e3dac6;
  letter-spacing: .03em; font-weight: 400; white-space: nowrap; position: relative;
  padding-right: clamp(22px, 3vw, 40px);
}
.hero__trust li:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 30px; background: rgba(230,201,150,.2);
}
.hero__trust li svg { flex-shrink: 0; }
.hero__trust-icon {
  display: flex; align-items: center; justify-content: center; color: var(--color-gold-light);
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(230,201,150,.32);
  background: rgba(230,201,150,.06); flex-shrink: 0;
  transition: background .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.hero__trust-icon svg { width: 23px; height: 23px; }
.hero__trust li:hover .hero__trust-icon { background: rgba(230,201,150,.14); border-color: var(--color-gold-light); transform: translateY(-2px); }
.hero__trust li span:last-child { font-family: var(--font-serif); font-size: 14.5px; color: #f2ece0; letter-spacing: .01em; }

.hero__scroll {
  position: absolute; right: clamp(24px, 5vw, 56px); bottom: 40px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--color-gold-pale); opacity: .75; animation: fadeUp 1.3s .6s var(--ease) both;
}
.hero__scroll span { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; }
.hero__scroll-line { width: 1px; height: 44px; background: linear-gradient(180deg, rgba(230,201,150,.7), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after {
  content: ''; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; background: var(--color-gold-light);
  animation: scrollDrip 2.2s ease-in-out infinite;
}
@keyframes scrollDrip { 0% { top: -20px; } 100% { top: 44px; } }

/* Tablet — keep the split overlay, tune the focal point and overlay */
@media (max-width: 900px) and (min-width: 769px) {
  .hero__media { left: 0; right: 0; width: 100%; inset: -1.5%; }
  .hero__img { width: 102%; height: 102%; object-position: 58% 40%; }
  @keyframes heroPan {
    0% { transform: scale(1.0) translate(0, 0); }
    100% { transform: scale(1.035) translate(0, -0.8%); }
  }
  .hero__gradient {
    background:
      linear-gradient(100deg, rgba(20,13,8,.92) 0%, rgba(20,13,8,.74) 34%, rgba(20,13,8,.34) 52%, rgba(20,13,8,.04) 70%, rgba(20,13,8,0) 80%),
      linear-gradient(0deg, rgba(15,10,6,.5) 0%, rgba(15,10,6,0) 34%);
  }
  .hero__scroll { display: none; }
}

/* ===== Mobile — full-bleed overlay hero (image + title together, like desktop) ===== */
@media (max-width: 768px) {
  .hero { min-height: 100svh; display: flex; align-items: stretch; background: var(--color-walnut-deep); overflow: hidden; }
  .hero__frame {
    position: relative; width: 100%; height: 100svh; min-height: 600px;
    background: var(--color-walnut-deep); display: block; padding: 0;
  }
  /* subtle inset frame line, same idea as desktop */
  .hero__frame::after { display: block; box-shadow: inset 0 0 0 1px rgba(230,201,150,.12); }

  /* Image fills the whole hero as a background again */
  .hero__media {
    position: absolute; inset: 0; width: 100%; height: 100%;
    aspect-ratio: auto; border-radius: 0; box-shadow: none; margin: 0; overflow: hidden; will-change: auto;
  }
  .hero__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 58% 41%;
    animation: none; transform: none; filter: brightness(1.02) saturate(1.05);
  }
  /* Warm cinematic wash — heavy walnut at the bottom for text, a soft top
     scrim so the nav reads over the photo, and a subtle vignette for depth. */
  .hero__gradient {
    inset: 0;
    background:
      linear-gradient(0deg, rgba(15,10,6,.95) 0%, rgba(18,12,7,.82) 22%, rgba(20,13,8,.44) 46%, rgba(20,13,8,.1) 68%, rgba(20,13,8,0) 84%),
      linear-gradient(180deg, rgba(15,10,6,.6) 0%, rgba(15,10,6,.12) 16%, rgba(15,10,6,0) 30%),
      radial-gradient(120% 80% at 50% 42%, rgba(60,38,20,0) 55%, rgba(15,10,6,.4) 100%);
  }

  /* Content overlaid on the image, anchored to the bottom */
  .hero__content {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
    padding: 92px 24px calc(30px + env(safe-area-inset-bottom)); gap: 0;
  }
  .hero__kicker { color: var(--color-gold-pale); font-size: clamp(13px, 3.6vw, 15px); margin-bottom: 12px; }
  .hero__title {
    color: #f8f4ea; max-width: 100%; font-weight: 500;
    font-size: clamp(30px, 8.6vw, 40px); line-height: 1.12; letter-spacing: -.01em; margin-bottom: 16px;
  }
  .hero__title em { color: var(--color-gold-light); }
  .hero__rule { background: var(--color-gold-light); opacity: .6; margin: 0 0 16px; }
  .hero__subtitle {
    color: #d9d0bf; max-width: 46ch; font-weight: 300;
    font-size: 14.5px; line-height: 1.65; margin-bottom: 24px;
  }
  .hero__actions { width: 100%; margin: 0; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* Value points — compact row over the image, with hairline dividers */
  .hero__trust {
    display: flex; flex-direction: row; align-items: stretch; gap: 0;
    width: 100%; margin-top: 24px; padding-top: 20px;
    border-top: 1px solid rgba(230,201,150,.22); max-width: 100%;
  }
  .hero__trust li {
    flex: 1; flex-direction: column; align-items: center; text-align: center; gap: 9px;
    padding: 0 6px; white-space: normal; color: #e3dac6;
    border: none; background: none; box-shadow: none; border-radius: 0;
  }
  .hero__trust li:not(:last-child)::after {
    content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 40px; background: rgba(230,201,150,.2);
  }
  .hero__trust-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    color: var(--color-gold-light); border-color: rgba(230,201,150,.32); background: rgba(230,201,150,.06);
  }
  .hero__trust-icon svg { width: 20px; height: 20px; }
  .hero__trust li span:last-child { color: #f2ece0; font-size: 12px; line-height: 1.35; }

  .hero__scroll { display: none; }

  /* Header sits transparent over the dark image at the top, and the global
     `.nav.is-scrolled` rule swaps it to the solid light bar on scroll. */
  .nav { background: transparent; padding: 16px 0; box-shadow: none; }
  .nav:not(.is-scrolled) .nav__logo-img { filter: saturate(1.08) drop-shadow(0 1px 2px rgba(20,13,8,.42)); }
  .nav:not(.is-scrolled) .nav__burger span { background: #f7f2e7; }
  .nav.is-scrolled { background: rgba(250,248,244,.98); box-shadow: 0 1px 0 var(--color-line); }

  .btn--gold { padding: 14px 26px; font-size: 12px; }
}

/* Short phones (small devices / landscape): tighten so the overlaid content
   always clears the fixed header — still same composition, just compressed. */
@media (max-width: 768px) and (max-height: 720px) {
  .hero__content { padding-top: 74px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .hero__title { font-size: clamp(27px, 7.6vw, 34px); margin-bottom: 12px; }
  .hero__subtitle { margin-bottom: 18px; }
  .hero__trust { margin-top: 18px; padding-top: 16px; }
  .hero__trust-icon { width: 38px; height: 38px; }
  .hero__trust-icon svg { width: 18px; height: 18px; }
}

.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 17px 32px; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600; cursor: pointer; border-radius: 2px;
  transition: all .4s var(--ease); position: relative; overflow: hidden;
}
.btn::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease); pointer-events: none;
}
.btn:hover::before { left: 130%; }
.btn--gold::before { background: linear-gradient(115deg, transparent, rgba(255,255,255,.65), transparent); }
.btn--outline { background: var(--color-paper); border: 1px solid var(--color-gold-deep); color: var(--color-gold-deep); box-shadow: var(--shadow-sm); }
.btn--outline:hover { background: var(--color-gold-deep); color: var(--color-paper); box-shadow: var(--shadow-gold); transform: translateY(-2px); }
.btn--outline svg { transition: transform .4s var(--ease); }
.btn--gold {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-deep));
  color: #241811; border: 1px solid var(--color-gold-light); font-weight: 600; letter-spacing: .16em;
  box-shadow: 0 10px 28px -10px rgba(138, 95, 46, .65);
}
.btn--gold:hover {
  background: linear-gradient(135deg, var(--color-gold-pale), var(--color-gold-light));
  border-color: var(--color-gold-pale); transform: translateY(-2px);
  box-shadow: 0 14px 34px -8px rgba(138, 95, 46, .8);
}
.btn--gold svg { transition: transform .4s var(--ease); }
.btn--gold:hover svg { transform: translateX(4px); }
.btn--outline:hover svg { transform: translateX(4px); }
.btn--light { border-color: var(--color-gold-light); background: transparent; color: var(--color-gold-light); }
.btn--light:hover { background: var(--color-gold-light); color: var(--color-walnut-deep); }
.btn--dark { border-color: var(--color-walnut-deep); background: var(--color-walnut-deep); color: #f7f2e7; }
.btn--dark:hover { background: var(--color-gold-deep); border-color: var(--color-gold-deep); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn--full { width: 100%; justify-content: center; }
.btn--sm { padding: 12px 22px; font-size: 11px; }
.btn { will-change: transform; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(44px); filter: blur(3px); transition: opacity 1.15s var(--ease), transform 1.15s var(--ease), filter 1.15s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal--left { transform: translateX(-46px) translateY(0); }
.reveal--left.is-visible { transform: translateX(0); }
.reveal--right { transform: translateX(46px) translateY(0); }
.reveal--right.is-visible { transform: translateX(0); }
.reveal--scale { transform: scale(.94); }
.reveal--scale.is-visible { transform: scale(1); }

/* Split-line text reveal */
.split-lines .line { overflow: hidden; display: block; }
.split-lines .line span { display: inline-block; transform: translateY(110%); transition: transform .95s var(--ease-2); }
.split-lines.is-visible .line span { transform: translateY(0); }
.split-lines .line:nth-child(1) span { transition-delay: .02s; }
.split-lines .line:nth-child(2) span { transition-delay: .1s; }
.split-lines .line:nth-child(3) span { transition-delay: .18s; }

/* Staggered cascade for grouped reveal items */
.materials__grid .material:nth-child(1) { transition-delay: 0s; }
.materials__grid .material:nth-child(2) { transition-delay: .1s; }
.materials__grid .material:nth-child(3) { transition-delay: .2s; }
.materials__grid .material:nth-child(4) { transition-delay: .3s; }
.gallery__grid .gallery__item:nth-child(1) { transition-delay: 0s; }
.gallery__grid .gallery__item:nth-child(2) { transition-delay: .06s; }
.gallery__grid .gallery__item:nth-child(3) { transition-delay: .12s; }
.gallery__grid .gallery__item:nth-child(4) { transition-delay: .18s; }
.gallery__grid .gallery__item:nth-child(5) { transition-delay: .24s; }
.gallery__grid .gallery__item:nth-child(6) { transition-delay: .3s; }
.gallery__grid .gallery__item:nth-child(7) { transition-delay: .36s; }
.gallery__grid .gallery__item:nth-child(8) { transition-delay: .42s; }
.process__steps .process__step:nth-child(1) { transition-delay: 0s; }
.process__steps .process__step:nth-child(2) { transition-delay: .1s; }
.process__steps .process__step:nth-child(3) { transition-delay: .2s; }
.process__steps .process__step:nth-child(4) { transition-delay: .3s; }
.testimonials__grid .testimonial:nth-child(1) { transition-delay: 0s; }
.testimonials__grid .testimonial:nth-child(2) { transition-delay: .1s; }
.testimonials__grid .testimonial:nth-child(3) { transition-delay: .2s; }

/* ---------- Intro ---------- */
.intro { padding: 120px 0; background: var(--color-bg); position: relative; overflow: hidden; }
.intro::before {
  content: ''; position: absolute; top: 8%; left: -6%; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(169,121,63,.14), transparent 70%);
  border-radius: 50%; pointer-events: none; z-index: 0;
  animation: floatBlob 16s ease-in-out infinite;
}
@keyframes floatBlob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.08); } }
.intro__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 100px; align-items: center; position: relative; z-index: 1; }
.intro__meta { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.intro__text .eyebrow { margin-bottom: 0; }
.intro__meta-badge {
  position: relative; padding-left: 16px;
  font-family: var(--font-serif); font-style: italic; font-size: 15px;
  color: var(--color-gold-deep); letter-spacing: .01em;
}
.intro__meta-badge::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 15px; background: var(--color-line);
}
.intro__text h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.16; margin-bottom: 22px; }
.intro__text > p.lead { color: var(--color-ink-soft); font-size: 17px; max-width: 460px; margin-bottom: 10px; }
.intro__text-secondary { color: var(--color-ink-soft); font-size: 15px; max-width: 460px; margin: 0 0 28px; }
.intro__list { display: grid; gap: 8px; margin-bottom: 32px; }
.intro__list li {
  position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 3px 18px;
  padding: 14px 16px; border-radius: 12px; border: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.intro__list li::before {
  content: '';
  grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--color-line); background: var(--color-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a5f2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.intro__list li:hover {
  background: var(--color-paper); border-color: var(--color-line);
  transform: translateX(4px); box-shadow: var(--shadow-sm);
}
.intro__list li:hover::before {
  background-color: var(--color-walnut-deep); border-color: var(--color-walnut-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c99a5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.intro__list-title { grid-column: 2; grid-row: 1; align-self: end; font-family: var(--font-serif); font-size: 15.5px; color: var(--color-ink); line-height: 1.25; }
.intro__list-desc { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--color-ink-soft); line-height: 1.5; }
.intro__signature-text { font-size: 12.5px; color: var(--color-ink-faint); line-height: 1.5; }
.intro__signature-text strong { display: block; color: var(--color-ink); font-family: var(--font-serif); font-style: normal; font-size: 14px; margin-bottom: 2px; }

.intro__image { position: relative; padding: 0 0 34px 34px; }
.intro__image-frame {
  overflow: hidden; border-radius: var(--radius); position: relative;
  box-shadow: 0 22px 54px rgba(36,24,17,.11), 0 5px 16px rgba(36,24,17,.05);
}
.intro__image-frame::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(74,50,34,.08); pointer-events: none; }
.intro__image img { width: 100%; height: 580px; object-fit: cover; filter: brightness(1) saturate(1.02); transition: transform 1.3s var(--ease), filter .6s; display: block; }
.intro__image:hover img { transform: scale(1.06); filter: brightness(1.03); }
.intro__badge {
  position: absolute; left: 0; bottom: 0; z-index: 4;
  background: var(--color-walnut-deep); color: #f7f2e7; border-radius: 50%;
  width: 115px; height: 115px; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); text-align: center;
  border: 1px solid rgba(230,201,150,.25);
}
.intro__badge-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.intro__badge-num { font-family: var(--font-serif); font-size: 26px; color: var(--color-gold-light); line-height: 1; }
.intro__badge-label { font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #cfc3ae; max-width: 70px; line-height: 1.3; }
@media (max-width: 1080px) {
  .intro__image { padding: 0 0 24px 24px; }
  .intro__badge { width: 94px; height: 94px; }
  .intro__badge-num { font-size: 21px; }
}
@media (max-width: 640px) {
  .intro__image { padding: 0 0 18px 18px; }
  .intro__badge { width: 80px; height: 80px; }
  .intro__badge-num { font-size: 18px; }
  .intro__badge-label { font-size: 7.5px; max-width: 58px; }
}

/* ---------- Showcase ---------- */
.showcase { padding: 150px 0; background: var(--color-bg-soft); position: relative; }
.section-head { max-width: 660px; margin: 0 auto 64px; text-align: center; }
.section-head h2 { font-size: clamp(29px, 3.5vw, 42px); line-height: 1.28; }
.section-lead { margin-top: 18px; font-size: 15.5px; color: var(--color-ink-soft); }

.showcase__head { margin-bottom: clamp(52px, 6vw, 86px); }
.showcase__head-text h2 { font-size: clamp(31px, 3.8vw, 48px); line-height: 1.16; margin-bottom: 20px; }
.showcase__head-text .section-lead { margin-top: 0; max-width: 560px; font-size: 16px; }

/* Services — the site has no per-service subpage, so each of the three is
   presented in full here: photo, description and the concrete choices involved.
   No arrows or pointer cursor: nothing here is clickable. */
.service-rows { display: flex; flex-direction: column; gap: clamp(48px, 6.5vw, 96px); }
/* Equal columns: with every second row mirrored, uneven columns would make the
   photos change size as you scroll down the section. */
.service-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.4vw, 70px); align-items: center;
}
.service-row__media {
  position: relative; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3; background: var(--color-bg-soft-2);
}
.service-row__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  filter: saturate(1.02); transition: transform 1.2s var(--ease);
}
.service-row:hover .service-row__media img { transform: scale(1.045); }
/* This photo's bench sits low and to the right of frame — bias the crop
   toward it so the "klop" itself stays the visible subject, not just the stove. */
.service-row__media--klop img { object-position: 68% 62%; }
/* Mirror every second row so the eye zig-zags down the section. */
.service-row:nth-child(even) .service-row__media { order: 2; }
.service-row__num {
  display: block; font-family: var(--font-serif); font-size: 13px; color: var(--color-gold-deep);
  letter-spacing: .12em; margin-bottom: 12px;
}
.service-row__body h3 { font-size: clamp(24px, 2.5vw, 33px); line-height: 1.2; margin-bottom: 14px; }
.service-row__lead { font-size: 15.5px; line-height: 1.75; color: var(--color-ink-soft); margin-bottom: 26px; max-width: 46ch; }
.service-row__points { display: grid; gap: 13px; border-top: 1px solid var(--color-line); padding-top: 24px; }
.service-row__points li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.55; }
.service-row__points li::before {
  content: ''; position: absolute; left: 0; top: .66em; width: 11px; height: 1px; background: var(--color-gold-deep); opacity: .8;
}

.showcase__spotlight { margin: 0; position: relative; overflow: hidden; border-radius: 10px; box-shadow: var(--shadow-lg); height: 420px; }
.showcase__spotlight img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1) saturate(1.02); transition: transform 1.3s var(--ease), filter .6s; }
.showcase__spotlight:hover img { transform: scale(1.05); filter: brightness(1.03); }
.showcase__spotlight figcaption {
  position: absolute; left: 24px; bottom: 22px; z-index: 2; display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-walnut-deep);
  background: rgba(255,255,255,.88); backdrop-filter: blur(8px); padding: 10px 18px; border-radius: 30px; box-shadow: var(--shadow-sm);
}
.showcase__spotlight figcaption .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold-deep); display: inline-block; flex-shrink: 0; }
@media (max-width: 900px) {
  /* Stack: photo always above its copy, so the mirroring never strands an image. */
  .service-row { grid-template-columns: 1fr; gap: 26px; }
  .service-row:nth-child(even) .service-row__media { order: 0; }
  .service-row__media { aspect-ratio: 3 / 2; }
  .service-row__lead { max-width: none; }
  .showcase__spotlight { height: 300px; }
}

/* ---------- Process ---------- */
/* A plain drawn timeline: one hairline, four markers, no cards. The steps carry
   the weight through spacing and type, not through boxes and shadows. */
.process { padding: 150px 0; background: var(--color-bg); position: relative; overflow: hidden; }
.process__steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 44px);
  position: relative; margin-top: 52px; padding-top: 34px;
}
/* The container's only job is to trigger the line draw, so it reveals nothing
   itself — this also keeps the steps visible if the reveal script never runs. */
.process__steps.reveal { opacity: 1; transform: none; filter: none; }
.process__line {
  position: absolute; top: 4px; left: 0; right: 0; height: 1px; z-index: 0;
  background: linear-gradient(90deg, var(--color-gold-deep), rgba(169,121,63,.22));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.6s var(--ease-2) .1s;
}
.process__steps.is-visible .process__line { transform: scaleX(1); }
.process__step { position: relative; z-index: 1; text-align: left; }
/* The marker sitting on the line, centred on it (line top 4px, dot 9px tall). */
.process__step::before {
  content: ''; position: absolute; top: -34px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-gold-deep); box-shadow: 0 0 0 5px var(--color-bg);
  transform: scale(0); transition: transform .5s var(--ease-2);
}
.process__step.is-visible::before { transform: scale(1); }
.process__step:nth-of-type(1), .process__step:nth-of-type(1)::before { transition-delay: .25s; }
.process__step:nth-of-type(2), .process__step:nth-of-type(2)::before { transition-delay: .45s; }
.process__step:nth-of-type(3), .process__step:nth-of-type(3)::before { transition-delay: .65s; }
.process__step:nth-of-type(4), .process__step:nth-of-type(4)::before { transition-delay: .85s; }
.process__step-num {
  display: block; font-family: var(--font-serif); font-size: 12.5px; letter-spacing: .14em;
  color: var(--color-gold-deep); margin-bottom: 12px;
}
.process__step h3 { font-size: 18px; margin-bottom: 10px; transition: color .35s var(--ease); }
.process__step p { font-size: 13.5px; line-height: 1.65; color: var(--color-ink-soft); }
.process__step:hover h3 { color: var(--color-gold-deep); }

@media (max-width: 900px) {
  /* Two rows of two: a single line across the top would only ever reach the
     first row's markers, so drop it and let the markers carry the rhythm. */
  .process__steps { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; padding-top: 28px; }
  .process__line { display: none; }
  .process__step::before { top: -28px; }
}
@media (max-width: 560px) {
  /* Single column — the timeline turns on its side and runs down the margin. */
  .process__steps { grid-template-columns: 1fr; gap: 32px; padding-top: 0; padding-left: 28px; }
  .process__line {
    display: block; top: 5px; bottom: 5px; left: 4px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, var(--color-gold-deep), rgba(169,121,63,.22));
    transform: scaleY(0); transform-origin: top center;
  }
  .process__steps.is-visible .process__line { transform: scaleY(1); }
  .process__step::before { top: 5px; left: -28px; }
}

/* ---------- Gallery ---------- */
.gallery { padding: 150px 0; }
.gallery__filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: -10px 0 54px; }
.gallery__filter {
  font-family: var(--font-sans); font-size: 12.5px; letter-spacing: .05em; color: var(--color-ink-soft);
  background: transparent; border: 1px solid var(--color-line); border-radius: 30px; padding: 10px 22px; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .3s var(--ease);
}
.gallery__filter:hover { color: var(--color-gold-deep); border-color: var(--color-gold-deep); transform: translateY(-1px); }
.gallery__filter.is-active { background: var(--color-walnut-deep); border-color: var(--color-walnut-deep); color: #f7f2e7; }

.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 340px; gap: 26px; }
.gallery__grid--uniform { grid-auto-rows: 380px; }
.gallery__item { overflow: hidden; position: relative; border-radius: 8px; box-shadow: var(--shadow-md); transition: opacity .4s var(--ease), transform .4s var(--ease); cursor: pointer; }
.gallery__item--tall { grid-row: span 2; }
.gallery__grid--uniform .gallery__item--tall { grid-row: span 1; }
.gallery__item.is-hidden { display: none; }
.gallery__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(23,17,12,.45)); opacity: 0; transition: opacity .4s var(--ease); }
.gallery__item:hover::after { opacity: 1; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1) saturate(1.02); transition: transform 1.1s var(--ease), filter .5s; }
.gallery__item:hover img { transform: scale(1.06); filter: brightness(1.04); }
.gallery__tag {
  position: absolute; left: 18px; bottom: 18px; z-index: 2; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: #f7f2e7; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.gallery__item:hover .gallery__tag { opacity: 1; transform: translateY(0); }
.gallery__zoom {
  position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; color: var(--color-walnut-deep);
  opacity: 0; transform: translateY(-6px) scale(.9); transition: opacity .35s var(--ease), transform .35s var(--ease); z-index: 2;
}
.gallery__item:hover .gallery__zoom { opacity: 1; transform: translateY(0) scale(1); }
.gallery__empty { text-align: center; color: var(--color-ink-faint); font-size: 14px; padding: 40px 0 0; }
.gallery__more { text-align: center; margin-top: 60px; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 250; background: rgba(15,10,7,.94);
  display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s var(--ease); backdrop-filter: blur(6px);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img-wrap { max-width: 88vw; max-height: 82vh; position: relative; }
.lightbox__img { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: 4px; box-shadow: var(--shadow-lg); transform: scale(.96); transition: transform .4s var(--ease); }
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__caption { text-align: center; color: var(--color-gold-pale); font-size: 13px; letter-spacing: .06em; margin-top: 18px; text-transform: uppercase; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; background: rgba(255,255,255,.06); border: 1px solid rgba(230,201,150,.25); color: #f2ece0;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .3s, transform .3s, border-color .3s;
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(230,201,150,.16); border-color: var(--color-gold-light); }
.lightbox__close { top: 26px; right: 26px; width: 44px; height: 44px; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.lightbox__prev { left: 26px; }
.lightbox__next { right: 26px; }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.06); }
@media (max-width: 700px) {
  .lightbox__prev, .lightbox__next { width: 40px; height: 40px; }
  .lightbox__close { width: 38px; height: 38px; top: 14px; right: 14px; }
  .lightbox__prev { left: 10px; } .lightbox__next { right: 10px; }
}

/* ---------- Materials ---------- */
/* Kept light: this section used to be dark walnut, which put two heavy brown
   bands back-to-back with the CTA right below it. The CTA is now the page's only
   dark band, so it reads as a deliberate accent rather than a second slab. */
.materials { padding: 150px 0; background: var(--color-bg-soft); position: relative; overflow: hidden; }
.materials::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 85% 15%, rgba(169,121,63,.07), transparent 70%);
  pointer-events: none;
}
.materials__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; z-index: 1; }
.material { position: relative; }
.material__img { height: 210px; overflow: hidden; margin-bottom: 24px; border-radius: 4px; box-shadow: var(--shadow-md); position: relative; }
.material__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(23,17,12,.35)); }
.material__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.96) saturate(1.03); transition: transform 1.1s var(--ease); }
.material:hover .material__img img { transform: scale(1.1); }
/* Material cards use samples and drawn illustrations (not room photos): keep them
   bright, skip the dark bottom scrim, and use a gentler zoom so nothing crops away.
   White, not cream — on the soft section background a cream tile has no edge. */
.material__img--drawn { background: var(--color-paper); }
.material__img--drawn::after { display: none; }
.material__img--drawn img { filter: none; object-fit: cover; }
.material:hover .material__img--drawn img { transform: scale(1.03); }
/* Sample fans and colour charts lose their meaning if an edge is cropped off. */
.material__img--contain { background: var(--color-paper); }
.material__img--contain img { object-fit: contain; padding: 14px; }
.material__num { font-family: var(--font-serif); font-size: 12px; color: var(--color-gold-deep); letter-spacing: .12em; margin-bottom: 10px; display: block; }
.material h3 { font-size: 20px; margin-bottom: 10px; color: var(--color-ink); }
.material p { font-size: 13.5px; color: var(--color-ink-soft); }

/* ---------- Testimonials ---------- */
.testimonials { padding: 150px 0; background: var(--color-bg); }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.testimonial {
  background: var(--color-paper); border-radius: 8px; padding: 40px 34px; box-shadow: var(--shadow-sm);
  position: relative; transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.testimonial:hover { box-shadow: var(--shadow-md); transform: translateY(-6px); }
.testimonial__quote { font-family: var(--font-serif); font-size: 40px; color: var(--color-gold-pale); line-height: 1; margin-bottom: 8px; display: block; }
.testimonial__stars { display: flex; gap: 3px; margin-bottom: 18px; color: var(--color-gold-deep); }
.testimonial p.testimonial__text { font-size: 15px; color: var(--color-ink-soft); margin-bottom: 26px; min-height: 96px; }
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--color-bg-soft-2); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); color: var(--color-gold-deep); font-size: 15px; flex-shrink: 0;
}
.testimonial__author strong { display: block; font-size: 13.5px; color: var(--color-ink); }
.testimonial__author span { font-size: 12px; color: var(--color-ink-faint); }
@media (max-width: 900px) { .testimonials__grid { grid-template-columns: 1fr; } }

/* ---------- CTA ---------- */
.cta { position: relative; padding: 170px 0; overflow: hidden; background: var(--color-walnut-deep); }
.cta__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(201,154,91,.16), transparent 70%), linear-gradient(160deg, #241811 0%, #2e2013 100%); }
.cta__bg::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .6;
}
.cta__inner { position: relative; text-align: center; max-width: 700px; margin: 0 auto; color: #f2ece0; }
.cta__inner h2 { color: #f7f2e7; font-size: clamp(31px, 4.2vw, 48px); line-height: 1.22; margin-bottom: 22px; }
.cta__inner > p { color: #cfc3ae; font-size: 16.5px; margin-bottom: 42px; }
.cta__form { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .5s var(--ease), margin .6s var(--ease); text-align: left; margin-top: 0; }
.cta__form.is-open { max-height: 900px; opacity: 1; margin-top: 42px; }
.form-row { margin-bottom: 17px; }
.form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row label { display: block; font-size: 12.5px; color: #cfc3ae; letter-spacing: .03em; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid rgba(201,154,91,.3); border-radius: 2px;
  font-family: var(--font-sans); font-size: 14px; background: rgba(255,255,255,.05); color: #f2ece0;
  transition: border-color .25s, background .25s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--color-gold-light); background: rgba(255,255,255,.08); }
.form-row input::placeholder, .form-row textarea::placeholder { color: rgba(242,236,224,.35); }
.form-note { font-size: 12.5px; color: var(--color-gold-light); text-align: center; margin-top: 14px; min-height: 16px; }
.cta__contact { display: flex; justify-content: center; gap: 30px; margin-top: 42px; font-family: var(--font-serif); font-size: 17px; }
.cta__contact a { color: var(--color-gold-light); transition: color .3s; }
.cta__contact a:hover { color: #f7f2e7; }

/* ---------- Kontakt section (new, bottom of homepage) ---------- */
.contact-block { padding: 150px 0; background: var(--color-bg-soft); position: relative; overflow: hidden; }
.contact-block::before {
  content: ''; position: absolute; bottom: -10%; right: -6%; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(169,121,63,.12), transparent 70%); border-radius: 50%; pointer-events: none;
}
.contact-block__head { position: relative; z-index: 1; max-width: 620px; margin-bottom: 56px; }
.contact-block__head h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.2; margin-bottom: 18px; }
.contact-block__head p { color: var(--color-ink-soft); font-size: 16px; }
.contact-block__head--center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 44px; }
.contact-block__head--center p { font-size: 16.5px; }
/* Details on the left, form on the right, map spanning the full width below —
   three cards sharing one radius, border and shadow so the edges line up. */
/* Details + map share the left column, form on the right. The form is roughly
   twice as tall as four contact rows, so the map takes the 1fr row and absorbs
   whatever height is left over — both columns always end on the same line. */
.contact-layout {
  position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr;
  gap: 26px; align-items: stretch;
}
.contact-aside { display: grid; grid-template-rows: auto 1fr; gap: 26px; min-height: 0; }
.contact-panel {
  background: var(--color-paper); border: 1px solid var(--color-line); border-radius: 18px;
  padding: 42px 36px 34px; box-shadow: var(--shadow-md); display: flex; flex-direction: column;
}
.contact-info__eyebrow {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-gold-deep); font-weight: 600; margin-bottom: 20px;
}
.contact-info__list { display: grid; gap: 2px; margin-bottom: 26px; }
.contact-info__list li {
  display: flex; align-items: center; gap: 16px; padding: 15px 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.contact-info__list li:last-child { border-bottom: 0; }
.contact-info__icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-soft-2); color: var(--color-gold-deep);
}
.contact-info__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-info__label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-faint); }
.contact-info__value { font-family: var(--font-serif); font-size: 15.5px; color: var(--color-ink); line-height: 1.3; overflow-wrap: anywhere; }
.contact-info__value a { color: inherit; transition: color .25s; }
.contact-info__value a:hover { color: var(--color-gold-deep); }
.contact-info__maplink {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--color-gold-deep); transition: gap .3s var(--ease), color .3s var(--ease);
}
.contact-info__maplink:hover { gap: 12px; color: var(--color-walnut-deep); }
.contact-map {
  position: relative; z-index: 1; min-height: 240px; overflow: hidden;
  border: 1px solid var(--color-line); border-radius: 18px; box-shadow: var(--shadow-md);
  background: var(--color-bg-soft-2);
}
.contact-map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: grayscale(.32) sepia(.08) saturate(1.05);
}
@media (max-width: 900px) {
  /* Stack details → form → map. `display: contents` dissolves the aside so all
     three become siblings in the one-column grid and can be reordered. */
  .contact-layout { grid-template-columns: 1fr; gap: 22px; }
  .contact-aside { display: contents; }
  .contact-panel { order: 1; padding: 34px 28px 30px; }
  .contact-hero { order: 2; }
  .contact-map { order: 3; height: 320px; }
}

/* ---------- Inquiry form (right column of .contact-layout) ---------- */
.contact-hero {
  position: relative; z-index: 1;
  background: var(--color-paper); border-radius: 18px; padding: 44px 42px 38px;
  box-shadow: var(--shadow-md); border: 1px solid var(--color-line);
}
.contact-hero::before {
  content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
/* Anchored to the card's own top-right corner rather than centred, so it can't
   drift over the details panel sitting alongside it. */
.contact-hero__badge {
  position: absolute; top: -15px; right: 32px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--color-gold-pale);
  background: var(--color-walnut-deep);
  padding: 9px 20px; border-radius: 30px; box-shadow: var(--shadow-md);
  border: 1px solid rgba(230,201,150,.28);
}
.contact-hero__badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold-light); box-shadow: 0 0 0 3px rgba(201,154,91,.28); }
.inquiry-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label,
.inquiry-form > .field > label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-soft); font-weight: 600; }
.field__req { color: var(--color-gold-deep); }
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--color-ink);
  background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 7px;
  padding: 13px 15px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  -webkit-appearance: none; appearance: none;
}
.inquiry-form textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder { color: var(--color-ink-faint); }
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  outline: none; border-color: var(--color-gold-deep); background: var(--color-paper);
  box-shadow: 0 0 0 3px rgba(169,121,63,.14);
}
.field__select { position: relative; display: flex; }
.field__select select { padding-right: 40px; cursor: pointer; }
.field__select svg { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--color-gold-deep); pointer-events: none; }

/* Note under the fields: photos are attached in the visitor's e-mail app */
.inquiry-form__note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 13px 15px; border-radius: 9px;
  border: 1px dashed var(--color-line); background: var(--color-bg);
  font-size: 13px; line-height: 1.55; color: var(--color-ink-soft);
}
.inquiry-form__note svg { flex-shrink: 0; margin-top: 2px; color: var(--color-gold-deep); }
.inquiry-form__note strong { color: var(--color-ink); font-weight: 600; }

.inquiry-form .btn--gold { margin-top: 8px; padding-top: 16px; padding-bottom: 16px; }
.form-status { font-size: 13.5px; line-height: 1.55; margin: 4px 0 0; min-height: 1px; }
.form-status--success { color: #2e6b40; }
.form-status--error { color: #b23b2e; }

@media (max-width: 640px) {
  .contact-hero { padding: 40px 24px 34px; border-radius: 14px; }
  .contact-hero::before { border-radius: 14px; }
  .contact-hero__badge { right: 20px; }
  .contact-panel { border-radius: 14px; }
  .contact-map { border-radius: 14px; }
  .field-row { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Page hero (subpage) ---------- */
.page-hero {
  position: relative; padding: 200px 0 100px; background: var(--color-walnut-deep); overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 20% 0%, rgba(201,154,91,.14), transparent 70%);
}
.page-hero__inner { position: relative; z-index: 1; text-align: center; }
.page-hero h1 { color: #f7f2e7; font-size: clamp(38px, 5vw, 60px); line-height: 1.15; }
.page-hero h1 em { font-style: normal; color: var(--color-gold-light); }
.page-hero p { color: #cfc3ae; font-size: 16px; max-width: 560px; margin: 22px auto 0; }
.page-hero .eyebrow { justify-content: center; }
.breadcrumb { display: flex; justify-content: center; gap: 8px; font-size: 12px; color: #cfc3ae; margin-bottom: 22px; letter-spacing: .04em; }
.breadcrumb a { color: var(--color-gold-light); transition: color .3s; }
.breadcrumb a:hover { color: #f7f2e7; }

/* ---------- Footer ---------- */
.footer { padding: 56px 0 30px; border-top: 1px solid var(--color-line); background: var(--color-bg); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--color-line-soft); }
.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer__brand-mark { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 19px; color: var(--color-walnut-deep); }
.footer__brand-mark svg { color: var(--color-gold-deep); }
.footer__brand p { font-size: 13.5px; color: var(--color-ink-soft); max-width: 280px; }
.footer__social { display: flex; gap: 10px; margin-top: 6px; }
.footer__social a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-line); display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-soft); transition: background .3s, color .3s, border-color .3s;
}
.footer__social a:hover { background: var(--color-gold-deep); border-color: var(--color-gold-deep); color: #fff; }
.footer__col h4 { font-family: var(--font-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-faint); margin-bottom: 18px; font-weight: 600; }
.footer__col ul { display: grid; gap: 12px; }
.footer__col a { font-size: 14px; color: var(--color-ink-soft); transition: color .3s; }
.footer__col a:hover { color: var(--color-gold-deep); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; }
.footer__copy { font-size: 12px; color: var(--color-ink-faint); }
.footer__credit { font-size: 12px; color: var(--color-ink-faint); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr; gap: 30px; } }

/* Back to top */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 90; width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-walnut-deep); color: var(--color-gold-light); border: 1px solid rgba(230,201,150,.3);
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--color-gold-deep); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .materials__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; }
  .intro__grid { gap: 60px; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 101; }
  .nav__burger span { width: 22px; height: 2px; background: #f7f2e7; display: block; transition: background .15s linear; }
  .nav.is-scrolled .nav__burger span { background: var(--color-walnut-deep); }
  .intro__grid { grid-template-columns: 1fr; gap: 50px; }
  .intro__image img { height: 380px; }
  .testimonials__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .materials__grid { grid-template-columns: 1fr; }
  .form-row--split { grid-template-columns: 1fr; }
  .cta__contact { flex-direction: column; gap: 10px; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 280px; gap: 16px; }
  .gallery__item--tall { grid-row: span 1; height: 340px; }
  .gallery__filters { gap: 8px; }
  .gallery__filter { padding: 8px 16px; font-size: 11.5px; }
  .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ==========================================================================
   MOBILE POLISH LAYER
   Bespoke phone experience — the desktop layout (>768px) is untouched.
   Two goals: (1) reveal content that desktop hides behind :hover, since
   touch devices can't hover; (2) tighten the desktop's 150px vertical
   rhythm, which reads as empty and cheap on a small screen.
   ========================================================================== */

/* ---- Never gate content behind hover on touch / narrow screens ----
   Keyed to BOTH `hover: none` and a width fallback, so the copy shows
   whether or not a given device reports hover support correctly. */
/* Width-based (phones + small tablets, where cards are already 1-col) */
@media (max-width: 900px) {
  .gallery__item::after { opacity: 1; }
  .gallery__tag { opacity: 1; transform: none; }
}
/* Touch fallback for wide devices that still can't hover (large tablets) */
@media (hover: none) {
  .gallery__item::after { opacity: 1; }
  .gallery__tag { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  /* --- Vertical rhythm: 150px → a calmer, phone-appropriate scale --- */
  .intro,
  .showcase,
  .process,
  .gallery,
  .materials,
  .testimonials,
  .contact-block { padding: clamp(72px, 15vw, 100px) 0; }
  .cta { padding: clamp(84px, 18vw, 116px) 0; }

  /* --- Section heads: pull copy closer, scale display type down --- */
  .section-head { margin-bottom: clamp(32px, 8.5vw, 46px); }
  .section-head h2 { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.22; }
  .section-lead { font-size: 15px; }

  /* --- Hero: make the primary CTA a confident full-width tap target --- */
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* --- Intro --- */
  .intro__text h2 { font-size: clamp(28px, 8vw, 36px); margin-bottom: 20px; }
  .intro__text > p.lead { font-size: 16px; margin-bottom: 28px; }
  .intro__list { margin-bottom: 30px; }
  .intro__grid { gap: 44px; }
  .intro__image img { height: clamp(300px, 78vw, 420px); }

  /* --- Showcase heading --- */
  .showcase__head { margin-bottom: clamp(38px, 10vw, 54px); }
  .showcase__head-text h2 { font-size: clamp(28px, 8vw, 38px); margin-bottom: 16px; }

  /* --- Services: tighter rhythm between the three presentations --- */
  .service-rows { gap: 44px; }
  .service-row__body h3 { font-size: 23px; }
  .service-row__lead { font-size: 14.5px; margin-bottom: 20px; }
  .service-row__points { padding-top: 20px; gap: 11px; }

  /* --- Process: tighter stack, softer number spacing --- */
  .process__steps { gap: 30px; margin-top: 8px; }
  .process__step { padding: 0; }
  .process__step-num { margin-bottom: 18px; }

  /* --- Testimonials: drop the fixed text height that leaves gaps --- */
  .testimonials__grid { gap: 18px; }
  .testimonial { padding: 32px 26px; }
  .testimonial p.testimonial__text { min-height: 0; margin-bottom: 22px; }

  /* --- Materials: a touch less air between the dark cards --- */
  .materials__grid { gap: 26px; }
  .material__img { height: clamp(190px, 52vw, 230px); }

  /* --- Gallery: tidy 2-up grid instead of one endless column --- */
  .gallery__filters { margin: -6px 0 32px; }
  .gallery__more { margin-top: 40px; }

  /* --- CTA --- */
  .cta__inner > p { font-size: 15.5px; margin-bottom: 34px; }
  .cta__inner h2 { margin-bottom: 18px; }
}

@media (max-width: 640px) {
  /* Two square-ish thumbnails per row reads as a gallery, not a list */
  .gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(140px, 34vw); gap: 12px; }
  .gallery__grid--uniform { grid-auto-rows: minmax(140px, 34vw); }
  .gallery__item--tall { grid-row: span 1; height: auto; }
  .gallery__tag { left: 12px; bottom: 12px; font-size: 10.5px; }
}

/* ==========================================================================
   FAQ / Jedilni koti po meri
   ========================================================================== */
.faq { padding: 150px 0; background: var(--color-bg); position: relative; overflow: hidden; }
.faq__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: start; }
.faq__intro h2 { font-size: clamp(29px, 3.5vw, 42px); line-height: 1.28; margin: 20px 0 22px; }
.faq__intro p { color: var(--color-ink-soft); font-size: 16px; line-height: 1.75; margin-bottom: 16px; }
.faq__intro .btn { margin-top: 16px; }
.faq__list h3 {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-ink-faint);
  margin-bottom: 14px;
}
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 18px; padding: 21px 0;
  font-family: var(--font-serif); font-size: 18.5px; font-weight: 600;
  color: var(--color-ink); transition: color .3s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+'; font-family: var(--font-sans); font-weight: 300; font-size: 24px;
  line-height: 1; color: var(--color-gold-deep); flex: none;
  transition: transform .35s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--color-gold-deep); }
.faq__item > p { color: var(--color-ink-soft); font-size: 15.5px; line-height: 1.7; padding: 0 36px 22px 0; }

@media (max-width: 1000px) {
  .faq__grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 767px) {
  .faq { padding: clamp(72px, 15vw, 100px) 0; }
  .faq__item summary { font-size: 17px; padding: 18px 0; }
}

/* Besedilna povezava v temni CTA sekciji */
.cta__textlink { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-gold-light); transition: color .3s; }
.cta__textlink:hover { color: var(--color-gold-light); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* ==========================================================================
   NADGRADNJA 2026 — VEČSTRANSKA RAZLIČICA
   ==========================================================================
   Vse spodaj je dodano ob prehodu z ene same strani na sedem strani.
   Zgrajeno je iz istih spremenljivk kot vse ostalo (barve, pisave, sence),
   zato se novo in staro ne razhajata.
   ========================================================================== */

/* ---------- Skip link (dostopnost + SEO) ---------- */
.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -180%);
  z-index: 999; background: var(--color-walnut-deep); color: #f7f2e7;
  padding: 12px 22px; border-radius: 2px; font-size: 13px; letter-spacing: .04em;
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Vidno žarišče za tipkovnico — brez tega je stran za marsikoga neuporabna. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-gold); outline-offset: 3px;
}

/* ==========================================================================
   NAVIGACIJA — spustni meni "Ponudba"
   ========================================================================== */
.nav__links { align-items: center; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__item > a svg { transition: transform .35s var(--ease); opacity: .7; }
.nav__item:hover > a svg, .nav__item:focus-within > a svg { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px);
  padding-top: 22px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.nav__item:hover .nav__panel, .nav__item:focus-within .nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.nav__panel-inner {
  display: grid; grid-template-columns: repeat(3, 232px); gap: 6px; padding: 14px;
  background: rgba(255,255,255,.97); backdrop-filter: blur(18px);
  border: 1px solid var(--color-line); border-radius: 6px; box-shadow: var(--shadow-lg);
}
.nav__panel-item {
  display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: center;
  padding: 12px; border-radius: 4px; transition: background .3s var(--ease);
}
.nav__panel-item:hover { background: var(--color-bg-soft); }
.nav__panel-thumb {
  display: block; width: 62px; height: 56px; border-radius: 3px; overflow: hidden;
  background: var(--color-bg-soft-2); flex-shrink: 0;
}
.nav__panel-item > span:last-child { display: block; min-width: 0; }
.nav__panel-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.nav__panel-item:hover .nav__panel-thumb img { transform: scale(1.08); }
.nav__panel-title {
  display: block; font-family: var(--font-serif); font-size: 15.5px; font-weight: 600;
  color: var(--color-walnut-deep); letter-spacing: 0; text-transform: none;
}
.nav__panel-desc {
  display: block; font-size: 12px; color: var(--color-ink-faint); margin-top: 3px;
  letter-spacing: 0; text-transform: none; line-height: 1.5;
}
/* V prosojni glavi (vrh strani) je besedilo svetlo — v odprtem panelu pa temno. */
.nav:not(.is-scrolled) .nav__panel-title { color: var(--color-walnut-deep); }
.nav:not(.is-scrolled) .nav__panel-desc { color: var(--color-ink-faint); }

/* Mobilni meni: skupina s podnaslovi namesto spustnega menija. */
.nav__mobile-group { display: block; margin: 2px 0 6px; }
.nav__mobile-label {
  display: block; font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--color-gold-light); margin-bottom: 6px; opacity: .8;
}
.nav__mobile-group a { padding-left: 18px !important; font-size: 17px !important; }

@media (max-width: 1120px) {
  .nav__panel-inner { grid-template-columns: repeat(3, 190px); }
}

/* ==========================================================================
   TRAKA Z DEJSTVI  (nadomešča drsečo vrstico pod herojem)
   ========================================================================== */
.trust-bar { background: var(--color-walnut-deep); position: relative; overflow: hidden; }
.trust-bar::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(201,154,91,.13), transparent 70%);
}
.trust-bar__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 44px 0;
}
.trust-bar__item { text-align: center; padding: 6px 20px; position: relative; }
.trust-bar__item:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 42px; background: rgba(201,154,91,.24);
}
.trust-bar__num {
  display: block; font-family: var(--font-serif); font-size: clamp(28px, 3vw, 38px);
  color: var(--color-gold-light); line-height: 1; font-weight: 600;
}
.trust-bar__label {
  display: block; margin-top: 10px; font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #b6a58c;
}
@media (max-width: 760px) {
  .trust-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 0; padding: 38px 0; }
  .trust-bar__item:nth-child(2)::after { display: none; }
}

/* ==========================================================================
   PONUDBA — tri velike kartice (domača stran)
   ========================================================================== */
.offer { padding: clamp(96px, 11vw, 150px) 0; background: var(--color-bg-soft); }
.offer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.offer-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-paper); border-radius: 8px; box-shadow: var(--shadow-md);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.offer-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.offer-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.offer-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.offer-card:hover .offer-card__media img { transform: scale(1.06); }
.offer-card__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(23,17,12,.5));
  opacity: .85; transition: opacity .5s var(--ease);
}
.offer-card:hover .offer-card__media::after { opacity: .6; }
.offer-card__num {
  position: absolute; top: 18px; left: 20px; z-index: 2;
  font-family: var(--font-serif); font-size: 13px; letter-spacing: .2em;
  color: var(--color-gold-pale); opacity: .9;
}
.offer-card__body { padding: 30px 30px 32px; display: flex; flex-direction: column; flex: 1; }
.offer-card__body h3 { font-size: 24px; line-height: 1.25; margin-bottom: 12px; }
.offer-card__body > p { font-size: 14.5px; color: var(--color-ink-soft); line-height: 1.72; }
.offer-card__points { margin: 18px 0 26px; display: grid; gap: 8px; }
.offer-card__points li {
  position: relative; padding-left: 20px; font-size: 13.5px; color: var(--color-ink-soft);
}
.offer-card__points li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px;
  border: 1px solid var(--color-gold); border-radius: 50%;
}
.offer-card__link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: var(--color-gold-deep); padding-top: 20px; border-top: 1px solid var(--color-line-soft);
}
.offer-card__link svg { transition: transform .4s var(--ease); }
.offer-card:hover .offer-card__link svg { transform: translateX(5px); }
/* Cela kartica je klikljiva, a v HTML ostane en sam pravi <a> — brez podvojenih
   povezav, ki bi jih bralnik zaslona bral dvakrat. */
.offer-card__link::after { content: ''; position: absolute; inset: 0; }

@media (max-width: 1000px) { .offer__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* ==========================================================================
   IZPOSTAVLJENO — jedilni koti (osrednji pas domače strani)
   ========================================================================== */
.spotlight { position: relative; background: var(--color-walnut-black); overflow: hidden; }
.spotlight__grid {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 620px;
}
.spotlight__media { position: relative; overflow: hidden; }
.spotlight__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spotlight__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(23,17,12,.9));
}
.spotlight__body {
  padding: clamp(60px, 7vw, 104px) clamp(32px, 5vw, 88px) clamp(60px, 7vw, 104px) clamp(32px, 4vw, 64px);
  display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2;
}
.spotlight__body h2 {
  color: #f7f2e7; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.18; margin-bottom: 22px;
}
.spotlight__body h2 em { color: var(--color-gold-light); }
.spotlight__body > p { color: #c8bba6; font-size: 15.5px; max-width: 480px; }
.spotlight__list { margin: 30px 0 38px; display: grid; gap: 14px; max-width: 480px; }
.spotlight__list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
  color: #ded3c0; font-size: 14.5px; line-height: 1.6;
}
.spotlight__list li svg { color: var(--color-gold-light); margin-top: 3px; }
.spotlight__actions { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 950px) {
  .spotlight__grid { grid-template-columns: 1fr; min-height: 0; }
  .spotlight__media { height: 320px; }
  .spotlight__media::after { background: linear-gradient(180deg, rgba(23,17,12,.25), rgba(23,17,12,.85)); }
  .spotlight__body { padding: 56px 0 64px; }
  .spotlight__body .container { padding: 0; }
}

/* ==========================================================================
   PODSTRANI — glava s fotografijo
   ========================================================================== */
.page-hero--image { padding: 210px 0 110px; }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.page-hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,17,12,.86), rgba(23,17,12,.7) 55%, rgba(23,17,12,.94));
}
.page-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.breadcrumb span { color: #9a8c76; }

/* ==========================================================================
   BESEDILO PODSTRANI  (.prose)
   --------------------------------------------------------------------------
   Ena sama nastavitev za tekoče besedilo na podstraneh: naslovi, odstavki,
   seznami in poudarki. Zaradi nje so vse podstrani berljive enako.
   ========================================================================== */
.prose { max-width: 780px; }
.prose > * + * { margin-top: 22px; }
.prose h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.25; margin-top: 52px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; line-height: 1.35; margin-top: 38px; color: var(--color-walnut); }
.prose p { font-size: 16px; color: var(--color-ink-soft); }
.prose p strong { color: var(--color-walnut); font-weight: 600; }
.prose a:not(.btn) {
  color: var(--color-gold-deep); border-bottom: 1px solid rgba(169,121,63,.35);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.prose a:not(.btn):hover { color: var(--color-walnut); border-color: var(--color-walnut); }
.prose ul { display: grid; gap: 11px; }
.prose ul li {
  position: relative; padding-left: 26px; font-size: 15.5px; color: var(--color-ink-soft); line-height: 1.7;
}
.prose ul li::before {
  content: ''; position: absolute; left: 2px; top: 10px; width: 8px; height: 8px;
  border: 1px solid var(--color-gold); border-radius: 50%;
}
.prose ol { display: grid; gap: 11px; counter-reset: prose-num; list-style: none; }
.prose ol li {
  position: relative; padding-left: 34px; font-size: 15.5px; color: var(--color-ink-soft); line-height: 1.7;
  counter-increment: prose-num;
}
.prose ol li::before {
  content: counter(prose-num, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-family: var(--font-serif); font-size: 13px; color: var(--color-gold-deep); letter-spacing: .05em;
}

/* Poudarjen odstavek sredi besedila. */
.callout {
  padding: 28px 32px; background: var(--color-bg-soft); border-left: 2px solid var(--color-gold);
  border-radius: 0 4px 4px 0;
}
.callout p { font-size: 15.5px; color: var(--color-walnut); }
.callout strong { color: var(--color-walnut-deep); }

/* Vsebina podstrani: besedilo levo, lepljiva stranska kartica desno. */
.article { padding: clamp(90px, 10vw, 140px) 0; }
.article__grid { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: clamp(48px, 6vw, 92px); align-items: start; }
.article__aside { position: sticky; top: 110px; display: grid; gap: 20px; }

.aside-card {
  background: var(--color-paper); border: 1px solid var(--color-line-soft);
  border-radius: 8px; padding: 32px 30px; box-shadow: var(--shadow-sm);
}
.aside-card h3 { font-size: 20px; margin-bottom: 12px; }
.aside-card p { font-size: 14px; color: var(--color-ink-soft); }
.aside-card .btn { margin-top: 22px; }
.aside-card__list { margin-top: 20px; display: grid; gap: 13px; }
.aside-card__list li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 13.5px; color: var(--color-ink-soft); }
.aside-card__list li svg { color: var(--color-gold); margin-top: 3px; }
.aside-card--dark { background: var(--color-walnut-deep); border-color: transparent; }
.aside-card--dark h3 { color: #f7f2e7; }
.aside-card--dark p { color: #bfb2a0; }
.aside-card--dark .aside-card__list li { color: #cfc3ae; }
.aside-card__contact { margin-top: 22px; display: grid; gap: 10px; }
.aside-card__contact a {
  display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--color-gold-light);
  font-family: var(--font-serif); transition: color .3s var(--ease);
}
.aside-card__contact a:hover { color: #f7f2e7; }

@media (max-width: 1000px) {
  .article__grid { grid-template-columns: 1fr; }
  .article__aside { position: static; max-width: 560px; }
  .prose { max-width: none; }
}

/* ==========================================================================
   MREŽA PREDNOSTI  (ikona + naslov + opis)
   ========================================================================== */
.features { padding: clamp(90px, 10vw, 140px) 0; }
.features--soft { background: var(--color-bg-soft); }
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.feature {
  padding: 40px 36px; background: var(--color-paper); border: 1px solid var(--color-line-soft);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; z-index: 2; }
.feature__icon {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-gold); border-radius: 50%; color: var(--color-gold-deep); margin-bottom: 22px;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.feature:hover .feature__icon { background: var(--color-gold-deep); color: var(--color-paper); }
.feature h3 { font-size: 19px; margin-bottom: 10px; }
.feature p { font-size: 14px; color: var(--color-ink-soft); }
@media (max-width: 900px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   PREGLEDNICA PODATKOV  (mere, izvedbe, materiali)
   ========================================================================== */
.specs { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: 14.5px; }
.specs caption {
  text-align: left; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-gold-deep); padding-bottom: 14px; font-weight: 600;
}
.specs th, .specs td { padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--color-line-soft); }
.specs th { font-family: var(--font-sans); font-weight: 600; color: var(--color-walnut); width: 42%; }
.specs td { color: var(--color-ink-soft); }
.specs tr:hover td, .specs tr:hover th { background: var(--color-bg-soft); }
.specs__wrap { overflow-x: auto; }

/* ==========================================================================
   NAVZKRIŽNE POVEZAVE NA DNU PODSTRANI  (notranje povezovanje za Google)
   ========================================================================== */
.related { padding: clamp(80px, 9vw, 120px) 0; background: var(--color-bg-soft); }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.related-card {
  position: relative; display: block; overflow: hidden; border-radius: 8px;
  aspect-ratio: 3 / 2; box-shadow: var(--shadow-md);
}
.related-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.related-card:hover img { transform: scale(1.07); }
.related-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(23,17,12,.82));
}
.related-card__label {
  position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  color: #f7f2e7; font-family: var(--font-serif); font-size: 19px;
}
.related-card__label svg { color: var(--color-gold-light); transition: transform .4s var(--ease); flex-shrink: 0; }
.related-card:hover .related-card__label svg { transform: translateX(5px); }
@media (max-width: 860px) { .related__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ==========================================================================
   NAVEDEK  (mirna prekinitev med sekcijami)
   ========================================================================== */
.quote-band { padding: clamp(80px, 9vw, 130px) 0; background: var(--color-bg-soft-2); text-align: center; }
.quote-band blockquote {
  max-width: 820px; margin: 0 auto; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(22px, 2.8vw, 32px); line-height: 1.45; color: var(--color-walnut-deep);
}
.quote-band figcaption {
  margin-top: 26px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-gold-deep);
}
.quote-band__mark {
  display: block; margin: 0 auto 24px; font-family: var(--font-serif); font-size: 54px;
  line-height: .6; color: var(--color-gold); opacity: .45;
}

/* ==========================================================================
   KONTAKTNE KARTICE  (telefon / e-pošta / delavnica)
   ========================================================================== */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 60px; }
.contact-card {
  display: block; padding: 34px 30px; background: var(--color-paper);
  border: 1px solid var(--color-line-soft); border-radius: 8px; box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.contact-card__icon {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--color-bg-soft); color: var(--color-gold-deep); margin-bottom: 20px;
}
.contact-card__label {
  display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-ink-faint); margin-bottom: 8px;
}
.contact-card__value {
  display: block; font-family: var(--font-serif); font-size: 21px; color: var(--color-walnut-deep); line-height: 1.3;
}
.contact-card__note { display: block; margin-top: 10px; font-size: 13px; color: var(--color-ink-soft); }
@media (max-width: 860px) { .contact-cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   OBRAZEC — nadgradnja (nalaganje fotografij, stanja, uspeh)
   ========================================================================== */
.contact-hero--wide { max-width: none; }
.field__hint { display: block; margin-top: 7px; font-size: 12px; color: var(--color-ink-faint); line-height: 1.5; }

/* Polje za fotografije: kliknljivo območje, ki sprejme tudi povlečene datoteke. */
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 26px 20px; text-align: center; cursor: pointer;
  border: 1px dashed rgba(74,50,34,.28); border-radius: 5px; background: rgba(255,255,255,.5);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--color-gold); background: rgba(230,201,150,.12); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone__icon { color: var(--color-gold-deep); }
.dropzone__text { font-size: 13.5px; color: var(--color-ink-soft); }
.dropzone__text strong { color: var(--color-walnut); font-weight: 600; }
.dropzone__hint { font-size: 11.5px; color: var(--color-ink-faint); letter-spacing: .04em; }

.filelist { display: grid; gap: 7px; margin-top: 12px; }
.filelist:empty { display: none; }
.filelist li {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 12.5px;
  background: var(--color-bg-soft); border-radius: 4px; color: var(--color-walnut);
}
.filelist li svg { color: var(--color-gold-deep); flex-shrink: 0; }
.filelist__size { margin-left: auto; color: var(--color-ink-faint); font-size: 11.5px; }
.filelist li.is-bad { background: rgba(176,58,46,.07); color: #8d3229; }
.filelist li.is-bad svg { color: #b03a2e; }

/* Gumb med pošiljanjem. */
.btn.is-sending { pointer-events: none; opacity: .75; }
.btn__spinner { display: none; width: 15px; height: 15px; }
.btn.is-sending .btn__spinner { display: block; animation: spin .8s linear infinite; }
.btn.is-sending .btn__arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Zahvala, ki zamenja obrazec po uspešni oddaji. */
.form-done {
  display: none; text-align: center; padding: 40px 24px;
}
.form-done.is-visible { display: block; animation: fadeUp .6s var(--ease) both; }
.form-done__icon {
  width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-soft); color: var(--color-gold-deep); border: 1px solid var(--color-gold-pale);
}
.form-done h3 { font-size: 25px; margin-bottom: 12px; }
.form-done p { font-size: 15px; color: var(--color-ink-soft); max-width: 400px; margin: 0 auto; }
.form-done__contact { margin-top: 26px; font-size: 14px; color: var(--color-ink-soft); }
.form-done__contact a { color: var(--color-gold-deep); font-weight: 600; }

.field input.is-invalid, .field textarea.is-invalid { border-color: #b03a2e; }
.field__error { display: none; margin-top: 6px; font-size: 12px; color: #b03a2e; }
.field__error.is-visible { display: block; }

.form-status--error { color: #b03a2e; }

/* Skrito polje za robote — nikoli vidno, a tudi ne "display:none", saj to
   nekateri roboti prepoznajo in polje preskočijo. */
.hp-field {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

/* ==========================================================================
   STRAN "HVALA"
   ========================================================================== */
.thanks { min-height: 78vh; display: flex; align-items: center; padding: 180px 0 120px; }
.thanks__inner { text-align: center; max-width: 640px; margin: 0 auto; }
.thanks__mark {
  width: 78px; height: 78px; margin: 0 auto 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-gold-pale); background: var(--color-bg-soft); color: var(--color-gold-deep);
}
.thanks h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.16; }
.thanks p { margin-top: 22px; font-size: 16px; color: var(--color-ink-soft); }
.thanks__actions { margin-top: 40px; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   NAPAKA 404
   ========================================================================== */
.notfound__links { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.notfound__links a { font-size: 14px; color: var(--color-gold-deep); border-bottom: 1px solid rgba(169,121,63,.3); }
.notfound__links a:hover { color: var(--color-walnut); border-color: var(--color-walnut); }

/* ==========================================================================
   NOGA — razširjena na štiri stolpce
   ========================================================================== */
.footer__grid--4 { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
.footer__col ul li { margin-bottom: 9px; }
.footer__seo {
  margin-top: 54px; padding-top: 30px; border-top: 1px solid rgba(247,242,231,.09);
  font-size: 12.5px; line-height: 1.85; color: rgba(207,195,174,.55); max-width: 900px;
}
.footer__seo strong { color: rgba(230,201,150,.8); font-weight: 500; }
@media (max-width: 900px) { .footer__grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid--4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   DROBNI POPRAVKI ZA MANJŠE ZASLONE
   ========================================================================== */
@media (max-width: 900px) {
  .nav__panel { display: none; }          /* na dotik namesto tega deluje mobilni meni */
  .article__aside { margin-top: 20px; }
}
@media (max-width: 640px) {
  .offer-card__body { padding: 26px 24px 28px; }
  .contact-card { padding: 28px 24px; }
  .quote-band blockquote { font-size: 21px; }
  .thanks { padding: 150px 0 90px; }
}

/* Povezave v spustnem meniju niso navadne navigacijske povezave — nase ne
   smejo prevzeti velikih črk, podčrtave in prosojnosti iz .nav__links a. */
.nav__links .nav__panel-item { text-transform: none; opacity: 1; letter-spacing: 0; }
.nav__links .nav__panel-item::after { display: none !important; }
.nav__links .nav__panel-item:hover { color: inherit; opacity: 1; }
.nav.is-scrolled .nav__links .nav__panel-item:hover { color: inherit; }

/* Gumb za odstranitev posamezne priponke. */
.filelist__remove {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; margin-left: 4px; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 50%; color: var(--color-ink-faint);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.filelist__remove:hover { background: rgba(74,50,34,.1); color: var(--color-walnut); }
.filelist li.is-bad .filelist__size { color: inherit; opacity: .75; }

/* Gumb v stranski kartici je ožji od običajnega — brez tesnejšega razmika
   se napis "Pošljite povpraševanje" prelomi v dve vrstici. */
.aside-card .btn { padding-left: 18px; padding-right: 18px; font-size: 11.5px; letter-spacing: .1em; }

/* Med besedilom podstrani in naslednjim pasom je bilo preveč praznine. */
.article { padding-bottom: clamp(70px, 8vw, 110px); }

/* Atribut hidden mora skriti element tudi tam, kjer mu slog dodeli display
   (npr. .inquiry-form je flex) — sicer ostane viden, ko ga skrije JavaScript. */
[hidden] { display: none !important; }

/* Mobilni meni stoji zunaj glave (glej opombo v HTML). Ob daljšem seznamu
   se mora dati podrsati, sicer bi zadnje postavke ostale nedosegljive. */
.nav__mobile { overflow-y: auto; padding: 90px 24px 40px; }

/* Skupina "Ponudba" v mobilnem meniju: naslovi drug pod drugim in poravnani
   z ostalimi postavkami, ne v vrsti kot besedilo. */
.nav__mobile-group { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0 0 6px; }
.nav__mobile-label { margin-bottom: 2px; }
.nav__mobile-group a { display: block; padding-left: 0 !important; font-size: 20px !important; }
.nav__mobile-group + a { position: relative; margin-top: 10px; }
.nav__mobile-group + a::before {
  content: ''; position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 1px; background: rgba(230,201,150,.22);
}

/* ==========================================================================
   STRANI BREZ TEMNE GLAVE (hvala, 404)
   --------------------------------------------------------------------------
   Navigacija je na vrhu prosojna in ima svetlo besedilo, kar predpostavlja
   temno fotografijo pod njo. Kjer te ni, mora biti glava obarvana že takoj,
   sicer je meni na kremnem ozadju neberljiv.
   ========================================================================== */
body.light-header .nav {
  background: rgba(250,248,244,.98);
  box-shadow: 0 1px 0 var(--color-line), 0 14px 34px rgba(36,24,17,.07);
}
body.light-header .nav__links a { color: var(--color-ink); }
body.light-header .nav__links a:hover { color: var(--color-gold-deep); }
body.light-header .nav__links a.is-current { color: var(--color-gold-deep); }
body.light-header .nav__cta { color: #241811 !important; border-color: var(--color-gold-deep); }
body.light-header .nav__logo-img { filter: brightness(.58) saturate(1.35) contrast(1.1); }
body.light-header .nav__panel-title { color: var(--color-walnut-deep); }

/* ==========================================================================
   FOTOGRAFIJE NA PODSTRANEH
   ========================================================================== */
/* Pas fotografij pod besedilom podstrani — ožji od galerije na domači strani. */
.gallery--tight { padding: clamp(70px, 8vw, 110px) 0; background: var(--color-bg-soft); }
.gallery--tight .section-head { margin-bottom: 46px; }
.gallery--tight .gallery__grid { grid-auto-rows: 320px; }

/* Ena široka fotografija sredi tekočega besedila. */
.prose__figure { margin: 36px 0; }
.prose__figure img {
  display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow-md);
}
.prose__figure figcaption {
  margin-top: 12px; font-size: 12.5px; color: var(--color-ink-faint); line-height: 1.6;
}

/* Z dodano postavko "Domov" je vrstica menija daljša — malo tesnejši razmiki. */
@media (min-width: 901px) { .nav__links { gap: 28px; } }