/* Variant: Bauhaus — a geometric poster in red, yellow, blue and black. Light. */
:root {
  --bg: #f3f3f0; --surface: #ffffff; --muted: #e9e9e4; --ink: #121212; --ink-2: #4f4f4f; --line: #dcdcd6;
  --accent: #e63b2e; --accent-ink: #ffffff; --accent-soft: #fde2df; --green-soft: #e0e8fb; --amber-soft: #fff1c2;
  --night: #121212; --night-2: #1f1f1f;
  --red: #e63b2e; --yellow: #f7c21b; --blue: #1f4fbf;
  --ui-accent: #1f4fbf; --ui-img: #e8edfb;
  color-scheme: light;
}
.bh-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); }
@media (min-width: 64em) { .bh-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bh-title { font-size: clamp(2.75rem, 5.6vw, 5.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.05em; }
.bh-hero .hero__lead { margin-top: 1.5rem; }
.bh-hero .hero__actions { margin-top: 2rem; }
.bh-hero .pill--accent { border-radius: 0; }
.bh-hero .pill--ghost { border-radius: 0; border-color: var(--ink); }
.bh-poster { position: relative; aspect-ratio: 1; width: min(100%, 34rem); justify-self: center; background: #ffffff; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.4); overflow: hidden; }
.bh-s { position: absolute; display: block; }
.bh-s--circle { left: 8%; top: 8%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--red); mix-blend-mode: multiply; }
.bh-s--square { right: 8%; top: 30%; width: 40%; aspect-ratio: 1; background: var(--blue); rotate: 12deg; mix-blend-mode: multiply; }
.bh-s--tri { left: 14%; bottom: 8%; width: 44%; aspect-ratio: 1; background: var(--yellow); clip-path: polygon(50% 0, 100% 100%, 0 100%); mix-blend-mode: multiply; }
.bh-s--bar1 { left: 6%; right: 6%; top: 62%; height: 3%; background: var(--ink); }
.bh-s--bar2 { left: 62%; top: 6%; width: 3%; height: 46%; background: var(--ink); }
.bh-s--dot1, .bh-s--dot2, .bh-s--dot3 { width: 5%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.bh-s--dot1 { right: 12%; bottom: 14%; } .bh-s--dot2 { right: 20%; bottom: 14%; } .bh-s--dot3 { right: 28%; bottom: 14%; }
.bh-s--half { right: 6%; bottom: 26%; width: 22%; aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; background: var(--yellow); }
.bh-s--ring { left: 66%; top: 4%; width: 22%; aspect-ratio: 1; border: 8px solid var(--ink); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .bh-s--square { animation: bh-turn 18s ease-in-out infinite; }
  .bh-s--circle { animation: bh-drift 14s ease-in-out infinite; }
  @keyframes bh-turn { 50% { rotate: 24deg; } }
  @keyframes bh-drift { 50% { translate: 8px 6px; } }
}
.tile { border-radius: 0; border-top: 6px solid var(--blue); }
.tile:nth-child(2) { border-top-color: var(--red); } .tile:nth-child(3) { border-top-color: var(--yellow); }
.tile--dark { border-top: 6px solid var(--yellow); }
.tile--dark .focus strong { color: var(--yellow); }
.steps li:nth-child(1)::before { background: var(--red); border-radius: 50%; }
.steps li:nth-child(2)::before { background: var(--blue); border-radius: 0; }
.steps li:nth-child(3)::before { background: var(--yellow); color: var(--ink); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 0.6rem; }
.steps li:nth-child(4)::before { background: var(--ink); color: #ffffff; }
.faq details, .product__visual, .contact__card, .pill { border-radius: 0; }
.product__visual--water { background: #e0e8fb; } .product__visual--jobs { background: #fde2df; } .product__visual--food { background: #fff1c2; }