
.guide-pair{display:grid;gap:28px;background:none!important;padding:0!important}.guide-example{min-width:0}.guide-example img{width:100%;height:auto;border-radius:16px}.guide-example .eyebrow{margin:14px 0 8px}.guide-example .text-link{font-size:14px}.photo-project{display:block}.photo-project>a>img{width:100%;border-radius:16px}.photo-project .service-photo-link{display:block}.wedding-reference{border-top:1px solid #dce0e9;margin-top:28px;padding-top:24px}.wedding-reference h3{font-size:26px;margin:12px 0}.photo-process,.photo-uses{padding:56px 0;border-top:1px solid #dce0e9}.photo-process>p:not(.eyebrow),.photo-uses>p:not(.eyebrow){max-width:650px;color:var(--muted,#687184)}.photo-process h2,.photo-uses h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.035em;line-height:1.1;margin:14px 0 20px}.photo-process ol{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;padding:0;margin:36px 0 0;counter-reset:steps}.photo-process li{counter-increment:steps}.photo-process li:before{content:'0' counter(steps);color:#477bb6;font-size:14px}.photo-process h3{font-size:19px;line-height:1.3;margin:14px 0}.photo-process li p{font-size:15px;line-height:1.65;color:var(--muted,#687184)}.usage-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center;margin-top:32px}.usage-grid figure{margin:0}.feed-mock{border:1px solid #dce0e9;border-radius:20px;overflow:hidden;background:#fff;color:#172239}.mock-header{display:flex;align-items:center;gap:12px;padding:20px}.mock-header>span:last-child{margin-left:auto}.mock-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#8abaf2,#d69eef)}.feed-images{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.feed-images img{width:100%;aspect-ratio:4/5;object-fit:cover}.mock-foot{padding:20px}.mock-foot p{font-size:14px;margin:12px 0 0}.usage-grid figcaption{font-size:13px;padding:16px;color:var(--muted,#687184)}.story-screen{position:relative;max-width:280px;aspect-ratio:9/16;border:7px solid #172239;border-radius:30px;overflow:hidden;margin:auto}.story-screen>img{width:100%;height:100%;object-fit:cover}.story-top{position:absolute;inset:15px 14px auto;color:white;text-shadow:0 1px 4px #000}.story-top span{display:block;height:2px;background:white}.story-top p{font-size:12px;margin-top:10px}.story-title{position:absolute;bottom:20px;left:16px;right:16px;color:white;font-size:26px;font-weight:700;line-height:1.15;text-shadow:0 2px 10px #000}.story-mock figcaption{text-align:center}@media(max-width:800px){.photo-process ol{grid-template-columns:repeat(2,1fr)}.usage-grid{gap:24px}}@media(max-width:560px){.usage-grid{grid-template-columns:1fr}.photo-process ol{grid-template-columns:1fr}.photo-process,.photo-uses{padding:36px 0}}@media(prefers-color-scheme:dark){:where(html:not([data-theme])) .photo-process,:where(html:not([data-theme])) .photo-uses,:where(html:not([data-theme])) .wedding-reference{border-color:#2b3342}:where(html:not([data-theme])) .feed-mock{background:#171d28;color:#f5f6fa;border-color:#30394b}:where(html:not([data-theme])) .photo-process li:before{color:#80b8f4}}:where(html[data-theme="dark"]) .photo-process,:where(html[data-theme="dark"]) .photo-uses,:where(html[data-theme="dark"]) .wedding-reference{border-color:#2b3342}:where(html[data-theme="dark"]) .feed-mock{background:#171d28;color:#f5f6fa;border-color:#30394b}:where(html[data-theme="dark"]) .photo-process li:before{color:#80b8f4}

@font-face{font-family:GUOGUOInterDisplay;src:url('assets/guoguo-inter-display-extrabold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}.mock-header .guoguo-avatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%;object-fit:cover;object-position:60% 35%;background:none}.story-title.guoguo-slogan{font-family:GUOGUOInterDisplay,sans-serif;font-weight:800;font-size:44px;letter-spacing:-.025em;line-height:.98;bottom:24px;color:#fff8f2;text-shadow:0 2px 16px rgba(0,0,0,.5)}.story-screen:has(.guoguo-slogan):after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(21,21,21,.45));pointer-events:none}.guoguo-slogan{z-index:1}

.trouwgalerij-site-preview{display:block}.trouwgalerij-site-preview picture{display:block}.trouwgalerij-site-preview img{width:100%;height:auto;object-fit:contain;border-radius:16px}.trouwgalerij-bridge .guide-links{flex-wrap:wrap;gap:20px}


/* Services: the visual column follows the text height on desktop. */
.service-image-link{position:relative;display:block;width:100%;overflow:hidden;border-radius:16px}
.service-image-badges{position:absolute;top:18px;left:18px;right:18px;z-index:2;display:flex;flex-wrap:wrap;gap:8px;pointer-events:none}
.service-image-badges>span{padding:8px 13px;border:1px solid rgba(23,34,57,.18);border-radius:30px;background:rgba(252,252,255,.92);color:#172239;font-size:12px;line-height:1.4;letter-spacing:.03em}
.trouwgalerij-site-preview{position:relative;overflow:hidden;border-radius:16px}
#stijlgidsen .guide-pair{align-self:stretch;grid-template-rows:repeat(2,minmax(0,1fr))}
#stijlgidsen .guide-example{min-height:0}
#stijlgidsen .guide-example-image{height:100%;background:#dce2ec}
#stijlgidsen .guide-example:last-child .guide-example-image{background:#ddd5bb}
#stijlgidsen .guide-example img{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;object-fit:contain;border-radius:0}
#fotografie .photo-project{align-self:stretch;position:relative;min-height:0}
#fotografie .photo-project .service-photo-link{position:absolute;inset:0;display:block;overflow:hidden;border-radius:16px}
#fotografie .photo-project .service-photo-link img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 20%}
@media(max-width:800px){
 #stijlgidsen .guide-pair{grid-template-rows:auto;gap:24px}
 #stijlgidsen .guide-example-image{height:auto}
 #stijlgidsen .guide-example img{position:static;height:auto;width:100%;object-fit:contain}
 #fotografie .photo-project{align-self:start}
 #fotografie .photo-project .service-photo-link{position:relative;inset:auto}
 #fotografie .photo-project .service-photo-link img{height:auto;object-fit:contain}
 .service-image-badges{top:14px;left:14px;right:14px;gap:6px}
 .service-image-badges>span{font-size:11px;padding:7px 10px}
}
@media(prefers-color-scheme:dark){:where(html:not([data-theme])) .service-image-badges>span{background:rgba(16,20,29,.86);color:#fff;border-color:rgba(255,255,255,.24)}}:where(html[data-theme="dark"]) .service-image-badges>span{background:rgba(16,20,29,.86);color:#fff;border-color:rgba(255,255,255,.24)}
