/* Shared refinements: native cards, contact routes and responsive composition. */
:root{--wh-label:var(--wp--custom--color--label,#6f5035);--wh-card:var(--wp--custom--color--card,#e7d8c5)}
/* A two-color brand focus ring remains visible on both light and dark surfaces. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.wh-main-button:focus-visible,.has-service-link:focus-within,.related-service:focus-within{outline:3px solid var(--green);outline-offset:4px;box-shadow:0 0 0 4px var(--cream)}
:is(.section-head,.contact-copy,.intro-heading,.project-card-copy,.project-facts,.process-summary-heading,.business-intro-heading,.business-sector,.business-agreement-card)>.eyebrow{color:var(--wh-label)}
.inner-hero h1,.section-head h2,.split-copy h2,.contact-copy h2,.quote-intro h2,.process-summary h2{ text-wrap:balance }
.breadcrumbs{align-items:baseline;gap:6px 10px;line-height:1.65}
.breadcrumbs>[aria-current=page]{min-width:0;max-width:100%}

/* Related services are actual components, with one keyboard stop per card. */
.related-section{padding-top:48px}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.related-grid:has(>.related-service:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.related-service{position:relative;min-width:0;padding:28px;background:var(--cream);border-radius:var(--wp--custom--radius--card,14px)}
.related-service h3{font-size:24px;line-height:1.3}
.related-service>p:last-child{margin-top:16px}
.possibility-card.has-service-link{position:relative;display:flex;flex-direction:column;min-width:0}
.has-service-link .service-detail-link{margin-top:auto;padding-top:22px}
:is(.has-service-link,.related-service) .text-link{position:static}
:is(.has-service-link,.related-service) .text-link::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
:is(.has-service-link,.related-service) .text-link::after{display:none}
:is(.has-service-link,.related-service):hover .text-link{text-decoration:underline!important;text-underline-offset:5px}
:is(.has-service-link,.related-service):focus-within{outline:3px solid var(--green);outline-offset:4px}
:is(.has-service-link,.related-service) .text-link:focus-visible{outline:none;box-shadow:none}

/* A short process reference on service pages; the complete process lives on Home. */
.process-summary{background:var(--wh-card)}
.process-summary-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:start}
.process-summary-heading>.eyebrow{margin-bottom:18px}
.process-summary h2{font-size:36px;line-height:1.2}
.process-summary-copy>p:first-child{color:var(--muted);line-height:1.8}
.process-summary-copy>p:last-child{margin-top:18px}
#werkwijze{scroll-margin-top:32px}
.about-split .split-copy>p:last-child:has(.text-link){margin-top:24px}
.about-split .melvin-photo{height:500px}
.melvin-photo img{object-position:32% 42%}
.business-sector,.business-sector:nth-child(2),.business-sector:nth-child(3){background:var(--sand)}

/* Consistent functional icons; original service/brand icons remain in use. */
.quote-contact-links>a{overflow-wrap:normal;word-break:normal;white-space:nowrap;font-size:clamp(16px,1.39vw,20px)}
.quote-contact-links>.company-email::before{mask-image:url("icons/contact-email.svg");-webkit-mask-image:url("icons/contact-email.svg")}
.quote-contact-links>.company-phone::before{mask-image:url("icons/contact-phone.svg");-webkit-mask-image:url("icons/contact-phone.svg")}
.invitation-contact a::before{background:var(--wp--preset--color--beige,#b48f6a);mask:url("icons/contact-email.svg") center/contain no-repeat;-webkit-mask:url("icons/contact-email.svg") center/contain no-repeat;width:26px;height:26px}
.invitation-contact a[href^="tel:"]::before{background-image:none;mask-image:url("icons/contact-phone.svg");-webkit-mask-image:url("icons/contact-phone.svg")}
.contact-channel .channel-icon{padding:14px}
.contact-channel .channel-icon img{width:100%;height:100%}
.contact-channel.channel-whatsapp{background:var(--cream);color:var(--green)}
.channel-whatsapp .channel-icon{background:var(--green)}
.channel-whatsapp .channel-description{color:var(--muted)}
.channel-whatsapp>a{color:var(--green)}
.contact-channel.channel-email{background:var(--green);color:var(--cream)}
.channel-email .channel-description{color:var(--wp--preset--color--sand,#f0e7db)}
.channel-email>a{color:var(--cream)}
.channel-email .channel-icon{background:#234637}
.contact-channel>a{overflow-wrap:normal;word-break:normal}
.contact-socials.quote-contact-socials{gap:12px}
.quote-contact-socials .company-social-icon{flex-shrink:0}

/* Reading order: brief intro, form, then alternative contact options. */
.quote-contact-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"intro form" "details form" "question form";grid-template-rows:auto auto 1fr;gap:26px 70px}
.quote-intro{grid-area:intro;min-width:0}
.quote-intro h2{font-size:42px;line-height:1.15}
.quote-intro>.lead{margin-top:24px;color:var(--muted);font-size:20px;font-weight:var(--wp--custom--typography--lead-weight,500);line-height:1.8}
.quote-contact-grid>.contact-form-col{grid-area:form;min-width:0;scroll-margin-top:24px}
.quote-contact-grid>.quote-contact-card{grid-area:details;min-width:0;margin:0;padding:28px;background:var(--cream);border-radius:var(--wp--custom--radius--card,14px)}
.quote-contact-card .contact-name{font-size:24px;line-height:1.3;font-weight:700;color:var(--green);margin:0 0 16px}
.quote-contact-grid>.quote-contact-question{grid-area:question;margin:0}
.quote-contact-question .text-link{flex-wrap:wrap}

@media(max-width:1199px){
 .quote-contact-grid{gap:24px 36px}
 .quote-contact-grid>.quote-contact-card{padding:24px}
 .process-summary-grid{gap:40px}
 .related-grid{gap:20px}
 .related-service{padding:24px}
}
@media(max-width:959px){
 .menu-toggle[aria-expanded=true] .menu-lines{position:relative;background:none}
 .menu-toggle[aria-expanded=true] .menu-lines::before,.menu-toggle[aria-expanded=true] .menu-lines::after{content:"";position:absolute;left:0;top:5px;width:18px;height:2px;background:currentColor;transform:rotate(45deg)}
 .menu-toggle[aria-expanded=true] .menu-lines::after{transform:rotate(-45deg)}
 .quote-contact-grid{grid-template-columns:1fr;grid-template-areas:"intro" "form" "details" "question";grid-template-rows:auto;gap:28px}
 .quote-intro{max-width:700px}
 .quote-intro h2{font-size:36px}
 .quote-intro>.lead{font-size:18px}
 .quote-contact-grid>.quote-contact-card{max-width:700px;width:100%}
 .process-summary-grid{grid-template-columns:1fr;gap:26px}
 .process-summary h2{max-width:620px}
 .related-service h3{font-size:22px}
}
@media(max-width:759px){
 .contact-channel{grid-template-columns:46px minmax(0,1fr);gap:0 17px;padding:23px 20px}
 .contact-channel .channel-icon{width:46px;height:46px;padding:11px;grid-row:1/3}
 .contact-channel>a{grid-column:1/-1;min-height:44px;margin-top:12px;font-size:16px;white-space:nowrap}
 .contact-channel .channel-title{font-size:23px}
 .contact-channel .channel-description{margin-bottom:0}
 .related-grid,.related-grid:has(>.related-service:nth-child(2):last-child){grid-template-columns:1fr;gap:16px}
 .related-service{padding:24px}
 .related-service>p:last-child{margin-top:10px}
}
@media(max-width:639px){
 .inner-hero h1{font-size:clamp(32px,9.5vw,38px);line-height:1.14;letter-spacing:-1px}
 .inner-hero h1 br{display:none}
 .inner-hero .breadcrumbs{font-size:14px;gap:5px 8px}
 .home .section{padding-block:44px}
 .home .services-photo{padding-top:30px}
 .services-photo .service-grid{gap:30px}
 .services-photo .service-image{height:auto;aspect-ratio:16/9}
 .services-photo .service-copy{padding-top:22px}
 .services-photo .service-copy>p{min-height:0;line-height:1.7}
 .services-photo .service ul{margin-top:14px;gap:5px}
 .home .project-photo{height:auto;aspect-ratio:16/10}
 .home .project-grid{gap:32px}
 .home .project-card-copy{padding-top:18px}
 .home .project-card-copy>p:not(.eyebrow){margin-top:12px}
 .home .business-image{height:260px}
 .home .steps-grid{gap:22px}
 .home .step-card h3{font-size:20px}
 .home .step-card>p:last-child{margin-top:8px;line-height:1.7}
 .home .about-split .melvin-photo{height:340px}
 .home .contact-invitation .invitation-photo{height:320px}
 .process-summary{padding-block:40px}
 .process-summary h2{font-size:30px}
 .process-summary-copy>p:first-child{font-size:16px}
 .related-section{padding-top:28px}
 .quote-intro h2{font-size:30px}
 .quote-intro>.lead{font-size:17px;margin-top:18px}
 .quote-contact-grid{gap:26px}
 .quote-contact-grid>.quote-contact-card{padding:24px 20px}
 .quote-contact-card .contact-name{font-size:22px}
 .quote-contact-links>a{font-size:16px}
 .quote-contact-grid>.contact-form-col{padding:25px 20px}
 body.warnaar-quote-page .contact-section{padding-top:36px}
 body.warnaar-quote-page .hero.inner-hero,body.warnaar-quote-page .inner-hero .hero-inner{min-height:440px}
 body.warnaar-quote-page .inner-hero .hero-inner{padding-top:32px;padding-bottom:90px}
 .contact-channel .channel-title{font-size:22px}
 .contact-form-col .contact-form h3{font-size:25px}
 .contact-form-col .form-note{line-height:1.7}
}

/* The deck is the subject of this existing project photo, also in wide hero crops. */
.hero>.hero-image.deck-photo img{object-position:50% 88%}

/* Fit the existing footer row with its visitor sitemap link. */
.site-footer .footer-legal a{margin-left:0}
@media(min-width:960px) and (max-width:1399px){.site-footer .footer-bottom{grid-template-columns:minmax(0,1fr) auto}.site-footer .footer-legal{grid-column:1;grid-row:2;justify-content:start}.site-footer .footer-top-link{grid-column:2;grid-row:2}.site-footer .footer-credits{grid-column:1/-1}}
@media(max-width:639px){.site-footer .footer-legal{gap:4px 20px}}
.sitemap-page .sitemap-group h2,.possibility-card h2{font-size:26px;line-height:1.3}
@media(max-width:639px){.possibility-card h2{font-size:24px}}