/* ============================================================================
   Pakketreis V3.4 — visual consistency and interaction tokens
   Safely layered after older V3 styling; no content/template/function changes.
   ============================================================================ */
:root {
  --pr34-ease: cubic-bezier(.22,1,.36,1);
  --pr34-fast: .24s;
  --pr34-standard: .34s;
  --pr34-radius: 18px;
  --pr34-radius-card: 24px;
  --pr34-gap: clamp(18px,2.2vw,30px);
  --pr34-content: 1440px;
}
body.pr-v3 {font-family:'Montserrat',sans-serif;}
/* Icons share baseline and their parent dictates size, keeping existing icons. */
body.pr-v3 .material-symbols-outlined {
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1;vertical-align:middle;flex-shrink:0;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  transition:color var(--pr34-fast) ease, rotate var(--pr34-standard) var(--pr34-ease),
    scale var(--pr34-standard) var(--pr34-ease);
}
body.pr-v3 :is(a,button) .fa-brands {line-height:1;vertical-align:middle;}
/* Entire site: one magnetic microinteraction. Individual transform-based hover
   keeps functioning; entrance keyframes override only during their own timeline. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.pr-v3 :is(a,button,input).pr-magnet:not(.pr-motion-item),
  html.pr-v32-motion-ready body.pr-v3 :is(a,button,input).pr-magnet.pr-enter-complete {
    translate: var(--pr-magnet-x,0px) var(--pr-magnet-y,0px) !important;
    transition-property:translate,transform,background-color,border-color,color,box-shadow,opacity;
    transition-duration:.2s,var(--pr34-standard),var(--pr34-fast),var(--pr34-fast),var(--pr34-fast),var(--pr34-standard),var(--pr34-fast);
    transition-timing-function:var(--pr34-ease);
    transition-delay:0ms !important;
  }
  body.pr-v3 :is(a,button,input).pr-magnet:focus-visible {
    outline:3px solid rgba(115,199,186,.75);
    outline-offset:4px;
  }
  /* Magnetic link movement must never inherit stagger delay on hover. */
  body.pr-v3 :is(a,button,input).pr-magnet:hover {transition-delay:0ms !important;}
}
/* Shared controls, form buttons, header/footer CTA, mobile menu. */
body.pr-v3 :is(.btn-primary,.btn-secondary-light,.btn-secondary-dark,.pr-hero-secondary-btn,
  #main-header a.rounded-xl,#mobile-menu a.rounded-xl,
  #contact-form button,#contact-form input[type="submit"],
  .floating-actions .gt_float_switcher) {border-radius:var(--pr34-radius) !important;}
body.pr-v3 #main-content :is(.usp-card,.glass-card,.pr-v3-card),
body.pr-v3 #main-content :is(.rounded-2xl,.rounded-3xl):has(>img) {
  border-radius:var(--pr34-radius-card) !important;
}
body.pr-v3 :is(.btn-primary,.btn-secondary-light,.btn-secondary-dark,.pr-hero-secondary-btn) {
  align-items:center;justify-content:center;gap:12px;
  transition:transform var(--pr34-standard) var(--pr34-ease),
    translate .22s var(--pr34-ease),box-shadow var(--pr34-standard) var(--pr34-ease),
    background-color var(--pr34-fast) ease,border-color var(--pr34-fast) ease !important;
  transition-delay:0ms !important;
}
body.pr-v3 :is(.btn-primary,.btn-secondary-light,.btn-secondary-dark,.pr-hero-secondary-btn) .material-symbols-outlined {font-size:20px;}
body.pr-v3 #main-content :is(.grid.gap-4,.grid.gap-6,.grid.gap-8) {gap:var(--pr34-gap);}
/* HOME HERO: exact independent vertical intervals, no Tailwind mb/mt overlaps. */
body.pr-v3 #main-content > .pr-hero {
  min-height:0 !important;
  padding:clamp(124px,10.5vw,166px) var(--pr33-gutter)
          clamp(87px,7vw,112px) !important;
  align-items:center;
}
body.pr-v3 .pr-hero-content {padding:0 !important;display:flex;flex-direction:column;align-items:flex-start;}
body.pr-v3 .pr-hero-content > .pr-hero-eyebrow {
  margin:0 0 clamp(15px,1.8vw,22px) !important;
}
body.pr-v3 .pr-hero-content > h1 {
  margin:0 0 clamp(21px,2vw,26px) !important;
}
body.pr-v3 .pr-hero-content > p {
  margin:0 0 clamp(34px,3.2vw,45px) !important;
  max-width:700px;line-height:1.65;
}
body.pr-v3 .pr-hero-content > .pr-hero-actions {
  margin:0 0 clamp(38px,3.8vw,52px) !important;
  align-items:stretch;gap:clamp(12px,1.3vw,18px);
}
body.pr-v3 .pr-hero-content > .pr-hero-actions a {
  margin:0 !important;min-height:56px;display:inline-flex;
}
body.pr-v3 .pr-hero-content > .pr-hero-usps {
  margin:0 !important;padding:16px 20px;
  width:fit-content;max-width:100%;gap:clamp(16px,2.2vw,32px);
  border:1px solid rgba(165,234,219,.23);border-radius:var(--pr34-radius);
  background:rgba(0,35,40,.38);backdrop-filter:blur(10px);
}
body.pr-v3 .pr-hero-content > .pr-scroll-cue {
  position:static !important;inset:auto !important;
  transform:none !important;translate:none !important;
  display:inline-flex !important;flex-direction:row;align-items:center;
  align-self:flex-start;gap:10px;margin:25px 0 0 !important;
  padding:4px 0;color:#c0eee5 !important;
  font-size:11px;letter-spacing:.13em;min-height:35px;
  opacity:.9;transition:opacity var(--pr34-fast) ease,color var(--pr34-fast) ease !important;
}
body.pr-v3 .pr-hero-content > .pr-scroll-cue:hover {opacity:1;color:#fff !important;}
body.pr-v3 .pr-hero-content > .pr-scroll-cue .material-symbols-outlined {font-size:20px;}
/* Badge shouldn't intrude on USP strip or floating actions at common desktop widths. */
@media (max-width:1530px) {body.pr-v3 .pr-hero-stamp{display:none;}}
/* Responsive hero is allowed to grow naturally; nothing overflows into next section. */
@media(max-width:1023px) {
  body.pr-v3 #main-content > .pr-hero {padding:132px var(--pr33-gutter) 96px !important;}
}
@media(max-width:639px) {
  :root {--pr34-radius:16px;--pr34-radius-card:20px;}
  body.pr-v3 #main-content > .pr-hero {padding:122px 22px 83px !important;}
  body.pr-v3 .pr-hero-content > .pr-hero-eyebrow {margin-bottom:15px !important;}
  body.pr-v3 .pr-hero-content > h1 {margin-bottom:20px !important;}
  body.pr-v3 .pr-hero-content > p {margin-bottom:28px !important;}
  body.pr-v3 .pr-hero-content > .pr-hero-actions {width:100%;margin-bottom:28px !important;gap:12px;}
  body.pr-v3 .pr-hero-content > .pr-hero-actions a {width:100%;min-height:52px;}
  body.pr-v3 .pr-hero-content > .pr-hero-usps {gap:12px 14px;padding:12px 13px;width:100%;}
  body.pr-v3 .pr-hero-content > .pr-scroll-cue {margin-top:17px !important;font-size:10px;}
}
/* WhatsApp: icon-first compact control that expands left ONLY on hover/focus.
   On touch remains a large, comfortable icon button without hover-dependent text. */
@media(min-width:768px) {
  body.pr-v3 .floating-actions .whatsapp-float {
    width:var(--pr-float-size) !important;min-width:var(--pr-float-size) !important;
    height:var(--pr-float-size) !important;
    justify-content:flex-end !important;gap:0 !important;
    transition:width .48s var(--pr34-ease),background-color .3s ease,
      box-shadow .34s var(--pr34-ease),translate .28s var(--pr34-ease) !important;
  }
  body.pr-v3 .floating-actions .whatsapp-float__label {
    width:0 !important;max-width:0 !important;padding:0 !important;
    opacity:0 !important;overflow:hidden !important;white-space:nowrap;
    transition:opacity .25s ease .04s !important;
  }
  body.pr-v3 .floating-actions .whatsapp-float:is(:hover,:focus-visible) {width:211px !important;}
  body.pr-v3 .floating-actions .whatsapp-float:is(:hover,:focus-visible) .whatsapp-float__label {
    width:auto !important;max-width:156px !important;padding:0 14px 0 17px !important;
    opacity:1 !important;
  }
}
/* Keep the float above site background but below an open off-canvas drawer. */
body.pr-v3 .floating-actions {align-items:center;}
body.pr-v3 .floating-actions .whatsapp-float__icon {margin-right:2px !important;}
body.pr-v3 .floating-actions .gt_float_switcher,
body.pr-v3 .floating-actions .whatsapp-float {transition-delay:0ms !important;}
/* Safari and all other engines: fixed-header offset for every template's anchors. */
html:has(body.pr-v3) {scroll-padding-top:110px;}
body.pr-v3 :is(#main-content,footer) [id] {scroll-margin-top:110px;}
@media(prefers-reduced-motion:reduce){
  body.pr-v3 .pr-hero-content > .pr-scroll-cue .material-symbols-outlined {animation:none !important;}
  body.pr-v3 .floating-actions .whatsapp-float,
  body.pr-v3 :is(a,button,input).pr-magnet {transition-duration:0s !important;translate:none !important;}
}