/*
Theme Name: Refined Rides
Theme URI: https://refinedrides.nl
Template: blocksy
Author: en-masse
Author URI: https://en-masse.nl
Description: Child theme for Refined Rides - light-premium auto detailing (Nuenen). Re-skinned to the Refined Rides Design System: navy ink bands, copper accent, Montserrat + Hanken Grotesk. Design lives in theme.json + tokens.css + this stylesheet so it stays in version control.
Version: 0.16.2
Text Domain: refined-rides
*/

/* ===========================================================================
   Refined Rides - LIGHT-premium theme styling.
   Colour/role/type/radius/shadow tokens live in assets/css/tokens.css (the
   single source of truth, enqueued first). Everything below reads the --rr-*
   tokens, so re-skinning is a tokens-only change.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Base canvas (light) + typography
   --------------------------------------------------------------------------- */
html,
body,
#main,
.ct-main-styles,
.ct-container,
.entry-content {
    background-color: var(--rr-base) !important;
    color: var(--rr-contrast);
}

body {
    font-family: var(--rr-font-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--rr-font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.08;
    color: var(--rr-contrast);
}

/* Display treatment: heavy caps are reserved for the H1 - the one imposing,
   poster-like brand moment per view (hero tagline, page titles). */
h1 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.04;
}

/* Section headings stay calm: normal case, tight tracking - the premium
   counterweight to the caps H1. Components with their own smaller h2s
   (footer headings, card titles) override this locally. */
h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

h2.wp-block-heading {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

a { color: var(--rr-accent); }

/* Pages provide their own H1 in the content - hide Blocksy's page-title hero */
.page .hero-section,
.page .entry-header,
.page .page-title {
    display: none !important;
}

/* Full-width sections butt together - no gaps between them */
.home .entry-content > *,
.home .entry-content > .alignfull,
.page .entry-content > .alignfull,
.page .entry-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   Navy "ink" bands (hero / CTA / footer) + automatic text inversion.
   Sections set backgroundColor:"ink" (or a cover overlayColor:"ink"); the rules
   below paint the signature paint-sheen and flip the block colour classes
   (contrast / muted / accent) to their on-dark variants, so the same block
   markup reads correctly on light AND on navy.
   --------------------------------------------------------------------------- */
.has-ink-background-color,
.has-ink-deep-background-color,
.wp-block-cover {
    background-image: var(--rr-sheen);
}

.has-ink-background-color,
.has-ink-deep-background-color {
    color: var(--rr-on-dark);
}

.has-ink-background-color :where(h1, h2, h3, h4, h5, h6),
.has-ink-deep-background-color :where(h1, h2, h3, h4, h5, h6),
.wp-block-cover__inner-container :where(h1, h2, h3, h4, h5, h6) {
    color: var(--rr-on-dark);
}

.has-ink-background-color .has-contrast-color,
.has-ink-deep-background-color .has-contrast-color,
.wp-block-cover__inner-container .has-contrast-color {
    color: var(--rr-on-dark) !important;
}

.has-ink-background-color .has-muted-color,
.has-ink-deep-background-color .has-muted-color,
.wp-block-cover__inner-container .has-muted-color {
    color: var(--rr-on-dark-muted) !important;
}

.has-ink-background-color .has-accent-color,
.has-ink-deep-background-color .has-accent-color,
.wp-block-cover__inner-container .has-accent-color {
    color: var(--rr-accent-on-dark) !important;
}

/* Outline (ghost) buttons sitting on a navy band */
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover__inner-container .wp-block-button.is-style-outline .wp-block-button__link {
    color: var(--rr-on-dark) !important;
    border-color: var(--rr-border-on-dark-strong) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-cover__inner-container .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
}

/* ---------------------------------------------------------------------------
   Header: solid navy bar (light logo + nav), copper hover + CTA item.
   A solid bar reads cleanly over the navy hero AND over the light inner pages,
   so it works everywhere without a fragile transparent/sticky setup.
   --------------------------------------------------------------------------- */
#header.ct-header,
#header [data-row],
#header [data-column],
#header [data-device] {
    background-color: var(--rr-ink) !important;
    box-shadow: none !important;
    border: none !important;
}

#header a,
#header .menu a,
#header .site-name a,
#header .ct-logo-container a {
    color: var(--rr-on-dark) !important;
}

#header .menu a:hover,
#header a:hover {
    color: var(--rr-accent-on-dark) !important;
}

/* The logo already carries the brand name, so hide Blocksy's text site-title. */
#header .site-title-container {
    display: none !important;
}

/* Header CTA menu item -> copper button */
#header li.rr-menu-cta > a,
#header .rr-menu-cta a {
    background: var(--rr-accent);
    color: #fff !important;
    padding: 0.6rem 1.3rem;
    border-radius: var(--rr-radius-control);
    font-weight: 600;
}

#header li.rr-menu-cta > a:hover,
#header .rr-menu-cta a:hover {
    background: var(--rr-accent-hover);
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Blocksy footer wrapper
   --------------------------------------------------------------------------- */
#footer.ct-footer,
#footer [data-row] {
    background-color: var(--rr-footer) !important;
    color: var(--rr-on-dark-muted) !important;
}

#footer a { color: var(--rr-on-dark-muted) !important; }
#footer a:hover { color: var(--rr-accent-on-dark) !important; }

.ct-footer-copyright { display: none !important; }

/* ===========================================================================
   Buttons (.rr-btn shortcode buttons + core wp-block-button)
   =========================================================================== */
.wp-block-button__link {
    border-radius: var(--rr-radius-control) !important;
    font-weight: 600;
    padding: 0.8rem 1.6rem;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
    background-color: var(--rr-accent);
    color: #fff;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
    background-color: var(--rr-accent-hover);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
    border-width: 1.5px;
    border-color: var(--rr-border-strong);
    color: var(--rr-contrast);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
    background-color: var(--rr-accent-wash) !important;
    border-color: var(--rr-accent) !important;
    color: var(--rr-accent) !important;
}

.rr-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.85rem 1.8rem;
    border-radius: var(--rr-radius-control);
    font-family: var(--rr-font-body);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.06s ease;
}

.rr-btn:active { transform: translateY(1px); }

.rr-btn--primary,
.rr-btn--secondary {
    background: var(--rr-accent);
    color: #fff;
    border: 1.5px solid var(--rr-accent);
}

.rr-btn--primary:hover,
.rr-btn--secondary:hover {
    background: var(--rr-accent-hover);
    border-color: var(--rr-accent-hover);
    color: #fff;
}

.rr-btn--outline {
    background: transparent;
    color: var(--rr-contrast);
    border: 1.5px solid var(--rr-border-strong);
}

.rr-btn--outline:hover {
    border-color: var(--rr-contrast);
    background: var(--rr-contrast);
    color: #fff;
}

.rr-btn--ghost {
    background: transparent;
    color: var(--rr-contrast);
    border: 1.5px solid transparent;
}

.rr-btn--ghost:hover { color: var(--rr-accent); background: var(--rr-accent-wash); }

.rr-btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }
.rr-btn--sm { padding: 0.6rem 1.2rem; font-size: 0.9rem; }

/* Ghost / outline buttons placed on a navy band */
.has-ink-background-color .rr-btn--ghost,
.has-ink-background-color .rr-btn--outline {
    color: var(--rr-on-dark);
    border-color: var(--rr-border-on-dark-strong);
}

.has-ink-background-color .rr-btn--ghost:hover,
.has-ink-background-color .rr-btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.42);
}

/* ===========================================================================
   Generic helpers
   =========================================================================== */
.rr-link {
    color: var(--rr-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.rr-link:hover { border-bottom-color: var(--rr-accent); }

/* Eyebrow / kicker - wide-tracked copper label */
.rr-usp { margin: 0; font-size: 0.95rem; }

/* Hero tagline (the H1) - the heaviest cut, tight leading, poster-like */
.rr-hero__tagline {
    margin: 0.25rem 0 0;
    font-family: var(--rr-font-display);
    font-weight: 900;
    letter-spacing: -0.01em;
}

/* ===========================================================================
   Service cards (diensten overview)
   =========================================================================== */
.rr-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
    text-align: left;
}

.rr-services__card {
    display: flex;
    flex-direction: column;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius-card);
    box-shadow: var(--rr-shadow-sm);
    padding: 1.75rem;
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s var(--rr-ease, cubic-bezier(0.16,1,0.3,1)), box-shadow 0.25s ease;
}

.rr-services__card:hover {
    border-color: var(--rr-border);
    transform: translateY(-4px);
    box-shadow: var(--rr-shadow-lg);
}

.rr-services__media {
    display: block;
    margin: -1.75rem -1.75rem 1.5rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.rr-services__media img,
.rr-services__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rr-services__index {
    font-family: var(--rr-font-mono);
    color: var(--rr-accent);
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.rr-services__title {
    display: block;
    margin: 0.4rem 0 0.75rem;
    font-family: var(--rr-font-display);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--rr-contrast);
}

.rr-services__text {
    color: var(--rr-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    flex: 1 1 auto;
}

.rr-services__price {
    display: block;
    margin-top: 1.5rem;
    font-family: var(--rr-font-mono);
    color: var(--rr-contrast);
    font-weight: 500;
}

.rr-services__price em {
    color: var(--rr-muted);
    font-weight: 400;
    font-style: normal;
    font-size: 0.82rem;
    font-family: var(--rr-font-body);
}

.rr-services__more {
    display: inline-block;
    margin-top: 1rem;
    color: var(--rr-accent);
    font-size: 0.9rem;
    font-weight: 600;
}

/* ===========================================================================
   Pricing list (service pages)
   =========================================================================== */
.rr-pricing { text-align: left; }

.rr-pricing__row {
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--rr-border);
}

.rr-pricing__row:first-child { border-top: 1px solid var(--rr-border); }

.rr-pricing__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.rr-pricing__name {
    font-family: var(--rr-font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--rr-contrast);
}

.rr-pricing__price {
    font-family: var(--rr-font-mono);
    color: var(--rr-accent);
    font-weight: 500;
    white-space: nowrap;
}

.rr-pricing__desc {
    margin: 0.5rem 0 0;
    color: var(--rr-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.rr-pricing__row--option {
    border-left: 2px solid var(--rr-accent);
    padding-left: 1rem;
}

.rr-pricing__surcharge,
.rr-pricing__note {
    margin-top: 1.25rem;
    color: var(--rr-muted);
    font-size: 0.95rem;
}

.rr-pricing__surcharge strong { color: var(--rr-contrast); }

.rr-pricing__vat {
    margin-top: 0.75rem;
    color: var(--rr-muted);
    font-size: 0.82rem;
    font-style: italic;
}

/* ===========================================================================
   Process steps
   =========================================================================== */
.rr-process {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: rr-step;
}

.rr-process__step { display: block; text-align: left; }

.rr-process__num {
    display: block;
    color: var(--rr-accent);
    font-family: var(--rr-font-mono);
    font-weight: 500;
    font-size: 1.9rem;
    letter-spacing: -0.02em;
}

.rr-process__title {
    display: block;
    margin: 0.35rem 0 0.4rem;
    font-family: var(--rr-font-display);
    color: var(--rr-contrast);
    font-weight: 700;
}

.rr-process__desc {
    display: block;
    color: var(--rr-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Full werkwijze list: a vertical timeline. Each step gets a round number
   badge on a connecting spine; the badge fills copper on hover - the same
   quiet interaction language as the compact home variant. */
.rr-process:not(.rr-process--compact) {
    display: grid;
    gap: 0;
    max-width: 720px;
    margin: 0 auto;
}

.rr-process:not(.rr-process--compact) .rr-process__step {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    column-gap: 1.75rem;
    align-items: start;
    padding-bottom: 2.75rem;
}

.rr-process:not(.rr-process--compact) .rr-process__step:last-child { padding-bottom: 0; }

/* The spine connecting the badges (skipped after the last step) */
.rr-process:not(.rr-process--compact) .rr-process__step::before {
    content: "";
    position: absolute;
    left: calc(1.75rem - 1px);
    top: 3.9rem;
    bottom: 0.4rem;
    width: 2px;
    background: var(--rr-border);
}

.rr-process:not(.rr-process--compact) .rr-process__step:last-child::before { display: none; }

.rr-process:not(.rr-process--compact) .rr-process__num {
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--rr-surface);
    border: 1.5px solid var(--rr-border-strong);
    box-shadow: var(--rr-shadow-sm);
    font-size: 1.05rem;
    letter-spacing: 0;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.rr-process:not(.rr-process--compact) .rr-process__step:hover .rr-process__num {
    background: var(--rr-accent);
    border-color: var(--rr-accent);
    color: #fff;
}

.rr-process:not(.rr-process--compact) .rr-process__title {
    font-size: 1.2rem;
    margin-top: 0.15rem;
}

.rr-process--compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.75rem;
}

.rr-process--compact .rr-process__step {
    position: relative;
    border-top: 2px solid var(--rr-border);
    padding-top: 1.1rem;
}

/* Copper progress segment on the top rule; it sweeps to full width on hover -
   a quiet nod to "polishing" without turning the section into a gimmick. */
.rr-process--compact .rr-process__step::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    height: 2px;
    width: 2.25rem;
    background: var(--rr-accent);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.rr-process--compact .rr-process__step:hover::before { width: 100%; }

/* Scroll-reveal: steps fade-up with a small stagger (delay set in forms.js).
   Gated on .rr-anim, which the JS only adds when IntersectionObserver exists
   and the visitor has no reduced-motion preference - no-JS keeps everything
   visible. */
.rr-anim .rr-process__step {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.rr-anim .rr-process__step.is-inview {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================================================================
   Service area chips
   =========================================================================== */
.rr-area {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.rr-area__item {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius-pill);
    background: var(--rr-surface);
    color: var(--rr-contrast);
    font-size: 0.95rem;
}

.rr-area__item--muted {
    color: var(--rr-muted);
    border-style: dashed;
    background: transparent;
}

/* On a navy band, chips invert */
.has-ink-background-color .rr-area__item {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--rr-border-on-dark);
    color: var(--rr-on-dark);
}

/* ===========================================================================
   Contact card
   =========================================================================== */
.rr-contact-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    text-align: left;
}

.rr-contact-card__block {
    padding: 1.4rem 1.5rem;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius-card);
    box-shadow: var(--rr-shadow-sm);
}

.rr-contact-card__label {
    display: block;
    color: var(--rr-muted);
    font-family: var(--rr-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.45rem;
}

.rr-contact-card__value {
    color: var(--rr-contrast);
    font-style: normal;
    font-size: 1.05rem;
    text-decoration: none;
    line-height: 1.5;
}

.rr-contact-card__note {
    grid-column: 1 / -1;
    margin: 0.25rem 0 0;
    color: var(--rr-muted);
    font-size: 0.95rem;
}

/* ===========================================================================
   Projects grid
   =========================================================================== */
.rr-projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
    text-align: left;
}

.rr-projects__card {
    display: flex;
    flex-direction: column;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius-card);
    box-shadow: var(--rr-shadow-sm);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.rr-projects__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--rr-shadow-lg);
}

.rr-projects__media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.rr-projects__media img,
.rr-projects__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover shine: the same "light over lacquer" sweep as the hero, wiped across
   the photo once each time the card is hovered. Reuses the rr-hero-shine
   keyframe; gated so it never runs under reduced motion. */
.rr-projects__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.20) 50%, transparent 60%);
    transform: translateX(-130%);
}

@media (prefers-reduced-motion: no-preference) {
    .rr-projects__card:hover .rr-projects__media::after {
        animation: rr-hero-shine 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1;
    }
}

.rr-projects__title {
    display: block;
    padding: 1.2rem 1.4rem 0;
    font-family: var(--rr-font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    color: var(--rr-contrast);
}

.rr-projects__text {
    display: block;
    padding: 0.4rem 1.4rem 1.4rem;
    color: var(--rr-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.rr-projects__empty { color: var(--rr-muted); text-align: center; }

/* ===========================================================================
   Before / after - draggable reveal slider (behaviour in forms.js).
   The before image sits in flow and sets the height; the after image is an
   absolute overlay clipped from the left by --rr-ba-pos. A copper divider +
   grip marks the split; the whole surface is draggable and the hidden range
   keeps it keyboard- and screen-reader-operable. Without JS it holds a static
   50/50 split. touch-action:pan-y keeps vertical page scrolling while we own
   the horizontal drag.
   =========================================================================== */
.rr-beforeafter {
    position: relative;
    margin: 2rem 0;
    border-radius: var(--rr-radius-card);
    overflow: hidden;
    background: var(--rr-mist);
    box-shadow: var(--rr-shadow-sm);
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    cursor: ew-resize;
}

.rr-beforeafter__img--before { display: block; width: 100%; height: auto; }

.rr-beforeafter__after {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--rr-ba-pos, 50%));
    will-change: clip-path;
}

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

.rr-beforeafter__tag {
    position: absolute;
    top: 0.85rem;
    padding: 0.3rem 0.85rem;
    color: #fff;
    font-family: var(--rr-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--rr-radius-pill);
    pointer-events: none;
    z-index: 2;
}

.rr-beforeafter__tag--before { left: 0.85rem; background: var(--rr-overlay); }
.rr-beforeafter__tag--after { right: 0.85rem; background: var(--rr-accent); }

/* Invisible full-bleed control: focusable for keyboard, transparent to drags
   (the divider/grip above it are pointer-events:none, so pointer events fall
   through to forms.js on the container). */
.rr-beforeafter__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: ew-resize;
    touch-action: pan-y;
    z-index: 3;
}

.rr-beforeafter__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--rr-ba-pos, 50%);
    width: 2px;
    background: var(--rr-accent);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 4;
}

.rr-beforeafter__grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rr-accent);
    box-shadow: var(--rr-shadow-md);
    display: grid;
    place-items: center;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s;
}

/* Twin drag arrows drawn from a glyph - no icon dependency. */
.rr-beforeafter__grip::before {
    content: "\2194";
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
}

.rr-beforeafter:hover .rr-beforeafter__grip { transform: translate(-50%, -50%) scale(1.06); }
.rr-beforeafter__range:focus-visible ~ .rr-beforeafter__divider .rr-beforeafter__grip {
    box-shadow: 0 0 0 4px var(--rr-accent-wash), var(--rr-shadow-md);
}

/* ===========================================================================
   Full-bleed bands - sections used by the PHP templates (single-project.php).
   Mirrors the seeded rr_b_group() sections: 6rem vertical rhythm, ink/surface
   variants, constrained inner widths.
   =========================================================================== */
.rr-band { padding: 6rem clamp(1.25rem, 5vw, 1.5rem); }

.rr-band--ink {
    background-color: var(--rr-ink);
    background-image: var(--rr-sheen);
}

.rr-band--surface { background: var(--rr-surface); }

.rr-band__in { max-width: 1180px; margin: 0 auto; }
.rr-band__in--narrow { max-width: 860px; }
.rr-band__in--content { max-width: 1020px; }

.rr-band__head { text-align: center; margin-bottom: 2.75rem; }
.rr-band__head h2 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
.rr-band__actions { display: flex; justify-content: center; margin-top: 2.5rem; }

/* Kicker - wide-tracked copper label (the class twin of rr_b_kicker()) */
.rr-kicker {
    margin: 0 0 1rem;
    font-family: var(--rr-font-mono);
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--rr-accent);
}

.rr-band--ink .rr-kicker { color: var(--rr-accent-on-dark); }

/* ===========================================================================
   Project single (single-project.php)
   =========================================================================== */
.rr-project__hero {
    text-align: center;
    /* Extra bottom room: the media card below overlaps this band's edge. */
    padding-top: 4.5rem;
    padding-bottom: 9.5rem;
}

.rr-project__title {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    letter-spacing: -0.02em;
}

.rr-project__lead {
    max-width: 640px;
    margin: 1.25rem auto 0;
    color: var(--rr-on-dark-muted);
    font-size: 1.1rem;
    line-height: 1.6;
}

.rr-project__specs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 2rem 0 0;
}

.rr-project__spec {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--rr-border-on-dark);
    border-radius: var(--rr-radius-pill);
    background: rgba(255, 255, 255, 0.06);
}

.rr-project__spec dt {
    font-family: var(--rr-font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--rr-on-dark-muted);
}

.rr-project__spec dd { margin: 0; color: var(--rr-on-dark); font-size: 0.92rem; font-weight: 600; }

/* Body band: media (before/after or featured image) pulls up over the hero edge */
.rr-project__body { padding-top: 0; }

.rr-project__media {
    position: relative;
    z-index: 1;
    margin: -7rem 0 0;
    border-radius: var(--rr-radius-card);
    overflow: hidden;
    box-shadow: var(--rr-shadow-xl);
}

.rr-project__media img { display: block; width: 100%; height: auto; }

.rr-project__body .rr-beforeafter {
    position: relative;
    z-index: 1;
    margin: -7rem 0 0;
}

/* Result: an editorial statement, not a floating card. The copper mono eyebrow
   + centred lead reuse the site's kicker/lead vocabulary so it reads as the
   caption to the media above rather than a stray box. */
.rr-project__result {
    max-width: 760px;
    margin: 3.25rem auto 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    text-align: center;
    color: var(--rr-contrast);
    font-family: var(--rr-font-body);
    font-weight: 500;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.rr-project__result strong {
    display: block;
    margin-bottom: 0.9rem;
    color: var(--rr-accent);
    font-family: var(--rr-font-mono);
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.rr-project__content {
    max-width: 760px;
    margin: 2.75rem auto 0;
    color: var(--rr-graphite);
    line-height: 1.7;
}

.rr-project__content > * + * { margin-top: 1.25rem; }

/* ===========================================================================
   CTA band (a white card; reads premium on light or on a navy band)
   =========================================================================== */
.rr-cta {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius-card);
    box-shadow: var(--rr-shadow-md);
}

.rr-cta__title {
    margin: 0 0 1rem;
    font-family: var(--rr-font-display);
    font-weight: 800;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    letter-spacing: -0.015em;
    color: var(--rr-contrast);
}

.rr-cta__text { max-width: 560px; margin: 0 auto 1.75rem; color: var(--rr-muted); line-height: 1.6; }

.rr-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ===========================================================================
   404
   =========================================================================== */
.rr-404 { text-align: center; padding: 6rem 1.5rem 7rem; max-width: 640px; margin: 0 auto; }

.rr-404__code {
    color: var(--rr-accent);
    font-family: var(--rr-font-mono);
    font-weight: 500;
    font-size: clamp(4rem, 12vw, 8rem);
    line-height: 1;
    margin: 0;
}

.rr-404__title { color: var(--rr-contrast); margin: 0.5rem 0 1rem; }
.rr-404__text { color: var(--rr-muted); margin-bottom: 2rem; }
.rr-404__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ===========================================================================
   Branded footer (inc/footer.php)
   =========================================================================== */
.rr-footer {
    background: var(--rr-footer);
    background-image: var(--rr-sheen);
    padding: 4rem 0 2rem;
    border-top: 1px solid var(--rr-border-on-dark);
}

.rr-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.5rem; }
.rr-footer__logo { display: inline-block; }
.rr-footer__logo img { height: 52px; width: auto; }

.rr-footer__brand p { margin: 0.9rem 0 0; color: var(--rr-on-dark-muted); font-size: 0.92rem; line-height: 1.6; max-width: 32ch; }

.rr-footer__heading {
    color: var(--rr-on-dark);
    font-family: var(--rr-font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 1rem;
}

.rr-footer__col ul { list-style: none; margin: 0; padding: 0; }
.rr-footer__col li { margin-bottom: 0.55rem; }
.rr-footer a { color: var(--rr-on-dark-muted); text-decoration: none; transition: color 0.2s ease; }
.rr-footer a:hover { color: var(--rr-accent-on-dark); }

.rr-footer__address { font-style: normal; color: var(--rr-on-dark-muted); margin-bottom: 1rem; line-height: 1.6; }
.rr-footer__area { margin-top: 1rem; color: var(--rr-on-dark-faint); font-size: 0.85rem; }

.rr-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rr-border-on-dark);
}

.rr-footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.rr-footer__copyright { margin: 0; color: var(--rr-on-dark-faint); font-size: 0.85rem; }

/* ===========================================================================
   Contact Form 7 - light premium styling
   =========================================================================== */
.wpcf7 .rr-form-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.wpcf7 .rr-form-row > label { flex: 1 1 220px; }

.wpcf7 label {
    display: block;
    margin-bottom: 1.2rem;
    color: var(--rr-contrast);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
    margin-top: 0.45rem;
    padding: 0.8rem 1rem;
    background: var(--rr-surface-2);
    border: 1.5px solid var(--rr-border-strong);
    border-radius: var(--rr-radius-control);
    color: var(--rr-contrast);
    font-family: var(--rr-font-body);
    font-size: 1rem;
    font-weight: 400;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: var(--rr-faint); }

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    outline: none;
    border-color: var(--rr-accent);
    box-shadow: var(--rr-focus);
}

.wpcf7 textarea { min-height: 140px; resize: vertical; }

/* Blocksy clamps fields to 40px; drop the select's vertical padding so the
   option text centres, and add a copper chevron (appearance:none removes the native one). */
.wpcf7 select {
    appearance: none;
    -webkit-appearance: none;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23B85020' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.75rem;
    cursor: pointer;
}

.wpcf7 input[type="submit"] {
    width: auto;
    margin-top: 0.5rem;
    padding: 0.9rem 2.25rem;
    background: var(--rr-accent);
    color: #fff;
    border: none;
    border-radius: var(--rr-radius-control);
    font-family: var(--rr-font-body);
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background 0.18s ease;
}

.wpcf7 input[type="submit"]:hover { background: var(--rr-accent-hover); }

.wpcf7 select option { background: var(--rr-surface); color: var(--rr-contrast); }

.wpcf7 .wpcf7-radio .wpcf7-list-item { display: block; margin: 0 0 0.4rem; }
.wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.wpcf7-acceptance label {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: var(--rr-muted);
    font-weight: 400;
}

.rr-form-missing { color: var(--rr-muted); }

/* Offerte two-column hero: intro left, form card right */
.rr-offerte-hero { align-items: flex-start; }

.rr-form-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius-card);
    box-shadow: var(--rr-shadow-lg);
    padding: 2rem 2rem 2.25rem;
}

.rr-offerte-hero .rr-list { margin-top: 1.75rem; list-style: none; padding-left: 0; }

.rr-offerte-hero .rr-list li {
    position: relative;
    padding-left: 1.7rem;
    margin-bottom: 0.6rem;
    color: var(--rr-contrast);
}

.rr-offerte-hero .rr-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--rr-accent);
    font-weight: 700;
}

/* The offerte hero sits on a navy band - invert its left-column text + bullets */
.has-ink-background-color .rr-offerte-hero .rr-list li { color: var(--rr-on-dark); }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 880px) {
    .rr-footer__cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 600px) {
    .rr-footer__cols { grid-template-columns: 1fr; }
    .rr-beforeafter__grip { width: 40px; height: 40px; }
    .rr-pricing__head { flex-direction: column; gap: 0.25rem; }
    .rr-band { padding-top: 4rem; padding-bottom: 4rem; }
    .rr-project__hero { padding-bottom: 7rem; }
    .rr-project__media,
    .rr-project__body .rr-beforeafter { margin-top: -4.5rem; }
    .rr-process:not(.rr-process--compact) .rr-process__step { grid-template-columns: 2.75rem 1fr; column-gap: 1.1rem; }
    .rr-process:not(.rr-process--compact) .rr-process__num { width: 2.75rem; height: 2.75rem; font-size: 0.9rem; }
    .rr-process:not(.rr-process--compact) .rr-process__step::before { left: calc(1.375rem - 1px); top: 3.1rem; }
}

/* ===========================================================================
   Branded site header (inc/header.php) - solid navy "ink" sticky bar, matching
   the Design System header. Blocksy's own header is hidden in favour of it.
   =========================================================================== */
#header.ct-header { display: none !important; }

html { scroll-padding-top: 86px; } /* in-page anchors clear the sticky bar */

.rr-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    border-bottom: 1px solid transparent;
    transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease, padding .3s ease;
}

/* Solid navy once scrolled - and always, on pages without a dark hero. */
.rr-nav.is-scrolled,
.rr-nav--solid {
    background-color: var(--rr-ink);
    background-image: var(--rr-sheen);
    box-shadow: 0 8px 28px -12px rgba(7, 19, 29, .55);
    border-bottom-color: var(--rr-border-on-dark);
}

.rr-nav.is-scrolled .rr-nav__in { padding-top: .65rem; padding-bottom: .65rem; }
.rr-nav.is-scrolled .rr-nav__logo img { height: 34px; }

.admin-bar .rr-nav { top: 32px; }

.rr-nav__in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.85rem clamp(1.25rem, 5vw, 1.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.rr-nav__logo { display: block; flex: none; }
/* Bigger brand moment at the top of the page; the scrolled (sticky) bar keeps
   the compact 34px logo via .rr-nav.is-scrolled above. */
.rr-nav__logo img { height: 52px; width: auto; display: block; }

.rr-nav__links { display: flex; align-items: center; gap: 1.75rem; }

.rr-nav__links a {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.rr-nav__links a:hover { color: var(--rr-accent-on-dark); }

.rr-nav__cta { display: flex; align-items: center; gap: 1.25rem; }

.rr-nav__phone {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.rr-nav__phone:hover { color: var(--rr-accent-on-dark); }

.rr-nav__burger {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    width: 42px;
    height: 42px;
    padding: 9px;
}

.rr-nav__burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.rr-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rr-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.rr-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rr-nav__mobile {
    display: none;
    flex-direction: column;
    padding: 0.25rem clamp(1.25rem, 5vw, 1.5rem) 1.5rem;
    background: var(--rr-ink-deep);
    border-top: 1px solid var(--rr-border-on-dark);
}

.rr-nav__mobile a {
    color: #fff;
    text-decoration: none;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--rr-border-on-dark);
    font-weight: 500;
}

.rr-nav__mobile a.rr-btn { border-bottom: none; margin-top: 1rem; justify-content: center; }

@media (max-width: 860px) {
    .rr-nav__links,
    .rr-nav__phone,
    .rr-nav__offerte { display: none; }
    .rr-nav__burger { display: block; }
    .rr-nav__mobile.is-open { display: flex; }
}

/* ===========================================================================
   Post-handoff fixes (review feedback)
   =========================================================================== */

/* 1. Full-bleed sections butt against the header/footer. Blocksy's content
   wrapper (#main .ct-container-full) adds 60px vertical padding that, on the
   light canvas, shows as paper bands between the navy "ink" bands and around
   the footer. Sections set their own padding, so remove the wrapper's. */
#main .ct-container-full {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. The CTA stays a white card even on a navy "ink" band, so its ghost/outline
   button must keep the on-light styling - the generic .has-ink inversion would
   otherwise render it white-on-white (invisible, making the row look off-centre). */
.has-ink-background-color .rr-cta .rr-btn--ghost {
    color: var(--rr-contrast);
    border-color: transparent;
}

.has-ink-background-color .rr-cta .rr-btn--ghost:hover {
    color: var(--rr-accent);
    background: var(--rr-accent-wash);
    border-color: transparent;
}

/* 3. The branded footer sits outside #footer, so it inherits the body's navy
   text colour. Force light text so the copy is readable on the navy band; and
   stop the base canvas rule from painting its inner .ct-container paper (which
   showed as a white box over the footer columns). */
.rr-footer { color: var(--rr-on-dark); }
.rr-footer .ct-container,
#footer .ct-container { background-color: transparent !important; }

/* ===========================================================================
   Homepage additions (design-system match)
   Design-system homepage components layered on top of the base theme:
   - pricing tiles (.rr-price*)
   - hero stats strip + review-rating row
   - reviews section
   - header readability over the hero (scrim) + on-dark outline button
   Everything reads the --rr-* tokens, so it follows the brand automatically.
   =========================================================================== */

/* ---- Header: readable over the hero photo -------------------------------- */
/* A dark top-scrim keeps the silver logo + white nav legible while the bar is
   transparent over the hero; it still goes solid navy once scrolled (.is-scrolled
   from forms.js - see the scroll-aware header behaviour). */
.rr-nav:not(.is-scrolled):not(.rr-nav--solid) {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(7, 19, 29, 0.85) 0%, rgba(7, 19, 29, 0) 100%);
}

/* Homepage: pull the navy hero up behind the transparent header, so the scrim
   darkens the HERO (not the light page background) and there is no light seam
   above the hero. The header is sticky (in flow), so this reclaims its height;
   the hero's own top padding keeps the kicker + H1 clear of the bar. Inner pages
   keep the solid header in flow above the content (.rr-nav--solid), so they stay
   unaffected. Height = logo (52px) + .rr-nav__in padding (2 x 0.85rem). */
.home #main-container { margin-top: calc(-52px - 1.7rem); }

/* On-dark outline button (e.g. hero "Bekijk de prijzen") - glassy + readable. */
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover__inner-container .wp-block-button.is-style-outline .wp-block-button__link,
.rr-hero .rr-btn--outline {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
}
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-cover__inner-container .wp-block-button.is-style-outline .wp-block-button__link:hover,
.rr-hero .rr-btn--outline:hover {
    background-color: rgba(255, 255, 255, 0.22) !important;
    border-color: #fff !important;
}

/* ---- Hero: stats strip ---------------------------------------------------- */
.rr-hero { max-width: 760px; }
.rr-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rr-border-on-dark);
    max-width: 820px;
}
.rr-hero__stat .v { font-family: var(--rr-font-mono); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; letter-spacing: -0.02em; }
.rr-hero__stat .k { font-size: 0.85rem; color: var(--rr-on-dark-muted); margin-top: 0.25rem; }

/* ---- Hero: asymmetric grid (home) ----------------------------------------- */
/* Copy left, stats right as a vertical "spec rail" against a hairline. The
   columns block stacks below 782px, where the rail reverts to a 2x2 strip. */
.rr-hero-grid { gap: clamp(2.5rem, 5vw, 5.5rem); }
.rr-hero-grid .rr-hero__intro { max-width: 34em; }
.rr-hero-grid .rr-hero__stats {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-left: 1px solid var(--rr-border-on-dark);
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    max-width: none;
}

@media (max-width: 781px) {
    .rr-hero-grid .rr-hero__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--rr-border-on-dark);
        padding-top: 2rem;
        margin-top: 0.5rem;
    }
}

/* ---- Diensten & prijzen: pricing tiles ------------------------------------ */
/* Four services since the premium wasbeurt joined the line-up: 4-across on
   wide screens, 2x2 on mid widths (rule below), single column on mobile. */
.rr-price { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; align-items: stretch; text-align: left; }
@media (max-width: 1280px) and (min-width: 981px) {
    .rr-price { grid-template-columns: 1fr 1fr; max-width: 800px; margin-left: auto; margin-right: auto; }
}
.rr-price__item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius-card);
    box-shadow: var(--rr-shadow-sm);
    padding: 2rem 1.85rem;
}
.rr-price__item--featured {
    background: var(--rr-ink);
    background-image: var(--rr-sheen);
    color: var(--rr-on-dark);
    box-shadow: var(--rr-shadow-xl);
    border-color: var(--rr-border-on-dark);
}
.rr-price__item--featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--rr-accent);
    border-radius: var(--rr-radius-card) var(--rr-radius-card) 0 0;
}
.rr-price__tier { font-family: var(--rr-font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rr-muted); }
.rr-price__item--featured .rr-price__tier { color: var(--rr-accent-on-dark); }
.rr-price__flag { position: absolute; top: 1.4rem; right: 1.4rem; background: var(--rr-accent); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: var(--rr-radius-pill); }
.rr-price__name { font-family: var(--rr-font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.015em; margin: 0.5rem 0 0; color: var(--rr-contrast); }
.rr-price__item--featured .rr-price__name { color: #fff; }
.rr-price__lead { margin: 0.6rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--rr-muted); min-height: 3.6em; }
.rr-price__item--featured .rr-price__lead { color: var(--rr-on-dark-muted); }
.rr-price__amount { font-family: var(--rr-font-mono); font-weight: 500; font-size: 2rem; letter-spacing: -0.02em; color: var(--rr-contrast); margin: 1.1rem 0 0; }
.rr-price__amount small { font-family: var(--rr-font-body); font-size: 0.8rem; color: var(--rr-muted); font-weight: 400; }
.rr-price__item--featured .rr-price__amount { color: #fff; }
.rr-price__item--featured .rr-price__amount small { color: var(--rr-on-dark-muted); }
.rr-price__list { list-style: none; margin: 1.4rem 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; flex: 1 1 auto; }
.rr-price__list li { position: relative; padding-left: 1.6rem; font-size: 0.92rem; line-height: 1.45; color: var(--rr-graphite); }
.rr-price__list li::before { content: "\2713"; position: absolute; left: 0; color: var(--rr-accent); font-weight: 700; }
.rr-price__item--featured .rr-price__list li { color: rgba(255, 255, 255, 0.86); }
.rr-price__item--featured .rr-price__list li::before { color: var(--rr-accent-on-dark); }

/* ---- WhatsApp glyph - inline icon inheriting the link colour -------------- */
.rr-wa-icon { width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: 0.4em; }

/* ---- Merken - monochrome partner logos, tinted via currentColor ----------- */
.rr-brands { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.75rem 3.5rem; margin: 2.5rem 0 0; padding: 0; }
.rr-brands__item { display: inline-flex; align-items: center; color: var(--rr-muted); transition: color 0.25s ease; }
.rr-brands__item:hover { color: var(--rr-contrast); }
/* Heights are tuned per logo so the wordmark cap-heights match and their optical
   centres sit on one line: each SVG's viewBox is centred on its wordmark (the
   Gtechniq viewBox is padded so the tagline hangs below without raising the
   wordmark), and the 3D block mark is set smaller as it reads heavier. */
.rr-brands__item svg { display: block; width: auto; height: 2.95rem; }
.rr-brands__item--3d svg { height: 1.95rem; }
/* Text fallback (asset missing) keeps the original wordmark look. */
.rr-brands__item:not(:has(svg)) { font-family: var(--rr-font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 480px) { .rr-brands__item svg { height: 2.4rem; } .rr-brands__item--3d svg { height: 1.6rem; } }

/* ---- Reviews (ACF-managed; lorem placeholders until real reviews exist) --- */
.rr-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.rr-review { display: flex; flex-direction: column; gap: 1.25rem; background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-card); box-shadow: var(--rr-shadow-sm); padding: 1.85rem; text-align: left; }
.rr-review__stars { color: var(--rr-accent); letter-spacing: 2px; }
/* Neutralise Blocksy's default blockquote accent bar - clean card, no stripe.
   (blockquote element selector included to out-rank Blocksy's own rule.) */
blockquote.rr-review__quote,
.rr-review .rr-review__quote { margin: 0; padding: 0; border: none; font-size: 1.05rem; line-height: 1.55; color: var(--rr-contrast); font-weight: 500; }
.rr-review__by { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; }
.rr-review__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--rr-ink); color: var(--rr-accent-on-dark); display: flex; align-items: center; justify-content: center; font-family: var(--rr-font-display); font-weight: 700; font-size: 0.85rem; flex: none; }
.rr-review__name { font-weight: 600; font-size: 0.92rem; color: var(--rr-contrast); }
.rr-review__car { font-size: 0.85rem; color: var(--rr-muted); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
    .rr-price, .rr-reviews { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
    .rr-price__item--featured { transform: none; }
    .rr-hero__stats { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
   Motion - subtle, thematic, and entirely opt-out under reduced motion.
   The detailing theme is glans/reflectie ("shine on fresh lacquer") and
   "het verschil zien", so the motion is light drifting over the navy bands,
   a one-shot shine across the hero, and content settling in on scroll. All of
   it is progressive enhancement: no JS, no library, and nothing animates when
   the visitor asks for reduced motion.
   =========================================================================== */

/* --- Ambient sheen drift: the specular on every navy "ink" band slowly
   floats, like light travelling across polished paint. Only the sheen image
   moves; the solid ink colour underneath is untouched. ---------------------- */
@media (prefers-reduced-motion: no-preference) {
    .has-ink-background-color,
    .rr-band--ink {
        background-size: 160% 160%;
        animation: rr-sheen-drift 26s ease-in-out infinite alternate;
    }
}

@keyframes rr-sheen-drift {
    from { background-position: 24% 14%; }
    to   { background-position: 72% 82%; }
}

/* --- Hero one-shot shine: a soft diagonal highlight wipes across the hero
   once on load, catching the display caps the way light catches a fresh
   coat. Transform-only (GPU), clipped by the cover's overflow. -------------- */
.rr-hero-cover { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
    .rr-hero-cover::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.12) 50%, transparent 58%);
        transform: translateX(-130%);
        animation: rr-hero-shine 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.35s 1 both;
    }
}

@keyframes rr-hero-shine {
    to { transform: translateX(130%); }
}

/* --- Scroll-driven reveals (native CSS scroll timeline, 2024+). Content
   settles up + fades as it enters the viewport. Guarded by @supports so
   unsupporting browsers simply show everything. The two hover-lift cards get a
   fade-only reveal so their :hover transform is never clobbered by the held
   animation state. ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .rr-band__head,
        .rr-price__item,
        .rr-review {
            animation: rr-rise-in linear both;
            animation-timeline: view();
            animation-range: entry 5% entry 42%;
        }

        .rr-services__card,
        .rr-projects__card {
            animation: rr-fade-in linear both;
            animation-timeline: view();
            animation-range: entry 5% entry 42%;
        }
    }
}

@keyframes rr-rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes rr-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Cross-document View Transitions: app-like fades between pages, with the
   sticky header held as a shared element so it doesn't cross-fade with the
   body. Opt-in only affects our own front-end (wp-admin never opts in). ------ */
@view-transition { navigation: auto; }

#rr-nav { view-transition-name: rr-header; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.35s; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}