/* Generated by Site Builder */
:root {
  --bg-color: #faf6ef;
  --secondary-bgColor: #f1eadd;
  --text-color: #241417;
  --text-colorInv: #faf6ef;
  --primaryColor: #f5e8e9;
  --primaryContrastColor: #6a242e;
  --secondaryColor: #e4d6cd;
  --secondaryContrastColor: #6a242e;
  --headerBg: #6a242e;
  --headerBgAct: #6a242e;
  --headerColor: #f5e8e9;
  --footerBg: #4a161e;
  --footerColor: #f0dcd6;
  --footerContrastColor: var(--primaryContrastColor);
  --footerHoverColor: var(--hoverColor);
  --hoverColor: #ba2530;
  --nav-hover-color: var(--hoverColor);
  --border-btn: 2px;
  --overlayColor: rgba(0,0,0,0.5);
  --curtainColor: rgba(255, 255, 255,.95);
  --heading-font: "Fraunces", sans-serif;
  --body-font: "Inter", sans-serif;


  --radius-btn: 3px;
  --radius-input: 1px;
  --radius-card: 1px;
  --radius-img: 1px;

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

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--body-font); line-height: 1.5; font-weight: 400; font-size: 16px; color: var(--text-color); background: var(--bg-color); overflow-x: hidden; }
/* 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: 1px; text-transform: uppercase;
}
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: 1px; text-transform: uppercase;
  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; text-transform: uppercase; letter-spacing: 1px; 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; text-transform: uppercase; letter-spacing: 1px; 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: #241417; }
.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: #241417; }
.clr-1 { background-color: var(--secondary-bgColor); color: #241417; }
.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: #241417; }
.clr-2 { background-color: var(--primaryContrastColor); color: #faf6ef; }
.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: #faf6ef; }
.clr-3 { background-color: var(--primaryColor); color: #241417; }
.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: #241417; }
.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, #241417);
  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, #241417);
  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: #241417; }
.team-card.clr-1 { background-color: var(--secondary-bgColor); color: #241417; }
.team-card.clr-2 { background-color: var(--primaryContrastColor); color: #faf6ef; }
.team-card.clr-2 .team-role { color: #faf6ef; opacity: 0.85; }
.team-card.clr-3 { background-color: var(--primaryColor); color: #241417; }
/* 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; }
}


.buttons1 {
  background-color: transparent;
  color: var(--primaryContrastColor);
  border-color: var(--primaryContrastColor);
  box-shadow: none;
}
.buttons1:hover {
  background-color: var(--hoverColor);
  color: var(--text-colorInv);
  border-color: var(--hoverColor);
}
a.buttons1 { color: var(--primaryContrastColor); }
a.buttons1:hover { color: var(--text-colorInv); }
input.buttons1 { background-color: transparent; color: var(--primaryContrastColor); border: var(--border-btn) solid var(--primaryContrastColor); }
input.buttons1:hover { background-color: var(--hoverColor); color: var(--text-colorInv); border-color: var(--hoverColor); }

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


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








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






.buttons1:not([data-preset-id]), .header-cta { transition: background 0.3s, box-shadow 0.3s, color 0.3s, border-color 0.3s, transform 0.3s; }
.buttons1:not([data-preset-id]):hover, .header-cta:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
@keyframes btn-shine { 0% { left: -100%; } 100% { left: 100%; } }
@keyframes btn-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primaryContrastColor) 50%, transparent); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes btn-slide-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes btn-slide-out { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── Button preset: Knappstil 1 (preset-1783723832065-709) ── */
.buttons1.btn-preset-preset-1783723832065-709 {
  --btn-preset-hover-bg: #ba2530;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 0px !important;
  text-transform: none !important;
  padding: 13px 32px !important;
  border-radius: 7px;
  border-width: 0px !important;
  border-style: solid !important;
  background-color: #6a242e !important;
  color: #faf6ef !important;
  border-color: #6a242e !important;
}
a.buttons1.btn-preset-preset-1783723832065-709 { color: #faf6ef !important; }
.buttons1.btn-preset-preset-1783723832065-709:hover {
  background-color: #ba2530 !important;
  color: #faf6ef !important;
}
a.buttons1.btn-preset-preset-1783723832065-709:hover { color: #faf6ef !important; }


.buttons1.btn-preset-preset-1783723832065-709 { transition: background 0.3s, box-shadow 0.3s, color 0.3s, border-color 0.3s, transform 0.3s; }
.buttons1.btn-preset-preset-1783723832065-709:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }





/* Nav sliding pill */
header nav, .header-split-nav { gap: 0.4rem; }
header nav a, .nav-dropdown-trigger {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-btn);
  transition: color 0.2s;
  line-height: 1.5; margin: 0;
  -webkit-appearance: none; appearance: none;
}
#nav-pill {
  position: absolute;
  background: var(--nav-hover-color);
  border-radius: var(--radius-btn);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: left 0.35s cubic-bezier(.22,1,.36,1), width 0.35s cubic-bezier(.22,1,.36,1), opacity 0.2s;
}
.nav-pill-active, .nav-pill-active:hover {
  text-decoration: none !important;
  opacity: 1 !important;
}
.nav-dropdown-item { width: fit-content; }
.nav-dropdown-item:hover {
  background: var(--dropdown-hover, var(--nav-hover-color)); border-radius: var(--radius-btn);
}
@media (max-width: 768px) {
  header nav a, .nav-dropdown-trigger { padding: 0.75rem 1rem; border-radius: 0; }
  #nav-pill { display: none; }
  .nav-dropdown-item { width: 100%; }
}












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


:root { --dropdown-text: #242424; }
@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: #242424; }
}














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


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


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

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

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

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

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

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

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

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

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


/* Chattbubbla — premium visual layer. Theme variables let style presets (data-cb-style) and user
   overrides retint everything; gradients derive from ONE brand colour via color-mix (evergreen CSS,
   plain-colour fallback lines kept above each gradient). Animation keyframes seeded from MIT/BSD
   sources: Animate.css v3.7.2 (MIT), Animista (BSD-2), Chatwoot SDK icon-swap pattern (MIT),
   three-dots typing timing (MIT). All decorative motion is gated behind prefers-reduced-motion. */
.aim-chat-bubble { position: fixed; bottom: var(--cb-y,24px); z-index: 1002; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: var(--body-font, system-ui, sans-serif);
  --cb-sfc: #ffffff; --cb-ink: #1a1a1a; --cb-ink-soft: #5c5c66; --cb-input-bg: #f6f6f7; --cb-input-border: #e2e2e6; --cb-hairline: rgba(0,0,0,.06); --cb-hover-bg: rgba(0,0,0,.05); --cb-error: #d64541; }
.aim-chat-bubble.cb-right { right: var(--cb-x,24px); align-items: flex-end; }
.aim-chat-bubble.cb-left { left: var(--cb-x,24px); align-items: flex-start; }
/* ---- FAB (launcher) ---- */
.aim-chat-bubble .cb-fab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; color: var(--cb-icon, #fff); border-radius: 999px; min-width: 56px; height: 56px; padding: 0 16px;
  background: var(--cb-btn, var(--primaryColor, #1a1a1a));
  background: linear-gradient(135deg, color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 88%, #fff) 0%, var(--cb-btn, var(--primaryColor, #1a1a1a)) 55%, color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 85%, #000) 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.22);
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.22), 0 20px 48px -12px color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease; }
.aim-chat-bubble .cb-fab:hover { transform: translateY(-2px) scale(1.03); }
.aim-chat-bubble .cb-fab:active { transform: scale(.94); }
.aim-chat-bubble .cb-fab::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--cb-btn, var(--primaryColor, #1a1a1a)); border-color: color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 45%, transparent); opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.aim-chat-bubble .cb-fab:hover::after, .aim-chat-bubble .cb-fab:focus-visible::after { opacity: 1; transform: scale(1); }
.aim-chat-bubble .cb-fab .cb-fab-label { font-size: 15px; font-weight: 600; white-space: nowrap; }
/* Icon cross-fade + rotate on open/close (Chatwoot-pattern stacked icons; MIT). */
.aim-chat-bubble .cb-fab .cb-fab-icon { display: inline-flex; align-items: center; justify-content: center; transition: opacity .2s ease, transform .25s cubic-bezier(.16,1,.3,1), visibility .25s; }
.aim-chat-bubble .cb-fab .cb-fab-icon-close { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; opacity: 0; visibility: hidden; transform: rotate(90deg) scale(.5); }
.aim-chat-bubble.cb-open .cb-fab .cb-fab-icon-open { opacity: 0; transform: rotate(-90deg) scale(.5); }
.aim-chat-bubble.cb-open .cb-fab .cb-fab-icon-close { opacity: 1; visibility: visible; transform: none; }
.aim-chat-bubble.cb-open .cb-fab .cb-fab-label { display: none; }
.aim-chat-bubble .cb-fab-wave { font-size: 26px; line-height: 1; display: inline-block; transform-origin: 70% 70%; }
/* ---- Greeting teaser ---- */
.aim-chat-bubble .cb-greeting { position: relative; max-width: 240px; background: #fff; color: #1a1a1a; border-radius: 16px; padding: 12px 34px 12px 14px; font-size: 14px; line-height: 1.4; box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.14); cursor: pointer; }
.aim-chat-bubble .cb-greeting::after { content: ''; position: absolute; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.aim-chat-bubble.cb-right .cb-greeting::after { right: 22px; }
.aim-chat-bubble.cb-left .cb-greeting::after { left: 22px; }
.aim-chat-bubble .cb-greeting-x { position: absolute; top: 6px; right: 6px; background: none; border: none; color: rgba(0,0,0,0.35); cursor: pointer; padding: 2px; display: inline-flex; }
/* ---- Panel ---- */
.aim-chat-bubble .cb-panel { position: absolute; bottom: calc(100% + 12px); width: 368px; max-width: calc(100vw - 32px); max-height: min(72vh, 600px); display: flex; flex-direction: column; background: var(--cb-panel-bg, var(--cb-sfc)); color: var(--cb-ink); border: 1px solid var(--cb-hairline); border-radius: 20px; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform-origin: bottom right;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.08), 0 24px 64px -12px rgba(0,0,0,.28);
  transition: opacity .14s cubic-bezier(.4,0,1,1), transform .18s cubic-bezier(.4,0,1,1), visibility 0s .18s; }
.aim-chat-bubble.cb-right .cb-panel { right: 0; }
.aim-chat-bubble.cb-left .cb-panel { left: 0; transform-origin: bottom left; }
/* Asymmetric timing: open springs (~300ms), close obeys instantly (~180ms, rule above). */
.aim-chat-bubble.cb-open .cb-panel { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s; }
/* morph: the FAB and panel share a view-transition-name (only one holds it per state), so the browser
   morphs the button's rect into the panel's. The FAB is hidden while open so it truly "becomes" the
   window; the panel's own close button handles closing. Falls back to grow when unsupported (JS rewrites
   the attribute). */
.aim-chat-bubble[data-cb-anim="morph"] .cb-panel { transition: none; }
.aim-chat-bubble[data-cb-anim="morph"]:not(.cb-open) .cb-fab { view-transition-name: cb-surface; }
.aim-chat-bubble[data-cb-anim="morph"].cb-open .cb-panel { view-transition-name: cb-surface; }
.aim-chat-bubble[data-cb-anim="morph"].cb-open .cb-fab { display: none; }
::view-transition-group(cb-surface) { animation-duration: .34s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-old(cb-surface), ::view-transition-new(cb-surface) { animation-duration: .22s; }
@media (min-width: 481px) {
  .aim-chat-bubble[data-cb-anim="grow"] .cb-panel { transform: scale(0); }
  .aim-chat-bubble[data-cb-anim="grow"].cb-open .cb-panel { transform: none; }
  .aim-chat-bubble[data-cb-anim="slide"] .cb-panel { transform: translateY(12px) scale(.98); }
  .aim-chat-bubble[data-cb-anim="slide"].cb-open .cb-panel { transform: none; }
}
/* ---- Header ---- */
.aim-chat-bubble .cb-header { position: relative; display: flex; align-items: center; gap: 12px; padding: 20px 20px 18px; color: var(--cb-header-color, #fff);
  background: var(--cb-header-bg, var(--cb-btn, var(--primaryColor, #1a1a1a)));
  background: linear-gradient(160deg, color-mix(in srgb, var(--cb-header-bg, var(--cb-btn, var(--primaryColor, #1a1a1a))) 92%, #fff) 0%, var(--cb-header-bg, var(--cb-btn, var(--primaryColor, #1a1a1a))) 60%, color-mix(in srgb, var(--cb-header-bg, var(--cb-btn, var(--primaryColor, #1a1a1a))) 88%, #000) 100%); }
.aim-chat-bubble .cb-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% -20%, rgba(255,255,255,.16), transparent 60%); pointer-events: none; }
.aim-chat-bubble .cb-header > * { position: relative; }
.aim-chat-bubble .cb-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.aim-chat-bubble .cb-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.aim-chat-bubble .cb-avatar::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid var(--cb-header-bg, var(--cb-btn, var(--primaryColor, #1a1a1a))); }
.aim-chat-bubble .cb-header-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.aim-chat-bubble .cb-header-text strong { font-size: 17px; font-weight: 700; letter-spacing: -.01em; font-family: var(--heading-font, inherit); }
.aim-chat-bubble .cb-header-text span { font-size: 13px; opacity: 0.78; }
.aim-chat-bubble .cb-close { background: none; border: none; color: inherit; cursor: pointer; opacity: 0.85; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; transition: background .15s ease, opacity .15s ease; }
.aim-chat-bubble .cb-close:hover { opacity: 1; background: rgba(255,255,255,.15); }
/* ---- Body & form ---- */
.aim-chat-bubble .cb-body { padding: 18px 20px 20px; overflow-y: auto; }
.aim-chat-bubble .cb-field { margin-bottom: 12px; }
.aim-chat-bubble .cb-body input:not([type=checkbox]), .aim-chat-bubble .cb-body textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; font: inherit; font-size: 14px; color: var(--cb-ink); background: var(--cb-input-bg); border: 1px solid var(--cb-input-border); border-radius: 10px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.aim-chat-bubble .cb-body input:focus, .aim-chat-bubble .cb-body textarea:focus { border-color: var(--cb-btn, var(--primaryColor, #1a1a1a)); box-shadow: 0 0 0 3px rgba(0,0,0,.08); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 18%, transparent); }
.aim-chat-bubble .cb-body textarea { resize: vertical; min-height: 76px; }
.aim-chat-bubble .cb-privacy { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 14px; font-size: 12px; line-height: 1.4; color: var(--cb-ink-soft); cursor: pointer; }
.aim-chat-bubble .cb-privacy input { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; accent-color: var(--cb-btn, var(--primaryColor, #1a1a1a)); }
.aim-chat-bubble .cb-privacy a { color: inherit; text-decoration: underline; }
/* Submit is styled unconditionally: the widget is a self-contained surface, so it never falls back to
   host/browser button styles (fixes the unstyled-gray-button bug); btn-preset-* rules still win via
   their !important declarations. */
.aim-chat-bubble .cb-submit { width: 100%; cursor: pointer; padding: 12px 16px; font: inherit; font-size: 15px; font-weight: 600; color: var(--cb-icon, #fff); border: none; border-radius: 10px;
  background: var(--cb-btn, var(--primaryColor, #1a1a1a));
  background: linear-gradient(135deg, color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 90%, #fff) 0%, var(--cb-btn, var(--primaryColor, #1a1a1a)) 60%);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 35%, transparent); transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.aim-chat-bubble .cb-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.24); box-shadow: 0 4px 14px color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 45%, transparent); }
.aim-chat-bubble .cb-submit:disabled { opacity: 0.6; cursor: default; transform: none; }
.aim-chat-bubble .cb-status { margin-top: 10px; font-size: 13px; display: none; }
.aim-chat-bubble .cb-status-error { display: block; color: var(--cb-error); }
/* ---- Success (self-drawing checkmark + optional confetti) ---- */
.aim-chat-bubble .cb-success { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 8px; color: #22a35a; overflow: hidden; }
.aim-chat-bubble .cb-success p { color: var(--cb-ink); font-size: 14px; line-height: 1.5; margin: 0; }
.aim-chat-bubble .cb-check-c, .aim-chat-bubble .cb-check-m { stroke-dasharray: 100; stroke-dashoffset: 0; }
.aim-chat-bubble .cb-confetti-p { position: absolute; top: 6%; width: 7px; height: 11px; border-radius: 2px; pointer-events: none; opacity: 0; }
.aim-chat-bubble [hidden] { display: none !important; }
.aim-chat-bubble .cb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ---- Flow: nav, echo, typing, steps, chips ---- */
.aim-chat-bubble .cb-flow-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.aim-chat-bubble .cb-flow-back, .aim-chat-bubble .cb-flow-restart { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 4px 8px; font: inherit; font-size: 12px; color: var(--cb-ink-soft); cursor: pointer; border-radius: 8px; transition: background .14s ease, color .14s ease; }
.aim-chat-bubble .cb-flow-back:hover, .aim-chat-bubble .cb-flow-restart:hover { background: var(--cb-hover-bg); color: var(--cb-ink); }
.aim-chat-bubble .cb-flow-restart { margin-left: auto; }
.aim-chat-bubble .cb-echo { margin-left: auto; width: fit-content; max-width: 82%; background: var(--cb-btn, var(--primaryColor, #1a1a1a)); color: var(--cb-icon, #fff); padding: 9px 14px; border-radius: 16px 16px 4px 16px; font-size: 13.5px; line-height: 1.4; margin-bottom: 12px; }
.aim-chat-bubble .cb-typing { display: inline-flex; gap: 5px; align-items: center; padding: 13px 15px; background: var(--cb-input-bg); border-radius: 16px 16px 16px 4px; width: fit-content; margin-bottom: 12px; }
.aim-chat-bubble .cb-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--cb-ink-soft); }
.aim-chat-bubble .cb-node-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--cb-ink); }
.aim-chat-bubble .cb-node-body { font-size: 14px; line-height: 1.5; color: var(--cb-ink-soft); margin: 0 0 12px; white-space: pre-wrap; }
.aim-chat-bubble .cb-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.aim-chat-bubble .cb-opt { display: inline-flex; max-width: 100%; box-sizing: border-box; text-align: left; padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--cb-btn, var(--primaryColor,#1a1a1a)); border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--cb-btn, var(--primaryColor,#1a1a1a));
  border-color: color-mix(in srgb, var(--cb-btn, var(--primaryColor,#1a1a1a)) 35%, transparent);
  background: var(--cb-panel-bg, var(--cb-sfc));
  background: color-mix(in srgb, var(--cb-btn, var(--primaryColor,#1a1a1a)) 6%, var(--cb-panel-bg, var(--cb-sfc)));
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.aim-chat-bubble .cb-opt:hover { background: var(--cb-btn, var(--primaryColor,#1a1a1a)); color: var(--cb-icon,#fff); border-color: var(--cb-btn, var(--primaryColor,#1a1a1a)); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.2); box-shadow: 0 4px 12px color-mix(in srgb, var(--cb-btn, var(--primaryColor,#1a1a1a)) 35%, transparent); }
/* Styled unconditionally like .cb-submit — the widget is a self-contained surface, so link CTAs must
   never fall back to host/browser anchor styles (the :not(.buttons1) gate never fired: resolveButtonClass
   always returns buttons1). btn-preset-* rules still win via their !important declarations. */
.aim-chat-bubble .cb-body .cb-node-link { display: block; margin-top: 4px; text-decoration: none; text-align: center; cursor: pointer; padding: 12px 16px; font-size: 15px; font-weight: 600; color: var(--cb-icon,#fff); border-radius: 10px;
  background: var(--cb-btn, var(--primaryColor,#1a1a1a));
  background: linear-gradient(135deg, color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 90%, #fff) 0%, var(--cb-btn, var(--primaryColor, #1a1a1a)) 60%);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 35%, transparent);
  transition: transform .15s ease, box-shadow .15s ease; }
.aim-chat-bubble .cb-body .cb-node-link:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.24); box-shadow: 0 4px 14px color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 45%, transparent); }
/* ---- Style presets ---- */
.aim-chat-bubble[data-cb-style="minimal"] .cb-fab, .aim-chat-bubble[data-cb-style="minimal"] .cb-submit { background: var(--cb-btn, var(--primaryColor, #1a1a1a)); box-shadow: 0 4px 16px rgba(0,0,0,.16); }
.aim-chat-bubble[data-cb-style="minimal"] .cb-header { background: var(--cb-header-bg, var(--cb-btn, var(--primaryColor, #1a1a1a))); }
.aim-chat-bubble[data-cb-style="minimal"] .cb-header::before { content: none; }
.aim-chat-bubble[data-cb-style="minimal"] .cb-panel { box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 16px 40px -8px rgba(0,0,0,.2); }
.aim-chat-bubble[data-cb-style="mork"] { --cb-sfc: #1c1c21; --cb-ink: #f2f2f5; --cb-ink-soft: #b3b3bf; --cb-input-bg: #26262c; --cb-input-border: #3a3a42; --cb-hairline: rgba(255,255,255,.09); --cb-hover-bg: rgba(255,255,255,.08); --cb-error: #ff8a80; }
.aim-chat-bubble[data-cb-style="mork"] .cb-opt { color: #f2f2f5; color: color-mix(in srgb, var(--cb-btn, var(--primaryColor,#1a1a1a)) 45%, #fff); border-color: rgba(255,255,255,.28); border-color: color-mix(in srgb, var(--cb-btn, var(--primaryColor,#1a1a1a)) 55%, rgba(255,255,255,.35)); background: rgba(255,255,255,.05); }
.aim-chat-bubble[data-cb-style="mork"] .cb-panel { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.4), 0 28px 72px -12px rgba(0,0,0,.55); }
.aim-chat-bubble[data-cb-style="mork"] .cb-body input, .aim-chat-bubble[data-cb-style="mork"] .cb-body textarea { color-scheme: dark; }
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .aim-chat-bubble[data-cb-style="glas"] .cb-panel { background: color-mix(in srgb, var(--cb-panel-bg, var(--cb-sfc)) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
  .aim-chat-bubble[data-cb-style="glas"] .cb-body input:not([type=checkbox]), .aim-chat-bubble[data-cb-style="glas"] .cb-body textarea { background: color-mix(in srgb, var(--cb-input-bg) 65%, transparent); }
  .aim-chat-bubble[data-cb-style="glas"] .cb-typing { background: color-mix(in srgb, var(--cb-input-bg) 65%, transparent); }
}
/* aurora — drifting northern-lights header (visual concept clean-room reimplemented in CSS; brand-derived stops) */
.aim-chat-bubble[data-cb-style="aurora"] .cb-header { overflow: hidden; background: color-mix(in srgb, var(--cb-header-bg, var(--cb-btn, var(--primaryColor, #1a1a1a))) 55%, #0b1020); }
.aim-chat-bubble[data-cb-style="aurora"] .cb-header > * { z-index: 1; }
.aim-chat-bubble[data-cb-style="aurora"] .cb-header::after { content: ''; position: absolute; inset: -55%; z-index: 0; pointer-events: none; opacity: .8;
  background: radial-gradient(42% 55% at 22% 40%, color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 50%, #7dd3fc) 0%, transparent 70%), radial-gradient(46% 60% at 74% 26%, color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 45%, #c4b5fd) 0%, transparent 70%), radial-gradient(55% 62% at 50% 88%, color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 55%, #86efac) 0%, transparent 72%);
  filter: blur(24px) saturate(1.25); }
.aim-chat-bubble[data-cb-style="aurora"] .cb-panel { box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.08), 0 24px 64px -12px rgba(0,0,0,.28); box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.08), 0 24px 64px -16px color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 30%, transparent); }
/* skimmer — intermittent diagonal light sweep over the header (transform-only, long dwell) */
.aim-chat-bubble[data-cb-style="skimmer"] .cb-header { overflow: hidden; }
.aim-chat-bubble[data-cb-style="skimmer"] .cb-header::after { content: ''; position: absolute; top: -60%; bottom: -60%; left: 0; width: 38%; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-160%) rotate(8deg); }
/* atelje — warm editorial surface with fine film grain (static; SVG feTurbulence data-URI) */
.aim-chat-bubble[data-cb-style="atelje"] { --cb-sfc: #faf8f4; --cb-ink: #211e19; --cb-ink-soft: #6b6355; --cb-input-bg: #f2efe8; --cb-input-border: #e3ddd0; --cb-hairline: rgba(60,50,30,.09); --cb-hover-bg: rgba(60,50,30,.06); }
.aim-chat-bubble[data-cb-style="atelje"] .cb-panel { border-radius: 24px; box-shadow: 0 2px 8px rgba(50,40,20,.08), 0 16px 44px -8px rgba(50,40,20,.22); }
.aim-chat-bubble[data-cb-style="atelje"] .cb-panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.aim-chat-bubble[data-cb-style="atelje"] .cb-header::before { background: none; }
.aim-chat-bubble[data-cb-style="atelje"] .cb-header::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.aim-chat-bubble[data-cb-style="atelje"] .cb-fab, .aim-chat-bubble[data-cb-style="atelje"] .cb-submit { background: var(--cb-btn, var(--primaryColor, #1a1a1a)); box-shadow: 0 6px 20px rgba(50,40,20,.28); }
/* glod — thin brand-gradient border with a coloured halo (static) */
.aim-chat-bubble[data-cb-style="glod"] .cb-header { background: var(--cb-header-bg, var(--cb-btn, var(--primaryColor, #1a1a1a))); }
.aim-chat-bubble[data-cb-style="glod"] .cb-header::before { content: none; }
.aim-chat-bubble[data-cb-style="glod"] .cb-panel { border: 1.5px solid var(--cb-btn, var(--primaryColor, #1a1a1a));
  border-color: transparent;
  background: linear-gradient(var(--cb-panel-bg, var(--cb-sfc)), var(--cb-panel-bg, var(--cb-sfc))) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 70%, #fff), var(--cb-btn, var(--primaryColor, #1a1a1a)), color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 60%, #000)) border-box;
  box-shadow: 0 8px 28px rgba(0,0,0,.14), 0 24px 64px -12px rgba(0,0,0,.25);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 30%, transparent), 0 8px 28px color-mix(in srgb, var(--cb-btn, var(--primaryColor, #1a1a1a)) 22%, transparent), 0 24px 64px -12px rgba(0,0,0,.25); }
/* ---- Motion (opt-in: everything decorative lives inside no-preference) ---- */
@media (prefers-reduced-motion: no-preference) {
  .aim-chat-bubble .cb-greeting { animation: cb-in .32s cubic-bezier(.16,1,.3,1) backwards; }
  .aim-chat-bubble .cb-node:not([hidden]) .cb-node-title, .aim-chat-bubble .cb-node:not([hidden]) .cb-node-body { animation: cb-in .28s cubic-bezier(.2,.8,.2,1) backwards; }
  .aim-chat-bubble .cb-node:not([hidden]) .cb-form { animation: cb-in .28s cubic-bezier(.2,.8,.2,1) .05s backwards; }
  .aim-chat-bubble .cb-node:not([hidden]) .cb-opt { animation: cb-in .26s cubic-bezier(.2,.8,.2,1) backwards; }
  .aim-chat-bubble .cb-node:not([hidden]) .cb-opt:nth-child(2) { animation-delay: .05s; }
  .aim-chat-bubble .cb-node:not([hidden]) .cb-opt:nth-child(3) { animation-delay: .1s; }
  .aim-chat-bubble .cb-node:not([hidden]) .cb-opt:nth-child(4) { animation-delay: .15s; }
  .aim-chat-bubble .cb-node:not([hidden]) .cb-opt:nth-child(5) { animation-delay: .2s; }
  .aim-chat-bubble .cb-node:not([hidden]) .cb-opt:nth-child(n+6) { animation-delay: .25s; }
  .aim-chat-bubble .cb-echo { animation: cb-echo-in .22s ease-out backwards; }
  .aim-chat-bubble .cb-typing span { animation: cb-typing 1.4s ease-in-out infinite both; }
  .aim-chat-bubble .cb-typing span:nth-child(2) { animation-delay: .16s; }
  .aim-chat-bubble .cb-typing span:nth-child(3) { animation-delay: .32s; }
  .aim-chat-bubble .cb-success:not([hidden]) .cb-check-c { stroke-dashoffset: 100; animation: cb-draw .35s ease-out .05s forwards; }
  .aim-chat-bubble .cb-success:not([hidden]) .cb-check-m { stroke-dashoffset: 100; animation: cb-draw .3s ease-out .35s forwards; }
  .aim-chat-bubble .cb-success:not([hidden]) .cb-check { animation: cb-pop .25s ease-out .6s backwards; }
  .aim-chat-bubble .cb-confetti-p { opacity: 1; animation: cb-confetti 1.15s ease-in forwards; }
  .aim-chat-bubble[data-cb-style="aurora"] .cb-header::after { animation: cb-aurora 16s ease-in-out infinite alternate; }
  .aim-chat-bubble[data-cb-style="skimmer"] .cb-header::after { animation: cb-sheen 7s ease-in-out infinite; }
  /* Launcher attention presets */
  .aim-chat-bubble.cb-att-pulse .cb-fab { animation: cb-pulse 2.8s ease-in-out infinite; }
  .aim-chat-bubble.cb-att-pulse .cb-fab:hover { animation: none; }
  .aim-chat-bubble.cb-att-sonar .cb-fab::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--cb-btn, var(--primaryColor, #1a1a1a)); pointer-events: none; animation: cb-sonar 2.4s cubic-bezier(.215,.61,.355,1) infinite; }
  .aim-chat-bubble.cb-att-wave .cb-fab-wave { animation: cb-vinka 3.2s ease-in-out infinite; }
  .aim-chat-bubble[data-cb-fab-anim="bounce"] .cb-fab.cb-nudging { animation: cb-studsa .9s cubic-bezier(.28,.84,.42,1) 1 both; }
  .aim-chat-bubble[data-cb-fab-anim="nudge"] .cb-fab.cb-nudging { animation: cb-nudge .8s ease-in-out 1 both; }
}
@keyframes cb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cb-echo-in { from { opacity: 0; transform: translateX(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cb-typing { 0%, 80%, 100% { transform: scale(.66); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes cb-draw { to { stroke-dashoffset: 0; } }
@keyframes cb-pop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes cb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes cb-sonar { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.65); opacity: 0; } }
@keyframes cb-vinka { 0%, 50%, 100% { transform: rotate(0); } 5% { transform: rotate(14deg); } 10% { transform: rotate(-8deg); } 15% { transform: rotate(14deg); } 20% { transform: rotate(-4deg); } 25% { transform: rotate(10deg); } 30% { transform: rotate(0); } }
@keyframes cb-studsa { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-12px); } 40% { transform: translateY(0); } 55% { transform: translateY(-6px); } 70% { transform: translateY(0); } 85% { transform: translateY(-2px); } }
@keyframes cb-nudge { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-10deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } }
@keyframes cb-confetti { to { transform: translateY(150px) rotate(540deg); opacity: 0; } }
@keyframes cb-aurora { 0% { transform: translate3d(-6%,-4%,0) rotate(0deg) scale(1); } 50% { transform: translate3d(5%,3%,0) rotate(8deg) scale(1.14); } 100% { transform: translate3d(-3%,5%,0) rotate(-6deg) scale(1.04); } }
@keyframes cb-sheen { 0% { transform: translateX(-160%) rotate(8deg); } 18% { transform: translateX(420%) rotate(8deg); } 100% { transform: translateX(420%) rotate(8deg); } }
@media (max-width: 480px) {
  .aim-chat-bubble.cb-hide-mobile { display: none; }
  .aim-chat-bubble .cb-panel { position: fixed; left: 0; right: 0; bottom: 0; width: 100vw; max-width: 100vw; max-height: 82vh; border-radius: 20px 20px 0 0; transform-origin: bottom center; transform: translateY(16px); }
  .aim-chat-bubble.cb-open .cb-panel { transform: translateY(0); }
  .aim-chat-bubble .cb-greeting { max-width: calc(100vw - 96px); }
}
@media (prefers-reduced-motion: reduce) {
  .aim-chat-bubble .cb-fab, .aim-chat-bubble .cb-panel, .aim-chat-bubble .cb-fab .cb-fab-icon, .aim-chat-bubble .cb-fab::after { transition: none; }
}

/* ══════════════════════════════════════════════════
   Helios — Warm & Radiant Hospitality Design System
   ══════════════════════════════════════════════════ */

/* ── Friendly, rounded headings ── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
p  { line-height: 1.7; font-size: 1.05rem; }

/* ── Pill buttons, soft & inviting ── */
.buttons1, .header-cta {
  border-radius: 999px;
  padding: 0.9rem 2.2rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
a.buttons1 { text-decoration: none; }
input.buttons1 { border-radius: 999px; cursor: pointer; }

/* ── Soft, large card radius ── */
.benefit-card,
.testimonial-card,
.text-image-card {
  border-radius: 24px;
}

/* ── Warm, generous section spacing ── */
.color-block { padding: 5rem 0; }
.cta-block { padding: 5rem 2rem; }

/* ── Rounded gallery images ── */
.gallery-item img { border-radius: 20px; }

@media (max-width: 768px) {
  .color-block { padding: 3rem 0; }
  .cta-block { padding: 3rem 1.5rem; }
}


.header-cta, .header-split-top .header-cta { background: #ba2530; }






.header-cta { font-size: 12px !important; }
.header-cta, header .header-cta, .header-split-top .header-cta, header .header-cta.nav-cta-mobile { border-radius: 9px !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: #ba2530 !important;
  }
}