/* Metal Kovanje — javni web. Tokeni: design/DIRECTION.md */

:root {
  --ink: #151719;
  --ink-2: #1b1e21;
  --steel: #24282b;
  --steel-2: #2e3337;
  --bronze: #9b7348;
  --bronze-deep: #6e4f2c;
  --gold: #c3a16b;
  --gold-hi: #d8bb88;
  --parchment: #e9e2d5;
  --paper: #f3eee5;
  --text-dark: #252321;
  --text-dark-2: #4a4540;
  --text-light: #f3eee5;
  --text-light-2: #b9b2a6;
  --line-dark: rgba(155, 115, 72, .45);
  --line-light: rgba(110, 79, 44, .28);

  --f-display: "EB Garamond", "Times New Roman", serif;
  --f-label: "Cinzel", "Times New Roman", serif;
  --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 10vw, 136px);
  --radius: 2px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text-light);
  font: 400 1rem/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--gold); color: var(--ink); padding: 10px 16px; font-weight: 600; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type ---------- */
.eyebrow {
  font: 500 .78rem/1.4 var(--f-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow--dark { color: var(--bronze-deep); }
.eyebrow--line { display: inline-flex; align-items: center; gap: 14px; }
.eyebrow--line::before {
  content: ""; width: 56px; height: 9px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) left center / 100% 1px no-repeat,
    linear-gradient(45deg, transparent 45%, currentColor 45% 55%, transparent 55%) right center / 9px 9px no-repeat;
}
.h2 {
  font: 400 clamp(2.1rem, 4.2vw, 3.5rem)/1.06 var(--f-display);
  letter-spacing: -.005em;
  text-wrap: balance;
}
.h2--xl { font-size: clamp(2.6rem, 5.6vw, 4.6rem); }
.section-lead { font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--text-dark-2); max-width: 56ch; margin-top: 18px; }
.section--ink .section-lead, .section--steel .section-lead { color: var(--text-light-2); }

.divider {
  position: relative; width: min(320px, 70%); height: 11px; margin: 26px auto 0;
  background:
    linear-gradient(var(--bronze), var(--bronze)) left center / calc(50% - 16px) 1px no-repeat,
    linear-gradient(var(--bronze), var(--bronze)) right center / calc(50% - 16px) 1px no-repeat;
}
.divider::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border: 1px solid var(--bronze); transform: translate(-50%, -50%) rotate(45deg); }
.divider--light { filter: brightness(1.25); }
.diamond { display: inline-block; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

/* ---------- Buttons & links ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--text-light); --btn-bd: var(--gold);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 14px 28px;
  font: 600 .8rem/1.2 var(--f-label);
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; text-align: center;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn::before { /* engraved inner rule */
  content: ""; position: absolute; inset: 3px; border: 1px solid currentColor; opacity: .18; pointer-events: none; border-radius: 1px;
}
.btn--gold { --btn-bg: var(--gold); --btn-fg: #1a1714; --btn-bd: var(--gold); }
.btn--gold:hover { --btn-bg: var(--gold-hi); --btn-bd: var(--gold-hi); box-shadow: 0 8px 26px -10px rgba(195, 161, 107, .55); }
.btn--ghost { --btn-fg: var(--text-light); --btn-bd: rgba(195, 161, 107, .7); }
.btn--ghost:hover { --btn-bg: rgba(195, 161, 107, .12); --btn-bd: var(--gold); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--text-light); --btn-bd: var(--ink); }
.btn--dark:hover { --btn-bg: var(--steel); --btn-bd: var(--bronze); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 .74rem/1.3 var(--f-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
}
.link-arrow::after {
  content: ""; width: 26px; height: 1px; background: currentColor;
  transition: width .3s var(--ease);
}
.link-arrow--ext::after { width: 14px; height: 14px; background: none; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: scale(.6); transform-origin: left center; }
a:hover > .link-arrow::after, a.link-arrow:hover::after { width: 40px; }
a:hover > .link-arrow--ext::after, a.link-arrow--ext:hover::after { width: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 50;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  position: fixed;
  background: rgba(21, 23, 25, .94);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line-dark);
  animation: header-in .35s var(--ease);
}
@keyframes header-in { from { transform: translateY(-100%); } to { transform: none; } }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 92px; }
.site-header.is-stuck .header-inner { min-height: 72px; }
.brand { position: relative; z-index: 2; }
.brand img { width: clamp(132px, 13vw, 168px); height: auto; }
.site-header.is-stuck .brand img { width: 128px; }

.nav-list { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.nav-list a:not(.btn) {
  font: 500 .8rem/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--text-light);
  padding: 10px 0; position: relative;
}
.nav-list a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-list a:not(.btn):hover::after, .nav-list a[aria-current]::after { transform: scaleX(1); }
.nav-list a[aria-current] { color: var(--gold); }
.nav-item-row { display: flex; align-items: center; gap: 4px; }
.sub-toggle { width: 26px; height: 26px; background: none; border: 0; cursor: pointer; position: relative; }
.sub-toggle::before {
  content: ""; position: absolute; left: 50%; top: 45%; width: 6px; height: 6px;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: translate(-50%, -50%) rotate(45deg); transition: transform .25s var(--ease);
}
.has-sub { position: relative; }
.sub-menu {
  position: absolute; top: calc(100% + 10px); left: -22px; min-width: 240px;
  list-style: none; margin: 0; padding: 12px 0;
  background: var(--ink-2); border: 1px solid var(--line-dark);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.sub-menu a:not(.btn) { display: block; padding: 11px 22px; font-size: .74rem; }
.sub-menu a:not(.btn)::after { display: none; }
.sub-menu a:hover { background: rgba(195, 161, 107, .08); color: var(--gold); }
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu, .has-sub.is-open .sub-menu { opacity: 1; visibility: visible; transform: none; }
.has-sub.is-open .sub-toggle::before { transform: translate(-50%, -20%) rotate(-135deg); }
.nav-cta-item .btn { min-height: 44px; padding: 12px 22px; }

/* Mega menu: Proizvodi */
.has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  background: #111315 var(--noise);
  border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.has-mega.is-open .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.has-mega.is-open .sub-toggle::before { transform: translate(-50%, -20%) rotate(-135deg); }
.mega-inner { display: grid; grid-template-columns: 1fr 1fr .9fr; gap: clamp(28px, 3.5vw, 56px); padding-top: 40px; padding-bottom: 44px; }
.mega-eyebrow { font: 500 .68rem/1.3 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.mega-area-head { display: flex; align-items: center; gap: 12px; text-decoration: none; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--gold); }
.mega-thumb { width: 64px; height: 78px; overflow: hidden; border-radius: 50% 50% 46% 46% / 38% 38% 18% 18%; border: 1px solid rgba(195, 161, 107, .5); }
.mega-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mega-area-head:hover .mega-thumb img { transform: scale(1.08); }
.mega-area-text { display: flex; flex-direction: column; gap: 4px; }
.mega-title { font: 500 1.7rem/1.05 var(--f-display); color: var(--text-light); }
.mega-area-head:hover .mega-title { color: var(--gold); }
.mega-lead { font-size: .8rem; line-height: 1.45; color: var(--text-light-2); }
.mega .nav-list a::after, .mega a::after { display: none; }
.mega-list { list-style: none; margin: 0; padding: 0; }
.mega-list li { border-bottom: 1px solid rgba(195, 161, 107, .2); }
.mega-head-icon { width: 30px; height: 30px; flex: none; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mega-list a, .mega-type-grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 10px; margin: 0 -10px; text-decoration: none;
  font: 500 .95rem/1.3 var(--f-body); color: var(--text-light); letter-spacing: 0; text-transform: none;
  border-radius: 2px; transition: background .2s, color .2s;
}
.mega-list a:hover, .mega-type-grid a:hover { background: rgba(195, 161, 107, .1); color: var(--gold-hi); }
.mega-count { font: 600 .68rem/1 var(--f-body); color: var(--text-light-2); padding: 4px 7px; border: 1px solid rgba(195, 161, 107, .28); border-radius: 20px; min-width: 26px; text-align: center; }
.mega-all.link-arrow::after { display: block !important; }
.mega-all { font-size: .66rem; }
.mega-type-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.mega-type-grid a { margin: 0; padding: 10px 10px; border: 1px solid rgba(195, 161, 107, .16); justify-content: flex-start; }
.mega-type-name { flex: 1; }
.mega-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mega-custom {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 24px;
  background: radial-gradient(circle at 70% 20%, rgba(195, 161, 107, .18), transparent 60%), linear-gradient(180deg, #2c261d, #1c1813);
  border: 1px solid rgba(216, 187, 136, .6);
}
.mega-custom::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(195, 161, 107, .15); pointer-events: none; }
.mega-custom .mega-eyebrow { margin-bottom: 4px; }
.mega-custom-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; border: 1px solid rgba(216, 187, 136, .6); background: radial-gradient(circle at 50% 40%, rgba(195, 161, 107, .22), rgba(195, 161, 107, .04) 70%); box-shadow: 0 0 0 6px rgba(195, 161, 107, .06); }
.mega-custom-icon svg { width: 32px; height: 32px; color: var(--gold-hi); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mega-custom-title { font: 400 1.5rem/1.15 var(--f-display); color: var(--text-light); }
.mega-custom-text { font-size: .86rem; color: var(--text-light-2); margin-bottom: 8px; }
.mega-foot { display: flex; gap: 34px; padding-top: 16px; padding-bottom: 20px; border-top: 1px solid rgba(155, 115, 72, .2); }
.mega-foot .link-arrow::after { display: block !important; }
/* override main-nav link typography inside the mega panel */
.nav-list .mega a:not(.btn) { padding: 13px 4px; margin: 0; font: 500 .95rem/1.3 var(--f-body); letter-spacing: 0; text-transform: none; background: none; }
.nav-list .mega .mega-list a:hover { color: var(--gold-hi); padding-left: 10px; }
.nav-list .mega .mega-list a { justify-content: flex-start; gap: 12px; transition: color .2s, padding .25s var(--ease); }
.nav-list .mega .mega-area-head { display: flex; padding: 0 0 14px; }
.nav-list .mega .mega-area-head { padding: 0 0 16px; }
.nav-list .mega .link-arrow { padding: 6px 0; font: 600 .68rem/1.3 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.nav-list .mega a[aria-current] { color: var(--gold); }
.menu-toggle { display: none; }

@media (max-width: 960px) {

  .header-inner { min-height: 76px; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 12px; z-index: 2;
    background: none; border: 1px solid var(--line-dark); padding: 10px 14px; cursor: pointer;
    font: 500 .72rem/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase;
  }
  .menu-toggle-lines, .menu-toggle-lines::before, .menu-toggle-lines::after {
    display: block; width: 18px; height: 1px; background: var(--gold); position: relative; transition: transform .25s var(--ease), background .25s;
  }
  .menu-toggle-lines::before, .menu-toggle-lines::after { content: ""; position: absolute; left: 0; }
  .menu-toggle-lines::before { top: -6px; }
  .menu-toggle-lines::after { top: 6px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines::before { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines::after { transform: translateY(-6px) rotate(-45deg); }

  .main-nav {
    position: fixed; inset: 0; z-index: 1;
    background: var(--ink) var(--noise);
    padding: 104px var(--gutter) 40px;
    overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
  }
  .site-header.menu-open .main-nav { opacity: 1; visibility: visible; }
  .site-header.menu-open { position: fixed; }
  .site-header.menu-open .header-inner { position: relative; z-index: 2; background: var(--ink); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid rgba(155, 115, 72, .25); }
  .nav-list a:not(.btn) { display: block; padding: 18px 0; font-size: .95rem; }
  .nav-list a:not(.btn)::after { display: none; }
  .nav-item-row { justify-content: space-between; }
  .nav-item-row a { flex: 1; }
  .sub-toggle { width: 48px; height: 48px; }
  .sub-menu {
    position: static; min-width: 0; padding: 0 0 12px 16px; border: 0; box-shadow: none; background: none;
    opacity: 1; visibility: visible; transform: none; display: none;
  }
  .has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { display: none; }
  .has-sub.is-open .sub-menu { display: block; }
  .sub-menu a:not(.btn) { padding: 12px 0; font-size: .8rem; color: var(--text-light-2); }
  .has-mega { position: relative; }
  .mega { position: static; opacity: 1; visibility: visible; transform: none; display: none; background: none; border: 0; box-shadow: none; }
  .has-mega:focus-within .mega { display: none; }
  .has-mega.is-open .mega { display: block; }
  .mega-inner { grid-template-columns: 1fr; gap: 22px; padding: 4px 0 18px; }
  .mega-inner.container, .mega-foot.container { padding-inline: 0; }
  .mega-area-head { grid-template-columns: 48px 1fr; }
  .mega-thumb { width: 48px; height: 58px; }
  .mega-title { font-size: 1.35rem; }
  .mega-lead { display: none; }
  .mega-list a { padding: 9px 10px; }
  .mega-foot { padding: 14px 0 18px; }
  .nav-list .mega a:not(.btn) { padding: 10px; font: 500 .92rem/1.3 var(--f-body); letter-spacing: 0; text-transform: none; }
  .nav-list .mega .link-arrow { font: 600 .66rem/1.3 var(--f-label) !important; letter-spacing: .16em !important; text-transform: uppercase !important; }
  .nav-list .mega .mega-area-head { display: flex; padding: 0 0 12px; }
  .nav-list .mega .mega-list a, .nav-list .mega .mega-type-grid a { display: flex; }
  .nav-list .mega .mega-list a { justify-content: space-between; }
  .nav-list .mega .mega-foot a { display: inline-flex; }
  .mega-custom { padding: 20px 18px; }
  .mega-custom-title { font-size: 1.3rem; }
  .nav-cta-item { border-bottom: 0 !important; padding-top: 28px; }
  .nav-cta-item .btn { width: 100%; min-height: 52px; }
  body.menu-locked { overflow: hidden; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding: var(--section-y) 0; }
.section--ink { background: var(--ink); color: var(--text-light); }
.section--steel { background: var(--steel); color: var(--text-light); }
.section--parchment { background: var(--parchment); color: var(--text-dark); }
.section--paper { background: var(--paper); color: var(--text-dark); }
.section--parchment::before, .section--paper::before, .section--ink::before, .section--steel::before, .hero::before {
  content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .05; pointer-events: none;
}
.section--parchment::before, .section--paper::before { opacity: .09; mix-blend-mode: multiply; }
.section > .container { position: relative; z-index: 1; }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }
.section-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }

/* Arch frame */
.arch { position: relative; border-radius: 999px 999px 0 0; }
.arch > img, .arch > .ph { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.arch::after {
  content: ""; position: absolute; inset: -9px; border: 1px solid var(--line-dark); border-radius: 999px 999px 0 0; border-bottom: 0; pointer-events: none;
}

/* Line-art ornaments (colour from currentColor through a mask) */
.section { overflow: hidden; overflow: clip; }
.art { position: absolute; z-index: 0; pointer-events: none; background: currentColor; -webkit-mask: var(--art) no-repeat center / contain; mask: var(--art) no-repeat center / contain; }
.art--castle { --art: url(/assets/img/ornaments/castle.svg); aspect-ratio: 600 / 345; }
.art--swords { --art: url(/assets/img/ornaments/swords.svg); aspect-ratio: 1; }
.art--astrolabe { --art: url(/assets/img/ornaments/astrolabe.svg); aspect-ratio: 1; }
.art--fern { --art: url(/assets/img/ornaments/fern.svg); aspect-ratio: 260 / 600; }
.art--skyline { --art: url(/assets/img/ornaments/skyline.svg); aspect-ratio: 1200 / 310; }
.section--parchment .art, .section--paper .art { color: var(--bronze); opacity: .16; }
.section--ink .art, .section--steel .art { color: var(--gold); opacity: .06; }
.art--col-castle { right: -60px; top: 40px; width: min(620px, 60vw); }
.art--col-fern { left: -50px; bottom: 60px; width: 150px; transform: rotate(-14deg); }
.art--pavel-swords { right: -80px; bottom: -60px; width: 460px; transform: rotate(-12deg); }
.art--proj-astrolabe { left: -220px; top: -120px; width: 620px; animation: spin-slow 200s linear infinite; }
.art--proj-skyline { left: 0; right: 0; bottom: 0; width: 100%; opacity: .05 !important; }
.art--custom-castle { left: -40px; bottom: -10px; width: min(700px, 70vw); }
.art--custom-fern { right: 3%; top: -40px; width: 130px; transform: scaleX(-1) rotate(-10deg); }
.art--media-swords { left: -90px; bottom: -40px; width: 380px; transform: rotate(10deg); }
.art--media-astrolabe { right: -200px; top: -160px; width: 560px; animation: spin-slow 220s linear infinite reverse; }

/* Placeholder */
.ph {
  display: grid; place-items: center; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(155, 115, 72, .1) 0 1px, transparent 1px 14px),
    var(--parchment);
  color: var(--bronze-deep);
}
.ph--dark {
  background:
    repeating-linear-gradient(135deg, rgba(195, 161, 107, .08) 0 1px, transparent 1px 14px),
    var(--steel);
  color: var(--text-light-2);
}
.ph-label { font: 500 .72rem/1.4 var(--f-label); letter-spacing: .18em; text-transform: uppercase; padding: 8px 14px; border: 1px solid currentColor; opacity: .85; }

/* ---------- Icons ---------- */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon-sprite symbol, .tab-icon, .custom-tile-icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn--sm { min-height: 42px; padding: 11px 20px; font-size: .7rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(50% 60% at 10% 100%, rgba(46, 51, 55, .9), transparent 70%),
    var(--ink);
  padding: clamp(128px, 15vw, 176px) 0 clamp(270px, 22vw, 330px);
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-photo {
  position: absolute; left: 0; top: 0; width: 64%; height: 100%; object-fit: cover; object-position: 30% 40%;
  opacity: .15; filter: saturate(.75) contrast(1.05);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .85) 30%, transparent 92%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .85) 30%, transparent 92%);
}
.hero-glow {
  position: absolute; width: 70vmax; height: 70vmax; left: 50%; top: -10%;
  background: radial-gradient(closest-side, rgba(195, 161, 107, .22), rgba(155, 115, 72, .08) 45%, transparent 75%);
  will-change: transform; animation: glow-drift 22s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  0%   { transform: translate(-10%, 0) scale(1); }
  35%  { transform: translate(8%, 12%) scale(1.12); }
  70%  { transform: translate(-22%, 22%) scale(.92); }
  100% { transform: translate(4%, -6%) scale(1.05); }
}
/* slow light beam sweeping across the scene */
.hero-beam {
  position: absolute; top: -40%; left: 30%; width: 38%; height: 180%;
  background: linear-gradient(90deg, transparent, rgba(232, 205, 150, .09) 45%, rgba(232, 205, 150, .14) 50%, rgba(232, 205, 150, .09) 55%, transparent);
  filter: blur(18px); transform: rotate(18deg); mix-blend-mode: screen;
  animation: beam-sweep 14s ease-in-out infinite;
}
@keyframes beam-sweep {
  0%, 100% { transform: translateX(-60%) rotate(18deg); opacity: .2; }
  50% { transform: translateX(120%) rotate(18deg); opacity: 1; }
}
.hero-skyline { position: absolute; left: -2%; right: -2%; bottom: 0; height: 26%; color: var(--gold); opacity: .09; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: bottom center; mask-position: bottom center; }
/* drifting gold dust */
.hero-dust i {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(232, 205, 150, .9); box-shadow: 0 0 6px 1px rgba(195, 161, 107, .6);
  opacity: 0; animation: dust-rise 16s linear infinite;
}
@keyframes dust-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .7; }
  80% { opacity: .35; }
  100% { transform: translate(var(--dx, 30px), -95vh); opacity: 0; }
}
.hero-dust i:nth-child(1) { left: 11%; animation-delay: 0.0s; animation-duration: 13s; --dx: -52px; width: 2px; height: 2px; }
.hero-dust i:nth-child(2) { left: 48%; animation-delay: -2.3s; animation-duration: 20s; --dx: -26px; width: 3px; height: 3px; }
.hero-dust i:nth-child(3) { left: 85%; animation-delay: -4.6s; animation-duration: 18s; --dx: 0px; width: 4px; height: 4px; }
.hero-dust i:nth-child(4) { left: 22%; animation-delay: -6.9s; animation-duration: 16s; --dx: 26px; width: 2px; height: 2px; }
.hero-dust i:nth-child(5) { left: 59%; animation-delay: -9.2s; animation-duration: 14s; --dx: 52px; width: 3px; height: 3px; }
.hero-dust i:nth-child(6) { left: 96%; animation-delay: -11.5s; animation-duration: 21s; --dx: -52px; width: 4px; height: 4px; }
.hero-dust i:nth-child(7) { left: 33%; animation-delay: -13.8s; animation-duration: 19s; --dx: -26px; width: 2px; height: 2px; }
.hero-dust i:nth-child(8) { left: 70%; animation-delay: -0.1s; animation-duration: 17s; --dx: 0px; width: 3px; height: 3px; }
.hero-dust i:nth-child(9) { left: 7%; animation-delay: -2.4s; animation-duration: 15s; --dx: 26px; width: 4px; height: 4px; }
.hero-dust i:nth-child(10) { left: 44%; animation-delay: -4.7s; animation-duration: 13s; --dx: 52px; width: 2px; height: 2px; }
.hero-dust i:nth-child(11) { left: 81%; animation-delay: -7.0s; animation-duration: 20s; --dx: -52px; width: 3px; height: 3px; }
.hero-dust i:nth-child(12) { left: 18%; animation-delay: -9.3s; animation-duration: 18s; --dx: -26px; width: 4px; height: 4px; }
.hero-dust i:nth-child(13) { left: 55%; animation-delay: -11.6s; animation-duration: 16s; --dx: 0px; width: 2px; height: 2px; }
.hero-dust i:nth-child(14) { left: 92%; animation-delay: -13.9s; animation-duration: 14s; --dx: 26px; width: 3px; height: 3px; }
.hero-dust i:nth-child(15) { left: 29%; animation-delay: -0.2s; animation-duration: 21s; --dx: 52px; width: 4px; height: 4px; }
.hero-dust i:nth-child(16) { left: 66%; animation-delay: -2.5s; animation-duration: 19s; --dx: -52px; width: 2px; height: 2px; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-title {
  font: 400 clamp(2.5rem, 5.1vw, 4.7rem)/1.05 var(--f-display);
  letter-spacing: -.012em; text-wrap: balance;
  margin-bottom: 28px;
}
.hero-lead { font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--text-light-2); max-width: 52ch; margin-bottom: 38px; }
.hero-trust {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  font: 500 .78rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--text-light-2);
}
.hero-art { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 680px; justify-self: end; }
.hero-art > * { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.hero-astrolabe { position: absolute; left: 50%; top: 46%; width: 128%; aspect-ratio: 1; translate: -50% -50%; color: var(--gold); opacity: .1; }
.hero-astrolabe::before { content: none; }
.hero-astrolabe { animation: spin-slow 140s linear infinite; }
@keyframes spin-slow { to { rotate: 360deg; } }
.hero-rings { position: absolute; left: 50%; top: 46%; width: 104%; height: auto; translate: -50% -50%; overflow: visible; }
.hero-rings .ring { fill: none; stroke: rgba(195, 161, 107, .28); stroke-width: 1; }
.hero-rings .dot { fill: var(--gold); filter: drop-shadow(0 0 4px rgba(232, 205, 150, .9)); }
.hero-rings .dot--dim { fill: var(--bronze); }
.orbit { transform-box: view-box; transform-origin: 300px 300px; animation: orbit 48s linear infinite; }
.orbit--inner { animation-duration: 34s; animation-direction: reverse; }
@keyframes orbit { to { transform: rotate(360deg); } }
.hero-main { position: absolute; left: 50%; top: 0; width: 60%; aspect-ratio: 3 / 4.15; margin: 0 0 0 -30%; z-index: 1; }
.hero-main::before { /* outer arch frame */
  content: ""; position: absolute; inset: -16px; border: 1px solid rgba(195, 161, 107, .55); border-bottom: 0;
  border-radius: 999px 999px 0 0; pointer-events: none;
}
.hero-main::after { /* gold dot on the frame top */
  content: ""; position: absolute; left: 50%; top: -21px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 12px 3px rgba(232, 205, 150, .55);
}
.hero-main-inner {
  position: absolute; inset: 0; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--ink);
  border: 5px solid var(--ink);
  box-shadow: 0 0 0 1px rgba(195, 161, 107, .7), 0 50px 90px -30px rgba(0, 0, 0, .85);
}
.hero-main-inner img { width: 100%; height: 100%; object-fit: cover; animation: ken-burns 26s ease-in-out infinite alternate; }
@keyframes ken-burns { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, 1%); } }
.medal { position: absolute; bottom: 2%; width: 40%; aspect-ratio: 1; margin: 0; z-index: 2; border-radius: 50%; overflow: hidden;
  border: 5px solid var(--ink); box-shadow: 0 0 0 1px rgba(195, 161, 107, .6), 0 0 0 12px rgba(21, 23, 25, .65), 0 0 0 13px rgba(195, 161, 107, .3), 0 34px 60px -20px rgba(0, 0, 0, .9); }
.medal img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.medal--left { left: -4%; }
.medal--right { right: -3%; bottom: 7%; width: 37%; aspect-ratio: 1 / 1.32; border-radius: 50% / 50%; }
.medal--right img { object-position: 50% 28%; }

/* entrance */
.js .hero-copy > * { opacity: 0; transform: translateY(18px); animation: rise-in .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.js .hero-copy > :nth-child(2) { animation-delay: .12s; }
.js .hero-copy > :nth-child(3) { animation-delay: .24s; }
.js .hero-copy > :nth-child(4) { animation-delay: .36s; }
.js .hero-copy > :nth-child(5) { animation-delay: .48s; }
@keyframes rise-in { to { opacity: 1; transform: none; } }
.js .hero-main-inner { clip-path: inset(100% 0 0 0); animation: arch-reveal 1.4s .2s cubic-bezier(.7, 0, .2, 1) forwards; }
.js .hero-main::before, .js .hero-main::after { opacity: 0; animation: fade-in 1.2s 1.2s ease forwards; }
@keyframes arch-reveal { to { clip-path: inset(0 0 0 0); } }
.js .medal { opacity: 0; scale: .6; animation: medal-in 1s cubic-bezier(.2, 1.3, .3, 1) forwards; }
.js .medal--left { animation-delay: .9s; }
.js .medal--right { animation-delay: 1.1s; }
@keyframes medal-in { to { opacity: 1; scale: 1; } }
.js .hero-rings, .js .hero-astrolabe { opacity: 0; animation: fade-in 2s .4s ease forwards, spin-slow 140s linear infinite; }
.js .hero-rings { animation: fade-in 2s .4s ease forwards; }
.js .hero-astrolabe { animation: fade-in-astro 2.4s .3s ease forwards, spin-slow 140s linear infinite; }
@keyframes fade-in { to { opacity: 1; } }
@keyframes fade-in-astro { to { opacity: .1; } }

/* ---------- Category cards (arch style, overlap hero) ---------- */
.cat-strip { position: relative; z-index: 3; margin-top: clamp(-260px, -16vw, -150px); background: linear-gradient(transparent 58%, var(--paper) 58%); }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 26px); }
.cat-box {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  padding: 12px 12px 30px;
  background: linear-gradient(180deg, rgba(27, 30, 33, .96), #17191b);
  border: 1px solid rgba(195, 161, 107, .55);
  border-radius: 50% 50% 0 0 / 120px 120px 0 0;
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .85);
  color: var(--text-light);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.cat-box::before { /* gold dot on the arch top */
  content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px 2px rgba(232, 205, 150, .55);
}
.cat-box:hover { transform: translateY(-6px); border-color: var(--gold); }
.cat-media {
  display: block; width: 100%; aspect-ratio: 3 / 3.3; overflow: hidden;
  border-radius: 50% 50% 46% 46% / 38% 38% 18% 18%;
  border: 1px solid rgba(195, 161, 107, .35); background: var(--ink);
}
.cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.cat-box:hover .cat-media img { transform: scale(1.07); }
.cat-title { font: 500 1.38rem/1.18 var(--f-display); min-height: 2.36em; display: grid; place-items: center; padding: 0 8px; }
.cat-media--mystery { position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #2e271d, #121314 72%); }
.mystery-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(232, 205, 150, .18), transparent 50%); animation: mystery-pulse 4.5s ease-in-out infinite; }
@keyframes mystery-pulse { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
.mystery-rings { position: absolute; left: 50%; top: 50%; width: 92%; translate: -50% -50%; overflow: visible; }
.mystery-rings .ring { fill: none; stroke: rgba(195, 161, 107, .22); stroke-width: .5; }
.mystery-rings .dot { fill: var(--gold-hi); filter: drop-shadow(0 0 3px rgba(232, 205, 150, .9)); }
.orbit-s { transform-box: view-box; transform-origin: 100px 100px; animation: orbit 9s linear infinite; }
.orbit-s--rev { animation-duration: 13s; animation-direction: reverse; }
.mystery-emblem { position: absolute; left: 50%; top: 50%; height: 78%; translate: -50% -52%; overflow: visible; opacity: .8; filter: drop-shadow(0 0 14px rgba(195, 161, 107, .35)); }
.mystery-emblem path { transform-box: view-box; }
.em-left { animation: em-left 6s ease-in-out infinite; }
.em-right { animation: em-right 6s ease-in-out infinite; }
.em-sword { animation: em-sword 6s ease-in-out infinite; }
@keyframes em-left { 0%, 100% { transform: translateX(-70px); } 45%, 60% { transform: none; } }
@keyframes em-right { 0%, 100% { transform: translateX(70px); } 45%, 60% { transform: none; } }
@keyframes em-sword { 0%, 100% { transform: translateY(-160px); } 45%, 60% { transform: none; } }
.mystery-q {
  position: relative; font: 400 clamp(4.2rem, 6.6vw, 6.2rem)/1 var(--f-display); color: var(--gold-hi);
  text-shadow: 0 0 22px rgba(232, 205, 150, .55), 0 0 2px rgba(255, 240, 210, .8);
  animation: q-float 4.5s ease-in-out infinite;
}
@keyframes q-float { 0%, 100% { transform: translateY(4px) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.cat-box:hover .mystery-q { color: #f3dfb4; }
.cat-box--accent { border-color: rgba(216, 187, 136, .8); background: linear-gradient(180deg, #2c261d, #1c1813); }

/* ---------- Collection / product cards ---------- */
.collection { padding-top: clamp(64px, 8vw, 104px); }
.tabs { display: inline-flex; gap: 6px; padding: 6px; background: rgba(37, 35, 33, .06); border: 1px solid var(--line-light); }
.tab {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid transparent; cursor: pointer; padding: 13px 20px;
  font: 600 .82rem/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dark);
  transition: color .2s, background .2s, border-color .2s;
}
.tab-icon { width: 22px; height: 22px; color: var(--bronze-deep); flex: none; }
.tab:hover { background: rgba(155, 115, 72, .12); border-color: var(--line-light); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--gold-hi); border-color: var(--ink); box-shadow: 0 10px 22px -12px rgba(21, 23, 25, .7); }
.tab[aria-selected="true"] .tab-icon { color: var(--gold); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); min-height: 240px; }
.grid-status { grid-column: 1 / -1; color: var(--text-dark-2); align-self: center; text-align: center; }
.product-card { position: relative; display: flex; flex-direction: column; }
.product-card a.pc-link-wrap { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.pc-media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: radial-gradient(80% 70% at 50% 40%, #2a2e32, #17191b);
  border: 1px solid rgba(37, 35, 33, .12);
}
.pc-media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform .7s var(--ease); }
.product-card:hover .pc-media img { transform: scale(1.035); }
.pc-media .ph { width: 100%; height: 100%; }
.pc-tag {
  position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px);
  font: 600 .62rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 8px; background: rgba(21, 23, 25, .82); color: var(--gold); border: 1px solid rgba(195, 161, 107, .4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-available {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px;
  font: 600 .7rem/1 var(--f-body); letter-spacing: .06em;
  padding: 7px 10px; background: rgba(243, 238, 229, .94); color: #2f5a2b;
}
.pc-available::before { content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
.pc-body { display: flex; flex-direction: column; flex: 1; padding: 16px 2px 0; }
.pc-cat { font: 500 .68rem/1.3 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 6px; }
.pc-title { font: 500 1.32rem/1.15 var(--f-display); margin: 0 0 12px; }
.pc-more { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-light); color: var(--text-dark); font-size: .64rem; }
.pc-more::after { width: 16px; }
.product-card:hover .pc-more::after { width: 28px; }

.custom-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--ink) var(--noise); color: var(--text-light);
  border: 1px solid rgba(195, 161, 107, .45); position: relative;
}
.custom-tile::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(195, 161, 107, .15); pointer-events: none; }
.custom-tile-icon { width: 42px; height: 42px; color: var(--gold); }
.custom-tile-eyebrow { font: 500 .66rem/1.3 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
.custom-tile-title { font: 400 1.6rem/1.12 var(--f-display); }
.custom-tile-text { font-size: .9rem; color: var(--text-light-2); margin-bottom: auto; padding-bottom: 10px; }

.status { display: inline-flex; align-items: center; gap: 7px; font: 600 .74rem/1.2 var(--f-body); color: var(--text-dark-2); }
.status::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; flex: none; }
.status--available { color: #3f6a3a; }
.status--made_to_order { color: var(--bronze-deep); }
.status--previous_work { color: #5a5550; }
.status--unavailable { color: #8a3a2e; }

.collection-foot { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- Pavel ---------- */
.pavel { overflow: hidden; }
.pavel-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.arch--portrait { aspect-ratio: 3 / 4.5; max-width: 470px; width: 100%; justify-self: center; }
.arch--portrait > img { object-position: 50% 12%; }
.pavel-media { display: flex; flex-direction: column; align-items: center; width: 100%; }
.pavel-quote {
  position: relative; z-index: 2; width: min(80%, 352px); margin: -130px 0 0 24%; padding: 22px 22px 19px 50px;
  background: rgba(21, 23, 25, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(195, 161, 107, .45); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9);
}
.pavel-quote::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(195, 161, 107, .14); pointer-events: none; }
.pavel-quote::before { content: "\201E"; position: absolute; left: 14px; top: 2px; font: 400 3.7rem/1 var(--f-display); color: var(--gold); }
.pavel-quote p { font: italic 400 clamp(.95rem, 1.2vw, 1.1rem)/1.4 var(--f-display); color: var(--text-light); }
.pavel-quote footer { margin-top: 11px; font: 500 .58rem/1.4 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--text-light-2); }
.pavel-quote cite { font-style: normal; }
.pavel-quote a { color: var(--gold); text-underline-offset: 4px; }
.pavel-text { font-size: clamp(1.02rem, 1.25vw, 1.15rem); color: var(--text-light-2); max-width: 54ch; margin: 26px 0 32px; }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin-bottom: 36px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.facts div { padding: 18px 28px 18px 0; }
.facts div + div { padding-left: 28px; border-left: 1px solid var(--line-dark); }
.facts dt { font: 500 .66rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.facts dd { margin: 0; font: 400 1.35rem/1.1 var(--f-display); }

/* ---------- References (inside Pavel) ---------- */
.pavel-refs { margin: 0 0 30px; padding: 22px 0 4px; border-top: 1px solid var(--line-dark); }
.refs-title { font: 500 .7rem/1.5 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.logo-row { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.logo-row li { display: grid; place-items: center; min-height: 72px; padding: 4px 14px; }
.logo-row li:first-child { padding-left: 0; justify-items: start; }
.logo-row li + li { border-left: 1px solid rgba(155, 115, 72, .3); }
.logo-row img { width: auto; height: auto; max-height: 44px; max-width: 100%; opacity: .92; }
.logo-row .logo-hnk { max-height: 60px; }
.pavel-text { margin-bottom: 30px !important; }

/* ---------- Projects ---------- */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.project-card { display: flex; flex-direction: column; height: 100%; background: var(--ink-2); border: 1px solid rgba(155, 115, 72, .28); }
.project-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.project-media img { width: 100%; height: 100%; object-fit: cover; }
.project-body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 30px; }
.project-type { font: 500 .68rem/1.3 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.project-title { font: 500 1.7rem/1.1 var(--f-display); margin-bottom: 10px; }
.project-text { color: var(--text-light-2); font-size: .95rem; }

/* ---------- Custom order ---------- */
.custom-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.steps { list-style: none; padding: 0; margin: 40px 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-light); }
.steps li { display: flex; flex-direction: column; padding: 22px 20px 0 0; }
.steps li + li { padding-left: 20px; border-left: 1px solid var(--line-light); }
.step-num { font: 400 1.9rem/1 var(--f-display); color: var(--bronze); margin-bottom: 12px; }
.step-title { font: 500 1.18rem/1.2 var(--f-display); margin-bottom: 6px; }
.step-text { font-size: .88rem; color: var(--text-dark-2); }
.custom-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1 / 1.05; position: relative; }
.custom-collage::before, .custom-collage::after { content: ""; position: absolute; width: 46px; height: 46px; border-color: var(--bronze); border-style: solid; pointer-events: none; }
.custom-collage::before { left: -12px; top: -12px; border-width: 1px 0 0 1px; }
.custom-collage::after { right: -12px; bottom: -12px; border-width: 0 1px 1px 0; }
.collage-item { position: relative; overflow: hidden; margin: 0; background: var(--ink); box-shadow: 0 30px 60px -36px rgba(37, 35, 33, .7); }
.collage-item img, .collage-item .ph { width: 100%; height: 100%; object-fit: cover; }
.collage-item--tall { grid-row: 1 / 3; border-radius: 999px 999px 0 0; }
.collage-item--tall img { object-position: 50% 20%; }
.collage-item figcaption { position: absolute; left: 10px; bottom: 10px; font: 600 .62rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; background: rgba(21, 23, 25, .8); color: var(--gold); }

/* ---------- Media ---------- */
.media-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.media-col-title { font: 500 .78rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line-dark); }
.article-card { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(155, 115, 72, .2); text-decoration: none; color: inherit; }
.article-logo { display: grid; place-items: center; height: 76px; padding: 12px; background: var(--paper); border: 1px solid rgba(195, 161, 107, .4); }
.article-logo img { max-width: 100%; max-height: 52px; width: auto; height: auto; }
.article-text { display: flex; flex-direction: column; gap: 8px; }
.article-date { font: 600 .66rem/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-light-2); }
.article-title { font: 400 1.4rem/1.2 var(--f-display); transition: color .2s; }
.article-card:hover .article-title { color: var(--gold); }
.video-list { display: grid; gap: 20px; padding-top: 16px; }
.video-card { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; }
.video-thumb { position: relative; display: block; padding: 0; border: 1px solid rgba(155, 115, 72, .35); background: #000; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .3s, transform .6s var(--ease); }
.video-thumb:hover img { opacity: 1; transform: scale(1.04); }
.play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(21, 23, 25, .78); border: 1px solid var(--gold); }
.play::after { content: ""; position: absolute; left: 53%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--gold); }
.video-meta { display: flex; flex-direction: column; gap: 6px; }
.video-title { font: 400 1.25rem/1.2 var(--f-display); }
.center-cta { display: flex; justify-content: center; margin-top: clamp(44px, 5vw, 64px); }

.video-modal { width: min(960px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-dark); background: var(--ink); color: var(--text-light); }
.video-modal::backdrop { background: rgba(8, 9, 10, .82); }
.video-modal-inner { padding: 16px; }
.video-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.video-modal-title { font: 400 1.3rem/1.2 var(--f-display); }
.icon-btn { width: 44px; height: 44px; flex: none; background: none; border: 1px solid var(--line-dark); color: var(--text-light); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }
.video-frame { aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal-foot { margin-top: 12px; }

/* ---------- Product detail page ---------- */
.pd-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(50% 60% at 10% 100%, rgba(46, 51, 55, .9), transparent 70%), var(--ink);
  padding: clamp(118px, 13vw, 156px) 0 clamp(72px, 8vw, 112px);
}
.pd-hero > .container { position: relative; z-index: 1; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; list-style: none; margin: 0 0 clamp(28px, 4vw, 52px); padding: 0;
  font: 500 .68rem/1.4 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-light-2); }
.breadcrumb li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 10px; vertical-align: middle; background: var(--bronze); transform: rotate(45deg); }
.breadcrumb a { text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current="page"] { color: var(--gold); }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.pd-grid--solo { grid-template-columns: minmax(0, 820px); }
.pd-stage { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1.04; margin: 0 auto; }
.pd-astro { position: absolute; left: 50%; top: 48%; width: 122%; aspect-ratio: 1; translate: -50% -50%; color: var(--gold); opacity: .1; animation: spin-slow 140s linear infinite; }
.pd-rings { top: 48%; }
.pd-main { top: 2%; width: 66%; margin-left: -33%; }
.pd-zoom { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pd-zoom img { width: 100%; height: 100%; object-fit: cover; }
.pd-zoom-hint { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; padding: 7px 14px; background: rgba(17, 19, 21, .85); border: 1px solid rgba(195, 161, 107, .5);
  font: 600 .62rem/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); opacity: 0; transition: opacity .25s; }
.pd-zoom:hover .pd-zoom-hint, .pd-zoom:focus-visible .pd-zoom-hint { opacity: 1; }
.pd-thumbs { display: flex; justify-content: center; gap: 12px; list-style: none; margin: 26px 0 0; padding: 0; }
.pd-thumb { width: 70px; height: 86px; padding: 0; overflow: hidden; cursor: pointer; background: var(--ink); opacity: .55;
  border: 1px solid rgba(195, 161, 107, .35); border-radius: 50% 50% 46% 46% / 38% 38% 18% 18%; transition: opacity .2s, border-color .2s; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover, .pd-thumb[aria-current="true"] { opacity: 1; border-color: var(--gold); }
.pd-title { font: 400 clamp(2.6rem, 5vw, 4.4rem)/1.04 var(--f-display); letter-spacing: -.01em; text-wrap: balance; margin: 2px 0 20px; }
.pd-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.pd-status { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid currentColor; font: 600 .74rem/1 var(--f-body); letter-spacing: .05em; }
.pd-status::before { content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
.pd-status--available { color: #a9d79a; }
.pd-status--made_to_order { color: var(--gold); }
.pd-status--previous_work { color: #cfc8bc; }
.pd-status--unavailable { color: #e7a294; }
.pd-tag { display: inline-flex; align-items: center; padding: 8px 12px; background: rgba(195, 161, 107, .12); border: 1px solid rgba(195, 161, 107, .35);
  font: 600 .66rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.pd-lead { font-size: clamp(1.05rem, 1.3vw, 1.18rem); color: var(--text-light-2); max-width: 52ch; margin-bottom: 34px; }
ul.pd-assure { list-style: none; margin: 40px 0 0; padding: 34px 0 0; border-top: 1px solid var(--line-dark); display: grid; gap: 14px; }
.pd-assure li { display: flex; align-items: center; gap: 14px; font-size: .92rem; color: var(--text-light-2); }
.pd-assure svg { width: 24px; height: 24px; flex: none; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.pd-details-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.pd-details-grid--single { grid-template-columns: minmax(0, 780px); }
.pd-desc-text p { color: var(--text-light-2); font-size: 1.06rem; line-height: 1.8; margin-top: 18px; max-width: 64ch; }
.pd-desc-text p:first-child::first-letter { float: left; font: 400 4.2rem/.82 var(--f-display); color: var(--gold); margin: 8px 12px 0 0; }
.pd-specs { position: relative; padding: 36px 32px 28px; background: var(--ink); border: 1px solid rgba(195, 161, 107, .45); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.pd-specs::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(195, 161, 107, .14); pointer-events: none; }
.pd-specs::after { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px 2px rgba(232, 205, 150, .55); }
.pd-specs-title { font: 500 .74rem/1.3 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 18px; }
.pd-specs dl { margin: 0; }
.pd-specs dl div { padding: 16px 0; border-top: 1px solid rgba(195, 161, 107, .2); }
.pd-specs dt { font: 500 .64rem/1.3 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--text-light-2); margin-bottom: 6px; }
.pd-specs dd { margin: 0; font: 400 1.2rem/1.3 var(--f-display); color: var(--text-light); }
.art--pd-swords { right: -100px; top: 30px; width: 420px; transform: rotate(-10deg); }

.pd-order { border-top: 1px solid rgba(155, 115, 72, .18); }
.pd-order-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.pd-order-copy .section-lead { margin-bottom: 30px; }
.pd-order-item { display: flex; align-items: center; gap: 18px; padding: 16px; border: 1px solid rgba(195, 161, 107, .3); background: rgba(27, 30, 33, .7); max-width: 420px; }
.pd-order-item img { width: 70px; height: 86px; object-fit: cover; flex: none; border-radius: 50% 50% 46% 46% / 38% 38% 18% 18%; border: 1px solid rgba(195, 161, 107, .45); }
.pd-order-item div { display: flex; flex-direction: column; gap: 4px; }
.pd-order-label { font: 500 .62rem/1.3 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.pd-order-item strong { font: 500 1.3rem/1.2 var(--f-display); color: var(--text-light); }
.pd-order-id { font-size: .76rem; color: var(--text-light-2); }
.art--pd-astro { left: -240px; bottom: -220px; width: 620px; animation: spin-slow 220s linear infinite; }
.pd-form { position: relative; padding: clamp(24px, 3vw, 38px); background: rgba(27, 30, 33, .85); border: 1px solid rgba(195, 161, 107, .42); }
.pd-form::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(195, 161, 107, .12); pointer-events: none; }
.field { position: relative; margin-bottom: 18px; }
.field label { display: block; margin-bottom: 8px; font: 500 .68rem/1.3 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.field input, .field textarea {
  width: 100%; padding: 14px 16px; background: #0f1112; color: var(--text-light);
  border: 1px solid rgba(195, 161, 107, .3); border-radius: 0; font: 400 1rem/1.5 var(--f-body);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: #6f6a62; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(195, 161, 107, .18); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #e7a294; }
.field-error { min-height: 0; margin-top: 6px; font-size: .8rem; color: #e7a294; }
.field-error:empty { display: none; }
.pd-submit { width: 100%; margin-top: 6px; }
.form-notice { position: relative; margin-top: 18px; padding: 16px 18px; border: 1px dashed rgba(195, 161, 107, .6); color: var(--text-light-2); font-size: .92rem; }
.form-notice strong { color: var(--text-light); }
.form-notice .btn { margin-top: 12px; }

.pd-related { padding-top: 0; }
.pd-related .section-head { padding-top: var(--section-y); border-top: 1px solid rgba(155, 115, 72, .18); }
.product-grid--dark .pc-cat { color: var(--gold); }
.product-grid--dark .pc-title { color: var(--text-light); }
.product-grid--dark .pc-more { color: var(--text-light); border-top-color: var(--line-dark); }
.product-grid--dark .pc-media { border-color: rgba(195, 161, 107, .22); }
.product-grid--dark .custom-tile { background: linear-gradient(180deg, #2c261d, #1c1813); }

.lightbox { width: fit-content; height: fit-content; max-width: 94vw; max-height: 92vh; padding: 0; border: 1px solid rgba(195, 161, 107, .5); background: #0b0c0d; overflow: visible; }
.lightbox::backdrop { background: rgba(8, 9, 10, .9); }
.lightbox img { display: block; height: min(88vh, 1400px); width: auto; max-width: 94vw; object-fit: contain; }
.lightbox-close { position: absolute; top: 10px; right: 10px; background: rgba(17, 19, 21, .85); }

.pd-sticky { display: none; }

.order-modal { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid rgba(195, 161, 107, .5); background: #141618 var(--noise); color: var(--text-light); overflow: auto; }
.order-modal::backdrop { background: rgba(8, 9, 10, .82); backdrop-filter: blur(3px); }
.order-modal[open] { animation: modal-in .35s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.order-modal-inner { position: relative; padding: clamp(24px, 4vw, 40px); }
.order-modal-inner::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(195, 161, 107, .12); pointer-events: none; }
.order-close { position: absolute; top: 14px; right: 14px; z-index: 1; }
.order-title { font: 400 clamp(2rem, 4vw, 2.6rem)/1.05 var(--f-display); margin: 0 0 22px; }
.order-modal .pd-order-item { max-width: none; margin-bottom: 24px; }
.order-modal .pd-form { padding: 0; background: none; border: 0; }
.order-modal .pd-form::before { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-notice--ok { border-style: solid; border-color: rgba(169, 215, 154, .6); color: #cfe9c6; }
.form-notice--error { border-style: solid; border-color: rgba(231, 162, 148, .6); color: #f1c5bb; }

.admin-preview-bar { position: fixed; left: 50%; bottom: 18px; z-index: 60; translate: -50% 0; max-width: calc(100vw - 32px); padding: 12px 18px;
  background: #3a2a14; border: 1px solid var(--gold); color: var(--text-light); font-size: .88rem; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); }
.admin-preview-bar a { color: var(--gold-hi); margin-left: 8px; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; isolation: isolate; background: #0f1112; color: var(--text-light-2); }
.footer-bg { position: absolute; inset: 0 0 auto 0; z-index: -2; width: 100%; height: min(100%, 980px); object-fit: cover; object-position: 50% 30%; opacity: .3; filter: grayscale(.4) contrast(1.1); }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 22%, rgba(15, 17, 18, .1), rgba(15, 17, 18, .75) 80%),
    linear-gradient(180deg, rgba(21, 23, 25, .55) 0%, rgba(15, 17, 18, .55) 35%, rgba(15, 17, 18, .92) 62%, #0f1112 82%); }
.footer-cta { text-align: center; color: var(--text-light); padding: clamp(96px, 12vw, 160px) 0 clamp(72px, 9vw, 120px); }
.footer-cta .divider { margin: 0 auto 30px; }
.footer-cta .section-lead { margin: 20px auto 38px; color: var(--text-light-2); }
.footer-grid, .footer-legal { position: relative; }
.footer-grid { padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(155, 115, 72, .22); display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 48px; }
.footer-brand img { width: 190px; margin-bottom: 22px; }
.footer-brand p { max-width: 36ch; font-size: .92rem; }
.footer-title { font: 500 .72rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .92rem; }
.footer-col a { text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--gold); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 22px; border-top: 1px solid rgba(155, 115, 72, .2); font-size: .78rem; color: #8c867c; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-strip { background: linear-gradient(transparent 22%, var(--paper) 22%); }
  .media-cols { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .pd-grid, .pd-details-grid, .pd-order-grid { grid-template-columns: 1fr; }
  .pd-gallery { order: -1; }
  .hero-grid, .pavel-grid, .custom-grid { grid-template-columns: 1fr; }
  .hero-art { justify-self: center; max-width: 520px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: 1fr; }
  .project-card { display: grid; grid-template-columns: 42% 1fr; }
  .project-media { aspect-ratio: auto; height: 100%; min-height: 200px; }
  .custom-collage { max-width: 520px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 112px; }
  .hero-rings { width: 108%; }
  .medal { width: 42%; }
  .medal--left { left: -2%; } .medal--right { right: -2%; width: 38%; }
  .art--col-castle, .art--custom-castle { width: 120vw; opacity: .1 !important; }
  .art--pavel-swords, .art--media-swords { width: 260px; }
  .hero-dust i:nth-child(n+9) { display: none; }
  .cat-box { padding: 8px 8px 20px; gap: 12px; border-radius: 50% 50% 0 0 / 70px 70px 0 0; }
  .cat-title { font-size: 1.1rem; }
  .hero-photo { width: 100%; height: 60%; opacity: .22; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
  .cat-grid { gap: 10px; }
  .cat-title { font-size: 1.12rem; }
  .cat-box .btn { width: 100%; padding-inline: 10px; }
  .logo-row { grid-template-columns: repeat(2, 1fr); }
  .logo-row li { border-left: 0 !important; border-bottom: 1px solid rgba(155, 115, 72, .2); min-height: 92px; }
  .logo-row li:nth-child(odd) { border-right: 1px solid rgba(155, 115, 72, .2) !important; }
  .logo-row li:nth-last-child(-n+2) { border-bottom: 0; }
  .logo-row img { max-height: 40px; }
  .logo-row li:first-child { justify-items: center; padding-left: 14px; }
  .product-grid { gap: 14px; }
  .product-grid > .product-card:nth-child(n+5) { display: none; }
  .product-grid > .custom-tile { grid-column: span 2; }
  .pc-title { font-size: 1.12rem; }
  .tabs { display: flex; width: 100%; flex-wrap: nowrap; padding: 4px; gap: 4px; }
  .tab { flex: 1; justify-content: center; padding: 12px 4px; gap: 6px; font-size: .68rem; letter-spacing: .08em; }
  .tab-icon { width: 17px; height: 17px; }
  .project-card { grid-template-columns: 1fr; }
  .project-media { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .facts { grid-template-columns: 1fr 1fr 1fr; }
  .facts div { padding-right: 12px; }
  .facts div + div { padding-left: 12px; }
  .facts dd { font-size: 1.05rem; }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line-light); flex-direction: row; flex-wrap: wrap; column-gap: 14px; }
  .step-num { margin: 0; width: 34px; }
  .step-text { flex-basis: 100%; padding-left: 48px; }
  .custom-collage { gap: 10px; }
  .article-card { grid-template-columns: 84px 1fr; gap: 14px; }
  .article-logo { height: 60px; padding: 8px; }
  .article-title { font-size: 1.2rem; }
  .video-card { grid-template-columns: 1fr; gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .btn-row .btn { flex: 1 1 100%; }
  .collection-foot .btn { width: 100%; }
  .arch::after { inset: -6px; }
  .pavel-quote { margin: -80px 0 0 14%; width: 82%; padding: 18px 14px 16px 40px; }
  .pd-main { width: 74%; margin-left: -37%; }
  .pd-thumb { width: 56px; height: 70px; }
  .field-row { grid-template-columns: 1fr; }
  .product-grid--dark > .product-card:nth-child(3) { display: none; }
  .pd-specs { padding: 30px 22px 22px; }
  .art--pd-swords { width: 260px; right: -80px; }
  .pd-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(17, 19, 21, .96); border-top: 1px solid var(--line-dark);
    transform: translateY(110%); transition: transform .3s var(--ease);
  }
  .pd-sticky.is-visible { transform: none; }
  .pd-sticky-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 1.05rem/1.2 var(--f-display); color: var(--text-light); }
  .page-product .site-footer { padding-bottom: 70px; }
  .pavel-quote::before { left: 10px; font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-astro, .em-left, .em-right, .em-sword, .mystery-glow, .orbit-s, .mystery-q, .hero-glow, .orbit, .hero-beam, .hero-dust, .hero-astrolabe, .art, .hero-main-inner img { animation: none !important; }
  .hero-dust { display: none; }
  .js .hero-copy > *, .js .medal, .js .hero-rings, .js .hero-astrolabe { opacity: 1; transform: none; scale: 1; }
  .js .hero-astrolabe { opacity: .1; }
  .js .hero-main-inner { clip-path: none; }
  .js .hero-main::before, .js .hero-main::after { opacity: 1; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Admin bar (logged-in admin only) ---------- */
.admin-bar { position: fixed; top: 112px; right: 0; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.admin-bar a {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 12px;
  background: rgba(17, 19, 21, .94); border: 1px solid rgba(195, 161, 107, .55); border-right: 0;
  color: var(--text-light); text-decoration: none; font: 600 .64rem/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8); transition: background .2s, color .2s, padding .2s;
}
.admin-bar a:hover { background: #1f2225; color: var(--gold-hi); padding-right: 18px; }
.admin-bar svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.admin-bar .admin-bar-edit { background: var(--gold); border-color: var(--gold); color: #1a1714; }
.admin-bar .admin-bar-edit:hover { background: var(--gold-hi); color: #1a1714; }
@media (max-width: 960px) { .admin-bar { top: 88px; } .admin-bar span { display: none; } .admin-bar a { padding: 10px; } }

/* ---------- Catalog pages (/proizvodi/, /dostupno/) ---------- */
.shop-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(118px, 12vw, 150px) 0 clamp(36px, 4vw, 52px);
  background: radial-gradient(50% 70% at 12% 100%, rgba(46, 51, 55, .9), transparent 70%), var(--ink); }
.shop-hero > .container { position: relative; z-index: 1; }
.shop-hero .breadcrumb ol { margin-bottom: 22px; }
.shop-title { font: 400 clamp(2.4rem, 4.6vw, 4rem)/1.04 var(--f-display); letter-spacing: -.01em; margin: 0 0 14px; }
.shop-lead { max-width: 62ch; color: var(--text-light-2); font-size: clamp(1rem, 1.2vw, 1.1rem); }

.shop-nav { position: sticky; top: 72px; z-index: 30; background: rgba(17, 19, 21, .97); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); backdrop-filter: blur(6px); }
.shop-nav .container { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
.shop-areas, .shop-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.shop-areas::-webkit-scrollbar, .shop-chips::-webkit-scrollbar { display: none; }
.shop-area { display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 10px 16px; border: 1px solid rgba(195, 161, 107, .3); color: var(--text-light); text-decoration: none;
  font: 600 .74rem/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; transition: background .2s, border-color .2s, color .2s; }
.shop-area svg { width: 20px; height: 20px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.shop-area:hover { border-color: var(--gold); background: rgba(195, 161, 107, .08); }
.shop-area.is-on { background: var(--gold); border-color: var(--gold); color: #1a1714; }
.shop-area.is-on svg { color: #1a1714; }
.shop-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(195, 161, 107, .14); color: var(--text-light-2);
  font: 700 .64rem/1 var(--f-body); letter-spacing: 0; }
.is-on > .shop-n { background: rgba(26, 23, 20, .18); color: inherit; }
.shop-chip { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 7px 12px; border: 1px solid rgba(195, 161, 107, .2); color: var(--text-light-2); text-decoration: none;
  font: 500 .88rem/1.2 var(--f-body); transition: color .2s, border-color .2s, background .2s; }
.shop-chip:hover { color: var(--text-light); border-color: var(--gold); }
.shop-chip.is-on { color: var(--gold-hi); border-color: var(--gold); background: rgba(195, 161, 107, .12); }

.shop-body { padding-top: clamp(32px, 4vw, 48px); }
.shop-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.shop-filters { position: sticky; top: 200px; }
.shop-filters-toggle { display: none; }
.shop-filters-body { display: flex; flex-direction: column; gap: 26px; }
.shop-group-title { font: 500 .68rem/1.3 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line-dark); }
.shop-checks { list-style: none; margin: 0; padding: 0; }
.shop-check { display: flex; align-items: center; gap: 10px; padding: 8px 2px; color: var(--text-light-2); text-decoration: none; font-size: .9rem; transition: color .2s; }
.shop-check:hover { color: var(--text-light); }
.shop-check .shop-n { margin-left: auto; }
.shop-box-mark { width: 16px; height: 16px; flex: none; border: 1px solid rgba(195, 161, 107, .55); position: relative; }
.shop-check.is-on { color: var(--text-light); }
.shop-check.is-on .shop-box-mark { background: var(--gold); border-color: var(--gold); }
.shop-check.is-on .shop-box-mark::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #1a1714; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.shop-none, .shop-lock { color: var(--text-light-2); font-size: .86rem; margin-bottom: 10px; }
.shop-search { display: flex; gap: 6px; }
.shop-search input { flex: 1; min-width: 0; padding: 10px 12px; background: #0f1112; border: 1px solid rgba(195, 161, 107, .3); color: var(--text-light); font: 400 .9rem/1.3 var(--f-body); }
.shop-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(195, 161, 107, .16); }
.shop-only-available { display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed rgba(169, 215, 154, .5); color: #a9d79a; text-decoration: none; font: 600 .82rem/1.2 var(--f-body); }
.shop-only-available:hover { border-style: solid; background: rgba(169, 215, 154, .06); }
.shop-only-available .diamond { background: #a9d79a; }

.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line-dark); }
.shop-count { color: var(--text-light-2); }
.shop-count strong { font: 500 1.5rem/1 var(--f-display); color: var(--text-light); margin-right: 4px; }
.shop-sort { display: flex; gap: 4px; }
.shop-sort a { padding: 7px 12px; color: var(--text-light-2); text-decoration: none; font: 600 .66rem/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; border: 1px solid transparent; }
.shop-sort a:hover { color: var(--text-light); }
.shop-sort a.is-on { color: var(--gold-hi); border-color: rgba(195, 161, 107, .45); }
.shop-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 22px; }
.shop-active-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(195, 161, 107, .12); border: 1px solid rgba(195, 161, 107, .45); color: var(--gold-hi); text-decoration: none; font: 600 .78rem/1.2 var(--f-body); }
.shop-active-chip span { font-size: 1rem; line-height: 1; opacity: .8; }
.shop-active-chip:hover { border-color: var(--gold); }
.shop-clear { margin-left: 6px; color: var(--text-light-2); font-size: .82rem; text-underline-offset: 3px; }
.shop-clear:hover { color: var(--gold); }
.shop-grid { grid-template-columns: repeat(3, 1fr); }
.shop-empty { padding: 48px 28px; text-align: center; border: 1px dashed var(--line-dark); color: var(--text-light-2); }
.shop-empty p { margin-bottom: 20px; font-size: 1.05rem; }
.shop-empty .btn-row { justify-content: center; }

@media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .shop-nav { top: 76px; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-filters { position: static; border: 1px solid var(--line-dark); }
  .shop-filters-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; list-style: none;
    font: 600 .74rem/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-light); }
  .shop-filters-toggle::-webkit-details-marker { display: none; }
  .shop-filters-toggle::after { content: ""; width: 8px; height: 8px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg); transition: transform .2s; }
  .shop-filters[open] .shop-filters-toggle::after { transform: rotate(-135deg); }
  .shop-filters-body { padding: 4px 14px 18px; }
}
@media (max-width: 640px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-grid > .product-card:nth-child(n+5) { display: flex; }
  .shop-grid > .custom-tile { grid-column: span 2; }
  .shop-sort a { padding: 7px 8px; letter-spacing: .08em; }
}

/* ---------- Pavel Butolen page ---------- */
.pb-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(118px, 12vw, 150px) 0 clamp(60px, 7vw, 96px);
  background: radial-gradient(50% 70% at 12% 100%, rgba(46, 51, 55, .9), transparent 70%), var(--ink); }
.pb-hero > .container { position: relative; z-index: 1; }
.pb-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.pb-title { font: 400 clamp(3rem, 6.4vw, 5.6rem)/1 var(--f-display); letter-spacing: -.015em; margin: 0 0 22px; }
.pb-lead { font-size: clamp(1.04rem, 1.3vw, 1.18rem); color: var(--text-light-2); max-width: 54ch; margin-bottom: 32px; }
.pb-facts { margin: 38px 0 0; }
.pb-hero-media { position: relative; margin: 0; }
.pb-hero-frame { position: relative; display: block; overflow: hidden; border: 5px solid var(--ink); box-shadow: 0 0 0 1px rgba(195, 161, 107, .6), 0 50px 90px -30px rgba(0, 0, 0, .85); }
.pb-hero-frame img { width: 100%; height: auto; animation: ken-burns 26s ease-in-out infinite alternate; }
.pb-hero-media::before, .pb-hero-media::after { content: ""; position: absolute; width: 60px; height: 60px; border-color: var(--bronze); border-style: solid; z-index: 1; pointer-events: none; }
.pb-hero-media::before { left: -16px; top: -16px; border-width: 1px 0 0 1px; }
.pb-hero-media::after { right: -16px; bottom: 26px; border-width: 0 1px 1px 0; }
.pb-hero-media figcaption { margin-top: 12px; font: 500 .66rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--text-light-2); text-align: right; }

.pb-subnav { position: sticky; top: 72px; z-index: 30; background: rgba(17, 19, 21, .97); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); backdrop-filter: blur(6px); }
.pb-subnav .container { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 8px; padding-bottom: 8px; }
.pb-subnav .container::-webkit-scrollbar { display: none; }
.pb-subnav a { flex: none; padding: 10px 14px; color: var(--text-light-2); text-decoration: none; font: 600 .7rem/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; transition: color .2s; }
.pb-subnav a:hover { color: var(--gold-hi); }
.pb-subnav .pb-subnav-cta { margin-left: auto; color: #1a1714; background: var(--gold); }
.pb-subnav .pb-subnav-cta:hover { background: var(--gold-hi); color: #1a1714; }
.pavel-page [id] { scroll-margin-top: 140px; }

.pb-story-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.pb-prose p { color: var(--text-light-2); font-size: 1.04rem; line-height: 1.8; margin-top: 18px; max-width: 64ch; }
.pb-prose p:first-child::first-letter { float: left; font: 400 4.2rem/.82 var(--f-display); color: var(--gold); margin: 8px 12px 0 0; }
.pb-timeline { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); }
.pb-timeline li { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 0 0; font-size: .86rem; color: var(--text-light-2); position: relative; }
.pb-timeline li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.pb-year { font: 400 1.5rem/1 var(--f-display); color: var(--text-light); }
.pb-story-side { position: sticky; top: 150px; display: flex; flex-direction: column; }
.pb-photo { margin: 0; border: 5px solid var(--ink); box-shadow: 0 0 0 1px rgba(195, 161, 107, .5), 0 40px 70px -30px rgba(0, 0, 0, .8); }
.pb-photo img { width: 100%; height: auto; }
.pb-quote { margin: -60px 0 0 12%; width: 88%; }

.pb-logos { max-width: 980px; margin: 0 auto 50px; }
.pb-logos li:first-child { justify-items: center; padding-left: 14px; }
.pb-logos img { max-height: 58px; }
.pb-logos .logo-hnk { max-height: 76px; }
.pb-collab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.pb-collab-item { padding: 26px 22px; background: var(--ink-2); border: 1px solid rgba(195, 161, 107, .25); }
.pb-collab-item svg { width: 34px; height: 34px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.pb-collab-item h3 { font: 500 1.35rem/1.15 var(--f-display); margin-bottom: 8px; }
.pb-collab-item p { color: var(--text-light-2); font-size: .92rem; }

.pb-projects { border-top: 1px solid rgba(155, 115, 72, .18); }
.pb-note { color: var(--text-light-2); font-size: .88rem; }
.pb-proj-list { display: grid; gap: 14px; }
.pb-proj { background: var(--ink-2); border: 1px solid rgba(195, 161, 107, .28); transition: border-color .25s; }
.pb-proj[open], .pb-proj:hover { border-color: var(--bronze); }
.pb-proj summary { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; gap: 24px; align-items: center; padding: 14px 22px 14px 14px; cursor: pointer; list-style: none; }
.pb-proj summary::-webkit-details-marker { display: none; }
.pb-proj-media { display: block; width: 150px; aspect-ratio: 4 / 3; overflow: hidden; background: #0f1112; }
.pb-proj-media img { width: 100%; height: 100%; object-fit: cover; }
.pb-proj-media--logo, .pb-proj-media--icon { display: grid; place-items: center; padding: 18px; }
.pb-proj-media--logo img { object-fit: contain; max-height: 54px; }
.pb-proj-media--icon svg { width: 46px; height: 46px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.4; }
.pb-proj-head { display: flex; flex-direction: column; gap: 4px; }
.pb-proj-title { font: 500 1.6rem/1.1 var(--f-display); color: var(--text-light); }
.pb-proj-sum { color: var(--text-light-2); font-size: .94rem; }
.pb-proj-toggle { width: 38px; height: 38px; border: 1px solid rgba(195, 161, 107, .45); border-radius: 50%; position: relative; justify-self: end; }
.pb-proj-toggle::before, .pb-proj-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: var(--gold); translate: -50% -50%; transition: transform .25s; }
.pb-proj-toggle::after { transform: rotate(90deg); }
.pb-proj[open] .pb-proj-toggle::after { transform: rotate(0); }
.pb-proj-body { padding: 4px 22px 26px 188px; color: var(--text-light-2); line-height: 1.75; max-width: 980px; }
.pb-inline-quote { position: relative; margin: 18px 0 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--gold); }
.pb-inline-quote p { font: italic 400 1.15rem/1.45 var(--f-display); color: var(--text-light); }
.pb-inline-quote footer { margin-top: 8px; font: 500 .62rem/1.4 var(--f-label); letter-spacing: .16em; text-transform: uppercase; }
.pb-inline-quote a, .pb-quote a { color: var(--gold); }

.pb-cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; margin-top: 40px; padding: 28px 32px;
  background: radial-gradient(circle at 85% 30%, rgba(195, 161, 107, .18), transparent 60%), linear-gradient(180deg, #2c261d, #1c1813); border: 1px solid rgba(216, 187, 136, .6); }
.pb-cta-title { font: 400 1.7rem/1.15 var(--f-display); }
.pb-cta-text { color: var(--text-light-2); margin-top: 4px; }

.pb-steps { list-style: none; padding: 0; margin: 0 0 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-light); }
.pb-steps li { padding: 24px 22px 0 0; }
.pb-steps li + li { padding-left: 22px; border-left: 1px solid var(--line-light); }
.pb-steps h3 { font: 500 1.3rem/1.2 var(--f-display); margin: 4px 0 8px; }
.pb-steps p { color: var(--text-dark-2); font-size: .94rem; }
.pb-materials { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pb-materials > div { padding: 24px 26px; background: rgba(255, 255, 255, .35); border: 1px solid var(--line-light); }
.pb-materials h3 { font: 500 1.3rem/1.2 var(--f-display); margin-bottom: 8px; }
.pb-materials p { color: var(--text-dark-2); }
.pb-process-cta { margin-top: 30px; }

.pb-press { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-bottom: 56px; }
.pb-press-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--ink-2); border: 1px solid rgba(195, 161, 107, .28); }
.pb-press-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pb-press-card .article-logo { width: 112px; height: 64px; }
.pb-press-card blockquote { margin: 0; padding: 14px 0 0 20px; border-top: 1px solid var(--line-dark); position: relative; flex: 1; }
.pb-press-card blockquote::before { content: "\201E"; position: absolute; left: -4px; top: 6px; font: 400 2.6rem/1 var(--f-display); color: var(--gold); }
.pb-press-card blockquote p { font: italic 400 1.12rem/1.45 var(--f-display); color: var(--text-light); }
.pb-video-title { max-width: none; }
.pb-videos { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.pb-videos li { display: flex; flex-direction: column; gap: 8px; }
.pb-media-note { margin-top: 30px; font-size: .78rem; color: #8c867c; text-align: center; }

.pb-final { border-top: 1px solid rgba(155, 115, 72, .18); }
.pb-final-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.pb-final .section-lead { margin-bottom: 0; }

@media (max-width: 1100px) {
  .pb-collab-grid { grid-template-columns: repeat(2, 1fr); }
  .pb-press, .pb-videos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .pb-hero-grid, .pb-story-grid { grid-template-columns: 1fr; }
  .pb-story-side { position: static; }
  .pb-steps { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .pb-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .pb-subnav { top: 76px; }
  .pb-proj-body { padding-left: 22px; }
}
@media (max-width: 640px) {
  .pb-timeline { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .pb-collab-grid, .pb-press, .pb-videos, .pb-materials, .pb-steps { grid-template-columns: 1fr; }
  .pb-steps li, .pb-steps li + li { padding: 18px 0 0; border-left: 0; }
  .pb-proj summary { grid-template-columns: 84px minmax(0, 1fr) 32px; gap: 14px; padding: 10px 12px 10px 10px; }
  .pb-proj-media { width: 84px; }
  .pb-proj-title { font-size: 1.25rem; }
  .pb-proj-sum { display: none; }
  .pb-proj-toggle { width: 30px; height: 30px; }
  .pb-quote { margin: -40px 0 0 6%; width: 94%; }
  .pb-cta-band { padding: 22px 18px; }
}

/* ---------- World map (Pavel page) ---------- */
.pb-map { border-top: 1px solid rgba(155, 115, 72, .18); }
.wm { position: relative; }
.wm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.wm-c { fill: #24282b; stroke: #151719; stroke-width: .6; transition: fill .3s; }
.wm-on { fill: #2e3337; }
.wm.is-in .wm-on { animation: wm-fill .9s calc(var(--i) * .16s + .2s) var(--ease) forwards; }
@keyframes wm-fill { to { fill: var(--bronze); } }
.wm-on:hover { fill: var(--gold) !important; }
.wm-arc { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; filter: drop-shadow(0 0 3px rgba(232, 205, 150, .5)); }
.wm.is-in .wm-arc { animation: wm-draw 1.3s calc(var(--i) * .16s + .4s) var(--ease) forwards; }
@keyframes wm-draw { to { stroke-dashoffset: 0; } }
.wm-dot { fill: var(--gold-hi); opacity: 0; transform-box: fill-box; transform-origin: center; }
.wm.is-in .wm-dot { animation: wm-pop .5s calc(var(--i) * .16s + 1.5s) cubic-bezier(.2, 1.4, .3, 1) forwards; }
@keyframes wm-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.wm-home { fill: #fff1cf; stroke: var(--gold); stroke-width: 2; }
.wm-home-pulse { fill: none; stroke: var(--gold); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: wm-pulse 2.4s ease-out infinite; }
@keyframes wm-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(4.5); } }
.wm-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; list-style: none; margin: 28px 0 0; padding: 0; }
.wm-list li { padding: 7px 12px; border: 1px solid rgba(195, 161, 107, .35); color: var(--text-light-2); font: 500 .84rem/1.2 var(--f-body); opacity: 0; transform: translateY(6px); }
.wm.is-in .wm-list li { animation: rise-in .6s calc(var(--i) * .16s + .6s) var(--ease) forwards; }
.wm-list li:first-child { color: #1a1714; background: var(--gold); border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .wm-on { fill: var(--bronze); } .wm-arc { stroke-dashoffset: 0; } .wm-dot, .wm-list li { opacity: 1; transform: none; }
  .wm-home-pulse { animation: none; opacity: 0; }
}

/* ---------- Izrada po narudžbi ---------- */
.co-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(118px, 12vw, 150px) 0 clamp(64px, 7vw, 100px); background: var(--ink); }
.co-hero > .container { position: relative; z-index: 1; }
.co-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; opacity: .32;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%); mask-image: linear-gradient(180deg, #000 20%, transparent 95%); }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.co-title { font: 400 clamp(2.8rem, 5.6vw, 5rem)/1.02 var(--f-display); letter-spacing: -.012em; margin: 0 0 10px; }
.co-sub { font: italic 400 clamp(1.4rem, 2.2vw, 1.9rem)/1.2 var(--f-display); color: var(--gold-hi); margin-bottom: 22px; }
.co-lead { font-size: clamp(1.02rem, 1.25vw, 1.14rem); color: var(--text-light-2); max-width: 56ch; }
ul.co-sources { list-style: none; margin: 32px 0 0; padding: 30px 0 0; border-top: 1px solid var(--line-dark); display: grid; gap: 14px; }
.co-sources li { display: flex; align-items: center; gap: 14px; color: var(--text-light-2); font-size: .95rem; }
.co-sources strong { color: var(--text-light); font-weight: 600; }
.co-sources svg { width: 26px; height: 26px; flex: none; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.co-contact { margin-top: 34px; padding: 22px 24px; background: rgba(27, 30, 33, .8); border: 1px solid rgba(195, 161, 107, .4); position: relative; }
.co-contact::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(195, 161, 107, .12); pointer-events: none; }
.co-contact-title { font: 500 1.25rem/1.2 var(--f-display); margin-bottom: 12px; }
.co-contact-line { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--text-light); text-decoration: none; font: 600 1.05rem/1.2 var(--f-body); transition: color .2s; }
.co-contact-line:hover { color: var(--gold-hi); }
.co-contact-line svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.co-contact-note { margin-top: 6px; font-size: .82rem; color: var(--text-light-2); }

.co-form-wrap { position: sticky; top: 100px; }
.co-form { position: relative; padding: clamp(24px, 3vw, 38px); background: #141618 var(--noise); border: 1px solid rgba(195, 161, 107, .55); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9); }
.co-form::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(195, 161, 107, .12); pointer-events: none; }
.co-form::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px 3px rgba(232, 205, 150, .55); }
.co-form-eyebrow { font: 500 .68rem/1.3 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.co-form-title { font: 400 clamp(1.7rem, 2.6vw, 2.2rem)/1.1 var(--f-display); margin: 0 0 22px; }
.field-opt { text-transform: none; letter-spacing: 0; font: 400 .74rem/1 var(--f-body); color: var(--text-light-2); }
.co-label { display: block; margin-bottom: 8px; font: 500 .68rem/1.3 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.co-drop { position: relative; display: grid; place-items: center; gap: 4px; padding: 20px 16px; text-align: center; border: 1px dashed rgba(195, 161, 107, .55); background: #0f1112; color: var(--text-light-2); cursor: pointer; transition: border-color .2s, background .2s; }
.co-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.co-drop strong { color: var(--gold-hi); }
.co-drop:hover, .co-drop.is-over { border-color: var(--gold); background: rgba(195, 161, 107, .07); }
.co-drop:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.co-drop-hint { font-size: .76rem; }
.co-files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.co-files li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(195, 161, 107, .25); font-size: .86rem; color: var(--text-light); }
.co-files li span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-files small { color: var(--text-light-2); }
.co-files button { width: 28px; height: 28px; padding: 0; border: 1px solid rgba(195, 161, 107, .3); background: none; color: var(--text-light-2); cursor: pointer; font-size: 1rem; line-height: 1; }
.co-files button:hover { color: #e7a294; border-color: #e7a294; }
.co-submit { width: 100%; margin-top: 6px; min-height: 54px; }
.co-privacy { margin-top: 10px; font-size: .76rem; color: #8c867c; text-align: center; }

.co-strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.6vw, 22px); }
.co-strip a { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 0 0; border: 1px solid rgba(195, 161, 107, .4); background: #0f1112; }
.co-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.co-strip a:hover img { transform: scale(1.06); }
.co-strip span { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 14px; background: linear-gradient(transparent, rgba(15, 17, 18, .92)); text-align: center;
  font: 600 .64rem/1.2 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.co-steps { margin-bottom: 0; }
.co-cta { margin-top: 36px; text-align: center; }
.co-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.co-faq-grid .section-lead { margin-bottom: 26px; }
.co-faq-list { display: grid; gap: 10px; }
.co-q summary { grid-template-columns: minmax(0, 1fr) 40px; padding: 18px 20px; }
.co-q .pb-proj-title { font-size: 1.25rem; }
.co-q .pb-proj-body { padding: 0 20px 22px; }
.co-q .pb-proj-body a { color: var(--gold); }

@media (max-width: 960px) {
  .co-grid, .co-faq-grid { grid-template-columns: 1fr; }
  .co-form-wrap { position: static; }
  .co-strip { grid-template-columns: repeat(3, 1fr); }
  .co-strip li:nth-child(n+4) { display: none; }
}
@media (max-width: 640px) {
  .co-strip { grid-template-columns: repeat(2, 1fr); }
  .co-strip li:nth-child(3) { display: none; }
  .co-contact-line { font-size: .98rem; }
}
.field label.co-drop { display: grid; margin: 0; font: 400 .92rem/1.45 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--text-light-2); }
.field label.co-drop .co-drop-hint { font-size: .76rem; color: #8c867c; }
.co-hero .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 23, 25, .82) 0%, rgba(21, 23, 25, .6) 45%, rgba(21, 23, 25, .25) 100%); }
@media (max-width: 960px) { .co-hero .hero-bg::after { background: rgba(21, 23, 25, .62); } }

/* ---------- Scenografija ---------- */
.sc-hero { position: relative; overflow: hidden; isolation: isolate; min-height: min(86vh, 760px); display: flex; align-items: flex-end;
  padding: clamp(130px, 14vw, 170px) 0 clamp(60px, 7vw, 96px); background: var(--ink); }
.sc-hero > .container { position: relative; z-index: 1; }
.sc-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: .55; animation: ken-burns 30s ease-in-out infinite alternate; }
.sc-hero .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 23, 25, .55) 0%, rgba(21, 23, 25, .25) 40%, rgba(21, 23, 25, .92) 88%, var(--ink) 100%), linear-gradient(90deg, rgba(21, 23, 25, .7), transparent 70%); }
.sc-title { font: 400 clamp(2.8rem, 6vw, 5.4rem)/1.02 var(--f-display); letter-spacing: -.012em; max-width: 14ch; margin: 0 0 16px; }
.sc-sub { font: italic 400 clamp(1.25rem, 2vw, 1.7rem)/1.3 var(--f-display); color: var(--gold-hi); max-width: 34ch; margin-bottom: 30px; }

.sc-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.sc-split--rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.sc-text p:not(.eyebrow) { color: var(--text-light-2); font-size: 1.04rem; line-height: 1.8; margin-top: 18px; max-width: 58ch; }
.sc-text .h2 { margin-bottom: 4px; }
.sc-text .link-arrow, .sc-text .btn { margin-top: 26px; }
.sc-figure { position: relative; margin: 0; overflow: hidden; background: #0f1112; border: 1px solid rgba(195, 161, 107, .35); }
.sc-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.sc-figure:hover img { transform: scale(1.04); }
.sc-figure figcaption { position: absolute; left: 0; bottom: 0; padding: 8px 12px; background: rgba(15, 17, 18, .85); font: 600 .62rem/1.2 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.sc-figure--arch { border-radius: 999px 999px 0 0; aspect-ratio: 4 / 4.4; }
.sc-figure--arch figcaption { left: 50%; translate: -50% 0; bottom: 16px; }
.sc-figure--frame { overflow: visible; border: 5px solid var(--ink); box-shadow: 0 0 0 1px rgba(195, 161, 107, .55), 0 50px 90px -30px rgba(0, 0, 0, .85); }
.sc-figure--frame img { aspect-ratio: 2000 / 1295; }
.sc-figure--frame::before, .sc-figure--frame::after { content: ""; position: absolute; width: 56px; height: 56px; border-color: var(--bronze); border-style: solid; z-index: 1; pointer-events: none; }
.sc-figure--frame::before { left: -18px; top: -18px; border-width: 1px 0 0 1px; }
.sc-figure--frame::after { right: -18px; bottom: -18px; border-width: 0 1px 1px 0; }

.sc-wide { background: var(--ink); }
.sc-wide-figure { position: relative; margin: 0; }
.sc-wide-figure img { width: 100%; height: clamp(280px, 46vw, 640px); object-fit: cover; display: block; }
.sc-wide-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 55%, rgba(21, 23, 25, .9) 100%); pointer-events: none; }
.sc-wide-figure figcaption { position: absolute; left: 0; right: 0; bottom: clamp(20px, 4vw, 48px); z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.sc-cap-eyebrow { font: 600 .68rem/1.2 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.sc-cap-title { font: 400 clamp(1.8rem, 3.6vw, 3rem)/1.05 var(--f-display); color: var(--text-light); }

.sc-types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.sc-type { padding: 28px 24px; background: var(--ink-2); border: 1px solid rgba(195, 161, 107, .25); border-top: 2px solid var(--bronze); }
.sc-type svg { width: 36px; height: 36px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.sc-type h3 { font: 500 1.4rem/1.15 var(--f-display); margin-bottom: 10px; }
.sc-type p { color: var(--text-light-2); font-size: .93rem; }
.sc-center { text-align: center; margin-top: 36px; }

.sc-pair { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.sc-pair-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.sc-pair-grid > .sc-figure { aspect-ratio: auto; min-height: 340px; }
.sc-pair-grid--tall { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.sc-pair-side { display: grid; grid-template-rows: auto 1fr; gap: clamp(14px, 2vw, 26px); }
.sc-pair-side .sc-figure img { aspect-ratio: 988 / 560; }
.sc-mini-cta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 28px 30px;
  background: radial-gradient(circle at 85% 20%, rgba(195, 161, 107, .18), transparent 60%), linear-gradient(180deg, #2c261d, #1c1813); border: 1px solid rgba(216, 187, 136, .6); }
.sc-mini-title { font: 400 1.7rem/1.15 var(--f-display); }
.sc-mini-cta p:not(.sc-mini-title) { color: var(--text-light-2); }

.sc-row--throne { padding-top: clamp(40px, 5vw, 64px); }

.sc-refs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
ul.sc-ref-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line-light); }
.sc-ref-list li { border-bottom: 1px solid var(--line-light); }
.sc-ref-list li > strong, .sc-ref-list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 16px 4px; color: var(--text-dark); text-decoration: none; }
.sc-ref-list li > strong { padding-bottom: 2px; }
.sc-ref-list li > strong + span { display: block; padding: 0 4px 16px; }
.sc-ref-list strong { font: 500 1.35rem/1.2 var(--f-display); }
.sc-ref-list span { color: var(--text-dark-2); font-size: .92rem; }
.sc-ref-list a:hover strong { color: var(--bronze-deep); }
.sc-ref-list a::after { content: "→"; margin-left: auto; color: var(--bronze); }
ul.sc-services { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sc-services li { padding: 18px 18px; background: rgba(255, 255, 255, .35); border: 1px solid var(--line-light); }
.sc-services h3 { font: 500 1.2rem/1.2 var(--f-display); margin-bottom: 6px; }
.sc-services p { color: var(--text-dark-2); font-size: .9rem; }

.sc-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); }
.sc-steps li { padding: 24px 22px 0 0; }
.sc-steps li + li { padding-left: 22px; border-left: 1px solid var(--line-dark); }
.sc-steps h3 { font: 500 1.3rem/1.2 var(--f-display); margin: 4px 0 8px; }
.sc-steps p { color: var(--text-light-2); font-size: .94rem; }

.sc-contact { border-top: 1px solid rgba(155, 115, 72, .18); scroll-margin-top: 80px; }
.sc-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.sc-contact-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 24px; text-align: center; text-decoration: none; color: var(--text-light);
  background: var(--ink-2); border: 1px solid rgba(195, 161, 107, .4); transition: transform .3s var(--ease), border-color .3s; }
.sc-contact-card::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(195, 161, 107, .12); pointer-events: none; }
.sc-contact-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.sc-contact-card svg { width: 40px; height: 40px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; margin-bottom: 6px; }
.sc-contact-label { font: 600 .7rem/1.2 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.sc-contact-value { font: 500 1.35rem/1.2 var(--f-display); word-break: break-word; }
.sc-contact-card--gold { background: radial-gradient(circle at 50% 0%, rgba(195, 161, 107, .2), transparent 70%), linear-gradient(180deg, #2c261d, #1c1813); border-color: rgba(216, 187, 136, .7); }

@media (max-width: 1100px) { .sc-types-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .sc-split, .sc-split--rev, .sc-refs-grid, .sc-pair-grid, .sc-pair-grid--tall { grid-template-columns: 1fr; }
  .sc-split--rev .sc-text { order: -1; }
  .sc-figure--arch { max-width: 520px; }
  .sc-steps { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .sc-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .sc-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sc-types-grid, ul.sc-services { grid-template-columns: 1fr; }
  .sc-steps { grid-template-columns: 1fr; }
  .sc-steps li, .sc-steps li + li { padding: 18px 0 0; border-left: 0; }
  .sc-hero { min-height: 0; }
}
h1, h2, h3, .h2 { font-variant-ligatures: no-common-ligatures; }