/* =================================================================
   Sloophet · public site design system  ·  v2
   Identity: safety-yellow on asphalt-black (demolition / hazard-tape)
   Display: Anton · Body: Archivo · Data/labels: Space Mono
   ================================================================= */

:root {
    --ink: #0e0e0e;
    --ink-2: #17150f;
    --ink-3: #211e18;
    --ink-line: #2c2925;
    --hazard: #ffe000;
    --hazard-deep: #d8be00;
    --paper: #f4f2ec;
    --paper-2: #ece9df;
    --line: #dcd8ce;
    --line-2: #e3ded2;
    --num: #cfc9bc;
    --muted: #8a857a;
    --body: #4f4b43;
    --dark-text: #26241f;
    --on-dark: #c9c4ba;
    --on-dark-dim: #837c6f;
    --wa: #25d366;
    --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --max: 1320px;
    --pad: 32px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body.sh {
    font-family: Archivo, system-ui, sans-serif;
    color: var(--ink);
    background: var(--paper);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.sh ::selection {
    background: var(--hazard);
    color: var(--ink);
}

.sh img {
    max-width: 100%;
    display: block;
}

/* :where() keeps this reset at zero specificity so component link
   classes (e.g. .sh-nav__link) always win over it. */
:where(.sh a) {
    color: inherit;
    text-decoration: none;
}

/* Keyboard focus ring for every interactive element */
.sh a:focus-visible,
.sh button:focus-visible,
.sh input:focus-visible,
.sh select:focus-visible,
.sh textarea:focus-visible {
    outline: 3px solid var(--hazard);
    outline-offset: 3px;
    border-radius: 1px;
}

/* Skip-to-content link */
.sh-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
}

.sh-skip:focus {
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    padding: 12px 18px;
    background: var(--hazard);
    color: var(--ink);
    font:
        800 14px/1 Archivo,
        sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Reveal-on-scroll base states (only when JS is on) ---------- */
html.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
}

html.js .reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    html.js .reveal,
    html.js .reveal-stagger > *,
    html.js .demo-reveal > * {
        opacity: 1 !important;
        transform: none !important;
    }
    /* Mobile menu opens instantly, no slide or stagger */
    .sh-nav,
    .sh-nav__links > *,
    .sh-nav__link,
    .sh-nav__cta,
    .sh-nav__contact {
        transition: none !important;
    }
    .sh-nav__links > *,
    .sh-nav__link,
    .sh-nav__cta,
    .sh-nav__contact {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---- Layout helpers -------------------------------------------- */
.sh-wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
}

.sh-section {
    padding-top: 104px;
    padding-bottom: 24px;
}

.sh-section--tight {
    padding-top: 72px;
}

.sh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 18px;
}

.sh-eyebrow--light {
    color: var(--hazard);
}

.sh-eyebrow .sh-tick {
    width: 28px;
    height: 3px;
    background: var(--hazard);
    display: inline-block;
}

.sh-h1 {
    font-family: Anton, sans-serif;
    font-weight: 400;
    font-size: clamp(52px, 7.5vw, 104px);
    /* Anton fills its em box, so at 0.86 a three-line heading reads as one solid
       mass with the caps of each line touching the line above. */
    line-height: 0.94;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.005em;
}

.sh-h2 {
    font-family: Anton, sans-serif;
    font-weight: 400;
    font-size: clamp(38px, 5.2vw, 68px);
    line-height: 0.92;
    margin: 0;
    text-transform: uppercase;
}

.sh-display {
    font-family: Anton, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
}

.sh-lead {
    font-weight: 500;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.6;
    color: var(--on-dark);
    max-width: 580px;
    margin: 24px 0 0;
}

.sh-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.sh-mono {
    font-family: var(--font-mono);
}

/* ---- Buttons --------------------------------------------------- */
.sh-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--hazard);
    cursor: pointer;
    font-family: Archivo, sans-serif;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    /* Uppercase Archivo 800 sets tight; the extra tracking keeps a long label
       like "Offerte aanvragen" legible at button size. */
    letter-spacing: 0.05em;
    /* A button label never breaks in two: it either fits or the layout around it
       gives way. */
    white-space: nowrap;
    text-transform: uppercase;
    background: var(--hazard);
    color: var(--ink);
    padding: 17px 26px;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.sh-btn:hover {
    background: var(--ink);
    color: var(--hazard);
    border-color: var(--ink);
    transform: translateY(-2px);
}

.sh-btn--sm {
    font-size: 13px;
    padding: 12px 18px;
}

.sh-btn--lg {
    font-size: 16px;
    padding: 21px 32px;
}

.sh-btn--outline {
    background: transparent;
    border: 2px solid #3a3833;
    color: #fff;
    font-weight: 700;
}

.sh-btn--outline:hover {
    background: var(--hazard);
    border-color: var(--hazard);
    color: var(--ink);
    transform: translateY(-2px);
}

.sh-btn--dark {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.sh-btn--dark:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}

/* on a dark surface: yellow button that inverts to outline-white */
.sh-btn--invert:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.sh-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 6px;
    border-bottom: 3px solid var(--hazard);
    transition:
        gap 0.2s ease,
        border-color 0.2s ease;
}

.sh-textlink:hover {
    gap: 14px;
    border-color: var(--ink);
}

.sh-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-dim);
    margin-bottom: 28px;
    transition:
        gap 0.2s ease,
        color 0.2s ease;
}

.sh-back:hover {
    color: var(--hazard);
    gap: 14px;
}

/* ---- Hazard stripe & marquee ----------------------------------- */
.sh-hazard {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: repeating-linear-gradient(
        45deg,
        var(--ink) 0 16px,
        var(--hazard) 16px 32px
    );
    z-index: 3;
}

.sh-hazard--sm {
    height: 8px;
    background: repeating-linear-gradient(
        45deg,
        var(--ink) 0 12px,
        var(--hazard) 12px 24px
    );
}

.sh-marquee {
    background: var(--hazard);
    overflow: hidden;
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
}

.sh-marquee__track {
    display: flex;
    width: max-content;
    padding: 14px 0;
    will-change: transform;
}

.sh-marquee__seq {
    display: flex;
    align-items: center;
    flex: none;
}

.sh-marquee__word {
    font-family: Anton, sans-serif;
    font-size: 26px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.sh-marquee__word::after {
    content: '✦';
    font-size: 16px;
    margin: 0 36px;
    color: var(--ink);
    opacity: 0.55;
}

/* ---- Admin bar (signed-in admins only) ------------------------- */
/* Deliberately reads as tooling rather than site chrome, and stays in flow so
   it scrolls away with the page instead of covering the sticky header. */
.sh-adminbar {
    background: var(--hazard);
    color: var(--ink);
    border-bottom: 3px solid var(--ink);
}

.sh-adminbar__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 7px var(--pad);
    min-height: 38px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sh-adminbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
}

.sh-adminbar__brand::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--ink);
}

.sh-adminbar__link {
    border-bottom: 1px solid rgba(14, 14, 14, 0.35);
    transition: border-color 0.2s ease;
}

.sh-adminbar__link:hover {
    border-bottom-color: var(--ink);
}

.sh-adminbar__button {
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(14, 14, 14, 0.35);
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}

.sh-adminbar__spacer {
    flex: 1 1 auto;
}

.sh-adminbar__user {
    color: rgba(14, 14, 14, 0.6);
}

@media (max-width: 700px) {
    .sh-adminbar__user {
        display: none;
    }
}

/* ---- Top contact bar ------------------------------------------- */
.sh-topbar {
    background: var(--ink-2);
    border-bottom: 1px solid var(--ink-line);
    color: var(--on-dark);
}

.sh-topbar__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sh-topbar__group {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.sh-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--on-dark);
    padding: 8px 0;
    white-space: nowrap;
    transition: color 0.18s ease;
}

.sh-topbar__item svg {
    width: 15px;
    height: 15px;
    color: var(--hazard);
    flex: none;
}

a.sh-topbar__item:hover {
    color: #fff;
}

/* Review score. Two identical star rows stacked: the coloured one is clipped
   to the score percentage, so 4,3 reads as four and a bit stars. */
.sh-topbar__item--rating {
    gap: 9px;
}

.sh-stars {
    position: relative;
    display: inline-flex;
    flex: none;
}

.sh-stars__row {
    display: inline-flex;
    gap: 2px;
    color: rgba(255, 255, 255, 0.26);
}

.sh-stars__row--fill {
    position: absolute;
    inset: 0;
    width: var(--sh-stars, 0%);
    overflow: hidden;
    color: var(--hazard);
}

.sh-stars svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: inherit;
}

.sh-topbar__score {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---- Header ---------------------------------------------------- */
.sh-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ink);
    color: #fff;
    border-bottom: 1px solid var(--ink-line);
    transition: box-shadow 0.25s ease;
}

.sh-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: var(--hazard);
}

.sh-header.is-scrolled {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.sh-header__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sh-logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.sh-logo img {
    display: block;
    height: 64px;
    width: auto;
}

.sh-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

/* On desktop the links wrapper is transparent (items sit inline in the nav);
   the mobile menu chrome is hidden. */
.sh-nav__links {
    display: contents;
}

.sh-nav__item {
    display: inline-flex;
    align-items: center;
}

.sh-nav__top,
.sh-nav__contact {
    display: none;
}

.sh-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: Archivo, sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #fff;
    text-transform: uppercase;
    padding: 12px 15px;
    transition: color 0.18s ease;
}

.sh-nav__link:hover {
    color: var(--hazard);
}

.sh-nav__link::after {
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 5px;
    height: 2.5px;
    background: var(--hazard);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.1, 1);
}

.sh-nav__link:hover::after,
.sh-nav__link[aria-current='page']::after,
.sh-nav__item--mega.is-open > .sh-nav__link::after {
    transform: scaleX(1);
}

.sh-nav__link[aria-current='page'] {
    color: var(--hazard);
}

.sh-nav__chev {
    width: 13px;
    height: 13px;
    margin-top: 1px;
    transition: transform 0.25s ease;
}

.sh-nav__item--mega.is-open .sh-nav__chev {
    transform: rotate(180deg);
}

.sh-nav .sh-nav__cta {
    margin-left: 14px;
}

/* ---- Services mega-dropdown ----------------------------------- */
.sh-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    background: linear-gradient(180deg, var(--ink-2), var(--ink));
    border-top: 1px solid var(--ink-line);
    border-bottom: 3px solid var(--hazard);
    box-shadow: 0 26px 52px rgba(0, 0, 0, 0.5);
    max-height: calc(100vh - 130px);
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
}

.sh-nav__item--mega.is-open .sh-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sh-mega__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 28px var(--pad) 30px;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

.sh-mega__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 28px;
    border-right: 1px solid var(--ink-line);
}

.sh-mega__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hazard);
}

.sh-mega__lead {
    font-size: 15px;
    line-height: 1.5;
    color: var(--on-dark);
}

.sh-mega__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 18px;
}

.sh-mega__card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 11px 14px;
    border-radius: 8px;
    transition: background 0.16s ease;
}

.sh-mega__card:hover {
    background: rgba(255, 255, 255, 0.05);
}

.sh-mega__num {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--on-dark-dim);
    min-width: 22px;
    transition: color 0.16s ease;
}

.sh-mega__card:hover .sh-mega__num {
    color: var(--hazard);
}

.sh-mega__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.sh-mega__name {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
}

.sh-mega__tag {
    font-size: 12.5px;
    color: var(--on-dark-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sh-mega__arrow {
    color: var(--hazard);
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
}

.sh-mega__card:hover .sh-mega__arrow {
    opacity: 1;
    transform: translateX(0);
}

.sh-mega__all {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--ink-line);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hazard);
}

.sh-nav__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    padding: 8px;
}

.sh-nav__toggle svg {
    width: 28px;
    height: 28px;
    display: block;
}

/* Lock the page behind the open mobile menu */
body.sh.is-menu-open {
    overflow: hidden;
}

/* ---- Hero (home) ----------------------------------------------- */
.sh-hero {
    position: relative;
    background: var(--ink);
    color: #fff;
    overflow: hidden;
}

.sh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            120% 80% at 50% -10%,
            rgba(255, 224, 0, 0.08),
            transparent 55%
        ),
        linear-gradient(180deg, var(--ink-2), var(--ink));
}

/* ---- Crane rail: a full-width hazard beam under the header ----- */
.sh-hero__rail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 16px;
    background: repeating-linear-gradient(
        45deg,
        var(--ink) 0 11px,
        var(--hazard) 11px 22px
    );
    border-bottom: 2px solid var(--ink);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    z-index: 5;
}

.sh-hero__inner {
    position: relative;
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(116px, 15vh, 168px) var(--pad) clamp(72px, 9vh, 104px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 56px;
    align-items: end;
}

/* The wordmark and the wall that hides it share one box.
   The em-padding (driven by the same font-size as the title) lets the wall
   overscan Anton's caps, which overflow the tight line-height. */
.sh-hero__stage {
    position: relative;
    width: fit-content;
    justify-self: start;
    font-size: clamp(100px, 11vw, 168px);
    padding: 0.34em 0.18em 0.13em;
}

.sh-hero__title {
    position: relative;
    z-index: 1;
    font-family: Anton, sans-serif;
    font-weight: 400;
    font-size: clamp(100px, 11vw, 168px);
    line-height: 0.74;
    letter-spacing: -0.015em;
    margin: 0;
    text-transform: uppercase;
}

.sh-hero__title .accent {
    color: var(--hazard);
}

/* ---- The wall (revealed title sits behind it) ------------------ */
.sh-hero__wall {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    gap: 0;
    pointer-events: none;
}

html.js .sh-hero__wall {
    display: grid;
}

.sh-brick {
    position: relative;
    border: 2px solid #15130e;
    /* 1px spread closes sub-pixel seams so the wordmark stays hidden until impact */
    box-shadow: 0 0 0 1px #15130e;
    background: linear-gradient(160deg, #3a362f, #26221b);
    will-change: transform;
}

.sh-brick:nth-child(3n) {
    background: linear-gradient(160deg, #33302a, #211d17);
}

.sh-brick:nth-child(4n) {
    background: linear-gradient(160deg, #2a2620, #1c1812);
}

.sh-brick::before {
    content: '';
    position: absolute;
    inset: 30% 32%;
    border-radius: 1px;
    background: #0c0b08;
}

.sh-brick.is-lit::before {
    background: var(--hazard);
    opacity: 0.5;
}

/* ---- Dust kicked up by the impact ------------------------------ */
.sh-hero__dust {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.sh-dust-mote {
    position: absolute;
    border-radius: 50%;
    background: #d8d3c7;
    filter: blur(3px);
    opacity: 0.42;
    will-change: transform, opacity;
}

/* Impact: a flash and an expanding shockwave at the point of contact */
.sh-hero__flash,
.sh-hero__shock {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

.sh-hero__flash {
    width: 120px;
    height: 120px;
    background: radial-gradient(
        circle,
        rgba(255, 240, 140, 0.95) 0%,
        rgba(255, 224, 0, 0.55) 35%,
        rgba(255, 224, 0, 0) 70%
    );
}

.sh-hero__shock {
    width: 60px;
    height: 60px;
    border: 4px solid var(--hazard);
}

/* ---- Crane: trolley + cable + wrecking ball -------------------- */
.sh-hero__crane {
    position: absolute;
    top: 7px;
    left: 0;
    z-index: 7;
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    will-change: transform;
}

.sh-hero__trolley {
    width: 30px;
    height: 12px;
    background: #2c2925;
    border: 2px solid var(--ink);
    border-radius: 2px;
    box-shadow: 0 0 0 3px var(--hazard) inset;
    position: relative;
}

.sh-hero__cable {
    width: 4px;
    height: 180px;
    background:
        repeating-linear-gradient(180deg, #837c6f 0 2px, transparent 2px 13px),
        linear-gradient(90deg, #4a463d, #837c6f, #4a463d);
    border-radius: 2px;
}

.sh-hero__ball {
    position: relative;
    width: 96px;
    height: 96px;
    margin-top: -2px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 36% 30%,
        #4a463d 0%,
        #1c1a15 55%,
        #0b0a08 100%
    );
    border: 3px solid var(--hazard);
    box-shadow:
        inset -7px -9px 20px rgba(0, 0, 0, 0.6),
        inset 6px 6px 16px rgba(255, 255, 255, 0.07);
    /* a soft cast shadow so the ball reads as floating in front of the wordmark */
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.6));
}

.sh-hero__ball::before {
    content: '';
    position: absolute;
    left: 20%;
    top: 16%;
    width: 28%;
    height: 22%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    filter: blur(2px);
}

.sh-hero__ball::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    width: 9px;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--hazard);
    box-shadow: 0 0 0 2px var(--ink);
}

/* ---- Ground line seats the whole stage ------------------------- */
.sh-hero__ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(48px, 6vh, 72px);
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--ink-line) 12%,
        var(--ink-line) 88%,
        transparent
    );
    z-index: 0;
}

.sh-hero__intro {
    font-weight: 500;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.5;
    color: var(--on-dark);
    max-width: 440px;
    margin: 0 0 32px;
}

.sh-hero__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.sh-hero__badge {
    position: absolute;
    right: var(--pad);
    top: clamp(96px, 13vh, 150px);
    background: var(--hazard);
    color: var(--ink);
    font-family: Anton, sans-serif;
    font-size: 40px;
    line-height: 0.85;
    padding: 16px 18px;
    transform: rotate(-3deg);
    z-index: 4;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.sh-hero__badge span {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Reduced motion / JS failure: no wall, no ball, just the brand */
@media (prefers-reduced-motion: reduce) {
    html.js .sh-hero__wall {
        display: none;
    }
    .sh-hero__crane {
        display: none;
    }
}

/* ---- Wrecking-ball brand mark ---------------------------------- */
.sh-wrecker {
    position: relative;
    width: 100%;
}

.sh-wrecker svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.sh-wrecker__arm {
    will-change: transform;
}

.sh-hero__wrecker {
    width: 60%;
    max-width: 280px;
    margin-top: 4px;
}

/* Hero copy is revealed by the wall impact (hidden until then when JS is on) */
html.js .demo-reveal > * {
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
}

/* diensten head with a brand mark beside the title */
.sh-page-head__inner--split {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 40px;
    align-items: center;
}

.sh-page-head__wrecker {
    width: 78%;
    max-width: 240px;
    margin: 0 auto;
}

/* ---- Section shells -------------------------------------------- */
.sh-band {
    background: var(--ink);
    color: #fff;
}

.sh-page-head {
    position: relative;
    background: var(--ink);
    color: #fff;
    overflow: hidden;
}

.sh-page-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--ink-2), var(--ink));
}

.sh-page-head__inner {
    position: relative;
    max-width: var(--max);
    margin: 0 auto;
    padding: 80px var(--pad) 72px;
}

/* ---- Intro / feature split ------------------------------------- */
.sh-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.sh-intro__body p {
    font-weight: 500;
    font-size: 17px;
    line-height: 1.7;
    color: var(--body);
    margin: 0 0 18px;
}

.sh-intro__body p.lead {
    font-size: 20px;
    color: var(--dark-text);
}

.sh-figure {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-2);
}

.sh-figure--tall {
    aspect-ratio: 3 / 4;
}

.sh-figure--wide {
    aspect-ratio: 16 / 8;
}

/* ---- Showcase: one photo at its own shape ---------------------- */
/* The service photo is a phone shot, usually portrait. Cropping it into a wide
   frame throws the work out of view, so the band sets no ratio at all: the photo
   is capped on both axes with its ratio kept and centred on a hatched panel,
   which is what carries the leftover width beside a tall shot. */
.sh-showcase {
    position: relative;
    background-color: var(--ink);
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.028) 0 14px,
            transparent 14px 28px
        ),
        linear-gradient(140deg, var(--ink-3), var(--ink));
    color: var(--on-dark);
    overflow: hidden;
}

/* Closes the dark band the way the header closes itself. */
.sh-showcase::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--hazard);
}

/* For a photo that leads the page straight under the (dark) hero. */
.sh-showcase--paper {
    background-color: var(--paper-2);
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.03) 0 14px,
            transparent 14px 28px
        ),
        linear-gradient(140deg, var(--paper), var(--paper-2));
    color: var(--body);
}

.sh-showcase--paper::after {
    background: var(--ink);
}

.sh-showcase__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 52px var(--pad) 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.sh-showcase__img {
    /* Both caps hold at once and the ratio is kept, so nothing is cropped or
       stretched whichever way round the photo is. */
    max-width: 100%;
    max-height: min(70vh, 620px);
    /* Keeps an image that has a ratio but no intrinsic size (an SVG placeholder)
       off the 300 x 150 default the browser would otherwise fall back to. */
    min-height: min(70vw, 300px);
    width: auto;
    height: auto;
    border: 1px solid var(--ink-line);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}

.sh-showcase--paper .sh-showcase__img {
    border-color: var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}

.sh-showcase__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 14px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--on-dark-dim);
}

.sh-showcase--paper .sh-showcase__meta {
    color: var(--muted);
}

.sh-showcase__label {
    font-weight: 700;
    color: var(--hazard);
}

.sh-showcase--paper .sh-showcase__label {
    color: var(--ink);
}

@media (max-width: 700px) {
    .sh-showcase__inner {
        padding: 34px var(--pad) 32px;
        gap: 14px;
    }

    .sh-showcase__img {
        max-height: min(62vh, 460px);
    }
}

/* ---- USP / why band -------------------------------------------- */
.sh-usps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    border-top: 1px solid var(--ink-line);
    border-left: 1px solid var(--ink-line);
}

.sh-usp {
    padding: 36px 30px 40px;
    border-right: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
}

.sh-usp__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--hazard);
    margin-bottom: 20px;
}

.sh-usp__icon svg {
    width: 32px;
    height: 32px;
}

.sh-usp__title {
    font-family: Anton, sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
}

.sh-usp__text {
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--on-dark);
}

/* ---- Stats ----------------------------------------------------- */
.sh-stats {
    background: var(--ink);
    color: #fff;
}

.sh-stats__grid {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sh-stat {
    padding: 52px 28px;
    border-right: 1px solid var(--ink-line);
}

.sh-stat:last-child {
    border-right: none;
}

.sh-stat__num {
    font-family: Anton, sans-serif;
    font-size: clamp(48px, 5vw, 64px);
    line-height: 1;
    color: var(--hazard);
}

.sh-stat__label {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark);
    margin-top: 14px;
}

/* ---- Service tiles (image-led, diensten index) ----------------- */
.sh-grid-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.sh-stile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line-2);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.sh-stile:hover {
    transform: translateY(-6px);
    border-color: var(--ink);
    box-shadow: 0 20px 40px rgba(14, 14, 14, 0.16);
}

.sh-stile__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ink);
}

.sh-stile__media .sh-ph,
.sh-stile__media .sh-ph__img {
    transition: transform 0.5s cubic-bezier(0.2, 0, 0.1, 1);
}

.sh-stile:hover .sh-stile__media .sh-ph,
.sh-stile:hover .sh-stile__media .sh-ph__img {
    transform: scale(1.06);
}

.sh-stile__no {
    position: absolute;
    top: 12px;
    left: 16px;
    z-index: 2;
    font-family: Anton, sans-serif;
    font-size: 36px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.sh-stile__en {
    position: absolute;
    bottom: 14px;
    left: 16px;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hazard);
}

.sh-stile__body {
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sh-stile__name {
    font-family: Anton, sans-serif;
    font-size: 26px;
    line-height: 1.02;
    text-transform: uppercase;
}

.sh-stile__tagline {
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--body);
    margin-top: 12px;
    flex: 1;
}

.sh-stile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.sh-stile__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    transition: gap 0.2s ease;
}

.sh-stile:hover .sh-stile__cta {
    gap: 14px;
}

/* ---- Project grid + cards -------------------------------------- */
.sh-grid-projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
}

.sh-project {
    text-align: left;
    background: #fff;
    border: 1px solid var(--line-2);
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.sh-project:hover {
    border-color: var(--ink);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(14, 14, 14, 0.16);
}

.sh-project__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.sh-project__media .sh-ph__img,
.sh-project__media .sh-ph {
    transition: transform 0.45s cubic-bezier(0.2, 0, 0.1, 1);
}

.sh-project:hover .sh-ph__img,
.sh-project:hover .sh-project__media .sh-ph {
    transform: scale(1.05);
}

.sh-project__badge {
    position: absolute;
    top: 18px;
    right: 0;
    background: var(--ink);
    color: var(--hazard);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 13px;
    z-index: 2;
}

.sh-project__body {
    padding: 24px 24px 26px;
}

.sh-project__meta {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-transform: uppercase;
}

.sh-project__title {
    font-family: Anton, sans-serif;
    font-size: 25px;
    line-height: 1.02;
    text-transform: uppercase;
    margin: 12px 0 0;
    transition: color 0.2s ease;
}

.sh-project:hover .sh-project__title {
    color: var(--ink);
}

.sh-project__blurb {
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--body);
    margin-top: 10px;
}

/* ---- Media placeholder ----------------------------------------- */
.sh-ph {
    position: absolute;
    inset: 0;
    background-color: #c3bdb1;
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.04) 0 14px,
            transparent 14px 28px
        ),
        linear-gradient(140deg, #d3cdc1, #b3aca1);
    overflow: hidden;
}

.sh-ph--dark {
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.03) 0 14px,
            transparent 14px 28px
        ),
        linear-gradient(140deg, var(--ink-3), var(--ink));
}

.sh-ph--img {
    background: none;
}

.sh-ph__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sh-ph__label {
    position: absolute;
    bottom: 14px;
    left: 16px;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.12em;
    color: var(--on-dark-dim);
    text-transform: uppercase;
}

/* ---- Process --------------------------------------------------- */
.sh-process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    border-top: 3px solid var(--ink);
}

.sh-step {
    position: relative;
    padding: 34px 28px 36px;
    border-right: 1px solid var(--line);
}

.sh-step::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--hazard);
    transition: width 0.3s ease;
}

.sh-step:hover::before {
    width: 100%;
}

.sh-step:last-child {
    border-right: none;
}

.sh-step__no {
    font-family: Anton, sans-serif;
    font-size: 34px;
    color: var(--ink);
}

.sh-step__no sup {
    color: var(--hazard);
    font-size: 18px;
}

.sh-step__title {
    font-family: Anton, sans-serif;
    font-size: 21px;
    text-transform: uppercase;
    margin: 12px 0 10px;
}

.sh-step__text {
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--body);
    margin: 0;
}

/* ---- CTA blocks ------------------------------------------------ */
.sh-cta {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding: 64px 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
    overflow: hidden;
}

.sh-cta__deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        var(--ink-2) 0 18px,
        var(--ink-3) 18px 36px
    );
    z-index: 0;
}

.sh-cta__body {
    position: relative;
    z-index: 1;
    max-width: 480px;
}

.sh-cta__text {
    font-weight: 500;
    font-size: 17px;
    line-height: 1.55;
    color: var(--on-dark);
    margin: 16px 0 0;
}

.sh-cta__title {
    font-family: Anton, sans-serif;
    font-weight: 400;
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 0.95;
    margin: 0;
    text-transform: uppercase;
}

.sh-cta .sh-btn {
    position: relative;
    z-index: 2;
    flex: none;
}

.sh-cta--yellow {
    background: var(--hazard);
    color: var(--ink);
    padding: 52px 44px;
}

.sh-cta--yellow .sh-cta__title {
    font-size: clamp(30px, 4vw, 48px);
}

/* ---- Service detail -------------------------------------------- */
.sh-svc-hero {
    position: relative;
    background: var(--ink);
    color: #fff;
    overflow: hidden;
}

.sh-svc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--ink-2), var(--ink));
}

.sh-svc-hero__inner {
    position: relative;
    max-width: var(--max);
    margin: 0 auto;
    padding: 64px var(--pad) 68px;
}

.sh-svc-hero__row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}

.sh-svc-hero__no {
    font-family: Anton, sans-serif;
    font-size: clamp(80px, 12vw, 168px);
    line-height: 0.78;
    color: var(--hazard);
}

.sh-svc-hero__main {
    flex: 1;
    min-width: 280px;
}

.sh-svc-hero__title {
    font-family: Anton, sans-serif;
    font-weight: 400;
    font-size: clamp(46px, 6.5vw, 90px);
    line-height: 0.9;
    margin: 0;
    text-transform: uppercase;
}

.sh-svc-hero__en {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.12em;
    color: var(--hazard);
    text-transform: uppercase;
    margin-top: 14px;
}

.sh-svc-hero__desc {
    font-weight: 500;
    font-size: 19px;
    line-height: 1.6;
    color: var(--on-dark);
    max-width: 640px;
    margin: 24px 0 0;
}

.sh-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
}

.sh-pointlist {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--line);
}

.sh-pointlist__item {
    display: flex;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
}

.sh-pointlist__mark {
    flex: none;
    width: 12px;
    height: 12px;
    margin-top: 5px;
    background: var(--hazard);
    border: 1.5px solid var(--ink);
}

.sh-pointlist__text {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--dark-text);
}

.sh-aside-card {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding: 40px 34px;
    align-self: start;
    overflow: hidden;
}

.sh-aside-card__title {
    font-family: Anton, sans-serif;
    font-size: 26px;
    text-transform: uppercase;
    color: var(--hazard);
}

.sh-aside-card__text {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.6;
    color: var(--on-dark);
    margin: 16px 0 24px;
}

.sh-banner {
    background: var(--hazard);
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    overflow: hidden;
}

.sh-banner__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 16px var(--pad);
    font-family: Anton, sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 14px;
}

.sh-banner__mark {
    color: var(--ink);
}

/* ---- Project detail -------------------------------------------- */
.sh-proj-badge {
    display: inline-block;
    background: var(--hazard);
    border: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--ink);
    text-transform: uppercase;
    transition: background 0.2s ease;
    padding: 8px 13px;
    margin-bottom: 20px;
}

.sh-proj-badge:hover {
    background: #fff;
}

.sh-proj-meta {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--on-dark);
    text-transform: uppercase;
    margin-top: 18px;
}

.sh-split-detail {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr;
    gap: 56px;
}

.sh-prose {
    font-weight: 500;
    font-size: 17px;
    line-height: 1.7;
    color: var(--body);
}

.sh-prose h2 {
    font-family: Anton, sans-serif;
    font-weight: 400;
    font-size: 30px;
    text-transform: uppercase;
    margin: 0 0 18px;
}

.sh-prose p {
    font-weight: 500;
    font-size: 17px;
    line-height: 1.7;
    color: var(--body);
    margin: 0 0 18px;
}

.sh-prose p.lead,
.sh-prose__lead p {
    font-size: 19px;
    color: var(--dark-text);
}

.sh-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.sh-gallery__item {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.sh-datalist {
    border-top: 3px solid var(--ink);
    padding-top: 20px;
}

.sh-datalist__label {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.12em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 18px;
}

.sh-datarow {
    display: flex;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    gap: 16px;
}

.sh-datarow dt {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.3;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.sh-datarow dd {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    margin: 0;
    text-align: right;
}

.sh-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sh-tag {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-transform: uppercase;
    border: 1.5px solid var(--ink);
    padding: 9px 12px;
}

.sh-service-link {
    margin-top: 26px;
    width: 100%;
    text-align: left;
    background: var(--ink);
    border: none;
    cursor: pointer;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: background 0.2s ease;
    color: #fff;
}

.sh-service-link:hover {
    background: var(--hazard);
}

.sh-service-link__kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.sh-service-link:hover .sh-service-link__kicker {
    color: rgba(14, 14, 14, 0.7);
}

.sh-service-link__name {
    font-family: Anton, sans-serif;
    font-size: 21px;
    color: var(--hazard);
    text-transform: uppercase;
}

.sh-service-link:hover .sh-service-link__name {
    color: var(--ink);
}

.sh-service-link__arrow {
    font-family: Anton, sans-serif;
    font-size: 22px;
    color: #fff;
}

.sh-service-link:hover .sh-service-link__arrow {
    color: var(--ink);
}

/* Related projects (dark) */
.sh-related {
    background: var(--ink);
    color: #fff;
}

.sh-related__title {
    font-family: Anton, sans-serif;
    font-weight: 400;
    font-size: 32px;
    text-transform: uppercase;
    margin: 0 0 28px;
    color: var(--hazard);
}

.sh-grid-related {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}

.sh-project--dark {
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
}

.sh-project--dark:hover {
    border-color: var(--hazard);
    transform: translateY(-6px);
    box-shadow: none;
}

.sh-project--dark .sh-project__title {
    color: #fff;
    font-size: 21px;
}

.sh-project--dark:hover .sh-project__title {
    color: var(--hazard);
}

/* ---- About ----------------------------------------------------- */
.sh-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    border-top: 3px solid var(--ink);
}

.sh-value {
    padding: 32px 26px;
    border-right: 1px solid var(--line);
}

.sh-value:last-child {
    border-right: none;
}

.sh-value__title {
    font-family: Anton, sans-serif;
    font-size: 21px;
    text-transform: uppercase;
    color: var(--ink);
}

.sh-value__text {
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--body);
    margin: 12px 0 0;
}

.sh-certs {
    background: var(--ink);
    color: #fff;
}

.sh-certs__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 48px var(--pad);
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.sh-certs__label {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.14em;
    color: var(--muted);
    text-transform: uppercase;
    margin-right: 10px;
}

.sh-cert {
    font-family: Anton, sans-serif;
    font-size: 22px;
    color: #fff;
    border: 2px solid var(--ink-line);
    padding: 11px 17px;
    text-transform: uppercase;
    transition:
        border-color 0.2s ease,
        color 0.2s ease;
}

.sh-cert:hover {
    border-color: var(--hazard);
    color: var(--hazard);
}

/* ---- Contact --------------------------------------------------- */
.sh-contact-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 60px;
}

.sh-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sh-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sh-field__label {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--body);
    text-transform: uppercase;
}

.sh-field__opt {
    margin-left: 6px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.sh-form__hint {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.55;
    color: var(--body);
    margin: -2px 0 2px;
    padding-left: 14px;
    border-left: 3px solid var(--hazard);
}

.sh-input,
.sh-select,
.sh-textarea {
    font-family: Archivo, sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding: 15px 14px;
    border: 2px solid #d3cdbf;
    background: #fff;
    outline: none;
    width: 100%;
    transition: border-color 0.15s ease;
}

.sh-textarea {
    line-height: 1.5;
    resize: vertical;
}

.sh-input:focus,
.sh-select:focus,
.sh-textarea:focus {
    border-color: var(--ink);
    outline: none;
}

.sh-input[aria-invalid='true'],
.sh-select[aria-invalid='true'],
.sh-textarea[aria-invalid='true'] {
    border-color: #c0341d;
}

.sh-field__error {
    font-weight: 600;
    font-size: 12px;
    color: #c0341d;
}

.sh-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.sh-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Photo upload ---------------------------------------------- */
.sh-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Hidden but focusable, so the styled drop zone keeps keyboard access. */
.sh-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sh-upload__drop {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 18px;
    border: 2px dashed #d3cdbf;
    background: #fff;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.sh-upload__drop:hover,
.sh-upload__drop.is-dragover {
    border-color: var(--ink);
    background: #fffdf2;
}

.sh-upload__input:focus-visible + .sh-upload__drop {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 3px var(--hazard);
}

.sh-upload__drop.is-invalid {
    border-color: #c0341d;
}

.sh-upload__cta {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--ink);
    text-transform: uppercase;
}

.sh-upload__hint {
    font-weight: 500;
    font-size: 13px;
    color: var(--muted);
}

.sh-upload__note {
    font-weight: 500;
    font-size: 13px;
    color: var(--muted);
}

.sh-upload__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sh-upload__list:empty {
    display: none;
}

.sh-upload__item {
    position: relative;
    aspect-ratio: 1;
    border: 2px solid #d3cdbf;
    background: var(--paper-2);
    overflow: hidden;
}

.sh-upload__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sh-upload__remove {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1;
    color: var(--hazard);
    background: var(--ink);
    cursor: pointer;
}

.sh-upload__remove:hover {
    color: #fff;
    background: #c0341d;
}

.sh-success {
    background: var(--hazard);
    padding: 52px 44px;
}

.sh-success__title {
    font-family: Anton, sans-serif;
    font-size: 46px;
    line-height: 0.95;
    text-transform: uppercase;
}

.sh-success__text {
    font-weight: 500;
    font-size: 17px;
    line-height: 1.6;
    color: var(--dark-text);
    margin: 18px 0 0;
    max-width: 440px;
}

.sh-info {
    border-top: 3px solid var(--ink);
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sh-info__label {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.12em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sh-info__big {
    font-family: Anton, sans-serif;
    font-size: 28px;
    transition: color 0.2s ease;
}

a.sh-info__big:hover {
    color: var(--hazard-deep);
}

.sh-info__value {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
}

.sh-info__box {
    background: var(--ink);
    color: #fff;
    padding: 22px 24px;
}

.sh-info__box .sh-info__label {
    color: var(--hazard);
    margin-bottom: 8px;
}

.sh-info__box-text {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.55;
    color: var(--on-dark);
}

/* ---- Filter chips ---------------------------------------------- */
.sh-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 38px;
}

.sh-chip {
    cursor: pointer;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 12px 16px;
    border: 2px solid var(--ink);
    background: transparent;
    color: var(--ink);
    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.sh-chip:hover {
    background: var(--ink);
    color: var(--hazard);
    transform: translateY(-2px);
}

.sh-chip[aria-current='true'] {
    background: var(--ink);
    color: var(--hazard);
}

/* Collapsible filter: on mobile the long chip list folds behind a toggle */
.sh-filter__toggle {
    display: none;
}

@media (max-width: 760px) {
    .sh-filter {
        margin-bottom: 38px;
    }
    .sh-filter__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 14px 16px;
        border: 2px solid var(--ink);
        background: var(--ink);
        color: #fff;
        cursor: pointer;
        font-family: var(--font-mono);
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .sh-filter__chev {
        flex: none;
        width: 18px;
        height: 18px;
        color: var(--hazard);
        transition: transform 0.25s ease;
    }
    .sh-filter.is-open .sh-filter__chev {
        transform: rotate(180deg);
    }
    .sh-filter .sh-chips {
        display: none;
        margin-top: 14px;
        margin-bottom: 0;
    }
    .sh-filter.is-open .sh-chips {
        display: flex;
    }
}

/* ---- Sticky social rail + WhatsApp FAB ------------------------- */
.sh-social {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.sh-social__link {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: #fff;
    border-bottom: 1px solid var(--ink-line);
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.sh-social__link:last-child {
    border-bottom: none;
}

.sh-social__link svg {
    width: 20px;
    height: 20px;
}

.sh-social__link:hover {
    background: var(--hazard);
    color: var(--ink);
}

.sh-social__link--wa:hover {
    background: var(--wa);
    color: #fff;
}

.sh-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 45;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--wa);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
    transition: transform 0.2s ease;
}

.sh-fab:hover {
    transform: scale(1.08);
}

.sh-fab svg {
    width: 34px;
    height: 34px;
}

.sh-fab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--wa);
    z-index: -1;
    animation: shpulse 2.4s ease-out infinite;
}

@keyframes shpulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    70%,
    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-fab::before {
        animation: none;
    }
}

/* ---- Footer ---------------------------------------------------- */
.sh-footer {
    position: relative;
    background: linear-gradient(180deg, var(--ink-2), var(--ink));
    color: #fff;
}

/* Caution-tape top edge: the site's signature motif */
.sh-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: repeating-linear-gradient(
        -45deg,
        var(--ink) 0 15px,
        var(--hazard) 15px 30px
    );
}

.sh-footer__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 78px var(--pad) 8px;
}

.sh-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr 1.7fr 1.15fr;
    gap: 48px;
}

/* Brand column */
.sh-footer__logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.sh-footer__logo img {
    display: block;
    height: 128px;
    width: auto;
}

.sh-footer__tagline {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.6;
    color: var(--on-dark);
    max-width: 340px;
    margin: 22px 0 0;
}

.sh-footer__socials {
    display: flex;
    gap: 10px;
    margin-top: 26px;
}

.sh-footer__social {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid #3a3833;
    color: var(--on-dark);
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.sh-footer__social:hover {
    background: var(--hazard);
    border-color: var(--hazard);
    color: var(--ink);
    transform: translateY(-2px);
}

.sh-footer__social svg {
    width: 18px;
    height: 18px;
}

.sh-footer__certs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.sh-footer__cert {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-dim);
    border: 1.5px solid var(--ink-line);
    padding: 7px 12px;
}

/* Column headings */
.sh-footer__heading {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.14em;
    color: var(--hazard);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.sh-footer__heading--mt {
    margin-top: 34px;
}

/* Service links: two tight columns so the full list stays compact */
.sh-footer__services {
    columns: 2;
    column-gap: 28px;
}

.sh-footer__services .sh-footer__link {
    display: block;
    break-inside: avoid;
    margin-bottom: 12px;
}

.sh-footer__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.sh-footer__link {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    color: var(--on-dark);
    transition: color 0.18s ease;
}

.sh-footer__link:hover {
    color: var(--hazard);
}

.sh-footer__all {
    display: inline-block;
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--hazard);
    transition: color 0.18s ease;
}

.sh-footer__all:hover {
    color: #fff;
}

/* Contact block */
.sh-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--on-dark);
}

.sh-footer__contact a {
    color: inherit;
    transition: color 0.18s ease;
}

.sh-footer__contact a:hover {
    color: var(--hazard);
}

.sh-footer__contact .sh-footer__phone {
    font-family: Anton, sans-serif;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #fff;
}

.sh-footer__contact .sh-footer__phone:hover {
    color: var(--hazard);
}

/* Sign-off: the brand promise gets the last word */
.sh-footer__signoff {
    margin-top: 68px;
    padding-top: 40px;
    border-top: 1px solid var(--ink-line);
}

.sh-footer__signoff-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--on-dark-dim);
    margin-bottom: 16px;
}

.sh-footer__statement {
    font-family: Anton, sans-serif;
    font-size: clamp(2.4rem, 7vw, 5.4rem);
    line-height: 0.94;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #fff;
}

.sh-footer__statement .c {
    color: var(--hazard);
}

/* Legal bar */
.sh-footer__bar {
    border-top: 1px solid var(--ink-line);
}

.sh-footer__bar-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 20px var(--pad);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--on-dark-dim);
}

@media (max-width: 560px) {
    .sh-footer__services {
        columns: 1;
    }
    .sh-footer__bar-inner {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 30px;
    }
}

/* ---- Utilities ------------------------------------------------- */
.sh-mt-40 {
    margin-top: 40px;
}
.sh-mt-50 {
    margin-top: 56px;
}

/* ---- Responsive ------------------------------------------------ */
@media (max-width: 980px) {
    /* Mobile hero: wordmark (demolished) stacks above the copy */
    .sh-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch; /* reset desktop's align-items:end so the wordmark stays left */
        gap: 30px;
        padding: clamp(84px, 13vh, 116px) var(--pad) 64px;
    }
    .sh-hero__intro {
        max-width: none;
    }
    .sh-hero__badge {
        /* below the copy, clear of the wordmark and the swinging ball */
        top: auto;
        bottom: 48px;
        right: var(--pad);
        font-size: 34px;
        padding: 13px 15px;
    }
    .sh-hero__ground {
        bottom: 40px;
    }
    /* Contact bar: drop the working-area + hours and keep phone + email on one line */
    .sh-topbar__item--hide {
        display: none;
    }
    .sh-topbar__inner {
        justify-content: center;
        flex-wrap: nowrap;
    }
    .sh-topbar__group {
        flex-wrap: nowrap;
        gap: 20px;
    }
    .sh-intro,
    .sh-split,
    .sh-split-detail,
    .sh-contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .sh-section {
        padding-top: 72px;
    }
}

@media (max-width: 760px) {
    :root {
        --pad: 20px;
    }
    .sh-social {
        display: none;
    }
    .sh-topbar__inner {
        justify-content: center;
        min-height: 36px;
        flex-wrap: nowrap;
    }
    .sh-topbar__group {
        flex-wrap: nowrap;
        gap: 14px;
    }
    .sh-topbar__item {
        font-size: 11px;
        gap: 6px;
        letter-spacing: 0;
    }
    .sh-topbar__item svg {
        width: 13px;
        height: 13px;
    }
    .sh-topbar__item--hide {
        display: none;
    }
    /* Phone: the bar fits three items at most. Show stars + score and drop the
       review count; when a score is present the e-mail address goes too, since
       calling and the rating beat a mailto on a phone. */
    .sh-topbar__reviews {
        display: none;
    }
    .sh-stars svg {
        width: 12px;
        height: 12px;
    }
    .sh-topbar__inner:has(.sh-topbar__item--rating) .sh-topbar__item--email {
        display: none;
    }
    .sh-page-head__inner--split {
        grid-template-columns: 1fr;
    }
    .sh-page-head__wrecker {
        display: none;
    }
}

/* Tablet + mobile: collapse the inline nav into the slide-in menu. Measured, not
   guessed: below 1180px the full nav (three mega-triggers + six links + CTA) no
   longer fits on one line, and "Over ons" and the button both break in two. */
@media (max-width: 1180px) {
    .sh-nav__toggle {
        display: inline-flex;
    }

    /* Full-screen app-style menu */
    .sh-nav {
        position: fixed;
        inset: 0;
        z-index: 60;
        background: linear-gradient(165deg, var(--ink-2), var(--ink));
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 20px 28px max(40px, env(safe-area-inset-bottom));
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        transition:
            transform 0.42s cubic-bezier(0.76, 0, 0.24, 1),
            visibility 0.42s;
    }
    .sh-nav::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        background: repeating-linear-gradient(
            45deg,
            var(--ink) 0 12px,
            var(--hazard) 12px 24px
        );
    }
    .sh-nav.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .sh-nav__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .sh-nav__close {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        padding: 8px;
        margin: -8px;
    }
    .sh-nav__close svg {
        display: block;
        width: 30px;
        height: 30px;
    }

    .sh-nav__links {
        display: flex;
        flex-direction: column;
    }
    .sh-nav__link {
        font-family: Anton, sans-serif;
        font-size: clamp(30px, 9vw, 44px);
        line-height: 1;
        letter-spacing: 0;
        color: #fff;
        padding: 18px 0;
        border-bottom: 1px solid var(--ink-line);
    }
    .sh-nav__link::after {
        display: none;
    }
    .sh-nav__link[aria-current='page'] {
        color: var(--hazard);
    }

    /* Services open inline as a list inside the overlay */
    .sh-nav__item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .sh-nav__chev {
        display: block;
        width: 22px;
        height: 22px;
        color: var(--hazard);
    }
    .sh-nav__link--mega {
        justify-content: space-between;
    }
    /* Mega panels collapse into tap-to-open accordions inside the menu */
    .sh-mega {
        position: static;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: none;
        border: none;
        box-shadow: none;
        transition: max-height 0.34s ease;
    }
    .sh-nav__item--mega.is-open .sh-mega {
        max-height: 1600px;
    }
    .sh-mega__inner {
        display: block;
        max-width: none;
        margin: 0;
        padding: 4px 0 14px;
    }
    .sh-mega__head {
        display: none;
    }
    .sh-mega__grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .sh-mega__card {
        padding: 13px 0 13px 4px;
        border-bottom: 1px solid var(--ink-line);
        border-radius: 0;
    }
    .sh-mega__card:hover {
        background: none;
    }
    .sh-mega__name {
        font-size: 17px;
    }
    .sh-mega__tag,
    .sh-mega__arrow {
        display: none;
    }
    .sh-mega__all {
        margin-top: 8px;
    }

    .sh-nav .sh-nav__cta {
        /* Drops the desktop gutter, which left the full-width button sitting
           14px off-centre in the drawer. */
        margin: 28px 0 0;
        justify-content: center;
        font-size: 15px;
        padding: 18px;
    }

    .sh-nav__contact {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: auto;
        padding-top: 36px;
    }
    .sh-nav__contact-item {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: var(--font-mono);
        font-size: 14px;
        color: var(--on-dark);
    }
    .sh-nav__contact-item svg {
        flex: none;
        width: 18px;
        height: 18px;
        color: var(--hazard);
    }
    .sh-nav__social {
        display: flex;
        gap: 12px;
        margin-top: 12px;
    }
    .sh-nav__social a {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--ink-line);
        color: #fff;
        transition:
            background 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease;
    }
    .sh-nav__social a:hover {
        background: var(--hazard);
        color: var(--ink);
        border-color: var(--hazard);
    }
    .sh-nav__social svg {
        width: 18px;
        height: 18px;
    }

    /* Staggered reveal of the menu items */
    .sh-nav__links > *,
    .sh-nav__cta,
    .sh-nav__contact {
        opacity: 0;
        transform: translateX(26px);
        transition:
            opacity 0.45s ease,
            transform 0.45s ease,
            color 0.2s ease,
            background 0.2s ease,
            border-color 0.2s ease;
    }
    .sh-nav.is-open .sh-nav__links > *,
    .sh-nav.is-open .sh-nav__cta,
    .sh-nav.is-open .sh-nav__contact {
        opacity: 1;
        transform: none;
    }
    .sh-nav.is-open .sh-nav__links > *:nth-child(1) {
        transition-delay: 0.12s;
    }
    .sh-nav.is-open .sh-nav__links > *:nth-child(2) {
        transition-delay: 0.17s;
    }
    .sh-nav.is-open .sh-nav__links > *:nth-child(3) {
        transition-delay: 0.22s;
    }
    .sh-nav.is-open .sh-nav__links > *:nth-child(4) {
        transition-delay: 0.27s;
    }
    .sh-nav.is-open .sh-nav__links > *:nth-child(5) {
        transition-delay: 0.32s;
    }
    .sh-nav.is-open .sh-nav__links > *:nth-child(6) {
        transition-delay: 0.37s;
    }
    .sh-nav.is-open .sh-nav__cta {
        transition-delay: 0.42s;
    }
    .sh-nav.is-open .sh-nav__contact {
        transition-delay: 0.48s;
    }
}

@media (max-width: 760px) {
    .sh-field-row {
        grid-template-columns: 1fr;
    }
    .sh-footer__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .sh-footer__signoff {
        margin-top: 48px;
    }
    .sh-cta,
    .sh-cta--yellow {
        padding: 40px 26px;
    }
    .sh-cta__deco {
        display: none;
    }
    .sh-stat {
        border-right: none;
        border-bottom: 1px solid var(--ink-line);
    }
    .sh-fab {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 480px) {
    .sh-success__title {
        font-size: 36px;
    }
}

/* =================================================================
   Gallery · Before/After · Blog  (added with the v3 feature set)
   ================================================================= */

button.sh-chip {
    font: inherit;
    cursor: pointer;
}

.sh-emptybox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    border: 1px dashed var(--line);
    border-radius: 16px;
    padding: 56px 28px;
    text-align: center;
    color: var(--body);
}

.sh-emptybox p {
    margin: 0;
    max-width: 460px;
    font-size: 17px;
    line-height: 1.6;
}

/* ---- Gallery masonry ------------------------------------------- */
.sh-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
    margin-top: 30px;
}

.sh-masonry__item {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ink-2);
    cursor: zoom-in;
}

.sh-masonry__item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sh-masonry__item:hover img {
    transform: scale(1.05);
}

.sh-masonry__meta {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 34px 14px 13px;
    text-align: left;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.sh-masonry__item:hover .sh-masonry__meta,
.sh-masonry__item:focus-visible .sh-masonry__meta {
    opacity: 1;
    transform: none;
}

.sh-masonry__title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
}

.sh-masonry__svc {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hazard);
}

.sh-masonry__item[hidden] {
    display: none;
}

.sh-masonry__empty {
    padding: 50px 0;
    text-align: center;
    color: var(--muted);
}

/* ---- Lightbox -------------------------------------------------- */
.sh-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 3vw, 28px);
    padding: clamp(16px, 4vw, 48px);
    background: rgba(8, 7, 5, 0.95);
}

.sh-lightbox.is-open {
    display: flex;
}

.sh-lightbox__stage {
    margin: 0;
    max-width: min(1100px, 100%);
    display: flex;
    flex-direction: column;
}

.sh-lightbox__stage img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 6px;
    background: var(--ink-2);
}

.sh-lightbox__cap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 18px;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-dark);
}

.sh-lightbox__link {
    color: var(--hazard);
}

.sh-lightbox__close,
.sh-lightbox__nav {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.sh-lightbox__close:hover,
.sh-lightbox__nav:hover {
    background: var(--hazard);
    color: var(--ink);
    border-color: var(--hazard);
}

.sh-lightbox__close {
    position: absolute;
    top: 18px;
    right: 18px;
}

.sh-lightbox__close svg,
.sh-lightbox__nav svg {
    width: 22px;
    height: 22px;
}

/* Single-image lightbox: no prev/next arrows */
.sh-lightbox:not(.has-siblings) .sh-lightbox__nav {
    display: none;
}

/* Figure images that open the lightbox */
.sh-zoomable {
    cursor: zoom-in;
}

.sh-zoomable:focus-visible {
    outline: 3px solid var(--hazard);
    outline-offset: 3px;
}

/* ---- Before / After slider ------------------------------------- */
/* The client photos are phone shots at different crops, so both share one
   frame: site.js measures the pair and sets --ba-ratio to the geometric mean
   of their aspect ratios, the only centre that makes each photo give up the
   same share of its edges to object-fit: cover. Nothing is stretched and no
   letterbox bars appear. */
.sh-ba-list {
    display: grid;
    /* min() keeps the track inside viewports narrower than 360px, where a hard
       320px floor would push the frame under the clipped body edge. */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 28px;
    margin-top: 30px;
}

.sh-ba {
    /* The fallback is a portrait phone shot, close to what these pairs really
       are, so the frame barely moves once site.js has measured them. A definite
       width (rather than a min() against 100%) also lets an auto-sized grid
       track shrink to the frame, which is what .sh-media-lead relies on. */
    width: var(--ba-width, 480px);
    max-width: 100%;
    margin: 0 auto;
}

.sh-ba__media {
    --pos: 50%;
    position: relative;
    aspect-ratio: var(--ba-ratio, 3 / 4);
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--ink-2);
    user-select: none;
    /* This frame is the drag surface (see initBeforeAfter): horizontal drags
       belong to the wipe, while vertical panning and pinch-zoom stay with the
       browser. pinch-zoom matters because the slider is the tallest thing on a
       project page, so it is exactly where someone zooms in. */
    touch-action: pan-y pinch-zoom;
    /* Keeps an iOS long-press from raising the "save image" sheet over a drag. */
    -webkit-touch-callout: none;
    cursor: ew-resize;
    isolation: isolate;
}

.sh-ba__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    /* A touch of contrast reads as sharpness on soft, compressed sources. */
    filter: contrast(1.04) saturate(1.05);
}

/* Fine grain over the frame hides JPEG blocking and unifies the pair. */
.sh-ba__grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.14;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}

.sh-ba__after,
.sh-ba__before {
    position: absolute;
    inset: 0;
}

.sh-ba__after {
    z-index: 0;
}

/* The before photo is revealed from the left, and its "Voor" badge lives inside
   this pane so the wipe clips the label along with the photo it names. */
.sh-ba__before {
    z-index: 1;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* The handle spans the whole frame and is moved with a transform rather than
   positioned with left: a percentage transform resolves against the element's
   own width, which here IS the frame width, so translateX(var(--pos)) lands in
   the same place while costing a composite instead of a layout and a repaint of
   the grip's shadow on every frame of a drag. The hairline itself is the
   pseudo-element at the handle's left edge. */
.sh-ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    transform: translateX(var(--pos));
    pointer-events: none;
}

.sh-ba__handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--hazard);
    transform: translateX(-50%);
}

.sh-ba__grip {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--hazard);
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.sh-ba__grip svg {
    width: 24px;
    height: 24px;
}

.sh-ba__tag {
    position: absolute;
    top: 12px;
    padding: 5px 9px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.58);
    pointer-events: none;
}

.sh-ba__tag--before {
    left: 12px;
}

.sh-ba__tag--after {
    right: 12px;
    color: var(--ink);
    background: var(--hazard);
}

/* Invisible, and reachable by keyboard and assistive tech only: pointer drags
   are handled on the frame instead, because WebKit refuses to track a range
   drag that does not start on the thumb. site.js drops this input's
   pointer-events once it takes the gesture over. It still sits on top of the
   photos so a tab-focused slider is never covered. */
.sh-ba__range {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    background: transparent;
    opacity: 0;
    cursor: ew-resize;
    /* Horizontal drags belong to the wipe; vertical scroll and pinch stay with
       the browser, so the slider never traps the page. */
    touch-action: pan-y pinch-zoom;
}

/* A hairline thumb keeps the usable track the full width of the frame. */
.sh-ba__range::-webkit-slider-thumb {
    appearance: none;
    width: 2px;
    height: 100%;
    border: 0;
    background: transparent;
}

.sh-ba__range::-moz-range-thumb {
    width: 2px;
    height: 100%;
    border: 0;
    background: transparent;
}

/* While a drag is live, every frame moves the wipe edge. Two things there are
   expensive on a phone: the photos' contrast filter, which is re-rastered on
   each repaint unless the image sits on its own layer, and the grain, because a
   blend mode has to be recomputed over the whole frame whenever anything under
   it changes.

   So the layers are promoted from the moment the frame is pressed (is-dragging,
   purely a hint, no visible effect) and the grain stops blending only once the
   wipe is really the thing moving (is-wiping), which keeps a page scroll that
   happened to start on the photo from changing how it looks. Both revert on
   release, and an idle slider pays nothing.

   If the texture change on grab ever reads as a pop, drop the grain rule: it is
   the more aggressive of the two. */
.sh-ba__media.is-dragging .sh-ba__img,
.sh-ba__media.is-dragging .sh-ba__handle {
    will-change: transform;
}

.sh-ba__media.is-wiping .sh-ba__grain {
    mix-blend-mode: normal;
    opacity: 0.07;
}

.sh-ba__media:focus-within .sh-ba__grip {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.sh-ba__caption {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--body);
}

/* ---- Project lead: the slider sits beside the intro ------------- */
/* These pairs are portrait phone shots, so the frame cannot fill a 1256px
   column on its own without cropping the photos away. It shares the row with
   the heading, intro and project facts instead. The first track is auto so it
   collapses to whatever width site.js measured for the frame. */
.sh-media-lead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 44px;
}

.sh-media-lead__intro {
    margin: 16px 0 26px;
    font-size: 19px;
    line-height: 1.65;
    color: var(--body);
}

/* On a service page the call to action closes the column beside the slider. */
.sh-media-lead__cta {
    margin-top: 28px;
}

@media (max-width: 900px) {
    .sh-media-lead {
        /* minmax(0, ...), never a bare 1fr: the frame carries a definite width
           from site.js, which a 1fr track would adopt as its minimum and push
           the whole column (slider, text and call to action) past the screen. */
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }
}

/* ---- Blog ------------------------------------------------------ */
.sh-grid-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}

.sh-post-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.sh-post-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.13);
    border-color: var(--ink);
}

.sh-post-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.sh-post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

.sh-post-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    padding: 22px;
}

.sh-post-card__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.sh-post-card__title {
    margin: 0;
    font-family: Anton, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--ink);
}

.sh-post-card__excerpt {
    margin: 0;
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
    color: var(--body);
}

.sh-post-card--dark {
    background: var(--ink-2);
    border-color: var(--ink-line);
}

.sh-post-card--dark:hover {
    border-color: var(--hazard);
}

.sh-post-card--dark .sh-post-card__title {
    color: #fff;
}

.sh-post-card--dark .sh-post-card__meta {
    color: var(--on-dark-dim);
}

.sh-post-head__meta {
    margin: 18px 0 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hazard);
}

.sh-article a {
    color: var(--hazard-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sh-article ul,
.sh-article ol {
    margin: 1em 0;
    padding-left: 1.4em;
}

.sh-article ul {
    list-style: disc;
}

.sh-article ol {
    list-style: decimal;
}

.sh-article li {
    margin: 0.4em 0;
    line-height: 1.7;
}

.sh-article h3 {
    margin: 1.4em 0 0.4em;
    font-family: Anton, sans-serif;
    font-weight: 400;
    font-size: 22px;
    text-transform: uppercase;
}

.sh-article blockquote {
    margin: 1.3em 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--hazard);
    font-style: italic;
    color: var(--dark-text);
}

/* Editor content opens a new section with an h2, but .sh-prose h2 has no top
   margin, so a mid-body heading got less air than the h3 beneath it. */
.sh-article h2 {
    margin-top: 1.6em;
}

.sh-article > :first-child {
    margin-top: 0;
}

/* The editor can also emit these from markdown shortcuts (--- for a rule,
   backticks for code), so they need styling rather than UA defaults. */
.sh-article hr {
    margin: 1.8em 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.sh-article code {
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.06);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.sh-article pre {
    margin: 1.3em 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
    /* Without this a long line widens the grid column and breaks the page. */
    overflow-x: auto;
}

.sh-article pre code {
    padding: 0;
    background: none;
}

.sh-article__foot {
    margin-top: 38px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.sh-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 52px;
}

.sh-pager__link {
    padding: 10px 16px;
    border: 1.5px solid var(--ink);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.sh-pager__link:hover {
    background: var(--ink);
    color: #fff;
}

.sh-pager__link.is-disabled {
    pointer-events: none;
    opacity: 0.45;
    border-color: var(--line);
    color: var(--muted);
}

.sh-pager__info {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}

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

@media (max-width: 760px) {
    .sh-lightbox__nav {
        display: none;
    }
}