/* ============================================
   Alice Čechová — wild / indie layer
   Collage, grain, jitter, non-template layout
   ============================================ */

:root {
  --acid: #d8ff3e;
  --hot: #ff3d8a;
  --ink-violet: #9b3dff;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(155,61,255,.12), transparent 50%),
    radial-gradient(ellipse 60% 40% at 110% 20%, rgba(255,61,138,.08), transparent 46%),
    var(--paper);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: multiply;
  background-image: url("../assets/noise.svg");
  background-size: 180px 180px;
}

.header {
  background: rgba(246,245,243,.72) !important;
  border-bottom: 0 !important;
  position: relative;
}
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 10px;
  background: url("../assets/scribble.svg") center / 100% 10px repeat-x;
  opacity: .55;
  pointer-events: none;
}
.header__wordmark {
  font-family: var(--font-brush) !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  font-size: 1.05rem !important;
}
.nav__link {
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 8px;
  background: url("../assets/scribble.svg") center / contain no-repeat;
  opacity: 0;
  transform: rotate(-4deg);
  transition: opacity .25s;
}
.nav__link:hover::after,
.nav__link--active::after { opacity: .9; }

.header__cta {
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 var(--ink-violet);
}
.header__cta:hover { transform: rotate(1deg) translateY(-1px); }

/* Hero collage */
.hero {
  overflow: hidden;
}
.hero__brush {
  mix-blend-mode: difference;
  animation: brushJitter 3.6s steps(2, end) infinite;
}
@keyframes brushJitter {
  0%, 100% { transform: translate(-50%, -50%) rotate(-6deg); }
  25% { transform: translate(-49.2%, -50.6%) rotate(-5.2deg); }
  50% { transform: translate(-50.8%, -49.4%) rotate(-7deg); }
  75% { transform: translate(-49.6%, -50.2%) rotate(-6.4deg); }
}

.deco {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  user-select: none;
}
.page-hero .deco,
.page-hero .scrap {
  z-index: 1;
  opacity: .7;
}
.page-hero .sticker {
  z-index: 3;
}
.deco--stamp {
  width: 130px;
  top: 18%;
  right: 8%;
  animation: spinSlow 18s linear infinite;
  mix-blend-mode: normal;
  opacity: .95;
  filter: drop-shadow(0 0 12px rgba(155,61,255,.55));
}
.deco--star {
  width: 48px;
  top: 28%;
  left: 7%;
  animation: twirl 4s ease-in-out infinite;
}
.deco--drip {
  width: 36px;
  right: 16%;
  bottom: 22%;
  animation: drip 2.8s ease-in-out infinite;
}
.deco--x {
  width: 54px;
  left: 12%;
  bottom: 18%;
  animation: twirl 5.5s ease-in-out infinite reverse;
}
.deco--arrow {
  width: 120px;
  right: 6%;
  top: 58%;
  transform: rotate(12deg);
  animation: nudge 3s ease-in-out infinite;
}
.deco--note {
  font-family: var(--font-brush);
  color: var(--acid);
  font-size: 1.05rem;
  left: 6%;
  top: 62%;
  transform: rotate(-11deg);
  text-shadow: 0 2px 0 #000;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes twirl {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50% { transform: rotate(18deg) scale(1.12); }
}
@keyframes drip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}
@keyframes nudge {
  0%, 100% { transform: rotate(12deg) translateX(0); }
  50% { transform: rotate(18deg) translateX(8px); }
}

.splat-badge {
  animation: stampPop 4.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.35));
}
@keyframes stampPop {
  0%, 100% { transform: translateX(-50%) rotate(-8deg) scale(1); }
  40% { transform: translateX(-50%) rotate(-4deg) scale(1.05); }
  55% { transform: translateX(-50%) rotate(-11deg) scale(.97); }
}

/* Tilted marquees */
.marquee {
  transform: rotate(-1.4deg) scale(1.04);
  border: 0 !important;
  box-shadow: 0 0 0 3px #111;
  z-index: 4;
  position: relative;
}
.marquee--dark {
  transform: rotate(1.8deg) scale(1.05);
}
.marquee--acid {
  background: var(--acid) !important;
  color: #111 !important;
  transform: rotate(-2.4deg) scale(1.06);
  margin: 1.2rem 0;
}
.marquee__item {
  animation: itemFlicker 7s steps(1) infinite;
}
.marquee__item:nth-child(odd) { animation-delay: .4s; }
@keyframes itemFlicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: .35; }
  94% { opacity: 1; }
}

/* Offer cards as stickers */
.offer-grid {
  background: transparent !important;
  border: 0 !important;
  gap: 1.4rem !important;
  align-items: stretch;
  perspective: 1100px;
}
.offer-card {
  min-height: 340px !important;
  clip-path: polygon(4% 0, 100% 3%, 96% 100%, 0 96%);
  transform: rotate(-2.2deg);
  box-shadow: 10px 12px 0 var(--acid);
}
.offer-card:nth-child(2) {
  transform: rotate(2.6deg) translateY(18px);
  clip-path: polygon(0 4%, 97% 0, 100% 97%, 3% 100%);
}
.offer-card:nth-child(3) {
  transform: rotate(-1.4deg) translateY(-10px);
}
.offer-card:hover {
  transform: rotate(0) translateY(-8px) scale(1.02);
  z-index: 2;
}
.offer-card img { filter: contrast(1.15) saturate(1.15); }
.offer-card:hover img {
  animation: rgbSplit .45s steps(2) infinite;
}
@keyframes rgbSplit {
  0% { transform: scale(1.06) translate(0,0); filter: contrast(1.2); }
  50% { transform: scale(1.08) translate(3px,-2px); filter: contrast(1.4) hue-rotate(20deg); }
  100% { transform: scale(1.06) translate(-2px,1px); }
}

.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: "";
  display: block;
  width: 70%;
  height: 14px;
  margin-top: -6px;
  background: url("../assets/scribble.svg") left / contain no-repeat;
}
.section-title.is-glitch {
  animation: titleShake .8s steps(2) 1;
}
@keyframes titleShake {
  0%, 100% { transform: none; }
  25% { transform: translate(-3px, 1px) skewX(-2deg); }
  50% { transform: translate(3px, -1px); }
  75% { transform: translate(-1px, 2px) skewX(1deg); }
}

.label, .eyebrow {
  font-family: var(--font-brush) !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  color: var(--hot) !important;
  font-size: .95rem !important;
}

/* Polaroid / tape photos */
.split__media,
.editorial__media,
.page-hero__aside {
  transform: rotate(-2.5deg);
  box-shadow: 14px 18px 0 #111;
  overflow: visible !important;
}
.split__media::before,
.editorial__media::before {
  content: "";
  position: absolute;
  top: -14px; left: 18%;
  width: 92px; height: 28px;
  background: url("../assets/tape.svg") center / contain no-repeat;
  z-index: 4;
}
.split__media img,
.editorial__media img {
  filter: contrast(1.08) grayscale(.08);
}

.stat-row {
  gap: 0 !important;
}
.stat {
  transform: rotate(-3deg);
  border: 2px solid #111;
  padding: .85rem 1rem;
  background: #fff;
  box-shadow: 5px 5px 0 var(--ink-violet);
}
.stat:nth-child(2) { transform: rotate(2.5deg) translateY(10px); background: var(--acid); }
.stat:nth-child(3) { transform: rotate(-1.5deg); }

.service-row {
  border: 0 !important;
  border-bottom: 2px dashed #111 !important;
}
.service-row:hover {
  background: var(--acid);
  padding-left: .8rem;
}

.gallery-item {
  clip-path: polygon(3% 0, 100% 2%, 97% 100%, 0 96%);
  transform: rotate(-1.5deg);
  box-shadow: 8px 8px 0 var(--hot);
}
.gallery-item:nth-child(even) { transform: rotate(2deg); box-shadow: 8px 8px 0 var(--acid); }
.gallery-item:hover {
  transform: rotate(0) scale(1.03);
  z-index: 2;
}
.gallery-item__cap {
  font-family: var(--font-brush) !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
}

.review {
  transform: rotate(-1.2deg);
  box-shadow: 7px 8px 0 var(--hot);
}
.review:nth-child(2) { transform: rotate(1.6deg) translateY(12px); }
.review:nth-child(3) { transform: rotate(-2deg); }

.btn {
  position: relative;
  overflow: hidden;
}
.btn--light, .btn--dark {
  box-shadow: 5px 5px 0 currentColor;
}
.btn:hover { animation: btnKick .35s ease; }
@keyframes btnKick {
  0% { transform: translate(0,0); }
  40% { transform: translate(4px, -3px) rotate(-2deg); }
  100% { transform: translate(0,0); }
}

.page-hero {
  overflow: hidden;
}
.page-hero .deco--stamp { mix-blend-mode: multiply; opacity: .75; filter: invert(1); }

.faq__q { font-family: var(--font-display); }
.faq__item.is-open .faq__q { color: var(--ink-violet); }

.footer {
  background:
    url("../assets/noise.svg"),
    var(--ink) !important;
  background-blend-mode: overlay;
}
.footer__brand {
  font-family: var(--font-brush) !important;
  letter-spacing: .04em !important;
}

.scroll-progress {
  height: 4px !important;
  background: linear-gradient(90deg, var(--ink-violet), var(--hot), var(--acid)) !important;
}

.marquee--rev .marquee__track {
  animation-direction: reverse;
  animation-duration: 26s;
}

.chip {
  transform: rotate(-6deg);
  box-shadow: 3px 3px 0 #111;
  border: 1.5px solid #111 !important;
}
.chip:nth-child(even) { transform: rotate(7deg); }
.chip:nth-child(3) { transform: rotate(-2deg) translateY(4px); background: var(--acid) !important; color: #111 !important; }

.process-grid { gap: 1.2rem !important; }
.process-step {
  border: 2px solid #111;
  padding: 1.2rem 1.1rem;
  transform: rotate(-1.8deg);
  box-shadow: 7px 7px 0 var(--ink-violet);
  background: #fff;
}
.process-step:nth-child(even) {
  transform: rotate(2.4deg) translateY(12px);
  background: var(--acid);
}
.process-step:nth-child(3) {
  transform: rotate(-3deg);
  box-shadow: 7px 7px 0 var(--hot);
}

.pricing-board { gap: 1.1rem !important; }
.price-item {
  clip-path: polygon(3% 0, 100% 4%, 97% 100%, 0 96%);
  transform: rotate(-1.6deg);
  box-shadow: 8px 10px 0 #111;
  border: 2px solid #111;
}
.price-item:nth-child(even) { transform: rotate(2.2deg); }
.price-item:hover { transform: rotate(0) translateY(-6px); }

.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  background: url("../assets/torn.svg") center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 2;
}
.cta-band::before { top: -2px; transform: scaleY(-1); }
.cta-band::after { bottom: -2px; }

.section--dark {
  position: relative;
}
.section--dark::after {
  content: "";
  position: absolute;
  width: 180px; height: 180px;
  right: -40px; top: 8%;
  background: url("../assets/splat.svg") center / contain no-repeat;
  opacity: .28;
  pointer-events: none;
  animation: spinSlow 28s linear infinite;
}
.section--light,
.section--stone {
  position: relative;
}
.section--light::before {
  content: "";
  position: absolute;
  width: 110px; height: 110px;
  left: 3%; top: 12%;
  background: url("../assets/halo.svg") center / contain no-repeat;
  opacity: .45;
  pointer-events: none;
  animation: twirl 7s ease-in-out infinite;
}

.page-hero {
  position: relative;
}
.page-hero .torn-edge,
.cta-band .torn-edge {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 20px;
  background: url("../assets/torn.svg") center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 5;
}

.ink-blob {
  position: absolute;
  border-radius: 42% 58% 53% 47% / 48% 42% 58% 52%;
  background: var(--ink-violet);
  mix-blend-mode: multiply;
  opacity: .18;
  pointer-events: none;
  z-index: 0;
  animation: blobMorph 9s ease-in-out infinite;
}
@keyframes blobMorph {
  0%, 100% { border-radius: 42% 58% 53% 47% / 48% 42% 58% 52%; transform: rotate(0) scale(1); }
  50% { border-radius: 58% 42% 47% 53% / 42% 58% 42% 58%; transform: rotate(18deg) scale(1.12); }
}

.sticker {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  font-family: var(--font-brush);
  background: var(--acid);
  color: #111;
  padding: .35rem .7rem;
  border: 2px solid #111;
  box-shadow: 4px 4px 0 #111;
  transform: rotate(-8deg);
  font-size: .85rem;
  white-space: nowrap;
}
.sticker--hot {
  background: var(--hot);
  color: #fff;
  transform: rotate(7deg);
}

/* Floating scrap layer injected by JS */
.scrap-layer { position: relative; }
.scrap {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: .85;
}
.scrap--star { width: 36px; animation: twirl 5s ease-in-out infinite; }
.scrap--x { width: 40px; animation: twirl 6s ease-in-out infinite reverse; }
.scrap--drip { width: 22px; animation: drip 3s ease-in-out infinite; }

@media (max-width: 900px) {
  /* Kill desktop collage transforms that break phone layout */
  .offer-card,
  .offer-card:nth-child(2),
  .offer-card:nth-child(3),
  .stat,
  .stat:nth-child(2),
  .stat:nth-child(3),
  .review,
  .review:nth-child(2),
  .review:nth-child(3),
  .process-step,
  .process-step:nth-child(even),
  .process-step:nth-child(3),
  .price-item,
  .price-item:nth-child(even),
  .gallery-item,
  .gallery-item:nth-child(even),
  .gallery-item:nth-child(3n),
  .gallery-item:nth-child(5n),
  .chip,
  .chip:nth-child(even),
  .chip:nth-child(3),
  .split__media,
  .editorial__media,
  .page-hero__aside,
  .header__cta,
  .marquee,
  .marquee--dark,
  .marquee--acid {
    transform: none !important;
  }

  .offer-card,
  .price-item,
  .gallery-item,
  .review,
  .process-step,
  .stat {
    box-shadow: 4px 4px 0 #111 !important;
    clip-path: none !important;
  }

  .deco,
  .deco--note,
  .deco--arrow,
  .deco--stamp,
  .deco--star,
  .deco--drip,
  .deco--x,
  .scrap,
  .sticker,
  .ink-blob,
  .section--dark::after,
  .section--light::before {
    display: none !important;
  }

  .hero__brush {
    top: 34%;
    width: 94vw;
    font-size: clamp(2.1rem, 11vw, 3.4rem);
    opacity: .92;
  }
  .hero__content {
    padding: calc(var(--header-h) + 1.25rem) 0 7.5rem;
  }
  .hero__title {
    font-size: clamp(1.35rem, 5.8vw, 1.85rem);
    max-width: 18ch;
  }
  .hero__text {
    font-size: .95rem;
    max-width: 34ch;
  }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    width: min(100%, 22rem);
  }
  .hero__actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    box-shadow: none;
  }
  .hero__actions .btn--ghost {
    border: 1.5px solid rgba(255,255,255,.85);
    color: #fff;
    background: rgba(0,0,0,.28);
  }
  .sticky-cta {
    padding: .65rem .85rem;
  }
  .sticky-cta .btn {
    width: 100%;
    display: block;
    text-align: center;
  }
  .splat-badge {
    width: min(96px, 28vw);
    bottom: auto;
    top: 58%;
    left: auto;
    right: 4%;
    transform: none;
    opacity: .9;
  }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    width: min(100%, 22rem);
    position: relative;
    z-index: 5;
  }

  .page-hero {
    min-height: auto !important;
    padding: calc(var(--header-h) + 2.25rem) 0 3rem !important;
    clip-path: none !important;
  }
  .page-hero__title {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }
  .page-hero__text {
    font-size: 1rem;
  }
  .page-hero__meta {
    gap: .45rem;
  }
  .page-hero__aside {
    width: min(100%, 200px) !important;
    box-shadow: 6px 6px 0 #111 !important;
  }

  .section {
    padding: 3.25rem 0;
  }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
  }
  .section-title {
    font-size: clamp(1.85rem, 8vw, 2.6rem);
  }
  .section-lead {
    font-size: 1rem;
  }

  .offer-grid,
  .mosaic,
  .process-grid,
  .reviews-rail,
  .stat-row,
  .pricing-board,
  .care-grid {
    gap: .9rem !important;
  }

  .offer-card {
    min-height: 280px !important;
  }

  .service-row {
    padding: .85rem 0;
  }
  .service-row:hover {
    padding-left: 0;
  }

  .form,
  .booking-form,
  .contact-form {
    transform: none !important;
    box-shadow: 6px 6px 0 var(--ink-violet) !important;
    padding: 1.15rem !important;
  }
  .form::before,
  .booking-form::before,
  .contact-form::before {
    display: none;
  }

  .header__wordmark {
    font-size: .92rem !important;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .marquee {
    padding: .85rem 0;
  }
  .marquee__item {
    font-size: 1.15rem;
    letter-spacing: .12em;
    gap: 1.4rem;
  }

  .cta-band .section-title {
    max-width: none;
  }
  .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-band__actions .btn {
    width: 100%;
    text-align: center;
  }

  /* Prevent horizontal scroll from shadows / marquees */
  body {
    overflow-x: hidden;
  }
  .marquee {
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .container {
    width: min(100% - 1.25rem, var(--container));
  }
  .chip {
    font-size: .68rem;
    padding: .28rem .55rem;
  }
  .sticky-cta .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__brush, .splat-badge, .deco, .scrap, .marquee__item, .offer-card img,
  .section--dark::after, .section--light::before, .ink-blob {
    animation: none !important;
  }
}