/* Editorial motion treatment. Browser owns all scrolling. */
.living-paper {
  position: absolute;
  inset: 0;
  contain: none;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.living-paper svg {
  width: 100%;
  height: 100%;
  min-height: 700px;
  overflow: visible;
}
.paper-lines {
  fill: none;
  stroke: #192c48;
  stroke-width: 1;
  opacity: 0.14;
  filter: none;
}
.paper-orbit {
  fill: #adc6f4;
  opacity: 0.18;
  filter: none;
}
.paper-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.018;
  mix-blend-mode: normal;
}
body[data-editorial] h1 {
  letter-spacing: -0.065em;
}
body[data-editorial] .hero-copy .intro {
  max-width: 38ch;
  line-height: 1.75;
}
body[data-editorial] .door-panel {
  animation: none !important;
  background: #adc6f46b;
  box-shadow: none;
  transform: rotate(-2deg);
}
body[data-editorial] .door-grid {
  opacity: 0.2;
}
body[data-editorial] .local-note {
  box-shadow: none;
  border-bottom: 1px solid var(--red);
  font-weight: 500;
}
body[data-editorial] .hero-bee {
  animation: none !important;
  transform: rotate(-3deg);
}
body[data-editorial] .editorial-strip {
  background: transparent;
  color: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: Arial, sans-serif;
  font-size: clamp(18px, 2.5vw, 28px);
  letter-spacing: -0.035em;
}
body[data-editorial] .bee-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
body[data-editorial] .bee-stage {
  background: transparent !important;
}
body[data-editorial] .bee-stage img {
  animation: none !important;
  filter: drop-shadow(3px 6px 3px #192c482b);
  transition: transform .35s ease;
}
body[data-editorial] .bee-card:hover .bee-stage img {
  transform: rotate(var(--paper-angle));
}
body[data-editorial] .bee-card > span:not(.card-arrow) {
  font-family: Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
body[data-editorial] .growing-platform {
  background: transparent;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
body[data-editorial] .audience {
  box-shadow: none;
  border-radius: 0;
}
body[data-editorial] .audience.customer {
  background: #adc6f433;
}
body[data-editorial] .button {
  box-shadow: 2px 3px 0 #192c4820;
}
body[data-editorial] .will-reveal {
  opacity: 1 !important;
  transform: none !important;
}
body[data-editorial] main h1,
body[data-editorial] main h2 {
  opacity: 1;
  scale: 1;
}
.motion-toggle {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 9px 13px;
  font-size: 12px;
  cursor: pointer;
}
.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
  animation: none !important;
  scroll-behavior: auto !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  .living-paper * {
    animation: none !important;
  }
  .bee-stage img {
    transition: none !important;
  }
}
@media (max-width: 600px) {
  .hero-art {
    margin-top: 20px;
  }
}
.motion-paused .hero-bee {
  translate: none !important;
}
html:has(body[data-editorial]) {
  overflow-x: clip;
}
/* No page-controlled scroll smoothing, including anchor navigation. */
html:has(body[data-motion-owner="editorial"]) {
  scroll-behavior: auto !important;
}
body[data-motion-owner="editorial"] main h1,
body[data-motion-owner="editorial"] main h2 {
  transform: none;
  transition: none;
}
body[data-motion-owner="editorial"] .hero-bee {
  translate: none !important;
}
body[data-motion-owner="editorial"]
  :is(.section-heading, .growing-platform, .audience, .signup-copy, .faq h2) {
  transition: none;
}
/* Artwork is confined to each section; header controls have their own opaque layer. */
body[data-editorial] .header {
  position: relative;
  z-index: 20;
  background: var(--paper);
  isolation: isolate;
}
body[data-editorial] .hero,
body[data-editorial] .services {
  position: relative;
  isolation: isolate;
}
.paper-slip {
  position: absolute;
  display: block;
  box-shadow: 4px 6px 0 #192c480c;
}
.slip-blue {
  width: 170px;
  height: 90px;
  background: #adc6f44d;
  left: 40%;
  top: 5%;
  transform: rotate(-12deg);
}
.slip-red {
  width: 46px;
  height: 13px;
  background: #e8473640;
  left: 3%;
  bottom: 7%;
  transform: rotate(-18deg);
}
.paper-ring {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px solid #192c4826;
  border-radius: 50%;
  right: 2%;
  bottom: 8%;
  box-shadow: 3px 4px 0 #192c4806;
}
.service-paper .slip-blue {
  left: 75%;
  top: 3%;
}
.service-paper .slip-red {
  left: 5%;
  bottom: 20%;
}
.service-paper .paper-ring {
  right: auto;
  left: 30%;
  bottom: 3%;
}
@media (max-width: 600px) {
  .slip-blue {
    width: 90px;
    height: 55px;
    left: 60%;
    top: 2%;
  }
  .paper-ring {
    width: 110px;
    height: 110px;
  }
  .service-paper .slip-blue {
    left: 62%;
  }
}
/* Contained practical-effects style smoke; transform/opacity only during playback. */
body[data-editorial] .hero-art {
  overflow: hidden;
}
.transform-bee {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  z-index: 2;
  cursor: pointer;
  isolation: isolate;
}
body[data-editorial] .transform-bee .hero-bee {
  transition: none;
  pointer-events: none;
}
.transformation-cloud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: clip;
}
.smoke-puff {
  position: absolute;
  left: calc(50% - 70px);
  top: calc(48% - 70px);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(
    ellipse at 38% 35%,
    #fffdf4 0%,
    #f8f3e8e8 25%,
    #d2dcebab 47%,
    #a8b8cf22 66%,
    transparent 76%
  );
}
.smoke-puff:nth-child(3n) {
  background: radial-gradient(
    ellipse at 40% 30%,
    #fffdf8 0%,
    #e5e9ece0 30%,
    #a7b9d33d 58%,
    transparent 76%
  );
}
.smoke-ring {
  position: absolute;
  left: 15%;
  top: 20%;
  width: 70%;
  aspect-ratio: 1;
  border: 12px solid #f8f3e870;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 5px 12px #192c4812;
}
.transform-hint {
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted);
  z-index: 4;
  pointer-events: none;
  background: var(--paper);
  padding: 5px;
}
.transform-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.transform-bee:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -6px;
}
@media (max-width: 600px) {
  .smoke-puff {
    width: 95px;
    height: 95px;
    left: calc(50% - 47px);
    top: calc(48% - 47px);
  }
  .transform-hint {
    font-size: 10px;
  }
}
body[data-editorial] .hero-art .swiss-badge {
  bottom: 40px;
}
/* The hero has one transform/shadow owner, including while hovered. */
body[data-editorial] .transform-bee .hero-bee,
body[data-editorial] .hero-art:hover .transform-bee .hero-bee {
 transform:rotate(-3deg);transform-origin:50% 50%;filter:drop-shadow(8px 18px 11px #192c482b);transition:none;
}
.transformation-cloud { mask-image:radial-gradient(ellipse 68% 65% at 50% 48%,#000 48%,transparent 98%); }
/* Stable content rasterization while scrolling: motion belongs to decorations. */
body[data-editorial] :is(.section-heading,.growing-platform,.audience,.signup-copy,.faq h2) { transform:none;opacity:1;filter:none; }
body[data-editorial] .bee-card:hover { transform:none; }
.transform-bee[aria-disabled="true"] { cursor:progress; }

/* Editorial composition: original styling informed by responsive gallery studies.
   Keep type stationary and preserve the Swiss Social palette and lettering. */
body[data-editorial] :is(h1, h2) { text-wrap: balance; }
body[data-editorial] .section-heading > p { line-height: 1.75; }
body[data-editorial] .bee-shelf {
  border-left: 0;
  column-gap: 24px;
  row-gap: 12px;
}
body[data-editorial] .bee-card {
  padding-inline: 0;
  padding-bottom: 24px;
}
body[data-editorial] .bee-card > span:not(.card-arrow) {
  font-size: 15px;
}
body[data-editorial] .bee-card .card-arrow { right: 0; }
body[data-editorial] .bee-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}
body[data-editorial] .growing-platform { padding-block: 36px; }
body[data-editorial] .audience { border-top: 3px solid var(--ink); }
body[data-editorial] .audience.professional { border-top-color: var(--red); }
body[data-editorial] .faq summary { padding-block: 24px; }
@media (min-width: 1000px) {
  body[data-editorial] .services { padding-block: 88px; }
  body[data-editorial] .section-heading { margin-bottom: 48px; }
  body[data-editorial] .section-heading h2 { font-size: 50px; }
  body[data-editorial] .bee-card:nth-child(even) { padding-top: 52px; }
  body[data-editorial] .audiences { gap: 40px; align-items: start; }
  body[data-editorial] .audience.professional { margin-top: 48px; }
  body[data-editorial] .signup-section { padding-block: 88px; }
}
@media (max-width: 600px) {
  body[data-editorial] .bee-shelf { column-gap: 16px; }
  body[data-editorial] .bee-card > span:not(.card-arrow) { font-size: 13px; }
}

/* Restore decorative cutout motion without moving text or fighting smoke transforms. */
@keyframes editorial-cutout-float {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  50% { translate: 0 -8px; rotate: 2deg; }
}
@media (prefers-reduced-motion: no-preference) {
  body[data-editorial].motion-ready:not(.motion-paused) .bee-stage {
    animation: editorial-cutout-float 5.6s ease-in-out infinite;
  }
  body[data-editorial].motion-ready:not(.motion-paused) .bee-card:nth-child(even) .bee-stage {
    animation-delay: -2.8s;
    animation-duration: 6.4s;
  }
  body[data-editorial].motion-ready:not(.motion-paused) .transform-bee {
    animation: editorial-cutout-float 6.8s ease-in-out infinite;
  }
}

/* Keep decorations in ordinary 2D layers. */
body[data-editorial] .bee-stage,
body[data-editorial] .transform-bee {
  backface-visibility: visible;
}

body[data-motion-owner="editorial"] :is(#join, #services) { scroll-margin-top: 24px; }
.header-preferences { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.theme-toggle { position:relative; display:flex; align-items:center; min-height:28px; border:0; padding:3px 0 3px 43px; background:none; color:var(--ink); font-size:11px; cursor:pointer; text-align:left; }
.theme-toggle:hover { color:var(--ink); }

.theme-toggle::before { content:""; position:absolute; left:0; top:50%; width:34px; height:20px; transform:translateY(-50%); border-radius:12px; background:var(--muted); opacity:.7; }
.theme-toggle::after { content:""; position:absolute; left:3px; top:50%; width:14px; height:14px; transform:translateY(-50%); border-radius:50%; background:var(--paper); box-shadow:0 1px 3px #0003; transition:left .16s ease; }
.theme-toggle[aria-checked="true"]::before { background:#adc6f4; opacity:1; }
.theme-toggle[aria-checked="true"]::after { left:17px; background:#192c48; }
.theme-toggle:focus-visible { outline:2px solid var(--ink); outline-offset:4px; border-radius:3px; }
@media (prefers-reduced-motion:reduce) { .theme-toggle::after { transition:none; } }