.home-hero {
          --hero-h: clamp(380px, 50vh, 500px);
          position: relative;
          z-index: 1;
          overflow: visible;
          min-height: var(--hero-h);
          color: #fff;
        }

        .hero-backdrop {
          position: absolute;
          inset: 0;
          z-index: 0;
          overflow: hidden;
          pointer-events: none;
        }

        .wash {
          position: absolute;
          inset: 0;
          transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
        }

        .glow {
          position: absolute;
          border-radius: 50%;
          filter: blur(40px);
          opacity: 0.35;
          transition: opacity 0.4s ease, transform 0.55s ease;
        }

        .glow-a {
          width: min(42vw, 420px);
          height: min(42vw, 420px);
          left: 8%;
          top: -12%;
          background: rgba(255, 255, 255, 0.22);
        }

        .glow-b {
          width: min(48vw, 480px);
          height: min(48vw, 480px);
          right: -6%;
          bottom: -18%;
          background: rgba(255, 255, 255, 0.18);
        }

        .theme-reparaties .glow-a {
          background: rgba(255, 200, 120, 0.28);
          left: 4%;
        }

        .theme-reparaties .glow-b {
          background: rgba(120, 210, 255, 0.28);
        }

        .theme-winkel .glow-a {
          background: rgba(255, 210, 150, 0.2);
        }

        .theme-diensten .glow-b {
          background: rgba(180, 230, 255, 0.3);
          transform: translate(-8%, -10%);
        }

        .grain {
          position: absolute;
          inset: 0;
          opacity: 0.1;
          background-image:
            radial-gradient(rgba(255, 255, 255, 0.28) 0.7px, transparent 0.8px);
          background-size: 18px 18px;
          mask-image: linear-gradient(120deg, #000 12%, transparent 58%);
        }

        .sheen {
          position: absolute;
          inset: -20% 30% -20% -10%;
          background: linear-gradient(
            115deg,
            transparent 40%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 60%
          );
          transform: skewX(-12deg);
          animation: sheen-drift 8s ease-in-out infinite alternate;
        }

        .wash.blue {
          background: linear-gradient(155deg, #12a8e0 0%, #008fce 48%, #0074a8 100%);
        }

        .wash.orange {
          background: linear-gradient(155deg, #f08a22 0%, #e07012 45%, #c45f08 100%);
          clip-path: polygon(0 0, 54% 0, 42% 100%, 0 100%);
        }

        .theme-reparaties .wash.orange {
          clip-path: polygon(0 0, 34% 0, 24% 100%, 0 100%);
          opacity: 1;
        }

        .theme-winkel .wash.orange {
          clip-path: polygon(0 0, 68% 0, 56% 100%, 0 100%);
          background: linear-gradient(155deg, #e87a14 0%, #c45f08 48%, #9a4a06 100%);
        }

        .theme-winkel .wash.blue {
          background: linear-gradient(155deg, #1a2a35 0%, #243846 55%, #1c2d39 100%);
        }

        .theme-winkel .kicker {
          color: rgba(255, 236, 210, 0.95);
          text-shadow: 0 1px 2px rgba(20, 32, 41, 0.35);
        }

        .theme-winkel .hero-panel h1 {
          text-shadow: 0 2px 18px rgba(20, 32, 41, 0.28);
        }

        .theme-winkel .hero-lead {
          color: rgba(255, 255, 255, 0.92);
          text-shadow: 0 1px 8px rgba(20, 32, 41, 0.22);
          max-width: 34ch;
        }

        .theme-winkel .text-link {
          color: #fff;
          border-bottom-color: rgba(255, 236, 210, 0.55);
          text-shadow: 0 1px 4px rgba(20, 32, 41, 0.25);
        }

        .theme-diensten .wash.orange {
          clip-path: polygon(0 0, 50% 0, 40% 100%, 0 100%);
        }

        .hero-shell {
          position: relative;
          z-index: 1;
          padding-block: clamp(1.85rem, 4.2vh, 2.6rem) clamp(1.35rem, 3vh, 2rem);
          display: grid;
          grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
          gap: clamp(0.75rem, 2.5vw, 1.75rem);
          align-items: center;
          min-height: var(--hero-h);
        }

        .hero-main {
          position: relative;
          z-index: 2;
          display: grid;
          gap: 0.9rem;
          align-content: start;
          max-width: 36rem;
        }

        .home-hero .tablist {
          display: inline-flex;
          align-items: center;
          gap: 0.25rem;
          padding: 0.28rem;
          border-radius: 999px;
          background: rgba(10, 16, 22, 0.42);
          border: 1px solid rgba(255, 255, 255, 0.34);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          width: fit-content;
          max-width: 100%;
          box-shadow: 0 10px 24px rgba(10, 16, 22, 0.16);
        }

        .home-hero .tab {
          border: 0;
          background: transparent;
          color: rgba(255, 255, 255, 0.92);
          font-family: Outfit, sans-serif;
          font-weight: 700;
          font-size: 0.88rem;
          padding: 0.5rem 0.95rem;
          border-radius: 999px;
          cursor: pointer;
          transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
          white-space: nowrap;
          text-shadow: 0 1px 2px rgba(10, 16, 22, 0.25);
        }

        .home-hero .tab:hover {
          color: #fff;
          background: rgba(255, 255, 255, 0.14);
        }

        .home-hero .tab.is-active {
          background: #fff;
          color: #1a1f24;
          text-shadow: none;
          box-shadow: 0 8px 20px rgba(14, 22, 28, 0.16);
        }

        /* Stack all panels in one cell so height = tallest tab (no jump). */
        .hero-panels {
          display: grid;
          width: 100%;
          max-width: 36rem;
        }

        .hero-panel {
          grid-area: 1 / 1;
          display: grid;
          gap: 0.65rem;
          max-width: 36rem;
          width: 100%;
          visibility: hidden;
          opacity: 0;
          pointer-events: none;
          z-index: 0;
        }

        .hero-panel.is-active {
          visibility: visible;
          opacity: 1;
          pointer-events: auto;
          z-index: 1;
          animation: panel-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .home-hero .kicker {
          margin: 0;
          font-family: Outfit, sans-serif;
          font-weight: 700;
          font-size: 0.82rem;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: #fff;
          text-shadow: 0 1px 2px rgba(10, 16, 22, 0.4), 0 2px 10px rgba(10, 16, 22, 0.25);
        }

        .hero-panel h1 {
          margin: 0;
          font-family: Outfit, sans-serif;
          font-size: clamp(1.7rem, 3.4vw, 2.55rem);
          font-weight: 800;
          letter-spacing: -0.035em;
          line-height: 1.06;
          text-wrap: balance;
          color: #fff;
          text-shadow:
            0 1px 2px rgba(10, 16, 22, 0.45),
            0 3px 18px rgba(10, 16, 22, 0.32);
        }

        .home-hero .hero-lead {
          margin: 0;
          max-width: 38ch;
          font-size: 0.98rem;
          font-weight: 500;
          line-height: 1.45;
          color: #fff;
          text-shadow: 0 1px 2px rgba(10, 16, 22, 0.4), 0 2px 12px rgba(10, 16, 22, 0.22);
        }

        .search-wrap {
          position: relative;
          z-index: 5;
          max-width: 28rem;
        }

        .search-wrap :global(.repair-search.is-panel .field) {
          border-color: rgba(255, 255, 255, 0.55);
          box-shadow: 0 12px 28px rgba(14, 22, 28, 0.14);
        }

        .home-hero .meta {
          margin: 0;
          display: grid;
          gap: 0.55rem;
        }

        .home-hero .meta div {
          display: grid;
          gap: 0.08rem;
          min-width: 0;
        }

        .home-hero .meta dt {
          font-size: 0.7rem;
          font-weight: 700;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, 0.72);
        }

        .home-hero .meta dd {
          margin: 0;
          font-family: Outfit, sans-serif;
          font-weight: 600;
          font-size: 0.92rem;
          color: #fff;
        }

        .home-hero .meta a {
          color: #fff;
          text-decoration: underline;
          text-underline-offset: 0.15em;
        }

        .home-hero .meta-card {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 0.55rem 0.85rem;
          padding: 0.7rem 0.85rem;
          border-radius: 14px;
          background: rgba(14, 22, 30, 0.42);
          border: 1px solid rgba(255, 255, 255, 0.18);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 10px 22px rgba(14, 22, 30, 0.16);
          max-width: 32rem;
        }

        .home-hero .meta-card dt {
          color: rgba(255, 220, 180, 0.9);
          letter-spacing: 0.05em;
        }

        .home-hero .meta-card dd {
          font-weight: 700;
          line-height: 1.3;
          text-shadow: none;
        }

        .home-hero .meta-card a {
          color: #fff;
          text-decoration-color: rgba(255, 220, 180, 0.65);
        }

        .home-hero .meta-card a:hover {
          color: #ffe6c4;
        }

        .service-board {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 0.4rem;
          max-width: 30rem;
        }

        .service-board a {
          display: grid;
          grid-template-columns: auto 1fr;
          align-items: center;
          gap: 0.5rem;
          padding: 0.35rem 0.55rem 0.35rem 0.35rem;
          border-radius: 12px;
          border: 1px solid rgba(255, 255, 255, 0.28);
          background: rgba(12, 18, 24, 0.22);
          color: #fff;
          text-decoration: none;
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        }

        .service-board a:hover {
          background: rgba(12, 18, 24, 0.34);
          border-color: rgba(255, 255, 255, 0.5);
          transform: translateY(-1px);
        }

        .svc-thumb {
          width: 34px;
          height: 34px;
          border-radius: 8px;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.16);
          border: 1px solid rgba(255, 255, 255, 0.2);
          flex-shrink: 0;
        }

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

        .svc-label {
          font-family: Outfit, sans-serif;
          font-weight: 700;
          font-size: 0.8rem;
          line-height: 1.2;
          letter-spacing: -0.01em;
        }

        .home-hero .cta-row {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 0.65rem 1rem;
          margin-top: 0.1rem;
        }

        .home-hero .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0.62rem 1.05rem;
          border-radius: 999px;
          font-family: Outfit, sans-serif;
          font-weight: 700;
          font-size: 0.82rem;
          letter-spacing: 0.02em;
          text-transform: uppercase;
          text-decoration: none;
          border: 0;
          transition: transform 0.15s ease, background 0.15s ease;
        }

        .home-hero .btn:hover {
          transform: translateY(-1px);
        }

        .theme-reparaties .btn-accent {
          background: #f08119;
          color: #fff;
          box-shadow: 0 12px 28px rgba(14, 22, 28, 0.22);
        }

        .theme-reparaties .btn-accent:hover {
          background: #d66c0a;
        }

        .theme-winkel .btn-accent,
        .theme-diensten .btn-accent {
          background: #fff;
          color: #d96505;
          box-shadow: 0 12px 28px rgba(14, 22, 28, 0.16);
        }

        .theme-winkel .btn-accent:hover,
        .theme-diensten .btn-accent:hover {
          background: #fff7ef;
        }

        .home-hero .text-link {
          font-family: Outfit, sans-serif;
          font-weight: 700;
          font-size: 0.95rem;
          color: #fff;
          text-decoration: none;
          border-bottom: 1px solid rgba(255, 255, 255, 0.65);
          padding-bottom: 0.08rem;
          text-shadow: 0 1px 2px rgba(10, 16, 22, 0.35);
        }

        .home-hero .text-link:hover {
          border-bottom-color: #fff;
        }

        .hero-visuals {
          justify-self: center;
          align-self: end;
          position: relative;
          z-index: 2;
          display: grid;
          width: min(100%, 340px);
          margin-left: -1.25rem;
          pointer-events: none;
        }

        .hero-visual {
          grid-area: 1 / 1;
          position: relative;
          z-index: 0;
          width: 100%;
          visibility: hidden;
          opacity: 0;
          pointer-events: none;
        }

        .hero-visual.is-active {
          visibility: visible;
          opacity: 1;
          z-index: 1;
        }

        .hero-mascot {
          position: relative;
          z-index: 2;
          width: 100%;
          filter: drop-shadow(0 18px 24px rgba(12, 18, 24, 0.2));
        }

        .hero-guarantee {
          position: absolute;
          left: -5.5rem;
          bottom: 16%;
          z-index: 5;
          max-width: min(100%, 15.5rem);
          filter: drop-shadow(0 14px 24px rgba(12, 18, 24, 0.28));
          animation: guarantee-float 5.2s ease-in-out 0.55s infinite;
        }

        @keyframes guarantee-float {
          0%,
          100% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(-7px);
          }
        }

        .mascot-stage {
          position: absolute;
          left: 50%;
          bottom: 4%;
          width: 78%;
          height: 28%;
          transform: translateX(-50%);
          border-radius: 50%;
          background: radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.08) 45%,
            transparent 72%
          );
          filter: blur(2px);
          z-index: 0;
        }

        .hero-mascot img {
          position: relative;
          z-index: 1;
          display: block;
          width: 100%;
          height: auto;
          max-height: min(420px, 50vh);
          object-fit: contain;
          object-position: bottom center;
          transform-origin: 70% 100%;
        }

        .hero-visual.is-active.is-reparaties .hero-mascot {
          animation: mascot-fly-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .hero-visual.is-active.is-winkel .hero-mascot {
          animation: mascot-rise-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .hero-visual.is-active.is-diensten .hero-mascot {
          animation: mascot-pop-in 0.68s cubic-bezier(0.34, 1.4, 0.64, 1) both;
        }

        @keyframes panel-in {
          from {
            opacity: 0;
            transform: translateY(14px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes sheen-drift {
          from { transform: skewX(-12deg) translateX(-4%); }
          to { transform: skewX(-12deg) translateX(6%); }
        }

        @keyframes mascot-fly-in {
          from {
            opacity: 0;
            transform: translate3d(18%, 12%, 0) scale(0.86) rotate(8deg);
          }
          65% {
            opacity: 1;
            transform: translate3d(-2%, -2%, 0) scale(1.03) rotate(-1.5deg);
          }
          to {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
          }
        }

        @keyframes mascot-rise-in {
          from {
            opacity: 0;
            transform: translate3d(0, 28%, 0) scale(0.9);
          }
          70% {
            opacity: 1;
            transform: translate3d(0, -3%, 0) scale(1.02);
          }
          to {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
          }
        }

        @keyframes mascot-pop-in {
          from {
            opacity: 0;
            transform: translate3d(10%, 8%, 0) scale(0.72);
          }
          55% {
            opacity: 1;
            transform: translate3d(-1%, -2%, 0) scale(1.08);
          }
          to {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
          }
        }

        @media (max-width: 980px) {
          .hero-shell {
            grid-template-columns: minmax(0, 1fr) minmax(160px, 0.55fr);
            align-items: end;
          }

          .hero-visuals {
            width: min(100%, 230px);
            margin-left: 0;
          }

          .hero-guarantee {
            left: -3.25rem;
            bottom: 12%;
            max-width: 13.5rem;
          }
        }

        @media (max-width: 720px) {
          .home-hero {
            overflow: visible;
            min-height: 0;
          }

          /* Always the repair hero look on mobile */
          .home-hero .wash.orange,
          .home-hero.theme-reparaties .wash.orange,
          .home-hero.theme-winkel .wash.orange,
          .home-hero.theme-diensten .wash.orange {
            clip-path: polygon(0 0, 100% 0, 100% 48%, 0 68%);
            background: linear-gradient(155deg, #f08a22 0%, #e07012 45%, #c45f08 100%);
            opacity: 1;
          }

          .home-hero .wash.blue,
          .home-hero.theme-winkel .wash.blue {
            background: linear-gradient(155deg, #12a8e0 0%, #008fce 48%, #0074a8 100%);
          }

          .hero-shell {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-block: 1.15rem 1.65rem;
            min-height: 0;
            gap: 0.35rem;
            text-align: center;
          }

          .home-hero .tablist {
            display: none !important;
          }

          .hero-visuals {
            order: 1;
            position: relative;
            top: auto;
            right: auto;
            width: min(42vw, 148px);
            margin: 0 auto 0.15rem;
            z-index: 2;
            pointer-events: none;
          }

          .hero-visual:not(.hero-visual--primary) {
            display: none !important;
          }

          .hero-visual--primary {
            visibility: visible !important;
            opacity: 1 !important;
          }

          .hero-visual--primary .hero-mascot {
            animation: none;
            filter: drop-shadow(0 14px 20px rgba(12, 18, 24, 0.22));
          }

          .hero-mascot img {
            max-height: 148px;
            width: 100%;
            object-position: bottom center;
          }

          .hero-guarantee,
          .mascot-stage {
            display: none;
          }

          .hero-main {
            order: 2;
            display: grid;
            justify-items: center;
            gap: 0.7rem;
            max-width: 26rem;
            width: 100%;
            margin: 0;
            position: relative;
            z-index: 2;
          }

          .hero-panels {
            max-width: none;
            width: 100%;
          }

          .hero-panel:not(.hero-panel--primary) {
            display: none !important;
          }

          .hero-panel--primary {
            display: grid !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            justify-items: center;
            text-align: center;
            gap: 0.55rem;
            max-width: none;
            width: 100%;
            animation: none;
          }

          .home-hero .kicker {
            font-size: 0.76rem;
          }

          .hero-panel h1 {
            font-size: clamp(1.75rem, 7.5vw, 2.15rem);
            max-width: 14ch;
            line-height: 1.05;
            padding-right: 0;
            text-wrap: balance;
          }

          .home-hero .hero-lead {
            max-width: 32ch;
            font-size: 0.95rem;
            line-height: 1.45;
            padding-right: 0;
            margin-inline: auto;
          }

          .search-wrap {
            width: 100%;
            max-width: 22rem;
            position: relative;
            z-index: 3;
          }

          .home-hero .cta-row {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            margin-top: 0.1rem;
            width: 100%;
          }

          .home-hero .cta-row .btn {
            width: auto;
            padding: 0.55rem 0.95rem;
            font-size: 0.78rem;
          }

          .hide-mobile {
            display: none !important;
          }

          .home-hero .text-link {
            font-size: 0.92rem;
          }
        }

        @media (max-width: 380px) {
          .hero-visuals {
            width: min(46vw, 132px);
          }

          .hero-panel h1 {
            font-size: 1.65rem;
          }

          .hero-mascot img {
            max-height: 132px;
          }

          .home-hero .hero-lead {
            font-size: 0.9rem;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .hero-panel,
          .hero-mascot,
          .hero-guarantee,
          .sheen {
            animation: none !important;
          }
        }

.products .toolbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 1rem;
          margin-bottom: 1rem;
        }
.products .toolbar input {
          flex: 1;
          max-width: 360px;
          border: 1px solid #e4e8ec;
          border-radius: 999px;
          padding: 0.7rem 1rem;
          background: #fff;
          font: inherit;
        }
.products .toolbar span {
          color: #5b6570;
          font-size: 0.9rem;
          white-space: nowrap;
        }
.products .grid {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 0.85rem;
        }
.products .card {
          background: #fff;
          border: 1px solid #e4e8ec;
          border-radius: 14px;
          overflow: hidden;
          text-decoration: none;
          color: inherit;
          transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }
.products .card:hover {
          transform: translateY(-2px);
          border-color: rgba(0, 160, 227, 0.35);
          box-shadow: 0 12px 28px rgba(26, 31, 36, 0.08);
        }
.products .media {
          aspect-ratio: 1;
          display: grid;
          place-items: center;
          background: #fff;
          padding: 0.85rem 0.85rem 0.5rem;
          border-bottom: 1px solid #eef1f4;
          overflow: hidden;
        }
.products .media img {
          width: 78%;
          height: 78%;
          max-width: 140px;
          max-height: 140px;
          object-fit: contain;
          display: block;
          transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
        }
.products .card:hover .media img {
          transform: scale(1.08) translateY(-4px);
        }
.products .placeholder {
          color: #5b6570;
          font-size: 0.85rem;
        }
.products .body {
          padding: 0.55rem 0.75rem 0.8rem;
          display: grid;
          gap: 0.2rem;
        }
.products .body h3 {
          font-family: Outfit, sans-serif;
          font-size: 0.88rem;
          font-weight: 700;
          letter-spacing: -0.01em;
          line-height: 1.25;
          margin: 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
.products .body p {
          margin: 0;
          color: #5b6570;
          font-size: 0.78rem;
          line-height: 1.35;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
.products .body strong {
          color: #f08119;
          font-family: Outfit, sans-serif;
          font-size: 0.98rem;
          letter-spacing: -0.015em;
          margin-top: 0.1rem;
        }
        @media (max-width: 980px) {
.products .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
        @media (max-width: 720px) {
.products .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
        }
        @media (max-width: 420px) {
.products .toolbar { flex-direction: column; align-items: stretch; }
.products .toolbar input { max-width: none; }
        }