/* Generated by Site Builder */
:root {
  --bg-color: #faf9f6;
  --secondary-bgColor: #f0ede6;
  --text-color: #000000;
  --text-colorInv: #ffffff;
  --primaryColor: #6a8382;
  --primaryContrastColor: #68242d;
  --secondaryColor: #ddd5c0;
  --secondaryContrastColor: #4a6b3a;
  --headerBg: #68242d;
  --headerBgAct: #68242d;
  --headerColor: #ffffff;
  --footerBg: #68242d;
  --footerColor: #f0ede6;
  --footerContrastColor: var(--primaryContrastColor);
  --footerHoverColor: #581f26;
  --hoverColor: #531d24;
  --nav-hover-color: #581f26;
  --border-btn: 2px;
  --overlayColor: rgba(0,0,0,0.5);
  --curtainColor: rgba(255, 255, 255,.95);
  --heading-font: "Abril Fatface", sans-serif;
  --body-font: "Open Sans", sans-serif;


  --radius-btn: 6px;
  --radius-input: 1px;
  --radius-card: 2px;
  --radius-img: 2px;

  --shadow: none;
  --shadow-lg: none;
}

* { 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; }
/* Site-wide scroll-driven 3D background: fixed canvas behind everything; body + section backgrounds
   go transparent so the 3D shows through the whole site. Section background IMAGES are preserved
   (only background-color is cleared), so deliberate image/hero sections still cover the 3D. */
/* Single-select WebGL site background (PLAN-reactbits-components.md): scroll3D, cursor-field, Galaxy,
   Prism, Lightfall. A fixed full-viewport canvas sits behind all content; only one renders at a time. */
#scroll3d-bg, #cursor-field-bg, #galaxy-bg, #prism-bg, #lightfall-bg, #liquid-ether-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: block; }
body.has-bg { background: transparent; }
/* Clear the solid background-COLOR on top-level sections (the block wrapper and its section root)
   so the background shows through. background-image/gradient sections keep their image and still cover it.
   Sections with an EXPLICIT palette background (clr-1/2/3) are also kept — the user deliberately chose a
   coloured section, and forcing it transparent left its (colour-contrasted) text unreadable on the bg. */
body.has-bg #main [data-block-id],
body.has-bg #main [data-block-id] > *:not(.clr-1):not(.clr-2):not(.clr-3) { background-color: transparent !important; }
/* Cursor trail (PLAN-cursor-effects.md) — shapes dropped along the pointer path; vars set by the
   trail runtime. Harmless when the effect is off (no .aim-trail nodes are ever created). */
.aim-trail { position: fixed; pointer-events: none; z-index: 9000; width: var(--trail-size, 16px); height: var(--trail-size, 16px); margin: calc(var(--trail-size, 16px) / -2) 0 0 calc(var(--trail-size, 16px) / -2); color: var(--trail-color, currentColor); will-change: opacity, transform; animation: aim-trail-out var(--trail-life, 720ms) ease-out forwards; }
.aim-trail.dots { border-radius: 50%; background: currentColor; }
.aim-trail.glow { border-radius: 50%; background: radial-gradient(circle, currentColor 0%, transparent 70%); }
.aim-trail.emoji { font-size: var(--trail-size, 16px); line-height: 1; text-align: center; }
.aim-trail svg { width: 100%; height: 100%; display: block; fill: currentColor; }
@keyframes aim-trail-out { 0% { opacity: 0; transform: var(--tf, rotate(0deg)) scale(0.45); } 18% { opacity: 0.6; } 100% { opacity: 0; transform: var(--tf, rotate(0deg)) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .aim-trail { display: none; } }
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; }
/* Spacer that keeps in-flow content below the fixed header. Its height tracks the real
   measured header height via --header-h (synced by an inline script); 60px is only the
   pre-script fallback. Hard-coding it leaves the first block sliding under taller headers. */
.ghost { height: var(--header-h, 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(--footerHoverColor); }
.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(--footerHoverColor); }
.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(--footerHoverColor); 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(--footerHoverColor); }
.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(--footerHoverColor); }
.footer-extra-text { max-width: 600px; margin: 0.75rem auto 0; font-size: 0.8rem; opacity: 0.6; text-align: center; }
.footer-credits { max-width: 600px; margin: 1rem auto 0; font-size: 0.7rem; opacity: 0.5; text-align: center; line-height: 1.5; }
.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); }
/* Parallax content follows the content width (global Innehållsbredd or a per-block override).
   A per-block override injects --container-width / --block-pl / --block-pr onto the <section>,
   which this inner wrapper reads to constrain & align the text column. */
.parallax-section .parallax-inner { width: 100%; max-width: var(--container-width, 1100px); margin: 0 auto; padding-left: var(--block-pl, 0px); padding-right: var(--block-pr, 0px); box-sizing: border-box; }
/* 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); color: #000000; }
.clr-0 [data-field="heading"], .clr-0 h1:not([data-field]), .clr-0 h2:not([data-field]), .clr-0 h3:not([data-field]), .clr-0 h4:not([data-field]), .clr-0 h5:not([data-field]), .clr-0 h6:not([data-field]) { color: #000000; }
.clr-1 { background-color: var(--secondary-bgColor); color: #000000; }
.clr-1 [data-field="heading"], .clr-1 h1:not([data-field]), .clr-1 h2:not([data-field]), .clr-1 h3:not([data-field]), .clr-1 h4:not([data-field]), .clr-1 h5:not([data-field]), .clr-1 h6:not([data-field]) { color: #000000; }
.clr-2 { background-color: var(--primaryContrastColor); color: #ffffff; }
.clr-2 [data-field="heading"], .clr-2 h1:not([data-field]), .clr-2 h2:not([data-field]), .clr-2 h3:not([data-field]), .clr-2 h4:not([data-field]), .clr-2 h5:not([data-field]), .clr-2 h6:not([data-field]) { color: #ffffff; }
.clr-3 { background-color: var(--primaryColor); color: #ffffff; }
.clr-3 [data-field="heading"], .clr-3 h1:not([data-field]), .clr-3 h2:not([data-field]), .clr-3 h3:not([data-field]), .clr-3 h4:not([data-field]), .clr-3 h5:not([data-field]), .clr-3 h6:not([data-field]) { color: #ffffff; }
.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 {
  position: relative; /* anchors the optional background overlay div */
  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;
}
.jumbotron-subpage > .undersidatitel { position: relative; z-index: 1; }
/* The jumbotron content follows the global Innehållsbredd by default (same --container-width as
   page blocks). Per-page 'full' override removes this cap (see per-page rules below). */
.undersidatitel { max-width: var(--container-width, 1100px); margin-left: auto; margin-right: auto; 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, #ffffff);
  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, #ffffff);
  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; }

/* ── Fact box (faktaruta) ── */
.fact-box-section .container { max-width: var(--container-width, 1100px); margin: 0 auto; padding: 0 var(--block-pr, 1.5rem) 0 var(--block-pl, 1.5rem); }
.fact-box { border: 1px solid color-mix(in srgb, var(--primary-contrast-color) 35%, transparent); border-left: 4px solid var(--primary-contrast-color); border-radius: var(--radius-card, 12px); padding: 1.5rem 1.75rem; background: color-mix(in srgb, var(--primary-contrast-color) 6%, transparent); }
.fact-box-heading { font-family: var(--heading-font); font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin: 0 0 .65rem; }
.fact-box-body { margin: 0; line-height: 1.65; }
.fact-box-source { margin: .85rem 0 0; font-size: .82rem; opacity: .75; }
.fact-box-source-label { font-weight: 600; }
.fact-box-source a { color: var(--primary-contrast-color); text-decoration: underline; }

/* ── 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; }

/* ── Before/after comparison slider (portfolio 'before-after' variant) ── */
/* The comparison box is a stable rectangle (4:3, or a fixed height when Bildhöjd is set) so the
   slider always has a proper frame no matter how the two photos are oriented. The neutral tint
   fills any letterbox area left by 'contain'. */
/* The slider lives inside .portfolio-card-img, whose img{height:220px} and (mobile) aspect-ratio:1/1
   rules are meant for a plain portfolio image and would pin our images to 220px at the top of the box.
   The --ba wrapper + the compound selectors below out-specify those so .pf-ba owns its own sizing. */
.portfolio-card-img.portfolio-card-img--ba { aspect-ratio: auto; height: auto; }
.pf-ba { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-img); --pos: 50%; user-select: none; touch-action: pan-y; background: rgba(0,0,0,0.045); }
.pf-ba--fixed { aspect-ratio: auto; }
/* Both photos fill the same box. Default 'cover' → images fill the frame edge-to-edge (the
   conventional slider look, no gaps; edges crop when aspects differ). 'contain' shows each photo
   in full, letterboxed on the neutral tint. The "before" overlays and is wiped from the left. */
.pf-ba .pf-ba-after, .pf-ba .pf-ba-before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.pf-ba[data-fit="contain"] .pf-ba-after, .pf-ba[data-fit="contain"] .pf-ba-before { object-fit: contain; }
.pf-ba .pf-ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.pf-ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(0,0,0,0.15); pointer-events: none; z-index: 3; }
.pf-ba-grip { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.pf-ba-grip::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23595959' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 3 12 9 18'/%3E%3Cpolyline points='15 6 21 12 15 18'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
.pf-ba-label { position: absolute; bottom: 10px; padding: 3px 10px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.55); border-radius: 999px; pointer-events: none; z-index: 2; }
.pf-ba-label-before { left: 10px; }
.pf-ba-label-after { right: 10px; }
.pf-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.pf-ba-expand { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: none; border-radius: 8px; background: rgba(0,0,0,0.5); color: #fff; cursor: pointer; z-index: 4; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
.pf-ba-expand:hover { background: rgba(0,0,0,0.7); }
body.aim-edit-mode .pf-ba-expand { display: none; }
body:not(.aim-edit-mode) .pf-ba { cursor: ew-resize; }
/* Fullscreen lightbox for "see all project images" */
.pf-ba-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; cursor: pointer; }
.pf-ba-lightbox.active { opacity: 1; }
.pf-ba-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius-img); }
.pf-ba-lb-close { position: absolute; top: 1rem; right: 1.5rem; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; background: none; border: none; }
.pf-ba-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 2.5rem; cursor: pointer; background: none; border: none; padding: .5rem; opacity: .7; transition: opacity .2s; }
.pf-ba-lb-nav:hover { opacity: 1; }
.pf-ba-lb-prev { left: 1rem; }
.pf-ba-lb-next { right: 1rem; }

/* ── Badges pinned over the hero (bannerbild) image — any image badge, or a built review card.
   Badges are grouped into up-to-4 corner containers; each corner is a flex column so multiple
   badges sharing a corner stack instead of overlapping. ── */
.hero-badges { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 0.6rem; max-width: 60%; }
.hero-badges--top-left { top: clamp(0.75rem, 2vw, 1.5rem); left: clamp(0.75rem, 2vw, 1.5rem); align-items: flex-start; }
.hero-badges--top-right { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); align-items: flex-end; }
.hero-badges--bottom-left { bottom: clamp(0.75rem, 2vw, 1.5rem); left: clamp(0.75rem, 2vw, 1.5rem); align-items: flex-start; }
.hero-badges--bottom-right { bottom: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); align-items: flex-end; }
/* Free placement: coordinates come in as --bx/--by (and optionally --bx-m/--by-m for mobile)
   custom properties in %; the badge is centered on that point. Older published markup with
   inline left/top keeps working — inline wins over these class rules. */
.hero-badges--free { transform: translate(-50%, -50%); align-items: center; left: var(--bx); top: var(--by); max-width: none; }
.hero-reco-badge { position: relative; display: block; width: var(--badge-size, 120px); max-width: 100%; text-decoration: none; line-height: 1.2; transition: transform .2s ease; }
.hero-reco-badge:hover { transform: translateY(-2px); }
/* Image badge: the uploaded image fills the width, with a soft shadow so it reads over any photo. */
.hero-reco-badge--image img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.28)); }
/* Built-in seal presets (inline SVG). */
.hero-reco-badge--preset svg { filter: drop-shadow(0 6px 18px rgba(0,0,0,.28)); }
/* Built card: logo + score + stars + count/label on a rounded card. */
.hero-reco-badge--card .hero-reco-card { display: flex; flex-direction: column; align-items: center; gap: 0.28rem; padding: 0.85rem 1rem; border-radius: 14px; background: #fff; color: #1a1a1a; box-shadow: 0 10px 30px rgba(0,0,0,.22); text-align: center; }
.hero-reco-badge--card.hero-reco-badge--dark .hero-reco-card { background: #14151a; color: #fff; }
.hero-reco-logo { max-width: 64%; height: auto; display: block; margin-bottom: 0.1rem; }
.hero-reco-score { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.5px; }
.hero-reco-meta { font-size: 0.72rem; opacity: 0.78; }
.hero-reco-meta strong { font-weight: 700; opacity: 1; }
.hero-reco-stars { position: relative; display: inline-block; font-size: 0.95rem; color: rgba(0,0,0,0.16); }
.hero-reco-badge--dark .hero-reco-stars { color: rgba(255,255,255,0.22); }
.hero-reco-stars::before { content: '★★★★★'; letter-spacing: 2px; }
.hero-reco-stars-fill { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; white-space: nowrap; color: #ffb400; }
.hero-reco-stars-fill::before { content: '★★★★★'; letter-spacing: 2px; }
body.aim-edit-mode .hero-reco-badge { cursor: pointer; }
@media (max-width: 768px) {
  .hero-badges { max-width: 46%; gap: 0.4rem; }
  /* Mobile size: explicit --badge-size-m wins; otherwise auto-shrink the desktop size. */
  .hero-reco-badge { width: var(--badge-size-m, calc(var(--badge-size, 120px) * 0.82)); }
  /* Mobile placement: --bx-m/--by-m win; otherwise follow the desktop point. */
  .hero-badges--free { left: var(--bx-m, var(--bx)); top: var(--by-m, var(--by)); max-width: none; }
  .hero-reco-score { font-size: 1.35rem; }
}

/* ── 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); }
/* Slideshow inside a (non-overlay) showcase card needs a fixed height — its slides are absolutely
   positioned, so the default height:auto above would collapse them. Inline imageHeight overrides. */
.showcase-card:not(.showcase-overlay) .showcase-card-image .portfolio-slideshow { width: 100%; }
.showcase-card:not(.showcase-overlay) .showcase-card-image .portfolio-slideshow img { height: 380px; }
/* Showcase overlay — text on top of background image */
.showcase-overlay { aspect-ratio: 1/1; min-height: 0; padding-top: 0; justify-content: center; }
/* No z-index here: a z-index (even 0) makes this a stacking context that traps the slideshow
   nav arrows (z-index:10) behind the tint/copy, making them unclickable. Without it the image
   stays behind via DOM order while the arrows escape to the card's context. */
.showcase-overlay .showcase-card-image { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; }
.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); color: #000000; }
.team-card.clr-1 { background-color: var(--secondary-bgColor); color: #000000; }
.team-card.clr-2 { background-color: var(--primaryContrastColor); color: #ffffff; }
.team-card.clr-2 .team-role { color: #ffffff; opacity: 0.85; }
.team-card.clr-3 { background-color: var(--primaryColor); color: #ffffff; }
.team-card.clr-3 .team-role { color: #ffffff; opacity: 0.85; }
/* 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-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; }

/* Portfolio grids step down one column at a time as the window narrows:
   4 → 3 (≤1280) → 2 (≤1024) → 1 (≤768, in the phone breakpoint below). */
@media (max-width: 1280px) {
  .portfolio-grid[data-columns="4"], .showcase-grid[data-columns="4"] { grid-template-columns: repeat(3, 1fr); }
}
/* Tablet breakpoint */
@media (max-width: 1024px) {
  .portfolio-grid[data-columns="3"], .portfolio-grid[data-columns="4"] { grid-template-columns: repeat(2, 1fr); }
  .showcase-grid[data-columns="3"], .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, .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);
  }
  /* Hero scales like the other blocks but must keep --hero-header-offset additive,
     so the heading clears a fixed/transparent/overlay header on mobile instead of
     being clipped under it. Offset is 0 for normal (non-overlapping) headers. */
  .hero-banner {
    padding-top: calc(var(--block-pt, 30px) * 0.75 + var(--hero-header-offset, 0px));
    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 — a tidy 2-column grid instead of flex wrap-scatter; an odd last item
     spans the full width. Values keep nbsp thousand separators (set by the
     renderer/count-up script) so numbers never split; overflow-wrap stays as an
     emergency valve for values genuinely wider than a cell. */
  .stats-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0.75rem; }
  .stat-item { min-width: 0; max-width: none; padding: 0.5rem; }
  .stat-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat-value { font-size: 2rem; white-space: normal; word-break: normal; overflow-wrap: 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; }
  /* All portfolio variants share the overlay card's 4:5 portrait frame on mobile —
     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 viewport. */
  .portfolio-card-img { aspect-ratio: 4 / 5; 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: 4 / 5; }
  .portfolio-slideshow img { height: 100% !important; width: 100%; object-fit: cover; }
  /* Before/after — Bildhöjd sets a fixed inline pixel height sized for desktop columns,
     which turns into a tall narrow slider on phones. Drop it (!important beats the inline
     style) and use the same 4:5 frame as the other portfolio cards. */
  .pf-ba, .pf-ba.pf-ba--fixed { height: auto !important; aspect-ratio: 4 / 5; }
  /* Standard & before/after live inside .container while the showcase variants don't —
     drop the container's side padding on mobile so every variant lines up at the same
     width (the grid's own gap padding then matches the showcase grid's inset). */
  .portfolio-section .container { padding-left: 0 !important; padding-right: 0 !important; }
  .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%; }
  /* Non-overlay showcase image gets the same 4:5 frame as every other variant. */
  .showcase-card:not(.showcase-overlay) .showcase-card-image { aspect-ratio: 4 / 5; overflow: hidden; }
  .showcase-card:not(.showcase-overlay) .showcase-card-image img, .showcase-card:not(.showcase-overlay) .showcase-card-image video { width: 100%; height: 100% !important; object-fit: cover; max-height: none; }
  /* Overlay variant — use a portrait aspect ratio so headline + image both fit.
     The image must keep filling the whole card (no 320px cap — that's for the
     non-overlay layout where the image sits below the copy). */
  .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, .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;
  }
  /* Hero: same mobile scaling, but re-add the header offset so an overlapping
     ("hängande"/transparent/fixed) header doesn't clip the heading. */
  .hero-banner {
    padding-top: calc(clamp(16px, calc(30px * 0.5), 60px) + var(--hero-header-offset, 0px)) !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; }
}



header {
  flex-direction: column;
  align-items: center;
  padding: 0;
}
.header-split-main {
  order: 1;
  width: 100%;
  /* 3-column grid keeps the logo dead-centered on screen even when the
     left and right nav slices have different total widths. flex with
     justify-content:center previously hugged the three children together
     so an unbalanced split (e.g. 3 left items + 2 right items, or simply
     longer words on one side) shifted the logo off the visual center. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.75rem 2rem;
  gap: 1rem;
  background: var(--headerBg);
  position: relative;
  z-index: 2;
}
.header-split-main > .logo { justify-self: center; }
.header-split-main > .header-split-nav:first-of-type { justify-self: end; }
.header-split-main > .header-split-nav:last-of-type { justify-self: start; }
.header-split-main .logo { color: var(--headerColor); }
.header-split-nav { display: flex; gap: 1.5rem; align-items: center; margin-left: 0; }
.header-split-nav a:not(.nav-dropdown-item) { color: var(--headerColor); }
.header-split-nav .nav-dropdown-trigger { color: var(--headerColor); }
.header-split-mobile-nav { display: none; }
header .logo { font-size: 1.6rem; padding: 0 1.5rem; }
.header-split-top {
  order: 2;
  position: absolute;
  top: calc(100% - 1px);
  right: 2rem;
  width: auto;
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0;
  background: transparent;
  letter-spacing: 2px;
  font-size: 0.85rem;
  z-index: 1;
}
.header-split-top a {
  color: var(--headerColor);
  opacity: 1;
  background: var(--headerBg);
  padding: 0.55rem 1.5rem;
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  clip-path: inset(0 -12px -12px -12px);
  text-decoration: none;
  white-space: nowrap;
}
.header-split-top .header-cta {
  background: var(--headerBg);
  color: var(--headerColor);
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  padding: 0.55rem 1.5rem;
  font-weight: 600;
  margin-left: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  clip-path: inset(0 -12px -12px -12px);
}
.header-split-top .header-cta:hover { opacity: 0.9; }
header .header-cta {
  --cta-static: 1;
  border-radius: 0 0 var(--radius-btn) var(--radius-btn) !important;
  transition: background 0.3s, border-color 0.3s !important;
  transform: none !important;
  animation: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: auto !important;
}
header .header-cta::before { content: none !important; }
header.scrolled .header-split-main { background: var(--headerBgAct); }
header.scrolled .header-split-top a:not(.header-cta) { background: var(--headerBgAct); color: var(--headerColor); text-decoration: none; }
.ghost { height: 0; }
.hero-banner { --hero-header-offset: var(--header-h, 60px); }
.hero-editorial { padding-top: calc(var(--header-h, 60px) + 4rem) !important; }
.blog-post-header { padding-top: 6rem !important; }
@media (max-width: 1100px) {
  .header-split-main { padding: 0.75rem 1rem; }
  .header-split-nav { gap: 0.6rem; }
  header .logo { font-size: 1.3rem; padding: 0 0.75rem; }
  .header-split-nav a:not(.nav-dropdown-item), .header-split-nav .nav-dropdown-trigger { font-size: 0.75rem; letter-spacing: 0.5px; }
}
@media (max-width: 768px) {
  header {
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem !important;
  }
  .header-split-top { display: none !important; }
  /* Higher-specificity hide so the per-style mobile-menu tokens
     (header nav / header.nav-open nav { display: flex !important })
     don't unhide the desktop nav slices and render them as extra
     drawer panels stacked behind the real mobile nav. */
  header .header-split-nav,
  header.nav-open .header-split-nav { display: none !important; }
  .header-split-main {
    /* Reset desktop grid back to flex on mobile — the grid's 1fr|auto|1fr
       columns would force the logo dead-center across the full row, but
       on mobile we want it to sit next to the burger at the start. */
    display: flex;
    grid-template-columns: none;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0;
    width: auto;
    gap: 0;
    order: 1;
  }
  header .logo { padding: 0; font-size: 1.3rem; }
  .nav-toggle { order: 2; }
  .nav-cta-mobile,
  header .header-cta.nav-cta-mobile {
    border-radius: var(--radius-btn) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem !important;
  }
}


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






body:not(.subpage) .ghost { height: 0; display: none; }
body:not(.subpage) .hero-banner { --hero-header-offset: var(--header-h, 60px); }
body:not(.subpage) .hero-editorial { padding-top: calc(var(--header-h, 60px) + 4rem) !important; }

body.subpage .ghost { height: 0; display: none; }
body.subpage .jumbotron-subpage { padding: var(--subpage-header-padding-top, var(--header-h, 60px)) 0 var(--subpage-header-padding-bottom, var(--subpage-header-padding, 30px)); }
body.subpage .blog-post-header { padding-top: calc(var(--header-h, 60px) + 1.5rem) !important; }

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





body[data-page="konferens-goteborg"] .jumbotron-subpage {
  --subpage-header-padding-top: 100px;
  --subpage-header-padding-bottom: 40px;
}

body[data-page="konferensaktiviteter-goteborg"] .jumbotron-subpage {
  --subpage-header-padding-top: 100px;
  --subpage-header-padding-bottom: 40px;
}

body[data-page="restaurang"] .jumbotron-subpage {
  --subpage-header-padding-top: 100px;
  --subpage-header-padding-bottom: 40px;
}

body[data-page="kontakt"] .jumbotron-subpage {
  --subpage-header-padding-top: 100px;
  --subpage-header-padding-bottom: 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); } }




/* Underline — follows text color */
header nav a, .nav-dropdown-trigger { position: relative; }
header nav a::after, .nav-dropdown-trigger::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
header nav a:hover::after, .nav-dropdown-trigger:hover::after { transform: scaleX(1); }
header nav a:hover, .nav-dropdown-trigger:hover { text-decoration: none; }
.nav-dropdown-item::after { display: none; }
.nav-dropdown-item:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
@media (max-width: 768px) {
  header nav a::after, .nav-dropdown-trigger::after { display: none; }
}














:root { --card-box-shadow: var(--shadow); --card-border: 1px solid rgba(0,0,0,0.1); --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); }


:root { --dropdown-text: #68242d; }
@media (min-width: 769px) {
  header .nav-dropdown-menu .nav-dropdown-item,
  header .nav-dropdown-menu .nav-dropdown-title,
  header .nav-dropdown-menu .nav-dropdown-desc { color: #68242d; }
}

:root { --dropdown-hover: #581f26; }
.nav-dropdown-item:hover { color: #581f26; }

:root { --mobile-menu-text: #68242d; }
:root { --input-color: #68242d; }









/* 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 {
    display: flex !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    width: min(90vw, 360px) !important; max-height: none; flex-direction: column !important; background: var(--mobile-menu-bg, var(--bg-color)) !important;
    color: var(--mobile-menu-text, var(--text-color));
    justify-content: flex-start !important; align-items: stretch !important; flex: none !important;
    padding: 4rem 1.5rem 2rem !important;
    z-index: 1000; transform: translateX(100%); transition: transform 0.3s ease;
    overflow-y: auto; overscroll-behavior: contain;
  }
  header.nav-open nav { transform: translateX(0); display: flex !important; }
  header.nav-open .nav-toggle { position: relative; z-index: 1001; }
  header.nav-open .nav-toggle span { background: var(--mobile-menu-text, var(--text-color)); }
  header.nav-open::before {
    content: ''; position: fixed; inset: 0;
    background: rgba(0,0,0,0.4); z-index: 999;
  }
  header nav a { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(128,128,128,0.15); color: var(--mobile-menu-text, var(--text-color)); font-size: clamp(0.8rem, 3.8vw, 1rem); white-space: normal; word-break: break-word; }
  header nav .nav-dropdown-trigger { color: var(--mobile-menu-text, var(--text-color)) !important; font-size: clamp(0.8rem, 3.8vw, 1rem); white-space: normal; word-break: break-word; }
  .nav-cta-mobile { display: block; margin-top: 1rem; text-align: center; width: 100%; border-radius: var(--radius-btn); text-transform: none; letter-spacing: normal; }
}
/* 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;
  }
}


/* ── Typography tokens (template defaults) ── */
h1:not([data-field]), h2:not([data-field]), h3:not([data-field]), h4:not([data-field]), h5:not([data-field]), h6:not([data-field]), [data-field="heading"] { letter-spacing: 1.5px; }
p:not([data-field]), p[data-field="paragraphs"] { padding-bottom: 0px; }