/* Generated by Site Builder */
:root {
  --bg-color: #fff9f3;
  --secondary-bgColor: #ffffff;
  --text-color: #1a2332;
  --text-colorInv: #ffffff;
  --primaryColor: #e8eef6;
  --primaryContrastColor: #eb741a;
  --secondaryColor: #dce5f0;
  --secondaryContrastColor: #1d4ed8;
  --headerBg: #fff9f3;
  --headerBgAct: #fff9f3;
  --headerColor: #222222;
  --footerBg: #1a2332;
  --footerColor: #e8eef6;
  --footerContrastColor: var(--primaryContrastColor);
  --hoverColor: ef934d;
  --nav-hover-color: var(--hoverColor);
  --border-btn: 2px;
  --overlayColor: rgba(0,0,0,0.5);
  --curtainColor: rgba(255, 255, 255,.95);
  --heading-font: "Plus Jakarta Sans", sans-serif;
  --body-font: "Inter", sans-serif;

  --radius-btn: 12px;
  --radius-input: 3px;
  --radius-card: 4px;
  --radius-img: 4px;

  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 2px 6px rgba(0,0,0,0.10), 0 6px 20px rgba(0,0,0,0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--body-font); line-height: 1.5; font-weight: 400; font-size: 16px; color: var(--text-color); background: var(--bg-color); overflow-x: hidden; }
main { overflow: clip; }
h1:not([data-field]), h2:not([data-field]), h3:not([data-field]), h4:not([data-field]), h5:not([data-field]), h6:not([data-field]) { font-family: var(--heading-font); font-size: 2rem; padding-bottom: 0.5rem; text-wrap: balance; color: var(--text-color); line-height: 1.2; }
h4:not([data-field]) { font-size: 1.4rem; color: var(--primaryContrastColor); }
p:not([data-field]), p[data-field="paragraphs"] { padding-bottom: 1rem; }
[data-field="heading"] { font-family: var(--heading-font); font-size: clamp(1.5rem, 3.5vw, 2rem); padding-bottom: 0.5rem; text-wrap: balance; color: var(--text-color); line-height: 1.2; }
[data-field="eyebrow"], [data-field="title"], [data-field="name"], [data-field="subtitle"], [data-field="question"] { font-family: var(--heading-font); line-height: 1.2; text-wrap: balance; }
img { max-width: 100%; height: auto; border-radius: var(--radius-img); }
ul { padding-left: 1.5rem; padding-bottom: 1rem; }
li { padding-bottom: 0.5rem; }
a { color: var(--primaryContrastColor); word-break: break-word; text-decoration: none; }
a:hover { color: var(--hoverColor); }

header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--headerBg);
  padding: 0.75rem 2rem;
  display: flex; justify-content: space-between; align-items: center;
  transition: background 0.3s, transform 0.3s;
}
header.scrolled { background: var(--headerBgAct); }
body.subpage header {
  background: var(--subpage-bg, var(--headerBg));
  color: var(--subpage-color, var(--headerColor));
}
body.subpage header .logo,
body.subpage header nav a:not(.nav-dropdown-item),
body.subpage header nav a:not(.nav-dropdown-item):hover,
body.subpage header .nav-dropdown-trigger,
body.subpage header .nav-toggle span {
  color: var(--subpage-color, var(--headerColor));
}
body.subpage header .nav-toggle span {
  background: var(--subpage-color, var(--headerColor));
}
body.subpage header.scrolled {
  background: var(--subpage-bg-scrolled, var(--subpage-bg, var(--headerBgAct)));
  color: var(--subpage-color-scrolled, var(--subpage-color, var(--headerScrollColor, var(--headerColor))));
}
body.subpage header.scrolled .logo,
body.subpage header.scrolled nav a:not(.nav-dropdown-item),
body.subpage header.scrolled nav a:not(.nav-dropdown-item):hover,
body.subpage header.scrolled .nav-dropdown-trigger,
body.subpage header.scrolled .nav-toggle span {
  color: var(--subpage-color-scrolled, var(--subpage-color, var(--headerScrollColor, var(--headerColor))));
}
body.subpage header.scrolled .nav-toggle span {
  background: var(--subpage-color-scrolled, var(--subpage-color, var(--headerScrollColor, var(--headerColor))));
}
body.subpage .header-split-main {
  background: var(--subpage-bg, var(--headerBg));
}
body.subpage .header-split-main .logo,
body.subpage .header-split-nav a,
body.subpage .header-split-nav .nav-dropdown-trigger {
  color: var(--subpage-color, var(--headerColor));
}
body.subpage .header-split-top a:not(.header-cta) {
  background: var(--subpage-bg, var(--headerBg));
  color: var(--subpage-color, var(--headerColor));
}
body.subpage header.scrolled .header-split-main {
  background: var(--subpage-bg-scrolled, var(--subpage-bg, var(--headerBgAct)));
}
body.subpage header.scrolled .header-split-main .logo,
body.subpage header.scrolled .header-split-nav a,
body.subpage header.scrolled .header-split-nav .nav-dropdown-trigger {
  color: var(--subpage-color-scrolled, var(--subpage-color, var(--headerColor)));
}
body.subpage header.scrolled .header-split-top a:not(.header-cta) {
  background: var(--subpage-bg-scrolled, var(--subpage-bg, var(--headerBgAct)));
  color: var(--subpage-color-scrolled, var(--subpage-color, var(--headerColor)));
  text-decoration: none;
}
header .logo { color: var(--headerColor); font-size: 1.4rem; font-weight: 700; text-decoration: none; display: flex; align-items: center; }
header .logo-img { height: 40px; max-height: 40px; width: auto; border-radius: 0; }
header .logo-scrolled { display: none; }
header.scrolled .logo-default { display: none; }
header.scrolled .logo-scrolled { display: block; }
header.logo-center { justify-content: center; }
header.logo-center nav { position: absolute; left: 2rem; }
header.logo-center .header-spacer { position: absolute; right: 2rem; width: 0; }
header.logo-right { flex-direction: row-reverse; }
header nav { display: flex; gap: 1.5rem; margin-left: auto; }
header nav a {
  color: var(--headerColor); text-decoration: none;
  font-weight: 400; font-size: .9rem; letter-spacing: 0; 
}
header nav a:hover { text-decoration: underline; color: var(--headerColor); }

/* Dropdown nav */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-trigger {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--headerColor); text-decoration: none;
  font-weight: 400; font-size: .9rem; letter-spacing: 0; 
  font-family: inherit; display: inline-flex; align-items: center; gap: 0.35rem;
}
.nav-dropdown-trigger:hover { text-decoration: none; }
.nav-dropdown-chevron { transition: transform 0.3s; }
.nav-dropdown.dropdown-open .nav-dropdown-chevron { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 220px; width: max-content; background: var(--dropdown-bg, var(--bg-color)); border-radius: var(--radius-btn);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12); padding: 0.5rem;
  opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s;
  z-index: 1000;
}
.nav-dropdown-menu::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; background: var(--dropdown-bg, var(--bg-color));
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.nav-dropdown.dropdown-open .nav-dropdown-menu { opacity: 1; visibility: visible; }
.nav-dropdown-item {
  display: block; padding: 0.65rem 0.85rem; border-radius: calc(var(--radius-btn) * 0.5); text-decoration: none;
  color: var(--dropdown-text, var(--headerColor)); transition: background 0.15s;
  text-transform: none; letter-spacing: normal;
}
.nav-dropdown-item:hover { background: transparent; text-decoration: none; }
.nav-dropdown-title { display: block; font-weight: 400; font-size: 0.9rem; text-transform: none; letter-spacing: normal; }
.nav-dropdown-desc { display: block; font-size: 0.8rem; opacity: 0.6; padding-top: 0.15rem; text-transform: none; letter-spacing: normal; }

.header-cta {
  display: inline-block; padding: 0.5rem 1.4rem; border-radius: var(--radius-btn, 50px); margin-left: 1.5rem;
  background: var(--primaryContrastColor); color: var(--text-colorInv); text-decoration: none;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s, background 0.3s, transform 0.2s;
}
.header-cta:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.14); transform: scale(1.03); background-color: var(--hoverColor); color: var(--text-colorInv); text-decoration: none; }
@media (max-width: 768px) { .header-cta { display: none; } }
.nav-cta-mobile { display: none; }
@media (max-width: 768px) { .nav-cta-mobile { display: block; margin-left: 0; margin-top: 1rem; text-align: center; width: 100%; border-radius: var(--radius-btn); text-transform: none; letter-spacing: normal; } }
.header-phone {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--headerColor); text-decoration: none; font-size: 0.8rem; white-space: nowrap; margin-left: 1.5rem;
}
.header-phone:hover { opacity: 0.8; }
.header-phone svg { flex-shrink: 0; }
.header-social {
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.header-social .social-link { color: var(--headerColor); display: inline-flex; align-items: center; }
.header-social .social-link svg { width: 16px; height: 16px; }
.header-social .social-link:hover { opacity: 0.7; }
header.scrolled .header-phone { color: var(--headerScrollColor, var(--headerColor)); }
header.scrolled .header-social .social-link { color: var(--headerScrollColor, var(--headerColor)); }
.section-anchor { display: block; position: relative; top: -80px; visibility: hidden; height: 0; }
.ghost { height: 60px; }


footer {
  background: var(--footerBg); color: var(--footerColor);
  padding: 40px 2rem 16px; text-align: center;
  position: relative; z-index: 2;
  
}
footer .footer-inner { max-width: var(--container-width, 900px); margin: 0 auto; padding-left: var(--block-pl, 0px); padding-right: var(--block-pr, 0px); display: flex; flex-direction: column; gap: 12px; }
footer h6:not([data-field]) { font-size: 1.3rem; padding-bottom: .5rem; margin: 0; color: var(--footerColor); letter-spacing: 0.5px; }
footer a { color: var(--footerContrastColor); }
.footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding: 0.75rem 0; margin-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-nav a { color: var(--footerColor); text-decoration: none; font-size: 0.85rem;  letter-spacing: 0; font-weight: 500; opacity: 0.7; transition: opacity 0.3s; white-space: nowrap; }
.footer-nav a:hover { opacity: 1; color: var(--footerContrastColor); }
.footer-contact { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding: 0.75rem 0; font-size: 0.95rem; }
.footer-contact a, .footer-contact span { display: inline-flex; align-items: flex-start; gap: 0.4rem; color: var(--footerColor); font-weight: 500; }
.footer-contact a:hover { color: var(--footerContrastColor); }
.footer-contact svg { opacity: 0.7; flex-shrink: 0; margin-top: 0.15rem; }
.footer-social { display: flex; justify-content: center; gap: 1rem; padding: 0.75rem 0; }
.footer-social a { color: var(--footerColor); transition: color 0.2s, transform 0.2s; display: inline-flex; }
.footer-social a:hover { color: var(--footerContrastColor); transform: scale(1.15); }
.footer-social svg { width: 20px; height: 20px; }
.footer-copy { font-size: 0.8rem; opacity: 0.5; padding-top: 0.75rem; }

.footer-branding { display: inline-flex; align-items: flex-end; justify-content: center; gap: 0.45rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); transition: transform 0.3s; text-decoration: none; color: inherit; }
.footer-branding:hover { transform: scale(1.08); color: inherit; text-decoration: none; }
.footer-branding p { font-size: var(--branding-size, 0.8rem); letter-spacing: 0.5px; margin: 0; padding: 0; line-height: 1; color: var(--branding-color, var(--footerColor)); }
.footer-branding svg { width: var(--branding-svg-w, 42px); height: auto; fill: var(--branding-color, var(--footerColor)); overflow: visible; }

/* ── Footer Columns (multi-column grid) ── */
.footer-columns { max-width: var(--container-width, 980px); margin: 0 auto; padding-left: var(--block-pl, 0px); padding-right: var(--block-pr, 0px); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem 2rem; padding-bottom: 1.5rem; text-align: left; }
.footer-col h6 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--footerColor); padding-bottom: 0.75rem; margin: 0; }
.footer-col h6 a { color: inherit; text-decoration: none; }
.footer-col h6 a:hover { opacity: 0.8; }
.footer-col a { display: block; font-size: 0.75rem; color: var(--footerColor); opacity: 0.7; text-decoration: none; padding: 0.15rem 0; transition: opacity 0.2s; }
.footer-col a:hover { opacity: 1; color: var(--footerContrastColor); }
.footer-bottom { max-width: var(--container-width, 980px); margin: 0 auto; padding: 0.75rem var(--block-pr, 0px) 0.75rem var(--block-pl, 0px); border-top: 1px solid rgba(128,128,128,0.15); font-size: 0.75rem; opacity: 0.6; text-align: center; }
.footer-bottom a { color: var(--footerColor); opacity: 0.8; }
.footer-bottom a:hover { opacity: 1; color: var(--footerContrastColor); }
.footer-extra-text { max-width: 600px; margin: 0.75rem auto 0; font-size: 0.8rem; opacity: 0.6; text-align: center; }
.footer-extra-images { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; padding: 0.75rem 0; max-width: 600px; margin: 0 auto; }
.footer-extra-images img { height: 40px; width: auto; object-fit: contain; opacity: 0.8; transition: opacity 0.2s; }
.footer-extra-images img:hover { opacity: 1; }
/* ── Footer Simple (single-row) ── */
.footer-simple { max-width: var(--container-width, 980px); margin: 0 auto; padding-left: var(--block-pl, 0px); padding-right: var(--block-pr, 0px); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 1rem; }
.footer-simple-left { display: flex; align-items: center; gap: 0.5rem; }
.footer-simple-name { font-size: 1.1rem; font-weight: 600; color: var(--footerColor); white-space: nowrap; }
.footer-simple-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; }
.footer-simple-nav a { color: var(--footerColor); text-decoration: none; font-size: 0.85rem;  letter-spacing: 0; font-weight: 400; opacity: 0.7; transition: opacity 0.3s; white-space: nowrap; }
.footer-simple-nav a:hover { opacity: 1; color: var(--footerContrastColor); }
.footer-simple-right { display: flex; align-items: center; gap: 0.75rem; }
.footer-simple-right .footer-social { padding: 0; }
@media (max-width: 768px) {
  .footer-simple { flex-direction: column; text-align: center; gap: 1rem; }
  .footer-simple-right { justify-content: center; }
}


.container { max-width: var(--container-width, 1100px); margin: 0 auto; padding: 0 var(--block-pr, 24px) 0 var(--block-pl, 24px); display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
.color-block, .cta-split, .stats-grid, .marquee-block, .logo-marquee-block, .showcase-carousel, .parallax-section, .cta-banner { padding: var(--block-pt, 30px) 0 var(--block-pb, 30px); }
/* Hero pads from --block-pt PLUS --hero-header-offset (set by overlay/non-fixed header rules below),
   so the user's per-block paddingTop is always additive on top of any header offset — not clobbered. */
.hero-banner { padding: calc(var(--block-pt, 30px) + var(--hero-header-offset, 0px)) 0 var(--block-pb, 30px); }
.clr-0 { background-color: var(--bg-color); }
.clr-1 { background-color: var(--secondary-bgColor); }
.clr-2 { background-color: var(--primaryContrastColor); color: var(--text-colorInv); }
.clr-3 { background-color: var(--primaryColor); color: var(--text-color); }
.intro { flex: 1 1 45%; min-width: 0; }

/* Row layout (side-by-side blocks) */
.row-layout { display: grid; width: 100%; }
/* Default the CSS vars on row columns so nested blocks fill the column with no extra
   padding (avoiding double-padding with the row's own container). A per-block override
   on a nested block (style="--container-width:Xpx;--block-pl:Y;--block-pr:Z") still wins
   because it's set on the block element itself — higher in the cascade than .row-column. */
.row-column { min-width: 0; --container-width: 100%; --block-pl: 0px; --block-pr: 0px; }
.row-column > .color-block,
.row-column > .hero-banner,
.row-column > .marquee-block,
.row-column > .stats-grid,
.row-column > .cta-split,
.row-column > .cta-block,
.row-column > .showcase-carousel,
.row-column > .logo-marquee-block { padding: 0; background: transparent !important; }
/* Row container reads --container-width and --block-pl/--block-pr like .container does,
   so global Innehållsbredd (and per-row blockMaxWidth) actually flow through. The duplicate
   .container class on the same element provides the flex behavior we *don't* want here, which
   .row-container neutralizes by not setting display:flex. */
.row-container { max-width: var(--container-width, 1100px); margin: 0 auto; padding: 0 var(--block-pr, 24px) 0 var(--block-pl, 24px); display: block; }
@media (max-width: 768px) {
  .row-stack-mobile { grid-template-columns: 1fr !important; }
}

/* ── Per-block content-group alignment ──
   Driven by data-align="left|right" on the block wrapper (set by sideAlignAttr in page-generator).
   The heading aligns via its own inline text-align (in each renderer); these rules shift the item
   group: the grid shrinks to its content width and packs to the chosen side, flex rows use
   justify-content. center/unset emits no attribute, so the default full-width layout is untouched. */
[data-align="left"] .benefits-grid, [data-align="right"] .benefits-grid,
[data-align="left"] .pricing-grid, [data-align="right"] .pricing-grid,
[data-align="left"] .testimonial-grid, [data-align="right"] .testimonial-grid,
[data-align="left"] .team-grid, [data-align="right"] .team-grid,
[data-align="left"] .portfolio-grid, [data-align="right"] .portfolio-grid,
[data-align="left"] .gallery-grid, [data-align="right"] .gallery-grid { width: fit-content; max-width: 100%; }
[data-align="left"] .benefits-grid, [data-align="left"] .pricing-grid, [data-align="left"] .testimonial-grid,
[data-align="left"] .team-grid, [data-align="left"] .portfolio-grid, [data-align="left"] .gallery-grid { align-self: flex-start; margin-left: 0; margin-right: auto; }
[data-align="right"] .benefits-grid, [data-align="right"] .pricing-grid, [data-align="right"] .testimonial-grid,
[data-align="right"] .team-grid, [data-align="right"] .portfolio-grid, [data-align="right"] .gallery-grid { align-self: flex-end; margin-left: auto; margin-right: 0; }
[data-align="left"] .logo-row { justify-content: flex-start; }
[data-align="right"] .logo-row { justify-content: flex-end; }
/* The scroll-swap variant (testimonials/team) is a vertical sticky stack — keep its grid full-width
   so alignment doesn't shrink the animated cards. */
[data-align] .showcase-swap-sticky .testimonial-grid, [data-align] .showcase-swap-sticky .team-grid { width: 100%; max-width: none; align-self: auto; margin: 0; }

.text-only-stacked .container { flex-direction: column; }
.text-only-stacked .intro { flex: none; min-width: 100%; }
.text-only-columns .container { align-items: flex-start; }

.jumbotron-subpage {
  background: var(--subpage-jumbotron-bg, var(--jumbotron-bg, var(--primaryColor)));
  padding: var(--subpage-header-padding-top, var(--subpage-header-padding, 30px)) 0 var(--subpage-header-padding-bottom, var(--subpage-header-padding, 30px));
  text-align: center;
}
.undersidatitel { padding: 1.5rem 1.5rem 2rem; }
.undersidatitel [data-field="subpageTitle"] {
  font-family: var(--heading-font);
  font-size: var(--subpage-title-size, clamp(28px, 5vw, 48px));
  color: var(--subpage-title-color, #1a2332);
  font-weight: var(--subpage-title-weight, 700);
  margin: 0;
  padding-bottom: 0.25rem;
  text-wrap: balance;
}
.undersidatitel [data-field="subpageSubtitle"] {
  color: var(--subpage-subtitle-color, #1a2332);
  font-size: var(--subpage-subtitle-size, 120%);
  line-height: 1.35;
  margin: 0;
  text-wrap: balance;
}
.undersidatitel hr { width: 80px; height: 3px; background: currentColor; border: none; margin: 1rem auto; opacity: 0.5; }

.cta-block { padding: var(--block-pt, 30px) var(--block-pr, 24px) var(--block-pb, 30px) var(--block-pl, 24px); text-align: center; }
.cta-block [data-field="heading"] { margin-bottom: 0.25rem; }
/* Unlike .color-block (top/bottom padding only — left/right comes from .container), .cta-block
   itself already pads on all 4 sides. So .inner just needs to constrain max-width and stretch.
   width:100% + box-sizing keeps it filling reliably even when .cta-block becomes display:flex
   (which happens when minHeight is set — flex children otherwise shrink to content size). */
.cta-block .inner { max-width: var(--container-width, 1100px); width: 100%; margin: 0 auto; box-sizing: border-box; }

.buttons1 {
  display: inline-block; padding: 0.8rem 2rem;
  background-color: var(--btn-bg, var(--primaryContrastColor)); color: var(--text-colorInv);
  border: var(--border-btn) solid transparent; cursor: pointer; font-size: 1rem; font-weight: 600;
  text-decoration: none; border-radius: var(--radius-btn); margin-top: 1rem;
  transition: background 0.3s, box-shadow 0.3s, color 0.3s, border-color 0.3s;
  box-shadow: var(--shadow);
}
.buttons1:hover { background-color: var(--hoverColor); }
a.buttons1 { color: var(--text-colorInv); text-decoration: none; }
.btn-secondary { background-color: transparent !important; color: var(--btn-text, var(--primaryContrastColor)) !important; border-color: currentColor; box-shadow: none; }
.btn-secondary:hover { background-color: var(--hoverColor) !important; color: var(--btn-text, var(--text-colorInv)) !important; border-color: var(--hoverColor) !important; }
a.btn-secondary { color: var(--btn-text, var(--primaryContrastColor)) !important; }
a.btn-secondary:hover { color: var(--btn-text, var(--text-colorInv)) !important; }
.btn-arrow { background-color: transparent !important; color: var(--btn-text, var(--primaryContrastColor)) !important; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }
.btn-arrow:hover { background-color: transparent !important; color: var(--btn-text, var(--hoverColor)) !important; border-color: transparent !important; }
a.btn-arrow { color: var(--btn-text, var(--primaryContrastColor)) !important; }
a.btn-arrow:hover { color: var(--btn-text, var(--hoverColor)) !important; }
.btn-solid { background-color: var(--btn-bg, var(--primaryContrastColor)) !important; color: var(--btn-text, var(--text-colorInv)) !important; border-color: var(--btn-bg, var(--primaryContrastColor)) !important; box-shadow: var(--shadow); }
.btn-solid:hover { background-color: var(--hoverColor) !important; color: var(--btn-text, var(--text-colorInv)) !important; }
a.btn-solid { color: var(--btn-text, var(--text-colorInv)) !important; }
a.btn-solid:hover { color: var(--btn-text, var(--text-colorInv)) !important; }
.btn-group { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1rem; }
.btn-group .buttons1 { margin-top: 0; }
.btn-group-center { justify-content: center; }

blockquote {
  border-left: 4px solid var(--primaryContrastColor);
  padding: 1rem 1.5rem; margin: 1rem 0;
  font-size: 140%; font-style: italic; text-wrap: balance;
}

fieldset { border: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
fieldset p { width: 100%; }
input:not([type="checkbox"]), select { height: 50px; border: var(--input-border-width, 1px) solid var(--input-border-color, #ddd); padding: 0.5rem 0.7rem; border-radius: var(--radius-input); font-family: inherit; font-size: 1rem; width: 100%; color: var(--input-color, inherit); background-color: var(--input-bg, var(--bg-color, #fff)); -webkit-appearance: none; }
input[type="hidden"] { display: none !important; }
textarea { border: var(--input-border-width, 1px) solid var(--input-border-color, #ddd); padding: 0.5rem 0.7rem; border-radius: var(--radius-input); font-family: inherit; font-size: 1rem; width: 100%; min-height: 120px; resize: vertical; color: var(--input-color, inherit); background-color: var(--input-bg, var(--bg-color, #fff)); -webkit-appearance: none; }
input:hover, textarea:hover, select:hover { border-color: var(--input-border-hover, var(--primaryContrastColor)); background-color: var(--input-bg-hover, var(--input-bg, var(--bg-color, #fff))); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--input-border-hover, var(--primaryContrastColor)); box-shadow: 0 0 0 2px rgba(2,115,190,0.2); }
::placeholder { color: var(--input-placeholder-color, currentColor); opacity: var(--input-placeholder-opacity, 0.5); }
.halva { width: calc(50% - 0.375rem); }
input#check, input#cf-check, input[type="checkbox"] { height: auto; width: auto; outline: none; box-shadow: none; -webkit-appearance: checkbox; appearance: checkbox; }
input[type="checkbox"]:focus { outline: none; box-shadow: none; }
input.buttons1 { height: auto; border: 0; background-color: var(--btn-bg, var(--primaryContrastColor)); color: var(--text-colorInv); cursor: pointer; width: auto; border-radius: var(--radius-btn); }
input.buttons1:hover { background-color: var(--hoverColor); }
.cf-req { position: absolute; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--primaryContrastColor); font-size: 1.2rem; font-weight: 700; pointer-events: none; line-height: 1; }
textarea ~ .cf-req { bottom: auto; top: 10px; right: 10px; }
input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cf-file-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; border: var(--input-border-width, 1px) dashed var(--input-border-color, #ddd); background-color: var(--input-bg, var(--bg-color, #fff)); border-radius: var(--radius-input); padding: 1.25rem 1rem; text-align: center; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; color: var(--input-color, inherit); }
.cf-file-label:hover { border-color: var(--input-border-hover, var(--primaryContrastColor)); background-color: var(--input-bg-hover, var(--input-bg, var(--bg-color, #fff))); }
.cf-file-label .cf-file-label-text { font-weight: 500; font-size: 1rem; }
.cf-file-label .cf-file-hint { font-size: 0.85rem; opacity: 0.6; }
.cf-file-label input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.cf-file-list { list-style: none; padding: 0.5rem 0 0 0; margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--input-color, inherit); opacity: 0.85; }
.cf-file-list:empty { display: none; }
.cf-file-list li { padding: 0.15rem 0; display: flex; align-items: center; gap: 0.35rem; justify-content: flex-start; }
.cf-file-list li > span { min-width: 0; word-break: break-all; }
.cf-file-remove { flex-shrink: 0; border: 0; background: transparent; cursor: pointer; color: inherit; opacity: 0.4; font-size: 1.1rem; line-height: 1; padding: 0 0.3rem; border-radius: 4px; transition: opacity 0.15s, color 0.15s, background-color 0.15s; }
.cf-file-remove:hover { opacity: 1; color: #ef4444; background-color: rgba(239,68,68,0.08); }

.kontakt { text-align: center; padding: 2rem 0; }
.kontakt hr { background: var(--primaryContrastColor); height: 2px; border: none; margin-bottom: 0.5rem; }
.k-bloc { display: flex; flex-direction: column; align-items: center; padding: 1rem; justify-content: center; }
.k-bloc img { max-width: 26px; height: auto; margin-bottom: 0.5rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -100px; left: 0; background: var(--primaryColor); color: var(--primaryContrastColor); padding: 8px 16px; z-index: 9999; text-decoration: none; font-weight: bold; transition: top 0.2s; }
.skip-link:focus { top: 0; }

/* Desktop-only image zoom/position — mobile keeps rotation only */
@media (min-width: 769px) { [style*="--dtf"] { transform: var(--dtf) !important; } }

.nav-toggle { display: none; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0.5rem; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--headerColor, var(--text-color)); transition: transform 0.3s, opacity 0.3s; }
header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#form-status { padding: 0.8rem 2rem; border-radius: var(--radius-btn); text-align: center; margin-top: 1rem; font-size: 1rem; font-weight: 600; box-sizing: border-box; }
#form-status.success { background: rgba(34,197,94,.1); color: #16a34a; border: 1px solid rgba(34,197,94,.3); }
#form-status.error { background: rgba(239,68,68,.1); color: #dc2626; border: 1px solid rgba(239,68,68,.3); }

/* ── Stats Grid ── */
.stats-grid { padding: 4rem 0; text-align: center; }
.stats-inner { max-width: var(--container-width, 1100px); width: 100%; margin: 0 auto; padding: 0 var(--block-pr, 1.5rem) 0 var(--block-pl, 1.5rem); display: flex; flex-wrap: wrap; justify-content: space-around; gap: 2rem; box-sizing: border-box; }
/* No max-width on .stat-item: items grow with flex:1 1 0 to fill the available space.
   At narrow content widths, flex-wrap kicks in. data-count="1"/"2" rules below re-cap for those
   special cases where the original design wanted compact centered cards. */
.stat-item { flex: 1 1 0; min-width: 100px; padding: 1.5rem; }
.stat-value { display: block; font-family: var(--heading-font); font-size: 2.5rem; font-weight: 700; line-height: 1.2; color: inherit; white-space: nowrap; }
.stat-label { display: block; font-size: 0.95rem; opacity: 0.8; margin-top: 0.25rem; }

/* Stats scaling by item count */
.stats-grid[data-count="1"] .stat-item { max-width: 400px; }
.stats-grid[data-count="1"] .stat-value { font-size: 3.5rem; }
.stats-grid[data-count="2"] .stat-item { max-width: 340px; }
.stats-grid[data-count="2"] .stat-value { font-size: 3rem; }
.stats-grid[data-count="5"] .stat-value,
.stats-grid[data-count="6"] .stat-value { font-size: 2rem; }
.stats-grid[data-count="5"] .stat-label,
.stats-grid[data-count="6"] .stat-label { font-size: 0.85rem; }
.stats-grid[data-count="7"] .stat-value,
.stats-grid[data-count="8"] .stat-value { font-size: 1.75rem; }
.stats-grid[data-count="7"] .stat-label,
.stats-grid[data-count="8"] .stat-label { font-size: 0.8rem; }
.stats-grid[data-count="7"] .stat-item,
.stats-grid[data-count="8"] .stat-item { min-width: 80px; padding: 1rem; }
.stats-grid[data-count="7"] .stats-inner,
.stats-grid[data-count="8"] .stats-inner { gap: 1rem; }

/* ── Marquee ── */
.marquee-block { overflow: hidden; padding: 1.5rem 0; }
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 30s linear infinite; }
.marquee-content { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.marquee-item { font-family: var(--heading-font); font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 300; white-space: nowrap; padding: 0 1rem; line-height: 1; }
.marquee-sep { font-size: clamp(1.5rem, 4vw, 3rem); opacity: 0.3; padding: 0 0.5rem; font-weight: 300; line-height: 1; }
.marquee-logo { padding: 0 1rem; line-height: 1; vertical-align: middle; flex-shrink: 0; display: inline-block; }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── Accordion ── */
.accordion-section [data-field="heading"] { color: inherit; }
.accordion { width: 100%; }
.accordion-item { border-bottom: 1px solid rgba(0,0,0,0.1); }
.accordion-item summary { cursor: pointer; padding: 1.25rem 0; font-size: 1.1rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.accordion-item summary::after { content: '+'; font-size: 1.5rem; font-weight: 300; transition: transform 0.2s; }
.accordion-item[open] summary::after { transform: rotate(45deg); }
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-content { padding: 0 0 1.25rem; }
.accordion-content [data-field="answer"] { padding-bottom: 0; }
.accordion-vertical .container { flex-direction: column; }
.accordion-vertical .intro { flex: none; min-width: 100%; }

/* ── Text-Image Variants ── */
.text-image-fullbleed { background-size: cover; background-position: center; min-height: 500px; display: flex; align-items: center; }
.text-image-fullbleed-overlay { width: 100%; padding: 4rem 2rem; }
.text-image-fullbleed-content { max-width: 700px; margin: 0 auto; color: #fff; }
.text-image-fullbleed-content [data-field="heading"] { color: #fff; }
.text-image-card { display: flex; flex-wrap: wrap; background: var(--bg-color); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); overflow: hidden; }
.text-image-card-img { flex: 1 1 45%; min-width: 280px; }
.text-image-card-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-img); }
.text-image-card-text { flex: 1 1 45%; min-width: 280px; display: flex; flex-direction: column; justify-content: center; }
.text-image-fullheight { min-height: 100vh; display: flex; align-items: center; }
.text-image-fullheight .container { justify-content: center; }
.text-image-vertical .container { flex-direction: column; }
.text-image-vertical .intro { min-width: 100%; flex: none; }
.text-image-vertical .intro img, .text-image-vertical .intro video { max-width: 100%; height: auto; }
.text-image-card-vertical { flex-direction: column; }
.text-image-card-vertical .text-image-card-img { flex: none; min-width: 100%; text-align: center; padding: 2rem; }
.text-image-card-vertical .text-image-card-img img { width: auto; max-width: 100%; height: auto; object-fit: contain; border-radius: var(--radius-img); }
.text-image-card-vertical .text-image-card-text { flex: none; min-width: 100%; }
.pix .intro img, .pix .intro video { display: block; width: 100%; height: auto; }
.img-auto-height .container { align-items: stretch; }
.img-auto-height .intro img, .img-auto-height .intro video { height: 100%; object-fit: cover; }
.text-image-overlap .container { position: relative; }
.text-image-overlap .intro img, .text-image-overlap .intro video { border-radius: var(--radius-img); }
.ti-eyebrow { font-family: var(--heading-font); line-height: 1.2; }
.ti-bullets li svg { color: var(--primaryColor); }
.ti-multi-img img { display: block; }

/* ── CTA Variants ── */
.cta-split-inner { max-width: var(--container-width, 1100px); width: 100%; margin: 0 auto; padding: 0 var(--block-pr, 2rem) 0 var(--block-pl, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; box-sizing: border-box; }
.cta-split-inner [data-field="heading"] { flex: 1; margin: 0; padding: 0; }
.cta-banner { position: relative; overflow: hidden; background-size: cover; background-position: center; min-height: 350px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0; }
.cta-banner-overlay { position: relative; z-index: 1; width: 100%; }
.cta-banner-overlay [data-field="heading"] { color: #fff; margin-bottom: 0.5rem; }

/* ── Benefits Grid Variant ── */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; width: 100%; }
.benefit-card { padding: 2rem; border-radius: var(--radius-card); background: var(--bg-color); box-shadow: var(--shadow); }
.benefit-card [data-field="title"] { margin-bottom: 0.25rem; }
.benefit-card [data-field="description"] { padding-bottom: 0; }

/* ── Portfolio Grid ── */
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; }
.portfolio-grid[data-columns="1"] { grid-template-columns: 1fr; }
.portfolio-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.portfolio-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.portfolio-card { border-radius: var(--radius-card); overflow: hidden; background: var(--bg-color); box-shadow: var(--shadow); transition: transform 0.3s, box-shadow 0.3s; }
.portfolio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.portfolio-card-img img { width: 100%; height: 220px; object-fit: cover; display: block; border-radius: var(--radius-img); }
.portfolio-card-body { padding: 1.25rem; }
.portfolio-card-body [data-field="title"] { margin-bottom: 0.25rem; }
.portfolio-card-body [data-field="description"] { padding-bottom: 0.5rem; font-size: 0.95rem; }
.portfolio-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.portfolio-tag { display: inline-block; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 500; border-radius: var(--radius-btn); background: var(--primaryColor); color: var(--text-color); }

/* ── Portfolio Slideshow (multi-image per card) ── */
.portfolio-slideshow { position: relative; overflow: hidden; border-radius: var(--radius-img); }
.portfolio-slideshow img { width: 100%; height: 220px; object-fit: cover; display: block; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.35s ease; }
.portfolio-slideshow img.active { position: relative; opacity: 1; }
.pf-slide-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: #fff; border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 1.1rem; line-height: 28px; text-align: center; padding: 0 0 2px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; z-index: 2; }
.portfolio-slideshow:hover .pf-slide-nav { opacity: 1; }
/* Touch devices have no hover — show the nav arrows by default so users
   can actually swipe between slides without invisible controls. */
@media (hover: none) { .pf-slide-nav { opacity: 0.85; } }
.pf-prev { left: 6px; }
.pf-next { right: 6px; }
.pf-slide-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; }
.pf-slide-dot { width: 7px; height: 7px; border-radius: 50%; border: none; background: rgba(255,255,255,0.5); cursor: pointer; padding: 0; transition: background 0.2s; }
.pf-slide-dot.active { background: #fff; }

/* ── Showcase Grid (product cards) ── */
.showcase-grid { display: grid; gap: 12px; width: 100%; max-width: 100%; padding: 0; }
.showcase-grid[data-columns="1"] { grid-template-columns: 1fr; }
.showcase-grid[data-columns="2"] { grid-template-columns: 1fr 1fr; }
.showcase-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.showcase-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.showcase-card { position: relative; overflow: hidden; min-height: 580px; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: var(--radius-card); padding-top: 55px; background-color: var(--secondary-bgColor); color: var(--text-color); }
.showcase-card-copy { position: relative; z-index: 1; max-width: 600px; padding: 0 2rem 1.5rem; }
.showcase-card-copy [data-field="title"] { font-size: 2.5rem; font-weight: 600; margin-bottom: 4px; line-height: 1.07; }
.showcase-tagline { font-size: 1.25rem; font-weight: 400; margin-bottom: 8px; opacity: 0.9; }
.showcase-card-copy .btn-group { margin-top: 14px; }
.showcase-card-image { margin-top: auto; text-align: center; width: 100%; }
.showcase-card-image img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: var(--radius-img); }
/* Showcase overlay — text on top of background image */
.showcase-overlay { aspect-ratio: 1/1; min-height: 0; padding-top: 0; justify-content: center; }
.showcase-overlay .showcase-card-image { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; z-index: 0; }
.showcase-overlay .showcase-card-image img { width: 100%; height: 100%; object-fit: cover; }
.showcase-overlay .showcase-card-image video { width: 100%; height: 100%; object-fit: cover; }
.showcase-overlay .showcase-card-image .portfolio-slideshow { width: 100%; height: 100%; border-radius: 0; }
.showcase-overlay .showcase-card-image .portfolio-slideshow img { height: 100%; }
.showcase-overlay .showcase-overlay-tint { position: absolute; inset: 0; z-index: 1; transition: opacity 0.3s ease; }
.showcase-overlay .showcase-card-copy { padding: 2rem; position: relative; z-index: 2; transition: opacity 0.3s ease; }
.showcase-overlay.slideshow-active .showcase-overlay-tint { opacity: 0; pointer-events: none; }
.showcase-overlay.slideshow-active .showcase-card-copy { opacity: 0; pointer-events: none; }
.showcase-overlay .pf-slide-nav { z-index: 10; width: 38px; height: 38px; font-size: 1.4rem; background: rgba(0,0,0,0.5); }
.showcase-overlay:hover .pf-slide-nav { opacity: 1; }
.showcase-overlay .pf-slide-dots { z-index: 10; bottom: 14px; }
.showcase-overlay .pf-prev { left: 12px; }
.showcase-overlay .pf-next { right: 12px; }
/* Showcase scroll-swap — cards slide on vertical scroll */
.showcase-swap-wrap { position: relative; }
.showcase-swap-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* Generic swap grid + card overrides */
.showcase-swap-sticky [data-swap-grid] { position: relative !important; width: 100% !important; height: 100% !important; padding: 0 !important; gap: 0 !important; display: block !important; max-width: 100% !important; margin: 0 !important; }
.showcase-swap-sticky [data-swap-grid] > * { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; border-radius: 0 !important; will-change: transform; margin: 0 !important; }
/* Testimonial full-viewport swap styles */
.showcase-swap-sticky .testimonial-card { display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: none !important; padding: 3rem; }
.showcase-swap-sticky .testimonial-card blockquote { font-size: clamp(1.5rem, 3vw, 2.5rem); max-width: 800px; text-align: center; }
.showcase-swap-sticky .testimonial-stars { justify-content: center; font-size: 1.5rem; }
.showcase-swap-sticky .testimonial-author { justify-content: center; }
.showcase-swap-sticky .testimonial-avatar { width: 64px; height: 64px; }
/* Team full-viewport swap styles */
.showcase-swap-sticky .team-card { display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: none !important; text-align: center !important; }
.showcase-swap-sticky .team-photo-wrap, .showcase-swap-sticky .team-photo { width: 200px !important; height: 200px !important; }
.showcase-swap-sticky .team-name { font-size: 2rem; }
.showcase-swap-sticky .team-role { font-size: 1.2rem; }
.showcase-swap-sticky .team-bio { font-size: 1.1rem; max-width: 600px; text-align: center; }

/* ── Pricing Table ── */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; width: 100%; align-items: stretch; }
.pricing-tier { background: var(--bg-color); border-radius: var(--radius-card); padding: 2rem; box-shadow: var(--shadow); display: flex; flex-direction: column; text-align: center; }
.pricing-highlighted { border: 2px solid var(--primaryContrastColor); box-shadow: var(--shadow-lg); transform: scale(1.03); }
.pricing-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
.pricing-price { font-size: 1.8rem; font-weight: 800; color: var(--primaryContrastColor); padding-bottom: 0.5rem; }
.pricing-desc { font-size: 0.9rem; opacity: 0.8; padding-bottom: 1rem; }
.pricing-features { list-style: none; padding: 0 0 1.5rem; text-align: left; flex: 1; }
.pricing-features li { padding: 0.4rem 0; font-size: 0.9rem; border-bottom: 1px solid rgba(0,0,0,0.06); }
.pricing-features li::before { content: '✓ '; color: var(--primaryContrastColor); font-weight: 700; }
.pricing-tier .buttons1 { margin-top: auto; }

/* ── Team Grid ── */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; width: 100%; }
.team-grid[data-columns="1"] { grid-template-columns: 1fr; max-width: 500px; }
.team-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.team-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.team-grid[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
.team-grid[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }
.team-card { text-align: center; padding: 1.5rem; border-radius: var(--radius-card); background: var(--bg-color); box-shadow: var(--shadow); }
.team-card.clr-0 { background-color: var(--bg-color); }
.team-card.clr-1 { background-color: var(--secondary-bgColor); }
.team-card.clr-2 { background-color: var(--primaryContrastColor); color: var(--text-colorInv); }
.team-card.clr-3 { background-color: var(--primaryColor); color: var(--text-color); }
/* Photo wrapper holds the visible circular "window" (size, border, radius).
   The img inside fills it via object-fit:cover so the zoom/offset transform
   only pans/zooms the underlying image instead of resizing the window. */
.team-photo-wrap { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 1rem; display: block; border: 3px solid var(--primaryColor); position: relative; }
.team-photo-wrap .team-photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; border: none; box-shadow: none; margin: 0; max-width: none; }
/* Legacy fallback for any saved markup that still has a bare .team-photo img
   without the wrapper — keeps it visually similar until next render. */
.team-photo { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin: 0 auto 1rem; display: block; border: 3px solid var(--primaryColor); }
.team-name { font-size: 1.1rem; margin-bottom: 0; }
.team-role { font-size: 0.85rem; color: var(--primaryContrastColor); font-weight: 600; padding-bottom: 0.5rem; }
.team-card.clr-2 .team-role { color: var(--text-colorInv); opacity: 0.85; }
.team-bio { font-size: 0.9rem; opacity: 0.85; padding-bottom: 0; }
.team-contact { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.5rem; font-size: 0.9rem; }
.team-contact a { color: inherit; opacity: 0.85; text-decoration: none; }
.team-contact a:hover { opacity: 1; text-decoration: underline; }

/* ── Team grid: portrait variant (square photo, name + role left-aligned below — mirrors portfolio standard) ── */
.team-grid-portrait { gap: 1.5rem; }
.team-grid-portrait .team-card-portrait { background: transparent; box-shadow: none; padding: 0; text-align: left; border-radius: 0; overflow: visible; }
.team-grid-portrait .team-card-portrait-img { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-img); margin-bottom: 1rem; }
.team-grid-portrait .team-card-portrait-img img { width: 100%; height: 100%; object-fit: cover; display: block; border: none; border-radius: 0; box-shadow: none; }
.team-grid-portrait .team-card-portrait-body { padding: 0; }
.team-grid-portrait .team-card-portrait .team-name { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.25rem; padding-bottom: 0; }
.team-grid-portrait .team-card-portrait .team-role { font-size: 0.95rem; font-weight: 400; opacity: 0.7; padding-bottom: 0; color: inherit; }
.team-grid-portrait .team-card-portrait .team-bio { font-size: 0.9rem; opacity: 0.7; padding-top: 0.5rem; padding-bottom: 0; }

/* ── Testimonials ── */
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; }
.testimonial-grid[data-columns="1"] { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
.testimonial-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.testimonial-card { padding: 1.5rem; border-radius: var(--radius-card); background: var(--bg-color); box-shadow: var(--shadow); }
.testimonial-card blockquote { margin: 0; font-style: italic; font-size: 0.95rem; line-height: 1.6; padding-bottom: 1rem; }
.testimonial-stars { display: flex; align-items: center; gap: 1px; margin-bottom: 0.5rem; font-size: 1.1rem; }
.tstar { color: #d1d5db; line-height: 1; }
.tstar-full { color: #F59E0B; }
.tstar-partial { position: relative; color: #d1d5db; }
.tstar-partial::before { content: '\2605'; position: absolute; left: 0; top: 0; color: #F59E0B; overflow: hidden; width: var(--star-pct, 50%); }
.tstar-value { font-size: 0.8rem; color: #F59E0B; font-weight: 600; margin-left: 4px; font-style: normal; }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testimonial-author strong { display: block; font-size: 0.9rem; }
.testimonial-author span { display: block; font-size: 0.8rem; opacity: 0.6; }

/* ── Logo Row ── */
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; width: 100%; padding: 1rem 0; }
.logo-row-item { flex-shrink: 0; display: flex; align-items: center; }

/* ── Gallery ── */
.gallery-grid { display: grid; width: 100%; }
.gallery-item { position: relative; overflow: hidden; border-radius: var(--radius-card); }
.gallery-item img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.3s; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.5rem 0.75rem; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: #fff; font-size: 0.85rem; }

/* ── Timeline ── */
.timeline { position: relative; padding: 1rem 0; width: 100%; max-width: var(--container-width, 700px); margin: 0 auto; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--timeline-color, var(--primaryContrastColor)); transform: translateX(-50%); }
.timeline-item { position: relative; width: 50%; padding: 0.5rem 2rem 1.5rem; box-sizing: border-box; }
.timeline-left { left: 0; text-align: right; }
.timeline-right { left: 50%; text-align: left; }
.timeline-dot { position: absolute; top: 0.75rem; width: 12px; height: 12px; border-radius: 50%; z-index: 1; }
.timeline-left .timeline-dot { right: -6px; }
.timeline-right .timeline-dot { left: -6px; }
.timeline-content [data-field="title"] { margin: 0 0 0.25rem; }
.timeline-content [data-field="description"] { margin: 0; font-size: 0.9rem; opacity: 0.85; }
.timeline-year { font-size: 0.8rem; font-weight: 600; opacity: 0.6; display: block; margin-bottom: 0.25rem; }

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .portfolio-grid[data-columns="4"] { grid-template-columns: repeat(2, 1fr); }
  .showcase-grid[data-columns="4"] { grid-template-columns: repeat(2, 1fr); }
  .team-grid[data-columns="5"], .team-grid[data-columns="6"] { grid-template-columns: repeat(3, 1fr); }
  .team-grid[data-columns="4"] { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid[data-columns="4"] { grid-template-columns: repeat(3, 1fr) !important; }
  .gallery-grid[data-columns="3"] { grid-template-columns: repeat(2, 1fr) !important; }
  .testimonial-grid[data-columns="3"] { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .container { padding: 0 var(--block-pr, 24px) 0 var(--block-pl, 24px); }
  .color-block, .hero-banner, .cta-split, .stats-grid,
  .marquee-block, .logo-marquee-block, .showcase-carousel,
  .parallax-section, .cta-banner {
    padding-top: calc(var(--block-pt, 30px) * 0.75);
    padding-bottom: calc(var(--block-pb, 30px) * 0.75);
  }
  .parallax-content { max-width: 90% !important; padding: 2.5rem 2rem !important; }
}

@media (max-width: 768px) {
  .stats-inner { gap: 1rem; }
  .stat-item { min-width: 120px; padding: 1rem; }
  .stat-value { font-size: 2rem; white-space: normal; word-break: break-word; }
  .text-image-fullbleed { min-height: 350px; }
  .text-image-fullbleed-overlay { padding: 2.5rem 1.5rem; }
  .text-image-card { flex-direction: column; gap: 0 !important; }
  .text-image-card[data-mobile-reverse="true"] { flex-direction: column-reverse; }
  .text-image-card-img { flex: none !important; min-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .text-image-card-text { flex: none !important; min-width: 100% !important; padding: 0.75rem 0 !important; }
  .text-image-card-img img, .text-image-card-img video { max-height: 350px; object-fit: cover; }
  .color-block.pix[data-mobile-reverse="true"] .container { flex-direction: column-reverse; }
  .color-block.pix .container .intro { flex: none !important; min-width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .color-block.pix .container .intro img, .color-block.pix .container .intro video { max-height: 350px; object-fit: cover; }
  .img-auto-height .intro img, .img-auto-height .intro video { height: auto; object-fit: contain; }
  .cta-split-inner { flex-direction: column; text-align: center; }
  /* Portfolio grid — collapse to 1 column on phones, tighter cards */
  .portfolio-grid, .portfolio-grid[data-columns="3"], .portfolio-grid[data-columns="4"] { grid-template-columns: 1fr; }
  /* Square image on mobile so the card feels more square overall — override
     any per-block imageHeight inline style with !important. The slideshow
     container uses aspect-ratio on itself so the absolutely-positioned slides
     all inherit the same square viewport. */
  .portfolio-card-img { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-img); }
  .portfolio-card-img img, .portfolio-card-img video { width: 100%; height: 100% !important; object-fit: cover; }
  .portfolio-slideshow { aspect-ratio: 1 / 1; }
  .portfolio-slideshow img { height: 100% !important; width: 100%; object-fit: cover; }
  .portfolio-card-body { padding: 1rem; }
  .portfolio-card-body [data-field="title"] { font-size: 1.05rem; }
  .portfolio-card-body [data-field="description"] { font-size: 0.85rem; padding-bottom: 0.35rem; line-height: 1.45; }
  .portfolio-tags { gap: 0.3rem; }
  .portfolio-tag { font-size: 0.7rem; padding: 0.15rem 0.55rem; }
  /* Slideshow nav arrows — hover-only on desktop, always visible on touch */
  .portfolio-slideshow .pf-slide-nav { opacity: 0.85; }
  .portfolio-slideshow .pf-slide-dot { width: 8px; height: 8px; }

  /* Showcase variant — compact cards with readable text */
  .showcase-grid[data-columns="2"], .showcase-grid[data-columns="3"], .showcase-grid[data-columns="4"] { grid-template-columns: 1fr; }
  .showcase-card { min-height: 0; padding-top: 32px; padding-bottom: 24px; }
  .showcase-card-copy { padding: 0 1.25rem 1rem; }
  .showcase-card-copy [data-field="title"] { font-size: 1.5rem; line-height: 1.15; }
  .showcase-tagline { font-size: 0.95rem; }
  .showcase-card .btn-group, .showcase-card-copy .btn-group { flex-direction: column; gap: 0.5rem; width: 100%; }
  .showcase-card-image img, .showcase-card-image video { max-height: 320px; object-fit: contain; }
  /* Overlay variant — use a portrait aspect ratio so headline + image both fit */
  .showcase-overlay { min-height: 0; padding-top: 0; aspect-ratio: 4 / 5; }
  .showcase-overlay .showcase-card-copy { padding: 1.25rem; }
  .showcase-overlay .showcase-card-copy [data-field="title"] { font-size: 1.4rem; }
  .showcase-overlay .pf-slide-nav { width: 34px; height: 34px; font-size: 1.2rem; opacity: 0.9; }
  .pricing-highlighted { transform: none; }
  .pricing-grid { grid-template-columns: 1fr; }
  .team-grid, .team-grid[data-columns="1"], .team-grid[data-columns="2"], .team-grid[data-columns="4"], .team-grid[data-columns="5"], .team-grid[data-columns="6"] { grid-template-columns: 1fr; }
  .team-photo { width: 80px; height: 80px; }
  .cta-banner { min-height: 250px; }
  .testimonial-grid, .testimonial-grid[data-columns="3"] { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .gallery-grid[data-columns="2"] { grid-template-columns: 1fr !important; }
  .timeline::before { left: 0; }
  .timeline-item { width: 100%; left: 0; text-align: left; padding-left: 2rem; padding-right: 0; }
  .timeline-right { left: 0; }
  .timeline-left .timeline-dot, .timeline-right .timeline-dot { left: -6px; right: auto; }
  /* Mobile padding: ignore per-block overrides entirely so PL/PR/PT/PB sliders
     only apply on desktop. Mobile always uses the site-wide global padding,
     scaled and clamped to a sensible range. */
  .color-block, .hero-banner, .cta-split, .stats-grid,
  .marquee-block, .logo-marquee-block, .showcase-carousel,
  .parallax-section, .cta-banner {
    padding-top: clamp(16px, calc(30px * 0.5), 60px) !important;
    padding-bottom: clamp(16px, calc(30px * 0.5), 60px) !important;
  }
  .container, .row-container {
    padding-left: max(16px, calc(24px * 0.6)) !important;
    padding-right: max(16px, calc(24px * 0.6)) !important;
  }
  .cta-banner-overlay { padding: clamp(40px, 10vw, 60px) 1.5rem !important; }
  .parallax-content { max-width: 100% !important; padding: 2rem 1.5rem !important; }
  .parallax-section { min-height: clamp(450px, 90vh, 750px) !important; }
  .map-embed iframe { max-height: 300px; }
  .logo-row { gap: 1rem; }
  .logo-marquee-content { gap: 1.5rem; }
  .hero-split > div:last-child { padding: 1.5rem 1rem !important; }
  .benefits-grid, .portfolio-grid, .pricing-grid, .team-grid,
  .testimonial-grid, .gallery-grid, .timeline {
    gap: 1rem !important;
  }
  .jumbotron-subpage { padding: 15px 0; }
  .undersidatitel { padding: 1rem 1rem 1.5rem; }
  .undersidatitel [data-field="subpageTitle"] { font-size: 1.5rem; }
}

@media (max-width: 768px) {
  body.menu-open { overflow: hidden; position: fixed; width: 100%; }
  header.scrolled.nav-open { background: var(--headerBgAct); }
  body.subpage header.scrolled.nav-open { background: var(--subpage-bg-scrolled, var(--subpage-bg, var(--headerBgAct))); }
  body.subpage header nav a { color: var(--mobile-menu-text, var(--text-color)) !important; }
  body.subpage header .nav-dropdown-trigger { color: var(--mobile-menu-text, var(--text-color)) !important; }
  .container { flex-direction: column; gap: 1rem; }
  .intro { min-width: 100%; }
  h1:not([data-field]) { font-size: 1.75rem; }
  h2:not([data-field]) { font-size: 1.5rem; }
  h3:not([data-field]) { font-size: 1.25rem; }
  h4:not([data-field]), h5:not([data-field]), h6:not([data-field]) { font-size: 1.1rem; }
  .halva { width: 100%; }
  header { padding: 0.5rem 1rem; gap: 0.75rem; }
  /* Let the logo scale down proportionally when there's a phone (or other
     extras) competing for space. We keep a fixed pixel height (so SVGs with
     only a viewBox and no intrinsic width/height — like specialprint.se's
     8503×1051 viewBox-only logo — still get a non-zero render box) and use
     object-fit:contain to scale the image *within* its box when max-width
     clips it. This preserves the aspect ratio without the dual-auto trap
     where width:auto + height:auto collapses an SVG-only-viewBox <img> to
     0×0 in some browsers. */
  header .logo { flex-shrink: 1; min-width: 0; }
  header .logo-img, header .logo .logo-img { height: 56px !important; max-height: 56px; max-width: 100%; width: auto; object-fit: contain; }
  .header-phone { margin-left: 0; font-size: 0.8rem; flex-shrink: 0; white-space: nowrap; }
  /* Safety net for the Anpassa-header tool's inline-styled tel:/mailto: links
     and for already-saved custom headers that were emitted without
     white-space:nowrap. Inline styles don't include the nowrap, so on narrow
     viewports the digits/email used to break onto separate lines. !important
     is needed to override the inline style. */
  header a[href^="tel:"], header a[href^="mailto:"] { white-space: nowrap !important; flex-shrink: 0 !important; }
  .nav-toggle { display: flex; flex-shrink: 0; }
  /* !important on display so the dropdown mobile menu actually closes when the
     header was built with the Anpassa-header tool — that tool emits the nav
     element with an inline style="display:flex;..." which would otherwise win
     over the stylesheet rule and leave the menu open all the time. */
  header nav { display: none !important; flex-direction: column !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; background: var(--mobile-menu-bg, var(--bg-color)) !important; color: var(--mobile-menu-text, var(--text-color)); padding: 1rem !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 999; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; flex: none !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; }
  header.nav-open nav { display: flex !important; }
  header.nav-open .nav-toggle span { background: var(--mobile-menu-text, var(--text-color)); }
  body.subpage header.nav-open .nav-toggle span { background: var(--mobile-menu-text, var(--text-color)) !important; }
  header nav a { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(128,128,128,0.2); color: var(--mobile-menu-text, var(--text-color)); font-size: clamp(0.8rem, 3.8vw, 1rem); white-space: normal; word-break: break-word; }
  .nav-dropdown { position: static; width: 100%; flex-direction: column; }
  .nav-dropdown-trigger { width: 100%; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid rgba(128,128,128,0.2); font-size: clamp(0.8rem, 3.8vw, 1rem); color: var(--mobile-menu-text, var(--text-color)) !important; white-space: normal; word-break: break-word; }
  .nav-dropdown-menu {
    position: static; transform: none; box-shadow: none; border-radius: 0;
    min-width: 0; width: 100%; padding: 0; opacity: 1; visibility: visible;
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown.dropdown-open .nav-dropdown-menu { max-height: 2000px; }
  .nav-dropdown-item { padding: 0.7rem 1rem 0.7rem 1.75rem; border-radius: 0; border-bottom: 1px solid rgba(128,128,128,0.1); color: var(--mobile-menu-text, var(--dropdown-text, var(--text-color))); }
  .footer-contact { flex-direction: column; align-items: center; gap: 0.5rem; }
  .footer-contact a, .footer-contact span { justify-content: center; text-align: left; }
}



.ghost { height: 0; }
.hero-banner { --hero-header-offset: var(--header-h, 60px); }
.hero-editorial { padding-top: calc(var(--header-h, 60px) + 4rem) !important; }
.jumbotron-subpage { padding-top: 6rem; }
.blog-post-header { padding-top: 6rem !important; }


header .logo .logo-img, header .logo-img { height: 58px; max-height: 58px; width: auto; }







[id] { scroll-margin-top: calc(var(--header-h, 60px) + 40px); }






@keyframes btn-shine { 0% { left: -100%; } 100% { left: 100%; } }
@keyframes btn-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primaryContrastColor) 50%, transparent); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes btn-slide-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes btn-slide-out { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── Button preset: Knappstil 1 (preset-1780318167606-431) ── */
.buttons1.btn-preset-preset-1780318167606-431 {
  --btn-preset-hover-bg: ef934d;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 13px 20px !important;
  border-radius: 4px;
  border-width: 0px !important;
  border-style: solid !important;
  background-color: #eb741a !important;
  color: #ffffff !important;
  border-color: #eb741a !important;
}
a.buttons1.btn-preset-preset-1780318167606-431 { color: #ffffff !important; }
.buttons1.btn-preset-preset-1780318167606-431:hover {
  background-color: ef934d !important;
  color: #ffffff !important;
}
a.buttons1.btn-preset-preset-1780318167606-431:hover { color: #ffffff !important; }


.buttons1.btn-preset-preset-1780318167606-431 { transition: background 0.3s, box-shadow 0.3s, color 0.3s, border-color 0.3s; }




/* No hover effect */
header nav a:hover, .nav-dropdown-trigger:hover { text-decoration: none; }











:root { --card-box-shadow: var(--shadow-lg); --card-border: none; --card-bg: initial; --card-backdrop: none; }
.benefit-card, .portfolio-card, .pricing-tier, .team-card, .testimonial-card, .text-image-card { box-shadow: var(--card-box-shadow); border: var(--card-border); }

















/* Mobile: reset dropdown desktop styles — transparent bg, use mobile menu text color */
@media (max-width: 768px) {
  .nav-dropdown-menu {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
  }
  .nav-dropdown-title { font-weight: 400; }
}


@media (max-width: 768px) {
  header nav, header > nav, header > div nav, header > div > nav {
    display: none !important; flex-direction: column !important; position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important;
    background: var(--mobile-menu-bg, var(--bg-color)) !important; color: var(--mobile-menu-text, var(--text-color));
    padding: 1rem !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 999;
    max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
    flex: none !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important;
    transform: none !important;
  }
  header.nav-open nav, header.nav-open > nav, header.nav-open > div nav, header.nav-open > div > nav { display: flex !important; }
  /* Dropdown variant: when the menu is open, fill the header bar with the
     mobile-menu background so the bar and the panel below it read as one
     continuous block. Without this the bar keeps its original (possibly
     transparent) background and the dropdown hangs visually disconnected.
     The base header rule animates background 0.3s which would fade the
     fill in over 300ms — kill the background transition (preserve transform)
     so the bar matches the instantly-rendered dropdown panel below it. */
  header.nav-open { background: var(--mobile-menu-bg, var(--headerBgAct, var(--bg-color))) !important; transition: transform 0.3s !important; }
  body.subpage header.nav-open { background: var(--mobile-menu-bg, var(--subpage-bg-scrolled, var(--subpage-bg, var(--headerBgAct, var(--bg-color))))) !important; transition: transform 0.3s !important; }
  /* Burger/X now sits on the mobile-menu bg, so it should match the menu's
     text colour (not the original header colour). */
  header.nav-open .nav-toggle span { background: var(--mobile-menu-text, var(--text-color)) !important; }
  body.subpage header.nav-open .nav-toggle span { background: var(--mobile-menu-text, var(--text-color)) !important; }
}
/* Block scroll animations */
.block-anim{--anim-d:1;opacity:0;will-change:opacity,transform;transition-property:opacity,transform;transition-timing-function:cubic-bezier(.16,1,.3,1);transition-duration:600ms}
.block-anim[data-anim="fade-up"]{transform:translateY(calc(40px * var(--anim-d)))}
.block-anim[data-anim="fade-down"]{transform:translateY(calc(-40px * var(--anim-d)))}
.block-anim[data-anim="fade-left"]{transform:translateX(calc(40px * var(--anim-d)))}
.block-anim[data-anim="fade-right"]{transform:translateX(calc(-40px * var(--anim-d)))}
.block-anim[data-anim="zoom-in"]{transform:scale(calc(1 - 0.15 * var(--anim-d)))}
.block-anim[data-anim="zoom-out"]{transform:scale(calc(1 + 0.15 * var(--anim-d)))}
.block-anim[data-anim="slide-up"]{transform:translateY(calc(80px * var(--anim-d)));opacity:1}
.block-anim[data-anim="slide-down"]{transform:translateY(calc(-80px * var(--anim-d)));opacity:1}
.block-anim[data-anim="slide-left"]{transform:translateX(calc(80px * var(--anim-d)));opacity:1}
.block-anim[data-anim="slide-right"]{transform:translateX(calc(-80px * var(--anim-d)));opacity:1}
.block-anim[data-anim="flip"]{transform:perspective(800px) rotateY(calc(90deg * var(--anim-d)))}
.block-anim[data-anim="rotate"]{transform:rotate(calc(-10deg * var(--anim-d))) scale(calc(1 - 0.1 * var(--anim-d)))}
.block-anim[data-anim-mode="scroll"]{transition:none}
.block-anim.anim-visible{opacity:1;transform:none}


/* ── Slideshow ── */
.slideshow-bg { position:absolute; inset:0; z-index:0; }
.slideshow-bg-layer {
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; z-index:0; will-change:opacity,transform;
}
.slideshow-bg-layer.active { opacity:1; z-index:1; }
video.slideshow-bg-layer { background-image:none !important; width:100%; height:100%; object-fit:cover; }
.slideshow-img { position:relative; overflow:hidden; }
.slideshow-img-layer {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; z-index:0; will-change:opacity,transform; border-radius:var(--radius-img);
}
.slideshow-img-layer:first-child { position:relative; }
.slideshow-img-layer.active { opacity:1; z-index:1; }

/* Fade */
[data-slideshow-transition="fade"] .slideshow-bg-layer,
[data-slideshow-transition="fade"] .slideshow-img-layer { transition:opacity 1s ease; }

/* Slide left */
[data-slideshow-transition="slide-left"] .slideshow-bg-layer,
[data-slideshow-transition="slide-left"] .slideshow-img-layer { transition:transform 0.8s cubic-bezier(.25,.1,.25,1),opacity 0.8s ease; transform:translateX(100%); opacity:0; }
[data-slideshow-transition="slide-left"] .slideshow-bg-layer.active,
[data-slideshow-transition="slide-left"] .slideshow-img-layer.active { transform:translateX(0); opacity:1; }
[data-slideshow-transition="slide-left"] .slideshow-bg-layer.ss-exiting,
[data-slideshow-transition="slide-left"] .slideshow-img-layer.ss-exiting { transform:translateX(-100%); opacity:1; z-index:1; }

/* Slide right */
[data-slideshow-transition="slide-right"] .slideshow-bg-layer,
[data-slideshow-transition="slide-right"] .slideshow-img-layer { transition:transform 0.8s cubic-bezier(.25,.1,.25,1),opacity 0.8s ease; transform:translateX(-100%); opacity:0; }
[data-slideshow-transition="slide-right"] .slideshow-bg-layer.active,
[data-slideshow-transition="slide-right"] .slideshow-img-layer.active { transform:translateX(0); opacity:1; }
[data-slideshow-transition="slide-right"] .slideshow-bg-layer.ss-exiting,
[data-slideshow-transition="slide-right"] .slideshow-img-layer.ss-exiting { transform:translateX(100%); opacity:1; z-index:1; }

/* Slide up */
[data-slideshow-transition="slide-up"] .slideshow-bg-layer,
[data-slideshow-transition="slide-up"] .slideshow-img-layer { transition:transform 0.8s cubic-bezier(.25,.1,.25,1),opacity 0.8s ease; transform:translateY(100%); opacity:0; }
[data-slideshow-transition="slide-up"] .slideshow-bg-layer.active,
[data-slideshow-transition="slide-up"] .slideshow-img-layer.active { transform:translateY(0); opacity:1; }
[data-slideshow-transition="slide-up"] .slideshow-bg-layer.ss-exiting,
[data-slideshow-transition="slide-up"] .slideshow-img-layer.ss-exiting { transform:translateY(-100%); opacity:1; z-index:1; }

/* Slide down */
[data-slideshow-transition="slide-down"] .slideshow-bg-layer,
[data-slideshow-transition="slide-down"] .slideshow-img-layer { transition:transform 0.8s cubic-bezier(.25,.1,.25,1),opacity 0.8s ease; transform:translateY(-100%); opacity:0; }
[data-slideshow-transition="slide-down"] .slideshow-bg-layer.active,
[data-slideshow-transition="slide-down"] .slideshow-img-layer.active { transform:translateY(0); opacity:1; }
[data-slideshow-transition="slide-down"] .slideshow-bg-layer.ss-exiting,
[data-slideshow-transition="slide-down"] .slideshow-img-layer.ss-exiting { transform:translateY(100%); opacity:1; z-index:1; }

/* Zoom */
[data-slideshow-transition="zoom"] .slideshow-bg-layer,
[data-slideshow-transition="zoom"] .slideshow-img-layer { transition:transform 1s ease,opacity 1s ease; transform:scale(1.15); opacity:0; }
[data-slideshow-transition="zoom"] .slideshow-bg-layer.active,
[data-slideshow-transition="zoom"] .slideshow-img-layer.active { transform:scale(1); opacity:1; }

/* Ken Burns */
[data-slideshow-transition="kenburns"] .slideshow-bg-layer,
[data-slideshow-transition="kenburns"] .slideshow-img-layer { transition:opacity 1.2s ease; }
[data-slideshow-transition="kenburns"] .slideshow-bg-layer.active,
[data-slideshow-transition="kenburns"] .slideshow-img-layer.active { animation:ss-kenburns var(--ss-kb-dur,8s) ease-in-out forwards; }
@keyframes ss-kenburns { 0%{transform:scale(1) translate(0,0)} 100%{transform:scale(1.12) translate(-2%,-1%)} }

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .slideshow-bg-layer,.slideshow-img-layer { transition:opacity 0.3s ease !important; transform:none !important; animation:none !important; }
}







@media (max-width: 768px) {
  header nav a.nav-cta-mobile.header-cta,
  body.subpage header nav a.nav-cta-mobile.header-cta {
    color: var(--text-colorInv) !important;
    background: var(--primaryContrastColor) !important;
  }
}