/* Hero / Manifiesto only. The world is a body-level sibling, never section-owned.
   Clip horizontally at the viewport; keep vertical continuity available. */
.ls-public{position:relative;isolation:isolate;overflow-x:clip;--hero-height:clamp(880px,calc(100svh - 108px),1200px);--hero-world-tail:160px;--hero-module-size:clamp(28px,2.6vw,45px);--hero-module-y:calc(253px + clamp(76px,9.6vw,176px) * 2.61)}
.ls-public main{overflow-x:clip;overflow-y:visible}
/* Infrastructure-only handoff: preserve Work layout/content, remove its opaque
   occluder so the independent world can fade through the empty transition. */
.ls-public:has(.hero-world) .work{background:transparent;z-index:3}
.hero-world{
  position:absolute;inset:0 0 auto;height:calc(var(--hero-bottom,calc(var(--hero-height) + 108px)) + var(--hero-world-tail));
  pointer-events:none;user-select:none;overflow-x:clip;overflow-y:visible;
}
/* No stacking context on world: its planes can straddle the HTML content plane. */
.hero-plane{position:absolute;inset:0;pointer-events:none}
.hero-plane-far{z-index:0}
.hero-plane-mass{z-index:1}
.hero-plane-lines,.hero-plane-trajectory{z-index:2}
.hero-plane-near{z-index:4}
.hero-reactive{position:absolute;inset:0;transition:transform 280ms cubic-bezier(.2,.65,.3,1)}
.hero-violet-field{
  position:absolute;left:-31%;top:43%;width:73%;height:70%;
  background:radial-gradient(ellipse at 32% 58%,#5332ffb0 0%,#594fff75 25%,transparent 65%),
    radial-gradient(ellipse at 61% 66%,#7475ff55,transparent 63%),
    radial-gradient(ellipse at 26% 30%,#5332ff25,transparent 62%);
  transform:rotate(-17deg);mask-image:radial-gradient(closest-side,#000 42%,transparent 100%);
}
.hero-secondary-field{
  position:absolute;width:51%;height:37%;right:-21%;bottom:8%;
  background:radial-gradient(ellipse at 75% 65%,#6963ff60,transparent 69%);
  transform:rotate(-25deg);
}
.hero-organic-shape{
  --organic-width:min(55vw,900px);
  position:absolute;left:calc(100% - var(--organic-width) * .966);top:calc(20px - var(--organic-width) * .19);width:var(--organic-width);height:auto;max-width:none;
  /* Identical registration at rest. Both silhouettes come from the supplied SVG. */
  transform:rotate(20deg);transform-origin:50% 50%;
}
.hero-path-system{
  position:absolute;inset:0;width:100%;height:calc((var(--hero-module-y) + var(--hero-module-size) * .5) * 2);
  /* Anchor sampled on the path's second cubic: P0 782,720; reflected control
     1154,1030; control 1280,900; P3 1410,1320. One parameter, no free x/y offsets. */
  --node-t:0;--node-u:calc(1 - var(--node-t));
  --node-x:calc(782 * var(--node-u) * var(--node-u) * var(--node-u) + 3 * 1154 * var(--node-u) * var(--node-u) * var(--node-t) + 3 * 1280 * var(--node-u) * var(--node-t) * var(--node-t) + 1410 * var(--node-t) * var(--node-t) * var(--node-t));
  --node-y:calc(720 * var(--node-u) * var(--node-u) * var(--node-u) + 3 * 1030 * var(--node-u) * var(--node-u) * var(--node-t) + 3 * 900 * var(--node-u) * var(--node-t) * var(--node-t) + 1320 * var(--node-t) * var(--node-t) * var(--node-t));
}
.hero-trajectory{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  fill:none;stroke:#5332ff;stroke-width:.85;opacity:.72;
  /* Fade is an explicit handoff, beyond the Hero, not the section boundary. */
  mask-image:linear-gradient(#000 0 86%,transparent 99%);
}
.hero-cellular{
  --cellular-size:min(34vw,510px);
  position:absolute;left:calc(var(--cellular-size) * -.662);top:calc(var(--hero-bottom,calc(var(--hero-height) + 108px)) * .49);
  width:var(--cellular-size);height:auto;max-width:none;
  /* Preserve the approved irregular silhouette and pattern, without deformation. */
}
.hero-yellow-module{
  /* Exact path point in the 1440-square viewBox, in every viewport.
     Shared affine coordinates/depth; HTML keeps the square undistorted. */
  position:absolute;width:var(--hero-module-size);aspect-ratio:1;left:calc(var(--node-x) / 1440 * 100%);top:calc(var(--node-y) / 1440 * 100%);
  background:linear-gradient(135deg,#ffd642,#ffcb36);transform:translate(-50%,-50%) rotate(-17deg);
}
/* Native content is stationary. Path and node share one ambient wrapper. */
.ls-public .manifest{
  min-height:var(--hero-height);padding:95px var(--gutter) 110px;
  isolation:auto;z-index:3;background:transparent;
}
.ls-public .manifest h1{
  margin-left:9%;max-width:none;width:82%;position:relative;
  font-size:clamp(76px,9.6vw,176px);line-height:.87;letter-spacing:-.07em;z-index:auto;
}
.ls-public .manifest h1>span:nth-child(2){margin-left:4%}
.ls-public .manifest h1>span:nth-child(3){margin-left:12%}
.ls-public .manifest h1>.manifest-counter{
  position:absolute;left:65%;top:107%;margin:0;font-size:clamp(38px,3.55vw,64px);
  line-height:.97;letter-spacing:-.055em;white-space:nowrap;
}
.ls-public .manifest-support{margin:42px 0 0 9%;width:48%;z-index:auto}
.ls-public .manifest-support>p{font-size:clamp(17px,1.4vw,21px);line-height:1.4;max-width:385px}
.ls-public .manifest .public-actions{gap:25px;margin-top:28px}
.ls-public .manifest .edge-note{right:var(--gutter);bottom:95px;font-size:12px}
/* Editorial coordinate family; scene placement extended in visual-refinement-04.css. */
.scene-coordinate{position:absolute;left:var(--gutter);top:100px;display:flex;align-items:center;flex-direction:column;gap:13px;width:24px;color:#615e5a}
.coordinate-number{font-size:12px;line-height:1}
.coordinate-rule{height:1px;width:22px;background:currentColor}
.coordinate-name{writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase;font-size:12px;letter-spacing:.06em;line-height:1.1}
@media(min-width:1700px){
  .ls-public{--hero-height:clamp(1000px,calc(100svh - 108px),1300px)}
  .ls-public .manifest{padding-top:95px}
  .ls-public .manifest h1{width:81%}
  .hero-cellular{top:calc(var(--hero-bottom,calc(var(--hero-height) + 108px)) * .54)}
}
@media(min-width:761px) and (max-width:1100px){
  .ls-public{--hero-height:760px}
  .ls-public .manifest{padding-top:75px}
  .ls-public .manifest h1{font-size:10.2vw}
  .ls-public .manifest h1>.manifest-counter{left:58%;top:119%;font-size:40px}
  .ls-public .manifest-support{margin-top:40px;width:44%}
  .ls-public .manifest .public-actions{flex-direction:column;align-items:start;gap:14px}
  .hero-organic-shape{left:45%;top:-4vw;width:58vw}
  /* Advance 30% along that same cubic to clear the tablet counter throughout
     the intermediate width range, rather than guessing a detached x/y offset.
     The curve, HTML and all other layers retain their approved registration. */
  .hero-path-system{height:100%;--node-t:.3}
  .hero-cellular{left:-27vw;top:calc(var(--hero-bottom,calc(var(--hero-height) + 108px)) * .57)}
}
@media(max-width:760px){
  .ls-public{--hero-height:690px;--hero-world-tail:110px;--hero-module-size:27px}
  .hero-world{height:calc(var(--hero-bottom,calc(var(--hero-height) + 90px)) + var(--hero-world-tail))}
  .ls-public .manifest{padding:55px var(--gutter) 115px;min-height:var(--hero-height)}
  .ls-public .manifest h1{width:100%;font-size:clamp(54px,14.4vw,104px);line-height:.91;margin:0;letter-spacing:-.07em}
  .ls-public .manifest h1>span:nth-child(2){margin-left:3%}
  .ls-public .manifest h1>span:nth-child(3){margin-left:10%}
  .ls-public .manifest h1>.manifest-counter{position:static;margin:29px 0 0 37%;font-size:clamp(33px,8.9vw,54px);white-space:nowrap}
  .ls-public .manifest-support{margin:31px 0 0;width:100%}
  .ls-public .manifest-support>p{font-size:17px;max-width:285px}
  .ls-public .manifest .public-actions{margin-top:24px;gap:10px;flex-direction:column;align-items:start}
  .ls-public .manifest .public-button{min-height:48px}
  .ls-public .manifest .edge-note{display:none}
  .scene-coordinate{left:auto;right:var(--gutter);top:24px;width:18px;gap:9px}
  .coordinate-name,.coordinate-number{font-size:12px}
  .coordinate-rule{width:16px}
  .hero-organic-shape{left:66%;top:15px;width:100vw;transform:rotate(20deg)}
  .hero-violet-field{width:115%;height:48%;left:-75%;top:47%;transform:rotate(15deg)}
  .hero-secondary-field{width:83%;height:31%;right:-63%;bottom:10%}
  .hero-path-system{left:15%;width:120%;height:100%;transform:rotate(10deg)}
  .hero-trajectory{opacity:.5}
  .hero-cellular{
    width:220px;left:-200px;top:calc(var(--hero-bottom,calc(var(--hero-height) + 90px)) - 135px);
  }
  .hero-reactive{transition:none}
}
@media(max-width:360px){
  .ls-public{--hero-height:670px}
  .ls-public .manifest h1{font-size:14.8vw}
  .ls-public .manifest h1>.manifest-counter{font-size:32px;margin-left:33%}
  .ls-public .manifest-support>p{font-size:16px;max-width:260px}
  .hero-organic-shape{left:69%;top:8px;width:106vw}
}
@media(prefers-reduced-motion:reduce){
  .hero-reactive{transform:none!important;transition:none!important}
}