/*----------------------------------------*/
/*  Graphiness - page styles
   Critical on homepage before deferred main.css; also re-linked after
   main.css so brand overrides (menu titles, yellow/ink) win the cascade.
/*----------------------------------------*/
:root {
  --gr-yellow: #FED015;
  --gr-yellow-dark: #E8BB0C;
  --gr-ink: #0A0A0A;
  --gr-text: #3a3a3a;
  --gr-paper: url("../img/graphiness/stropapier-licht.webp");
  --gr-radius-btn: 10px;
}

/* ---------- Fonts ----------
   Variable Acumin via assets/css/acumin-kit.css (font-display: swap).
   wdth: 50 Extra Condensed … 75 Condensed … 88 Semi Condensed … 100 Regular … 115 Wide. */
:root {
  --gr-ff: "acumin-variable", "acumin-pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gr-ff-display: "acumin-variable", "acumin-pro", "Thunder", "ThunderMed", sans-serif;
  --gr-wdth-display: 55;
  --gr-wdth-h2: 82;
  --gr-wdth-text: 100;
  --tp-ff-body: var(--gr-ff);
  --tp-ff-inter: var(--gr-ff);
  --tp-ff-heading: var(--gr-ff-display);
  --tp-ff-p: var(--gr-ff);
  --tp-common-px-white: #FFFFFF;
  --tp-common-px-black: #0A0A0A;
}
body {
  margin: 0;
  font-family: var(--gr-ff);
  font-variation-settings: "wdth" var(--gr-wdth-text);
}

/* ---------- Homepage critical path (safe while main.css / bootstrap defer) ---------- */
.pt-40 { padding-top: 40px; }
.p-relative { position: relative; }
.container-1830 {
  width: 100%;
  max-width: 1830px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
/* Lean Bootstrap stubs used on homepage header + offcanvas (avoid FOUC while theme defers).
   Does not alter hamburger z-index / overlay / logo rules below. */
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  /* Match Bootstrap gutters so late bootstrap.css does not shove the header (CLS). */
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  margin-left: calc(-0.5 * var(--bs-gutter-x));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  box-sizing: border-box;
}
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
}
@media (min-width: 992px) {
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
  }
  .d-lg-flex { display: flex !important; }
}
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.w-100 { width: 100% !important; }
.text-end { text-align: right; }
.text-center { text-align: center; }
.px-header-2-area .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.px-header-2-area .col-6 {
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
}
.px-header-2-area .text-end { text-align: right; }
.px-header-2-bar button,
.tp-hamburger-btn {
  height: 56px;
  width: 56px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 0;
  border-radius: 50%;
  background-color: var(--tp-common-px-black);
  cursor: pointer;
  padding: 0;
}
.tp-hamburger-btn span {
  margin: 4px auto;
  width: 26px;
  height: 2px;
  display: block;
  background-color: var(--tp-common-px-white);
  transition: all 0.3s ease-in-out;
}
.tp-hamburger-btn.active span { margin: 0 auto; }
.tp-hamburger-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(3px, 2px);
}
.tp-hamburger-btn.active span:nth-child(2) {
  transform: rotate(-45deg) translate(0px, 1px);
}
.tp-port-slider-area,
.tp-port-slider-main {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
.tp-port-slider-content-wrap {
  position: absolute;
  top: 0;
  left: 170px;
  height: 100%;
  width: 50%;
  overflow-y: auto;
  scrollbar-width: none;
  padding-top: 150px;
  padding-bottom: 96px;
  z-index: 5;
}
@media (max-width: 991px) {
  .tp-port-slider-content-wrap { left: 120px; }
}
@media (max-width: 767px) {
  .tp-port-slider-content-wrap {
    left: 20px;
    width: calc(100% - 40px);
    padding-top: 120px;
  }
}
.tp-port-1, .tp-port-2, .tp-port-3, .tp-port-4, .tp-port-5,
.tp-port-6, .tp-port-7, .tp-port-8, .tp-port-9, .tp-port-10, .tp-port-11,
.tp-port-12, .tp-port-13, .tp-port-14, .tp-port-15, .tp-port-16, .tp-port-17 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  opacity: 0;
  object-fit: cover;
  transform: scale(1.04, 1.04);
  transform-origin: 50% 50%;
  transition: opacity 0.9s, transform 0.9s;
}
/* First paint: no fade/scale on the default LCP plate (hover still transitions after .gr-ports-ready). */
html:not(.gr-ports-ready) #tp-port-slider-wrap.tp-port-6,
html:not(.gr-ports-ready) #tp-port-slider-wrap.tp-port-6 .tp-port-6 {
  transition: none;
  opacity: 1;
  transform: scale(1);
}
.tp-port-1 img, .tp-port-2 img, .tp-port-3 img, .tp-port-4 img, .tp-port-5 img,
.tp-port-6 img, .tp-port-7 img, .tp-port-8 img, .tp-port-9 img, .tp-port-10 img,
.tp-port-12 img, .tp-port-13 img, .tp-port-14 img, .tp-port-15 img, .tp-port-16 img,
.tp-port-17 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}
#tp-port-slider-wrap.tp-port-1,
#tp-port-slider-wrap.tp-port-1 .tp-port-1,
#tp-port-slider-wrap.tp-port-2,
#tp-port-slider-wrap.tp-port-2 .tp-port-2,
#tp-port-slider-wrap.tp-port-3,
#tp-port-slider-wrap.tp-port-3 .tp-port-3,
#tp-port-slider-wrap.tp-port-4,
#tp-port-slider-wrap.tp-port-4 .tp-port-4,
#tp-port-slider-wrap.tp-port-5,
#tp-port-slider-wrap.tp-port-5 .tp-port-5,
#tp-port-slider-wrap.tp-port-6,
#tp-port-slider-wrap.tp-port-6 .tp-port-6,
#tp-port-slider-wrap.tp-port-7,
#tp-port-slider-wrap.tp-port-7 .tp-port-7,
#tp-port-slider-wrap.tp-port-8,
#tp-port-slider-wrap.tp-port-8 .tp-port-8,
#tp-port-slider-wrap.tp-port-9,
#tp-port-slider-wrap.tp-port-9 .tp-port-9,
#tp-port-slider-wrap.tp-port-10,
#tp-port-slider-wrap.tp-port-10 .tp-port-10,
#tp-port-slider-wrap.tp-port-11,
#tp-port-slider-wrap.tp-port-11 .tp-port-11,
#tp-port-slider-wrap.tp-port-12,
#tp-port-slider-wrap.tp-port-12 .tp-port-12,
#tp-port-slider-wrap.tp-port-13,
#tp-port-slider-wrap.tp-port-13 .tp-port-13,
#tp-port-slider-wrap.tp-port-14,
#tp-port-slider-wrap.tp-port-14 .tp-port-14,
#tp-port-slider-wrap.tp-port-15,
#tp-port-slider-wrap.tp-port-15 .tp-port-15,
#tp-port-slider-wrap.tp-port-16,
#tp-port-slider-wrap.tp-port-16 .tp-port-16,
#tp-port-slider-wrap.tp-port-17,
#tp-port-slider-wrap.tp-port-17 .tp-port-17 {
  opacity: 1;
}
#tp-port-slider-wrap.tp-port-1 .tp-port-1,
#tp-port-slider-wrap.tp-port-2 .tp-port-2,
#tp-port-slider-wrap.tp-port-3 .tp-port-3,
#tp-port-slider-wrap.tp-port-4 .tp-port-4,
#tp-port-slider-wrap.tp-port-5 .tp-port-5,
#tp-port-slider-wrap.tp-port-6 .tp-port-6,
#tp-port-slider-wrap.tp-port-7 .tp-port-7,
#tp-port-slider-wrap.tp-port-8 .tp-port-8,
#tp-port-slider-wrap.tp-port-9 .tp-port-9,
#tp-port-slider-wrap.tp-port-10 .tp-port-10,
#tp-port-slider-wrap.tp-port-11 .tp-port-11,
#tp-port-slider-wrap.tp-port-12 .tp-port-12,
#tp-port-slider-wrap.tp-port-13 .tp-port-13,
#tp-port-slider-wrap.tp-port-14 .tp-port-14,
#tp-port-slider-wrap.tp-port-15 .tp-port-15,
#tp-port-slider-wrap.tp-port-16 .tp-port-16,
#tp-port-slider-wrap.tp-port-17 .tp-port-17 {
  transform: scale(1);
}
/* Soft placeholder so LCP plate isn't a blank white flash */
.tp-port-slider-thumb.gr-home-paper {
  background-color: #f0ece4;
}
body[data-bg-color="#f5f5f5"] { background-color: #f5f5f5; }

/* Offcanvas open panel.
   Stack: page layers (≤6) < panel (900) < fixed header logo/X (999).
   PageSpeed briefly set panel to 1000, which hid logo + hamburger/X and
   left click-through to portfolio hover under a mis-stacked overlay. */
.px-offcanvas-2-area.menu-open,
.px-offcanvas-2-area.menu-open-temp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 900;
  pointer-events: auto;
}
.px-offcanvas-2-area:not(.menu-open):not(.menu-open-temp) {
  pointer-events: none;
}
/* Hide the closed hamburger panel from the first paint. main.css (loaded ~2.5s
   later) used to be the only rule that set opacity:0, so the panel ghosted
   through while hovering the homepage titles. */
.px-offcanvas-2-area:not(.menu-open):not(.menu-open-temp) .offcanvas-menu,
.px-offcanvas-2-area:not(.menu-open):not(.menu-open-temp) .px-offcanvas-2-left,
.px-offcanvas-2-area:not(.menu-open):not(.menu-open-temp) .px-offcanvas-2-right,
.px-offcanvas-2-area:not(.menu-open):not(.menu-open-temp) .tp-offcanvas-menu,
.px-offcanvas-2-area:not(.menu-open):not(.menu-open-temp) .px-offcanvas-2-left-btn-box {
  opacity: 0;
}
.px-offcanvas-2-area.menu-open .offcanvas-menu,
.px-offcanvas-2-area.menu-open .px-offcanvas-2-left,
.px-offcanvas-2-area.menu-open .tp-offcanvas-menu,
.px-offcanvas-2-area.menu-open .px-offcanvas-2-left-btn-box,
.px-offcanvas-2-area.menu-open-temp .offcanvas-menu,
.px-offcanvas-2-area.menu-open-temp .px-offcanvas-2-left,
.px-offcanvas-2-area.menu-open-temp .tp-offcanvas-menu,
.px-offcanvas-2-area.menu-open-temp .px-offcanvas-2-left-btn-box {
  opacity: 1;
}
.px-offcanvas-2-area .offcanvas-bg {
  position: fixed;
  inset: 0;
  margin: 20px;
  border-radius: 20px;
  background: var(--tp-common-px-black);
  clip-path: circle(0% at calc(100% - 45px) 45px);
  transition: clip-path 0.7s ease-in-out;
  z-index: 0;
  pointer-events: auto;
}
.px-offcanvas-2-area.menu-open .offcanvas-bg {
  clip-path: circle(150% at calc(100% - 45px) 45px);
}
.px-offcanvas-2-area:not(.menu-open) .offcanvas-menu {
  pointer-events: none;
}
.px-offcanvas-2-area.menu-open .offcanvas-menu {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .px-offcanvas-2-area .offcanvas-bg { margin: 5px; }
}

/* Logo readable on black open panel (header sits above the panel) */
body:has(.px-offcanvas-2-area.menu-open) .px-header-logo img {
  filter: brightness(0) invert(1);
}

/* Submenu +/- without Font Awesome (homepage intentionally skips FA) */
.tp-menu-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.tp-menu-close i {
  display: block;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  font-size: 0 !important;
  line-height: 0;
  color: transparent !important;
}
.tp-menu-close i::before,
.tp-menu-close i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--tp-common-px-white, #fff);
  transform: translate(-50%, -50%);
}
.tp-menu-close i::before {
  width: 14px;
  height: 2px;
}
.tp-menu-close i::after {
  width: 2px;
  height: 14px;
}

/* ---------- Cookie banner / privacy ----------
   Fixed overlay — must not push document flow (CLS). */
.gr-cc {
  position: fixed !important;
  left: 24px;
  bottom: 24px;
  top: auto !important;
  right: auto;
  z-index: 100000;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  color: var(--gr-text);
  border: 1px solid #d9d9d9;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(10, 10, 10, 0.22);
  padding: 26px;
  font-family: var(--gr-ff);
  font-variation-settings: "wdth" var(--gr-wdth-text);
  contain: layout paint style;
  pointer-events: auto;
  /* Overlay only — never push page flow (CLS). */
  transform: translateZ(0);
  margin: 0 !important;
}
.gr-cc[hidden] { display: none !important; }
html {
  scrollbar-gutter: stable;
}
.gr-cc h2 {
  font-family: var(--gr-ff-display);
  font-variation-settings: "wdth" var(--gr-wdth-display);
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gr-ink);
  margin: 0 0 10px;
}
.gr-cc p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.gr-cc a {
  color: var(--gr-ink);
  text-decoration: underline;
  text-decoration-color: var(--gr-yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
.gr-cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* Accepteren en weigeren zijn bewust identiek qua uitzicht en gewicht */
.gr-cc-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--gr-ink);
  background: var(--gr-yellow);
  border: 2px solid var(--gr-yellow);
  border-radius: var(--gr-radius-btn);
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gr-cc-btn:hover,
.gr-cc-btn:focus-visible {
  background: var(--gr-ink);
  border-color: var(--gr-ink);
  color: var(--gr-yellow);
}
.gr-cc-link {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--gr-ink);
  background: transparent;
  border: 2px solid var(--gr-ink);
  border-radius: var(--gr-radius-btn);
  padding: 9px 20px;
  cursor: pointer;
}
.gr-cc-link:hover,
.gr-cc-link:focus-visible {
  background: var(--gr-ink);
  color: #fff;
}
.gr-cc button:focus-visible,
.gr-cc input:focus-visible {
  outline: 3px solid var(--gr-ink);
  outline-offset: 2px;
}
.gr-cc-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid #e5e5e5;
}
.gr-cc-row p {
  margin: 4px 0 0;
  font-size: 14px;
}
.gr-cc-row:last-of-type { margin-bottom: 14px; }
.gr-cc-always {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background: #f1f1f1;
  border-radius: 30px;
  padding: 5px 12px;
}
.gr-cc-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 52px;
  height: 30px;
  border-radius: 30px;
  background: #bdbdbd;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 2px;
}
.gr-cc-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.gr-cc-switch:checked { background: var(--gr-ink); }
.gr-cc-switch:checked::after { transform: translateX(22px); background: var(--gr-yellow); }
@media (max-width: 575px) {
  .gr-cc { left: 16px; bottom: 16px; padding: 20px; }
  .gr-cc-btn, .gr-cc-link { flex: 1 1 100%; text-align: center; }
}

/* Map that waits for consent */
.gr-map-placeholder {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #d9d9d9;
  border-radius: 16px;
  padding: 34px;
  min-height: 260px;
}
.gr-map-placeholder[hidden] { display: none; }
.gr-map-placeholder h3 { margin-bottom: 8px; }
.gr-map-placeholder p { max-width: 560px; }
.gr-map-placeholder .gr-btn { margin: 6px 10px 0 0; }
.gr-map-frame {
  display: block;
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 16px;
}

/* CAPTCHA + legal links */
.gr-captcha { margin: 6px 0 18px; min-height: 0; }
.gr-legal-links a { color: inherit; }
.gr-home-legal {
  position: absolute;
  left: 40px;
  bottom: 16px;
  z-index: 6;
  font-size: 13px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.gr-home-legal a,
.gr-home-legal button {
  font: inherit;
  color: var(--gr-ink);
  background: none;
  border: 0;
  padding: 2px 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--gr-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
@media (max-width: 767px) {
  .gr-home-legal { left: 20px; bottom: 12px; }
  .gr-home-legal a,
  .gr-home-legal button {
    padding: 6px 0;
    min-height: 36px;
  }
}
/* Mobile tap targets without changing desktop visuals much */
@media (max-width: 991px) {
  .tp-hamburger-btn {
    min-width: 48px;
    min-height: 48px;
  }
  .back-to-top-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .gr-cc-btn,
  .gr-cc-link {
    min-height: 44px;
  }
}

/* Privacy page */
body.gr-page:has(.gr-legal) .gr-hero h1 {
  font-size: clamp(42px, 6vw, 80px);
}
body.gr-page:has(.gr-legal) .gr-lead {
  font-size: 16px;
  line-height: 1.5;
}
.gr-section.gr-legal h2 {
  font-family: var(--gr-ff-display);
  font-variation-settings: "wdth" var(--gr-wdth-h2);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
  text-transform: none;
  margin: 28px 0 10px;
}
.gr-section.gr-legal p,
.gr-section.gr-legal ul.gr-list li,
.gr-section.gr-legal li {
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 720px;
}
.gr-section.gr-legal p { margin-bottom: 10px; }
.gr-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 20px;
  font-size: 12.5px;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  overflow: hidden;
}
.gr-legal th,
.gr-legal td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e5e5;
}
.gr-legal th { background: var(--gr-yellow); color: var(--gr-ink); }
@media (max-width: 700px) {
  .gr-legal table { display: block; overflow-x: auto; }
}

.px-offcanvas-2-left-btn .tp-btn-yellow-border.postbox-btn {
  border-radius: var(--gr-radius-btn);
}

/* ---------- Hamburger menu: main items a bit smaller (was 120 / 100 / 80px) ----------
   Color/line-height duplicated from theme so deferred main.css does not flash unstyled nav. */
.px-offcanvas-2-wrapper {
  padding: 155px 100px 0;
  margin-bottom: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .px-offcanvas-2-wrapper { padding: 155px 30px 0; }
}
@media only screen and (max-width: 991px) {
  .px-offcanvas-2-wrapper { padding: 110px 30px 0; }
}
.px-offcanvas-2-wrapper .tp-offcanvas-menu > nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.px-offcanvas-2-wrapper .tp-offcanvas-menu > nav > ul > li > a {
  font-family: var(--gr-ff-display);
  font-weight: 700;
  font-variation-settings: "wdth" var(--gr-wdth-display);
  font-size: 96px;
  color: var(--tp-common-px-white, #fff);
  text-decoration: none;
  line-height: 0.8;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0;
}
.px-offcanvas-2-wrapper .tp-offcanvas-menu > nav > ul > li .submenu > li > a {
  font-family: var(--gr-ff);
  font-variation-settings: "wdth" var(--gr-wdth-text);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: #717172;
  text-decoration: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .px-offcanvas-2-wrapper .tp-offcanvas-menu > nav > ul > li > a {
    font-size: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .px-offcanvas-2-wrapper .tp-offcanvas-menu > nav > ul > li > a {
    font-size: 64px;
  }
}

/* ---------- Header logo ---------- */
/* Small enough to end where the menu titles start (the "G" of Grafische vormgeving).
   Extra inset so the logo sits inside the rounded black offcanvas panel when the menu is open. */
.px-header-2-area .px-header-logo {
  margin-left: 32px;
}
@media (max-width: 767px) {
  .px-header-2-area .px-header-logo {
    margin-left: 16px;
  }
}
.px-header-logo {
  min-height: 32px;
}
.px-header-logo a {
  display: inline-block;
  line-height: 0;
}
.px-header-logo img {
  width: 110px !important;
  height: 31px !important; /* 741×211 intrinsic → reserve space (CLS) */
  aspect-ratio: 741 / 211;
  object-fit: contain;
  object-position: left center;
  display: block;
  transition: filter 0.3s ease;
}
@media (min-width: 768px) and (max-width: 991px) {
  .px-header-logo img {
    width: 70px !important;
    height: 20px !important;
  }
}
@media (max-width: 767px) {
  .px-header-logo {
    min-height: 28px;
  }
  .px-header-logo img {
    width: 100px !important;
    height: 28px !important;
  }
}
/* turns black on hover, before clicking */
.px-header-logo a:hover img,
.px-header-logo a:focus-visible img {
  filter: brightness(0);
}

/* ---------- Logo used as heading (contact page) ---------- */
.gr-section a.gr-logo-link {
  display: inline-block;
  margin: 0 0 24px;
  text-decoration: none !important;
  background: transparent !important;
  line-height: 0;
}
.gr-logo-link img {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  transition: filter 0.3s ease;
}
.gr-logo-link:hover img,
.gr-logo-link:focus-visible img {
  filter: brightness(0);
}

/* ---------- Werkwijze (two process cards with numbered steps) ---------- */
.gr-process {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 30px;
  align-items: start;
}
@media (max-width: 900px) {
  .gr-process { grid-template-columns: 1fr; }
}
.gr-process .gr-card {
  padding: 34px;
}
.gr-process .gr-card h3 {
  font-size: 28px;
  margin: 14px 0 12px;
}
.gr-process .gr-card > p {
  font-size: 17px;
  margin-bottom: 20px;
}
.gr-process .gr-card > p.gr-small {
  font-size: 14px;
  margin: 18px 0 0;
}
ol.gr-steps {
  list-style: none;
  counter-reset: gr-step;
  padding: 0;
  margin: 0;
}
ol.gr-steps li {
  counter-increment: gr-step;
  position: relative;
  padding: 0 0 18px 52px;
  font-size: 16px;
  line-height: 1.6;
}
ol.gr-steps li:last-child { padding-bottom: 0; }
ol.gr-steps li::before {
  content: counter(gr-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gr-yellow);
  color: var(--gr-ink);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
ol.gr-steps li strong {
  display: block;
  color: var(--gr-ink);
}

/* ---------- Contact info under the logo ---------- */
.gr-info {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0 70px;
}
.gr-info h3 { margin-bottom: 6px; }
.gr-info p { margin-bottom: 0; }
@media (min-width: 761px) {
  .gr-info .gr-address { white-space: nowrap; }
}
@media (max-width: 760px) {
  .gr-info { grid-template-columns: 1fr; gap: 20px 0; }
}

/* ---------- Contact form ---------- */
.gr-form {
  max-width: 760px;
}
.gr-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
@media (max-width: 640px) {
  .gr-form-row { grid-template-columns: 1fr; }
}
.gr-field {
  margin-bottom: 20px;
}
.gr-field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--gr-ink);
  margin-bottom: 6px;
}
.gr-field input,
.gr-field textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--gr-ink);
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gr-field textarea {
  min-height: 170px;
  resize: vertical;
}
.gr-field input:focus,
.gr-field textarea:focus {
  border-color: var(--gr-ink);
  box-shadow: 0 0 0 3px var(--gr-yellow);
}
/* honeypot: hidden for people, visible to bots */
.gr-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.gr-form button.gr-btn {
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  margin: 0;
}
.gr-form .ajax-response {
  margin: 18px 0 0;
  font-weight: 700;
}
.gr-form .ajax-response.success {
  color: #1d6b2f;
}
.gr-form .ajax-response.error {
  color: #b3261e;
}
.gr-form .ajax-response.info {
  color: var(--gr-ink);
}
.gr-form-thanks {
  font-weight: 700;
}
.gr-form-thanks p {
  margin: 0 0 14px;
}
.gr-form-thanks-logo {
  display: block;
  width: 110px;
  height: auto;
}
#upload,
#contact-form,
#formulier,
#drukmethode,
#werkwijze {
  scroll-margin-top: 120px;
}
.gr-upload input[type="file"] {
  padding: 10px 12px;
  cursor: pointer;
}
.gr-upload input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  color: var(--gr-ink);
  background: var(--gr-yellow);
  border: 0;
  border-radius: var(--gr-radius-btn);
  padding: 8px 18px;
  margin-right: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.gr-upload input[type="file"]::file-selector-button:hover {
  background: var(--gr-ink);
  color: var(--gr-yellow);
}
.gr-file-info {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 8px 0 0 !important;
  opacity: 0.8;
}
.gr-file-info.error {
  color: #b3261e;
  opacity: 1;
}
.gr-form-note {
  font-size: 14px;
  opacity: 0.75;
}

/* ---------- Homepage ---------- */
/* Two-level hover menu: two main sections with their pages underneath */
.gr-home-group {
  margin-bottom: 34px;
}
.gr-teaser-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: #fff;
  overflow: hidden;
}
.gr-teaser-overlay[hidden] { display: none !important; }
body.gr-teaser-on { overflow: hidden; }
.gr-teaser-stop {
  position: absolute;
  z-index: 4;
  left: 24px;
  bottom: 24px;
  margin: 0;
  cursor: pointer;
  font-size: 16px;
}
.tp-port-slider-area .tp-port-slider-title.gr-main-title {
  font-size: 96px !important;
  letter-spacing: 3px;
  /* ≥1 + padding so descenders (g/j/y) stay visible with background-clip:text */
  line-height: 1.08 !important;
  padding-bottom: 0.12em;
  overflow: visible;
  /* Reserve line box before webfont applies (CLS). */
  min-height: 1.2em;
}
.gr-home-sub {
  padding-top: 8px;
}
.tp-port-slider-area .tp-port-slider-title.gr-sub-title {
  font-size: 56px !important;
  letter-spacing: 2px;
  line-height: 1.05 !important;
  min-height: 1.1em;
}

/* Nested Kaartontwerp / Gelegenheid & Kaarten: collapsed by default */
.gr-home-nest {
  position: relative;
}
.gr-home-nest-sub {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.28s ease, opacity 0.2s ease;
}
.gr-home-nest:hover .gr-home-nest-sub,
.gr-home-nest:focus-within .gr-home-nest-sub,
.gr-home-nest.is-open .gr-home-nest-sub {
  max-height: 14em;
  opacity: 1;
  pointer-events: auto;
}
.tp-port-slider-area .tp-port-slider-title.gr-nest-child {
  font-size: 34px !important;
  letter-spacing: 1px;
  line-height: 1.12 !important;
  padding-left: 0.15em;
  opacity: 0.92;
  min-height: 1.15em;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .tp-port-slider-area .tp-port-slider-title.gr-main-title { font-size: 72px !important; }
  .tp-port-slider-area .tp-port-slider-title.gr-sub-title { font-size: 40px !important; }
  .tp-port-slider-area .tp-port-slider-title.gr-nest-child { font-size: 26px !important; }
}
@media (max-width: 767px) {
  .tp-port-slider-area .tp-port-slider-title.gr-main-title { font-size: 48px !important; }
  .tp-port-slider-area .tp-port-slider-title.gr-sub-title { font-size: 30px !important; }
  .tp-port-slider-area .tp-port-slider-title.gr-nest-child { font-size: 22px !important; }
  .gr-home-group { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-home-nest-sub { transition: none; }
}

/* Fine pointer: hover/focus-within. Coarse: .is-open from tap JS on index. */

/* Solid black text at rest (always visible). On hover a yellow fill sweeps over the black.
   Two solid layers: yellow (top, grows 0 -> 100% on hover) over black (always full).
   Higher specificity than theme .tp-port-slider-title in deferred main.css (outline-only
   stroke + transparent fill until hover, white/morganite scheme). */
.tp-port-slider-area .tp-port-slider-title {
  font-family: var(--gr-ff-display);
  font-weight: 700;
  font-variation-settings: "wdth" var(--gr-wdth-display);
  text-transform: none;
  cursor: pointer;
  display: block;
  color: transparent;
  -webkit-text-stroke: 0;
  mix-blend-mode: normal;
  background-color: transparent;
  background-image:
    linear-gradient(var(--gr-yellow), var(--gr-yellow)),
    linear-gradient(var(--gr-ink), var(--gr-ink));
  background-repeat: no-repeat;
  background-position: 0 0, 0 0;
  background-size: 0% 100%, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-size 0.6s cubic-bezier(0.32, 0.55, 0.58, 0.76);
}
.tp-port-slider-area .tp-port-slider-title:hover {
  background-size: 100% 100%, 100% 100%;
  color: transparent;
}
.tp-port-slider-area .tp-port-slider-title a,
.tp-port-slider-area .tp-port-slider-title a:hover,
.tp-port-slider-area .tp-port-slider-title a:focus,
.tp-port-slider-area .tp-port-slider-title a:visited {
  color: transparent;
  text-decoration: none;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  outline: none;
}
.gr-home-intro {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 6;
  max-width: 360px;
  text-align: right;
  pointer-events: none;
}
.gr-home-intro .gr-home-contact {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #0A0A0A;
  text-decoration: none;
  pointer-events: auto;
}
.gr-home-intro .gr-home-contact:hover,
.gr-home-intro .gr-home-contact:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gr-home-intro h1 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--gr-ink);
}
.gr-home-intro p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gr-text);
}
@media (max-width: 767px) {
  .gr-home-intro {
    display: none;
  }
}
/* super kleur and Boeken: the right-bottom intro stays white for the whole hover. */
body:has(#tp-port-slider-wrap.tp-port-10) .gr-home-intro .gr-home-contact,
body:has(#tp-port-slider-wrap.tp-port-10) .gr-home-intro h1,
body:has(#tp-port-slider-wrap.tp-port-10) .gr-home-intro p,
body:has(#tp-port-slider-wrap.tp-port-11) .gr-home-intro .gr-home-contact,
body:has(#tp-port-slider-wrap.tp-port-11) .gr-home-intro h1,
body:has(#tp-port-slider-wrap.tp-port-11) .gr-home-intro p {
  color: #fff;
}

/* Hovered menu title stays white. Every other title keeps black ink and the yellow sweep. */
body:has(#tp-port-slider-wrap.tp-port-1) .tp-port-slider-title[rel="tp-port-1"],
body:has(#tp-port-slider-wrap.tp-port-2) .tp-port-slider-title[rel="tp-port-2"],
body:has(#tp-port-slider-wrap.tp-port-3) .tp-port-slider-title[rel="tp-port-3"],
body:has(#tp-port-slider-wrap.tp-port-4) .tp-port-slider-title[rel="tp-port-4"],
body:has(#tp-port-slider-wrap.tp-port-5) .tp-port-slider-title[rel="tp-port-5"],
body:has(#tp-port-slider-wrap.tp-port-6) .tp-port-slider-title[rel="tp-port-6"],
body:has(#tp-port-slider-wrap.tp-port-7) .tp-port-slider-title[rel="tp-port-7"],
body:has(#tp-port-slider-wrap.tp-port-8) .tp-port-slider-title[rel="tp-port-8"],
body:has(#tp-port-slider-wrap.tp-port-9) .tp-port-slider-title[rel="tp-port-9"],
body:has(#tp-port-slider-wrap.tp-port-10) .tp-port-slider-title[rel="tp-port-10"],
body:has(#tp-port-slider-wrap.tp-port-11) .tp-port-slider-title[rel="tp-port-11"],
body:has(#tp-port-slider-wrap.tp-port-12) .tp-port-slider-title[rel="tp-port-12"],
body:has(#tp-port-slider-wrap.tp-port-13) .tp-port-slider-title[rel="tp-port-13"],
body:has(#tp-port-slider-wrap.tp-port-14) .tp-port-slider-title[rel="tp-port-14"],
body:has(#tp-port-slider-wrap.tp-port-15) .tp-port-slider-title[rel="tp-port-15"],
body:has(#tp-port-slider-wrap.tp-port-16) .tp-port-slider-title[rel="tp-port-16"],
body:has(#tp-port-slider-wrap.tp-port-17) .tp-port-slider-title[rel="tp-port-17"] {
  --gr-ink: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
}
body:has(#tp-port-slider-wrap.tp-port-1) .tp-port-slider-title:not([rel="tp-port-1"]),
body:has(#tp-port-slider-wrap.tp-port-2) .tp-port-slider-title:not([rel="tp-port-2"]),
body:has(#tp-port-slider-wrap.tp-port-3) .tp-port-slider-title:not([rel="tp-port-3"]),
body:has(#tp-port-slider-wrap.tp-port-4) .tp-port-slider-title:not([rel="tp-port-4"]),
body:has(#tp-port-slider-wrap.tp-port-5) .tp-port-slider-title:not([rel="tp-port-5"]),
body:has(#tp-port-slider-wrap.tp-port-6) .tp-port-slider-title:not([rel="tp-port-6"]),
body:has(#tp-port-slider-wrap.tp-port-7) .tp-port-slider-title:not([rel="tp-port-7"]),
body:has(#tp-port-slider-wrap.tp-port-8) .tp-port-slider-title:not([rel="tp-port-8"]),
body:has(#tp-port-slider-wrap.tp-port-9) .tp-port-slider-title:not([rel="tp-port-9"]),
body:has(#tp-port-slider-wrap.tp-port-10) .tp-port-slider-title:not([rel="tp-port-10"]),
body:has(#tp-port-slider-wrap.tp-port-11) .tp-port-slider-title:not([rel="tp-port-11"]),
body:has(#tp-port-slider-wrap.tp-port-12) .tp-port-slider-title:not([rel="tp-port-12"]),
body:has(#tp-port-slider-wrap.tp-port-13) .tp-port-slider-title:not([rel="tp-port-13"]),
body:has(#tp-port-slider-wrap.tp-port-14) .tp-port-slider-title:not([rel="tp-port-14"]),
body:has(#tp-port-slider-wrap.tp-port-15) .tp-port-slider-title:not([rel="tp-port-15"]),
body:has(#tp-port-slider-wrap.tp-port-16) .tp-port-slider-title:not([rel="tp-port-16"]),
body:has(#tp-port-slider-wrap.tp-port-17) .tp-port-slider-title:not([rel="tp-port-17"]) {
  --gr-ink: #0A0A0A;
  background-image:
    linear-gradient(var(--gr-yellow), var(--gr-yellow)),
    linear-gradient(var(--gr-ink), var(--gr-ink));
}
/* Either main pillar: both main titles follow the paper fade.
   Yellow on the paper, black when the field is fully yellow. Submenus stay black. */
body:has(#tp-port-slider-wrap.tp-port-1) .tp-port-slider-title.gr-main-title,
body:has(#tp-port-slider-wrap.tp-port-6) .tp-port-slider-title.gr-main-title {
  --gr-ink: var(--gr-main-ink, #FED015);
  background-image:
    linear-gradient(var(--gr-main-ink, #FED015), var(--gr-main-ink, #FED015)),
    linear-gradient(var(--gr-main-ink, #FED015), var(--gr-main-ink, #FED015));
}
/* Light plates: the yellow logo turns black */
body:has(#tp-port-slider-wrap:is(.tp-port-2, .tp-port-3, .tp-port-4, .tp-port-5, .tp-port-7, .tp-port-8, .tp-port-9, .tp-port-10, .tp-port-11, .tp-port-12, .tp-port-13, .tp-port-14, .tp-port-15, .tp-port-16, .tp-port-17)) .px-header-logo img {
  filter: brightness(0);
}
/* Grafische vormgeving submenu: solid site yellow, no image.
   Visual order alternates full coverage and half coverage. */
.tp-port-slider-thumb.gr-home-yellow {
  background: #FED015;
}
#tp-port-slider-wrap.tp-port-4 .tp-port-slider-thumb.tp-port-4,
#tp-port-slider-wrap.tp-port-5 .tp-port-slider-thumb.tp-port-5 {
  opacity: 0.85;
}
/* super kleur hover: full site-yellow field, like Letterpress, with the animation on it */
.tp-port-slider-thumb.gr-home-kleur {
  background: #FED015;
  overflow: hidden;
}
.tp-port-slider-thumb.gr-home-kleur .gr-home-kleur-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tp-port-slider-thumb.gr-home-kleur .gr-home-kleur-frame picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tp-port-slider-thumb.gr-home-kleur .gr-kleur-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 62%;
  transform: scale(1.08);
  transform-origin: center 62%;
  pointer-events: none;
}
/* Homepage hover plates: picture fills the thumb like a bare img */
.tp-port-slider-thumb > picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.tp-port-slider-thumb > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Mobile hover crops (no separate assets):
   - laten drukken + letterpress: nudge subject clear of the left menu
   - geboortekaartjes ontwerpen: subject lives in the right third — keep it in frame */
@media (max-width: 900px) {
  .tp-port-slider-thumb.tp-port-8 > picture img,
  .tp-port-slider-thumb.tp-port-9 > picture img {
    object-position: 78% center;
  }
  .tp-port-slider-thumb.tp-port-13 > picture img {
    object-position: 92% center;
  }
}
/* Dual hover plates: leave image at rest; over image on mouse enter (+ short stall on leave) */
.tp-port-slider-thumb[data-home-dual-plate] > picture.gr-lp-hue {
  z-index: 1;
  opacity: 1;
}
.tp-port-slider-thumb[data-home-dual-plate] > picture.gr-lp-full {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease; /* settle during the 0.3s leave stall */
}
.tp-port-slider-thumb[data-home-dual-plate].gr-lp-over > picture.gr-lp-full {
  opacity: 1;
  transition-duration: 0.25s; /* snappy on enter */
}
@media (prefers-reduced-motion: reduce) {
  .tp-port-slider-thumb[data-home-dual-plate] > picture.gr-lp-full {
    transition: none;
  }
}
.tp-port-slider-thumb.gr-home-kleur .gr-kleur-green { z-index: 1; opacity: 1; }
.tp-port-slider-thumb.gr-home-kleur .gr-kleur-yellow { z-index: 2; opacity: 0; }
/* super kleur hover: yellow ↔ green loops while hovered.
   Class .gr-kleur-playing is toggled in index.html so every return restarts cleanly. */
.tp-port-slider-thumb.gr-home-kleur.gr-kleur-playing .gr-kleur-yellow {
  animation: gr-home-kleur-yellow 3.2s ease-in-out infinite;
}
.tp-port-slider-thumb.gr-home-kleur.gr-kleur-playing .gr-kleur-green {
  animation: gr-home-kleur-green 3.2s ease-in-out infinite;
}
@keyframes gr-home-kleur-yellow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes gr-home-kleur-green {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-port-slider-thumb.gr-home-kleur.gr-kleur-playing .gr-kleur-yellow,
  .tp-port-slider-thumb.gr-home-kleur.gr-kleur-playing .gr-kleur-green {
    animation: none;
  }
  .tp-port-slider-thumb.gr-home-kleur.gr-kleur-playing .gr-kleur-green {
    opacity: 1;
  }
  .tp-port-slider-thumb.gr-home-kleur.gr-kleur-playing .gr-kleur-yellow {
    opacity: 0;
  }
}
/* Left fade on the yellow and green cutouts only, so the menu column reads.
   Softer than a deep wash: a short clear zone, then solid well before the right edge. */
.tp-port-slider-thumb.gr-home-kleur :is(.gr-kleur-yellow, .gr-kleur-green) {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 8%,
    rgba(255, 255, 255, 0.22) 26%,
    rgba(255, 255, 255, 0.55) 42%,
    #fff 58%,
    #fff 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 8%,
    rgba(255, 255, 255, 0.22) 26%,
    rgba(255, 255, 255, 0.55) 42%,
    #fff 58%,
    #fff 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mask-mode: alpha;
}

/* Drukkerij hover: short video fades in (1–2 loops) before yellow/twinkle */
.tp-port-slider-thumb.gr-home-paper .gr-druk-hover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.tp-port-slider-thumb.gr-home-paper.gr-druk-video-on .gr-druk-hover-video {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .tp-port-slider-thumb.gr-home-paper .gr-druk-hover-video {
    display: none;
  }
}

/* Main titles: paper fades to yellow; flecks stay above the yellow and twinkle.
   Driven by .gr-paper-playing (toggled in index.html) so it runs without GSAP. */
.tp-port-slider-thumb.gr-home-paper {
  overflow: hidden;
}
.tp-port-slider-thumb.gr-home-paper .gr-paper-yellow {
  position: absolute;
  inset: 0;
  background: #FED015;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.tp-port-slider-thumb.gr-home-paper.gr-paper-playing .gr-paper-yellow {
  animation: gr-paper-yellow-in 5s ease-in-out forwards;
}
@keyframes gr-paper-yellow-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tp-port-slider-thumb.gr-home-paper .gr-paper-specks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.gr-paper-speck {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%) scale(0.75);
}
.tp-port-slider-thumb.gr-home-paper.gr-paper-playing .gr-paper-speck {
  animation-name: gr-paper-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.tp-port-slider-thumb.gr-home-paper.gr-paper-playing.gr-paper-twinkle-done .gr-paper-speck {
  animation: none !important;
  opacity: 0 !important;
}
@keyframes gr-paper-twinkle {
  from { opacity: 0.18; transform: translate(-50%, -50%) scale(0.75); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
}
/* Main title ink: yellow on paper → black when the field is fully yellow. */
@property --gr-main-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #FED015;
}
body:has(#tp-port-slider-wrap.tp-port-1) .tp-port-slider-title.gr-main-title,
body:has(#tp-port-slider-wrap.tp-port-6) .tp-port-slider-title.gr-main-title {
  animation: gr-main-ink-to-black 5s ease-in-out forwards;
}
@keyframes gr-main-ink-to-black {
  from { --gr-main-ink: #FED015; }
  to { --gr-main-ink: #0A0A0A; }
}
/* Logo turns white as the yellow field reaches rest. */
body:has(#tp-port-slider-wrap.tp-port-1) .px-header-logo img,
body:has(#tp-port-slider-wrap.tp-port-6) .px-header-logo img {
  animation: gr-logo-paper-white 0.4s ease-in-out 4.6s forwards;
}
@keyframes gr-logo-paper-white {
  from { filter: none; }
  to { filter: brightness(0) invert(1); }
}
/* Flecks that linger on the next plate after leaving the paper hovers. */
.gr-paper-linger {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.gr-paper-linger-speck {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: #FED015;
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65),
    0 0 6px 1px rgba(255, 255, 255, 0.35);
  transition: opacity 0.45s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .tp-port-slider-thumb.gr-home-paper .gr-paper-yellow,
  .gr-paper-speck,
  .gr-paper-linger {
    display: none;
  }
  body:has(#tp-port-slider-wrap.tp-port-1) .tp-port-slider-title.gr-main-title,
  body:has(#tp-port-slider-wrap.tp-port-6) .tp-port-slider-title.gr-main-title,
  body:has(#tp-port-slider-wrap.tp-port-1) .px-header-logo img,
  body:has(#tp-port-slider-wrap.tp-port-6) .px-header-logo img {
    animation: none;
  }
}
/* Older phones / touch: shorter hovers, no twinkling flecks */
@media (max-width: 900px), (pointer: coarse) {
  .tp-port-slider-thumb.gr-home-kleur.gr-kleur-playing .gr-kleur-yellow,
  .tp-port-slider-thumb.gr-home-kleur.gr-kleur-playing .gr-kleur-green {
    animation-duration: 1.6s;
  }
  .tp-port-slider-thumb.gr-home-paper.gr-paper-playing .gr-paper-yellow {
    animation-duration: 1.4s;
  }
  body:has(#tp-port-slider-wrap.tp-port-1) .tp-port-slider-title.gr-main-title,
  body:has(#tp-port-slider-wrap.tp-port-6) .tp-port-slider-title.gr-main-title {
    animation-duration: 1.4s;
  }
  body:has(#tp-port-slider-wrap.tp-port-1) .px-header-logo img,
  body:has(#tp-port-slider-wrap.tp-port-6) .px-header-logo img {
    animation-duration: 0.25s;
    animation-delay: 1.15s;
  }
  .tp-port-slider-thumb.gr-home-paper.gr-paper-playing .gr-paper-speck {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ---------- Inner pages ---------- */
/* White lives on the root. The body stays clear so the paper layer can show, then fade. */
html:has(body.gr-page) {
  background-color: #fff;
}
body.gr-page {
  font-family: var(--gr-ff);
  font-variation-settings: "wdth" var(--gr-wdth-text);
  background-color: transparent;
  position: relative;
  z-index: 0;
  color: var(--gr-text);
}
/* Paper plate sits behind the page and fades as soon as the page lands.
   A class starts the fade; it is not tied to scroll. */
body.gr-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--gr-paper);
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
}
body.gr-page.gr-paper-fade::before {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  body.gr-page::before {
    transition: none;
    opacity: 0;
  }
}
.gr-main {
  padding: 170px 0 80px;
}
.gr-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 30px;
}
.gr-eyebrow {
  display: inline-block;
  background: var(--gr-yellow);
  color: var(--gr-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--gr-radius-btn);
  margin-bottom: 22px;
}
.gr-hero h1 {
  font-family: var(--gr-ff-display);
  font-weight: 700;
  font-variation-settings: "wdth" var(--gr-wdth-display);
  font-size: clamp(64px, 10vw, 150px);
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--gr-ink);
  margin: 0 0 24px;
  letter-spacing: 1px;
}
.gr-hero h1 span {
  color: inherit;
}
.gr-lead {
  font-size: 22px;
  line-height: 1.5;
  max-width: 760px;
  color: var(--gr-ink);
  margin-bottom: 0;
}
.gr-lead .gr-emph {
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: linear-gradient(transparent 62%, var(--gr-yellow) 62%);
  padding: 0 0.06em;
}
/* gelegenheidsdrukwerk hero: one line inside the 1180px wrap */
.gr-lead.gr-lead-wide {
  max-width: none;
}
.gr-section {
  padding-top: 70px;
}
.gr-section h2,
.gr-section h1.gr-section-h1 {
  font-family: var(--gr-ff-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.15;
  text-transform: none;
  font-variation-settings: "wdth" var(--gr-wdth-h2);
  color: var(--gr-ink);
  margin: 0 0 18px;
  letter-spacing: normal;
}
.gr-section h3 {
  font-family: var(--gr-ff);
  font-size: 22px;
  font-weight: 600;
  font-variation-settings: "wdth" var(--gr-wdth-text);
  color: var(--gr-ink);
  margin: 0 0 10px;
}
.gr-section p.gr-h-tight {
  margin-bottom: 4px;
}
.gr-section p.gr-h-tight + h3.gr-h-tight {
  margin-bottom: 0;
}
.gr-section p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 16px;
  max-width: 720px;
}
/* gelegenheidsdrukwerk: these sections use the full wrap, not the 720px cap */
#geboortekaarten :is(p, ul, ol, li),
#trouwkaarten :is(p, ul, ol, li),
#uitnodigingskaarten :is(p, ul, ol, li),
#werkwijze :is(p, ul, ol, li) {
  max-width: none;
}
.gr-section ul.gr-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.gr-section ul.gr-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.6;
}
.gr-section ul.gr-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gr-yellow);
}
.gr-section ul.gr-list.gr-pioneers {
  max-width: 720px;
}
.gr-section ul.gr-list.gr-pioneers li {
  padding-left: 0;
  font-size: 15px;
  line-height: 1.65;
}
.gr-section ul.gr-list.gr-pioneers li strong {
  font-size: 15px;
  font-weight: 700;
}
.gr-section ul.gr-list.gr-pioneers li::before {
  left: -16px;
  width: 8px;
  height: 8px;
  top: 0.45em;
}
.gr-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.gr-split.top {
  align-items: start;
}
@media (max-width: 900px) {
  .gr-split {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.gr-figure {
  margin: 0;
}
.gr-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 0;
  background: #fff;
}
/* images with a white background need a thin edge so they don't dissolve into the paper */
.gr-figure.is-logo img {
  border: 1px solid #d9d9d9;
}
.gr-figure figcaption {
  font-size: 14px;
  margin-top: 8px;
  color: #6D6868;
}
.gr-figure.contain img {
  object-fit: contain;
}
/* Show the centre half of the photo, full column width */
.gr-figure.is-half {
  overflow: hidden;
  border-radius: 16px;
}
.gr-figure.is-half img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: center center;
  border-radius: 0;
}
.gr-figure.is-half figcaption {
  padding-top: 8px;
}
.gr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px;
}
.gr-card {
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid var(--gr-yellow);
  border-radius: 16px;
  padding: 26px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.gr-card p {
  font-size: 16px;
  margin-bottom: 0;
}
a.gr-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.gr-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(10, 10, 10, 0.1);
}
.gr-card .gr-card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 10px;
}
.gr-card .gr-card-img img {
  max-width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
}
.gr-card .gr-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gr-ink);
  background: var(--gr-yellow);
  border-radius: var(--gr-radius-btn);
  padding: 3px 10px;
  margin-bottom: 10px;
}
.gr-banner h2,
.gr-banner h3 {
  font-family: var(--gr-ff-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  text-transform: none;
  font-variation-settings: "wdth" var(--gr-wdth-h2);
}
.gr-btn {
  display: inline-block;
  background: var(--gr-yellow);
  color: var(--gr-ink);
  font-family: var(--gr-ff);
  font-variation-settings: "wdth" var(--gr-wdth-text);
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--gr-radius-btn);
  border: 2px solid var(--gr-yellow);
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  margin: 6px 10px 0 0;
}
.gr-btn:hover {
  background: var(--gr-ink);
  border-color: var(--gr-ink);
  color: var(--gr-yellow);
}
.gr-btn.outline {
  background: transparent;
}
.gr-btn.outline:hover {
  background: var(--gr-yellow);
  border-color: var(--gr-yellow);
  color: var(--gr-ink);
}
/* letterpress and digitaal: prose fills the content wrap */
.gr-main.gr-letterpress .gr-section p,
.gr-main.gr-digitaal .gr-section p {
  max-width: none;
}
/* Bullets on these pages stay one column. Text under them stays full width. */
.gr-main.gr-letterpress .gr-section ul.gr-list,
.gr-main.gr-superkleur .gr-section ul.gr-list,
.gr-main.gr-digitaal .gr-section ul.gr-list {
  max-width: 720px;
  columns: 1;
}
.gr-main.gr-digitaal .gr-section p:has(+ ul.gr-list) {
  max-width: 720px;
  margin-bottom: 16px;
}
/* digitaal only: no extra gap between paragraphs. List and file boxes keep their own space. */
.gr-main.gr-digitaal .gr-section p {
  margin-bottom: 0;
}
.gr-main.gr-digitaal .gr-section p:has(+ .gr-grid) {
  margin-bottom: 16px;
}
.gr-main.gr-digitaal .gr-section .gr-grid {
  padding-top: 22px;
}
.gr-main.gr-superkleur .gr-section ul.gr-list ~ p,
.gr-main.gr-letterpress .gr-section ul.gr-list ~ p {
  max-width: none;
}
/* super kleur only: each button on its own line, left-aligned with the text */
.gr-main.gr-superkleur .gr-btn {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-right: 0;
}
.gr-hero a:not(.gr-btn),
.gr-section a:not(.gr-btn):not(.gr-card) {
  color: var(--gr-ink);
  text-decoration: underline;
  text-decoration-color: var(--gr-yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
.gr-hero a:not(.gr-btn):hover,
.gr-section a:not(.gr-btn):not(.gr-card):hover {
  background: var(--gr-yellow);
}
.gr-crumbs {
  font-size: 14px;
  margin-bottom: 18px;
}
.gr-crumbs a {
  color: var(--gr-ink);
  text-decoration: none;
}
.gr-crumbs a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gr-yellow);
  text-decoration-thickness: 3px;
}
.gr-crumbs span {
  margin: 0 6px;
  color: #999;
}
.gr-banner {
  background: var(--gr-yellow);
  color: var(--gr-ink);
  border-radius: 20px;
  padding: 40px;
}
.gr-banner h2,
.gr-banner h3,
.gr-banner p {
  color: var(--gr-ink);
}
.gr-banner a:not(.gr-btn) {
  color: var(--gr-ink);
}
.gr-banner .gr-btn {
  background: var(--gr-ink);
  border-color: var(--gr-ink);
  color: var(--gr-yellow);
}
.gr-banner .gr-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--gr-ink);
}
.gr-footer {
  margin-top: 90px;
  padding: 40px 0 10px;
  border-top: 3px solid var(--gr-yellow);
  font-size: 15px;
}
.gr-footer .gr-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 30px;
}
@media (max-width: 900px) {
  .gr-footer .gr-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 575px) {
  .gr-footer .gr-footer-grid {
    grid-template-columns: 1fr;
  }
}
.gr-footer h4 {
  font-family: var(--gr-ff-display);
  font-weight: 600;
  font-variation-settings: "wdth" var(--gr-wdth-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gr-ink);
  margin-bottom: 12px;
}
.gr-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.gr-footer li {
  margin-bottom: 6px;
}
.gr-footer a {
  color: var(--gr-ink);
  text-decoration: none;
}
.gr-footer a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gr-yellow);
  text-decoration-thickness: 3px;
}
.gr-footer img {
  width: 150px;
  height: auto;
  margin-bottom: 12px;
}
.gr-footer .gr-copy {
  margin-top: 30px;
  font-size: 13px;
  color: #6D6868;
}
.gr-offcanvas-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* Huisstijl: toelichting bij de logo's iets kleiner */
.gr-grid-logos .gr-card h3 { font-size: 19px; }
.gr-grid-logos .gr-card p { font-size: 14.5px; line-height: 1.6; }

.gr-files-cta {
  margin-top: 24px;
}

/* ---------- Logo/header blijft altijd vast linksboven, ook tijdens scrollen ---------- */
.px-header-2-area.header-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  transform: none !important;
  pointer-events: none;
}
.px-header-2-area.header-fixed a,
.px-header-2-area.header-fixed button {
  pointer-events: auto;
}

/* Homepage hover: extra item "Boeken" (tp-port-11) */
.tp-port-11 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  opacity: 0;
  object-fit: cover;
  background: #FED015;
  transform: scale(1.04, 1.04);
  transform-origin: 50% 50%;
  transition: all 0.9s;
}
.tp-port-11 img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  transition: none;
}
#tp-port-slider-wrap.tp-port-11 {
  opacity: 1;
}
#tp-port-slider-wrap.tp-port-11 .tp-port-11 {
  opacity: 1;
  transform: scale(1);
}

/* Huisstijl: grayscale logo marquee under hero lead */
.gr-logo-marquee {
  margin-top: 1.75rem;
  overflow: hidden;
  max-height: 5.5rem;
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 0.55s ease, transform 0.55s ease, max-height 0.55s ease, margin 0.55s ease;
  pointer-events: none;
}
.gr-logo-marquee.is-running {
  opacity: 1;
  transform: translateY(0);
}
.gr-logo-marquee.is-gone {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  transform: translateY(-0.25rem);
}
.gr-logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: max-content;
  animation: gr-logo-marquee-x 18s linear infinite;
  animation-play-state: paused;
}
.gr-logo-marquee.is-running .gr-logo-marquee-track {
  animation-play-state: running;
}
.gr-logo-marquee.is-gone .gr-logo-marquee-track {
  animation: none;
}
.gr-logo-tile {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 2.75rem;
  padding: 0.4rem 0.5rem;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.18);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.04);
}
.gr-logo-tile img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) contrast(1.05);
}
@keyframes gr-logo-marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .gr-logo-marquee,
  .gr-logo-marquee-track {
    animation: none !important;
  }
  .gr-logo-marquee {
    display: none;
  }
}

/* ---------- Photo frame (native aspect, no crop) ---------- */
.gr-section-media {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* Digitaal: same rhythm as hero ↔ image ↔ next h2 (52px) */
.gr-main.gr-digitaal .gr-section {
  padding-top: 52px;
}
.gr-main.gr-digitaal .gr-section-media {
  padding-top: 52px;
  padding-bottom: 0;
}
.gr-photo-frame {
  margin: 0;
  width: 100%;
  background: transparent;
}
.gr-photo-frame picture {
  display: block;
  width: 100%;
}
.gr-photo-frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
/* Content images: never stretch aspect on mobile / narrow viewports */
.gr-main img,
.gr-page img,
.tp-port-slider-thumb img {
  max-width: 100%;
}
.gr-main .gr-photo-frame img,
.gr-main .gr-figure img,
.gr-main .gr-card-img img,
.gr-page .gr-photo-frame img,
.gr-page .gr-figure img {
  height: auto;
}
@media (max-width: 767px) {
  .tp-port-slider-thumb > picture img {
    object-fit: cover;
    object-position: center center;
  }
}
/* Digitaal hero: crossfade to plain photo on hover / keyboard focus */
.gr-photo-frame.gr-photo-hover {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  cursor: default;
}
.gr-photo-hover > img,
.gr-photo-hover > picture {
  grid-area: 1 / 1;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.gr-photo-hover > picture img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.gr-photo-hover-alt,
.gr-photo-hover > picture:has(.gr-photo-hover-alt) {
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .gr-photo-hover:hover .gr-photo-hover-alt,
  .gr-photo-hover:hover > picture:has(.gr-photo-hover-alt) {
    opacity: 1;
  }
}
.gr-photo-hover:focus-visible .gr-photo-hover-alt,
.gr-photo-hover:focus-within .gr-photo-hover-alt,
.gr-photo-hover:focus-visible > picture:has(.gr-photo-hover-alt),
.gr-photo-hover:focus-within > picture:has(.gr-photo-hover-alt) {
  opacity: 1;
}
/* Crossfade gallery: grid stack so width:100% images size the frame on mobile */
.gr-photo-frame.gr-photo-alt {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.gr-photo-alt-slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  transition: opacity 0.75s ease;
  pointer-events: none;
}
.gr-photo-alt-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
.gr-photo-alt-slide > a {
  display: block;
  width: 100%;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}
.gr-photo-alt-slide picture,
.gr-photo-alt-slide img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.gr-photo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 12px 0 0;
  padding: 0;
  font-size: 13px;
  color: #6D6868;
}
.gr-photo-tags a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gr-photo-tags a:hover {
  color: var(--gr-ink);
}
@media (prefers-reduced-motion: reduce) {
  .gr-photo-alt-slide { transition: none; }
}