/* Yarnly Studio v3.0 — organized stylesheet. Keep imports low and edit by section. */


/* ==========================================================================
   01 Design tokens and reset
   ========================================================================== */

:root {
  --bg: #f7efe3;
  --paper: #fffaf2;
  --ink: #17130f;
  --muted: #756b60;
  --line: rgba(23,19,15,.12);
  --soft: rgba(255,255,255,.58);
  --cream: #f3dfbd;
  --navy: #213145;
  --red: #b94a37;
  --skin: #d99f76;
  --accent: #9b5f3e;
  --shadow: 0 28px 90px rgba(39,28,17,.14);
  --container: 1180px;
  --page-x: 28px;
  --radius-pill: 999px;
  --focus-ring: 0 0 0 4px rgba(155,95,62,.24);

  /* Premium architecture aliases */
  --color-bg: var(--bg);
  --color-surface: var(--paper);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-border: var(--line);
  --space-2xs: clamp(4px, .35vw, 6px);
  --space-xs: clamp(8px, .55vw, 10px);
  --space-sm: clamp(12px, .8vw, 16px);
  --space-md: clamp(18px, 1.2vw, 24px);
  --space-lg: clamp(28px, 2vw, 42px);
  --space-xl: clamp(48px, 5vw, 88px);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --glass-bg: rgba(255,255,255,.56);
  --glass-border: rgba(255,255,255,.76);
  --motion-fast: 160ms ease;
  --motion-base: 260ms ease;
  --motion-slow: 520ms cubic-bezier(.22,1,.36,1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 66% 28%,rgba(255,246,231,.72),transparent 30%),linear-gradient(180deg,#f8efe2 0%,#f2e3cf 100%);
  overflow-x: hidden;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-150%);
  background: var(--ink);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.skip-link:focus {
  transform: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}


/* ==========================================================================
   02 Header navigation and language controls
   ========================================================================== */

.nav {
  position: fixed;
  z-index: 40;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container), calc(100% - var(--page-x)));
  height: 64px;
  padding: 8px 10px 8px 18px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  box-shadow: 0 18px 60px rgba(49,36,24,.1);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 900;
}

.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: white;
  border: 1px solid rgba(46, 34, 24, .12);
  box-shadow: 0 6px 18px rgba(49, 36, 24, .08);
  flex: 0 0 auto;
}

.nav nav {
  display: flex;
  gap: 24px;
}

.nav a {
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}

.nav-cta,.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 46px;
  padding: 0 19px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: white !important;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 15px 40px rgba(23,19,15,.16);
  transition: transform .25s ease,box-shadow .25s ease;
}

.nav-cta:hover,.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(23,19,15,.2);
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: 10px;
  padding: 4px;
  border: 1px solid rgba(23,19,15,.1);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.42);
}

.lang-toggle button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  border-radius: var(--radius-pill);
  padding: 7px 9px;
  cursor: pointer;
}

.lang-toggle button.active {
  background: var(--ink);
  color: #fff;
}


/* ==========================================================================
   03 Homepage hero process animation
   ========================================================================== */

.hero-process {
  height: 720vh;
  position: relative;
}

.hero-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 100vh;
  padding: 112px clamp(18px,4vw,70px) 34px;
  display: grid;
  grid-template-columns: minmax(285px,.76fr) minmax(430px,1.28fr) minmax(230px,.56fr);
  gap: clamp(22px,4vw,70px);
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(58px,7.2vw,118px);
  line-height: .82;
  letter-spacing: -.085em;
  margin: 0 0 26px;
  max-width: 650px;
}

.eyebrow {
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  font-weight: 900;
  color: var(--accent);
}

.lead {
  font-size: clamp(17px,1.45vw,22px);
  line-height: 1.56;
  color: rgba(23,19,15,.68);
  max-width: 500px;
  margin: 0;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.primary-btn {
  min-height: 58px;
  padding-inline: 25px;
}

.secondary-link {
  color: var(--ink);
  font-weight: 850;
  text-decoration: none;
  border-bottom: 1px solid rgba(23,19,15,.28);
  padding-bottom: 4px;
}

.product-stage {
  position: relative;
  height: min(78vh,770px);
  display: grid;
  place-items: center;
  perspective: 1400px;
}

.product-glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(255,255,255,.9),rgba(255,245,224,.36) 42%,transparent 72%);
  filter: blur(8px);
  opacity: .9;
}

.art-wrap {
  position: relative;
  z-index: 5;
  width: min(45vw,560px);
  height: 100%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  will-change: transform;
}

.rug {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 42px 88px rgba(56,39,23,.21));
}

.backing rect {
  fill: url(#edge);
  stroke: rgba(23,19,15,.16);
  stroke-width: 3;
}

.frame-lines,.sketch,.color,.yarn-lines,.carving,.fibers {
  opacity: 0;
}

.frame-lines path {
  fill: none;
  stroke: rgba(23,19,15,.38);
  stroke-width: 1.4;
}

.draw,.sunSketch {
  fill: none;
  stroke: var(--ink);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}

.c {
  opacity: .98;
  transform-origin: center;
  transform-box: fill-box;
}

.parchment {
  fill: #f4dfbd;
}

.body,.arm,.face {
  fill: var(--skin);
}

.hair,.tail {
  fill: var(--navy);
}

.sword {
  fill: #222;
}

.shield {
  fill: var(--red);
}

.yarn-lines path {
  fill: none;
  stroke: #fff8ed;
  stroke-width: 14;
  stroke-linecap: round;
  opacity: .54;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}

.carving path,.carving circle {
  fill: none;
  stroke: rgba(23,19,15,.88);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}

.fibers path {
  fill: none;
  stroke: rgba(255,255,255,.84);
  stroke-width: 6;
  stroke-linecap: round;
}

.toolfield {
  position: absolute;
  z-index: 13;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}

.floating-tool {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 14px 42px rgba(46,35,24,.13);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.72) rotate(var(--r,0deg));
  animation: toolFloat 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i)*-.45s);
  transition: opacity .35s ease,transform .45s cubic-bezier(.2,1,.2,1);
}

.floating-tool svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 4.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.floating-tool:nth-child(1) {
  --r: -8deg;
}

.floating-tool:nth-child(2) {
  --r: 7deg;
}

.floating-tool:nth-child(3) {
  --r: 10deg;
}

.floating-tool:nth-child(4) {
  --r: -5deg;
}

.pos-1 {
  left: 24%;
  top: 23%;
}

.pos-2 {
  left: 78%;
  top: 31%;
}

.pos-3 {
  left: 22%;
  top: 73%;
}

.pos-4 {
  left: 77%;
  top: 69%;
}

.floating-tool.is-main {
  width: 72px;
  height: 72px;
  border-radius: 25px;
  background: rgba(255,255,255,.86);
  filter: drop-shadow(0 16px 30px rgba(155,95,62,.22));
}

.floating-tool.is-main svg {
  width: 40px;
  height: 40px;
}

.tool-visible .floating-tool {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1) rotate(var(--r,0deg));
}

.process-panel {
  align-self: center;
}

.co-create {
  margin-bottom: 28px;
}

.co-create strong {
  display: block;
  font-size: clamp(42px,4.2vw,70px);
  line-height: .9;
  letter-spacing: -.065em;
  margin-bottom: 16px;
}

.sync-line {
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(23,19,15,.12);
  overflow: hidden;
}

.sync-line i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
  border-radius: inherit;
}

.process-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
}

.process-list li {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  color: rgba(23,19,15,.38);
  transition: .25s;
}

.process-list span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.process-list b {
  font-size: 15px;
}

.process-list li.active {
  color: var(--ink);
  transform: translateX(-8px);
}

.scroll-hint {
  display: none;
}

@keyframes ysScrollHintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.scroll-spacer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scroll-spacer article {
  height: 120vh;
}

body.step-0 .sketch {
  opacity: .42;
}

body.step-0 .draw {
  animation: draw 1.6s ease forwards;
}

body.step-1 .sketch {
  opacity: 1;
}

body.step-1 .draw {
  animation: draw 1.4s ease forwards;
}

body.step-2 .frame-lines,body.step-2 .sketch {
  opacity: 1;
}

body.step-3 .color,body.step-3 .yarn-lines {
  opacity: 1;
}

body.step-3 .c {
  animation: pop .65s cubic-bezier(.2,1.3,.3,1) both;
}

body.step-3 .yarn-lines path {
  animation: draw .9s ease forwards;
}

body.step-4 .color,body.step-4 .yarn-lines,body.step-4 .carving {
  opacity: 1;
}

body.step-4 .carving path,body.step-4 .carving circle {
  animation: draw .9s ease forwards;
}

body.step-5 .color,body.step-5 .yarn-lines,body.step-5 .carving,body.step-5 .fibers {
  opacity: 1;
}

body.step-5 .rug {
  filter: drop-shadow(0 50px 90px rgba(155,95,62,.28));
}


/* ==========================================================================
   04 Shared sections, legal pages, footer and cookies
   ========================================================================== */

.contact,
.legal-page,
.not-found {
  position: relative;
  z-index: 3;
  padding: 120px clamp(22px,7vw,100px);
  background: linear-gradient(180deg,rgba(255,250,242,.22),rgba(255,250,242,.54));
}

.contact h2,
.legal-hero h1,
.not-found h1 {
  font-size: clamp(44px,6vw,92px);
  line-height: .9;
  letter-spacing: -.075em;
  margin: 0;
  max-width: 1040px;
}













.contact {
  text-align: center;
  display: grid;
  place-items: center;
  min-height: 76vh;
}

.contact-actions {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.site-footer {
  position: relative;
  z-index: 4;
  padding: 70px clamp(22px,7vw,100px);
  border-top: 1px solid var(--line);
  background: #f0dfc8;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3,.7fr);
  gap: 34px;
}

.footer-grid > * {
  min-width: 0;
}

.site-footer h2 {
  font-size: clamp(42px,5vw,82px);
  line-height: .85;
  letter-spacing: -.075em;
  margin: 0 0 18px;
}

.site-footer p,.site-footer a {
  color: rgba(23,19,15,.68);
  font-size: 14px;
  line-height: 1.8;
}

.site-footer a {
  text-decoration: none;
  display: block;
}

.footer-bottom {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.legal-page {
  padding-top: 140px;
}

.legal-hero {
  max-width: 900px;
  margin-bottom: 54px;
}

.legal-hero p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(220px,.34fr) minmax(0,1fr);
  gap: 60px;
}

.legal-layout > * {
  min-width: 0;
}

.legal-nav {
  position: sticky;
  top: 110px;
  align-self: start;
  display: grid;
  gap: 10px;
}

.legal-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

.legal-content {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.legal-card {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.legal-card h2 {
  font-size: clamp(28px,3vw,44px);
  letter-spacing: -.055em;
  margin: 0 0 14px;
}

.legal-card p,.legal-card li {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(23,19,15,.72);
}

.legal-card ul {
  padding-left: 22px;
}

.legal-form-block {
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px dashed rgba(61,42,27,.28);
  border-radius: 18px;
  background: rgba(61,42,27,.045);
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: var(--ink) !important;
}

/* ==========================================================================
   Showcase grids (galeria.html, gotowe.html) + placeholder media
   ========================================================================== */

.showcase-wrap {
  width: min(var(--container), 100%);
  margin: 0 auto;
}

.showcase-intro {
  max-width: 720px;
  margin: 0 0 44px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.showcase-grid > * {
  min-width: 0;
}

.showcase-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.showcase-media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px;
  background:
    repeating-linear-gradient(135deg, rgba(155,95,62,.10) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--cream) 0%, #ead8bd 100%);
}

.showcase-media svg {
  width: 36px;
  height: 36px;
  opacity: .55;
  stroke: var(--accent);
}

.showcase-media span {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(23,19,15,.5);
  max-width: 170px;
  line-height: 1.4;
}

.showcase-media.has-photo {
  padding: 0;
  background: var(--paper);
}

.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showcase-media .media-inset {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 30%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  border: 3px solid var(--paper);
  box-shadow: 0 10px 24px rgba(23,19,15,.28);
  overflow: hidden;
}

.showcase-media .media-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showcase-body {
  padding: 20px 22px 24px;
}

.showcase-body h3 {
  margin: 0 0 6px;
  font-size: 19px;
  letter-spacing: -.02em;
}

.showcase-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.showcase-badge {
  display: inline-flex;
  margin-top: 12px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: rgba(155,95,62,.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}

@media (max-width: 980px) {
  .showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Care page icon grid (pielegnacja.html)
   ========================================================================== */

.care-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.care-grid > * {
  min-width: 0;
}

.care-card {
  padding: 32px 30px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.care-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: radial-gradient(circle at 32% 28%, #fffaf0 0%, var(--cream) 46%, #ecd7b4 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.9), inset 0 -6px 12px rgba(155,95,62,.10);
}

.care-icon svg {
  width: 46px;
  height: 46px;
  color: var(--accent);
  stroke: var(--accent);
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.care-icon svg .ring {
  stroke-dasharray: 2.6 4.4;
  opacity: .3;
  stroke-width: 1.4;
}

.care-card h2 {
  font-size: 20px;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}

.care-card p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(23,19,15,.72);
  margin: 0;
}

@media (max-width: 860px) {
  .care-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Workshops page CTA panel (warsztaty.html)
   ========================================================================== */

.cta-panel {
  margin-top: 6px;
  padding: clamp(34px,4vw,54px) clamp(24px,5vw,56px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 18% 0%, rgba(11,74,54,.38), transparent 34%),
    linear-gradient(135deg, #0d1a15, #241e18);
  color: #fdf6ec;
  text-align: center;
}

.cta-panel .care-icon {
  margin: 0 auto 20px;
  background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.06));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18);
}

.cta-panel .care-icon svg {
  color: #f3dfbd;
  stroke: #f3dfbd;
}

.cta-panel .care-icon svg .ring {
  opacity: .45;
}

.cta-panel h2 {
  font-size: clamp(24px,3vw,32px);
  letter-spacing: -.03em;
  margin: 0 0 12px;
}

.cta-panel p {
  max-width: 540px;
  margin: 0 auto 26px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(253,246,236,.8);
}

.cta-panel-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 21px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(253,246,236,.38);
  color: #fdf6ec !important;
  font-weight: 750;
  text-decoration: none;
  transition: background .25s ease,transform .25s ease;
}

.secondary-btn:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
}

.cta-panel small {
  display: block;
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(253,246,236,.5);
}

/* ==========================================================================
   Lightbox (click-to-zoom for gallery / product photos)
   ========================================================================== */

.media-trigger {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.media-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23,19,15,0);
  transition: background .25s ease;
}

.media-trigger:hover::after,
.media-trigger:focus-visible::after {
  background: rgba(23,19,15,.12);
}

.media-trigger .zoom-hint {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(23,19,15,.55);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s ease,transform .2s ease;
  pointer-events: none;
}

.media-trigger:hover .zoom-hint,
.media-trigger:focus-visible .zoom-hint {
  opacity: 1;
  transform: scale(1);
}

.media-trigger .zoom-hint svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15,11,8,.92);
  backdrop-filter: blur(6px);
  padding: 40px;
}

.lightbox-overlay.is-open {
  display: flex;
}

body.lightbox-lock {
  overflow: hidden;
}

.lightbox-figure {
  margin: 0;
  max-width: min(90vw,900px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  display: block;
}

.lightbox-caption {
  color: rgba(253,246,236,.82);
  font-size: 14px;
  text-align: center;
  max-width: 520px;
}

.lightbox-caption[hidden] {
  display: none;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fdf6ec;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255,255,255,.24);
}

.lightbox-close {
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  font-size: 24px;
  line-height: 1;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  font-size: 26px;
}

.lightbox-prev {
  left: 16px;
}

.lightbox-next {
  right: 16px;
}

.lightbox-prev[hidden],
.lightbox-next[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .lightbox-overlay {
    padding: 16px;
  }

  .lightbox-close {
    top: 10px;
    right: 10px;
  }

  .lightbox-prev {
    left: 6px;
  }

  .lightbox-next {
    right: 6px;
  }
}

/* ==========================================================================
   Pricing calculator (wycena.html) 5.0.6
   ========================================================================== */

.pricing-layout {
  width: min(var(--container), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px,4vw,40px);
  align-items: stretch;
}

.pricing-layout > * {
  min-width: 0;
}

.pricing-panel {
  padding: clamp(24px,3.4vw,40px);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.64), rgba(255,255,255,.30));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.pricing-form .form-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.pricing-form .range-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pricing-form .range-row strong {
  color: var(--ink);
  font-weight: 900;
}

.pricing-form input[type="range"] {
  width: 100%;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(23,19,15,.14);
  accent-color: var(--ink);
  cursor: pointer;
}

.format-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  color: rgba(46,32,22,.78);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}

.format-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(61,42,27,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.7);
}

.format-option {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 10px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.format-option:hover {
  color: var(--ink);
}

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

.format-option.is-selected {
  background: linear-gradient(135deg, var(--accent-green,#0b4a36) 0%, var(--accent-green-deep,#082e21) 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(11,74,54,.28);
}

.format-option:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}



.pricing-area-readout {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
}

.pricing-result {
  position: sticky;
  top: 140px;
  text-align: left;
}

.pricing-result .eyebrow {
  margin-bottom: 10px;
}

.pricing-amount {
  font-size: clamp(34px,4vw,52px);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 900;
  margin: 0 0 10px;
}

.pricing-meta {
  margin: 0 0 18px;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}

.pricing-disclaimer {
  margin: 0 0 26px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.pricing-result .primary-btn {
  width: 100%;
}

/* Replaces the old full-width "Zapytaj o wycenę" CTA: the contact form is
   further down this same page, so a plain down-arrow cue to scroll there
   reads better than a second "ask for a quote" button. */
.scroll-to-form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border: 1px solid rgba(23,19,15,.16);
  border-radius: 50%;
  color: var(--ink);
  font-size: 20px;
  text-decoration: none;
  background: rgba(255,255,255,.4);
  transition: transform .25s ease, background .25s ease;
}

.scroll-to-form:hover {
  transform: translateY(4px);
  background: rgba(255,255,255,.7);
}

.scroll-to-form i {
  font-style: normal;
  line-height: 1;
}

@media (max-width:1100px) {
  .pricing-layout {
    grid-template-columns: 1fr;
  }

  .pricing-result {
    position: static;
  }

  .pricing-form .form-grid {
    grid-template-columns: 1fr;
  }
}

.cookie-banner {
  position: fixed;
  z-index: 80;
  right: 18px;
  bottom: 18px;
  width: min(360px,calc(100% - 36px));
  padding: 18px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(24px);
  border-radius: 28px;
  box-shadow: var(--shadow);
  display: none;
}

.cookie-banner.show {
  display: block;
}

.cookie-banner p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 14px;
}

.cookie-actions {
  display: flex;
  gap: 10px;
}

.cookie-actions button {
  flex: 1;
  border: 0;
  border-radius: var(--radius-pill);
  min-height: 42px;
  font-weight: 850;
  cursor: pointer;
}

.accept-cookies {
  background: var(--ink);
  color: white;
}

.reject-cookies {
  background: rgba(23,19,15,.08);
  color: var(--ink);
}


/* ==========================================================================
   05 Core keyframes and global media queries
   ========================================================================== */

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pop {
  from {
    transform: scale(.72);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: .98;
  }
}

@keyframes toolFloat {
  0%,100% {
    margin-top: 0;
    rotate: 0deg;
  }

  50% {
    margin-top: -14px;
    rotate: 3deg;
  }
}

@media (max-width:1100px) {
  .hero-sticky {
    grid-template-columns: 1fr;
    align-content: start;
    padding-top: 100px;
  }

  body.ys-v500 .scroll-hint .chev-stack {
    display: inline-flex;
  }

  body.ys-v500 .scroll-hint-arrows {
    display: none;
  }

  .process-panel {
    order: 2;
  }

  .product-stage {
    height: 58vh;
  }

  .art-wrap {
    width: min(72vw,430px);
  }

  .hero-process {
    height: 700vh;
  }

  

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width:640px) {
  .nav {
    height: 58px;
    top: 10px;
  }

  .brand {
    font-size: 14px;
  }

  .hero-copy h1 {
    font-size: clamp(56px,18vw,86px);
  }

  .hero-sticky {
    padding: 86px 18px 24px;
  }

  .product-stage {
    height: 54vh;
  }

  .floating-tool {
    width: 48px;
    height: 48px;
  }

  .floating-tool.is-main {
    width: 58px;
    height: 58px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .contact,
.legal-page,
.not-found {
    padding: 90px 22px;
  }

  .site-footer {
    padding: 54px 22px;
  }

  .lang-toggle {
    margin-left: auto;
  }

  .co-create strong {
    font-size: 42px;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}




/* ==========================================================================
   06 Homepage storytelling and order sections
   ========================================================================== */





















































































@media (max-width:900px) {
  

  

  

  

  

  
}

@media (max-width:640px) {
  

  

  

  

  

  

  

  
}

.greece-collection {
  position: relative;
  z-index: 3;
  padding: 120px clamp(22px,7vw,100px);
  background: #f7efe3;
  border-top: 1px solid var(--line);
}







.collection-points article {
  padding: 28px;
  border: 1px solid rgba(23,19,15,.1);
  border-radius: 30px;
  background: rgba(255,250,242,.6);
  box-shadow: 0 24px 80px rgba(52,35,20,.06);
}





.collection-points p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.greece-collection {
  display: grid;
  grid-template-columns: 1fr .86fr;
  gap: clamp(26px,6vw,90px);
  align-items: start;
  background: linear-gradient(180deg,#fffaf2,#f0dfc8);
}

.collection-copy h2 {
  font-size: clamp(48px,7vw,108px);
  letter-spacing: -.08em;
  line-height: .88;
  margin: 0 0 24px;
}

.collection-copy p {
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 660px;
}

.collection-copy .primary-btn {
  margin-top: 28px;
  display: inline-flex;
}

.collection-points {
  display: grid;
  gap: 16px;
}

.collection-points b {
  display: block;
  font-size: 18px;
  margin-bottom: 10px;
}







@media (max-width:1100px) {
  

  .greece-collection {
    grid-template-columns: 1fr;
  }

  .journey-essence {
    grid-template-columns: 1fr;
  }

  .journey-essence-copy {
    position: static;
    margin-bottom: 10px;
  }

  

  .hero-process {
    height: 620vh;
  }

  .hero-sticky {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
  }

  .process-panel {
    display: none;
  }

  .hero-copy {
    max-width: 720px;
  }

  .product-stage {
    height: 58vh;
  }

  .rug {
    max-height: 56vh;
  }

  .toolfield {
    display: none;
  }
}

@media (max-width:720px) {
  body:before,.grain {
    display: none;
  }

  .nav {
    backdrop-filter: none;
    background: rgba(247,239,227,.94);
  }

  .hero-process {
    height: auto;
  }

  .hero-sticky {
    position: relative;
    min-height: auto;
    display: block;
    padding: 96px 22px 40px;
  }

  .hero-copy h1 {
    font-size: clamp(52px,16vw,78px);
    line-height: .86;
  }

  .lead {
    font-size: 16px;
  }

  .product-stage {
    height: auto;
    min-height: 420px;
    margin-top: 28px;
    perspective: none;
  }

  .product-glow {
    filter: none;
    opacity: .65;
  }

  .rug {
    width: min(88vw,390px);
    max-height: none;
    filter: none;
  }

  .piece.backing {
    filter: none;
  }

  .scroll-spacer {
    display: none;
  }

  .mermaid-rug {
    filter: none;
  }

  .greece-collection {
    padding: 84px 22px;
  }

  

  .collection-points article {
    padding: 22px;
    border-radius: 24px;
  }

  .collection-copy h2 {
    font-size: clamp(44px,13vw,72px);
  }

  .collection-copy p {
    font-size: 16px;
  }

  .contact {
    min-height: 54vh;
  }

  .contact h2 {
    font-size: clamp(42px,13vw,70px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .floating-tool,
.art-wrap {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}









/* ==========================================================================
   07 Travel index and journey base pages
   ========================================================================== */



























.journey-greece {
  --accent: #1f84c7;
  background: linear-gradient(180deg,#f8fbff 0%,#dceffc 38%,#fffaf2 100%);
}

.journey-hero,.route-section,.journal-chapter,.journey-stats {
  position: relative;
  z-index: 3;
  padding: 130px clamp(22px,7vw,100px);
  border-top: 1px solid rgba(23,19,15,.08);
}

.journey-hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px,6vw,90px);
  align-items: center;
  background: radial-gradient(circle at 80% 18%,rgba(255,255,255,.9),transparent 30%),linear-gradient(180deg,#eef8ff,#dceffc);
}

.journey-hero h1 {
  font-size: clamp(84px,14vw,210px);
  line-height: .78;
  letter-spacing: -.105em;
  margin: 0 0 30px;
}

.journey-hero p {
  font-size: clamp(18px,1.7vw,25px);
  line-height: 1.55;
  color: rgba(23,19,15,.72);
  max-width: 650px;
}

.chapter-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.chapter-nav a {
  padding: 12px 16px;
  border: 1px solid rgba(23,19,15,.12);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.58);
  color: var(--ink);
  text-decoration: none;
  font-weight: 850;
}

/* ==========================================================================
   Journey pages 5.0.5 — simplified single-page template
   (short hero + one "essence" block + contact — replaces the old
   multi-chapter/map/stats layout on the journey subpages)
   ========================================================================== */

.journey-simple-hero {
  position: relative;
  z-index: 3;
  padding: 100px clamp(22px,7vw,100px) 84px;
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid rgba(23,19,15,.08);
  background: radial-gradient(circle at 80% 18%,rgba(255,255,255,.9),transparent 30%),linear-gradient(180deg,#eef8ff,#dceffc);
}

.journey-simple-hero h1 {
  font-size: clamp(64px,10vw,150px);
  line-height: .84;
  letter-spacing: -.09em;
  margin: 0 0 24px;
}

.journey-simple-hero .lead {
  max-width: 640px;
  font-size: clamp(18px,1.7vw,23px);
}

.journey-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 8px 18px 8px 8px;
  border: 1px solid rgba(23,19,15,.12);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.58);
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  width: fit-content;
}

.journey-color-chip i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c,#1f84c7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.journey-essence {
  position: relative;
  z-index: 3;
  padding: 90px clamp(22px,7vw,100px) 130px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px,6vw,90px);
  align-items: start;
}

.journey-essence-copy {
  position: sticky;
  top: 140px;
}

.journey-essence-copy h2 {
  font-size: clamp(38px,5vw,64px);
  letter-spacing: -.07em;
  line-height: .96;
  margin: 0 0 20px;
}

.journey-essence-copy p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 520px;
}

.journey-essence-grid {
  grid-template-columns: 1fr;
}

.journey-palette-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.journey-palette-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.journey-palette-list i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(23,19,15,.08);
}

.journey-hero-art {
  min-height: 660px;
  position: relative;
}

.aegean-sun {
  position: absolute;
  right: 7%;
  top: 4%;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f3c65f;
}

.aegean-sea {
  position: absolute;
  left: 12%;
  right: 0;
  bottom: 12%;
  height: 32%;
  border-radius: 40px;
  background: #1f84c7;
}

.aegean-arch {
  position: absolute;
  left: 0;
  top: 16%;
  width: 58%;
  height: 68%;
  border-radius: 999px 999px 42px 42px;
  background: #fffaf2;
  box-shadow: 0 38px 100px rgba(31,132,199,.16);
}

.aegean-arch:after {
  content: "";
  position: absolute;
  inset: 20% 20% 0;
  border-radius: 999px 999px 28px 28px;
  background: #dceffc;
}

.aegean-card {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(350px,72%);
  padding: 26px;
  border-radius: 32px;
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 24px 80px rgba(23,19,15,.1);
}

.aegean-card span {
  font-weight: 900;
  color: #1f84c7;
}

.aegean-card strong,.aegean-card b {
  display: block;
}

.aegean-card strong {
  margin: 12px 0;
  color: var(--muted);
}

.aegean-card b {
  font-size: 26px;
  letter-spacing: -.05em;
}

.route-section {
  display: grid;
  grid-template-columns: .62fr 1.38fr;
  gap: clamp(28px,6vw,90px);
  align-items: center;
  background: #fffaf2;
}

.route-section h2,.journal-copy h2 {
  font-size: clamp(50px,7vw,112px);
  line-height: .86;
  letter-spacing: -.08em;
  margin: 0 0 22px;
}

.route-section p,.journal-copy p {
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
}

.route-board {
  position: relative;
  min-height: 470px;
  border-radius: 46px;
  background: linear-gradient(180deg,#f8fbff,#dceffc);
  overflow: hidden;
  border: 1px solid rgba(31,132,199,.12);
  box-shadow: 0 28px 90px rgba(31,132,199,.14);
}

.route-board svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.route-bg {
  fill: rgba(255,255,255,.65);
  stroke: rgba(31,132,199,.18);
  stroke-width: 3;
}

.route-line-main {
  fill: none;
  stroke: #1f84c7;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 12 14;
}

.plane {
  fill: #17130f;
  offset-path: path("M230 250C330 156 480 120 616 178C676 204 730 252 780 316");
  animation: flight 6s ease-in-out infinite;
}

.route-point {
  position: absolute;
  z-index: 2;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: white;
  font-weight: 900;
  box-shadow: 0 12px 40px rgba(23,19,15,.1);
}

.route-pl {
  left: 21%;
  top: 56%;
}

.route-gr {
  right: 10%;
  bottom: 20%;
}

@keyframes flight {
  0% {
    offset-distance: 0%;
    transform: rotate(10deg);
  }

  50% {
    offset-distance: 100%;
    transform: rotate(10deg);
  }

  100% {
    offset-distance: 0%;
    transform: rotate(190deg);
  }
}

.journal-chapter {
  display: grid;
  grid-template-columns: .28fr .72fr .8fr;
  gap: clamp(24px,5vw,70px);
  align-items: center;
  background: #f8fbff;
  min-height: 90vh;
}

.journal-chapter.alt {
  background: #dceffc;
}

.chapter-number {
  font-weight: 900;
  color: #1f84c7;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.journal-visual {
  min-height: 480px;
  border-radius: 46px;
  background: #fffaf2;
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(31,132,199,.12);
}

.white-visual span {
  position: absolute;
  background: #1f84c7;
  border-radius: 999px 999px 32px 32px;
}

.white-visual span:nth-child(1) {
  left: 12%;
  bottom: 0;
  width: 28%;
  height: 70%;
}

.white-visual span:nth-child(2) {
  left: 38%;
  bottom: 0;
  width: 24%;
  height: 52%;
  background: #fff;
}

.white-visual span:nth-child(3) {
  right: 10%;
  bottom: 0;
  width: 22%;
  height: 82%;
  background: #f3c65f;
}

.palette-strip {
  display: grid;
  gap: 12px;
}

.palette-strip span {
  min-height: 82px;
  border-radius: 24px;
  background: var(--c);
  display: flex;
  align-items: end;
  padding: 18px;
  font-weight: 900;
  border: 1px solid rgba(23,19,15,.08);
}

.arch-study {
  min-height: 460px;
  border-radius: 46px;
  background: #fffaf2;
  display: flex;
  align-items: end;
  gap: 18px;
  padding: 34px;
  overflow: hidden;
}

.arch-study i {
  flex: 1;
  height: 80%;
  border-radius: 999px 999px 0 0;
  background: #1f84c7;
}

.arch-study i:nth-child(2) {
  height: 58%;
  background: #dceffc;
}

.arch-study i:nth-child(3) {
  height: 72%;
  background: #f3c65f;
}

.journey-stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  background: #17130f;
  color: #fff;
}

.journey-stats div {
  padding: 28px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 30px;
}

.journey-stats span {
  display: block;
  font-size: clamp(30px,4vw,56px);
  font-weight: 900;
  letter-spacing: -.06em;
}

.journey-stats p {
  color: rgba(255,255,255,.68);
  line-height: 1.5;
  margin: 8px 0 0;
}

@media (max-width:980px) {
  .journey-hero,
.route-section,
.journal-chapter {
    grid-template-columns: 1fr;
  }

  .journey-stats {
    grid-template-columns: 1fr 1fr;
  }

  .journey-hero-art {
    min-height: 520px;
  }

  .journal-chapter {
    min-height: auto;
  }

  .chapter-number {
    order: -1;
  }
}

@media (max-width:640px) {
  .journey-hero,
.route-section,
.journal-chapter,
.journey-stats {
    padding: 90px 22px;
  }

  .journey-hero h1 {
    font-size: clamp(76px,24vw,118px);
  }

  .journey-hero-art,.route-board,.journal-visual,.arch-study {
    min-height: 360px;
  }

  .journey-stats {
    grid-template-columns: 1fr;
  }

  

  .chapter-nav a {
    font-size: 13px;
  }

  .route-pl {
    left: 8%;
    top: 54%;
  }

  .route-gr {
    right: 6%;
    bottom: 18%;
  }
}

.nav nav {
  overflow: visible;
}








/* ==========================================================================
   08 Dropdown refinements and additional journey themes
   ========================================================================== */













.journey-iceland {
  --accent: #3f91a8;
  background: linear-gradient(180deg,#f4f8f9 0%,#dbe8ee 42%,#f7f2e8 100%);
}

.journey-iceland .journey-hero {
  background: radial-gradient(circle at 78% 12%,rgba(255,255,255,.9),transparent 28%),linear-gradient(180deg,#f4f8f9,#dbe8ee);
}

.journey-iceland .route-board {
  background: linear-gradient(180deg,#f4f8f9,#dbe8ee);
  box-shadow: 0 28px 90px rgba(63,145,168,.14);
}

.journey-iceland .route-bg {
  stroke: rgba(63,145,168,.2);
}

.journey-iceland .route-line-main {
  stroke: #3f91a8;
}

.journey-iceland .chapter-number,.journey-iceland .aegean-card span {
  color: #3f91a8;
}

.journey-iceland .journal-chapter {
  background: #f4f8f9;
}

.journey-iceland .journal-chapter.alt {
  background: #dbe8ee;
}

.journey-iceland .greece-collection {
  background: linear-gradient(180deg,#f7f2e8,#f4f8f9);
}

.iceland-art {
  min-height: 660px;
  position: relative;
}

.ice-sun {
  position: absolute;
  right: 7%;
  top: 7%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #eef5f7;
  border: 1px solid rgba(32,36,39,.08);
  box-shadow: 0 0 80px rgba(255,255,255,.9);
}

.ice-mountain {
  position: absolute;
  left: 0;
  right: 5%;
  bottom: 20%;
  height: 62%;
  background: #202427;
  clip-path: polygon(0 100%,18% 46%,31% 72%,48% 24%,65% 70%,80% 36%,100% 100%);
  border-radius: 0 0 40px 40px;
}

.ice-mountain:after {
  content: "";
  position: absolute;
  left: 8%;
  right: 18%;
  bottom: 0;
  height: 62%;
  background: #9fc8d6;
  clip-path: polygon(0 100%,22% 42%,36% 68%,54% 18%,70% 74%,84% 36%,100% 100%);
  opacity: .95;
}

.ice-water {
  position: absolute;
  left: 12%;
  right: 0;
  bottom: 6%;
  height: 24%;
  border-radius: 40px;
  background: repeating-linear-gradient(180deg,#9fc8d6 0 18px,#dbe8ee 18px 34px);
}

.glacier-visual span {
  position: absolute;
  bottom: 0;
  background: #9fc8d6;
}

.glacier-visual span:nth-child(1) {
  left: 0;
  width: 42%;
  height: 64%;
  clip-path: polygon(0 100%,40% 18%,100% 100%);
}

.glacier-visual span:nth-child(2) {
  left: 28%;
  width: 42%;
  height: 82%;
  clip-path: polygon(0 100%,50% 0,100% 100%);
  background: #eef5f7;
}

.glacier-visual span:nth-child(3) {
  right: 0;
  width: 44%;
  height: 58%;
  clip-path: polygon(0 100%,55% 22%,100% 100%);
  background: #202427;
}

.waterfall-study {
  min-height: 460px;
  border-radius: 46px;
  background: #202427;
  position: relative;
  overflow: hidden;
}

.waterfall-study i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 0 0 999px 999px;
}

.waterfall-study i:nth-child(1) {
  left: 12%;
  width: 22%;
  background: #9fc8d6;
}

.waterfall-study i:nth-child(2) {
  left: 38%;
  width: 12%;
  background: #eef5f7;
}

.waterfall-study i:nth-child(3) {
  right: 12%;
  width: 30%;
  background: #6f7f7a;
}

.journey-iceland .aegean-card {
  box-shadow: 0 24px 80px rgba(32,36,39,.14);
}

@media (max-width:720px) {
  .iceland-art {
    min-height: 420px;
  }
}













@media (max-width:720px) {
  

  
}









.nav .lang-toggle {
  flex-shrink: 0;
}

@media (max-width:1100px) {
  .nav .lang-toggle {
    margin-left: auto;
    margin-right: 10px;
  }
}

.journey-italy {
  --accent: #b86f4b;
  background: linear-gradient(180deg,#fff8ef 0%,#ead3bb 42%,#fffaf2 100%);
}

.journey-italy .journey-hero {
  background: radial-gradient(circle at 78% 12%,rgba(255,255,255,.9),transparent 28%),linear-gradient(180deg,#fff8ef,#ead3bb);
}

.journey-italy .route-board {
  background: linear-gradient(180deg,#fff8ef,#ead3bb);
  box-shadow: 0 28px 90px rgba(184,111,75,.14);
}

.journey-italy .route-bg {
  stroke: rgba(184,111,75,.22);
}

.journey-italy .route-line-main {
  stroke: #b86f4b;
}

.journey-italy .chapter-number,.journey-italy .aegean-card span {
  color: #b86f4b;
}

.journey-italy .journal-chapter {
  background: #fff8ef;
}

.journey-italy .journal-chapter.alt {
  background: #ead3bb;
}

.journey-italy .greece-collection {
  background: linear-gradient(180deg,#fffaf2,#ead3bb);
}

.journey-italy .aegean-sea {
  background: #b86f4b;
}

.journey-italy .aegean-arch:after {
  background: #ead3bb;
}

.journey-italy .white-visual span:nth-child(1) {
  background: #b86f4b;
}

.journey-italy .white-visual span:nth-child(3) {
  background: #d9b56f;
}

.journey-italy .arch-study i {
  background: #b86f4b;
}

.journey-italy .arch-study i:nth-child(2) {
  background: #ead3bb;
}

.journey-italy .arch-study i:nth-child(3) {
  background: #6f7f4f;
}

.journey-italy .route-gr {
  right: 10%;
  bottom: 20%;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 999;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-weight: 850;
  transform: translateY(-150%);
  transition: transform .2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid rgba(155,95,62,.35);
  outline-offset: 3px;
}

a:focus-visible,button:focus-visible {
  outline: 3px solid rgba(155,95,62,.36);
  outline-offset: 4px;
  border-radius: 14px;
}





.lang-toggle button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgba(23,19,15,.08);
}

.cookie-actions button:focus-visible {
  outline-offset: 3px;
}


/* ==========================================================================
   09 Accessibility and reduced-motion hardening
   ========================================================================== */

.art-wrap,.toolfield,.floating-tool {
  will-change: transform;
}

@media (max-width:720px) {
  html {
    scroll-padding-top: 82px;
  }

  

  
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  .art-wrap,.toolfield,.floating-tool {
    will-change: auto;
  }
}





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

/* --------------------------------------------------------------------------
   Yarnly Studio v3.0 — conversion contact form
   -------------------------------------------------------------------------- */
.contact-studio {
  text-align: left;
  display: block;
  min-height: auto;
  padding: clamp(84px,12vw,150px) clamp(22px,7vw,100px);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.72), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.44), rgba(216,190,154,.22));
}

.contact-shell {
  width: min(var(--container), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(340px,1.12fr);
  gap: clamp(28px,5vw,76px);
  align-items: center;
}

.contact-copy h2 {
  font-size: clamp(38px,4.6vw,72px);
  line-height: .96;
  letter-spacing: -.06em;
  max-width: 560px;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.contact-lead {
  margin: 26px 0 0;
  max-width: 560px;
  color: var(--muted);
  font-size: clamp(17px,1.7vw,22px);
  line-height: 1.55;
}

.contact-journey {
  margin-top: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: rgba(46,32,22,.72);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-journey span {
  padding: 10px 13px;
  border: 1px solid rgba(61,42,27,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  backdrop-filter: blur(14px);
}

.contact-journey i {
  width: 24px;
  height: 1px;
  background: rgba(61,42,27,.24);
}

.project-form {
  position: relative;
  padding: clamp(22px,3vw,34px);
  border: 1px solid rgba(61,42,27,.12);
  border-radius: clamp(28px,4vw,44px);
  background: rgba(255,255,255,.58);
  box-shadow: 0 34px 100px rgba(61,42,27,.13);
  backdrop-filter: blur(24px);
}

.project-form::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border-radius: calc(clamp(28px,4vw,44px) - 10px);
  border: 1px solid rgba(255,255,255,.55);
}

.form-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.form-grid > * {
  min-width: 0;
}

.project-form label {
  display: grid;
  gap: 9px;
  color: rgba(46,32,22,.78);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}

.project-form label.full {
  grid-column: 1 / -1;
}

.project-form em {
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
}

.project-form input,
.project-form select,
.project-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(61,42,27,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.7);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  padding: 15px 16px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
  box-sizing: border-box;
}

.project-form textarea {
  resize: vertical;
  min-height: 132px;
  line-height: 1.5;
}

.project-form input:focus,
.project-form select:focus,
.project-form textarea:focus {
  border-color: rgba(46,32,22,.42);
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 4px rgba(61,42,27,.08);
}

.project-form input[type="file"] {
  min-width: 0;
  max-width: 100%;
  padding: 13px;
  cursor: pointer;
}

.calc-carryover-value {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 15px;
  border: 1px dashed rgba(61,42,27,.22);
  border-radius: 18px;
  background: rgba(61,42,27,.045);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  padding: 15px 16px;
  box-sizing: border-box;
}

.file-field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
}

.consent {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px !important;
  font-size: 12px !important;
  line-height: 1.45;
  color: var(--muted) !important;
}

.consent input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  padding: 0;
  accent-color: var(--ink);
}

.form-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.form-status {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.project-form.was-submitted :invalid {
  border-color: rgba(168,55,38,.65);
}

@media (max-width: 940px) {
  .contact-shell {
    grid-template-columns: 1fr;
  }

  .contact-copy h2 {
    max-width: 760px;
  }
}

@media (max-width: 640px) {
  .contact-studio {
    padding: 72px 18px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .project-form {
    border-radius: 28px;
    padding: 20px;
  }

  .contact-journey {
    display: none;
  }
}

/* ==========================================================================
   v3.1 Homepage process composition
   Central animated artwork with side narrative + live progress.
   ========================================================================== */

.hero-sticky {
  grid-template-columns: minmax(260px,.68fr) minmax(430px,1.34fr) minmax(230px,.58fr);
}

.hero-copy {
  align-self: center;
}











.product-stage {
  isolation: isolate;
}

.product-stage::before,
.product-stage::after {
  content: "";
  position: absolute;
  inset: 8% 17%;
  border-radius: 44%;
  border: 1px solid rgba(23,19,15,.055);
  transform: rotate(-7deg);
  pointer-events: none;
}

.product-stage::after {
  inset: 14% 23%;
  transform: rotate(8deg);
  border-color: rgba(255,255,255,.72);
}

.process-panel {
  padding: 24px;
  border: 1px solid rgba(23,19,15,.08);
  border-radius: 30px;
  background: rgba(255,250,242,.52);
  box-shadow: 0 24px 80px rgba(52,35,20,.06);
  backdrop-filter: blur(18px);
}

.process-list li {
  border-radius: 16px;
  padding: 8px 10px;
}

.process-list li.active {
  background: rgba(255,255,255,.62);
  box-shadow: 0 12px 36px rgba(52,35,20,.055);
}

.contact-studio {
  border-top: 1px solid rgba(23,19,15,.1);
}

@media (max-width:1100px) {
  .hero-sticky {
    grid-template-columns: 1fr;
  }

  

  

  

  .product-stage::before,
  .product-stage::after {
    display: none;
  }
}

@media (max-width:720px) {
  
}

/* ======================================================================
   Yarnly Studio 5.0.0 — Premium visual system override
   Sprint 1: design system, navigation, hero, contact, mobile polish.
   ====================================================================== */

:root {
  --bg: #f7efe9;
  --paper: #fffaf5;
  --ink: #15110d;
  --muted: #736a60;
  --line: rgba(21,17,13,.105);
  --soft: rgba(255,255,255,.66);
  --cream: #ead8bd;
  --navy: #172233;
  --red: #a94f3f;
  --skin: #dca67c;
  --accent: #8b6248;
  --accent-2: #c59b6f;
  --glow: rgba(255,244,225,.72);
  --glass-bg: rgba(255,255,255,.60);
  --glass-border: rgba(255,255,255,.82);
  --shadow: 0 34px 110px rgba(44,31,20,.15);
  --shadow-soft: 0 18px 58px rgba(44,31,20,.09);
  --container: 1220px;
  --page-x: clamp(18px, 4vw, 54px);
  --radius-pill: 999px;
  --radius-xl: 42px;
  --focus-ring: 0 0 0 4px rgba(139,98,72,.24);
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.ys-v500 {
  color: var(--ink);
  background:
    radial-gradient(circle at 13% 9%, rgba(255,255,255,.86), transparent 25%),
    radial-gradient(circle at 82% 14%, rgba(232,205,168,.46), transparent 29%),
    radial-gradient(circle at 63% 76%, rgba(169,124,86,.13), transparent 33%),
    linear-gradient(135deg, #fffaf5 0%, #f7efe9 38%, #efe0cf 100%);
}

body.ys-v500::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(21,17,13,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21,17,13,.026) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 72%);
}

body.ys-v500 .grain {
  opacity: .115;
  mix-blend-mode: soft-light;
}

body.ys-v500 main,
body.ys-v500 .site-footer {
  position: relative;
  z-index: 2;
}

body.ys-v500 ::selection {
  color: #fff;
  background: #15110d;
}

body.ys-v500 a,
body.ys-v500 button,
body.ys-v500 input,
body.ys-v500 textarea,
body.ys-v500 select {
  -webkit-tap-highlight-color: transparent;
}

body.ys-v500 a:focus-visible,
body.ys-v500 button:focus-visible,
body.ys-v500 input:focus-visible,
body.ys-v500 textarea:focus-visible,
body.ys-v500 select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Navigation 5.0 */
body.ys-v500 .nav {
  top: 16px;
  width: min(1240px, calc(100% - var(--page-x)));
  min-height: 68px;
  height: auto;
  padding: 9px 10px 9px 14px;
  border: 1px solid rgba(255,255,255,.78);
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  backdrop-filter: blur(28px) saturate(142%);
  -webkit-backdrop-filter: blur(28px) saturate(142%);
  box-shadow: 0 18px 70px rgba(50,35,22,.12), inset 0 1px 0 rgba(255,255,255,.8);
  /* Base .nav uses justify-content:space-between across 4 items (brand, nav,
     lang-toggle, cta). With only 3 links left in the nav (Podróże removed),
     that rule stretched huge, uneven-looking gaps around the shrunken link
     cluster. Pin the brand left and group everything else tightly on the
     right instead, so spacing stays balanced regardless of link count. */
  gap: 28px;
}

body.ys-v500 .nav > nav {
  margin-left: auto;
}

@media (min-width: 861px) {
  /* Symmetric header: two equal auto-margins split the bar's free
     space into matching gaps before the nav links and before the
     icon/lang/CTA cluster, so the link pill sits visually centered
     between the logo and the actions on the right -- no overlap,
     since the split is based on each group's real width, not a fixed
     50% of the whole bar. */
  body.ys-v500 .nav-social {
    margin-left: auto;
  }
}

body.ys-v500 .brand {
  gap: 12px;
  font-size: 15px;
  letter-spacing: -.035em;
}

body.ys-v500 .brand-logo {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 14px 36px rgba(27,18,11,.13);
}

body.ys-v500 .nav nav {
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(255,255,255,.62);
}

body.ys-v500 .nav nav > a {
  min-height: 39px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 780;
  color: rgba(21,17,13,.72);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

body.ys-v500 .nav nav > a:hover {
  color: var(--ink);
  background: rgba(255,255,255,.68);
  transform: translateY(-1px);
}



body.ys-v500 .lang-toggle {
  background: rgba(255,255,255,.40);
  border-color: rgba(255,255,255,.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

body.ys-v500 .lang-toggle button.active {
  background: linear-gradient(135deg, #17130f, #32271f);
}

body.ys-v500 .nav-cta,
body.ys-v500 .primary-btn {
  min-height: 48px;
  padding: 0 22px;
  background: linear-gradient(135deg, #17130f 0%, #2d241d 100%);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 18px 48px rgba(21,17,13,.18), inset 0 1px 0 rgba(255,255,255,.16);
}

body.ys-v500 .nav-cta:hover,
body.ys-v500 .primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 68px rgba(21,17,13,.24), inset 0 1px 0 rgba(255,255,255,.2);
}

body.ys-v500 .secondary-link {
  font-weight: 850;
  color: rgba(21,17,13,.74);
  text-underline-offset: 7px;
  text-decoration-color: rgba(21,17,13,.22);
}

/* Homepage hero 5.0 */
body.ys-v500 .hero-process {
  height: 660vh;
}

body.ys-v500 .hero-sticky {
  padding: 126px var(--page-x) 42px;
  grid-template-columns: minmax(290px,.72fr) minmax(420px,1.1fr) minmax(242px,.55fr);
  gap: clamp(24px, 4.2vw, 74px);
}

body.ys-v500 .hero-copy {
  position: relative;
  z-index: 3;
}

body.ys-v500 .eyebrow {
  color: rgba(21,17,13,.58);
  font-weight: 900;
  letter-spacing: .22em;
}

body.ys-v500 .hero-copy h1 {
  max-width: 740px;
  margin-bottom: 30px;
  font-size: clamp(64px, 8.35vw, 142px);
  line-height: .78;
  letter-spacing: -.105em;
  text-wrap: balance;
}

body.ys-v500 .hero-copy h1::after {
  content: "";
  display: block;
  width: min(240px, 42vw);
  height: 1px;
  margin-top: 28px;
  background: linear-gradient(90deg, rgba(21,17,13,.62), transparent);
}

body.ys-v500 .lead,
body.ys-v500 .hero-copy .lead {
  max-width: 520px;
  color: rgba(21,17,13,.62);
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.38;
  letter-spacing: -.035em;
}

body.ys-v500 .hero-actions {
  gap: 16px;
  margin-top: 34px;
  flex-wrap: wrap;
}











body.ys-v500 .product-stage {
  min-height: min(74vh, 780px);
  border-radius: 54px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.82), transparent 31%),
    linear-gradient(145deg, rgba(255,255,255,.50), rgba(255,255,255,.18));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 44px 130px rgba(45,32,21,.13), inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.ys-v500 .product-stage::before {
  inset: 5% 13%;
  border-color: rgba(21,17,13,.065);
}

body.ys-v500 .product-stage::after {
  inset: 12% 20%;
  border-color: rgba(255,255,255,.90);
}

body.ys-v500 .product-glow {
  filter: blur(6px);
  opacity: .92;
}

body.ys-v500 .art-wrap {
  filter: drop-shadow(0 34px 46px rgba(38,24,14,.18));
}

body.ys-v500 .rug {
  transform-origin: center;
}

body.ys-v500 .process-panel {
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.72);
  background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(255,255,255,.34));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.76);
}

/* "Scroll to see the process" nudge: floats centered right above the
   artwork (first child of .product-stage, which is already
   position:relative), on both mobile and desktop, since that's exactly
   where a visitor's attention already is. High-contrast dark pill + a
   cascading triple-chevron cue reads as a real call to action instead of
   a quiet caption. Dismissed for good the moment process-animation.js
   sees any real scroll progress. */
body.ys-v500 .scroll-hint {
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
  animation: ysScrollHintFloat 2s ease-in-out infinite;
  transition: opacity .4s ease, visibility .4s ease;
}

body.ys-v500 .scroll-hint .chev-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

@media (min-width:1101px) {
  body.ys-v500 .scroll-hint .chev-stack {
    display: none;
  }
}

/* Standalone waving arrows sitting in the gap between the artwork and the
   "Proces na żywo" card, vertically centered on that gap. The text stays
   at the top on its own. */
body.ys-v500 .scroll-hint-arrows {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(calc(50% + 20px), -50%);
  z-index: 4;
  pointer-events: none;
  transition: opacity .4s ease, visibility .4s ease;
}

body.ys-v500 .scroll-hint-arrows .chev-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
}

body.ys-v500 .scroll-hint-arrows .chev-stack i {
  font-style: normal;
  display: block;
  width: 15px;
  height: 15px;
  border-right: 3px solid var(--accent-green);
  border-bottom: 3px solid var(--accent-green);
  transform: rotate(45deg);
  animation: ysChevWaveBig 1.9s ease-in-out infinite;
}

body.ys-v500 .scroll-hint-arrows .chev-stack i:nth-child(1) { animation-delay: 0s; }
body.ys-v500 .scroll-hint-arrows .chev-stack i:nth-child(2) { animation-delay: .16s; }
body.ys-v500 .scroll-hint-arrows .chev-stack i:nth-child(3) { animation-delay: .32s; }
body.ys-v500 .scroll-hint-arrows .chev-stack i:nth-child(4) { animation-delay: .48s; }
body.ys-v500 .scroll-hint-arrows .chev-stack i:nth-child(5) { animation-delay: .64s; }
body.ys-v500 .scroll-hint-arrows .chev-stack i:nth-child(6) { animation-delay: .80s; }

body.ys-v500 .scroll-hint-arrows.is-dismissed {
  opacity: 0;
  visibility: hidden;
}

body.ys-v500 .scroll-hint .chev-stack i {
  font-style: normal;
  display: block;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent-green);
  border-bottom: 2px solid var(--accent-green);
  transform: rotate(45deg);
  animation: ysChevWave 1.3s ease-in-out infinite;
}

body.ys-v500 .scroll-hint .chev-stack i:nth-child(1) { animation-delay: 0s; }
body.ys-v500 .scroll-hint .chev-stack i:nth-child(2) { animation-delay: .16s; }
body.ys-v500 .scroll-hint .chev-stack i:nth-child(3) { animation-delay: .32s; }

@keyframes ysChevWave {
  0%, 100% { margin-top: 0; opacity: .35; }
  50% { margin-top: 4px; opacity: 1; }
}

@keyframes ysChevWaveBig {
  0%, 100% { margin-top: 0; opacity: .3; }
  50% { margin-top: 7px; opacity: 1; }
}

@keyframes ysScrollHintFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

body.ys-v500 .scroll-hint.is-dismissed {
  opacity: 0;
  visibility: hidden;
}

body.ys-v500 .co-create strong {
  letter-spacing: -.06em;
}

body.ys-v500 .sync-line {
  background: rgba(21,17,13,.08);
}

body.ys-v500 .sync-line i {
  background: linear-gradient(90deg, #15110d, #a87b54);
}

body.ys-v500 .process-list li.active {
  background: rgba(255,255,255,.76);
}

/* Contact 5.0 */
body.ys-v500 .contact,
body.ys-v500 .contact-studio {
  border-top: 0;
  padding-inline: var(--page-x);
}

body.ys-v500 .contact-shell,
body.ys-v500 .legal-card,
body.ys-v500 .journey-hero,
body.ys-v500 .journey-simple-hero,
body.ys-v500 .route-section,
body.ys-v500 .journal-chapter,
body.ys-v500 .greece-collection {
  border: 1px solid rgba(255,255,255,.72);
  background: linear-gradient(145deg, rgba(255,255,255,.64), rgba(255,255,255,.30));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.ys-v500 .contact-shell {
  border-radius: 46px;
  padding: clamp(32px,4.6vw,58px);
}

body.ys-v500 .legal-card {
  border-top: 0;
  padding: 28px clamp(24px,3.6vw,42px);
}

body.ys-v500 .contact-copy h2,
body.ys-v500 .legal-hero h1,
body.ys-v500 .journey-hero h1,
body.ys-v500 .journey-simple-hero h1,
body.ys-v500 .route-section h2,
body.ys-v500 .journal-copy h2,
body.ys-v500 .journey-essence-copy h2,
body.ys-v500 .collection-copy h2,
body.ys-v500 .contact h2 {
  letter-spacing: -.075em;
}

body.ys-v500 .project-form {
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

body.ys-v500 input,
body.ys-v500 textarea,
body.ys-v500 select {
  border-color: rgba(21,17,13,.09);
  background: rgba(255,255,255,.68);
}

body.ys-v500 input:hover,
body.ys-v500 textarea:hover,
body.ys-v500 select:hover {
  border-color: rgba(21,17,13,.18);
}

/* Journey pages 5.0 */
body.ys-v500 .journey-hero,
body.ys-v500 .journey-simple-hero,
body.ys-v500 .route-section,
body.ys-v500 .journal-chapter,
body.ys-v500 .greece-collection {
  border-radius: 46px;
}

body.ys-v500 .journey-hero,
body.ys-v500 .journey-simple-hero {
  margin-top: 104px;
}

body.ys-v500 .journey-stats {
  border-radius: 42px;
  overflow: hidden;
  background: linear-gradient(135deg, #15110d, #30271f);
  box-shadow: 0 34px 100px rgba(21,17,13,.18);
}

body.ys-v500 .palette-strip span,
body.ys-v500 .collection-points article,
body.ys-v500 .chapter-nav a {
  border-color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

/* Footer 5.0 */
body.ys-v500 .site-footer {
  margin: var(--space-xl) var(--page-x) 22px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 42px;
  background:
    radial-gradient(circle at 18% 0%, rgba(197,155,111,.30), transparent 34%),
    linear-gradient(135deg, #15110d, #2c241d);
  box-shadow: 0 30px 90px rgba(21,17,13,.20);
  overflow: hidden;
}

body.ys-v500 .site-footer h2 {
  letter-spacing: -.08em;
}

body.ys-v500 .site-footer a:hover {
  color: #fff;
}

body.ys-v500 .footer-bottom {
  border-top-color: rgba(255,255,255,.12);
}

body.ys-v500 .cookie-banner {
  border: 1px solid rgba(255,255,255,.74);
  background: rgba(255,250,245,.76);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 80px rgba(45,32,21,.16);
}

/* Premium motion */
@media (prefers-reduced-motion: no-preference) {
  body.ys-v500 .product-stage {
    animation: ysStageBreath 8s ease-in-out infinite alternate;
  }

  body.ys-v500 .product-glow {
    animation: ysGlowDrift 9s ease-in-out infinite alternate;
  }

  

  
}

@keyframes ysStageBreath {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-8px) scale(1.006); }
}

@keyframes ysGlowDrift {
  from { transform: translate3d(-3%, 1%, 0) scale(1); }
  to { transform: translate3d(4%, -2%, 0) scale(1.06); }
}

/* Mobile 5.0 */
@media (max-width: 1100px) {
  body.ys-v500 .hero-process {
    height: auto;
  }

  body.ys-v500 .hero-sticky {
    position: relative;
    min-height: auto;
    padding-top: 122px;
    grid-template-columns: 1fr;
  }

  body.ys-v500 .hero-copy h1 {
    max-width: 820px;
    font-size: clamp(56px, 12vw, 118px);
  }

  body.ys-v500 .product-stage {
    min-height: 680px;
  }

  body.ys-v500 .process-panel {
    max-width: 100%;
  }

  body.ys-v500 .scroll-spacer {
    display: none;
  }
}

/* Below 920px the "Journeys" dropdown list is always expanded inline (see
   the 920px nav-dropdown rules further down), which makes the floating nav
   pill noticeably taller. The journey pages' hero needs extra clearance so
   the fixed nav never overlaps the heading. (The homepage hero-sticky has
   its own later, more specific breakpoints — see the block below the
   nav-dropdown rules further down this file.) */
@media (max-width: 920px) {
  body.ys-v500 .journey-hero,
  body.ys-v500 .journey-simple-hero {
    margin-top: 130px;
  }
}

@media (max-width: 860px) {
  body.ys-v500 .nav {
    top: 10px;
    width: calc(100% - 20px);
    border-radius: 30px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }

  body.ys-v500 .brand {
    order: 1;
  }

  body.ys-v500 .lang-toggle {
    order: 2;
    margin-left: auto;
  }

  body.ys-v500 .nav-cta {
    order: 3;
    width: 100%;
    min-height: 44px;
  }

  body.ys-v500 .nav nav {
    order: 4;
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.ys-v500 .nav nav::-webkit-scrollbar {
    display: none;
  }

  body.ys-v500 .journey-hero,
  body.ys-v500 .journey-simple-hero {
    margin-top: 260px;
  }
}

@media (max-width: 720px) {
  :root {
    --page-x: 16px;
  }

  body.ys-v500 .hero-sticky {
    gap: 22px;
    padding-bottom: 28px;
  }

  body.ys-v500 .hero-copy h1 {
    font-size: clamp(52px, 16vw, 78px);
    letter-spacing: -.095em;
  }

  body.ys-v500 .hero-copy h1::after {
    width: 150px;
    margin-top: 22px;
  }

  body.ys-v500 .lead,
  body.ys-v500 .hero-copy .lead {
    font-size: 17px;
  }

  body.ys-v500 .hero-actions,
  body.ys-v500 .contact-actions,
  body.ys-v500 .form-actions {
    align-items: stretch;
  }

  body.ys-v500 .primary-btn,
  body.ys-v500 .secondary-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  

  body.ys-v500 .product-stage {
    min-height: 520px;
    border-radius: 34px;
  }

  body.ys-v500 .contact-shell,
  body.ys-v500 .journey-hero,
  body.ys-v500 .journey-simple-hero,
  body.ys-v500 .route-section,
  body.ys-v500 .journal-chapter,
  body.ys-v500 .greece-collection,
  body.ys-v500 .legal-card {
    border-radius: 30px;
  }

  /* At this width .contact-studio's tinted background sits directly under
     the rounded pricing card above it, but the section itself had square
     corners — its bounds already line up with the pricing card (both sit
     inside the same page padding), it just needed the same rounding to
     read as another card in the stack instead of a stray square block. */
  body.ys-v500 .contact-studio {
    border-radius: 30px;
  }

  body.ys-v500 .site-footer {
    border-radius: 30px;
    margin-inline: 12px;
  }
}

@media (max-width: 460px) {
  body.ys-v500 .brand {
    font-size: 14px;
  }

  body.ys-v500 .brand-logo {
    width: 36px;
    height: 36px;
  }

  body.ys-v500 .nav nav > a {
    min-height: 38px;
    padding-inline: 11px;
    font-size: 13px;
  }

  body.ys-v500 .hero-sticky {
    padding-top: 180px;
  }

  body.ys-v500 .product-stage {
    min-height: 470px;
  }

  body.ys-v500 .process-panel {
    padding: 18px;
    border-radius: 26px;
  }
}

/* ======================================================================
   Yarnly Studio 5.0.1 — targeted UI fixes
   Fixes: travel dropdown, hero CTA removal spacing, centered artwork,
   clearer footer contrast, stronger responsive behavior.
   ====================================================================== */

body.ys-v500 .nav {
  overflow: visible;
}

body.ys-v500 .nav nav {
  overflow: visible;
  position: relative;
}











body.ys-v500 .hero-sticky {
  grid-template-columns: minmax(260px, 1fr) minmax(430px, 560px) minmax(260px, 1fr);
  justify-items: stretch;
}

body.ys-v500 .hero-copy {
  max-width: 560px;
}

body.ys-v500 .product-stage {
  width: min(100%, 620px);
  justify-self: center;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

body.ys-v500 .art-wrap {
  width: min(82%, 500px);
  height: min(68vh, 690px);
  margin: auto;
  place-self: center;
}

body.ys-v500 .rug {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.ys-v500 .site-footer {
  color: rgba(255,250,245,.92);
}

body.ys-v500 .site-footer h2,
body.ys-v500 .site-footer strong,
body.ys-v500 .site-footer p,
body.ys-v500 .site-footer a,
body.ys-v500 .footer-bottom {
  color: rgba(255,250,245,.82);
}

body.ys-v500 .site-footer h2,
body.ys-v500 .site-footer strong {
  color: #fffaf5;
}

body.ys-v500 .site-footer a {
  opacity: .86;
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
}

body.ys-v500 .site-footer a:hover {
  opacity: 1;
  transform: translateX(3px);
}

body.ys-v500 .footer-bottom {
  border-top-color: rgba(255,255,255,.16);
}

@media (max-width: 1100px) {
  body.ys-v500 .hero-sticky {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  body.ys-v500 .hero-copy,
  body.ys-v500 .process-panel {
    width: 100%;
    max-width: 760px;
  }

  body.ys-v500 .product-stage {
    width: min(100%, 760px);
    min-height: 620px;
  }

  body.ys-v500 .art-wrap {
    width: min(76vw, 470px);
    height: min(62vh, 650px);
  }
}

@media (max-width: 860px) {
  body.ys-v500 .nav nav {
    overflow: visible;
    flex-wrap: wrap;
    justify-content: center;
  }

  

  
}

@media (max-width: 720px) {
  body.ys-v500 .product-stage {
    min-height: 500px;
    width: 100%;
  }

  body.ys-v500 .art-wrap {
    width: min(82vw, 360px);
    height: min(58vh, 500px);
  }
}

@media (max-width: 460px) {
  body.ys-v500 .product-stage {
    min-height: 455px;
  }

  body.ys-v500 .art-wrap {
    width: min(86vw, 330px);
    height: 430px;
  }
}


/* ======================================================================
   Yarnly Studio 5.0.2 — navigation alignment + mobile scroll process
   ====================================================================== */
body.ys-v500 .nav {
  align-items: center;
  overflow: visible;
}

body.ys-v500 .nav nav {
  align-items: center;
  overflow: visible;
}

body.ys-v500 .nav nav > a {
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  line-height: 1;
  vertical-align: middle;
}















body.ys-v500 .hero-copy h1 {
  max-width: 520px;
}

@media (max-width: 1100px) {
  body.ys-v500 .hero-process {
    height: 520vh;
    min-height: 520vh;
    position: relative;
  }

  body.ys-v500 .hero-sticky {
    display: grid;
    position: sticky;
    top: 0;
    min-height: 100svh;
    padding-top: 132px;
    padding-bottom: 22px;
    grid-template-columns: 1fr;
    align-content: start;
    justify-items: center;
    overflow: hidden;
  }

  body.ys-v500 .hero-copy {
    max-width: 760px;
    width: 100%;
    order: 2;
  }

  body.ys-v500 .hero-copy h1 {
    max-width: 560px;
    font-size: clamp(58px, 13vw, 116px);
  }

  body.ys-v500 .product-stage {
    order: 1;
    min-height: clamp(420px, 58svh, 620px);
    height: clamp(420px, 58svh, 620px);
    width: min(100%, 720px);
  }

  /* The base .process-panel is display:none below 1100px (see "03
     Homepage hero process animation" above) — on mobile it had been
     hidden entirely, leaving no explanation of what the scroll-driven
     animation is doing. Bring it back as the third stacked item (after
     the headline and the product-stage animation) so mobile visitors get
     the same "00% / Proces na żywo" counter and step list desktop has. */
  body.ys-v500 .process-panel {
    display: block;
    order: 3;
    width: min(100%, 720px);
  }

  body.ys-v500 .scroll-spacer {
    display: block;
  }

  /* The base .scroll-spacer article height (120vh × 6 = 720vh) matches the
     desktop .hero-process height. At this breakpoint hero-process is only
     520vh tall, so without this override the spacer's six articles kept
     stretching 200vh past the end of the section, leaving a big blank gap
     between the footer and the true bottom of the page. */
  body.ys-v500 .scroll-spacer article {
    height: 86.667vh;
  }

  body.ys-v500 .toolfield {
    display: block;
  }

  body.ys-v500 .floating-tool {
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  body.ys-v500 .floating-tool svg {
    width: 24px;
    height: 24px;
  }

  body.ys-v500 .floating-tool.is-main {
    width: 58px;
    height: 58px;
    border-radius: 20px;
  }

  body.ys-v500 .floating-tool.is-main svg {
    width: 30px;
    height: 30px;
  }
}

/* 861–920px: the nav hasn't wrapped into the stacked mobile pill yet, but
   the "Journeys" dropdown is already forced open (see the 920px
   nav-dropdown rules above), so the floating nav is taller than the
   default 132px clearance accounts for. */
@media (max-width: 920px) {
  body.ys-v500 .hero-sticky {
    padding-top: 340px;
  }
}

@media (max-width: 860px) {
  body.ys-v500 .nav {
    align-items: center;
  }

  body.ys-v500 .nav nav {
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  body.ys-v500 .nav nav > a {
    height: 38px;
    min-height: 38px;
  }

  

  /* Below 860px the nav collapses behind the hamburger toggle (see "06
     Mobile navigation toggle") and stays a compact single-row pill, so the
     hero only needs enough clearance to clear that pill, not the old
     multi-row stacked nav this value used to account for. */
  body.ys-v500 .hero-sticky {
    padding-top: 96px;
  }

  body.ys-v500 .hero-copy h1 {
    font-size: clamp(58px, 17vw, 92px);
    line-height: .86;
  }
}

@media (max-width: 720px) {
  body.ys-v500 .hero-sticky {
    gap: 16px;
    padding-top: 96px;
    align-content: start;
  }

  body.ys-v500 .hero-copy h1 {
    max-width: 360px;
    margin-bottom: 14px;
  }

  body.ys-v500 .product-stage {
    min-height: clamp(390px, 52svh, 500px);
    height: clamp(390px, 52svh, 500px);
  }

  body.ys-v500 .art-wrap {
    width: min(84vw, 340px);
    height: min(50svh, 440px);
  }

  body.ys-v500 .process-panel {
    padding: 16px;
  }
}

@media (max-width: 460px) {
  body.ys-v500 .nav nav > a {
    padding-inline: 10px;
    font-size: 12.5px;
  }

  body.ys-v500 .hero-sticky {
    padding-top: 96px;
  }

  body.ys-v500 .hero-copy h1 {
    font-size: clamp(54px, 18vw, 78px);
  }

  body.ys-v500 .product-stage {
    min-height: 380px;
    height: 380px;
  }

  body.ys-v500 .art-wrap {
    width: min(84vw, 320px);
    height: 360px;
  }
}

/* ======================================================================
   Yarnly Studio 5.0.3 — stable Podroze dropdown fix
   ====================================================================== */
body.ys-v500 .nav,
body.ys-v500 .nav nav {
  overflow: visible !important;
}



body.ys-v500 .nav nav > a {
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
}









@media (max-width: 920px) {
  

  

  

  

  
}

/* ======================================================================
   Yarnly Studio 5.0.4 — hard fix: real Podroze links, no disappearing menu
   ====================================================================== */
body.ys-v500 .nav,
body.ys-v500 .nav nav {
  overflow: visible !important;
}

















@media (max-width: 920px) {
  

  

  

  
}

/* ======================================================================
   Yarnly Studio 5.0.5 — clearance fix for simple page headers
   The floating nav grows much taller once the "Journeys" dropdown is
   forced open (≤920px) and the nav itself wraps into a stacked pill
   (≤860px). Legal pages and the 404 page use their outer wrapper's top
   padding for the intro heading, so it needs the same staged clearance as
   the homepage hero and journey pages get above. (.contact is deliberately
   excluded — on the homepage and journey pages it is a mid-page section,
   not a page header, and must keep its normal spacing.) */
@media (max-width: 920px) {
  body.ys-v500 .legal-page,
  body.ys-v500 .not-found {
    padding-top: 130px;
  }
}

@media (max-width: 860px) {
  body.ys-v500 .legal-page,
  body.ys-v500 .not-found {
    padding-top: 260px;
  }
}


/* ==========================================================================
   06 Mobile navigation toggle (hamburger)
   Below 860px the nav previously always showed every link, the language
   switch and the CTA stacked underneath the logo, which pushed the page
   content down. This collapses all of that behind a toggle button; only
   the logo and toggle stay visible until it's opened.
   ========================================================================== */

.nav-toggle {
  display: none;
}

/* ==========================================================================
   09 Header social icons
   Desktop: inline in the nav bar, right before the language switch.
   Mobile (<=860px): always-visible slot between the logo and the hamburger
   button (not hidden behind the menu toggle like the nav links / lang
   switch / CTA are), same order value as .nav-toggle — resolved by DOM
   position so the icons land between the brand and the hamburger.
   ========================================================================== */
.nav-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: 18px;
  color: var(--accent-green);
}

.nav-social-link {
  display: flex;
  color: inherit;
  transition: opacity .2s ease, transform .2s ease;
}

.nav-social-link svg {
  width: 19px;
  height: 19px;
  display: block;
}

.nav-social-link:hover {
  opacity: .68;
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .nav-social {
    order: 2;
    margin-right: 0;
    gap: 12px;
  }

  .nav-social-link svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(23,19,15,.06);
    cursor: pointer;
    flex: 0 0 auto;
  }

  .nav-toggle span {
    position: relative;
    display: block;
    width: 16px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
  }

  .nav-toggle span::before,
  .nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .2s ease;
  }

  .nav-toggle span::before {
    top: -5px;
  }

  .nav-toggle span::after {
    top: 5px;
  }

  body.ys-v500 .nav.is-open .nav-toggle span {
    background: transparent;
  }

  body.ys-v500 .nav.is-open .nav-toggle span::before {
    top: 0;
    transform: rotate(45deg);
  }

  body.ys-v500 .nav.is-open .nav-toggle span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  body.ys-v500 .nav {
    flex-wrap: nowrap;
    height: 58px;
    overflow: hidden;
  }

  body.ys-v500 .nav.is-open {
    flex-wrap: wrap;
    height: auto;
    overflow: visible;
    padding-bottom: 14px;
  }

  body.ys-v500 .nav > nav,
  body.ys-v500 .nav > .lang-toggle,
  body.ys-v500 .nav > .nav-cta {
    display: none;
  }

  body.ys-v500 .nav.is-open > nav {
    display: flex;
  }

  body.ys-v500 .nav.is-open > .lang-toggle {
    display: flex;
  }

  /* .nav-cta stays hidden even when the menu is open: the hero now has its
     own always-visible "Zamow projekt" button (see .hero-mobile-cta), so
     repeating it here was a duplicate call-to-action inside the dropdown. */
}


/* ==========================================================================
   07 Mobile hero: headline above the artwork, compact
   Reclaims the empty space between the nav and the animated image by
   putting a shrunk headline there instead of leaving it blank; the image
   still leads visually since it's the smaller, denser element.
   ========================================================================== */
body.ys-v500 .hero-mobile-cta {
  display: none;
}

/* Homepage, desktop only: mirror the mobile layout with a single,
   permanent "Zamow projekt" button under the headline -- solid brand
   green, always visible above the fold, no scroll-linked hide/reappear
   tricks. Proved out a floating glass pill above the artwork instead,
   but a subtle floating button that disappears on scroll is the wrong
   call when the goal is maximum visibility, so we're back to the
   highest-converting spot: right in the reading path, right after the
   headline and lead text. Other pages (no hero headline to attach it
   to) keep nav-cta in the header exactly as before. */
body.home .nav-cta {
  display: none;
}

body.home .hero-mobile-cta {
  display: inline-flex;
  margin: 6px 0 0;
}

/* Soft "ping" pulse so the main CTA catches the eye the moment the page
   loads, without being an annoying permanent distraction: a translucent
   green ring expands out from the button and fades, on loop. Built as a
   ::after ring instead of animating box-shadow directly, because the
   button's own box-shadow is set with !important a bit further down
   (the green re-skin) and CSS animations lose to !important author
   rules -- a separate pseudo-element sidesteps that entirely. Respects
   reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  body.ys-v500 .hero-mobile-cta {
    position: relative;
  }

  body.ys-v500 .hero-mobile-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--accent-green, #0b4a36);
    z-index: -1;
    animation: ysCtaPulse 2.4s cubic-bezier(.4,0,.3,1) infinite;
  }
}

@keyframes ysCtaPulse {
  0% {
    opacity: .5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

@media (max-width: 860px) {
  body.ys-v500 .hero-copy {
    order: 1;
  }

  body.ys-v500 .product-stage {
    order: 3;
  }

  /* Minimal live-progress bar, between the CTA and the artwork: a
     compact label + percentage + thin progress line. Desktop keeps the
     full card (percentage + step list) below the animation, where
     there's room for it — on mobile that card was either missing
     entirely or, once restored, too big and confusing sitting under the
     image, so here it shrinks to a slim bar and moves up between the
     "Zamow projekt" button and the animation instead. */
  body.ys-v500 .process-panel {
    order: 2;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    border-radius: 0;
  }

  /* Below the progress bar: just the current step's name (not the full
     six-item list desktop shows), so mobile visitors know what "Proces na
     zywo" is actually tracking without the list taking up space. */
  body.ys-v500 .process-list {
    display: block;
    margin: 4px 0 0;
    padding: 0;
  }

  body.ys-v500 .process-list li {
    display: none;
    padding: 0;
    border-radius: 0;
  }

  body.ys-v500 .process-list li.active {
    display: flex;
    align-items: baseline;
    gap: 7px;
    background: none;
    box-shadow: none;
    transform: none;
    color: rgba(23,19,15,.55);
  }

  body.ys-v500 .process-list span {
    font-size: 11px;
    color: var(--accent-green, rgba(23,19,15,.4));
  }

  body.ys-v500 .process-list b {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
  }

  /* Nudges first-time mobile visitors to scroll: the animation only
     advances on scroll, which isn't obvious when it just looks like a
     static image. Fades out for good the moment readScroll() sees any
     progress (see process-animation.js), so it never nags anyone who's
     already scrolling. */
  body.ys-v500 .scroll-hint {
    top: -42px;
    font-size: 12.5px;
    gap: 8px;
  }

  body.ys-v500 .co-create {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 0;
  }

  body.ys-v500 .co-create .eyebrow {
    margin: 0;
  }

  body.ys-v500 .co-create strong {
    font-size: 15px;
    letter-spacing: -.02em;
    margin: 0;
  }

  body.ys-v500 .sync-line {
    width: 100%;
    order: 3;
  }

  body.ys-v500 .hero-copy {
    text-align: center;
  }

  body.ys-v500 .hero-copy h1 {
    font-size: clamp(30px, 8vw, 44px);
    line-height: .96;
    margin: 0 0 8px;
    max-width: 420px;
  }

  body.ys-v500 .hero-copy h1::after {
    margin-inline: auto;
  }

  body.ys-v500 .eyebrow {
    margin: 0 0 6px;
  }

  body.ys-v500 .lead {
    display: none;
  }

  body.ys-v500 .hero-sticky {
    gap: 14px;
  }

  /* Compact CTA under the headline: on mobile the header's "Zamow projekt"
     button is hidden behind the hamburger toggle, so the hero needs its
     own simple, small, tappable link to the quote page that doesn't
     compete with the artwork or push it further down the screen. Hidden by
     default (see the unscoped rule above this media block) and switched
     back on here, since this rule needs to win on mobile by source order. */
  body.ys-v500 .hero-mobile-cta {
    display: inline-flex;
    margin: 2px auto 0;
    min-height: 38px;
    padding: 0 20px;
    font-size: 14px;
  }
}

/* ==========================================================================
   08 Rolex-inspired deep green + gold accent
   Swaps the site's near-black accent moments (buttons, eyebrow labels,
   headline underline, cookie CTA, pricing figures) for a deep bottle green
   with a warm gold-tinted border/glow. Body text, backgrounds and the warm
   cream base are untouched so the site still feels handmade, not cold.
   ========================================================================== */
:root {
  --accent-green: #0b4a36;
  --accent-green-deep: #082e21;
  --accent-gold: #c8a04e;
}

/* Global sweep: retire the old brown --accent everywhere it still shows up
   (gallery icons, care icons, showcase badges, nav-soon caption) in favor of
   the deep green used for buttons/eyebrows/pricing above. */
body.ys-v500 {
  --accent: var(--accent-green);
}

/* Primary buttons + nav CTA: charcoal -> deep green, gold-tinted edge */
body.ys-v500 .nav-cta,
body.ys-v500 .primary-btn {
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-deep) 100%) !important;
  border: 1px solid rgba(200,160,78,.35) !important;
  box-shadow: 0 18px 48px rgba(11,74,54,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

body.ys-v500 .nav-cta:hover,
body.ys-v500 .primary-btn:hover {
  box-shadow: 0 26px 68px rgba(11,74,54,.34), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Nav CTA + mobile hero CTA: static button, letters fade in one by one,
   then keep a gentle continuous wave/bob, and fade out together --
   entrance is staggered, exit is synchronized. Per-letter @keyframes are
   generated in JS (animateCtaLetters, in translations.js), which now
   targets both buttons so the mobile hero CTA gets the same effect as
   the desktop header CTA. */
body.ys-v500 .nav-cta {
  font-size: 13px;
  gap: 0;
  padding: 0 16px;
}
body.ys-v500 .hero-mobile-cta {
  gap: 0;
}
body.ys-v500 .nav-cta .cta-letter {
  margin-right: 1px;
}
body.ys-v500 .nav-cta .cta-letter:last-child {
  margin-right: 0;
}
body.ys-v500 .nav-cta .cta-letter {
  display: inline-block;
  opacity: 0;
}

.accept-cookies {
  background: var(--accent-green) !important;
}

/* Eyebrow labels: muted grey -> deep green, reads like a museum placard */
body.ys-v500 .eyebrow {
  color: var(--accent-green) !important;
}

/* Headline underline accents */
body.ys-v500 .hero-copy h1::after,
body.ys-v500 .legal-hero h1::after,
body.ys-v500 .journey-hero h1::after,
body.ys-v500 .journey-simple-hero h1::after {
  background: linear-gradient(90deg, var(--accent-green), transparent) !important;
}

/* Pricing panel: deep green price, green area readout */
.pricing-amount {
  color: var(--accent-green-deep) !important;
}

.pricing-area-readout {
  color: var(--accent-green) !important;
}

/* Footer glow: warm gold-brown radial -> a touch of deep green, ties the
   dark footer back to the new accent instead of leaving it purely brown. */
body.ys-v500 .site-footer {
  background:
    radial-gradient(circle at 18% 0%, rgba(11,74,54,.38), transparent 34%),
    linear-gradient(135deg, #0d1a15, #241e18) !important;
}

/* Scroll-to-form arrow: faint green ring instead of plain ink */
.scroll-to-form {
  border-color: rgba(11,74,54,.35) !important;
  color: var(--accent-green-deep) !important;
}


/* "Coming soon" nav items: Gotowe / Warsztaty stay visible in the menu but
   are inert (no href) and visually muted, with a small pill badge instead
   of a working link, until those pages are ready to launch. */
.nav-soon {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: default;
  opacity: .55;
  line-height: 1.1;
}

body.ys-v500 .nav nav > a.nav-soon:hover,
.nav-soon:hover {
  color: inherit;
  background: transparent !important;
  transform: none !important;
}

.nav-soon .soon-badge {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}


/* Galeria: closing CTA card instead of an empty "coming soon" slot —
   turns the last grid space into an invitation to order a custom piece
   rather than a placeholder that reads as unfinished. */
.showcase-cta .showcase-media {
  background: linear-gradient(160deg, rgba(155,95,62,.16), rgba(155,95,62,.06));
}

.showcase-cta .showcase-media svg {
  opacity: .85;
}

.showcase-cta .secondary-link {
  display: inline-block;
  margin-top: 2px;
}