/*
  Het openbare bedrijfsprofiel.

  Opbouw naar het ontwerp uit de OSCAR HTML-map: losse witte kaarten met
  dezelfde ronde hoeken en dezelfde binnenruimte op een grijs vlak, een
  hoofdkolom met een meescrollende contactkaart ernaast, en een ankerbalk die
  bovenaan blijft plakken. De branchekleur komt binnen als --prof-c en wordt
  alleen als accent gebruikt; de rest blijft marine, want een profiel moet niet
  per branche een ander merk lijken.
*/
.grm-prof{
  --prof-c:#103A63;
  /* max-width:none liet een enkel element de hele pagina breder maken dan
     de telefoon. .grm-prof is een flexitem met margin:auto, dus hij neemt
     de kleinst mogelijke inhoudsbreedte over: was er ergens iets dat niet
     kon afbreken, dan werd de hele kolom zo breed. Gemeten op een telefoon
     van 375: de kolom stond op 393 en stak er 18 uit. */
  width:auto;max-width:100%;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:0 0 64px;
  background:var(--grm-bg,#F5F7FA);
  color:var(--grm-ink,#041E42);
  font-family:var(--grm-font-body,"Inter",Inter,sans-serif);
}
body:has(.grm-prof){overflow-x:hidden}

.grm-prof__crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:var(--grm-w,1424px);margin:0 auto;padding:16px 24px 0;font-size:13px;color:var(--grm-ink-500,#55636E)}
.grm-prof__crumbs a{color:var(--grm-ink-500,#55636E);text-decoration:none}
.grm-prof__crumbs a:hover{color:var(--grm-accent,#1668C7);text-decoration:underline}
.grm-prof__crumbs .material-symbols-rounded{font-size:16px;opacity:.6}
.grm-prof__crumb-now{color:var(--grm-ink,#041E42);font-weight:600}

/* ── De kop ─────────────────────────────────────────────────────────
   Een kaart met een gekleurde band erboven in plaats van een omslagfoto:
   niet elk bedrijf heeft beeld, en een kop die zonder foto instort is
   erger dan een kop zonder foto. */
.grm-prof__kop{position:relative;max-width:var(--grm-w,1424px);margin:14px auto 0;padding:0 24px}
.grm-prof__kop-band{height:96px;border-radius:18px 18px 0 0;background:linear-gradient(135deg,var(--prof-c) 0%,color-mix(in srgb,var(--prof-c) 72%,#041E42) 100%)}
.grm-prof__kop-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:28px;margin-top:-48px;padding:24px 26px 26px;border-radius:0 0 18px 18px;border:1px solid var(--grm-line,#D7DEE7);border-top:0;background:#fff;box-shadow:0 10px 30px rgba(4,30,66,.07)}
.grm-prof__kop-links{min-width:0;display:flex;flex-direction:column;gap:16px}

.grm-prof__ident{display:flex;align-items:flex-end;gap:16px;min-width:0}
.grm-prof__logo{flex:0 0 auto;width:88px;height:88px;border-radius:16px;overflow:hidden;border:3px solid #fff;background:#fff;box-shadow:0 6px 18px rgba(4,30,66,.14);display:flex;align-items:center;justify-content:center}
/* Passend, niet vullend: een plat logo in een vierkant vak wordt met
   cover afgesneden. De witte ondergrond staat al op het vak zelf. */
.grm-prof__logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.grm-prof__logo-letter{font-family:var(--grm-font-display,"Inter Tight",sans-serif);font-size:38px;font-weight:800;color:var(--prof-c)}
.grm-prof__ident-txt{min-width:0;padding-bottom:4px}
.grm-prof__ident-txt h1{margin:0 0 6px;font-family:var(--grm-font-display,"Inter Tight",sans-serif);font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--grm-ink,#041E42)}
.grm-prof__feiten{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:13.5px;color:var(--grm-ink-500,#55636E)}
.grm-prof__feiten span{display:inline-flex;align-items:center;gap:5px}
.grm-prof__feiten .material-symbols-rounded{font-size:17px;opacity:.75}

.grm-prof__chips{display:flex;flex-wrap:wrap;gap:7px}
.grm-prof__chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;border:1px solid var(--grm-line,#D7DEE7);background:#fff;font-size:12.5px;font-weight:700;color:var(--grm-ink-700,#33424F);text-decoration:none}
a.grm-prof__chip:hover{border-color:var(--grm-accent,#1668C7);color:var(--grm-accent,#1668C7);text-decoration:none}
.grm-prof__chip--keur{border-color:transparent;background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63)}
.grm-prof__chip--keur .material-symbols-rounded{font-size:16px}
.grm-prof__chip--stil{background:var(--grm-bg,#F5F7FA);border-color:transparent;color:var(--grm-ink-500,#55636E)}

/* De vier dingen waar een inkoop op afketst. */
.grm-prof__kern-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--grm-ink-400,#7A8794)}

.grm-prof__vw{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.grm-prof__vw li{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;background:var(--grm-brand-50,#EDF2F8);font-size:12.5px;font-weight:600;color:var(--grm-brand,#103A63)}
.grm-prof__vw .material-symbols-rounded{font-size:16px}

.grm-prof__kop-acties{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:2px}
.grm-prof__fav{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--grm-line,#D7DEE7);background:#fff;color:var(--grm-ink-500,#55636E);cursor:pointer;transition:color .16s,border-color .16s}
.grm-prof__fav:hover,.grm-prof__fav.is-actief{color:var(--grm-danger-700,#A11916);border-color:currentColor}

/* Beeld boven de vouw: een groot vlak met drie kleintjes ernaast. */
.grm-prof__kop-beeld{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start;min-width:0}
.grm-prof__kop-foto{display:block;border-radius:12px;overflow:hidden;background:var(--grm-bg,#F5F7FA);aspect-ratio:1/1}
.grm-prof__kop-foto.is-groot{grid-column:1/-1;aspect-ratio:16/9}
.grm-prof__kop-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.grm-prof__kop-foto:hover img{transform:scale(1.04)}

/* ── De ankerbalk ───────────────────────────────────────────────── */
.grm-prof__ankers{position:sticky;top:0;z-index:30;margin-top:18px;background:rgba(255,255,255,.96);border-top:1px solid var(--grm-line,#D7DEE7);border-bottom:1px solid var(--grm-line,#D7DEE7);backdrop-filter:none}
.grm-prof__ankers-in{display:flex;gap:4px;overflow-x:auto;max-width:var(--grm-w,1424px);margin:0 auto;padding:0 24px;scrollbar-width:none}
.grm-prof__ankers-in::-webkit-scrollbar{display:none}
.grm-prof__ankers a{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:14px 14px;border-bottom:3px solid transparent;font-size:14px;font-weight:700;color:var(--grm-ink-500,#55636E);text-decoration:none;white-space:nowrap}
.grm-prof__ankers a:hover{color:var(--grm-ink,#041E42);text-decoration:none}
.grm-prof__ankers a.is-actief{color:var(--grm-brand,#103A63);border-bottom-color:var(--prof-c)}
.grm-prof__anker-tel{font-size:11.5px;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--grm-bg,#F5F7FA);color:var(--grm-ink-500,#55636E)}

/* ── Hoofdkolom en zijbalk ──────────────────────────────────────── */
.grm-prof__body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;max-width:var(--grm-w,1424px);margin:0 auto;padding:24px}
.grm-prof__hoofd{min-width:0;display:flex;flex-direction:column;gap:20px}

.grm-prof__kaart{scroll-margin-top:84px;padding:26px 28px 28px;border-radius:18px;border:1px solid var(--grm-line,#D7DEE7);background:#fff;box-shadow:0 2px 8px rgba(4,30,66,.04)}
.grm-prof__kaart-kop{margin:0 0 20px}
.grm-prof__kaart-kop h2{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-family:var(--grm-font-display,"Inter Tight",sans-serif);font-size:clamp(19px,2.2vw,24px);font-weight:800;letter-spacing:-.015em;color:var(--grm-ink,#041E42)}
.grm-prof__kaart-kop p{margin:0;font-size:14.5px;line-height:1.65;color:var(--grm-ink-500,#55636E)}
.grm-prof__tel{font-size:12.5px;font-weight:800;padding:2px 9px;border-radius:999px;background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63)}

.grm-prof__raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1200px){.grm-prof__raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.grm-prof__raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

.grm-prof__tekst{font-size:15.5px;line-height:1.75;color:var(--grm-ink-700,#33424F)}
.grm-prof__tekst p{margin:0 0 14px}
.grm-prof__tekst h2,.grm-prof__tekst h3{font-family:var(--grm-font-display,"Inter Tight",sans-serif);font-size:18px;font-weight:800;margin:22px 0 8px;color:var(--grm-ink,#041E42)}

.grm-prof__lijst{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.grm-prof__lijst-rij{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--grm-line-soft,#EAEFF5)}
.grm-prof__lijst dt{flex:0 0 40%;font-size:13.5px;font-weight:700;color:var(--grm-ink-500,#55636E)}
.grm-prof__lijst dd{margin:0;min-width:0;font-size:14.5px;color:var(--grm-ink,#041E42)}
@media(max-width:820px){.grm-prof__lijst{grid-template-columns:minmax(0,1fr)}}

.grm-prof__galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:12px}
.grm-prof__galerij a{display:block;border-radius:12px;overflow:hidden;background:var(--grm-bg,#F5F7FA);aspect-ratio:4/3}
.grm-prof__galerij img{display:block;width:100%;height:100%;object-fit:cover}

/* De kaart die meescrollt. */
.grm-prof__zij{min-width:0}
.grm-prof__zijkaart{position:sticky;top:80px;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:18px;border:1px solid var(--grm-line,#D7DEE7);background:#fff;box-shadow:0 8px 26px rgba(4,30,66,.08)}
.grm-prof__zij-kop{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--grm-ink-400,#7A8794)}
.grm-prof__zij-naam{font-family:var(--grm-font-display,"Inter Tight",sans-serif);font-size:18px;font-weight:800;line-height:1.25;color:var(--grm-ink,#041E42)}
.grm-prof__zij-plaats{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:var(--grm-ink-500,#55636E)}
.grm-prof__zij-plaats .material-symbols-rounded{font-size:17px}
.grm-prof__zij-keur{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:5px 11px;border-radius:999px;background:var(--grm-brand-50,#EDF2F8);font-size:12.5px;font-weight:700;color:var(--grm-brand,#103A63)}
.grm-prof__zij-keur .material-symbols-rounded{font-size:16px}
.grm-prof__zij-knop{width:100%;justify-content:center;margin-top:4px}
.grm-prof__zij-regel{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--grm-line-soft,#EAEFF5);font-size:14px;font-weight:600;color:var(--grm-ink-700,#33424F);text-decoration:none}
.grm-prof__zij-regel:hover{color:var(--grm-accent,#1668C7);text-decoration:none}
.grm-prof__zij-regel .material-symbols-rounded{font-size:19px;color:var(--grm-ink-400,#7A8794)}
.grm-prof__zij-feit{display:flex;gap:18px;margin-top:6px;padding-top:14px;border-top:1px solid var(--grm-line-soft,#EAEFF5)}
.grm-prof__zij-feit span{display:flex;flex-direction:column;min-width:0}
.grm-prof__zij-feit strong{font-size:14.5px;color:var(--grm-ink,#041E42);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:1024px){
  .grm-prof__body{grid-template-columns:minmax(0,1fr)}
  .grm-prof__zijkaart{position:static}
}
@media(max-width:900px){
  .grm-prof__kop-in{grid-template-columns:minmax(0,1fr);gap:20px}
  .grm-prof__kop-beeld{grid-template-columns:repeat(4,1fr)}
  .grm-prof__kop-foto.is-groot{grid-column:1/-1;aspect-ratio:2/1}
}
@media(max-width:600px){
  .grm-prof__kop{padding:0 14px}
  .grm-prof__kop-in{padding:18px 16px 20px}
  .grm-prof__kaart{padding:20px 18px 22px}
  .grm-prof__body{padding:16px 14px}
  .grm-prof__crumbs{padding:14px 14px 0}
  .grm-prof__ankers-in{padding:0 14px}
  .grm-prof__ident{align-items:center;gap:12px}
  .grm-prof__logo{width:64px;height:64px;border-radius:14px}
}

/* De socials en de bijwerkdatum onderin de contactkaart. Klein gehouden: ze
   horen erbij als bewijs dat er iemand achter zit, niet als concurrent van de
   aanvraagknop erboven. */
.grm-prof__socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;padding-top:14px;border-top:1px solid var(--grm-line-soft,#EAEFF5)}
.grm-prof__socials a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--grm-line,#D7DEE7);color:var(--grm-ink-500,#55636E);transition:color .16s,border-color .16s,background .16s}
.grm-prof__socials a:hover{color:#fff;background:var(--grm-brand,#103A63);border-color:var(--grm-brand,#103A63)}
.grm-prof__socials svg{width:18px;height:18px;fill:currentColor}
.grm-prof__zij-datum{margin-top:10px;font-size:12px;color:var(--grm-ink-400,#7A8794)}

.grm-prof__bestel{position:relative;margin:0 0 4px;padding:24px;background-color:var(--grm-brand,#103A63);background-image:var(--grm-rij-merk);border-radius:var(--grm-r-md,16px);color:#fff}
.grm-prof__bestel-kop{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;padding:5px 12px 5px 9px;background:rgba(255,255,255,.14);border-radius:var(--grm-r-pill,999px);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.grm-prof__bestel-kop .material-symbols-rounded{font-size:17px}
.grm-prof__bestel-h{margin:0 0 8px;font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:clamp(20px,2.4vw,25px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:#fff}
.grm-prof__bestel-p{margin:0 0 18px;max-width:52ch;font-size:15px;line-height:1.6;color:rgba(255,255,255,.86)}
.grm-prof__bestel-knop{display:inline-flex!important;align-items:center;gap:9px;background:#fff!important;color:var(--grm-brand,#103A63)!important;border:0!important;font-weight:800}
.grm-prof__bestel-knop:hover{background:var(--grm-brand-50,#EDF2F8)!important;color:var(--grm-brand-600,#0B2A49)!important}
.grm-prof__bestel-knop .material-symbols-rounded{font-size:19px}
.grm-prof__bestel-fijn{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.66)}
.grm-prof__of{display:flex;align-items:center;gap:14px;margin:22px 0 18px;font-size:13px;font-weight:600;color:var(--grm-ink-400,#7A8794)}
.grm-prof__of::before,.grm-prof__of::after{content:"";flex:1 1 auto;height:1px;background:var(--grm-line,#D7DEE7)}
/* Het thema zet white-space:nowrap op knoppen. Op de knop "Direct bestellen
   bij <bedrijfsnaam>" betekent dat een onbreekbaar blok van ruim 200 pixels,
   en bij een lange bedrijfsnaam meer. Dat is wat de kolom uit elkaar duwde.
   Op een telefoon mag die tekst gewoon over twee regels. */
@media(max-width:600px){
  .grm-prof .gm-btn{white-space:normal;text-align:center}
  .grm-prof__bestel{padding:18px}
  .grm-prof__bestel-knop{width:100%;justify-content:center;text-align:center}
}

/* De foto-overlay. Een dekkende donkere laag, geen backdrop-filter: die laat de
   browser bij elke scroll de laag eronder opnieuw uitrekenen en dat is precies
   op een telefoon te merken. Een vlakke kleur doet hier hetzelfde werk. */
.grm-fotobox{position:fixed;inset:0;z-index:9999;display:none;background:var(--grm-ink,#041E42)}
.grm-fotobox.is-open{display:grid;grid-template-rows:auto 1fr auto}
body.grm-fotobox-open{overflow:hidden}
.grm-fotobox__balk{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;color:rgba(255,255,255,.86);font-size:13px}
.grm-fotobox__tel{font-weight:700;letter-spacing:.02em}
.grm-fotobox__dicht{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.grm-fotobox__dicht:hover{background:rgba(255,255,255,.22)}
.grm-fotobox__vlak{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 16px}
.grm-fotobox__vlak img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.grm-fotobox__pijl{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.grm-fotobox__pijl:hover{background:rgba(255,255,255,.26)}
.grm-fotobox__pijl[disabled]{opacity:.28;cursor:default}
.grm-fotobox__pijl--vorige{left:12px}
.grm-fotobox__pijl--volgende{right:12px}
.grm-fotobox__voet{padding:14px 16px 22px;text-align:center}
/* De vraag bij de laatste foto. */
.grm-fotobox__slot{display:none;max-width:520px;margin:0 auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:16px 18px}
.grm-fotobox__slot.is-zichtbaar{display:block}
.grm-fotobox__slot p{margin:0 0 12px;color:#fff;font-size:16px;font-weight:700;line-height:1.4}
.grm-fotobox__slot .gm-btn{text-decoration:none}
@media(max-width:600px){
    .grm-fotobox__pijl{width:44px;height:44px}
    .grm-fotobox__pijl--vorige{left:6px}
    .grm-fotobox__pijl--volgende{right:6px}
    .grm-fotobox__vlak{padding:0 8px}
}
/* Het logo opent dezelfde overlay als de fotos. */
.grm-prof__logo[data-grm-foto]{cursor:zoom-in}

/* De zijbalk loopt mee naar beneden.
 *
 * De linkerkolom is veel langer dan de rechter: gemeten op een profiel 1729
 * tegen 459 pixels. De contactkaart stond dus na een halve schermhoogte scrollen
 * al buiten beeld, precies op het moment dat iemand genoeg heeft gelezen om
 * contact op te nemen.
 *
 * position:sticky deed hier niets, en dat is niet aan deze regel te zien: het
 * thema zet overflow:hidden op de body, en binnen een voorouder met een andere
 * overflow dan visible werkt sticky niet. Vandaar dat de body op deze pagina
 * teruggezet wordt. Niet naar visible maar naar clip op de horizontale as: dat
 * houdt zijwaarts schuiven tegen zoals het thema bedoelde, terwijl hidden ook
 * de verticale as dichtzet en daarmee sticky sloopt.
 *
 * De rij heeft align-items:start, dus de kaart kan binnen zijn eigen vak
 * omhoog schuiven en stopt onderaan vanzelf op gelijke hoogte met de
 * linkerkolom. De 74 is de hoogte van de ankerbalk erboven plus wat lucht.
 */
body.grm-profielpagina{overflow-x:clip;overflow-y:visible}
@media(min-width:1000px){
    .grm-prof__zij{position:sticky;top:74px}
}

/* De blokken van het profiel als carrousel. Deze regels gelden pas zodra het
   script het spoor heeft gebouwd; zonder JavaScript blijven de blokken gewoon
   onder elkaar staan. */
.grm-prof__hoofd.is-carrousel{gap:0}
/* min-width:0: als flexitem is het venster anders nooit smaller dan de
   minimumbreedte van zijn breedste dia, en dan duwt een fotogalerij de
   hele pagina breder dan de telefoon. */
.grm-prof__venster{overflow:hidden;transition:height 220ms ease;min-width:0;max-width:100%}
.grm-prof__spoor{display:flex;align-items:flex-start;transition:transform 220ms ease;will-change:transform}
.grm-prof__hoofd.is-carrousel .grm-prof__slide{flex:0 0 100%;width:100%;min-width:0}
/* Een blok dat naast beeld staat mag niet met de tab of de zoekfunctie
   bereikbaar zijn; anders spring je naar iets wat je niet ziet. */
.grm-prof__hoofd.is-carrousel .grm-prof__slide.is-uit{visibility:hidden}
@media(prefers-reduced-motion:reduce){
    .grm-prof__venster,.grm-prof__spoor{transition:none}
}