/* Spindler V9: shared design contract. Reference pages retain their composition. */
/* Reusable brand emphasis for selected words in headings. */
body:is(.sp-preview,.sp-design) main :is(h1,h2,h3) .sp-heading-accent{color:#EC671A}

/* Route cards share the restrained orange line used throughout the site. */
:is(.sp-preview,.sp-design) .sp-advice-route>.sp-advice-route-mark{display:block;grid-column:1;grid-row:1/3;width:24px;height:1px;background:#EC671A;margin-top:15px;align-self:start;flex-shrink:0}
@media(max-width:600px){:is(.sp-preview,.sp-design) .sp-advice-route>.sp-advice-route-mark{margin-top:11px}}

/* Longer explanations use the site's heading hierarchy and restrained brand links. */
body:is(.sp-preview,.sp-design) .sp-service-page[data-service-layout] .sp-card-panel h4{font:700 20px/1.4 'Arial Nova',Arial,sans-serif;color:#394D42;margin:28px 0 10px}
body:is(.sp-preview,.sp-design) .sp-service-page[data-service-layout] .sp-card-panel h4:first-child{margin-top:0}
body:is(.sp-preview,.sp-design) .sp-service-page[data-service-layout] .sp-card-panel .sp-reading a{color:#EC671A;font-weight:700;text-decoration:underline;text-underline-offset:4px}
body:is(.sp-preview,.sp-design) .sp-service-page[data-service-layout] .sp-card-panel .sp-reading a:hover{color:#394D42}

/* Moss distinguishes the expanded explanation from the sage steps above. */
body:is(.sp-preview,.sp-design) .sp-service-page[data-service-layout] .sp-card-panel{background:#4C6758;color:#E7E9DF}
body:is(.sp-preview,.sp-design) .sp-service-page[data-service-layout] .sp-card-panel :is(h3,h4,p){color:#E7E9DF}
body:is(.sp-preview,.sp-design) .sp-service-page[data-service-layout] .sp-card-panel .sp-reading a{color:#EC671A;font-weight:400;text-decoration:none}
body:is(.sp-preview,.sp-design) .sp-service-page[data-service-layout] .sp-card-panel .sp-reading a:hover{color:#E7E9DF}
body:is(.sp-preview,.sp-design) .sp-service-page[data-service-layout] .sp-card-panel-close{color:#E7E9DF;border-color:#C3CBB7}

/* Shared typography and card accent, independent of card background. */
body:is(.sp-preview,.sp-design) main :is(h1,h2){font-family:'Arial Nova',Arial,sans-serif!important;font-weight:700!important}
body:is(.sp-preview,.sp-design) main :is(h1,h2,h3) .sp-heading-accent{color:#EC671A!important;font-weight:inherit}
body:is(.sp-preview,.sp-design) .sp-service-page[data-service-layout] .sp-card-panel>h3,body:is(.sp-preview,.sp-design) .sp-fee-service-summary>h3{padding-left:14px;border-left:2px solid #EC671A}
body:is(.sp-preview,.sp-design) .sp-fee-service-summary>h3:before{content:none}
body:is(.sp-preview,.sp-design) .sp-review-meta:before{width:2px;height:16px;flex:0 0 2px}
body:is(.sp-preview,.sp-design) .sp-advice-route>.sp-advice-route-mark{width:2px;height:18px;margin-top:6px}
body:is(.sp-preview,.sp-design) :is(a,button).sp-line-action{transition:border-color .2s,text-decoration-color .2s}
body:is(.sp-preview,.sp-design) :is(a,button).sp-line-action:is(:hover,:focus-visible){border-bottom-color:#EC671A!important;text-decoration-color:#EC671A!important}

/* Card marker tokens also apply to the housing and fee card families. */
body:is(.sp-preview,.sp-design){--sp-card-accent-width:2px;--sp-card-accent-height:18px}
body:is(.sp-preview,.sp-design) .sp-review-meta:before{width:var(--sp-card-accent-width);height:var(--sp-card-accent-height);flex:0 0 var(--sp-card-accent-width)}
body:is(.sp-preview,.sp-design) .sp-advice-route>.sp-advice-route-mark{width:var(--sp-card-accent-width);height:var(--sp-card-accent-height)}

/* Shared body rhythm: compact enough for continuity, comfortable on small screens. */
body:is(.sp-preview,.sp-design){--sp-body-leading:1.6;--sp-reading-line:var(--sp-body-leading)}
body:is(.sp-preview,.sp-design) main :is(p,li),body:is(.sp-preview,.sp-design) main .sp-advice-route small{line-height:var(--sp-body-leading)!important}

body:is(.sp-preview,.sp-design) main .sp-card-heading{padding-left:14px;border-left:var(--sp-card-accent-width,2px) solid #EC671A}

/* Shared tokens and component anatomy for the remaining pages. */
:root{--sp-forest:#394D42;--sp-moss:#4C6758;--sp-sage:#C3CBB7;--sp-cream:#E7E9DF;--sp-orange:#EC671A;--sp-card-radius:14px;--sp-component-pad:clamp(24px,3vw,40px);--sp-component-gap:clamp(24px,3vw,44px);--sp-section-space:clamp(48px,6vw,88px)}
.sp-standard-card{background:var(--sp-card-surface,var(--sp-sage));color:var(--sp-card-ink,var(--sp-forest));border:0;border-radius:var(--sp-card-radius);padding:var(--sp-component-pad);min-width:0}
.sp-card-eyebrow{display:block;border-left:2px solid var(--sp-orange);padding:0 0 0 12px;font:400 11px/18px 'Arial Nova',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin:0 0 22px;color:inherit}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-story{display:block}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-prose{max-width:none}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-prose p{max-width:none;font-size:18px;margin-bottom:22px}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-process{background:none;border:0;border-radius:0;padding:0;margin:0}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-process>h2{font-size:clamp(28px,2.7vw,38px);line-height:1.22;margin:0 0 36px}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-process>ol{gap:var(--sp-component-gap);align-items:stretch}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-process li.sp-service-step{display:block;border:0;border-radius:var(--sp-card-radius);padding:var(--sp-component-pad);background:var(--sp-sage);color:var(--sp-forest);min-height:240px}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-image-band .sp-service-process li.sp-service-step{background:var(--sp-forest);color:var(--sp-cream)}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-process li>.sp-card-eyebrow{color:inherit;padding-top:0;font-size:11px;line-height:18px;margin-bottom:24px}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-step h3{font:400 clamp(24px,2vw,28px)/1.2 'Arial Nova',Arial,sans-serif;letter-spacing:-.025em;color:inherit;margin:0 0 24px}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-step p{font-size:16px;color:inherit;margin:0}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-method-band .sp-services-preview{margin-top:44px}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-image-band .sp-service-concept{color:var(--sp-cream)}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-price>.sp-advice-kicker{padding-left:12px;border-left:2px solid var(--sp-orange)}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-price>p:last-child{font-size:16px;max-width:none}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-related{margin-top:0}
/* A short page keeps its reading flow; a photo is not compulsory. */
/* General pages inherit the reference hierarchy, with their own compositions. */
.sp-standard-page{color:var(--sp-forest);font-family:'Arial Nova',Arial,sans-serif}
.sp-standard-page :is(.page-content,.about-grid>div)>p{font-size:18px;line-height:1.6;margin:0 0 22px}
body .sp-standard-page .about-grid{gap:var(--sp-component-gap);align-items:start;padding-block:var(--sp-section-space)}
body .sp-standard-page .about-grid h2{font-size:clamp(32px,3.2vw,48px);line-height:1.15;margin-bottom:28px}
body .sp-standard-page .sp-affiliation-note{border-radius:var(--sp-card-radius);background:var(--sp-sage);padding:24px;margin-top:32px}
body .sp-standard-page .sp-affiliation-note>.wrap{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 18px}
body .sp-standard-page .sp-affiliation-note h2{font-size:22px;line-height:1.25;margin:0 0 14px}
body .sp-standard-page .sp-affiliation-note p{font-size:16px;line-height:1.6;margin:0}
body .sp-standard-page .sp-affiliation-note .sp-nvm-logo img{width:30px;height:auto}
body .sp-standard-page .sp-contact-flow{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-component-gap);padding-block:var(--sp-section-space)}
body .sp-standard-page .sp-contact-flow>.page-content{grid-column:1/-1;max-width:none;font-size:18px}
body .sp-standard-page .sp-contact-flow>:is([id="bereikbaarheid"],.sp-advice-referral){padding:var(--sp-component-pad);margin:0;border:0;border-radius:var(--sp-card-radius);background:var(--sp-sage);color:var(--sp-forest)}
body .sp-standard-page .sp-contact-flow>.sp-advice-referral{background:var(--sp-forest);color:var(--sp-cream)}
body .sp-standard-page .sp-contact-flow h2{padding-left:14px;border-left:2px solid var(--sp-orange);font-size:28px;line-height:1.2}
body .sp-standard-page .sp-contact-flow .sp-advice-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
body .sp-standard-page .sp-contact-flow>.sp-advice-referral :is(h2,a){color:var(--sp-cream);--sp-action-ink:var(--sp-cream);--sp-action-hover-ink:var(--sp-cream)}
/* News uses real WordPress content and posts, not an invented feed. */
.sp-news-content{padding-block:var(--sp-section-space)}
.sp-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-component-gap);margin:36px 0}
.sp-news-grid .sp-standard-card{display:flex;flex-direction:column;align-items:start}
.sp-news-grid h2{font-size:28px;line-height:1.2;margin:0 0 22px}
.sp-news-grid p{font-size:16px;margin-bottom:24px}
.sp-news-grid .line-link{margin-top:auto}
.sp-news-grid img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px;margin-bottom:24px}
@media(max-width:960px){
 body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-process>ol{grid-template-columns:repeat(2,minmax(0,1fr))}
 body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-process>ol>li:last-child:nth-child(odd){grid-column:1/-1}
 .sp-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-prose p,.sp-standard-page :is(.page-content,.about-grid>div)>p{font-size:16px}
 body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-process>ol,.sp-news-grid,body .sp-standard-page .sp-contact-flow{grid-template-columns:1fr}
 body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-process li.sp-service-step{min-height:0}
 body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-process>h2{margin-bottom:28px}
 body .sp-standard-page .sp-contact-flow h2{font-size:26px}
}

/* Stacked cards reveal their explanation in context, before the next choice. */
@media(max-width:1100px){
 body:is(.sp-preview,.sp-design) .sp-service-page .sp-card-panel.sp-card-panel--inline{margin-top:24px;padding:24px;flex:none}
 body:is(.sp-preview,.sp-design) .sp-service-page .sp-card-panel--inline>h3{font-size:24px}
}
/* Alternate the second fee card, retaining the approved sage first card. */
body:is(.sp-preview,.sp-design) .sp-service-page .sp-selling-fees>div:nth-child(2){background:#394D42;color:#E7E9DF}
body:is(.sp-preview,.sp-design) .sp-service-page .sp-selling-fees>div:nth-child(2) :is(h3,p){color:#E7E9DF}
/* The editor exposes the same card surface and accent anatomy. */
.is-style-spindler-card{background:var(--sp-sage);color:var(--sp-forest);border-radius:var(--sp-card-radius);padding:var(--sp-component-pad)}
.is-style-spindler-card h3{font:400 28px/1.2 'Arial Nova',Arial,sans-serif}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-offer :is(h2,p){color:#394D42}
body:is(.sp-preview,.sp-design) .sp-standard-service .sp-service-story{max-width:none}
@media(min-width:961px){
 body .sp-standard-page .about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 body .sp-standard-page .about-grid>div:first-child{max-width:none}
 body .sp-standard-page .about-grid>.sp-office-sketch{width:100%;max-width:none;margin:0}
}
/* An inline explanation keeps cream copy inside the sage step card. */
body:is(.sp-preview,.sp-design) .sp-service-page[data-service-layout] .sp-service-method-band .sp-card-panel--inline :is(h3,h4,p){color:#E7E9DF}
/* Property cards retain photography and facts, with the same card label anatomy. */
body:is(.sp-preview,.sp-design) .sp-listings .sp-property-card{border-radius:var(--sp-card-radius)}
body:is(.sp-preview,.sp-design) .sp-listings .sp-property-body{padding:clamp(24px,2.5vw,36px)}
body:is(.sp-preview,.sp-design) .sp-listings .sp-property-place{border-left:2px solid var(--sp-orange);padding-left:12px;font-size:11px;line-height:18px;margin-bottom:18px}