/* Streeploos Schoonmaak — clean aqua white, deep teal ink and a fresh teal. Plus Jakarta Sans throughout.
   Signature: a squeegee wipes one clear streak through a frosted photo. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root {
  --bg: #F2FAFB; --paper: #FFFFFF; --ink: #0B2027; --muted: #45606A; --line: #D2E5E8; --teal: #0E7C86; --aqua: #CDEDEF;
  --btn: var(--teal); --on-btn: #FFFFFF; --btn-hover: #0A646C; --focus: var(--ink);
  --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --text: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 700; --display-track: -0.04em; --radius: 1.5rem; --field-radius: 0.9rem;
  --menu-font: 700 1.3rem var(--display);
  --k-bg: #FFFFFF; --k-soft: #EAF5F6; --k-ink: var(--ink); --k-muted: var(--muted); --k-line: var(--line);
  --k-accent: var(--teal); --k-on-accent: #FFFFFF; --k-radius: 1.25rem; --k-font: var(--text);
}
h1 span, h2 span { color: var(--teal); }
.dx-logo { display: inline-flex; align-items: baseline; gap: 0.45rem; font: 800 1.45rem/1 var(--display); letter-spacing: -0.05em; }
.dx-logo small { font-weight: 500; font-size: 0.8rem; letter-spacing: 0; color: var(--muted); }
.sp-mark { align-self: center; width: 1.3rem; height: 0.35rem; border-radius: 0.2rem; background: var(--teal); box-shadow: 0 0.35rem 0 -0.05rem var(--aqua); }

.sp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; padding-block: clamp(3rem, 8vw, 6rem); }
.sp-hero h1 { margin-top: 1rem; font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.02; }
.sp-hero h1 span { display: block; }
.sp-wipe { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; }
.sp-wipe__clear, .sp-wipe__clear img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-wipe__fog { position: absolute; inset: 0; background: rgba(120, 170, 178, 0.42); -webkit-backdrop-filter: blur(14px) saturate(0.6); backdrop-filter: blur(14px) saturate(0.6);
  clip-path: polygon(63% 0, 100% 0, 100% 100%, 41% 100%); animation: sp-wipe 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s both; }
/* the blade sits on the edge of the fog: centre at 52%, tilted to match the clip */
.sp-wipe__blade { position: absolute; top: -12%; bottom: -12%; left: 52%; width: 0.6rem; margin-left: -0.3rem; border-radius: 0.3rem; background: linear-gradient(#1C1C1C, #4A4A4A); transform: rotate(13deg); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); animation: sp-blade 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s both; }
@keyframes sp-wipe { from { clip-path: polygon(-4% 0, 100% 0, 100% 100%, -26% 100%); } to { clip-path: polygon(63% 0, 100% 0, 100% 100%, 41% 100%); } }
@keyframes sp-blade { from { left: -15%; } to { left: 52%; } }
@media (max-width: 960px) { .sp-hero { grid-template-columns: 1fr; } .sp-wipe { max-width: 30rem; } }

.sp-svc { background: var(--paper); }
.sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.sp-cards li { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.5rem; }
.sp-cards img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin-bottom: 0.75rem; }
.sp-cards h3 { font-size: 1.4rem; }
.sp-cards p { color: var(--muted); }
.sp-cards b { color: var(--teal); }
@media (max-width: 860px) { .sp-cards { grid-template-columns: 1fr; } }

.sp-rost { background: var(--ink); color: #E8F4F6; }
.sp-rost .dx-eyebrow, .sp-rost .dx-intro { color: #A9C4CB; }
.sp-rost h2 span { color: #6FD3DB; }
.sp-rost__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (max-width: 960px) { .sp-rost__in { grid-template-columns: 1fr; } }
.sp-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; }
.sp-places { font-weight: 700; font-size: 1.15rem; margin-bottom: 1rem; }
.sp-contact address { font-size: 1.1rem; line-height: 1.5; }
@media (max-width: 760px) { .sp-contact { grid-template-columns: 1fr; } }