/* Hallmark · genre: editorial · macrostructure: Photographic · H6 hero (portret, bleed links) · nav: N9 · footer: Ft4 · F3 register · S4 inline · C4 belbalk (gsm)
 * theme: custom · vibe: "Oostends kantoor, vertrouwd gezicht, rustig papier" · paper: oklch(96.8% 0.008 60) · accent: oklch(50% 0.06 25)
 * display: Playfair Display · body: Jost · axes: light / roman-serif / chromatic-dusty-pink
 * enrichment: none (echte foto's) · reveal: none · studied: yes (www.assurahome.be) · context: inferred · hallmark v1.1
 * pre-emit critique: P4 H4 E4 S4 R5 V4
 */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-weight:400;font-size:var(--text-md);line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-color:var(--color-rule);text-underline-offset:.2em;text-decoration-thickness:1px;transition:text-decoration-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
a:hover{text-decoration-color:var(--color-accent)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
h1,h2{font-family:var(--font-display);font-weight:400;font-style:normal;line-height:1.08;letter-spacing:-.01em;margin:0 0 var(--space-md);color:var(--color-ink);overflow-wrap:anywhere;min-width:0;text-wrap:balance}
h1{font-size:var(--text-display)}
h2{font-size:var(--text-2xl)}
p{margin:0 0 var(--space-sm)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;left:var(--space-sm);top:-4rem;z-index:var(--z-skip);background:var(--color-ink);color:var(--color-paper);padding:var(--space-2xs) var(--space-sm)}
.sr:focus{top:var(--space-sm)}

/* N9 — merk links, één belknop rechts, niets ertussen */
.hm-kop{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--gutter)}
.hm-merk{display:inline-flex;align-items:center;gap:var(--space-2xs);text-decoration:none;color:var(--color-ink-2)}
.hm-merk svg{width:32px;height:32px}
.hm-merk span{font:300 1.3rem/1 var(--font-body);letter-spacing:.01em}
.hm-merk b,.colofon-merk b{font-weight:600}
.hm-kop-tel{display:inline-flex;align-items:center;gap:var(--space-2xs);white-space:nowrap;text-decoration:none;font-weight:500;font-size:var(--text-sm);border:1px solid var(--color-rule);border-radius:var(--radius-btn);padding:var(--space-2xs) var(--space-sm);transition:border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}
.hm-kop-tel:hover{border-color:var(--color-accent);background:var(--color-paper-2)}
.hm-kop-tel svg{width:16px;height:16px}

/* knoppen: één gevulde knop (bellen), de rest typografische links */
.hm-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md);margin-top:var(--space-md)}
.hm-btn{display:inline-flex;align-items:center;gap:var(--space-2xs);white-space:nowrap;background:var(--color-accent);color:var(--color-accent-ink);text-decoration:none;font-weight:500;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-btn);transition:background-color var(--dur-short) var(--ease-out),transform 100ms var(--ease-out)}
.hm-btn:hover{background:var(--color-accent-2)}
.hm-btn:active{transform:translateY(1px)}
.hm-btn svg{width:16px;height:16px}
.hm-link{display:inline-flex;align-items:center;gap:var(--space-2xs);white-space:nowrap;font-weight:500;color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:.3em}
.hm-link svg{width:16px;height:16px;transition:transform var(--dur-short) var(--ease-out)}
.hm-link:hover svg{transform:translateX(3px)}
.hm-link:hover{color:var(--color-accent-2)}
.hm-fijn{font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-md)}
.bijschrift{font-size:var(--text-sm);font-weight:500;color:var(--color-accent);margin-bottom:var(--space-xs)}
.lead{font-size:var(--text-lg);color:var(--color-ink-2);max-width:40ch}

/* foto-fold: het beeld loopt tot de rand van het scherm, de tekst is een smalle band ernaast */
.fold{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;min-height:min(88svh,56rem)}
.fold-beeld{margin:0;position:relative;height:100%;min-height:32rem}
.fold-beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:var(--radius-img)}
.fold-beeld figcaption{position:absolute;left:var(--gutter);bottom:var(--space-sm);font-size:var(--text-xs);color:var(--color-accent-ink);text-shadow:0 1px 2px var(--color-shadow)}
.fold-tekst{padding:var(--space-2xl) var(--gutter) var(--space-xl) var(--space-xl);max-width:36rem}
.fold-rechts{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.fold-rechts .fold-beeld{order:2}
.fold-rechts .fold-tekst{order:1;justify-self:end;padding:var(--space-2xl) var(--space-xl) var(--space-xl) var(--gutter)}
.fold-held .fold-beeld img{object-position:50% 25%}
.team-regel{font-size:var(--text-sm);color:var(--color-ink-2);border-top:var(--rule-2);padding-top:var(--space-sm);margin-top:var(--space-md)}
.team-regel b{font-weight:500;color:var(--color-ink)}

/* snelkoppelingen: één regel met haarlijnen, geen kaarten */
.snel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:var(--rule);border-bottom:var(--rule)}
.snel a{display:flex;flex-direction:column;gap:var(--space-3xs);padding:var(--space-md) var(--gutter);text-decoration:none}
.snel a+a{border-left:var(--rule-2)}
.snel b{font-weight:500}
.snel span{font-size:var(--text-sm);color:var(--color-muted)}
.snel a:hover b{color:var(--color-accent-2)}

/* tekstbanden */
.band-tekst{padding:var(--space-3xl) var(--gutter) var(--space-2xl)}
.kolom{max-width:40rem;margin-left:calc((100% - min(100%,70rem))/2)}
.kolom-breed{max-width:52rem}
.kolom p{color:var(--color-ink-2)}
.proza{padding-top:var(--space-2xl);padding-bottom:var(--space-3xl)}
.proza .kolom p+p{margin-top:var(--space-md)}
.kop-inline{font-variant-caps:all-small-caps;letter-spacing:.06em;font-weight:600;color:var(--color-ink)}

/* F3 — register van verzekeringen */
.register{list-style:none;margin:var(--space-xl) auto 0;padding:0;max-width:70rem;border-top:var(--rule)}
.register li{border-bottom:var(--rule)}
.register a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:var(--space-md);align-items:baseline;padding:var(--space-md) 0;text-decoration:none}
.r-naam{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.2}
.r-kort{color:var(--color-muted);font-size:var(--text-sm)}
.r-pijl svg{width:18px;height:18px;color:var(--color-accent);transition:transform var(--dur-short) var(--ease-out)}
.register a:hover .r-naam{color:var(--color-accent-2)}
.register a:hover .r-pijl svg{transform:translateX(4px)}
.hm-onder{max-width:70rem;margin:var(--space-md) auto 0}

/* schade: de enige donkere band */
.schade{background:var(--color-dark);color:var(--color-dark-ink);padding:var(--space-2xl) var(--gutter)}
.schade h2{color:var(--color-dark-ink)}
.schade .kolom p{color:var(--color-dark-muted)}
.schade .bijschrift{color:var(--color-dark-muted)}
.schade-tel{font-family:var(--font-display);font-size:var(--text-tel);line-height:1;color:var(--color-dark-ink);text-decoration:none;white-space:nowrap}
.schade-tel:hover{text-decoration:underline;text-decoration-color:var(--color-dark-muted)}
.schade .hm-link{color:var(--color-dark-ink);text-decoration-color:var(--color-dark-muted)}

/* Instagram: echte foto's met datum, geen nagebootste app-chrome */
.strook{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(13rem,17rem);gap:var(--space-md);overflow-x:auto;scroll-snap-type:x mandatory;margin:var(--space-xl) 0 0;padding:0 0 var(--space-sm);scrollbar-color:var(--color-rule) transparent}
.strook li{scroll-snap-align:start}
.strook a{display:flex;flex-direction:column;gap:var(--space-3xs);text-decoration:none}
.strook img{aspect-ratio:4/5;object-fit:cover;width:100%;margin-bottom:var(--space-2xs)}
.s-datum{font-size:var(--text-xs);color:var(--color-muted)}
.s-titel{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.2}
.s-sub{font-size:var(--text-sm);color:var(--color-ink-2)}
.strook a:hover .s-titel{color:var(--color-accent-2)}

/* werkgebied */
.ringen{max-width:70rem;margin:var(--space-xl) auto 0;border-top:var(--rule)}
.ringen div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,9fr);gap:var(--space-md);padding:var(--space-sm) 0;border-bottom:var(--rule-2)}
.ringen dt{font-weight:500;white-space:nowrap}
.ringen dd{margin:0;color:var(--color-ink-2)}

/* contact */
.contact{padding-bottom:var(--space-3xl)}
.contact-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl);max-width:70rem;margin:var(--space-xl) auto 0}
.contact-groot{font-family:var(--font-display);font-size:var(--text-2xl);text-decoration:none;white-space:nowrap}
.uren{border-collapse:collapse;width:100%;font-size:var(--text-sm)}
.uren caption{text-align:left;font-weight:500;padding-bottom:var(--space-xs)}
.uren th,.uren td{text-align:left;padding:var(--space-xs) 0;border-top:var(--rule-2);font-weight:400}
.uren th{color:var(--color-ink);width:40%}
.uren td{color:var(--color-ink-2)}

/* Ft4 — dichte colofon */
.colofon{border-top:var(--rule);padding:var(--space-xl) var(--gutter) var(--space-2xl);font-size:var(--text-xs);line-height:1.7;color:var(--color-muted);background:var(--color-paper-2)}
.colofon p{max-width:75ch;margin:0 0 var(--space-sm)}
.colofon a{color:var(--color-ink-2)}
.colofon-merk{font:300 1.2rem/1 var(--font-body);color:var(--color-ink-2);margin-bottom:var(--space-md)!important}

/* C4 — belbalk, alleen op gsm */
.belbalk{display:none}

@media (max-width: 900px){
  .fold,.fold-rechts{grid-template-columns:minmax(0,1fr);min-height:0}
  .fold-beeld{min-height:0;height:auto;aspect-ratio:4/5;max-height:72svh}
  .fold-rechts .fold-beeld{order:0}
  .fold-tekst,.fold-rechts .fold-tekst{padding:var(--space-xl) var(--gutter) var(--space-lg);justify-self:stretch;max-width:none}
  .snel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .snel a:nth-child(3){border-left:0}
  .snel a:nth-child(n+3){border-top:var(--rule-2)}
  .register a{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2xs) var(--space-sm)}
  .r-kort{grid-column:1;grid-row:2}
  .r-pijl{grid-column:2;grid-row:1}
  .contact-raster{grid-template-columns:minmax(0,1fr)}
  .ringen div{grid-template-columns:minmax(0,1fr);gap:var(--space-3xs)}
  .band-tekst{padding-top:var(--space-2xl)}
  .belbalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);justify-content:space-between;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--gutter) calc(var(--space-xs) + env(safe-area-inset-bottom));background:var(--color-paper);border-top:var(--rule);font-size:var(--text-sm);color:var(--color-muted)}
  .belbalk .hm-btn{padding:var(--space-2xs) var(--space-sm)}
  body.hm{padding-bottom:var(--space-2xl)}
  .hm-kop-tel span{display:none}
  .hm-kop-tel{padding:var(--space-2xs)}
}
@media (max-width: 420px){
  .snel{grid-template-columns:minmax(0,1fr)}
  .snel a+a{border-left:0;border-top:var(--rule-2)}
}
@media (prefers-reduced-motion: reduce){
  *{transition-duration:1ms!important}
}