/* Shared company backdrop. Independent case websites and design labs do not
   load this file. Keep the existing script, node speed and navigation intact. */
body[data-site-typography="edition"] {
  background:
    radial-gradient(circle at 82% 4%, rgba(60, 208, 219, 0.22), transparent 31rem),
    radial-gradient(circle at 12% 42%, rgba(154, 225, 124, 0.15), transparent 34rem),
    radial-gradient(circle at 78% 82%, rgba(76, 119, 143, 0.18), transparent 38rem),
    linear-gradient(155deg, #d9e5e5 0%, #c6d7d9 46%, #d4e1df 100%);
}

body[data-site-typography="edition"]::before {
  background-image:
    linear-gradient(rgba(20, 55, 60, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 55, 60, 0.065) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.76) 68%, transparent 100%);
  pointer-events: none;
}

body[data-site-typography="edition"]::after {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.46), transparent 24rem),
    linear-gradient(112deg, transparent 0 46%, rgba(255, 255, 255, 0.18) 49%, transparent 52%);
  opacity: 0.82;
}

body[data-site-typography="edition"] #signal-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  pointer-events: none;
}

body[data-site-typography="edition"] .ambient { opacity: 0.2; }

/* The former opaque service hero hid the canvas. Its quiet translucent surface
   now reveals the same nodes without laying animation over the typography. */
body.service-detail-page[data-site-typography="edition"] .service-hero {
  background: linear-gradient(145deg, rgba(231, 240, 239, 0.24), rgba(218, 233, 234, 0.12));
  box-shadow: 0 20px 64px rgba(25, 57, 63, 0.06);
}

/* Retain the gallery's mouse-reactive kinetic grid as a translucent layer over
   the shared backdrop; photographs and carousel interactions are unchanged. */
body.webdesign-filmstrip-page[data-site-typography="edition"] :is(.webdesign-main, .web-round) {
  background: transparent;
}
body.webdesign-filmstrip-page[data-site-typography="edition"] .web-round {
  --round-ink: #17373e;
  --round-muted: #26464d;
  --round-line: rgba(31, 76, 85, 0.3);
}
body.webdesign-filmstrip-page[data-site-typography="edition"] .web-round .web-filmstrip-ripple { opacity: 0.24; }
body.webdesign-filmstrip-page[data-site-typography="edition"] .web-round .web-filmstrip-wash { background: transparent; }
body.webdesign-filmstrip-page[data-site-typography="edition"] .web-round-heading p { color: var(--round-muted); }
body.webdesign-filmstrip-page[data-site-typography="edition"] .web-round-summary p { color: var(--round-ink); }
body.webdesign-filmstrip-page[data-site-typography="edition"] .web-round-controls button { background: rgba(227, 239, 238, 0.7); }
body.webdesign-filmstrip-page[data-site-typography="edition"] .web-round-controls button:is(:hover, :focus-visible) { color: #fff; background: #17373e; }
body.webdesign-filmstrip-page[data-site-typography="edition"] .gallery-index { background: rgba(224, 237, 236, 0.45); }
body.webdesign-filmstrip-page[data-site-typography="edition"] .web-round-summary a:focus-visible,
body.webdesign-filmstrip-page[data-site-typography="edition"] .web-round-controls button:focus-visible { outline-color: #17373e; }

@media (max-width: 900px) {
  /* Keep the existing Safari-safe shop mode: no large animated canvas, blur or
     resize-driven animation restart. A small repeating SVG supplies static
     nodes at zero animation cost; script.js still suspends its canvas here. */
  body.shop-page[data-site-typography="edition"] #signal-canvas { display: none; }
  body.shop-page[data-site-typography="edition"]::after {
    z-index: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='640' viewBox='0 0 500 640'%3E%3Cpath d='M43 62 101 142 186 181 222 275 304 302M186 181 275 115 362 148 422 88M53 441 131 483 156 575 232 604M131 483 229 449 305 491 395 449 427 350' fill='none' stroke='%23147e8c' stroke-opacity='.2'/%3E%3Cg fill='%2326c9d3' fill-opacity='.56'%3E%3Ccircle cx='43' cy='62' r='2'/%3E%3Ccircle cx='101' cy='142' r='2.5'/%3E%3Ccircle cx='186' cy='181' r='2'/%3E%3Ccircle cx='222' cy='275' r='2'/%3E%3Ccircle cx='304' cy='302' r='2.5'/%3E%3Ccircle cx='275' cy='115' r='2'/%3E%3Ccircle cx='362' cy='148' r='2'/%3E%3Ccircle cx='422' cy='88' r='2.5'/%3E%3Ccircle cx='53' cy='441' r='2'/%3E%3Ccircle cx='131' cy='483' r='2.5'/%3E%3Ccircle cx='156' cy='575' r='2'/%3E%3Ccircle cx='232' cy='604' r='2'/%3E%3Ccircle cx='229' cy='449' r='2.5'/%3E%3Ccircle cx='305' cy='491' r='2'/%3E%3Ccircle cx='395' cy='449' r='2.5'/%3E%3Ccircle cx='427' cy='350' r='2'/%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.82;
  }
}