/* PHP-shop: page-level styles extracted from Astro pages */

/* --- src/pages/index.astro --- */
body.view-home {
.hero-stack {
    position: relative;
    z-index: 2;
  }

  .hero-stack .home-hero {
    z-index: 1;
    isolation: auto;
    padding-bottom: 3rem;
  }

  .hero-stack .usp-bar {
    z-index: 3;
    margin-top: -3.15rem;
  }

  .hero-stack .hero-mascot {
    z-index: 4;
    margin-bottom: -2.75rem;
  }

  @media (max-width: 980px) {
    .hero-stack .home-hero {
      padding-bottom: 2rem;
    }

    .hero-stack .usp-bar {
      margin-top: -1.25rem;
    }

    .hero-stack .hero-mascot {
      margin-bottom: -0.35rem;
    }
  }

  @media (max-width: 720px) {
    .hero-stack .home-hero {
      padding-bottom: 1.75rem;
      overflow: visible;
    }

    .hero-stack .hero-mascot {
      z-index: 1;
      margin: 0;
    }

    .hero-stack .usp-bar {
      margin-top: -0.85rem;
    }
  }

  .intro-section {
    padding-block: clamp(2.5rem, 4.5vw, 3.5rem);
  }

  .intro {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }

  .intro-copy {
    display: grid;
    gap: 0.95rem;
    align-content: center;
  }

  .intro-copy .eyebrow,
  .intro-copy h2,
  .intro-copy .lead {
    margin: 0;
  }

  .intro-copy h2 {
    max-width: 22ch;
    text-wrap: balance;
    font-size: clamp(1.75rem, 2.9vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .intro-copy .lead {
    max-width: 52ch;
    color: #5b6570;
    font-size: 1.06rem;
    line-height: 1.6;
  }

  .intro-points {
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
    max-width: 40rem;
  }

  .intro-points li {
    position: relative;
    padding-left: 1.05rem;
    color: var(--ms-ink, #1a1f24);
    font-size: 0.95rem;
    line-height: 1.35;
  }

  .intro-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--ms-orange);
  }

  .intro-copy .btn {
    justify-self: start;
    margin-top: 0.25rem;
  }

  .intro-visual {
    position: relative;
    isolation: isolate;
    padding: 18% 0.4rem 1.2rem;
  }

  .intro-visual-glow {
    position: absolute;
    inset: 14% 6% 10% 16%;
    z-index: 0;
    border-radius: 2rem;
    background:
      radial-gradient(circle at 72% 28%, rgba(0, 160, 227, 0.22), transparent 62%),
      radial-gradient(circle at 18% 78%, rgba(240, 129, 25, 0.16), transparent 58%);
    filter: blur(22px);
    pointer-events: none;
  }

  .intro-shot {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 1.15rem;
    background: #e8eef3;
    box-shadow:
      0 0 0 5px #fff,
      0 18px 40px rgba(15, 42, 61, 0.16);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

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

  .intro-shot-side {
    width: 74%;
    margin-left: auto;
    aspect-ratio: 5 / 4;
    transform: rotate(2.2deg);
    z-index: 1;
  }

  .intro-shot-main {
    position: absolute;
    left: 0;
    bottom: 0.35rem;
    z-index: 2;
    width: min(58%, 17.5rem);
    aspect-ratio: 4 / 5;
    transform: rotate(-2.6deg);
  }

  .intro-shot-chip {
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.7rem;
    z-index: 3;
    padding: 0.55rem 0.7rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 22px rgba(15, 42, 61, 0.12);
    display: grid;
    gap: 0.08rem;
  }

  .intro-shot-chip strong {
    font-size: 0.82rem;
    letter-spacing: -0.02em;
    color: var(--ms-ink, #1a1f24);
  }

  .intro-shot-chip span {
    font-size: 0.72rem;
    color: #5b6570;
  }

  .intro-visual:hover .intro-shot-side {
    transform: rotate(0.6deg) translateY(-3px);
  }

  .intro-visual:hover .intro-shot-main {
    transform: rotate(-0.6deg) translateY(-5px);
  }

  .service-area {
    padding-block: clamp(2.5rem, 4.5vw, 3.5rem);
    background:
      radial-gradient(ellipse 55% 70% at 85% 30%, rgba(0, 160, 227, 0.07), transparent 60%),
      linear-gradient(180deg, #f5f8fb 0%, #fff 85%);
  }

  .service-area-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: stretch;
  }

  .service-copy {
    display: grid;
    gap: 1.15rem;
    align-content: start;
  }

  .service-intro {
    display: grid;
    gap: 0.6rem;
  }

  .service-copy .eyebrow,
  .service-copy h2,
  .service-copy .lead {
    margin: 0;
  }

  .service-copy h2 {
    max-width: 24ch;
    text-wrap: balance;
    letter-spacing: -0.02em;
    line-height: 1.12;
  }

  .service-copy .lead {
    max-width: 54ch;
    color: #5b6570;
    font-size: 1.02rem;
    line-height: 1.55;
  }

  .service-points {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 1.1rem;
    color: var(--ms-ink, #1a1f24);
    font-size: 0.95rem;
  }

  .service-points li {
    position: relative;
    padding-left: 1.15rem;
  }

  .service-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--ms-orange);
  }

  .service-meta {
    margin: 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--ms-line);
    display: grid;
    gap: 0.3rem;
  }

  .service-meta-label {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ms-ink, #1a1f24);
  }

  .service-meta > p:not(.service-meta-label) {
    margin: 0;
    color: var(--ms-muted);
    font-size: 0.95rem;
    max-width: 52ch;
    line-height: 1.5;
  }

  .service-phone {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ms-blue-dark);
    width: fit-content;
  }

  .service-phone:hover {
    color: var(--ms-blue);
  }

  .service-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.25rem;
    margin-top: 0.25rem;
  }

  .service-link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ms-blue-dark);
  }

  .service-link:hover {
    color: var(--ms-blue);
  }

  .service-visual {
    margin: 0;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: 22rem;
    height: 100%;
    background: #e8eef3;
    box-shadow: 0 18px 40px rgba(20, 32, 41, 0.08);
  }

  .service-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .service-visual figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.15rem 1.05rem;
    background: linear-gradient(180deg, transparent 0%, rgba(18, 24, 30, 0.55) 55%, rgba(18, 24, 30, 0.82) 100%);
    color: #fff;
  }

  .service-visual figcaption div {
    display: grid;
    gap: 0.1rem;
  }

  .service-visual figcaption strong {
    font-family: var(--font-display);
    font-size: 1rem;
  }

  .service-visual figcaption span {
    font-size: 0.88rem;
    opacity: 0.88;
  }

  .service-visual figcaption a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  }

  .service-visual figcaption a:hover {
    border-bottom-color: #fff;
  }

  .services-section {
    padding-block: 3.25rem 3.5rem;
    background:
      radial-gradient(ellipse 70% 80% at 10% 20%, rgba(0, 160, 227, 0.08), transparent 55%),
      radial-gradient(ellipse 55% 60% at 90% 80%, rgba(240, 129, 25, 0.07), transparent 50%),
      linear-gradient(180deg, #f7fafc, #fff 70%);
  }

  .services-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    max-width: none;
  }

  .services-head h2 {
    margin: 0;
    letter-spacing: -0.02em;
  }

  .services-head .eyebrow {
    margin-bottom: 0.35rem;
  }

  .services-all {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ms-blue-dark);
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.15s ease, transform 0.15s ease;
  }

  .services-all:hover {
    color: var(--ms-blue);
    transform: translateX(2px);
  }

  .cta-row {
    margin-top: 1.5rem;
  }

  @media (max-width: 980px) {
    .intro,
    .service-area-grid {
      grid-template-columns: 1fr;
    }

    .intro-copy h2,
    .service-copy h2,
    .intro-copy .lead,
    .service-copy .lead {
      max-width: none;
    }

    .intro-visual {
      max-width: 28rem;
      margin-inline: auto;
      width: 100%;
      padding-top: 16%;
    }

    .intro-shot-main {
      width: min(56%, 15.5rem);
    }

    .service-visual {
      min-height: 18rem;
    }
  }

  @media (max-width: 620px) {
    .services-head {
      align-items: start;
      flex-direction: column;
      gap: 0.65rem;
    }

    .intro-points,
    .service-points {
      grid-template-columns: 1fr;
    }

    .intro-shot-side {
      width: 78%;
      transform: rotate(1.4deg);
    }

    .intro-shot-main {
      width: min(62%, 13.5rem);
      transform: rotate(-1.8deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .intro-shot,
    .intro-visual:hover .intro-shot-side,
    .intro-visual:hover .intro-shot-main {
      transform: none;
      transition: none;
    }
  }
}

/* --- src/pages/404.astro --- */
body.view-not-found {
.lost {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: calc(100vh - var(--site-header-offset, 5.5rem) - 4rem);
    display: grid;
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem);
    color: #fff;
  }

  .lost-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .wash {
    position: absolute;
    inset: 0;
  }

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

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

  .glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.35;
  }

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

  .glow-b {
    width: min(40vw, 360px);
    height: min(40vw, 360px);
    right: -6%;
    bottom: 10%;
    background: rgba(255, 210, 120, 0.28);
  }

  .grid-lines {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  }

  .lost-frame {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }

  .lost-copy {
    display: grid;
    gap: 0.75rem;
    max-width: 34rem;
    animation: lost-copy-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .brand {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .code {
    display: flex;
    align-items: baseline;
    gap: 0.12em;
    margin: 0.15rem 0 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(4.5rem, 12vw, 7.5rem);
    letter-spacing: -0.06em;
    line-height: 0.9;
    text-shadow: 0 18px 40px rgba(10, 16, 22, 0.22);
  }

  .code span {
    display: inline-block;
    animation: digit-pop 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  }

  .code span:nth-child(2) {
    animation-delay: 0.08s;
  }

  .code span:nth-child(3) {
    animation-delay: 0.16s;
  }

  .code .zero {
    color: rgba(255, 255, 255, 0.82);
    animation:
      digit-pop 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both,
      zero-spin 8s ease-in-out 1s infinite;
  }

  h1 {
    margin: 0;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .lead {
    margin: 0;
    max-width: 40ch;
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
  }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.35rem;
  }

  .lost .btn-ghost {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    backdrop-filter: blur(6px);
  }

  .lost .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
  }

  .lost.is-br .btn-br {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 1.15rem;
    border-radius: 999px;
    border: 0;
    background: #007ac3;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
  }

  .lost.is-br .btn-br:hover {
    background: #00629c;
    color: #fff;
  }

  .quick-links {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
  }

  .quick-links a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  }

  .quick-links a:hover {
    color: #fff;
    border-bottom-color: #fff;
  }

  .lost-stage {
    position: relative;
    min-height: clamp(18rem, 42vw, 26rem);
    display: grid;
    place-items: end center;
    animation: lost-stage-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  }

  .floor {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 8%;
    height: 18%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(10, 16, 22, 0.35), transparent 70%);
    filter: blur(2px);
  }

  .mascot {
    position: absolute;
    filter: drop-shadow(0 18px 28px rgba(12, 18, 24, 0.28));
  }

  .mascot img {
    width: 100%;
    height: auto;
    display: block;
  }

  .mascot-repair {
    left: 2%;
    bottom: 14%;
    width: min(54%, 250px);
    z-index: 2;
    animation: repair-sway 4.8s ease-in-out 0.4s infinite;
  }

  .mascot-school {
    right: 0;
    bottom: 10%;
    width: min(62%, 290px);
    z-index: 1;
    animation: school-bob 5.4s ease-in-out 0.6s infinite;
  }

  .search-bubble {
    position: absolute;
    top: 12%;
    left: 46%;
    z-index: 3;
    width: 3.4rem;
    height: 3.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #e07012;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.55rem;
    box-shadow: 0 12px 28px rgba(10, 16, 22, 0.2);
    animation: bubble-pop 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) 0.55s both,
      bubble-float 3.6s ease-in-out 1.2s infinite;
  }

  .search-bubble::after {
    content: "";
    position: absolute;
    left: 28%;
    bottom: -0.35rem;
    width: 0.7rem;
    height: 0.7rem;
    background: #fff;
    transform: rotate(45deg);
  }

  /* Budget Repair: blue/orange split instead of MS orange/blue */
  .lost.is-br .wash-orange {
    background: linear-gradient(155deg, #007ac3 0%, #00629c 48%, #004f7a 100%);
    clip-path: polygon(0 0, 100% 0, 100% 46%, 0 68%);
  }

  .lost.is-br .wash-blue {
    background: linear-gradient(155deg, #f36f21 0%, #e05f14 48%, #c44f0c 100%);
    clip-path: polygon(0 58%, 100% 36%, 100% 100%, 0 100%);
  }

  .lost.is-br .glow-b {
    background: rgba(243, 111, 33, 0.28);
  }

  .lost.is-br .search-bubble {
    color: #f36f21;
  }

  .lost.is-br .lost-frame {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .lost.is-br .lost-copy {
    justify-items: center;
    order: 2;
    max-width: 38rem;
  }

  .lost.is-br .lost-stage {
    order: 1;
    width: min(100%, 46rem);
    min-height: 0;
    place-items: center;
    animation: lost-stage-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .lost.is-br .lost-art {
    width: 100%;
    animation: art-float 5.2s ease-in-out 1.1s infinite;
  }

  .lost.is-br .lost-art img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 36px rgba(12, 18, 24, 0.22));
  }

  .lost.is-br .lead {
    max-width: 44ch;
    text-shadow: 0 1px 10px rgba(10, 16, 22, 0.28);
  }

  .lost.is-br .cta-row,
  .lost.is-br .quick-links {
    justify-content: center;
  }

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

  @keyframes lost-copy-in {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes lost-stage-in {
    from {
      opacity: 0;
      transform: translateX(24px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }

  @keyframes digit-pop {
    from {
      opacity: 0;
      transform: translateY(28px) scale(0.85);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes zero-spin {
    0%,
    100% {
      transform: rotate(0deg);
    }
    40% {
      transform: rotate(-8deg);
    }
    70% {
      transform: rotate(6deg);
    }
  }

  @keyframes repair-sway {
    0%,
    100% {
      transform: translateY(0) rotate(-2deg);
    }
    50% {
      transform: translateY(-10px) rotate(2deg);
    }
  }

  @keyframes school-bob {
    0%,
    100% {
      transform: translateY(0) rotate(2deg);
    }
    50% {
      transform: translateY(-12px) rotate(-1deg);
    }
  }

  @keyframes bubble-pop {
    from {
      opacity: 0;
      transform: scale(0.4);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

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

  @media (max-width: 900px) {
    .lost-frame {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
    }

    .lost-copy {
      justify-items: center;
      order: 2;
    }

    .lost-stage {
      order: 1;
      width: min(100%, 28rem);
      min-height: 16rem;
    }

    .lead {
      max-width: 42ch;
    }

    .cta-row,
    .quick-links {
      justify-content: center;
    }

    .code {
      justify-content: center;
    }
  }

  @media (max-width: 560px) {
    .lost {
      min-height: 0;
      padding-block: 1.75rem 2.25rem;
    }

    .lost-stage {
      min-height: 14rem;
    }

    .mascot-repair {
      width: 46%;
    }

    .mascot-school {
      width: 52%;
    }

    .search-bubble {
      width: 2.8rem;
      height: 2.8rem;
      font-size: 1.25rem;
      top: 8%;
    }

    .cta-row .btn {
      padding: 0.55rem 0.9rem;
      font-size: 0.78rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .lost-copy,
    .lost-stage,
    .code span,
    .code .zero,
    .mascot-repair,
    .mascot-school,
    .search-bubble,
    .lost.is-br .lost-art {
      animation: none !important;
    }
  }
}

/* --- src/pages/product/[slug].astro --- */
body.view-product {
.pdp-stage {
    position: relative;
    padding: clamp(1rem, 2.2vw, 1.4rem) 0 clamp(2rem, 3.5vw, 2.75rem);
    background: #fff;
    border-bottom: 1px solid var(--ms-line);
    isolation: isolate;
  }

  .crumbs {
    margin-bottom: 1.35rem;
  }

  .crumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .crumbs li {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    color: #8a949e;
  }

  .crumbs li + li::before {
    content: "";
    width: 0.28rem;
    height: 0.28rem;
    margin-inline: 0.5rem;
    border-right: 1.5px solid #c5ccd4;
    border-top: 1.5px solid #c5ccd4;
    transform: rotate(45deg);
  }

  .crumbs a {
    color: #6b7580;
    text-decoration: none;
  }

  .crumbs a:hover {
    color: var(--ms-orange-dark);
  }

  .crumbs [aria-current="page"] {
    color: #5b6570;
    font-weight: 600;
    max-width: min(36ch, 55vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pdp-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(1.5rem, 3.5vw, 2.75rem);
    align-items: start;
  }

  .media {
    position: relative;
    margin: 0;
    display: grid;
    align-content: start;
    justify-items: center;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .media-frame {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: #fff;
    /* Feather the product JPG’s hard off-white box into the stage */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-composite: intersect;
  }

  .media img {
    position: relative;
    z-index: 1;
    width: 94%;
    height: 94%;
    max-width: 340px;
    max-height: 340px;
    object-fit: contain;
    object-position: center center;
    display: block;
    mix-blend-mode: multiply;
  }

  .placeholder {
    color: var(--ms-muted);
    font-weight: 600;
  }

  .buybox {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding-top: 0.15rem;
    max-width: 34rem;
  }

  .buybox .eyebrow {
    margin: 0;
  }

  .buybox h1 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    letter-spacing: -0.035em;
    line-height: 1.1;
    text-wrap: balance;
  }

  .pdp-rating {
    margin: 0;
    font-size: 0.92rem;
    color: #3d4853;
  }

  .pdp-rating strong {
    font-family: var(--font-display);
    color: var(--ms-orange-dark);
  }

  .buybox .lead {
    margin: 0;
    color: #5b6570;
    font-size: 1.02rem;
    line-height: 1.5;
    max-width: 36ch;
  }

  .price-block {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.25rem;
    padding: 1rem 0;
    border-block: 1px solid var(--ms-line);
  }

  .price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.55rem 0.85rem;
  }

  .price {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ms-orange);
  }

  .compare {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #9aa5b0;
    text-decoration: line-through;
  }

  .save {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1d7a3d;
  }

  .stock {
    margin: 0.15rem 0 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1d7a3d;
  }

  .stock.out_of_stock {
    color: #b42318;
  }

  .stock.on_backorder {
    color: #b76e00;
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
    margin-top: 0.15rem;
  }

  .actions .btn {
    min-height: 2.85rem;
  }

  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.2rem;
    border-radius: 999px;
    border: 1px solid var(--ms-line);
    background: #fff;
    color: var(--ms-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }

  .btn-ghost:hover {
    border-color: rgba(0, 160, 227, 0.45);
    color: var(--ms-blue-dark);
  }

  .text-link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ms-blue-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 134, 191, 0.35);
  }

  .text-link:hover {
    color: var(--ms-orange-dark);
    border-bottom-color: currentColor;
  }

  .text-link.light {
    color: #5ec8f5;
    border-bottom-color: rgba(94, 200, 245, 0.45);
  }

  .text-link.light:hover {
    color: #ffb265;
  }

  .text-link.dark {
    color: var(--ms-blue-dark);
  }

  .quick-perks {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0.85rem 0 0;
    border-top: 1px solid var(--ms-line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.15rem;
  }

  .quick-perks li {
    position: relative;
    padding-left: 0.95rem;
    color: #3d4853;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .quick-perks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--ms-orange);
  }

  .highlights-section {
    padding: clamp(2rem, 3.5vw, 2.75rem) 0;
    background: #fff;
  }

  .section-head {
    margin-bottom: 1.15rem;
    max-width: 34rem;
  }

  .section-head .eyebrow {
    margin-bottom: 0.3rem;
  }

  .section-head h2,
  .desc-copy h2,
  .related-head h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.3vw, 1.75rem);
    letter-spacing: -0.025em;
  }

  .highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.35rem;
  }

  .highlights li {
    padding-top: 0.85rem;
    border-top: 2px solid rgba(240, 129, 25, 0.4);
  }

  .highlights li:nth-child(even) {
    border-top-color: rgba(0, 160, 227, 0.4);
  }

  .highlights strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.3rem;
  }

  .highlights p {
    margin: 0;
    color: #5b6570;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .desc-section {
    padding: clamp(2.25rem, 4vw, 3.25rem) 0;
    background:
      radial-gradient(ellipse 50% 70% at 0% 0%, rgba(0, 160, 227, 0.06), transparent 55%),
      linear-gradient(180deg, #f7fafc 0%, #fff 100%);
    border-block: 1px solid var(--ms-line);
  }

  .desc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.85fr);
    gap: 1.5rem 2rem;
    align-items: start;
  }

  .desc-copy .eyebrow {
    margin-bottom: 0.35rem;
  }

  .desc-copy h2 {
    margin-bottom: 0.9rem;
  }

  .prose {
    color: #3d4853;
    line-height: 1.7;
    max-width: 44rem;
  }

  .prose p {
    margin: 0 0 1rem;
  }

  .prose h3 {
    margin: 1.25rem 0 0.55rem;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
  }

  .prose ul {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.4rem;
  }

  .visit-note {
    display: grid;
    gap: 0.45rem;
    padding: 1.35rem 1.25rem;
    border-radius: 20px;
    background: linear-gradient(160deg, #142029 0%, #1c2d39 55%, #123247 100%);
    color: #e8eef3;
  }

  .visit-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffb265;
  }

  .visit-note strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: #fff;
  }

  .visit-note p {
    margin: 0;
    color: #c5d0d8;
    font-size: 0.94rem;
    line-height: 1.5;
  }

  .visit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 0.45rem;
  }

  .related-section {
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(3.25rem, 5vw, 4.25rem);
  }

  .related-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
  }

  .related-head .eyebrow {
    margin-bottom: 0.3rem;
  }

  .related-slider {
    min-width: 0;
  }

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

  @media (max-width: 720px) {
    .pdp-grid,
    .desc-layout {
      grid-template-columns: 1fr;
    }

    .media-frame {
      width: min(100%, 280px);
    }

    .buybox {
      max-width: none;
    }

    .actions {
      flex-direction: column;
      align-items: stretch;
    }

    .actions .btn,
    .actions .btn-ghost {
      width: 100%;
    }

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

    .related-head {
      align-items: start;
      flex-direction: column;
    }
  }

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

/* --- src/pages/refurbished.astro --- */
body.view-refurbished {
.aanbod-section {
    padding-top: clamp(2.25rem, 4vw, 3rem);
  }

  .aanbod-head {
    margin-bottom: 1.25rem;
  }

  .aanbod-head .eyebrow {
    margin-bottom: 0.35rem;
  }

  .aanbod-head h2 {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 1.9rem);
    letter-spacing: -0.025em;
  }

  #aanbod {
    scroll-margin-top: var(--site-header-offset, 5.5rem);
  }
}

/* --- src/pages/diensten/index.astro --- */
body.view-diensten {
.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .featured-section {
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem);
  }

  .section-head {
    margin-bottom: 1.25rem;
  }

  .section-head .eyebrow {
    margin-bottom: 0.3rem;
  }

  .section-head h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.3vw, 1.75rem);
    letter-spacing: -0.025em;
  }

  .featured-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.85rem;
  }

  .feature {
    position: relative;
    display: grid;
    grid-template-rows: minmax(180px, 1fr) auto;
    min-height: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ms-line);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 16px 36px rgba(20, 32, 41, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    scroll-margin-top: calc(var(--site-header-offset, 5.5rem) + 0.75rem);
  }

  .feature.wide {
    grid-row: span 2;
  }

  .feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 48px rgba(20, 32, 41, 0.1);
  }

  .feature figure {
    margin: 0;
    min-height: 160px;
    overflow: hidden;
    background: #e8eef3;
  }

  .feature.wide figure {
    min-height: 260px;
  }

  .feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  .feature:hover img {
    transform: scale(1.04);
  }

  .feature-copy {
    display: grid;
    gap: 0.4rem;
    padding: 1.15rem 1.2rem 1.25rem;
    background:
      radial-gradient(ellipse 80% 80% at 100% 0%, rgba(240, 129, 25, 0.08), transparent 55%),
      #fff;
  }

  .feature .index {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #9aa5b0;
  }

  .feature h3,
  .service h3 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .feature.wide h3 {
    font-size: clamp(1.35rem, 2vw, 1.6rem);
  }

  .feature p,
  .service p {
    margin: 0;
    color: var(--ms-muted);
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .more {
    margin-top: 0.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ms-blue-dark);
  }

  .feature:hover .more,
  .service:hover .more {
    color: var(--ms-orange-dark);
  }

  .list-section {
    padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(3rem, 5vw, 4rem);
    background:
      radial-gradient(ellipse 50% 60% at 100% 0%, rgba(0, 160, 227, 0.07), transparent 50%),
      linear-gradient(180deg, #f7fafc 0%, #fff 70%);
    border-top: 1px solid var(--ms-line);
  }

  .service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .service {
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ms-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    scroll-margin-top: calc(var(--site-header-offset, 5.5rem) + 0.75rem);
  }

  .service:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 160, 227, 0.35);
    box-shadow: 0 16px 34px rgba(20, 32, 41, 0.08);
  }

  .service figure {
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef2f5;
  }

  .service img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
  }

  .service:hover img {
    transform: scale(1.05);
  }

  .service-copy {
    display: grid;
    gap: 0.4rem;
    align-content: start;
    padding: 1.05rem 1.1rem 1.15rem;
  }

  .cta-section {
    padding: 0 0 clamp(3rem, 5vw, 4rem);
  }

  .cta-panel {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    flex-wrap: wrap;
    padding: clamp(1.4rem, 3vw, 1.9rem);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(240, 129, 25, 0.1), rgba(0, 160, 227, 0.1));
    border: 1px solid var(--ms-line);
  }

  .cta-panel .eyebrow {
    margin-bottom: 0.3rem;
  }

  .cta-panel h2 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.4rem, 2.3vw, 1.75rem);
    letter-spacing: -0.025em;
  }

  .cta-panel .lead {
    margin: 0;
    color: var(--ms-muted);
    max-width: 36ch;
  }

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

    .feature.wide {
      grid-row: auto;
    }

    .feature,
    .feature.wide {
      grid-template-rows: auto auto;
    }

    .feature figure,
    .feature.wide figure {
      aspect-ratio: 16 / 10;
      min-height: 0;
    }

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

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

    .cta-panel {
      align-items: start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .feature,
    .service,
    .feature img,
    .service img {
      transition: none;
    }

    .feature:hover,
    .service:hover,
    .feature:hover img,
    .service:hover img {
      transform: none;
    }
  }
}

/* --- src/pages/diensten/[slug].astro --- */
body.view-dienst {
.detail-body {
    padding: clamp(2rem, 4vw, 3rem) 0;
  }

  .detail-body .container {
    max-width: min(1180px, calc(100% - 2rem));
  }

  .detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 15rem);
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
  }

  .main-col {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
  }

  .service-figure {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--ms-line);
    background: #eef2f5;
    aspect-ratio: 16 / 9;
    width: 100%;
  }

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

  .prose {
    max-width: none;
    font-size: 1.06rem;
    line-height: 1.78;
    color: #3d4853;
  }

  .prose h2 {
    margin: 1.75rem 0 0.7rem;
    font-size: clamp(1.3rem, 2.1vw, 1.5rem);
    letter-spacing: -0.025em;
    color: var(--ms-ink);
  }

  .prose p {
    margin: 0 0 1.05rem;
  }

  .prose ul,
  .prose ol {
    margin: 0 0 1.15rem;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.4rem;
  }

  .prose li::marker {
    color: var(--ms-orange);
  }

  .prose a {
    color: var(--ms-blue-dark);
    font-weight: 600;
  }

  .aside {
    display: grid;
    gap: 0.9rem;
    position: sticky;
    top: calc(var(--site-header-offset, 5.5rem) + 0.75rem);
  }

  .aside-panel {
    display: grid;
    gap: 0.5rem;
    padding: 1.2rem 1.15rem 1.25rem;
    border-radius: 18px;
    background: linear-gradient(160deg, #142029 0%, #1c2d39 55%, #123247 100%);
    color: #e8eef3;
  }

  .aside-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8fa0ad;
  }

  .aside-panel strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: #fff;
  }

  .aside-panel p {
    margin: 0;
    color: #c5d0d8;
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .aside-panel .btn {
    margin-top: 0.35rem;
    justify-self: start;
  }

  .aside-link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: #5ec8f5;
  }

  .aside-link:hover {
    color: var(--ms-orange);
  }

  .perks,
  .visit {
    padding: 1.05rem 1.1rem;
    border-radius: 16px;
    border: 1px solid var(--ms-line);
    background: #fff;
  }

  .perks ul {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
  }

  .perks li {
    position: relative;
    padding-left: 1.1rem;
    color: #3d4853;
    font-size: 0.94rem;
    line-height: 1.4;
  }

  .perks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--ms-orange);
  }

  .visit p {
    margin: 0.45rem 0 0.65rem;
    color: #3d4853;
    line-height: 1.45;
  }

  .related-section {
    padding: clamp(2.25rem, 4vw, 3.25rem) 0 clamp(3.5rem, 6vw, 4.5rem);
    background:
      radial-gradient(ellipse 50% 60% at 0% 0%, rgba(0, 160, 227, 0.07), transparent 50%),
      linear-gradient(180deg, #f7fafc 0%, #fff 100%);
    border-top: 1px solid var(--ms-line);
  }

  .related-head {
    margin-bottom: 1.25rem;
  }

  .related-head h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.3vw, 1.7rem);
    letter-spacing: -0.025em;
  }

  .related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .related-card {
    display: grid;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
  }

  .related-card figure {
    margin: 0;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--ms-line);
    background: #eef2f5;
  }

  .related-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .related-card:hover img {
    transform: scale(1.04);
  }

  .related-card h3 {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
  }

  .related-card p {
    margin: 0 0 0.45rem;
    color: var(--ms-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .related-card span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--ms-blue-dark);
  }

  .related-card:hover span,
  .related-card:hover h3 {
    color: var(--ms-orange-dark);
  }

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

    .aside {
      position: static;
      grid-template-columns: 1fr 1fr;
    }

    .aside-panel {
      grid-column: 1 / -1;
    }

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

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

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

  @media (prefers-reduced-motion: reduce) {
    .related-card img {
      transition: none;
    }

    .related-card:hover img {
      transform: none;
    }
  }
}

/* --- src/pages/blog/index.astro --- */
body.view-blog {
.blog-section {
    padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(3.5rem, 6vw, 5rem);
  }

  .count {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ms-muted);
  }

  .featured {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ms-line);
    box-shadow: 0 22px 50px rgba(20, 32, 41, 0.08);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 56px rgba(20, 32, 41, 0.12);
  }

  .featured-media {
    margin: 0;
    min-height: 280px;
    background: #e8eef3;
  }

  .featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  .featured:hover .featured-media img {
    transform: scale(1.04);
  }

  .featured-copy {
    display: grid;
    align-content: center;
    gap: 0.85rem;
    padding: clamp(1.4rem, 3vw, 2.25rem);
    background:
      radial-gradient(ellipse 80% 60% at 100% 0%, rgba(0, 160, 227, 0.08), transparent 55%),
      #fff;
  }

  .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ms-muted);
  }

  .meta .cat {
    color: var(--ms-orange-dark);
  }

  .featured-copy h2 {
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
  }

  .featured-copy p,
  .post-body p {
    margin: 0;
    color: var(--ms-muted);
    line-height: 1.55;
  }

  .read-link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ms-blue-dark);
  }

  .featured:hover .read-link,
  .post-card:hover .read-link {
    color: var(--ms-orange-dark);
  }

  .post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }

  .post-card {
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ms-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    scroll-margin-top: calc(var(--site-header-offset, 5.5rem) + 1rem);
  }

  .post-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 160, 227, 0.35);
    box-shadow: 0 18px 40px rgba(20, 32, 41, 0.1);
  }

  .post-card figure {
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef2f5;
  }

  .post-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
  }

  .post-card:hover img {
    transform: scale(1.05);
  }

  .post-body {
    display: grid;
    gap: 0.55rem;
    align-content: start;
    padding: 1.15rem 1.15rem 1.25rem;
  }

  .post-body h3 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    line-height: 1.25;
  }

  .post-body .read-link {
    margin-top: 0.25rem;
    font-size: 0.88rem;
  }

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

    .featured-media {
      aspect-ratio: 16 / 10;
      min-height: 0;
    }

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

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

  @media (prefers-reduced-motion: reduce) {
    .featured,
    .post-card,
    .featured-media img,
    .post-card img {
      transition: none;
    }

    .featured:hover,
    .post-card:hover,
    .featured:hover .featured-media img,
    .post-card:hover img {
      transform: none;
    }
  }
}

/* --- src/pages/blog/[slug].astro --- */
body.view-blog-post {
.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    margin: 0.85rem 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ms-muted);
  }

  .cat {
    color: var(--ms-orange-dark);
  }

  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 17.5rem);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
    padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  }

  .main-col {
    display: grid;
    gap: 1.35rem;
    min-width: 0;
  }

  .prose {
    max-width: 42rem;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #3d4853;
  }

  .prose h2 {
    margin: 2rem 0 0.75rem;
    font-size: clamp(1.35rem, 2.2vw, 1.55rem);
    letter-spacing: -0.025em;
    color: var(--ms-ink);
  }

  .prose h3 {
    margin: 1.5rem 0 0.55rem;
    font-size: 1.15rem;
    color: var(--ms-ink);
  }

  .prose p {
    margin: 0 0 1.1rem;
  }

  .prose ul,
  .prose ol {
    margin: 0 0 1.15rem;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.4rem;
  }

  .prose li::marker {
    color: var(--ms-blue);
  }

  .prose a {
    color: var(--ms-blue-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(0, 160, 227, 0.35);
    text-underline-offset: 0.15em;
  }

  .prose a:hover {
    color: var(--ms-orange-dark);
  }

  .prose strong {
    color: var(--ms-ink);
  }

  .aside {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: calc(var(--site-header-offset, 5.5rem) + 0.75rem);
  }

  .aside-panel {
    display: grid;
    gap: 0.55rem;
    padding: 1.2rem 1.15rem 1.25rem;
    border-radius: 18px;
    background: linear-gradient(160deg, #142029 0%, #1c2d39 55%, #123247 100%);
    color: #e8eef3;
  }

  .aside-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8fa0ad;
  }

  .aside-panel strong {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: #fff;
  }

  .aside-panel p {
    margin: 0;
    color: #c5d0d8;
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .aside-panel .btn {
    margin-top: 0.35rem;
    justify-self: start;
  }

  .aside-link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: #5ec8f5;
  }

  .aside-link:hover {
    color: var(--ms-orange);
  }

  .tags {
    padding: 1rem 1.1rem;
    border-radius: 16px;
    border: 1px solid var(--ms-line);
    background: #fff;
  }

  .tags ul {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .tags li {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ms-muted);
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--ms-line);
  }

  .related-section {
    padding: clamp(2.25rem, 4vw, 3.25rem) 0 clamp(3.5rem, 6vw, 4.5rem);
    background:
      radial-gradient(ellipse 50% 60% at 100% 0%, rgba(240, 129, 25, 0.08), transparent 50%),
      linear-gradient(180deg, #f7fafc 0%, #fff 100%);
    border-top: 1px solid var(--ms-line);
  }

  .related-head {
    margin-bottom: 1.25rem;
  }

  .related-head h2 {
    margin: 0;
    font-size: clamp(1.45rem, 2.4vw, 1.75rem);
    letter-spacing: -0.025em;
  }

  .related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .related-card {
    display: grid;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
  }

  .related-card figure {
    margin: 0;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    background: #eef2f5;
    border: 1px solid var(--ms-line);
  }

  .related-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .related-card:hover img {
    transform: scale(1.04);
  }

  .related-card .cat {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
  }

  .related-card h3 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }

  .related-card:hover h3 {
    color: var(--ms-blue-dark);
  }

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

    .aside {
      position: static;
      grid-template-columns: 1fr 1fr;
    }

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

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

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

/* --- src/pages/contact.astro --- */
body.view-contact {
.channels-section {
    padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(2rem, 4vw, 2.75rem);
    position: relative;
    z-index: 2;
  }

  .channels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .channel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 1.15rem 1rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--ms-line);
    box-shadow: 0 10px 28px rgba(20, 32, 41, 0.06);
    text-decoration: none;
    color: inherit;
    min-width: 0;
    transition:
      transform 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .channel:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 160, 227, 0.35);
    box-shadow: 0 20px 42px rgba(20, 32, 41, 0.12);
  }

  .channel-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }

  .channel.is-phone .channel-icon {
    background: rgba(0, 160, 227, 0.12);
    color: #0086bf;
  }

  .channel.is-mail .channel-icon {
    background: rgba(240, 129, 25, 0.14);
    color: #d66c0a;
  }

  .channel.is-wa .channel-icon {
    background: rgba(37, 211, 102, 0.14);
    color: #128c7e;
  }

  .channel.is-address .channel-icon {
    background: rgba(26, 31, 36, 0.08);
    color: #1a1f24;
  }

  .channel-copy {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
  }

  .channel-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ms-muted);
  }

  .channel-value {
    font-family: var(--font-display);
    font-size: 0.98rem;
    letter-spacing: -0.015em;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .channel-value.is-email {
    font-size: clamp(0.78rem, 1.05vw, 0.92rem);
    letter-spacing: -0.02em;
    line-height: 1.35;
  }

  .channel-value.is-email .email-at {
    color: var(--ms-muted);
  }

  .channel-value.is-email .email-domain {
    display: inline;
  }

  .channel-value.is-address {
    font-size: clamp(0.86rem, 1.1vw, 0.98rem);
    white-space: normal;
    text-wrap: balance;
  }

  .channel-hint {
    color: var(--ms-muted);
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .channel.is-mail .channel-arrow,
  .channel.is-address .channel-arrow {
    align-self: start;
    margin-top: 0.35rem;
  }

  .channel-arrow {
    color: #9aa5b0;
    font-weight: 700;
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .channel:hover .channel-arrow {
    color: var(--ms-orange);
    transform: translateX(3px);
  }

  .form-section {
    position: relative;
    padding: clamp(2rem, 4vw, 2.75rem) 0;
    background: #f7fafc;
    border-block: 1px solid var(--ms-line);
  }

  .form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: stretch;
  }

  .form-panel {
    padding: clamp(1.35rem, 2.5vw, 1.85rem);
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--ms-line);
    box-shadow: 0 18px 44px rgba(20, 32, 41, 0.06);
    animation: contact-rise 0.5s ease 0.08s both;
  }

  .form-panel .eyebrow {
    margin-bottom: 0.4rem;
  }

  .form-panel h2 {
    margin: 0 0 0.45rem;
    font-size: clamp(1.55rem, 2.5vw, 1.9rem);
    letter-spacing: -0.03em;
  }

  .form-panel .lead {
    margin: 0 0 1.35rem;
    color: var(--ms-muted);
    max-width: 38ch;
  }

  .side-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1rem;
    min-height: 100%;
    animation: contact-rise 0.5s ease 0.14s both;
  }

  .hours-block {
    padding: 1.25rem 1.2rem 1.15rem;
    border-radius: 20px;
    background: linear-gradient(160deg, #142029 0%, #1c2d39 60%, #123247 100%);
    color: #e8eef3;
  }

  .hours-block h3 {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    color: #fff;
  }

  .hours-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
  }

  .hours-block li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0.45rem;
    margin: 0 -0.45rem;
    border-radius: 8px;
    color: #c5d0d8;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  }

  .hours-block li:last-child {
    border-bottom: 0;
  }

  .hours-block li.today {
    background: rgba(240, 129, 25, 0.18);
    border-bottom-color: transparent;
    color: #fff;
  }

  .hours-block li.today span {
    font-weight: 700;
    color: #ffb265;
  }

  .hours-block strong {
    color: #fff;
    font-weight: 600;
  }

  .visit-block {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--ms-line);
    background: #fff;
  }

  .visit-block figure {
    margin: 0;
    min-height: 7.5rem;
    max-height: 9.5rem;
    overflow: hidden;
    background: #eef2f5;
  }

  .visit-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
  }

  .visit-block:hover img {
    transform: scale(1.04);
  }

  .visit-copy {
    padding: 1.1rem 1.15rem 1.25rem;
  }

  .visit-copy h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
  }

  .visit-copy p {
    margin: 0 0 0.75rem;
    color: var(--ms-muted);
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .text-link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ms-blue-dark);
  }

  .text-link:hover {
    color: var(--ms-orange-dark);
  }

  .map-section {
    padding: 1.5rem 0 2.25rem;
  }

  .map-wrap {
    display: grid;
    gap: 1rem;
  }

  .map-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
  }

  .map-head h2 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.55rem, 2.5vw, 1.9rem);
    letter-spacing: -0.03em;
  }

  .map-head .lead {
    margin: 0;
    color: var(--ms-muted);
  }

  @keyframes contact-rise {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  #bericht {
    scroll-margin-top: var(--site-header-offset, 5.5rem);
  }

  @media (max-width: 1100px) {
    .channel.is-mail .channel-arrow,
    .channel.is-address .channel-arrow {
      display: none;
    }
  }

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

    .channel-value.is-email {
      font-size: 0.9rem;
    }

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

  @media (max-width: 720px) {
    .visit-block {
      display: none;
    }
  }

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

    .channel-arrow {
      display: none;
    }

  }

  @media (prefers-reduced-motion: reduce) {
    .channel,
    .form-panel,
    .side-panel {
      animation: none;
    }

    .channel:hover,
    .visit-block:hover img {
      transform: none;
    }
  }

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

/* --- src/pages/over-ons.astro --- */
body.view-over-ons {
.intro-section {
          padding-block: clamp(3.5rem, 7vw, 5.5rem);
        }
        .intro-grid {
          display: grid;
          grid-template-columns: 0.95fr 1.05fr;
          gap: clamp(1.5rem, 4vw, 3rem);
          align-items: center;
        }
        .photo-pair {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0.85rem;
        }
        .shot {
          margin: 0;
          border-radius: 1.1rem;
          overflow: hidden;
        }
        .shot img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          aspect-ratio: 4/5;
        }
        .years-note {
          margin: 0.85rem 0 0;
          font-weight: 700;
          color: var(--ms-blue, #0086bf);
        }
        .intro-copy h2 {
          margin: 0 0 1rem;
          font-size: clamp(1.7rem, 3vw, 2.4rem);
          line-height: 1.1;
        }
        .intro-copy p {
          color: #5c6b76;
          line-height: 1.6;
        }
        .offer-section {
          padding-block: clamp(3rem, 6vw, 5rem);
          background: #f7fafc;
        }
        .offer-grid {
          display: grid;
          grid-template-columns: 1.05fr 0.95fr;
          gap: 2rem;
          align-items: stretch;
        }
        .checklist {
          list-style: none;
          margin: 1.25rem 0 0;
          padding: 0;
          display: grid;
          gap: 0.65rem;
        }
        .checklist li {
          position: relative;
          padding-left: 1.4rem;
        }
        .checklist li::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0.5em;
          width: 0.55rem;
          height: 0.55rem;
          border-radius: 50%;
          background: var(--ms-orange, #f08119);
        }
        .offer-visual {
          display: flex;
          min-height: 100%;
        }
        .offer-photo {
          margin: 0;
          flex: 1;
          width: 100%;
          min-height: clamp(22rem, 38vw, 32rem);
          border-radius: 1.25rem;
          overflow: hidden;
        }
        .offer-photo img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center 40%;
        }
        .school-cta {
          position: relative;
          isolation: isolate;
          overflow: hidden;
          color: #fff;
          padding-block: 4rem;
        }
        .school-cta-bg {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: -2;
        }
        .school-cta-shade {
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg, rgba(20, 32, 41, 0.82), rgba(20, 32, 41, 0.45));
          z-index: -1;
        }
        .school-inner {
          max-width: 40rem;
        }
        .refurbished-section {
          padding-block: clamp(3.5rem, 7vw, 5.5rem);
        }
        .refurbished-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
          align-items: center;
        }
        .refurb-photos {
          display: grid;
          grid-template-columns: 1.2fr 0.8fr;
          gap: 0.75rem;
        }
        .refurb-shot {
          margin: 0;
          border-radius: 1rem;
          overflow: hidden;
        }
        .refurb-shot img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .refurb-main {
          grid-row: span 2;
        }
        .perks {
          list-style: none;
          margin: 1rem 0;
          padding: 0;
          display: grid;
          gap: 0.55rem;
        }
        .perks li {
          position: relative;
          padding-left: 1.35rem;
        }
        .perks li::before {
          content: "✓";
          position: absolute;
          left: 0;
          color: var(--ms-blue, #0086bf);
          font-weight: 700;
        }
        .actions {
          display: flex;
          flex-wrap: wrap;
          gap: 0.75rem;
        }
        @media (max-width: 900px) {
          .intro-grid,
          .offer-grid,
          .refurbished-grid {
            grid-template-columns: 1fr;
          }
          .offer-photo {
            min-height: 18rem;
            aspect-ratio: 4 / 3;
          }
        }
}

/* --- src/pages/winkel.astro --- */
body.view-winkel {
.intro-section {
    padding: clamp(2rem, 4vw, 3rem) 0;
  }

  .intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: center;
  }

  .intro-copy .eyebrow {
    margin-bottom: 0.35rem;
  }

  .intro-copy h2 {
    margin: 0 0 0.65rem;
    font-size: clamp(1.65rem, 2.8vw, 2.15rem);
    letter-spacing: -0.03em;
    text-wrap: balance;
    max-width: 20ch;
  }

  .intro-copy .lead {
    margin: 0;
    color: #5b6570;
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 48ch;
  }

  .intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.25rem;
  }

  .intro-visual {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0.7rem;
    align-items: stretch;
    min-height: 22rem;
  }

  .intro-shot {
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #e8eef3;
  }

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

  .intro-shot-main,
  .intro-shot-side {
    min-height: 22rem;
  }

  .highlights-section {
    padding: clamp(2rem, 3.5vw, 2.75rem) 0;
    background: linear-gradient(180deg, #f7fafc 0%, #fff 100%);
    border-block: 1px solid var(--ms-line);
  }

  .section-head {
    margin-bottom: 1.25rem;
    max-width: 34rem;
  }

  .section-head .eyebrow {
    margin-bottom: 0.3rem;
  }

  .section-head h2 {
    margin: 0;
    font-size: clamp(1.45rem, 2.4vw, 1.8rem);
    letter-spacing: -0.025em;
  }

  .highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem 1.75rem;
  }

  .highlights li {
    padding-top: 0.9rem;
    border-top: 2px solid rgba(0, 160, 227, 0.35);
  }

  .highlights li:nth-child(even) {
    border-top-color: rgba(240, 129, 25, 0.45);
  }

  .highlights strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
  }

  .highlights p {
    margin: 0;
    color: #5b6570;
    font-size: 0.94rem;
    line-height: 1.5;
  }

  .visit-section {
    padding: clamp(2.25rem, 4vw, 3.25rem) 0;
  }

  .visit-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.2fr);
    gap: 1.15rem;
    align-items: stretch;
  }

  .hours-panel {
    padding: 1.4rem 1.3rem 1.3rem;
    border-radius: 20px;
    background: linear-gradient(160deg, #142029 0%, #1c2d39 55%, #123247 100%);
    color: #e8eef3;
  }

  .hours-panel h3 {
    margin: 0 0 0.95rem;
    color: #fff;
    font-size: 1.1rem;
  }

  .hours-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.3rem;
  }

  .hours-panel li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0.45rem;
    margin: 0 -0.45rem;
    border-radius: 8px;
    color: #c5d0d8;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  }

  .hours-panel li:last-child {
    border-bottom: 0;
  }

  .hours-panel li.today {
    background: rgba(240, 129, 25, 0.18);
    border-bottom-color: transparent;
    color: #fff;
  }

  .hours-panel li.today span {
    font-weight: 700;
    color: #ffb265;
  }

  .hours-panel strong {
    color: #fff;
    font-weight: 600;
  }

  .contact-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.4rem, 2.5vw, 1.85rem);
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--ms-line);
  }

  .contact-panel .eyebrow {
    margin-bottom: 0.3rem;
  }

  .contact-panel h3 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 2.1vw, 1.6rem);
    letter-spacing: -0.025em;
  }

  .contact-panel address {
    font-style: normal;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
  }

  .contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin-bottom: 0.95rem;
  }

  .contact-links a {
    font-weight: 700;
    color: var(--ms-blue-dark);
  }

  .contact-links a:hover {
    color: var(--ms-orange-dark);
  }

  .visit-note {
    margin: 0 0 1.15rem;
    color: #5b6570;
    line-height: 1.55;
    max-width: 42ch;
  }

  .visit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.1rem;
  }

  .text-link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ms-blue-dark);
  }

  .text-link:hover {
    color: var(--ms-orange-dark);
  }

  .gallery-section {
    padding: clamp(2rem, 3.5vw, 2.75rem) 0;
    background: #f7fafc;
    border-block: 1px solid var(--ms-line);
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .shot {
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--ms-line);
    background: #eef2f5;
  }

  .shot img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
  }

  .shot:hover img {
    transform: scale(1.03);
  }

  .map-section {
    padding: clamp(2rem, 3.5vw, 2.75rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  }

  .map-wrap {
    display: grid;
    gap: 1rem;
  }

  .map-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
  }

  .map-head h2 {
    margin: 0 0 0.3rem;
    font-size: clamp(1.45rem, 2.4vw, 1.8rem);
    letter-spacing: -0.025em;
  }

  .map-head .lead {
    margin: 0;
    color: #5b6570;
  }

  @media (max-width: 960px) {
    .intro-grid,
    .visit-grid {
      grid-template-columns: 1fr;
    }

    .intro-visual {
      max-width: 36rem;
      margin-inline: auto;
      width: 100%;
      min-height: 0;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 0.55rem;
    }

    .intro-shot-main,
    .intro-shot-side {
      min-height: 0;
      aspect-ratio: 4 / 3;
      max-height: 14rem;
    }

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

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

    .intro-section,
    .gallery-section {
      padding-inline: 0.35rem;
    }

    .intro-visual {
      grid-template-columns: 1.2fr 1fr;
      gap: 0.5rem;
      width: 100%;
      box-sizing: border-box;
    }

    .intro-shot {
      border-radius: 14px;
    }

    .intro-shot-main,
    .intro-shot-side {
      aspect-ratio: 5 / 4;
      max-height: 10.5rem;
    }

    .gallery {
      grid-template-columns: 1fr 1fr;
      gap: 0.55rem;
    }

    .gallery .shot:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      max-width: 100%;
    }

    .shot {
      border-radius: 14px;
    }

    .shot img {
      aspect-ratio: 4 / 3;
      max-height: 9.5rem;
    }

    .gallery .shot:last-child:nth-child(odd) img {
      max-height: 11rem;
      aspect-ratio: 16 / 10;
    }

    .map-section {
      padding-inline: 0.35rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .shot img {
      transition: none;
    }

    .shot:hover img {
      transform: none;
    }
  }
}

/* --- src/pages/reparaties/index.astro --- */
body.view-reparaties {
.repair-page {
    padding-block: clamp(1.35rem, 3vw, 2rem) clamp(2.5rem, 5vw, 4rem);
    background:
      radial-gradient(ellipse 55% 42% at 0% 0%, rgba(240, 129, 25, 0.07), transparent 55%),
      radial-gradient(ellipse 45% 38% at 100% 0%, rgba(0, 160, 227, 0.06), transparent 50%),
      #fff;
  }

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

/* --- src/pages/thuisbatterij.astro --- */
body.view-thuisbatterij {
.intro-section,
  .usp-section,
  .product-section,
  .scale-section,
  .ultimate-section,
  .contact-section {
    padding-block: clamp(2.4rem, 5vw, 3.75rem);
  }

  .section-head {
    margin-bottom: 1.35rem;
  }

  .section-head .eyebrow,
  .section-head h2 {
    margin: 0;
  }

  .section-head h2,
  .intro-copy h2,
  .product-copy h2,
  .scale-copy h2,
  .ultimate-copy h2,
  .contact-copy h2 {
    letter-spacing: -0.03em;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    text-wrap: balance;
  }

  .intro-grid,
  .product-grid,
  .scale-grid,
  .ultimate-grid,
  .contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }

  .product-grid.reverse {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .product-grid.reverse .product-copy {
    order: 2;
  }

  .product-grid.reverse .product-visual {
    order: 1;
  }

  .intro-copy,
  .product-copy,
  .scale-copy,
  .ultimate-copy,
  .contact-copy {
    display: grid;
    gap: 0.85rem;
  }

  .intro-copy .eyebrow,
  .product-copy .eyebrow,
  .scale-copy .eyebrow,
  .ultimate-copy .eyebrow,
  .contact-copy .eyebrow,
  .intro-copy h2,
  .product-copy h2,
  .scale-copy h2,
  .ultimate-copy h2,
  .contact-copy h2,
  .intro-copy .lead,
  .product-copy .lead,
  .scale-copy .lead,
  .ultimate-copy .lead,
  .contact-copy .lead,
  .intro-copy p,
  .product-copy p,
  .scale-copy p,
  .ultimate-copy p {
    margin: 0;
  }

  .intro-copy .lead,
  .product-copy .lead,
  .scale-copy .lead,
  .ultimate-copy .lead,
  .contact-copy .lead,
  .product-copy p,
  .scale-copy p,
  .ultimate-copy p {
    color: var(--ms-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 56ch;
  }

  .intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.25rem;
  }

  .intro-visual,
  .product-visual,
  .scale-visual,
  .ultimate-visual,
  .contact-visual {
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    background:
      radial-gradient(circle at 30% 20%, rgba(0, 160, 227, 0.14), transparent 50%),
      linear-gradient(160deg, #eef4f8, #f7fafc);
  }

  .intro-visual img,
  .product-visual img,
  .scale-visual img,
  .ultimate-visual img,
  .contact-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    will-change: transform;
  }

  .video-zoom-section {
    padding-block: clamp(1.25rem, 3vw, 2rem);
  }

  .video-zoom-frame {
    overflow: hidden;
    border-radius: 24px;
    background: #101820;
    box-shadow: 0 22px 48px rgba(16, 24, 40, 0.16);
  }

  .video-zoom-media {
    display: block;
    width: 100%;
    height: clamp(18rem, 62vh, 48rem);
    object-fit: cover;
    transform: scale(1.2);
    transform-origin: center center;
    will-change: transform;
  }

  .stack-section {
    padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
    background:
      radial-gradient(ellipse 55% 60% at 50% 0%, rgba(0, 160, 227, 0.08), transparent 55%),
      linear-gradient(180deg, #f4f7fa 0%, #fff 70%);
  }

  .stack-head {
    max-width: 36rem;
  }

  .stack-cards {
    display: grid;
    gap: 0;
  }

  .stack-card {
    position: sticky;
    top: calc(var(--site-header-offset, 5.5rem) + 0.65rem);
    z-index: 1;
    transform-origin: center top;
    transition: transform 0.15s linear;
    will-change: transform;
  }

  .stack-card:nth-child(2) {
    z-index: 2;
  }

  .stack-card-media {
    overflow: hidden;
    border-radius: 24px;
    background: #101820;
    box-shadow: 0 24px 50px rgba(16, 24, 40, 0.22);
  }

  .stack-card-media video {
    display: block;
    width: 100%;
    height: min(78vh, 46rem);
    object-fit: cover;
  }

  @media (prefers-reduced-motion: reduce) {
    .video-zoom-media,
    .intro-visual img,
    .product-visual img,
    .scale-visual img,
    .ultimate-visual img {
      will-change: auto;
      transform: none !important;
    }

    .stack-card {
      position: relative;
      top: auto;
      transition: none;
    }
  }

  .intro-visual,
  .product-visual,
  .ultimate-visual {
    min-height: 18rem;
    padding: clamp(1rem, 2.5vw, 1.75rem);
  }

  .scale-visual,
  .contact-visual {
    min-height: 16rem;
  }

  .usp-section {
    background:
      radial-gradient(ellipse 60% 70% at 0% 0%, rgba(240, 129, 25, 0.08), transparent 55%),
      linear-gradient(180deg, #f7fafc, #fff 70%);
    border-block: 1px solid var(--ms-line);
  }

  .usp-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .usp-grid li {
    display: grid;
    gap: 0.45rem;
    padding: 1.25rem 1.2rem 1.35rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--ms-line);
    box-shadow: 0 14px 30px rgba(20, 32, 41, 0.05);
  }

  .usp-index {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #9aa5b0;
  }

  .usp-grid strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: -0.02em;
  }

  .usp-grid p {
    margin: 0;
    color: var(--ms-muted);
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .features-wrap {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
  }

  .feature-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }

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

  .feature-grid li {
    display: grid;
    gap: 0.4rem;
    padding: 1.15rem 1.15rem 1.25rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--ms-line);
  }

  .feature-grid strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -0.02em;
  }

  .feature-grid p {
    margin: 0;
    color: var(--ms-muted);
    font-size: 0.93rem;
    line-height: 1.5;
  }

  .product-section.is-alt,
  .scale-section {
    background:
      radial-gradient(ellipse 55% 60% at 100% 10%, rgba(0, 160, 227, 0.07), transparent 55%),
      linear-gradient(180deg, #f7fafc 0%, #fff 75%);
  }

  .spec-list {
    list-style: none;
    margin: 0.15rem 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
  }

  .spec-list li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.96rem;
    line-height: 1.4;
  }

  .spec-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--ms-orange);
  }

  .ultimate-section {
    background:
      radial-gradient(ellipse 70% 80% at 10% 20%, rgba(240, 129, 25, 0.1), transparent 55%),
      radial-gradient(ellipse 50% 60% at 90% 80%, rgba(0, 160, 227, 0.08), transparent 50%),
      #101820;
    color: #fff;
  }

  .ultimate-section .eyebrow {
    color: #ffb366;
  }

  .ultimate-section .lead,
  .ultimate-section p {
    color: rgba(255, 255, 255, 0.82);
  }

  .ultimate-section .spec-list li::before {
    background: #00a0e3;
  }

  .ultimate-visual {
    background:
      radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.12), transparent 50%),
      linear-gradient(160deg, #1a2a36, #121a22);
  }

  .contact-section {
    border-top: 1px solid var(--ms-line);
  }

  .contact-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
  }

  .contact-points a {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ms-blue-dark);
  }

  .contact-points a:hover {
    color: var(--ms-orange-dark);
  }

  .contact-form-wrap {
    padding: clamp(1.15rem, 2.5vw, 1.5rem);
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--ms-line);
    box-shadow: 0 18px 40px rgba(20, 32, 41, 0.06);
  }

  @media (max-width: 980px) {
    .intro-grid,
    .product-grid,
    .product-grid.reverse,
    .scale-grid,
    .ultimate-grid,
    .contact-grid {
      grid-template-columns: 1fr;
    }

    .product-grid.reverse .product-copy,
    .product-grid.reverse .product-visual {
      order: unset;
    }

    .usp-grid,
    .feature-grid,
    .feature-grid.cols-2 {
      grid-template-columns: 1fr;
    }

    .intro-visual,
    .product-visual,
    .ultimate-visual {
      max-width: 28rem;
      margin-inline: auto;
      width: 100%;
    }

    .video-zoom-media {
      height: clamp(14rem, 48vh, 28rem);
    }

    .stack-card-media video {
      height: min(58vh, 28rem);
    }
  }

  @media (min-width: 721px) and (max-width: 980px) {
    .usp-grid {
      grid-template-columns: 1fr 1fr;
    }

    .usp-grid li:last-child {
      grid-column: span 2;
    }

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

/* --- src/pages/privacy-beleid.astro --- */
body.view-legal {
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .hero-meta span + span::before {
    content: "·";
    margin: 0 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
  }

  .privacy-page {
    position: relative;
    padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(3.5rem, 6vw, 5.5rem);
    background:
      radial-gradient(900px 420px at 0% 0%, rgba(0, 160, 227, 0.08), transparent 55%),
      radial-gradient(700px 360px at 100% 8%, rgba(240, 129, 25, 0.08), transparent 50%),
      linear-gradient(180deg, #f4f8fb 0%, #ffffff 42%, #ffffff 100%);
  }

  .principles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
    border: 1px solid var(--ms-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    overflow: hidden;
  }

  .principle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    padding: 1.15rem 1.2rem;
    border-right: 1px solid var(--ms-line);
  }

  .principle:last-child {
    border-right: 0;
  }

  .principle-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--ms-blue);
    margin-top: 0.2rem;
  }

  .principle h2 {
    margin: 0 0 0.3rem;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
  }

  .principle p {
    margin: 0;
    color: var(--ms-muted);
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .privacy-layout {
    display: grid;
    grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
  }

  .toc {
    position: sticky;
    top: calc(var(--site-header-offset, 5.5rem) + 0.75rem);
    padding: 1.1rem 1rem 1.15rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--ms-line);
    box-shadow: 0 12px 30px rgba(20, 32, 41, 0.05);
  }

  .toc-title {
    margin: 0 0 0.8rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
  }

  .toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
  }

  .toc a[data-toc-link] {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.42rem 0.45rem;
    border-radius: 10px;
    color: var(--ms-muted);
    font-size: 0.88rem;
    font-weight: 600;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }

  .toc a[data-toc-link] span {
    font-family: var(--font-display);
    font-size: 0.72rem;
    color: #9aa5b0;
    min-width: 1.35rem;
  }

  .toc a[data-toc-link]:hover {
    color: var(--ms-blue-dark);
    background: rgba(0, 160, 227, 0.07);
  }

  .toc a[data-toc-link].is-active {
    color: var(--ms-ink);
    background: rgba(0, 160, 227, 0.1);
    border-left-color: var(--ms-blue);
  }

  .toc a[data-toc-link].is-active span {
    color: var(--ms-blue-dark);
  }

  .toc-cookie {
    display: inline-block;
    margin-top: 0.95rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ms-line);
    width: 100%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ms-blue-dark);
  }

  .toc-cookie:hover {
    color: var(--ms-orange-dark);
  }

  .policy {
    min-width: 0;
    max-width: 48rem;
  }

  .cms-content {
    margin-bottom: 1.75rem;
    padding: 1.1rem 1.2rem;
    border-radius: 16px;
    background: rgba(0, 160, 227, 0.06);
    border: 1px solid rgba(0, 160, 227, 0.14);
    color: var(--ms-muted);
    line-height: 1.65;
  }

  .block {
    scroll-margin-top: calc(var(--site-header-offset, 5.5rem) + 1rem);
    padding: 1.55rem 0 1.7rem;
    border-bottom: 1px solid rgba(228, 232, 236, 0.95);
  }

  .block:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .block-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
  }

  .block-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--ms-orange);
  }

  .block-head h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    letter-spacing: -0.03em;
  }

  .block p,
  .block li,
  .block dd {
    color: #3d4853;
    line-height: 1.7;
  }

  .block a {
    color: var(--ms-blue-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(0, 160, 227, 0.35);
    text-underline-offset: 0.15em;
  }

  .block a:hover {
    color: var(--ms-orange-dark);
    text-decoration-color: rgba(240, 129, 25, 0.45);
  }

  .identity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    margin: 1.1rem 0 1.2rem;
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    background:
      linear-gradient(135deg, rgba(0, 160, 227, 0.08), rgba(240, 129, 25, 0.07)),
      #fff;
    border: 1px solid var(--ms-line);
  }

  .identity-label {
    margin: 0 0 0.35rem !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ms-muted) !important;
  }

  .identity p {
    margin: 0;
  }

  .data-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
  }

  .data-list li {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--ms-line);
  }

  .data-list strong {
    font-family: var(--font-display);
    font-size: 0.98rem;
    color: var(--ms-ink);
    letter-spacing: -0.015em;
  }

  .data-list span {
    color: var(--ms-muted);
    font-size: 0.94rem;
    line-height: 1.45;
  }

  .plain-list {
    margin: 0.85rem 0 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.45rem;
  }

  .legal-grid {
    margin: 1rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
  }

  .legal-grid > div {
    padding: 0.95rem 1rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--ms-line);
  }

  .legal-grid dt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    margin-bottom: 0.3rem;
    letter-spacing: -0.015em;
  }

  .legal-grid dd {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.5;
  }

  .inline-note {
    margin-top: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: rgba(240, 129, 25, 0.08);
    border: 1px solid rgba(240, 129, 25, 0.18);
  }

  .rights-list {
    list-style: none;
    margin: 1rem 0 1.1rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 0.85rem;
  }

  .rights-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem;
    align-items: start;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: rgba(0, 160, 227, 0.06);
    border: 1px solid rgba(0, 160, 227, 0.14);
    font-weight: 600;
    color: var(--ms-ink) !important;
    font-size: 0.94rem;
    line-height: 1.4;
  }

  .rights-list li span {
    color: var(--ms-blue-dark);
    font-weight: 800;
    margin-top: 0.05rem;
  }

  .contact-cta {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.25rem;
    align-items: center;
    margin: 1.2rem 0 1.25rem;
    padding: 1.35rem 1.4rem;
    border-radius: 18px;
    color: #fff;
    background:
      linear-gradient(125deg, #0f7eae 0%, #00a0e3 42%, #1a8fc4 100%);
    box-shadow: 0 18px 40px rgba(0, 120, 170, 0.22);
  }

  .contact-cta a {
    color: #fff;
    text-decoration: none;
  }

  .contact-eyebrow {
    margin: 0 0 0.25rem !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78) !important;
  }

  .contact-title {
    margin: 0 0 0.45rem !important;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff !important;
  }

  .contact-cta-copy p:last-child {
    margin: 0;
    color: rgba(255, 255, 255, 0.88) !important;
  }

  .contact-cta-actions {
    display: grid;
    gap: 0.65rem;
    justify-items: start;
  }

  .contact-cta .btn-orange {
    background: #fff;
    color: var(--ms-orange-dark);
  }

  .contact-cta .btn-orange:hover {
    background: #fff7ef;
  }

  .btn-ghost-ink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
  }

  .btn-ghost-ink:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
  }

  .contact-cta .text-link {
    color: #fff;
    font-weight: 700;
    font-family: var(--font-display);
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    padding-bottom: 0.05rem;
  }

  .contact-cta .text-link:hover {
    border-bottom-color: #fff;
  }

  .ap-note {
    margin: 0;
    font-size: 0.95rem;
  }

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

    .principle:nth-child(2) {
      border-right: 0;
    }

    .principle:nth-child(1),
    .principle:nth-child(2) {
      border-bottom: 1px solid var(--ms-line);
    }
  }

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

    .toc {
      position: static;
    }

    .toc ol {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .toc a[data-toc-link] {
      padding: 0.42rem 0.7rem;
      border: 1px solid var(--ms-line);
      border-left-width: 1px;
      background: #fff;
    }

    .toc a[data-toc-link] span {
      display: none;
    }

    .toc a[data-toc-link].is-active {
      border-color: rgba(0, 160, 227, 0.35);
    }

    .contact-cta {
      grid-template-columns: 1fr;
    }
  }

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

    .principle {
      border-right: 0;
      border-bottom: 1px solid var(--ms-line);
    }

    .principle:last-child {
      border-bottom: 0;
    }

    .identity,
    .legal-grid,
    .rights-list {
      grid-template-columns: 1fr;
    }
  }
}

/* --- src/pages/voorwaarden.astro --- */
body.view-legal {
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .hero-meta span + span::before {
    content: "·";
    margin: 0 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
  }

  .terms-page {
    position: relative;
    padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(3.5rem, 6vw, 5.5rem);
    background:
      radial-gradient(900px 420px at 100% 0%, rgba(240, 129, 25, 0.09), transparent 55%),
      radial-gradient(700px 360px at 0% 10%, rgba(0, 160, 227, 0.08), transparent 50%),
      linear-gradient(180deg, #f7f5f2 0%, #ffffff 40%, #ffffff 100%);
  }

  .highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
    border: 1px solid var(--ms-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    overflow: hidden;
  }

  .highlight {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    padding: 1.15rem 1.2rem;
    border-right: 1px solid var(--ms-line);
  }

  .highlight:last-child {
    border-right: 0;
  }

  .highlight-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--ms-orange);
    margin-top: 0.2rem;
  }

  .highlight h2 {
    margin: 0 0 0.3rem;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
  }

  .highlight p {
    margin: 0;
    color: var(--ms-muted);
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .terms-layout {
    display: grid;
    grid-template-columns: minmax(13rem, 16.5rem) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
  }

  .toc {
    position: sticky;
    top: calc(var(--site-header-offset, 5.5rem) + 0.75rem);
    padding: 1.1rem 1rem 1.15rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--ms-line);
    box-shadow: 0 12px 30px rgba(20, 32, 41, 0.05);
  }

  .toc-title {
    margin: 0 0 0.8rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
  }

  .toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.12rem;
  }

  .toc a[data-toc-link] {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.4rem 0.45rem;
    border-radius: 10px;
    color: var(--ms-muted);
    font-size: 0.86rem;
    font-weight: 600;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }

  .toc a[data-toc-link] span {
    font-family: var(--font-display);
    font-size: 0.72rem;
    color: #9aa5b0;
    min-width: 1.35rem;
  }

  .toc a[data-toc-link]:hover {
    color: var(--ms-orange-dark);
    background: rgba(240, 129, 25, 0.08);
  }

  .toc a[data-toc-link].is-active {
    color: var(--ms-ink);
    background: rgba(240, 129, 25, 0.1);
    border-left-color: var(--ms-orange);
  }

  .toc a[data-toc-link].is-active span {
    color: var(--ms-orange-dark);
  }

  .toc-link {
    display: inline-block;
    margin-top: 0.95rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ms-line);
    width: 100%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ms-blue-dark);
  }

  .toc-link:hover {
    color: var(--ms-orange-dark);
  }

  .policy {
    min-width: 0;
    max-width: 48rem;
  }

  .cms-content {
    margin-bottom: 1.75rem;
    padding: 1.1rem 1.2rem;
    border-radius: 16px;
    background: rgba(240, 129, 25, 0.06);
    border: 1px solid rgba(240, 129, 25, 0.16);
    color: var(--ms-muted);
    line-height: 1.65;
  }

  .block {
    scroll-margin-top: calc(var(--site-header-offset, 5.5rem) + 1rem);
    padding: 1.55rem 0 1.7rem;
    border-bottom: 1px solid rgba(228, 232, 236, 0.95);
  }

  .block:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .block-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
  }

  .block-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--ms-blue);
  }

  .block-head h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    letter-spacing: -0.03em;
  }

  .block p,
  .block li,
  .block dd {
    color: #3d4853;
    line-height: 1.7;
  }

  .block a {
    color: var(--ms-blue-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(0, 160, 227, 0.35);
    text-underline-offset: 0.15em;
  }

  .block a:hover {
    color: var(--ms-orange-dark);
    text-decoration-color: rgba(240, 129, 25, 0.45);
  }

  .identity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    margin: 1.1rem 0 0;
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    background:
      linear-gradient(135deg, rgba(240, 129, 25, 0.08), rgba(0, 160, 227, 0.07)),
      #fff;
    border: 1px solid var(--ms-line);
  }

  .identity-label {
    margin: 0 0 0.35rem !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ms-muted) !important;
  }

  .identity p {
    margin: 0;
  }

  .def-list {
    margin: 0;
    display: grid;
    gap: 0.55rem;
  }

  .def-list > div {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) 1fr;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--ms-line);
  }

  .def-list dt {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .def-list dd {
    margin: 0;
  }

  .plain-list {
    margin: 0.85rem 0 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.55rem;
  }

  .note-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1rem 0 1.1rem;
  }

  .note-grid > div {
    padding: 1rem 1.05rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--ms-line);
  }

  .note-grid h3 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    letter-spacing: -0.015em;
  }

  .note-grid p {
    margin: 0;
    font-size: 0.94rem;
  }

  .inline-note {
    margin-top: 0.95rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: rgba(0, 160, 227, 0.07);
    border: 1px solid rgba(0, 160, 227, 0.16);
  }

  .contact-cta {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.25rem;
    align-items: center;
    margin: 1.2rem 0 0;
    padding: 1.35rem 1.4rem;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(125deg, #d66c0a 0%, #f08119 45%, #e07a12 100%);
    box-shadow: 0 18px 40px rgba(214, 108, 10, 0.22);
  }

  .contact-cta a {
    color: #fff;
    text-decoration: none;
  }

  .contact-eyebrow {
    margin: 0 0 0.25rem !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78) !important;
  }

  .contact-title {
    margin: 0 0 0.45rem !important;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff !important;
  }

  .contact-cta-copy p:last-child {
    margin: 0;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .contact-cta-actions {
    display: grid;
    gap: 0.65rem;
    justify-items: start;
  }

  .contact-cta .btn-orange {
    background: #fff;
    color: var(--ms-orange-dark);
  }

  .contact-cta .btn-orange:hover {
    background: #fff7ef;
  }

  .btn-ghost-ink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
  }

  .btn-ghost-ink:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
  }

  .contact-cta .text-link {
    color: #fff;
    font-weight: 700;
    font-family: var(--font-display);
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    padding-bottom: 0.05rem;
  }

  .contact-cta .text-link:hover {
    border-bottom-color: #fff;
  }

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

    .highlight:nth-child(2) {
      border-right: 0;
    }

    .highlight:nth-child(1),
    .highlight:nth-child(2) {
      border-bottom: 1px solid var(--ms-line);
    }
  }

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

    .toc {
      position: static;
    }

    .toc ol {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .toc a[data-toc-link] {
      padding: 0.42rem 0.7rem;
      border: 1px solid var(--ms-line);
      border-left-width: 1px;
      background: #fff;
    }

    .toc a[data-toc-link] span {
      display: none;
    }

    .toc a[data-toc-link].is-active {
      border-color: rgba(240, 129, 25, 0.4);
    }

    .contact-cta,
    .note-grid,
    .identity {
      grid-template-columns: 1fr;
    }

    .def-list > div {
      grid-template-columns: 1fr;
      gap: 0.25rem;
    }
  }

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

    .highlight {
      border-right: 0;
      border-bottom: 1px solid var(--ms-line);
    }

    .highlight:last-child {
      border-bottom: 0;
    }
  }
}

/* --- src/pages/cookiebeleid.astro --- */
body.view-legal {
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .hero-meta span + span::before {
    content: "·";
    margin: 0 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
  }

  .cookie-body {
    padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(3.5rem, 6vw, 5rem);
  }

  .cookie-layout {
    display: grid;
    grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
  }

  .intro-panel {
    position: sticky;
    top: calc(var(--site-header-offset, 5.5rem) + 0.75rem);
    padding: 1.35rem 1.25rem;
    border-radius: 18px;
    background:
      linear-gradient(160deg, rgba(0, 160, 227, 0.08), transparent 55%),
      #fff;
    border: 1px solid var(--ms-line);
  }

  .intro-panel h2 {
    margin: 0 0 0.7rem;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
  }

  .intro-panel p {
    margin: 0 0 0.85rem;
    color: #3d4853;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .intro-links {
    display: grid;
    gap: 0.45rem;
    margin-top: 1rem;
  }

  .intro-links a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ms-blue-dark);
  }

  .intro-links a:hover {
    color: var(--ms-orange-dark);
  }

  .main-col {
    min-width: 0;
    max-width: 48rem;
  }

  .cms-content {
    margin-bottom: 1.75rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid var(--ms-line);
    color: var(--ms-muted);
    line-height: 1.65;
  }

  .block {
    scroll-margin-top: calc(var(--site-header-offset, 5.5rem) + 1rem);
    margin-bottom: 2rem;
  }

  .block h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 2.2vw, 1.6rem);
    letter-spacing: -0.025em;
  }

  .block p {
    margin: 0 0 0.85rem;
    color: #3d4853;
    line-height: 1.7;
  }

  .block a {
    color: var(--ms-blue-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(0, 160, 227, 0.35);
    text-underline-offset: 0.15em;
  }

  .block a:hover {
    color: var(--ms-orange-dark);
  }

  .block code {
    font-size: 0.88em;
    padding: 0.1em 0.35em;
    border-radius: 6px;
    background: #f1f5f8;
    color: #243039;
  }

  .decl-head {
    margin-bottom: 1rem;
  }

  .decl-head p {
    margin: 0;
    color: var(--ms-muted);
  }

  .acc-list {
    display: grid;
    gap: 0.75rem;
  }

  .acc {
    border: 1px solid var(--ms-line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .acc[open] {
    border-color: rgba(0, 160, 227, 0.35);
    box-shadow: 0 14px 34px rgba(20, 32, 41, 0.06);
  }

  .acc.tone-orange[open] {
    border-color: rgba(240, 129, 25, 0.4);
  }

  .acc summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.75rem 0.9rem;
    padding: 1rem 1.1rem;
    user-select: none;
  }

  .acc summary::-webkit-details-marker {
    display: none;
  }

  .acc-index {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    color: #9aa5b0;
    letter-spacing: 0.04em;
  }

  .acc-copy {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
  }

  .acc-copy strong {
    font-family: var(--font-display);
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    color: var(--ms-ink);
  }

  .acc-copy small {
    color: var(--ms-muted);
    font-size: 0.82rem;
  }

  .acc-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ms-muted);
    white-space: nowrap;
  }

  .acc-badge.is-required {
    color: var(--ms-blue-dark);
  }

  .acc.tone-orange .acc-badge {
    color: var(--ms-orange-dark);
  }

  .acc-chevron {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    border: 1px solid var(--ms-line);
    background: #f7fafc;
    position: relative;
    transition: transform 0.2s ease, border-color 0.15s ease, background 0.15s ease;
  }

  .acc-chevron::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid #5b6570;
    border-bottom: 2px solid #5b6570;
    transform: translateY(-15%) rotate(45deg);
  }

  .acc[open] .acc-chevron {
    transform: rotate(180deg);
    border-color: rgba(0, 160, 227, 0.35);
    background: rgba(0, 160, 227, 0.08);
  }

  .acc-panel {
    padding: 0 1.1rem 1.15rem;
    border-top: 1px solid #eef2f5;
  }

  .acc-panel > p {
    margin: 0.95rem 0 1rem;
    color: #3d4853;
    line-height: 1.65;
    font-size: 0.95rem;
  }

  .cookie-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e8eef3;
    background: #fbfcfd;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    font-size: 0.88rem;
  }

  th,
  td {
    padding: 0.75rem 0.85rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e8eef3;
  }

  th {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7a8692;
    background: #f4f7fa;
  }

  tr:last-child td {
    border-bottom: 0;
  }

  td {
    color: #3d4853;
    line-height: 1.45;
  }

  td code {
    font-size: 0.86em;
    font-weight: 600;
    color: #1a1f24;
    background: #eef3f7;
    padding: 0.12em 0.4em;
    border-radius: 6px;
  }

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

    .intro-panel {
      position: static;
    }

    .acc summary {
      grid-template-columns: auto 1fr auto;
      grid-template-areas:
        "index copy chevron"
        "badge badge badge";
    }

    .acc-index { grid-area: index; }
    .acc-copy { grid-area: copy; }
    .acc-chevron { grid-area: chevron; }
    .acc-badge {
      grid-area: badge;
      justify-self: start;
    }
  }
}

/* --- src/components/Header.astro --- */
.site-header {
    --topbar-h: 36px;
    --header-h: 76px;
    position: sticky;
    top: 0;
    z-index: 50;
    overflow: visible;
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease;
  }

  .site-header.search-expanded {
    z-index: 80;
    overflow: visible;
    /* Avoid backdrop-filter stacking that paints the hero over the USP/search */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.97);
  }

  .site-header.search-expanded .header-inner,
  .site-header.search-expanded .header-actions {
    overflow: visible;
    position: relative;
    z-index: 2;
  }

  .site-header .topbar {
    max-height: var(--topbar-h);
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
    transition:
      max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.2s ease,
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.2s ease;
  }

  .site-header.topbar-collapsed .topbar {
    max-height: 0;
    opacity: 0;
    transform: translateY(-100%);
    border-bottom-color: transparent;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header .topbar {
      transition: none;
    }
  }

  .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(228, 232, 236, 0.95);
    box-shadow: 0 10px 30px rgba(20, 32, 41, 0.08);
  }

  .site-header.is-hidden {
    transform: translateY(-110%);
  }

  .site-header.menu-open .header-inner {
    position: relative;
    z-index: 46;
  }

  .header-inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .brand img {
    border: 0;
    outline: none;
  }

  /* Geen zwarte klik-rand; toetsenbord blijft wel zichtbaar */
  .brand:focus,
  .brand:active {
    outline: none;
  }

  .brand:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .brand:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--site-primary, #007ac3) 75%, #fff);
    outline-offset: 4px;
    border-radius: 6px;
  }

  .brand:hover {
    transform: scale(1.03);
  }

  @media (prefers-reduced-motion: reduce) {
    .brand {
      transition: none;
    }

    .brand:hover {
      transform: none;
    }

    .nav a::after {
      transition: none;
    }
  }

  .brand-logo {
    width: 158px;
    height: auto;
    display: block;
  }

  .nav {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    gap: 0.55rem;
  }

  .nav a {
    position: relative;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ms-muted);
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .nav a::after {
    content: "";
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.2rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ms-blue), var(--ms-orange));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav a:hover {
    color: var(--ms-ink);
    background: rgba(26, 31, 36, 0.045);
  }

  .nav a:hover::after,
  .nav a.active::after {
    transform: scaleX(1);
  }

  .nav a.active {
    color: var(--ms-blue);
    background: transparent;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    justify-content: flex-end;
  }

  .header-inner .repair-search {
    width: auto;
    max-width: none;
  }

  .contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 0.7rem 0 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--ms-line);
    background: #fff;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  .contact-link:hover {
    border-color: transparent;
  }

  .contact-link.phone:hover {
    background: rgba(0, 160, 227, 0.08);
  }

  .contact-link .icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    background: var(--ms-blue);
  }

  .contact-link .value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--ms-blue-dark);
  }

  .mobile-call {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    place-items: center;
    background: linear-gradient(145deg, #f28c2a, #e07012);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 16px rgba(240, 129, 25, 0.28);
    flex-shrink: 0;
  }

  .menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #142029;
    color: #fff;
    place-items: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }

  .burger,
  .burger::before,
  .burger::after {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
  }

  .burger {
    position: relative;
  }

  .burger::before,
  .burger::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .burger::before {
    top: -5px;
  }

  .burger::after {
    top: 5px;
  }

  .menu-toggle.open .burger {
    background: transparent;
  }

  .menu-toggle.open .burger::before {
    top: 0;
    transform: rotate(45deg);
  }

  .menu-toggle.open .burger::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .mobile-panel {
    display: none;
    position: relative;
    z-index: 45;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid rgba(228, 232, 236, 0.9);
    background:
      radial-gradient(ellipse 80% 45% at 100% 0%, rgba(240, 129, 25, 0.12), transparent 55%),
      radial-gradient(ellipse 70% 40% at 0% 100%, rgba(0, 160, 227, 0.1), transparent 50%),
      linear-gradient(180deg, #fff 0%, #f4f7fa 100%);
  }

  .mobile-panel-inner {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: 0.95rem max(1.2rem, env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .mobile-menu-label {
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ms-muted);
  }

  .mobile-nav {
    display: grid;
    gap: 0.4rem;
  }

  .mobile-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.82rem 0.95rem;
    border-radius: 14px;
    border: 1px solid rgba(228, 232, 236, 0.95);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px rgba(20, 32, 41, 0.04);
    color: var(--ms-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition:
      transform 0.15s ease,
      border-color 0.15s ease,
      background 0.15s ease,
      box-shadow 0.15s ease;
  }

  .mobile-nav-go {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: rgba(0, 160, 227, 0.1);
    color: var(--ms-blue-dark);
    font-size: 0.82rem;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  }

  .mobile-nav a:hover,
  .mobile-nav a:focus-visible {
    border-color: rgba(0, 160, 227, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(20, 32, 41, 0.08);
  }

  .mobile-nav a:hover .mobile-nav-go,
  .mobile-nav a:focus-visible .mobile-nav-go {
    background: rgba(0, 160, 227, 0.16);
    transform: translateX(2px);
  }

  .mobile-nav a.active {
    color: var(--ms-orange-dark);
    border-color: rgba(240, 129, 25, 0.4);
    background: linear-gradient(120deg, rgba(240, 129, 25, 0.12), rgba(255, 255, 255, 0.96));
    box-shadow: 0 12px 26px rgba(240, 129, 25, 0.1);
  }

  .mobile-nav a.active .mobile-nav-go {
    background: var(--ms-orange);
    color: #fff;
  }

  .mobile-foot {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 0.55rem;
    margin-top: auto;
    padding-top: 0.85rem;
  }

  .mobile-foot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    letter-spacing: -0.01em;
  }

  .mobile-foot-btn.is-call {
    background: linear-gradient(145deg, #f28c2a, #e07012);
    color: #fff;
    box-shadow: 0 10px 20px rgba(240, 129, 25, 0.24);
  }

  .mobile-foot-btn.is-wa {
    background: #25d366;
    color: #fff;
    box-shadow: 0 10px 18px rgba(37, 211, 102, 0.2);
  }

  @media (max-width: 1180px) {
    .nav {
      display: none;
    }

    .menu-toggle {
      display: grid;
    }

    .contact-link.phone .value {
      display: none;
    }

    .contact-link.phone {
      width: 36px;
      height: 36px;
      padding: 0;
      justify-content: center;
      border-radius: 50%;
    }

    .contact-link.phone .icon {
      width: 100%;
      height: 100%;
    }

    .header-inner .repair-search.is-expanded {
      width: min(240px, 48vw);
      flex: 0 1 auto;
    }

    .site-header.menu-open {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      /* Geen 100dvh: met adminbalk (top offset) zou de foot anders onder de viewport vallen */
      height: auto;
      max-height: none;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #fff;
      border-bottom-color: rgba(228, 232, 236, 0.95);
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    body.has-admin-bar .site-header.menu-open {
      top: var(--admin-bar-h, 2.75rem);
    }

    .site-header.menu-open .header-inner {
      flex: 0 0 auto;
    }

    .site-header.menu-open .mobile-panel.is-open,
    .site-header.menu-open .mobile-panel:not([hidden]) {
      display: flex;
      flex-direction: column;
      animation: mobile-panel-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .site-header.menu-open .menu-toggle {
      background: var(--ms-orange);
      color: #fff;
      border-color: transparent;
    }
  }

  /* Dedicated mobile header treatment */
  @media (max-width: 979px) {
    .site-header {
      --header-h: 60px;
      --topbar-h: 32px;
      background: #fff;
      border-bottom: 1px solid rgba(228, 232, 236, 0.95);
      box-shadow: 0 8px 22px rgba(20, 32, 41, 0.06);
    }

    .site-header.is-scrolled {
      background: #fff;
      box-shadow: 0 10px 28px rgba(20, 32, 41, 0.1);
    }

    .contact-link {
      display: none;
    }

    .mobile-call {
      display: grid;
    }

    .brand-logo {
      width: 132px;
    }

    .header-inner {
      gap: 0.65rem;
      height: var(--header-h);
    }

    .header-actions {
      gap: 0.4rem;
    }

    .header-inner .search-toggle {
      width: 42px;
      height: 42px;
      border-color: #e4e8ec;
      background: #f6f8fa;
      color: var(--ms-blue-dark);
    }

    .site-header.menu-open .mobile-call {
      display: none;
    }
  }

  @media (max-width: 480px) {
    .brand-logo {
      width: 118px;
    }

    .mobile-call,
    .menu-toggle,
    .header-inner .search-toggle {
      width: 40px;
      height: 40px;
    }

    .mobile-foot {
      grid-template-columns: 1fr;
    }
  }

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

  @media (prefers-reduced-motion: reduce) {
    .mobile-panel:not([hidden]) {
      animation: none;
    }

    .mobile-nav a:hover,
    .mobile-nav a:focus-visible {
      transform: none;
    }

    .mobile-nav a:hover .mobile-nav-go,
    .mobile-nav a:focus-visible .mobile-nav-go {
      transform: none;
    }
  }

:root {
    --site-header-offset: calc(36px + 76px);
  }

  body.header-compact {
    --site-header-offset: 76px;
  }

  body.nav-open .wa-wrap,
  body.repair-search-overlay-open .wa-wrap {
    display: none !important;
  }

  @media (max-width: 979px) {
    :root {
      --site-header-offset: calc(32px + 60px);
    }

    body.header-compact {
      --site-header-offset: 60px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header .topbar {
      transition: none !important;
    }
  }

  body.nav-open {
    overflow: hidden;
  }

  #repair-wizard,
  .page-hero {
    scroll-margin-top: var(--site-header-offset);
  }

/* --- src/components/TopBar.astro --- */
.topbar {
    --topbar-h: 36px;
    background: #142029;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
    line-height: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .topbar-inner {
    min-height: var(--topbar-h);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
  }

  .topbar-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    justify-self: start;
    transition: color 0.15s ease;
  }

  .topbar-rating:hover {
    color: #fff;
  }

  .topbar-rating:focus-visible {
    outline: 2px solid rgba(0, 160, 227, 0.75);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .google-mark {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
  }

  .stars {
    display: inline-flex;
    gap: 0.05rem;
    color: #f5b400;
    font-size: 0.72rem;
    letter-spacing: -0.04em;
  }

  .star:not(.full) {
    color: rgba(255, 255, 255, 0.28);
  }

  .topbar-rating strong {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
  }

  .reviews-count {
    color: rgba(255, 255, 255, 0.62);
  }

  .topbar-usps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 0;
    min-width: 0;
    justify-self: center;
  }

  .topbar-usps li {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
  }

  .topbar-usps li + li::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-inline: 0.7rem;
    border-radius: 50%;
    background: var(--ms-orange);
    opacity: 0.9;
  }

  .topbar-meta {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 0.75rem;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .place {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
  }

  .phone {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    letter-spacing: -0.01em;
  }

  .phone:hover {
    color: #ffb265;
  }

  @media (max-width: 1100px) {
    .topbar-usps li:nth-child(n + 3) {
      display: none;
    }

    .topbar-usps li:nth-child(2)::before {
      display: inline-block;
    }
  }

  @media (max-width: 820px) {
    .topbar-usps {
      display: none;
    }

    .place {
      display: none;
    }

    .topbar-inner {
      gap: 0.75rem;
    }
  }

  @media (max-width: 979px) {
    .topbar {
      --topbar-h: 32px;
      background: linear-gradient(90deg, #101820 0%, #1a2a35 55%, #142029 100%);
      font-size: 0.74rem;
    }

    .topbar-inner {
      min-height: var(--topbar-h);
      grid-template-columns: 1fr auto;
    }

    .topbar-usps,
    .place,
    .reviews-count {
      display: none;
    }

    .phone {
      font-size: 0.78rem;
      color: #ffb265;
    }

    .stars {
      font-size: 0.68rem;
    }

    .topbar-rating strong {
      font-size: 0.78rem;
    }
  }

  @media (max-width: 480px) {
    .topbar {
      font-size: 0.72rem;
    }
  }

/* --- src/components/Footer.astro --- */
.site-footer {
    margin-top: 0;
    background: linear-gradient(160deg, #142029 0%, #1c2d39 55%, #123247 100%);
    color: #e8eef3;
    padding: 0 0 1.5rem;
  }

  .footer-nl {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.6rem, 3vw, 2.15rem) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background:
      radial-gradient(ellipse 50% 120% at 0% 50%, rgba(240, 129, 25, 0.18), transparent 55%),
      radial-gradient(ellipse 45% 100% at 100% 40%, rgba(0, 160, 227, 0.16), transparent 50%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  }

  .footer-nl-inner {
    position: relative;
    z-index: 1;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.05fr) minmax(16rem, 1.45fr);
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
    row-gap: 2rem;
    align-items: start;
    padding-top: clamp(2.25rem, 4vw, 3rem);
  }

  .brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
  }

  .brand-logo {
    width: min(180px, 70%);
    height: auto;
    margin: 0;
    padding: 0.65rem 0.8rem;
    background: #fff;
    border-radius: 12px;
  }

  .footer-sticker {
    width: 96px;
    height: auto;
    margin: 0;
    animation: sticker-float 4.5s ease-in-out infinite;
  }

  @keyframes sticker-float {
    0%,
    100% {
      transform: translateY(0) rotate(-2deg);
    }
    50% {
      transform: translateY(-6px) rotate(2deg);
    }
  }

  .lead,
  p {
    color: #c5d0d8;
  }

  .footer-address {
    margin: 0.7rem 0 1rem;
    color: #c5d0d8;
    line-height: 1.45;
    font-size: 0.92rem;
  }

  .rating {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.7rem 0 1rem;
    padding: 0.55rem 0.75rem;
    width: 100%;
    max-width: 22rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .rating:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: inherit;
  }

  .google-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
  }

  .rating-copy {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
  }

  .rating-line {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .score {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #f3f6f8;
  }

  .stars {
    display: inline-flex;
    gap: 0.04rem;
    font-size: 0.8rem;
    line-height: 1;
  }

  .star {
    color: rgba(255, 255, 255, 0.22);
  }

  .star.full {
    color: #fbbc05;
  }

  .rating-meta {
    font-size: 0.8rem;
    font-weight: 400;
    color: #9aa8b4;
    white-space: nowrap;
  }

  .rating-meta::before {
    content: "·";
    margin-right: 0.3rem;
    color: rgba(255, 255, 255, 0.28);
  }

  h3,
  .footer-acc summary {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.9rem;
    color: #e8eef3;
  }

  .footer-acc {
    margin: 0;
    border: 0;
    min-width: 0;
  }

  .footer-acc summary {
    list-style: none;
    cursor: default;
  }

  .footer-acc summary::-webkit-details-marker {
    display: none;
  }

  .footer-acc summary::after {
    display: none;
  }

  .location-body {
    display: grid;
    gap: 0.9rem;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.45rem;
  }

  a {
    color: #e8eef3;
  }

  a:hover {
    color: var(--ms-orange);
  }

  .footer-hours {
    margin-left: -50px;
  }

  .hours {
    width: 100%;
    max-width: 15.5rem;
  }

  .hours li {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    padding: 0.25rem 0.4rem 0.4rem;
    margin: 0 -0.4rem;
    border-radius: 8px;
    color: #c5d0d8;
  }

  .hours li.today {
    background: rgba(240, 129, 25, 0.16);
    border-bottom-color: transparent;
    color: #fff;
  }

  .hours li.today span:first-child {
    font-weight: 700;
    color: #ffb265;
  }

  .hours li.today span:last-child {
    font-weight: 700;
    color: #fff;
  }

  .location {
    align-content: start;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    padding-left: 0.35rem;
  }

  .location summary {
    margin-bottom: 0.9rem;
  }

  .location-address {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: #e8eef3;
    text-decoration: none;
  }

  .location-address > span:last-child {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
  }

  .location-address strong {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: break-word;
  }

  .location-address small,
  .location-place {
    display: block;
    color: #a9b5bf;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .location-link span:last-child {
    min-width: 0;
    line-height: 1.35;
  }

  .location-link.is-email span:last-child {
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
    font-size: 0.84rem;
  }

  .location-address:hover {
    color: #fff;
  }

  .location-address:hover strong {
    color: var(--ms-orange);
  }

  .location-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: rgba(0, 160, 227, 0.14);
    color: #5ec8f5;
  }

  .location-contacts {
    display: grid;
    gap: 0.45rem;
  }

  .location-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #d5dee5;
    text-decoration: none;
    font-size: 0.94rem;
  }

  .location-link .location-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #c5d0d8;
  }

  .location-link:hover {
    color: #fff;
  }

  .location-link:hover .location-icon {
    background: rgba(240, 129, 25, 0.18);
    color: var(--ms-orange);
  }

  .location-route {
    justify-self: start;
    margin-top: 0.15rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: #5ec8f5;
    text-decoration: none;
  }

  .location-route:hover {
    color: var(--ms-orange);
  }

  .footer-badges {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
  }

  .footer-badges img {
    display: block;
    height: auto;
    max-height: 58px;
    width: auto;
    max-width: min(100%, 170px);
    object-fit: contain;
  }

  .footer-badges img[src$=".svg"] {
    max-height: 44px;
  }

  .footer-bottom {
    margin-top: 2.25rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.92rem;
  }

  .footer-bottom p {
    margin: 0;
    line-height: 1.4;
  }

  .legal {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.4;
  }
  .legal .cookie-settings {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  @media (max-width: 960px) {
    .footer-grid {
      grid-template-columns: 1fr 1fr;
      column-gap: 1.75rem;
    }

    .footer-hours {
      margin-left: 0;
    }

    .hours {
      max-width: none;
    }

    .location {
      justify-self: stretch;
      width: auto;
      padding-left: 0;
    }
  }

  @media (max-width: 640px) {
    .site-footer {
      padding: 0 0 1.35rem;
    }

    .footer-nl {
      padding: 1.4rem 0 1.5rem;
    }

    .footer-grid {
      grid-template-columns: 1fr;
      row-gap: 0;
      padding-top: 1.75rem;
    }

    .footer-grid > :first-child {
      margin-bottom: 1.25rem;
    }

    .brand-lockup {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .brand-logo {
      width: min(168px, 58%);
      padding: 0.55rem 0.7rem;
    }

    .footer-sticker {
      width: min(104px, 28vw);
      flex-shrink: 0;
      margin-right: 0.15rem;
    }

    .footer-acc {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-acc:last-of-type {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-acc summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin: 0;
      padding: 0.95rem 0;
      cursor: pointer;
      user-select: none;
    }

    .footer-acc summary::after {
      content: "";
      display: block;
      width: 0.45rem;
      height: 0.45rem;
      border-right: 2px solid rgba(255, 255, 255, 0.7);
      border-bottom: 2px solid rgba(255, 255, 255, 0.7);
      transform: rotate(45deg);
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    .footer-acc[open] summary::after {
      transform: rotate(-135deg);
      margin-top: 0.2rem;
    }

    .footer-acc > ul,
    .footer-acc > .location-body {
      padding: 0 0 1.1rem;
    }

    .location {
      max-width: none;
    }

    .location summary {
      margin-bottom: 0;
    }

    .footer-bottom {
      gap: 0.75rem;
      margin-top: 1.75rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .footer-sticker {
      animation: none;
    }

    .footer-acc summary::after {
      transition: none;
    }
  }

/* --- src/components/PhotoHero.astro --- */
.photo-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    min-height: clamp(15.5rem, 30vh, 19rem);
    display: grid;
    scroll-margin-top: var(--site-header-offset, 5.5rem);
  }

  .photo-hero.is-compact {
    min-height: clamp(13.75rem, 26vh, 16.25rem);
  }

  .photo-hero-img {
    position: absolute;
    left: 0;
    right: 0;
    top: -14%;
    z-index: 0;
    width: 100%;
    height: 128%;
    object-fit: cover;
    will-change: transform;
    pointer-events: none;
  }

  picture.photo-hero-img {
    display: block;
  }

  picture.photo-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (prefers-reduced-motion: reduce) {
    .photo-hero-img {
      top: 0;
      height: 100%;
      will-change: auto;
    }
  }

  .photo-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(
        105deg,
        rgba(20, 18, 14, 0.84) 0%,
        rgba(20, 18, 14, 0.55) 48%,
        rgba(20, 18, 14, 0.28) 100%
      ),
      linear-gradient(180deg, rgba(20, 18, 14, 0.18) 0%, rgba(20, 18, 14, 0.52) 100%);
    pointer-events: none;
  }

  .photo-hero-frame {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: stretch;
    width: 100%;
    min-height: inherit;
    box-sizing: border-box;
    padding-top: var(--page-crumbs-pad-y, 0.85rem);
    padding-bottom: clamp(1.55rem, 3vw, 2.25rem);
  }

  .photo-hero.is-compact .photo-hero-frame {
    padding-bottom: clamp(1.2rem, 2.6vw, 1.65rem);
  }

  .photo-hero .crumbs {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    margin: 0 0 1.15rem;
    padding: 0;
  }

  .photo-hero.has-crumbs .photo-hero-row {
    margin-top: auto;
  }

  .photo-hero .crumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .photo-hero .crumbs li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.72);
  }

  .photo-hero .crumbs li + li::before {
    content: "";
    width: 0.28rem;
    height: 0.28rem;
    margin-inline: 0.45rem;
    border-right: 1.5px solid rgba(255, 255, 255, 0.45);
    border-top: 1.5px solid rgba(255, 255, 255, 0.45);
    transform: rotate(45deg);
    flex-shrink: 0;
  }

  .photo-hero .crumbs a,
  .photo-hero .crumbs span {
    min-width: 0;
    max-width: min(40ch, 58vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
  }

  .photo-hero .crumbs a {
    color: rgba(255, 255, 255, 0.86);
  }

  .photo-hero .crumbs a:hover {
    color: #fff;
  }

  .photo-hero .crumbs [aria-current="page"] {
    color: #fff;
    font-weight: 600;
  }

  .photo-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem 1.75rem;
    width: 100%;
  }

  .photo-hero-row:not(:has(.photo-hero-badge:not(:empty))) {
    grid-template-columns: minmax(0, 1fr);
  }

  .photo-hero-inner {
    position: relative;
    display: grid;
    gap: 0.55rem;
    max-width: 38rem;
    min-width: 0;
  }

  .photo-hero .brand {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
  }

  .photo-hero h1 {
    margin: 0;
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-wrap: balance;
  }

  .photo-hero .lead {
    margin: 0;
    max-width: 42ch;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
  }

  .photo-hero .cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem 0.85rem;
    margin-top: 0.35rem;
  }

  .photo-hero .cta-row:empty {
    display: none;
  }

  .photo-hero-badge {
    justify-self: end;
    align-self: end;
    z-index: 3;
    max-width: min(17.5rem, 100%);
    filter: drop-shadow(0 16px 28px rgba(10, 16, 22, 0.35));
    pointer-events: none;
    animation: photo-badge-float 5.4s ease-in-out 0.5s infinite;
  }

  .photo-hero-badge:empty {
    display: none;
  }

  @keyframes photo-badge-float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-6px);
    }
  }

  .photo-hero .btn-ghost {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    backdrop-filter: blur(6px);
    box-shadow: none;
  }

  .photo-hero .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }

  .photo-hero .btn-white {
    background: #fff;
    color: #1a1f24;
    box-shadow: 0 10px 24px rgba(10, 16, 22, 0.18);
  }

  .photo-hero .btn-white:hover {
    background: #f4f7fa;
    color: #1a1f24;
  }

  .photo-hero .text-link {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  }

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

  .photo-hero .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    margin: 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
  }

  .photo-hero .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
    margin: 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8);
  }

  .photo-hero .meta .cat {
    color: #ffb366;
    font-weight: 700;
  }

  @media (max-width: 560px) {
    .photo-hero,
    .photo-hero.is-compact {
      min-height: clamp(14.5rem, 34vh, 17.5rem);
    }

    .photo-hero .crumbs {
      margin-bottom: 0.7rem;
    }

    .photo-hero .lead {
      max-width: none;
    }

    .photo-hero .cta-row {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.45rem 0.55rem;
    }

    .photo-hero .cta-row .btn {
      width: auto;
      flex: 0 1 auto;
      padding: 0.55rem 0.9rem;
      font-size: 0.78rem;
    }

    .photo-hero h1 {
      font-size: clamp(1.5rem, 6.5vw, 1.9rem);
    }

    .photo-hero-row {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 0.75rem 0.9rem;
    }

    .photo-hero-badge {
      justify-self: end;
      align-self: end;
      width: auto;
      max-width: none;
      margin: 0 0 0.1rem;
      filter: drop-shadow(0 12px 22px rgba(10, 16, 22, 0.32));
    }

    .photo-hero-frame {
      padding-bottom: clamp(1.15rem, 3vw, 1.5rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .photo-hero-badge {
      animation: none;
    }
  }

/* --- src/components/UspBar.astro --- */
.usp-bar {
    position: relative;
    z-index: 3;
    margin-top: -3.5rem;
    padding-bottom: 0.25rem;
  }

  .usp-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(20, 32, 41, 0.07);
    overflow: hidden;
  }

  .usp-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.15rem 1.2rem;
  }

  .usp-item + .usp-item {
    border-left: 1px solid var(--ms-line);
  }

  .usp-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(0, 160, 227, 0.1);
    color: #0086bf;
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.2s ease;
  }

  .usp-item:hover .usp-icon {
    transform: translateY(-3px) scale(1.06);
  }

  .usp-item:nth-child(2) .usp-icon,
  .usp-item:nth-child(4) .usp-icon {
    background: rgba(240, 129, 25, 0.12);
    color: #d66c0a;
  }

  .usp-item strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ms-ink, #1a1f24);
  }

  .usp-item span:not(.usp-icon) {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--ms-muted);
  }

  @media (max-width: 980px) {
    .usp-bar {
      margin-top: -1.25rem;
      padding-top: 0;
      padding-bottom: 0.5rem;
    }

    .usp-row {
      grid-template-columns: 1fr 1fr;
      border-radius: 16px;
    }

    .usp-item {
      padding: 1rem 1rem;
      gap: 0.7rem;
    }

    .usp-item:nth-child(3),
    .usp-item:nth-child(4) {
      border-top: 1px solid var(--ms-line);
    }

    .usp-item:nth-child(3) {
      border-left: 0;
    }
  }

  @media (max-width: 560px) {
    .usp-row {
      grid-template-columns: 1fr;
    }

    .usp-item {
      padding: 1rem 1.1rem;
    }

    .usp-item,
    .usp-item + .usp-item,
    .usp-item:nth-child(3),
    .usp-item:nth-child(4) {
      border-left: 0;
      border-top: 0;
    }

    .usp-item + .usp-item {
      border-top: 1px solid var(--ms-line);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .usp-icon {
      transition: none;
    }

    .usp-item:hover .usp-icon {
      transform: none;
    }
  }

/* --- src/components/Reviews.astro --- */
.reviews-section {
    padding-block: clamp(2.25rem, 4vw, 3.25rem) clamp(2.5rem, 4.5vw, 3.5rem);
    background:
      radial-gradient(ellipse 60% 70% at 0% 0%, rgba(240, 129, 25, 0.08), transparent 55%),
      radial-gradient(ellipse 50% 60% at 100% 40%, rgba(0, 160, 227, 0.07), transparent 50%),
      linear-gradient(180deg, #fff, #f7fafc 100%);
  }

  .reviews-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-bottom: 1.35rem;
  }

  .copy .eyebrow {
    margin-bottom: 0.3rem;
  }

  .copy h2 {
    margin: 0;
    letter-spacing: -0.02em;
    font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  }

  .copy .lead {
    margin: 0.35rem 0 0;
    max-width: 36ch;
    color: #5b6570;
  }

  .rating-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .score-block {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.85rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(228, 232, 236, 0.95);
    box-shadow: 0 8px 20px rgba(20, 32, 41, 0.04);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .score-block:hover {
    border-color: rgba(0, 160, 227, 0.35);
    box-shadow: 0 10px 24px rgba(20, 32, 41, 0.08);
    color: inherit;
  }

  .google-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(26, 31, 36, 0.04);
  }

  .score-copy {
    display: grid;
    gap: 0.05rem;
  }

  .score-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .score {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ms-ink);
  }

  .stars {
    display: inline-flex;
    gap: 0.04rem;
    line-height: 1;
  }

  .star {
    font-size: 0.92rem;
    color: #e4e8ec;
  }

  .star.full {
    color: #fbbc04;
  }

  .rating-meta {
    color: #5b6570;
    font-size: 0.84rem;
  }

  @media (max-width: 720px) {
    .reviews-section {
      padding-block: 2rem 2.25rem;
    }

    .reviews-head {
      flex-direction: column;
      align-items: stretch;
      gap: 0.9rem;
      margin-bottom: 1rem;
    }

    .copy h2 {
      font-size: 1.45rem;
    }

    .copy .lead {
      max-width: none;
      font-size: 0.95rem;
    }

    .rating-bar {
      align-items: stretch;
      width: 100%;
      gap: 0.55rem;
    }

    .score-block {
      width: 100%;
      justify-content: flex-start;
      padding: 0.7rem 0.8rem;
    }
  }

.review-slider {
  --rs-gutter: var(--container-pad, clamp(1.25rem, 3vw, 2rem));
  --rs-card-w: clamp(260px, 28vw, 320px);
  --rs-gap: 1rem;
  position: relative;
}

.review-slider.is-bleed {
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

.rs-viewport {
  position: relative;
  overflow: hidden;
  padding-block: 0.35rem 0.5rem;
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.rs-track {
  display: flex;
  align-items: flex-start;
  gap: var(--rs-gap);
  width: max-content;
  will-change: transform;
  padding-inline: var(--rs-gutter);
}

.rs-slide {
  position: relative;
  flex: 0 0 var(--rs-card-w);
  width: var(--rs-card-w);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  height: 15.5rem;
  min-height: 15.5rem;
  align-content: stretch;
  padding: 1.3rem 1.25rem 1.15rem;
  border-radius: 1.15rem;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92)),
    linear-gradient(135deg, rgba(0, 122, 195, 0.06), rgba(243, 111, 33, 0.05));
  border: 1px solid rgba(228, 232, 236, 0.95);
  box-shadow: 0 10px 28px rgba(15, 42, 61, 0.05);
}

.rs-quote {
  position: absolute;
  top: 0.25rem;
  right: 0.9rem;
  font-family: Outfit, var(--font-display, sans-serif);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(243, 111, 33, 0.2);
  pointer-events: none;
  user-select: none;
}

.rs-stars {
  display: inline-flex;
  gap: 0.06rem;
  line-height: 1;
}

.rs-star {
  font-size: 1.02rem;
  color: #dce2e7;
}

.rs-star.is-full {
  color: #fbbc04;
}

.rs-text {
  margin: 0;
  color: #1a1f24;
  font-family: Outfit, var(--font-display, sans-serif);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rs-foot {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.2rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(228, 232, 236, 0.95);
}

.rs-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: Outfit, var(--font-display, sans-serif);
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.rs-person {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
}

.rs-person strong {
  font-family: Outfit, var(--font-display, sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1f24;
}

.rs-source {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #5b6570;
  font-size: 0.76rem;
}

.rs-empty {
  color: #5b6570;
  padding-inline: var(--container-pad, 1.25rem);
}

@media (max-width: 720px) {
  .review-slider {
    --rs-card-w: min(78vw, 292px);
    --rs-gap: 0.75rem;
  }

  .rs-slide {
    height: 14.25rem;
    min-height: 14.25rem;
    padding: 1.1rem 1.05rem 1rem;
    border-radius: 1rem;
  }

  .rs-quote {
    font-size: 3.2rem;
  }

  .rs-text {
    font-size: 0.96rem;
    -webkit-line-clamp: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .rs-viewport::-webkit-scrollbar {
    display: none;
  }

  .rs-track {
    will-change: auto;
    transform: none !important;
  }
}

  /* --- src/components/WhatsAppButton.astro --- */
.wa-wrap {
    --wa-color: #25d366;
    --wa-dark: #128c7e;
    position: fixed;
    right: var(--wa-offset, 1.15rem);
    bottom: var(--wa-offset, 1.15rem);
    left: auto;
    z-index: 60;
    display: grid;
    justify-items: end;
    gap: 0.85rem;
  }

  .wa-wrap.is-left {
    right: auto;
    left: var(--wa-offset, 1.15rem);
    justify-items: start;
  }

  .wa-wrap > summary {
    list-style: none;
  }

  .wa-wrap > summary::-webkit-details-marker {
    display: none;
  }

  .wa-fab {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 999px;
    padding: 0.55rem 0.95rem 0.55rem 0.55rem;
    background: linear-gradient(145deg, var(--wa-color) 0%, var(--wa-dark) 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(var(--wa-rgb, 18, 140, 126), 0.35);
  }

  .wa-wrap.is-icon .wa-fab-label {
    display: none;
  }

  .wa-wrap.is-icon .wa-fab {
    padding: 0.5rem;
    border-radius: 50%;
  }

  .wa-wrap.is-pulse .wa-fab {
    animation: wa-pulse 2.4s ease-out infinite;
  }

  @keyframes wa-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--wa-rgb, 37, 211, 102), 0.45); }
    70% { box-shadow: 0 0 0 14px rgba(var(--wa-rgb, 37, 211, 102), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--wa-rgb, 37, 211, 102), 0); }
  }

  .wa-wrap[open] .wa-fab {
    background: linear-gradient(145deg, #1f2c34, #111b21);
  }

  .wa-fab-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
  }

  .wa-x {
    display: none;
    font-size: 1.8rem;
    line-height: 1;
  }

  .wa-wrap[open] .wa-icon {
    display: none;
  }

  .wa-wrap[open] .wa-x {
    display: block;
  }

  .wa-fab-label {
    display: grid;
    text-align: left;
    line-height: 1.15;
  }

  .wa-fab-label small {
    font-size: 0.72rem;
    opacity: 0.9;
    font-weight: 600;
  }

  .wa-fab-label strong {
    font-size: 0.95rem;
    font-family: var(--font-display);
  }

  .wa-panel {
    width: min(340px, calc(100vw - 2rem));
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(16, 24, 40, 0.22);
    border: 1px solid rgba(16, 24, 40, 0.06);
  }

  .wa-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    background: linear-gradient(135deg, var(--wa-color), var(--wa-dark));
    color: #fff;
  }

  .wa-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .wa-brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    padding: 0.15rem;
  }

  .wa-brand strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
  }

  .wa-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
    font-size: 0.78rem;
  }

  .wa-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b8ffce;
  }

  .wa-body {
    padding: 1rem;
    background: linear-gradient(180deg, #eafaf0 0%, #fff 100%);
  }

  .wa-bubble {
    background: #fff;
    border-radius: 16px 16px 16px 4px;
    padding: 0.9rem 1rem;
    color: #314048;
    font-size: 0.93rem;
    line-height: 1.45;
    margin: 0 0 0.9rem;
  }

  .wa-account {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e5efe8;
    color: #142029;
    text-decoration: none;
  }

  .wa-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--wa-color);
    color: #fff;
    flex-shrink: 0;
  }

  .wa-meta {
    display: grid;
    flex: 1;
  }

  .wa-meta strong {
    font-family: var(--font-display);
  }

  .wa-meta small {
    color: #667681;
    font-size: 0.82rem;
  }

  .wa-go {
    color: #128c7e;
    font-weight: 700;
  }

  @media (max-width: 560px) {
    .wa-wrap {
      right: 0.75rem;
      bottom: 0.75rem;
    }

    .wa-fab-label {
      display: none;
    }

    .wa-fab {
      padding: 0.5rem;
      border-radius: 50%;
    }

    .wa-fab-icon {
      width: 2.5rem;
      height: 2.5rem;
    }
  }

/* --- src/components/DeviceRepairLander.astro --- */
.device-lander {
    --dl-accent: var(--site-primary, #f08119);
    --dl-ink: #152028;
    --dl-muted: #5c6b76;
    background:
      radial-gradient(ellipse 55% 40% at 100% 0%, color-mix(in srgb, var(--dl-accent) 14%, transparent), transparent 60%),
      #fff;
  }
  .device-lander.is-br {
    --dl-accent: #007ac3;
    background:
      radial-gradient(ellipse 55% 40% at 0% 0%, rgba(0, 122, 195, 0.1), transparent 55%),
      #fff;
  }

  .device-lander-hero {
    padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem);
  }
  .device-lander-hero-grid {
    display: grid;
    gap: 1.75rem;
    align-items: center;
  }
  @media (min-width: 900px) {
    .device-lander-hero-grid {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      gap: 2.5rem;
    }
  }

  .device-lander-kicker {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dl-accent);
  }
  .device-lander-kicker img {
    width: 1.35rem;
    height: 1.35rem;
    object-fit: contain;
  }
  .device-lander-dot {
    opacity: 0.45;
  }
  .device-lander-copy h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 3.4vw, 2.55rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--dl-ink);
  }
  .device-lander-intro {
    margin: 0;
    max-width: 38rem;
    color: var(--dl-muted);
    line-height: 1.65;
    font-size: 1.05rem;
  }
  .device-lander .rich-text p {
    margin: 0 0 0.75rem;
  }
  .device-lander .rich-text p:last-child {
    margin-bottom: 0;
  }
  .device-lander .rich-text h2,
  .device-lander .rich-text h3 {
    margin: 0.85rem 0 0.4rem;
    color: var(--dl-ink);
  }
  .device-lander .rich-text ul,
  .device-lander .rich-text ol {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
  }
  .device-lander .rich-text a {
    color: var(--dl-accent);
    font-weight: 600;
  }
  .device-lander-price {
    margin: 1.05rem 0 0;
    color: var(--dl-ink);
    font-size: 1.05rem;
  }
  .device-lander-price strong {
    color: var(--dl-accent);
    font-size: 1.35rem;
  }
  .device-lander-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
  }
  .device-lander-trust li {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dl-accent) 9%, #fff);
    color: var(--dl-ink);
    font-size: 0.82rem;
    font-weight: 650;
  }
  .device-lander-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.35rem;
  }
  .device-lander-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.85rem;
    padding: 0.7rem 1.25rem;
    border-radius: 0.7rem;
    background: var(--dl-accent);
    color: #fff;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--dl-accent) 28%, transparent);
  }
  .device-lander-btn:hover {
    filter: brightness(1.05);
  }
  .device-lander-btn.is-ghost {
    background: #fff;
    color: var(--dl-ink);
    border: 1px solid rgba(21, 32, 40, 0.12);
    box-shadow: none;
  }

  .device-lander-media {
    display: grid;
    place-items: center;
    min-height: 240px;
    border-radius: 1.35rem;
    background:
      linear-gradient(160deg, color-mix(in srgb, var(--dl-accent) 12%, #f3f6f8), #eef2f5);
    padding: 1.4rem 1.25rem;
  }
  .device-lander-media .device-lander-phone,
  .device-lander-media img {
    max-height: 300px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .device-lander-body {
    display: grid;
    gap: clamp(2rem, 4vw, 3.25rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
  }
  .device-lander-section-head {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1.15rem;
    max-width: 40rem;
  }
  .device-lander-section-head h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    letter-spacing: -0.02em;
    color: var(--dl-ink);
  }
  .device-lander-section-head p {
    margin: 0;
    color: var(--dl-muted);
    line-height: 1.55;
  }

  .device-lander-price-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
  }
  @media (min-width: 700px) {
    .device-lander-price-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1100px) {
    .device-lander-price-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .device-lander-price-grid a {
    display: grid;
    gap: 0.28rem;
    min-height: 100%;
    padding: 1rem 1.1rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid rgba(21, 32, 40, 0.08);
    background: linear-gradient(180deg, #fafbfc, #fff);
    text-decoration: none;
    color: inherit;
  }
  .device-lander-price-grid a:hover {
    border-color: color-mix(in srgb, var(--dl-accent) 45%, #e6ebf0);
    box-shadow: 0 10px 24px rgba(21, 32, 40, 0.06);
  }
  .device-lander-price-grid strong {
    color: var(--dl-ink);
    font-size: 1.02rem;
  }
  .device-lander-price-grid span {
    color: var(--dl-muted);
    font-size: 0.86rem;
  }
  .device-lander-price-grid em {
    color: var(--dl-muted);
    font-style: normal;
    font-size: 0.9rem;
    line-height: 1.45;
  }
  .device-lander-price-grid b {
    margin-top: 0.35rem;
    color: var(--dl-accent);
    font-size: 1.02rem;
  }

  .device-lander-steps ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.85rem;
  }
  @media (min-width: 800px) {
    .device-lander-steps ol {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.1rem;
    }
  }
  .device-lander-steps li {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border-radius: 0.9rem;
    background: #f6f8fa;
    border: 1px solid #e6ebf0;
  }
  .device-lander-steps strong {
    color: var(--dl-ink);
  }
  .device-lander-steps span {
    color: var(--dl-muted);
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .device-lander-faq-list {
    display: grid;
    gap: 0.65rem;
  }
  @media (min-width: 900px) {
    .device-lander-faq-list {
      grid-template-columns: 1fr 1fr;
      gap: 0.85rem 1.15rem;
    }
  }
  .device-lander-faq details {
    border: 1px solid rgba(21, 32, 40, 0.1);
    border-radius: 14px;
    background: #fff;
    padding: 0.85rem 1rem;
    min-width: 0;
    align-self: start;
  }
  .device-lander-faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--dl-ink);
    list-style: none;
  }
  .device-lander-faq summary::-webkit-details-marker {
    display: none;
  }
  .device-lander-faq details .rich-text {
    margin: 0.65rem 0 0;
    color: var(--dl-muted);
    line-height: 1.55;
    font-size: 0.95rem;
  }

  .device-lander-wizard {
    padding-top: 0.25rem;
  }

/* --- src/components/budgetrepair/BudgetRepairHome.astro --- */
.br-banner {
    --br-hero-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --br-hero-h: clamp(32rem, 74vh, 42rem);
    position: relative;
    isolation: isolate;
    min-height: var(--br-hero-h);
    /* Fallback-tint; de echte foto zit in .br-banner-img (full-bleed) */
    background: #007ac3;
    overflow: hidden;
    overflow-x: clip;
    z-index: 2;
  }

  .br-banner-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    filter: blur(2px);
    opacity: 0;
    animation: br-orb-in 1.4s var(--br-hero-ease) forwards;
  }

  .br-banner-orb-a {
    width: min(28rem, 55vw);
    height: min(28rem, 55vw);
    left: -8%;
    top: 8%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 68%);
    animation-delay: 0.05s;
  }

  .br-banner-orb-b {
    width: min(22rem, 48vw);
    height: min(22rem, 48vw);
    right: -6%;
    bottom: 12%;
    background: radial-gradient(circle, rgba(243, 111, 33, 0.28), transparent 70%);
    animation-delay: 0.18s;
  }

  .br-banner-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      108deg,
      transparent 32%,
      rgba(255, 255, 255, 0.05) 44%,
      rgba(255, 255, 255, 0.28) 50%,
      rgba(255, 255, 255, 0.05) 56%,
      transparent 68%
    );
    transform: translateX(-120%) skewX(-12deg);
    animation: br-shine-sweep 1.35s 0.15s var(--br-hero-ease) both;
  }

  .br-banner-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .br-banner-img-shift {
    position: absolute;
    /* Extra ruimte voor parallax — voorkomt witte randen */
    inset: -12% 0 -8%;
    width: 100%;
    height: auto;
  }

  .br-banner-img picture,
  .br-banner-img img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .br-banner-img img {
    min-height: calc(var(--br-hero-h) * 1.2);
    object-fit: cover;
    object-position: center 22%;
    opacity: 0;
    transform: scale(1.06);
    animation: br-hero-bg 1.6s var(--br-hero-ease) 0.05s forwards;
  }

  .br-banner-img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Lichte blauwe wash over de hele foto — ook onder de header, geen aparte kap */
    background:
      linear-gradient(
        180deg,
        rgba(0, 102, 168, 0.42) 0%,
        rgba(0, 122, 195, 0.28) 38%,
        rgba(0, 90, 145, 0.55) 100%
      ),
      linear-gradient(90deg, rgba(0, 90, 145, 0.28), transparent 35%, transparent 65%, rgba(0, 90, 145, 0.28));
    opacity: 0;
    animation: br-fade-in 0.9s ease 0.1s forwards;
  }

  .br-banner-inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--br-hero-h);
    max-width: 73.75rem;
    width: 100%;
    margin-inline: auto;
    padding-inline: 1.25rem;
    padding-top: 5.5rem;
    padding-bottom: 2.25rem;
    box-sizing: border-box;
  }

  .br-banner-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: clamp(4.75rem, 9.5vw, 7.25rem);
    z-index: 5;
    display: block;
    pointer-events: none;
    color: var(--br-surface, #dceaf4);
    opacity: 0;
    transform: translateY(0.45rem);
    animation: br-wave-in 0.85s var(--br-hero-ease) 0.45s forwards;
  }

  .br-wave-back {
    transform-origin: 50% 100%;
    animation: br-wave-swell 11s ease-in-out 1.2s infinite;
  }

  .br-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.85rem;
    z-index: 4;
    pointer-events: none;
    background: var(--br-surface, #dceaf4);
  }

  .br-mascot-layer {
    position: absolute;
    bottom: 0.35rem;
    z-index: 2;
    pointer-events: none;
    user-select: none;
  }

  .br-mascot {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 14px 22px rgba(0, 35, 70, 0.28));
    opacity: 0;
  }

  .br-mascot-left {
    left: -0.5rem;
    width: min(11.5rem, 20vw);
    overflow: visible;
  }

  .br-mascot-right {
    right: -0.75rem;
    width: min(16.8rem, 28vw);
  }

  .br-mascot-left .br-mascot {
    animation:
      br-mascot-left-in 1.05s var(--br-hero-ease) 0.35s both,
      br-mascot-float-left 5.6s ease-in-out 1.5s infinite;
  }

  .br-mascot-right .br-mascot {
    animation:
      br-mascot-right-in 1.05s var(--br-hero-ease) 0.48s both,
      br-mascot-float-right 6.4s ease-in-out 1.75s infinite;
  }

  /* Chatballon boven het poppetje — desktop: gecentreerd op het hoofd */
  .br-mascot-bubble {
    --br-bubble-bg: #fff;
    appearance: none;
    border: 0;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 0.2rem);
    top: auto;
    z-index: 3;
    width: max-content;
    max-width: min(8.75rem, 38vw);
    margin-inline: auto;
    padding: 0.45rem 0.7rem 0.5rem;
    border-radius: 1.05rem;
    background: var(--br-bubble-bg);
    color: #0c3550;
    font-family: var(--font-display, inherit);
    font-size: clamp(0.68rem, 1.15vw, 0.82rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    box-shadow: 0 10px 24px rgba(0, 30, 60, 0.22);
    opacity: 0;
    transform-origin: 50% 100%;
    animation:
      br-bubble-pop 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) 1.15s both,
      br-bubble-bob 3.4s ease-in-out 1.9s infinite;
    pointer-events: none;
  }

  /* Aansluitende staart van de chatballon (driehoek) */
  .br-mascot-bubble::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.55rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.58rem 0.48rem 0 0.48rem;
    border-color: var(--br-bubble-bg) transparent transparent transparent;
    transform: translateX(-50%);
    filter: drop-shadow(0 3px 2px rgba(0, 30, 60, 0.08));
  }

  .br-mascot-bubble::after {
    display: none;
  }

  .br-mascot-bubble-text {
    position: relative;
    display: block;
    color: #0c3550;
  }

  .br-banner-cnt {
    text-align: center;
    max-width: 44rem;
    width: 100%;
    color: #fff;
    position: relative;
    z-index: 5;
    padding-block: 1.25rem 2.5rem;
    perspective: 800px;
  }

  .br-banner-cnt h1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    column-gap: 0.28em;
    row-gap: 0;
    margin: 0 0 1rem;
    font-size: clamp(2.15rem, 4.8vw, 3.25rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 24px rgba(0, 40, 80, 0.18);
  }

  .br-hero-word,
  .br-hero-place {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    opacity: 0;
    transform: translateY(115%) rotateX(-55deg);
    transform-origin: 50% 100%;
    animation: br-word-in 0.85s var(--br-hero-ease) forwards;
    animation-delay: calc(0.28s + var(--i) * 0.07s);
  }

  .br-hero-place {
    --br-place-h: 1.15em;
    --br-place-n: 7;
    --br-place-step: 2.4s;
    color: #ffb070;
    text-shadow: 0 2px 18px rgba(243, 111, 33, 0.35);
    overflow: hidden;
  }

  .br-hero-place-viewport {
    display: block;
    height: var(--br-place-h);
    overflow: hidden;
  }

  .br-hero-place-track {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    animation: br-place-spin calc(var(--br-place-n) * var(--br-place-step))
      cubic-bezier(0.76, 0, 0.24, 1) infinite;
    animation-delay: 1.35s;
  }

  .br-hero-place-item {
    display: flex;
    align-items: center;
    height: var(--br-place-h);
    white-space: nowrap;
    line-height: 1;
  }

  @keyframes br-place-spin {
    0%,
    10.5% {
      transform: translateY(0);
    }
    14.28%,
    24.78% {
      transform: translateY(calc(var(--br-place-h) * -1));
    }
    28.56%,
    39.06% {
      transform: translateY(calc(var(--br-place-h) * -2));
    }
    42.84%,
    53.34% {
      transform: translateY(calc(var(--br-place-h) * -3));
    }
    57.12%,
    67.62% {
      transform: translateY(calc(var(--br-place-h) * -4));
    }
    71.4%,
    81.9% {
      transform: translateY(calc(var(--br-place-h) * -5));
    }
    85.68%,
    96.18% {
      transform: translateY(calc(var(--br-place-h) * -6));
    }
    100% {
      transform: translateY(calc(var(--br-place-h) * -7));
    }
  }

  .br-hero-lead {
    margin: 0 auto 1.75rem;
    max-width: 38rem;
    font-size: clamp(0.98rem, 1.3vw, 1.08rem);
    line-height: 1.5;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.94);
    opacity: 0;
    transform: translateY(22px);
    filter: blur(4px);
    animation: br-lead-in 0.9s var(--br-hero-ease) 0.7s forwards;
  }

  .br-banner-search {
    position: relative;
    z-index: 6;
    max-width: 36.5rem;
    margin-inline: auto;
    opacity: 0;
    transform: translateY(28px) scale(0.94);
    animation: br-search-in 0.95s var(--br-hero-ease) 0.9s forwards;
  }

  .br-banner-search .repair-search,
  .br-banner-search .repair-search.is-panel {
    --rs-surface: #fff;
    --rs-accent: #007ac3;
    width: 100%;
    max-width: none;
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
  }

  .br-banner-search .field {
    height: 3.75rem;
    gap: 0.55rem;
    padding: 0.35rem 0.4rem 0.35rem 1.45rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.65) inset,
      0 14px 34px rgba(0, 35, 70, 0.22);
    animation: br-search-glow 1.4s ease 1.35s both;
  }

  .br-banner-search .field:focus-within {
    border: 0;
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.35),
      0 14px 34px rgba(0, 35, 70, 0.24);
  }

  .br-banner-search .search-icon {
    order: 3;
    color: #fff;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: linear-gradient(160deg, #0a8ad8, #00629c);
    box-shadow: 0 6px 16px rgba(0, 70, 130, 0.35);
    flex-shrink: 0;
  }

  .br-banner-search .search-icon svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .br-banner-search .field input,
  .br-banner-search .field input[type="search"] {
    order: 1;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0;
    padding: 0 !important;
    font-size: 1.02rem !important;
    font-weight: 400 !important;
    color: #1d1d1b !important;
  }

  .br-banner-search .field input::placeholder {
    color: #8a939c !important;
    font-weight: 400 !important;
  }

  .br-banner-search .field .clear {
    order: 2;
    width: 2rem;
    height: 2rem;
    background: #eef3f7;
    color: #5b6570;
    font-size: 1.05rem;
  }

  @keyframes br-fade-in {
    to { opacity: 1; }
  }

  @keyframes br-hero-bg {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes br-orb-in {
    from {
      opacity: 0;
      transform: scale(0.7);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes br-shine-sweep {
    from {
      transform: translateX(-120%) skewX(-12deg);
      opacity: 0.9;
    }
    to {
      transform: translateX(120%) skewX(-12deg);
      opacity: 0;
    }
  }

  @keyframes br-word-in {
    to {
      opacity: 1;
      transform: translateY(0) rotateX(0);
    }
  }

  @keyframes br-lead-in {
    to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }

  @keyframes br-search-in {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes br-search-glow {
    0% {
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 14px 34px rgba(0, 35, 70, 0.22);
    }
    40% {
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 0 0 4px rgba(255, 255, 255, 0.35),
        0 18px 40px rgba(0, 35, 70, 0.28);
    }
    100% {
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 14px 34px rgba(0, 35, 70, 0.22);
    }
  }

  @keyframes br-mascot-left-in {
    from {
      opacity: 0;
      transform: translate(-72px, 48px) rotate(-10deg) scale(0.82);
    }
    70% {
      opacity: 1;
      transform: translate(4px, -6px) rotate(1.5deg) scale(1.02);
    }
    to {
      opacity: 1;
      transform: translate(0, 0) rotate(0) scale(1);
    }
  }

  @keyframes br-mascot-right-in {
    from {
      opacity: 0;
      transform: translate(72px, 48px) rotate(10deg) scale(0.82);
    }
    70% {
      opacity: 1;
      transform: translate(-4px, -6px) rotate(-1.5deg) scale(1.02);
    }
    to {
      opacity: 1;
      transform: translate(0, 0) rotate(0) scale(1);
    }
  }

  @keyframes br-wave-in {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes br-wave-swell {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-2.4%);
    }
  }

  @keyframes br-mascot-float-left {
    0%, 100% {
      transform: translate3d(0, 0, 0) rotate(-1.2deg);
    }
    35% {
      transform: translate3d(3px, -16px, 0) rotate(1.4deg);
    }
    70% {
      transform: translate3d(-2px, -9px, 0) rotate(-0.6deg);
    }
  }

  @keyframes br-bubble-pop {
    0% {
      opacity: 0;
      transform: translate3d(-10px, 18px, 0) scale(0.35) rotate(-8deg);
    }
    62% {
      opacity: 1;
      transform: translate3d(2px, -4px, 0) scale(1.08) rotate(1.5deg);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
  }

  @keyframes br-bubble-bob {
    0%,
    100% {
      transform: translate3d(0, 0, 0);
    }
    50% {
      transform: translate3d(0, -6px, 0);
    }
  }

  @keyframes br-bubble-glow {
    0%,
    100% {
      opacity: 0.35;
      transform: scale(1);
    }
    50% {
      opacity: 0.7;
      transform: scale(1.04);
    }
  }

  @keyframes br-bubble-shimmer {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  @keyframes br-mascot-float-right {
    0%, 100% {
      transform: translate3d(0, 0, 0) rotate(1deg);
    }
    40% {
      transform: translate3d(-4px, -18px, 0) rotate(-1.6deg);
    }
    65% {
      transform: translate3d(2px, -8px, 0) rotate(0.8deg);
    }
  }

  @keyframes br-mascot-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }

  .br-kicker {
    margin: 0 0 0.55rem !important;
    color: #f36f21 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    line-height: 1.2 !important;
  }

  .br-popular {
    overflow-x: clip;
    position: relative;
    z-index: 2;
    margin-top: -1px;
    padding-block: clamp(2.75rem, 6vw, 4.5rem);
    background: var(--br-surface, #dceaf4);
  }

  .br-popular .br-pop-slider,
  .br-popular .br-pop-track {
    min-width: 0;
    max-width: 100%;
  }

  .br-popular-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }

  .br-popular-head h2 {
    margin: 0 0 0.45rem;
    font-size: clamp(1.75rem, 3.2vw, 2.45rem);
    line-height: 1.08;
    font-weight: 750;
    color: #0f2a3d;
    letter-spacing: -0.02em;
  }

  .br-popular-lead {
    margin: 0;
    max-width: 36rem;
    color: #4a5d6c;
    font-size: 1.02rem;
    line-height: 1.5;
  }

  .br-popular-all {
    flex-shrink: 0;
  }

  .br-popular .br-pop-slider {
    position: relative;
    display: grid;
    gap: 1.1rem;
    width: 100%;
  }

  .br-popular .br-pop-track {
    --br-pop-gap: 1rem;
    display: grid;
    grid-auto-flow: column;
    /* 4 bredere kaarten vullen de container */
    grid-auto-columns: calc((100% - (3 * var(--br-pop-gap))) / 4);
    gap: var(--br-pop-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.2rem 0 0.35rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .br-popular .br-pop-track::-webkit-scrollbar {
    display: none;
  }

  .br-popular .br-pop-card {
    position: relative;
    scroll-snap-align: start;
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.55rem;
    padding: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-decoration: none;
    color: inherit;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .br-popular .br-pop-card:hover {
    transform: translateY(-3px);
  }

  .br-popular .br-pop-brand {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0.28rem 0.4rem;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 42, 61, 0.06);
    box-shadow: none;
    opacity: 1;
  }

  .br-popular .br-pop-brand-logo {
    display: block;
    /* +30% t.o.v. 1.25rem / 3.6rem */
    height: 1.625rem !important;
    width: auto !important;
    max-width: 4.7rem !important;
    max-height: 1.625rem !important;
    object-fit: contain;
    filter: none !important;
  }

  /* Cut-out PNG’s (transparante BG) op zacht blauw vlak */
  .br-popular .br-pop-media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1.08;
    min-height: 0;
    padding: 1.35rem 0.7rem 0.85rem;
    border-radius: 1.05rem;
    background:
      radial-gradient(ellipse 70% 55% at 50% 80%, rgba(0, 122, 195, 0.1), transparent 70%),
      linear-gradient(165deg, rgba(0, 122, 195, 0.06), rgba(15, 42, 61, 0.04));
    border: 1px solid rgba(0, 122, 195, 0.1);
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
  }

  .br-popular .br-pop-card:hover .br-pop-media {
    border-color: rgba(0, 122, 195, 0.22);
    box-shadow: 0 14px 28px rgba(0, 80, 140, 0.1);
  }

  .br-popular .br-pop-media::after {
    display: none;
  }

  .br-popular .br-pop-phone {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    max-width: 78%;
    height: auto;
    max-height: 11.5rem;
    object-fit: contain;
    object-position: center center;
    /* Lichte schaduw; geen harde cut-out op wit */
    filter: drop-shadow(0 8px 14px rgba(15, 42, 61, 0.12));
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .br-popular .br-pop-card:hover .br-pop-phone {
    transform: translateY(-4px) scale(1.03);
  }

  .br-popular .br-pop-body {
    display: grid;
    gap: 0.12rem;
    padding: 0 0.15rem;
    background: transparent;
    text-align: center;
  }

  .br-popular .br-pop-name {
    font-family: var(--font-display, inherit);
    font-weight: 750;
    font-size: 0.98rem;
    line-height: 1.2;
    color: #0f2a3d;
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .br-popular .br-pop-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 750;
    color: #007ac3;
  }

  .br-popular .br-pop-card:hover .br-pop-cta {
    color: #f36f21;
  }

  .br-popular .br-pop-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
  }

  .br-popular .br-pop-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.2rem;
  }

  .br-popular .br-pop-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 42, 61, 0.18);
    cursor: pointer;
    transition:
      width 0.22s ease,
      background 0.22s ease,
      transform 0.22s ease;
  }

  .br-popular .br-pop-dot.is-active {
    width: 1.35rem;
    background: #007ac3;
  }

  .br-popular .br-pop-dot:hover:not(.is-active) {
    background: rgba(0, 122, 195, 0.45);
  }

  .br-popular .br-pop-nav {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 42, 61, 0.12);
    background: #fff;
    color: #0f2a3d;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 42, 61, 0.08);
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
  }

  .br-popular .br-pop-nav:hover:not(:disabled) {
    background: #007ac3;
    color: #fff;
    border-color: #007ac3;
  }

  .br-popular .br-pop-nav:disabled {
    opacity: 0.35;
    cursor: default;
  }

  @media (max-width: 720px) {
    .br-popular-head {
      align-items: flex-start;
    }

    .br-popular .br-pop-track {
      --br-pop-gap: 0.65rem;
      grid-auto-columns: calc((100% - var(--br-pop-gap)) / 2);
    }

    .br-popular .br-pop-phone {
      max-height: 8.25rem;
    }
  }

  @media (min-width: 721px) and (max-width: 980px) {
    .br-popular .br-pop-track {
      --br-pop-gap: 0.85rem;
      grid-auto-columns: calc((100% - (2 * var(--br-pop-gap))) / 3);
    }
  }

  .br-about {
    position: relative;
    z-index: 1;
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(4rem, 8vw, 6.25rem);
    background: #fff;
    overflow: hidden;
  }

  .br-visit,
  .br-more,
  .br-pro {
    padding-block: clamp(3.75rem, 7vw, 5.75rem);
  }

  .br-visit,
  .br-more {
    background: var(--br-surface, #dceaf4);
  }

  .br-pro {
    background: #fff;
  }

  .br-about-inr,
  .br-visit-inr,
  .br-more-inr,
  .br-pro-inr {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: center;
  }

  .br-about-inr {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 3.75rem);
  }

  .br-about h2,
  .br-more h2,
  .br-pro h2 {
    margin: 0 0 1.15rem;
    font-size: clamp(1.9rem, 3.5vw, 2.85rem);
    line-height: 1.06;
    font-weight: 700;
    color: #1f2a33;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .br-visit h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.35rem, 1.85vw, 1.75rem);
    line-height: 1.2;
    font-weight: 700;
    color: #1f2a33;
    letter-spacing: -0.02em;
    text-wrap: nowrap;
    white-space: nowrap;
    max-width: none;
  }

  .br-about-copy > p:not(.br-kicker),
  .br-visit-copy > p:not(.br-kicker),
  .br-more p:not(.br-kicker),
  .br-pro p:not(.br-kicker):not(.br-pro-lead) {
    margin: 0 0 0.95rem;
    color: #5c6b76;
    font-size: 0.98rem;
    line-height: 1.62;
    font-weight: 300;
    max-width: 36rem;
  }

  .br-about-lead {
    color: #3d4a55 !important;
    font-size: 1.05rem !important;
    line-height: 1.58 !important;
    font-weight: 400 !important;
  }

  .br-about-points {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
  }

  .br-about-points li {
    position: relative;
    padding: 0.7rem 0.9rem 0.7rem 2.45rem;
    border-radius: 12px;
    background: rgba(0, 122, 195, 0.05);
    color: #24323d;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .br-about-points li::before {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: 50%;
    width: 0.42rem;
    height: 0.72rem;
    border-right: 2.5px solid #007ac3;
    border-bottom: 2.5px solid #007ac3;
    transform: translateY(-60%) rotate(40deg);
  }

  .br-about-visual {
    position: relative;
    justify-self: end;
    width: min(100%, 28.5rem);
  }

  .br-about-glow {
    position: absolute;
    inset: 12% -8% -8% 8%;
    border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
    background:
      radial-gradient(circle at 30% 30%, rgba(0, 122, 195, 0.22), transparent 55%),
      radial-gradient(circle at 80% 70%, rgba(243, 111, 33, 0.18), transparent 50%);
    filter: blur(8px);
    z-index: 0;
    animation: br-about-glow 7s ease-in-out infinite alternate;
  }

  .br-about-frame {
    position: relative;
    z-index: 1;
    margin: 0;
    border-radius: 1.65rem;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #0f2433;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.35) inset,
      0 28px 50px rgba(15, 40, 65, 0.18);
    transform: rotate(1.2deg);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .br-about-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(180deg, transparent 45%, rgba(8, 24, 40, 0.72) 100%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 40%);
  }

  .br-about-frame::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0.45rem;
    height: 38%;
    z-index: 3;
    background: linear-gradient(180deg, #f36f21, #007ac3);
    border-radius: 0 0 8px 0;
  }

  .br-about-visual:hover .br-about-frame {
    transform: rotate(0deg) translateY(-4px);
  }

  .br-about-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .br-about-visual:hover .br-about-frame img {
    transform: scale(1.04);
  }

  .br-about-chip {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 4;
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    color: #fff;
    background: rgba(10, 28, 44, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }

  .br-about-chip strong {
    font-size: 0.98rem;
    font-weight: 750;
    letter-spacing: -0.01em;
  }

  .br-about-chip span {
    font-size: 0.82rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
  }

  .br-about-frame-shift {
    position: relative;
    z-index: 1;
  }

  .br-about-float-shift {
    position: absolute;
    top: 1.1rem;
    left: -0.85rem;
    z-index: 5;
  }

  .br-about-float {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    display: grid;
    gap: 0.1rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 16px 34px rgba(15, 40, 65, 0.16);
    border: 1px solid rgba(0, 122, 195, 0.1);
    animation: br-about-float 4.5s ease-in-out infinite;
  }

  .br-about-float:hover,
  .br-about-float:focus-visible {
    filter: brightness(1.03);
    outline: 2px solid rgba(0, 122, 195, 0.35);
    outline-offset: 2px;
  }

  .br-about-float strong {
    color: #f36f21;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .br-about-float span {
    color: #1f2a33;
    font-size: 0.9rem;
    font-weight: 650;
  }

  @keyframes br-about-glow {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(8px, -10px) scale(1.05); }
  }

  @keyframes br-about-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  .br-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.15rem;
    min-width: 10.5rem;
    padding: 1rem 1.4rem;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(160deg, #0a8ad8, #00629c);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    box-shadow: 0 10px 22px rgba(0, 100, 170, 0.22);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  }

  .br-btn:hover {
    background: linear-gradient(160deg, #0690d8, #005687);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 100, 170, 0.28);
  }

  .br-btn-ghost {
    background: transparent;
    color: #007ac3;
    border: 1.5px solid rgba(0, 122, 195, 0.55);
    box-shadow: none;
  }

  .br-btn-ghost:hover {
    background: #007ac3;
    color: #fff;
    border-color: #007ac3;
    box-shadow: 0 10px 22px rgba(0, 100, 170, 0.2);
  }

  .br-more-inr {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
  }

  .br-more figure {
    margin: 0;
    text-align: center;
    justify-self: stretch;
  }

  .br-more figure img {
    width: min(100%, 36.5rem);
    height: auto;
    filter: drop-shadow(0 16px 28px rgba(20, 40, 60, 0.1));
  }

  .br-visit {
    position: relative;
    background: var(--br-surface, #dceaf4);
    overflow: visible;
  }

  .br-visit-inr {
    grid-template-columns: minmax(17rem, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 4vw, 3.25rem);
    column-gap: clamp(2rem, 4vw, 3.25rem);
    align-items: center;
  }

  .br-visit-visual {
    position: relative;
    margin: 0;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    overflow: visible;
    padding: 0 0 1rem;
  }

  .br-visit-copy {
    min-width: 0;
  }

  .br-visit-store {
    width: calc(100% - 1.35rem);
    margin-left: 1.35rem;
    height: auto;
    display: block;
    border-radius: 1.25rem;
    box-shadow: 0 22px 48px rgba(15, 42, 61, 0.12);
  }

  .br-visit-mascot-layer {
    position: absolute;
    left: 0;
    bottom: -1.05rem;
    width: min(9.25rem, 36%);
    z-index: 2;
    pointer-events: none;
  }

  .br-visit-mascot {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 16px rgba(0, 40, 80, 0.18));
    animation: br-mascot-float 5.8s ease-in-out infinite;
  }

  .br-usps {
    padding-block: 2.5rem 2.75rem;
    background: #fff;
  }

  .br-usps-scroll {
    width: 100%;
  }

  .br-usps-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    text-align: center;
  }

  .br-usp {
    margin: 0;
    display: grid;
    gap: 0.85rem;
    justify-items: center;
    padding: 1.15rem 1rem;
    border-radius: 1.25rem;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .br-usp:hover {
    background: rgba(0, 122, 195, 0.05);
    transform: translateY(-3px);
  }

  .br-usp-icon {
    display: grid;
    place-items: center;
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), transparent 50%),
      linear-gradient(160deg, rgba(0, 122, 195, 0.1), rgba(243, 111, 33, 0.08));
  }

  .br-usp-icon img {
    width: 4.75rem;
    height: auto;
  }

  .br-usp strong {
    font-size: 1.08rem;
    font-weight: 500;
    color: #1f2a33;
    max-width: 14rem;
    line-height: 1.3;
  }

  .br-more { background: var(--br-surface, #dceaf4); }

  .br-more-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
  }

  .br-pro {
    background: #fff;
  }

  .br-pro-lead {
    color: #007ac3 !important;
    font-style: italic;
    font-size: 1.12rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    max-width: 34rem;
  }

  .br-pro-board {
    min-width: 0;
    background: #fff;
    border: 1px solid rgba(15, 42, 61, 0.1);
    border-radius: 1.15rem;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    border-top: 3px solid #f36f21;
  }

  .br-pro-board-label {
    margin: 0;
    padding: 0.75rem 1.2rem 0.7rem;
    border-bottom: 1px solid rgba(15, 42, 61, 0.08);
    color: #c65a12;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .br-pro-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .br-pro-item {
    display: grid;
    gap: 0.22rem;
    align-content: start;
    padding: 0.9rem 1.2rem 0.95rem;
    border-right: 1px solid rgba(15, 42, 61, 0.08);
    border-bottom: 1px solid rgba(15, 42, 61, 0.08);
  }

  .br-pro-item:nth-child(2n) {
    border-right: 0;
  }

  .br-pro-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .br-pro-num {
    font-family: var(--font-display, inherit);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #f36f21;
    line-height: 1;
    margin-bottom: 0.15rem;
  }

  .br-pro-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
  }

  .br-pro-copy strong {
    font-family: var(--font-display, inherit);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f2a3d;
    line-height: 1.25;
  }

  .br-pro-copy span {
    font-size: 0.84rem;
    line-height: 1.4;
    color: #5a6b78;
  }

  @media (max-width: 1100px) {
    .br-mascot-left { left: 0; width: min(9.5rem, 18vw); }
    .br-mascot-right { right: 0; width: min(13.5rem, 24vw); }
    .br-visit h2 {
      font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    }
  }

  @media (max-width: 980px) {
    .br-about-inr,
    .br-visit-inr,
    .br-more-inr,
    .br-pro-inr { grid-template-columns: 1fr; }
    .br-about-visual { justify-self: stretch; width: 100%; max-width: 28rem; margin-inline: auto; order: -1; }
    .br-about-frame { transform: none; aspect-ratio: 16 / 11; }
    .br-about-float-shift { left: 0.75rem; top: 0.85rem; }
    .br-visit-visual {
      max-width: 32rem;
      margin-inline: auto;
      order: -1;
    }
    .br-visit h2 {
      white-space: normal;
      text-wrap: balance;
      font-size: clamp(1.55rem, 5.5vw, 2rem);
    }
    .br-visit-store {
      width: calc(100% - 1.15rem);
      margin-left: 1.15rem;
    }
    .br-visit-mascot-layer {
      left: 0;
      bottom: -0.85rem;
      width: min(8.25rem, 34%);
    }
    .br-banner-cnt { padding-bottom: 4.5rem; }
    .br-mascot-layer { bottom: 1.6rem; }
    .br-banner-wave { height: 4.25rem; }
  }

  @media (max-width: 720px) {
    .br-usps {
      padding-block: 1.15rem 1.35rem;
    }
    .br-usps-scroll {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 0.15rem;
    }
    .br-usps-scroll::-webkit-scrollbar {
      display: none;
    }
    .br-usps-row.container {
      display: flex;
      gap: 0.65rem;
      max-width: none;
      width: max-content;
      margin: 0;
      padding-inline: 1rem;
      box-sizing: border-box;
    }
    .br-usp {
      flex: 0 0 min(11.5rem, 72vw);
      scroll-snap-align: start;
      gap: 0.4rem;
      padding: 0.65rem 0.7rem;
      border-radius: 1rem;
      background: rgba(0, 122, 195, 0.04);
    }
    .br-usp:hover {
      transform: none;
    }
    .br-usp-icon {
      width: 3.4rem;
      height: 3.4rem;
    }
    .br-usp-icon img {
      width: 2.55rem;
    }
    .br-usp strong {
      font-size: 0.84rem;
      font-weight: 650;
      max-width: none;
      line-height: 1.25;
    }
    .br-banner { --br-hero-h: clamp(28rem, 80vh, 36rem); }
    /* Geen negatieve left/right (die veroorzaken horizontale scroll) —
       padding van de inner naar de copy, mascottes op 0 = schermrand */
    .br-banner-inner {
      padding-top: 5rem;
      padding-inline: 0;
    }
    .br-banner-cnt {
      padding-bottom: 4rem;
      padding-inline: 1.25rem;
    }
    .br-mascot-left {
      width: 5.75rem;
      left: 0;
      bottom: 1.35rem;
      z-index: 6;
    }
    .br-mascot-right {
      width: 7.75rem;
      right: 0;
      bottom: 1.35rem;
    }
    /* Naast de mascotte i.p.v. erboven — anders verdwijnt hij onder de zoekbalk */
    .br-mascot-bubble {
      left: calc(100% - 0.2rem);
      right: auto;
      top: 0.35rem;
      bottom: auto;
      margin-inline: 0;
      max-width: 6.6rem;
      padding: 0.38rem 0.5rem 0.4rem;
      font-size: 0.64rem;
      transform-origin: 0% 50%;
      z-index: 7;
    }

    .br-mascot-bubble::before {
      left: -0.42rem;
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
      border-width: 0.38rem 0.48rem 0.38rem 0;
      border-color: transparent var(--br-bubble-bg) transparent transparent;
      filter: drop-shadow(-1px 1px 1px rgba(0, 30, 60, 0.08));
    }
    .br-pro-list {
      grid-template-columns: 1fr;
    }

    .br-pro-item {
      padding: 0.9rem 1.05rem;
      border-right: 0;
    }

    .br-pro-item:nth-last-child(-n + 2) {
      border-bottom: 1px solid rgba(15, 42, 61, 0.08);
    }

    .br-pro-item:last-child {
      border-bottom: 0;
    }
  }

  @media (max-width: 480px) {
    .br-mascot-left {
      width: 4.6rem;
      left: 0;
    }
    .br-mascot-right {
      width: 6rem;
      right: 0;
    }
    .br-banner-cnt h1 { font-size: 1.9rem; }
    .br-mascot-bubble {
      max-width: 5.9rem;
      font-size: 0.58rem;
      left: calc(100% - 0.15rem);
      top: 0.2rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .br-banner-orb,
    .br-banner-shine,
    .br-banner-img img,
    .br-banner-img::after,
    .br-banner-wave,
    .br-wave-back,
    .br-mascot,
    .br-mascot-bubble,
    .br-mascot-bubble-text,
    .br-hero-word,
    .br-hero-place,
    .br-hero-place-track,
    .br-hero-lead,
    .br-banner-search,
    .br-banner-search .field,
    .br-visit-mascot {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }
    .br-banner-img img {
      opacity: 1 !important;
    }
    .br-about-glow,
    .br-about-float {
      animation: none !important;
    }
    .br-about-visual:hover .br-about-frame,
    .br-about-visual:hover .br-about-frame img,
    .br-usp:hover { transform: none; }
  }

/* --- src/components/budgetrepair/BudgetRepairAbout.astro --- */
.br-pg-hero {
    --br-ease: cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    isolation: isolate;
    overflow: clip;
    color: #fff;
    background:
      radial-gradient(ellipse 55% 60% at 12% 78%, rgba(255, 255, 255, 0.14), transparent 58%),
      radial-gradient(ellipse 50% 55% at 88% 72%, rgba(255, 180, 80, 0.14), transparent 55%),
      linear-gradient(180deg, #007ac3 0%, #007ac3 42%, #0068a8 100%);
    z-index: 2;
  }

  .br-pg-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(2px);
  }

  .br-pg-hero-orb-a {
    width: min(24rem, 50vw);
    height: min(24rem, 50vw);
    left: -8%;
    top: -20%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 68%);
  }

  .br-pg-hero-orb-b {
    width: min(20rem, 42vw);
    height: min(20rem, 42vw);
    right: -6%;
    bottom: 10%;
    background: radial-gradient(circle, rgba(243, 111, 33, 0.22), transparent 70%);
  }

  .br-pg-hero-shine {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.08) 48%, transparent 58%);
    pointer-events: none;
  }

  .br-pg-hero-frame {
    position: relative;
    z-index: 2;
    padding-top: var(--page-crumbs-pad-y, 0.85rem);
    padding-bottom: clamp(3.25rem, 6vw, 4.75rem);
  }

  .br-pg-crumbs {
    margin: 0 0 1.15rem;
  }

  .br-pg-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.72);
  }

  .br-pg-crumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 0.45rem;
    opacity: 0.55;
  }

  .br-pg-crumbs a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
  }

  .br-pg-crumbs a:hover {
    color: #fff;
    text-decoration: underline;
  }

  .br-pg-crumbs [aria-current="page"] {
    color: #fff;
    font-weight: 600;
  }

  .br-pg-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
  }

  .br-pg-brand {
    margin: 0 0 0.65rem;
    font-family: var(--font-display, inherit);
    font-size: clamp(1.65rem, 3.4vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 10px 28px rgba(0, 40, 80, 0.25);
  }

  .br-pg-hero-copy h1 {
    margin: 0 0 1rem;
    max-width: 18ch;
    font-size: clamp(1.85rem, 3.8vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 750;
    text-wrap: balance;
  }

  .br-pg-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.7rem);
    animation: br-pg-word-in 0.7s var(--br-ease) forwards;
    animation-delay: calc(0.08s + var(--i) * 0.045s);
  }

  .br-pg-lead {
    margin: 0;
    max-width: 36rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.55;
    font-weight: 350;
  }

  .br-pg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .br-pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10.5rem;
    padding: 1rem 1.4rem;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(160deg, #0a8ad8, #00629c);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    box-shadow: 0 10px 22px rgba(0, 60, 110, 0.22);
    transition:
      transform 0.25s var(--br-ease),
      box-shadow 0.25s ease,
      background 0.25s ease,
      color 0.25s ease,
      border-color 0.25s ease;
  }

  .br-pg-hero .br-pg-btn {
    background: linear-gradient(160deg, #ff9a4d, #f36f21 55%, #d85a12);
    box-shadow: 0 12px 26px rgba(180, 70, 10, 0.28);
  }

  .br-pg-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 100, 170, 0.28);
  }

  .br-pg-hero .br-pg-btn:hover {
    box-shadow: 0 14px 28px rgba(180, 70, 10, 0.34);
  }

  .br-pg-btn-ghost {
    background: transparent;
    color: #007ac3;
    border: 1.5px solid rgba(0, 122, 195, 0.55);
    box-shadow: none;
  }

  .br-pg-hero .br-pg-btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
  }

  .br-pg-btn-ghost:hover {
    background: #007ac3;
    color: #fff;
    border-color: #007ac3;
  }

  .br-pg-hero .br-pg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
  }

  .br-pg-btn-orange {
    background: linear-gradient(160deg, #ff9a4d, #f36f21 55%, #d85a12);
    box-shadow: 0 12px 26px rgba(180, 70, 10, 0.28);
  }

  .br-pg-btn-orange:hover {
    box-shadow: 0 14px 28px rgba(180, 70, 10, 0.34);
  }

  .br-pg-hero-mascot {
    position: relative;
    justify-self: end;
    width: min(100%, 17rem);
    margin-top: 3.25rem;
    margin-bottom: -0.5rem;
    overflow: visible;
    filter: drop-shadow(0 18px 28px rgba(0, 40, 80, 0.28));
    animation: br-pg-mascot-in 1s var(--br-ease) 0.25s both;
  }

  .br-pg-hero-mascot img {
    display: block;
    width: 100%;
    height: auto;
  }

  .br-pg-mascot-bubble {
    --br-bubble-bg: #fff;
    position: absolute;
    left: 50%;
    bottom: calc(100% - 0.15rem);
    z-index: 3;
    width: 10.75rem;
    margin: 0;
    padding: 0.72rem 0.85rem 0.78rem;
    border-radius: 1.2rem;
    background: var(--br-bubble-bg);
    color: #0c3550;
    font-family: var(--font-display, inherit);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    box-shadow:
      0 14px 30px rgba(0, 30, 60, 0.24),
      0 0 0 1px rgba(0, 122, 195, 0.1);
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    opacity: 0;
    animation:
      br-pg-bubble-pop 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) 0.9s both,
      br-pg-bubble-bob 3.4s ease-in-out 1.75s infinite;
  }

  .br-pg-mascot-bubble::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.52rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.55rem 0.45rem 0 0.45rem;
    border-color: var(--br-bubble-bg) transparent transparent transparent;
    transform: translateX(-50%);
    filter: drop-shadow(0 3px 2px rgba(0, 30, 60, 0.08));
  }

  .br-pg-mascot-bubble-text {
    display: block;
    color: #0c3550;
  }

  .br-pg-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: clamp(2.6rem, 5.5vw, 3.75rem);
    z-index: 3;
    display: block;
    pointer-events: none;
    color: var(--br-surface, #eef5fa);
  }

  .br-pg-kicker {
    margin: 0 0 0.55rem;
    color: #f36f21;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
  }

  .br-pg-kicker-light {
    color: rgba(255, 255, 255, 0.82);
  }

  .br-pg-intro,
  .br-pg-promises,
  .br-pg-offer,
  .br-pg-visit {
    position: relative;
    z-index: 1;
  }

  .br-pg-intro {
    margin-top: -1px;
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.25rem, 6vw, 5rem);
    background:
      radial-gradient(ellipse 50% 60% at 0% 0%, rgba(0, 122, 195, 0.07), transparent 55%),
      linear-gradient(180deg, #eef5fa 0%, #f7fafc 50%, #fff 100%);
  }

  .br-pg-intro-grid,
  .br-pg-offer-grid,
  .br-pg-visit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: center;
  }

  .br-pg-copy h2,
  .br-pg-section-head h2,
  .br-pg-cta-inner h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 3.2vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #1f2a33;
    text-wrap: balance;
  }

  .br-pg-copy > p:not(.br-pg-kicker):not(.br-pg-lead-copy),
  .br-pg-section-head > p,
  .br-pg-cta-inner p {
    margin: 0 0 0.95rem;
    color: #5c6b76;
    font-size: 0.98rem;
    line-height: 1.62;
    font-weight: 300;
    max-width: 36rem;
  }

  .br-pg-lead-copy {
    color: #3d4a55 !important;
    font-size: 1.05rem !important;
    line-height: 1.58 !important;
    font-weight: 400 !important;
  }

  .br-pg-bullets {
    list-style: none;
    margin: 1.35rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
  }

  .br-pg-bullets li {
    position: relative;
    padding-left: 1.55rem;
    color: #3d4a55;
    font-weight: 500;
  }

  .br-pg-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffb06a, #f36f21 70%);
  }

  .br-pg-visual {
    position: relative;
    justify-self: end;
    width: min(100%, 28rem);
  }

  .br-pg-glow {
    position: absolute;
    inset: 8% 4% 4%;
    border-radius: 2rem;
    background: radial-gradient(circle at 50% 40%, rgba(0, 122, 195, 0.22), transparent 65%);
    filter: blur(18px);
    animation: br-pg-glow 7s ease-in-out infinite alternate;
  }

  .br-pg-frame-shift {
    position: relative;
    z-index: 1;
  }

  .br-pg-frame {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 1.6rem;
    aspect-ratio: 4 / 5;
    background: #0f2433;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.35) inset,
      0 22px 48px rgba(15, 42, 61, 0.18);
    transform: rotate(-1.2deg);
    transition: transform 0.45s var(--br-ease);
  }

  .br-pg-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(180deg, transparent 45%, rgba(8, 24, 40, 0.72) 100%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 40%);
  }

  .br-pg-frame::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0.45rem;
    height: 38%;
    z-index: 3;
    background: linear-gradient(180deg, #f36f21, #007ac3);
    border-radius: 0 0 8px 0;
  }

  .br-pg-visual:hover .br-pg-frame {
    transform: rotate(0deg) translateY(-4px);
  }

  .br-pg-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    transition: transform 0.6s var(--br-ease);
  }

  .br-pg-visual:hover .br-pg-frame img {
    transform: scale(1.04);
  }

  .br-pg-chip {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    gap: 0.1rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: rgba(15, 42, 61, 0.78);
    color: #fff;
    backdrop-filter: blur(8px);
  }

  .br-pg-chip strong {
    font-size: 0.95rem;
    letter-spacing: -0.01em;
  }

  .br-pg-chip span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.78);
  }

  .br-pg-float {
    position: absolute;
    left: -0.35rem;
    top: 1rem;
    z-index: 2;
    display: grid;
    gap: 0.1rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 42, 61, 0.14);
    animation: br-pg-float 4.5s ease-in-out infinite;
  }

  .br-pg-float strong {
    color: #007ac3;
    font-size: 0.92rem;
  }

  .br-pg-float span {
    color: #5c6b76;
    font-size: 0.78rem;
  }

  .br-pg-promises {
    padding-block: clamp(3rem, 6vw, 4.75rem);
    background:
      radial-gradient(ellipse 45% 55% at 100% 0%, rgba(243, 111, 33, 0.06), transparent 55%),
      #fff;
  }

  .br-pg-section-head {
    max-width: 38rem;
    margin-bottom: 1.75rem;
  }

  .br-pg-promise-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .br-pg-promise {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    padding: 1.1rem 1rem 1.15rem;
    border-radius: 1.15rem;
    background: linear-gradient(180deg, #fff 0%, #f7fafc 100%);
    border: 1px solid rgba(15, 42, 61, 0.08);
    box-shadow: 0 10px 24px rgba(15, 42, 61, 0.05);
    transition:
      transform 0.28s var(--br-ease),
      box-shadow 0.28s ease,
      border-color 0.28s ease;
  }

  .br-pg-promise:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 122, 195, 0.22);
    box-shadow: 0 16px 32px rgba(0, 80, 140, 0.1);
  }

  .br-pg-promise-icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.85rem;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #2aa0e0 0%, #007ac3 55%, #045f96 100%);
    box-shadow:
      0 8px 16px rgba(0, 122, 195, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  .br-pg-promise.is-bolt .br-pg-promise-icon,
  .br-pg-promise.is-tag .br-pg-promise-icon {
    background: linear-gradient(145deg, #ff9a4d 0%, #f36f21 55%, #d85a12 100%);
    box-shadow:
      0 8px 16px rgba(243, 111, 33, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  .br-pg-promise-icon svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  .br-pg-promise-copy {
    display: grid;
    gap: 0.18rem;
    padding-top: 0.1rem;
  }

  .br-pg-promise-copy strong {
    font-size: 0.98rem;
    font-weight: 750;
    letter-spacing: -0.015em;
    color: #0f2a3d;
    line-height: 1.25;
  }

  .br-pg-promise-copy span {
    font-size: 0.86rem;
    line-height: 1.35;
    color: #5a6b78;
  }

  .br-pg-offer {
    padding-block: clamp(3rem, 6vw, 5rem);
    background:
      radial-gradient(ellipse 50% 60% at 0% 50%, rgba(0, 122, 195, 0.07), transparent 55%),
      #f7fafc;
  }

  .br-pg-service-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .br-pg-service-grid li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.95rem 1rem;
    border-radius: 1.1rem;
    background: #fff;
    border: 1px solid rgba(15, 42, 61, 0.08);
    box-shadow: 0 8px 20px rgba(15, 42, 61, 0.04);
    transition:
      transform 0.25s var(--br-ease),
      border-color 0.25s ease,
      box-shadow 0.25s ease;
  }

  .br-pg-service-grid li:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 122, 195, 0.2);
    box-shadow: 0 14px 28px rgba(0, 80, 140, 0.08);
  }

  .br-pg-service-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    display: grid;
    place-items: center;
    color: #007ac3;
    background: rgba(0, 122, 195, 0.1);
  }

  .br-pg-service-icon svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .br-pg-service-grid strong {
    display: block;
    font-size: 0.95rem;
    color: #0f2a3d;
    letter-spacing: -0.01em;
  }

  .br-pg-service-grid li span span {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.82rem;
    color: #5a6b78;
    line-height: 1.35;
  }

  .br-pg-visit {
    padding-block: clamp(3rem, 6vw, 5rem);
    background: #fff;
  }

  .br-pg-visit-visual {
    position: relative;
    margin: 0;
    max-width: 32rem;
  }

  .br-pg-visit-store {
    display: block;
    width: calc(100% - 1.15rem);
    margin-left: 1.15rem;
    height: auto;
    filter: drop-shadow(0 18px 36px rgba(15, 42, 61, 0.12));
  }

  .br-pg-visit-mascot {
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    width: min(6.5rem, 28%);
  }

  .br-pg-visit-mascot img {
    display: block;
    width: 100%;
    height: auto;
  }

  .br-pg-cta {
    background:
      radial-gradient(ellipse 40% 80% at 100% 50%, rgba(255, 180, 80, 0.18), transparent 55%),
      linear-gradient(120deg, #00629c, #007ac3 55%, #0a8ad8);
    color: #fff;
    padding-block: clamp(2.5rem, 5vw, 3.25rem);
  }

  .br-pg-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .br-pg-cta-inner h2 {
    color: #fff;
    margin-bottom: 0.55rem;
  }

  .br-pg-cta-inner p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
  }

  @keyframes br-pg-word-in {
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes br-pg-mascot-in {
    from {
      opacity: 0;
      transform: translateY(1.25rem) scale(0.96);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes br-pg-bubble-pop {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(10px) scale(0.72);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }
  }

  @keyframes br-pg-bubble-bob {
    0%,
    100% {
      transform: translateX(-50%) translateY(0);
    }
    50% {
      transform: translateX(-50%) translateY(-5px);
    }
  }

  @keyframes br-pg-glow {
    from { opacity: 0.55; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1.04); }
  }

  @keyframes br-pg-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.45rem); }
  }

  @media (max-width: 1100px) {
    .br-pg-promise-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 900px) {
    .br-pg-hero-row,
    .br-pg-intro-grid,
    .br-pg-offer-grid,
    .br-pg-visit-grid {
      grid-template-columns: 1fr;
    }

    .br-pg-hero-mascot {
      justify-self: center;
      width: min(11rem, 42vw);
      order: -1;
      margin-bottom: 0.25rem;
    }

    .br-pg-mascot-bubble {
      width: 9.5rem;
      font-size: 0.8rem;
      padding: 0.65rem 0.75rem 0.7rem;
    }

    .br-pg-hero-copy h1 {
      max-width: none;
    }

    .br-pg-visual,
    .br-pg-visit-visual {
      justify-self: center;
      width: 100%;
    }

    .br-pg-frame {
      transform: none;
      aspect-ratio: 4 / 5;
      max-width: 22rem;
      margin-inline: auto;
    }

    .br-pg-float {
      left: 0.75rem;
      top: 0.85rem;
    }

    .br-pg-visit-visual {
      order: -1;
    }
  }

  @media (max-width: 640px) {
    .br-pg-promise-grid,
    .br-pg-service-grid {
      grid-template-columns: 1fr;
    }

    .br-pg-btn {
      width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .br-pg-word,
    .br-pg-hero-mascot,
    .br-pg-mascot-bubble,
    .br-pg-glow,
    .br-pg-float {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .br-pg-mascot-bubble {
      transform: translateX(-50%) !important;
    }
  }

/* --- src/components/budgetrepair/BudgetRepairFaq.astro --- */
.br-faq-list {
    --br-ease: cubic-bezier(0.22, 1, 0.36, 1);
    padding: clamp(1.35rem, 3vw, 2rem) 0 clamp(3rem, 6vw, 4.5rem);
    background:
      radial-gradient(ellipse 50% 40% at 100% 0%, rgba(0, 122, 195, 0.08), transparent 55%),
      #f4f8fb;
  }

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

  .br-faq-head {
    max-width: 44rem;
    margin: 0 0 1.5rem;
  }

  .br-faq-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #007ac3;
  }

  .br-faq-head h1 {
    margin: 0;
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #152028;
  }

  .br-faq-lead {
    margin: 0.65rem 0 0;
    color: #5c6b76;
    font-size: 1.05rem;
    line-height: 1.55;
  }

  .br-faq-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 1.2rem;
    background: #fff;
    border: 1px solid rgba(15, 45, 70, 0.12);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(20, 40, 60, 0.05);
  }

  .br-faq-search-icon {
    display: inline-flex;
    margin-left: 1rem;
    color: #007ac3;
    flex-shrink: 0;
  }

  .br-faq-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.95rem 0.85rem;
    font: inherit;
    font-size: 1rem;
    color: #152028;
    outline: none;
  }

  .br-faq-search input::placeholder {
    color: #8a99a6;
  }

  .br-faq-search-clear {
    margin-right: 0.45rem;
    border: 0;
    background: rgba(0, 122, 195, 0.1);
    color: #007ac3;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
  }

  .br-faq-search:focus-within {
    border-color: rgba(0, 122, 195, 0.45);
    box-shadow: 0 0 0 4px rgba(0, 122, 195, 0.12);
  }

  .br-faq-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.95rem;
  }

  .br-faq-chip {
    border: 1px solid rgba(15, 45, 70, 0.12);
    background: #fff;
    color: #2a3a46;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .br-faq-chip:hover {
    border-color: rgba(0, 122, 195, 0.4);
    color: #007ac3;
  }

  .br-faq-chip.is-active {
    background: #007ac3;
    border-color: #007ac3;
    color: #fff;
  }

  .br-faq-count {
    margin: 0.75rem 0 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: #6a7a86;
  }

  .br-faq-empty {
    margin: 0;
    padding: 1.15rem 1.2rem;
    border-radius: 16px;
    background: #fff;
    border: 1px dashed rgba(0, 122, 195, 0.28);
    color: #5c6b76;
    line-height: 1.5;
  }

  .br-faq-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.35rem;
  }

  .br-faq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10rem;
    padding: 0.95rem 1.3rem;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(160deg, #ff9a4d, #f36f21 55%, #d85a12);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 26px rgba(180, 70, 10, 0.28);
    transition: transform 0.22s var(--br-ease), box-shadow 0.22s ease, background 0.22s ease;
  }

  .br-faq-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(180, 70, 10, 0.34);
  }

  .br-faq-btn.is-ghost-dark {
    background: transparent;
    color: #007ac3;
    border: 1.5px solid rgba(0, 122, 195, 0.45);
    box-shadow: none;
  }

  .br-faq-btn.is-ghost-dark:hover {
    background: #007ac3;
    color: #fff;
    border-color: #007ac3;
  }

  .br-faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
  }

  .br-faq-items {
    display: grid;
    gap: 0.65rem;
  }

  .br-faq-item {
    border: 1px solid rgba(15, 45, 70, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(20, 40, 60, 0.04);
    overflow: hidden;
  }

  .br-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    color: #152028;
  }

  .br-faq-item summary::-webkit-details-marker {
    display: none;
  }

  .br-faq-summary-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    min-width: 0;
  }

  .br-faq-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 122, 195, 0.1);
    color: #007ac3;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .br-faq-plus {
    position: relative;
    width: 1.55rem;
    height: 1.55rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(0, 122, 195, 0.1);
    color: #007ac3;
  }

  .br-faq-plus::before,
  .br-faq-plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .br-faq-plus::before {
    width: 0.7rem;
    height: 2px;
  }

  .br-faq-plus::after {
    width: 2px;
    height: 0.7rem;
  }

  .br-faq-item[open] .br-faq-plus::after {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0);
  }

  .br-faq-item[open] {
    border-color: rgba(0, 122, 195, 0.28);
    box-shadow: 0 14px 28px rgba(0, 80, 140, 0.08);
  }

  .br-faq-item p {
    margin: 0;
    padding: 0 1.15rem 1.15rem;
    color: #5c6b76;
    line-height: 1.55;
    font-size: 0.98rem;
  }

  .br-faq-aside {
    position: sticky;
    top: calc(var(--site-header-offset, 5.5rem) + 1rem);
    padding: 1.25rem 1.2rem 1.35rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(0, 122, 195, 0.14);
    box-shadow: 0 14px 30px rgba(15, 42, 61, 0.06);
  }

  .br-faq-aside-kicker {
    margin: 0 0 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #007ac3;
  }

  .br-faq-aside h3 {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: #152028;
  }

  .br-faq-aside-text {
    margin: 0.55rem 0 0;
    color: #5c6b76;
    line-height: 1.5;
    font-size: 0.95rem;
  }

  .br-faq-aside-links {
    display: grid;
    gap: 0.55rem;
    margin-top: 1.1rem;
  }

  .br-faq-aside-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: linear-gradient(160deg, #ff9a4d, #f36f21 55%, #d85a12);
    color: #fff;
  }

  .br-faq-aside-link:hover {
    filter: brightness(1.05);
  }

  .br-faq-aside-link.is-wa {
    background: linear-gradient(160deg, #2ad36a, #1fad54);
  }

  .br-faq-aside-link.is-soft {
    background: transparent;
    color: #007ac3;
    border: 1.5px solid rgba(0, 122, 195, 0.45);
  }

  .br-faq-aside-link.is-soft:hover {
    background: #007ac3;
    color: #fff;
  }

  .br-faq-cta {
    margin-top: 2.25rem;
    padding: 1.35rem 1.4rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff 0%, #eef6fb 100%);
    border: 1px solid rgba(0, 122, 195, 0.14);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .br-faq-cta h2 {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: #152028;
  }

  .br-faq-cta p {
    margin: 0.35rem 0 0;
    color: #5c6b76;
    max-width: 34rem;
    line-height: 1.45;
  }

  .br-faq-cta .br-faq-actions {
    margin-top: 0;
  }

  @media (max-width: 900px) {
    .br-faq-layout {
      grid-template-columns: 1fr;
    }

    .br-faq-aside {
      position: static;
    }
  }

  @media (max-width: 720px) {
    .br-faq-cta {
      padding: 1.15rem;
    }

    .br-faq-btn {
      width: 100%;
    }

    .br-faq-search-clear {
      font-size: 0;
      width: 2rem;
      height: 2rem;
      padding: 0;
      position: relative;
    }

    .br-faq-search-clear::before,
    .br-faq-search-clear::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0.7rem;
      height: 2px;
      background: currentColor;
    }

    .br-faq-search-clear::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .br-faq-search-clear::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }

/* --- src/components/RepairHowItWorks.astro --- */
.repair-how {
    --rh-accent: #f08119;
    --rh-ink: #152028;
    --rh-muted: #5c6b76;
    padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(3.25rem, 6vw, 4.75rem);
    background:
      radial-gradient(ellipse 45% 40% at 0% 100%, rgba(240, 129, 25, 0.08), transparent 55%),
      #fff;
    border-top: 1px solid rgba(21, 32, 40, 0.06);
  }

  .repair-how.is-br {
    --rh-accent: #007ac3;
    background:
      radial-gradient(ellipse 45% 40% at 100% 100%, rgba(0, 122, 195, 0.09), transparent 55%),
      #fff;
  }

  .repair-how-inner {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
  }

  .repair-how-head {
    display: grid;
    gap: 0.45rem;
    max-width: 40rem;
  }

  .repair-how-kicker {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rh-accent);
  }

  .repair-how-head h2 {
    margin: 0;
    font-size: clamp(1.45rem, 2.8vw, 1.9rem);
    letter-spacing: -0.03em;
    color: var(--rh-ink);
    line-height: 1.15;
  }

  .repair-how-head p {
    margin: 0;
    color: var(--rh-muted);
    line-height: 1.55;
  }

  .repair-how-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  @media (min-width: 800px) {
    .repair-how-steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.25rem;
    }
  }

  .repair-how-step {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    padding: 1.25rem 1.2rem 1.35rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(21, 32, 40, 0.08);
    background: linear-gradient(180deg, #fafbfc, #fff);
  }

  .repair-how-num {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--rh-accent);
  }

  .repair-how-step strong {
    font-size: 1.08rem;
    letter-spacing: -0.02em;
    color: var(--rh-ink);
  }

  .repair-how-step span:last-child {
    color: var(--rh-muted);
    line-height: 1.55;
    font-size: 0.95rem;
  }

  .repair-how-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
  }

  .repair-how-cta .btn {
    min-width: 9.5rem;
    text-decoration: none;
  }

/* --- src/components/RepairPageFaq.astro --- */
.repair-faq {
    --rf-accent: #f08119;
    --rf-ink: #152028;
    --rf-muted: #5c6b76;
    --rf-ease: cubic-bezier(0.22, 1, 0.36, 1);
    padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
    background:
      radial-gradient(ellipse 50% 40% at 100% 0%, rgba(240, 129, 25, 0.08), transparent 55%),
      #f7f9fb;
    border-top: 1px solid rgba(21, 32, 40, 0.06);
  }

  .repair-faq.is-br {
    --rf-accent: #007ac3;
    background:
      radial-gradient(ellipse 50% 40% at 0% 0%, rgba(0, 122, 195, 0.09), transparent 55%),
      #f4f8fb;
  }

  .repair-faq-inner {
    display: grid;
    gap: 1.65rem;
  }

  .repair-faq-list {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 1fr;
    width: 100%;
  }

  @media (min-width: 900px) {
    .repair-faq-list {
      grid-template-columns: 1fr 1fr;
      gap: 0.85rem 1.15rem;
    }

    .repair-faq-head {
      max-width: 42rem;
    }
  }

  .repair-faq-head {
    display: grid;
    gap: 0.45rem;
  }

  .repair-faq-kicker {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rf-accent);
  }

  .repair-faq-head h2 {
    margin: 0;
    font-size: clamp(1.45rem, 2.8vw, 1.9rem);
    letter-spacing: -0.03em;
    color: var(--rf-ink);
    line-height: 1.15;
  }

  .repair-faq-head p {
    margin: 0;
    color: var(--rf-muted);
    line-height: 1.55;
    max-width: 38rem;
  }

  .repair-faq-item {
    border: 1px solid rgba(21, 32, 40, 0.1);
    border-radius: 14px;
    background: #fff;
    padding: 0.15rem 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .repair-faq-item[open] {
    border-color: color-mix(in srgb, var(--rf-accent) 35%, #e4e8ec);
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
  }

  .repair-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    padding: 0.95rem 1.05rem;
    font-weight: 700;
    color: var(--rf-ink);
  }

  .repair-faq-item summary::-webkit-details-marker {
    display: none;
  }

  .repair-faq-plus {
    position: relative;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }

  .repair-faq-plus::before,
  .repair-faq-plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--rf-accent);
    border-radius: 2px;
    transform: translate(-50%, -50%);
  }

  .repair-faq-plus::before {
    width: 100%;
    height: 2px;
  }

  .repair-faq-plus::after {
    width: 2px;
    height: 100%;
    transition: transform 0.2s var(--rf-ease);
  }

  .repair-faq-item[open] .repair-faq-plus::after {
    transform: translate(-50%, -50%) scaleY(0);
  }

  .repair-faq-item p {
    margin: 0;
    padding: 0 1.05rem 1rem;
    color: var(--rf-muted);
    line-height: 1.55;
  }

  .repair-faq-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.35rem;
  }

  .repair-faq-foot p {
    margin: 0;
    color: var(--rf-muted);
    max-width: 28rem;
    line-height: 1.5;
  }

  .repair-faq-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
  }

  .repair-faq-actions .btn {
    min-width: 8.75rem;
    text-decoration: none;
  }

/* --- src/components/PageCrumbs.astro --- */
.page-crumbs-bar,
  .page-crumbs-plain {
    padding-block: var(--page-crumbs-pad-y, 0.85rem);
  }

  .page-crumbs-bar {
    background: #007ac3;
  }

  .page-crumbs-plain {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 248, 250, 0.88) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--ms-line) 85%, transparent);
  }

  .page-crumbs-nav {
    font-family: var(--font-display);
    letter-spacing: 0.01em;
  }

  .page-crumbs-nav ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  .page-crumbs-nav li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .page-crumbs-nav li:not(:last-child)::after {
    content: "";
    width: 0.3rem;
    height: 0.3rem;
    margin-inline: 0.55rem;
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.45;
    flex-shrink: 0;
  }

  .page-crumbs-nav a,
  .page-crumbs-nav span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: min(34ch, 62vw);
    text-decoration: none;
  }

  .crumb-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .crumb-home {
    flex-shrink: 0;
    opacity: 0.9;
  }

  .page-crumbs-nav a {
    transition: color 0.15s ease, opacity 0.15s ease;
  }

  .page-crumbs-nav a:hover {
    text-decoration: none;
  }

  .page-crumbs-nav a:hover .crumb-label {
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .page-crumbs-nav [aria-current="page"] {
    font-weight: 600;
  }

  .page-crumbs-bar .page-crumbs-nav,
  .tone-on-dark {
    color: rgba(255, 255, 255, 0.68);
  }

  .page-crumbs-bar .page-crumbs-nav a,
  .tone-on-dark a {
    color: rgba(255, 255, 255, 0.9);
  }

  .page-crumbs-bar .page-crumbs-nav a:hover,
  .tone-on-dark a:hover {
    color: #fff;
  }

  .page-crumbs-bar .page-crumbs-nav [aria-current="page"],
  .tone-on-dark [aria-current="page"] {
    color: #fff;
  }

  .page-crumbs-bar .page-crumbs-nav li:not(:last-child)::after,
  .tone-on-dark li:not(:last-child)::after {
    opacity: 0.55;
  }

  .tone-on-light {
    color: #8a949e;
  }

  .tone-on-light a {
    color: #5b6570;
  }

  .tone-on-light a:hover {
    color: var(--ms-orange-dark);
  }

  .tone-on-light [aria-current="page"] {
    color: var(--ms-ink);
  }

  .tone-on-light li:not(:last-child)::after {
    color: #c5ccd4;
    opacity: 1;
  }

  @media (max-width: 560px) {
    .page-crumbs-nav li.is-home .crumb-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .page-crumbs-nav a,
    .page-crumbs-nav span {
      max-width: min(28ch, 52vw);
    }
  }

/* --- src/components/StoreMap.astro --- */
.store-map {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--ms-line, rgba(15, 45, 70, 0.12));
    background: #dceaf4;
    box-shadow: 0 14px 34px rgba(20, 32, 41, 0.06);
  }

  .store-map iframe {
    width: 100%;
    height: 380px;
    border: 0;
    display: block;
  }

  .store-map-open {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.7rem;
    border-radius: 8px;
    background: #fff;
    color: #1a73e8;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 650;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  }

  .store-map-open:hover {
    background: #f6f9fe;
  }

  @media (max-width: 560px) {
    .store-map iframe {
      height: 280px;
    }
  }

/* --- src/components/HomeNews.astro --- */
.home-news {
    padding: clamp(2.75rem, 5vw, 3.75rem) 0;
    background:
      radial-gradient(ellipse 55% 70% at 0% 10%, rgba(240, 129, 25, 0.09), transparent 55%),
      radial-gradient(ellipse 50% 60% at 100% 90%, rgba(0, 160, 227, 0.08), transparent 50%),
      linear-gradient(180deg, #fff 0%, #f6f9fb 55%, #fff 100%);
    border-block: 1px solid var(--ms-line);
  }

  .news-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
  }

  .news-head .eyebrow {
    margin-bottom: 0.35rem;
  }

  .news-head h2 {
    margin: 0;
    font-size: clamp(1.55rem, 2.6vw, 1.95rem);
    letter-spacing: -0.025em;
  }

  .news-all {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ms-blue-dark);
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.15s ease, transform 0.15s ease;
  }

  .news-all:hover {
    color: var(--ms-orange-dark);
    transform: translateX(2px);
  }

  .news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
  }

  .news-lead {
    display: grid;
    grid-template-rows: minmax(200px, 1fr) auto;
    min-height: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ms-line);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 18px 42px rgba(20, 32, 41, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .news-lead:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 50px rgba(20, 32, 41, 0.1);
  }

  .news-lead figure {
    margin: 0;
    min-height: 220px;
    overflow: hidden;
    background: #e8eef3;
  }

  .news-lead img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .news-lead:hover img {
    transform: scale(1.04);
  }

  .news-lead-copy {
    display: grid;
    gap: 0.55rem;
    padding: 1.25rem 1.3rem 1.35rem;
    background:
      radial-gradient(ellipse 80% 80% at 100% 0%, rgba(0, 160, 227, 0.07), transparent 55%),
      #fff;
  }

  .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ms-muted);
  }

  .cat {
    color: var(--ms-orange-dark);
  }

  .news-lead h3 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    letter-spacing: -0.025em;
    line-height: 1.2;
  }

  .news-lead-copy p {
    margin: 0;
    color: var(--ms-muted);
    line-height: 1.5;
    font-size: 0.98rem;
  }

  .read {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ms-blue-dark);
  }

  .news-lead:hover .read,
  .news-item:hover .read {
    color: var(--ms-orange-dark);
  }

  .news-side {
    display: grid;
    gap: 0.85rem;
  }

  .news-item {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    padding: 0.65rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--ms-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .news-item:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 160, 227, 0.35);
    box-shadow: 0 12px 28px rgba(20, 32, 41, 0.08);
  }

  .news-item figure {
    margin: 0;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #eef2f5;
  }

  .news-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .news-item:hover img {
    transform: scale(1.05);
  }

  .news-item h3 {
    margin: 0.25rem 0 0.35rem;
    font-size: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.25;
  }

  .news-item .read {
    font-size: 0.82rem;
  }

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

    .news-lead {
      grid-template-rows: auto auto;
    }

    .news-lead figure {
      aspect-ratio: 16 / 10;
      min-height: 0;
    }
  }

  @media (max-width: 560px) {
    .news-head {
      flex-direction: column;
      align-items: start;
      gap: 0.55rem;
    }

    .news-item {
      grid-template-columns: 5.75rem minmax(0, 1fr);
      gap: 0.75rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .news-lead,
    .news-item,
    .news-lead img,
    .news-item img {
      transition: none;
    }

    .news-lead:hover,
    .news-item:hover,
    .news-lead:hover img,
    .news-item:hover img {
      transform: none;
    }
  }

/* --- src/components/ThuisbatterijBanner.astro --- */
.tb-float {
    position: fixed;
    left: max(1rem, env(safe-area-inset-left, 0px));
    bottom: max(1.15rem, env(safe-area-inset-bottom, 0px));
    z-index: 62;
    width: min(22.5rem, calc(100vw - 2rem));
  }

  .tb-close {
    position: absolute;
    top: -0.45rem;
    right: -0.35rem;
    z-index: 2;
    width: 1.85rem;
    height: 1.85rem;
    border: 0;
    border-radius: 999px;
    background: #1a1f24;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }

  .tb-card {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.8rem 1rem 0.8rem 0.8rem;
    border-radius: 18px;
    text-decoration: none;
    color: #fff;
    background:
      radial-gradient(ellipse 80% 90% at 0% 100%, rgba(240, 129, 25, 0.45), transparent 55%),
      linear-gradient(135deg, #0f3a4f 0%, #15607a 48%, #0d2f3f 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(12, 28, 40, 0.35);
  }

  .tb-visual {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
  }

  .tb-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .tb-copy {
    display: grid;
    gap: 0.12rem;
  }

  .tb-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f0b06a;
  }

  .tb-copy strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .tb-text {
    font-size: 0.86rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.82);
  }

  .tb-cta {
    margin-top: 0.2rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    color: #7fd0f2;
  }

  @media (max-width: 720px) {
    .tb-float {
      left: max(0.75rem, env(safe-area-inset-left, 0px));
      right: max(0.75rem, env(safe-area-inset-right, 0px));
      bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
      width: auto;
    }
  }

/* --- sliders --- */
.service-slider {
          --ss-gutter: var(--container-pad, clamp(1.25rem, 3vw, 2rem));
          --ss-inline: max(
            var(--ss-gutter),
            calc((100vw - min(var(--container-max, 1180px), 100vw)) / 2 + var(--ss-gutter))
          );
          position: relative;
        }

        .service-slider.is-bleed {
          position: relative;
          left: 50%;
          width: 100vw;
          max-width: 100vw;
          margin-left: -50vw;
          margin-right: -50vw;
          box-sizing: border-box;
        }

        .ss-nav {
          position: absolute;
          top: 38%;
          z-index: 3;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          border: 1px solid #e4e8ec;
          background: rgba(255, 255, 255, 0.96);
          color: #1a1f24;
          display: grid;
          place-items: center;
          cursor: pointer;
          box-shadow: 0 10px 24px rgba(26, 31, 36, 0.1);
          transform: translateY(-50%);
          transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
        }

        .service-slider.is-bleed .ss-nav.prev { left: 0.75rem; }
        .service-slider.is-bleed .ss-nav.next { right: 0.75rem; }
        .service-slider:not(.is-bleed) .ss-nav.prev { left: -8px; }
        .service-slider:not(.is-bleed) .ss-nav.next { right: -8px; }

        .ss-nav:hover:not(:disabled) {
          border-color: #00a0e3;
          color: #0086bf;
          transform: translateY(-50%) scale(1.04);
        }

        .ss-nav:disabled {
          opacity: 0;
          pointer-events: none;
          visibility: hidden;
        }

        .ss-track {
          display: flex;
          align-items: stretch;
          gap: 1rem;
          overflow-x: auto;
          scroll-behavior: smooth;
          padding: 0.35rem var(--ss-gutter) 0.85rem;
          outline: none;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
        }

        .service-slider.is-bleed .ss-track {
          padding-left: var(--ss-inline);
          padding-right: var(--ss-inline);
          scroll-padding-inline: var(--ss-inline);
        }

        .ss-track::-webkit-scrollbar {
          display: none;
        }

        .ss-slide {
          flex: 0 0 clamp(220px, 19vw, 260px);
          display: grid;
          grid-template-rows: auto 1fr;
          border-radius: 18px;
          border: 1px solid #e4e8ec;
          background: #fff;
          text-decoration: none;
          color: inherit;
          overflow: hidden;
          transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .ss-slide:hover {
          transform: translateY(-4px);
          border-color: rgba(0, 160, 227, 0.35);
          box-shadow: 0 18px 36px rgba(20, 32, 41, 0.08);
        }

        .ss-media {
          aspect-ratio: 4 / 3;
          background: #eef2f5;
          overflow: hidden;
        }

        .ss-media img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          display: block;
          transition: transform 0.35s ease;
        }

        .ss-slide:hover .ss-media img {
          transform: scale(1.04);
        }

        .ss-body {
          display: grid;
          grid-template-rows: auto 1fr auto;
          gap: 0.45rem;
          padding: 0.95rem 1.05rem 1.1rem;
        }

        .ss-slide h3 {
          margin: 0;
          font-family: Outfit, sans-serif;
          font-size: 1.05rem;
          font-weight: 700;
          line-height: 1.25;
          color: #1a1f24;
        }

        .ss-slide p {
          margin: 0;
          color: #5b6570;
          font-size: 0.88rem;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .ss-slide p:empty { display: none; }
        body.cms-editing .ss-slide p:empty {
          display: -webkit-box;
          min-height: 1.2em;
        }

        .ss-more {
          font-family: Outfit, sans-serif;
          font-weight: 700;
          font-size: 0.88rem;
          color: #00648c;
        }

        .ss-slide:hover .ss-more {
          color: #004e6e;
        }

        .ss-empty {
          color: #5b6570;
          padding-inline: var(--container-pad, 1.25rem);
        }

        @media (max-width: 720px) {
          .ss-slide {
            flex-basis: min(74vw, 250px);
          }
        }

.product-slider {
          --ps-gutter: var(--container-pad, clamp(1.25rem, 3vw, 2rem));
          --ps-inline: max(
            var(--ps-gutter),
            calc((100vw - min(var(--container-max, 1180px), 100vw)) / 2 + var(--ps-gutter))
          );
          position: relative;
        }

        .product-slider.is-bleed {
          position: relative;
          left: 50%;
          width: 100vw;
          max-width: 100vw;
          margin-left: -50vw;
          margin-right: -50vw;
          box-sizing: border-box;
        }

        .ps-nav {
          position: absolute;
          top: 36%;
          z-index: 3;
          width: 38px;
          height: 38px;
          border-radius: 50%;
          border: 1px solid #e4e8ec;
          background: rgba(255, 255, 255, 0.96);
          color: #1a1f24;
          display: grid;
          place-items: center;
          cursor: pointer;
          box-shadow: 0 10px 24px rgba(26, 31, 36, 0.1);
          transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
          transform: translateY(-50%);
        }

        .product-slider.is-bleed .ps-nav.prev { left: max(0.5rem, calc(var(--ps-inline) - 1.25rem)); }
        .product-slider.is-bleed .ps-nav.next { right: max(0.5rem, calc(var(--ps-inline) - 1.25rem)); }
        .product-slider:not(.is-bleed) .ps-nav.prev { left: -8px; }
        .product-slider:not(.is-bleed) .ps-nav.next { right: -8px; }

        .ps-nav:hover:not(:disabled) {
          border-color: #00a0e3;
          color: #0086bf;
          transform: translateY(-50%) scale(1.04);
        }

        .ps-nav:disabled {
          opacity: 0.25;
          cursor: default;
          pointer-events: none;
        }

        .ps-track {
          --ps-gap: 0.65rem;
          --ps-visible: 4;
          --ps-track-inner: min(
            var(--container-max, 1180px),
            calc(100vw - (2 * var(--ps-gutter)))
          );
          display: flex;
          gap: var(--ps-gap);
          overflow-x: auto;
          scroll-behavior: smooth;
          padding: 0.45rem 0 1rem;
          outline: none;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
        }

        .product-slider.is-bleed .ps-track {
          padding-left: var(--ps-inline);
          padding-right: var(--ps-inline);
          scroll-padding-inline: var(--ps-inline);
        }

        .product-slider:not(.is-bleed) .ps-track {
          padding-left: 0.5rem;
          padding-right: 0.5rem;
        }

        .ps-track::-webkit-scrollbar {
          display: none;
        }

        .ps-slide {
          flex: 0 0 calc(
            (var(--ps-track-inner) - ((var(--ps-visible) - 1) * var(--ps-gap))) / var(--ps-visible)
          );
          background: #fff;
          border: 1px solid #e4e8ec;
          border-radius: 12px;
          overflow: hidden;
          text-decoration: none;
          color: inherit;
          transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .ps-slide:hover {
          transform: translateY(-2px);
          border-color: rgba(0, 160, 227, 0.35);
          box-shadow: 0 12px 24px rgba(26, 31, 36, 0.08);
        }

        .ps-media {
          aspect-ratio: 1;
          display: grid;
          place-items: center;
          background: #fff;
          padding: 1.35rem 1.2rem 1.15rem;
          overflow: hidden;
          border-bottom: 1px solid #eef1f4;
        }

        .ps-media img {
          width: 78%;
          height: 78%;
          max-width: 11.5rem;
          max-height: 11.5rem;
          object-fit: contain;
          object-position: center;
          display: block;
          transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .ps-slide:hover .ps-media img {
          transform: scale(1.03);
        }

        .ps-placeholder {
          color: #5b6570;
          font-size: 0.8rem;
        }

        .ps-body {
          padding: 0.4rem 0.65rem 0.65rem;
          display: grid;
          gap: 0.12rem;
        }

        .ps-body h3 {
          font-family: Outfit, sans-serif;
          font-size: 0.84rem;
          font-weight: 700;
          line-height: 1.25;
          margin: 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .ps-body strong {
          color: #b45309;
          font-size: 0.95rem;
          font-family: Outfit, sans-serif;
          letter-spacing: -0.015em;
        }

        .ps-empty {
          color: #5b6570;
        }

        @media (max-width: 980px) {
          .ps-track { --ps-visible: 3; }
        }

        @media (max-width: 720px) {
          .ps-track {
            --ps-visible: 2;
            scroll-snap-type: x mandatory;
            scroll-padding-inline: var(--ps-gutter);
          }

          .ps-slide {
            scroll-snap-align: start;
          }

          .product-slider.is-bleed .ps-nav.prev { left: 0.35rem; }
          .product-slider.is-bleed .ps-nav.next { right: 0.35rem; }

          .product-slider.is-bleed .ps-track {
            padding-left: var(--ps-gutter);
            padding-right: var(--ps-gutter);
            scroll-padding-inline: var(--ps-gutter);
          }
        }