/* Completion 05: compositional overrides only. Refinement 04 remains the
   interaction/coordinate contract; no Hero, shared UI or business selectors. */

/* 03 — A scene-sized field, not six drawings cut by the same slot. The broad
   section edge is the only shared desktop crop. Every silhouette has its own
   relationship to the title, gutter and stable index. */
.capabilities{overflow:clip}
.capabilities .capability-matter{clip-path:none}
.capabilities .capability-intro{z-index:2}
.capabilities .capability-art[data-capability-art="01"]{width:94%;left:9%;top:-11%}
.capabilities .capability-art[data-capability-art="02"]{width:142%;left:-38%;top:-7%}
.capabilities .capability-art[data-capability-art="03"]{width:125%;left:-48%;top:4%}
.capabilities .capability-art[data-capability-art="04"]{
  width:128%;left:-36%;top:-42%;
  mask-image:radial-gradient(ellipse at center,#000 24%,#000b 51%,transparent 72%);
}
.capabilities .capability-art[data-capability-art="04"].is-active{opacity:.74}
.capabilities .capability-art[data-capability-art="05"]{width:76%;left:29%;top:26%}
.capabilities .capability-art[data-capability-art="06"]{width:147%;left:-72%;top:-2%}

/* 04 — Each complete door already is a native anchor. Reinforce it without
   changing the grid, copy, prices, hit area or hierarchy of Production. */
.begin .entry{transition:border-color 150ms ease-out}
.begin .entry:focus-visible{outline:none;border-top-color:var(--ink)}
.begin .entry-price>span{transition:transform 160ms ease-out}
.begin .entry:hover .entry-price>span{transform:none}
.begin .entry:focus-visible .entry-price>span{transform:translate(2px,-2px)}
@media(hover:hover) and (pointer:fine){
  .begin .entry:hover{border-top-color:var(--ink)}
  .begin .entry:hover .entry-price>span{transform:translate(2px,-2px)}
}

/* 05 — Open matter resolves into a curved structural plane and a fixed node.
   Deliberately static: no pointer handler, timeline, scroll parallax or loop. */
.continuity{background:#302bea;min-height:620px}
.continuity .continuity-field{z-index:0;user-select:none}
.continuity .continuity-end{z-index:2;top:auto;bottom:50px;left:13%;right:auto}
.continuity .continuity-wave{
  position:absolute;left:calc(822 / 1440 * 100%);top:calc(252 / 620 * 100%);width:clamp(135px,11vw,220px);height:auto;max-width:none;
  opacity:.24;transform:translate(-100%,0) rotate(70deg);transform-origin:100% 0;pointer-events:none;
}
.continuity .continuity-structure{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.continuity .continuity-structure>svg{position:absolute;inset:0;overflow:visible}
.continuity .continuity-plane-svg{z-index:0}
.continuity .continuity-route-svg{z-index:2}
.continuity .continuity-cell{
  position:absolute;left:60%;top:10%;width:min(62vw,1020px);aspect-ratio:1;
  background:#ff5962;border-radius:50%;overflow:clip;z-index:1;
}
.continuity .continuity-cell img{position:absolute;width:94%;height:auto;max-width:none;left:7%;top:3%}
.continuity .continuity-cell::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,transparent 3%,#3925df30 27%,#3925df99 61%,#302bea 100%);
}
.continuity .continuity-route{fill:none;stroke:#d9ddff;stroke-width:1.1;opacity:.45;vector-effect:non-scaling-stroke}
.continuity .continuity-node{position:absolute;left:calc(822 / 1440 * 100%);top:calc(252 / 620 * 100%);width:clamp(24px,2.5vw,38px);aspect-ratio:1;transform:translate(-50%,-50%);background:#ffd642;border-radius:50%;z-index:3}
.continuity .public-button:focus-visible{outline:2px solid white;outline-offset:7px}

@media(min-width:1700px){
  .continuity{min-height:700px}
  .continuity .continuity-cell{left:59%;top:8%;width:min(58vw,1200px)}
}
@media(min-width:761px) and (max-width:1100px){
  .capabilities .capability-art[data-capability-art="01"]{width:90%;left:8%;top:-8%}
  .capabilities .capability-art[data-capability-art="02"]{width:142%;left:-38%;top:1%}
  .capabilities .capability-art[data-capability-art="03"]{width:134%;left:-55%;top:12%}
  .capabilities .capability-art[data-capability-art="04"]{width:138%;left:-45%;top:-12%}
  .capabilities .capability-art[data-capability-art="05"]{width:74%;left:26%;top:30%}
  .capabilities .capability-art[data-capability-art="06"]{width:159%;left:-78%;top:18%}
  .continuity .continuity-cell{left:64%;top:30%;width:82vw}
  .continuity .continuity-wave{width:16vw}
  .continuity .continuity-structure{left:9%;top:14%;width:110%;height:90%}
}
@media(max-width:760px){
  /* Keep the exact sticky height and reading thresholds implemented in 04.
     Individual crops change; the native intersection/focus mechanism does not. */
  .capabilities .capability-matter{clip-path:inset(0)}
  .capabilities .capability-art[data-capability-art="01"]{width:74%;left:22%;top:-36%}
  .capabilities .capability-art[data-capability-art="02"]{width:123%;left:-15%;top:-26%}
  .capabilities .capability-art[data-capability-art="03"]{width:96%;left:-35%;top:-34%}
  .capabilities .capability-art[data-capability-art="04"]{width:108%;left:20%;top:-58%}
  .capabilities .capability-art[data-capability-art="05"]{width:54%;left:35%;top:-15%}
  .capabilities .capability-art[data-capability-art="06"]{width:123%;left:-48%;top:-38%}
  .continuity{min-height:810px;padding-bottom:370px}
  .continuity .continuity-cell{left:25%;top:60%;width:132vw}
  .continuity .continuity-wave{width:34vw}
  .continuity .continuity-structure{left:-96%;top:48%;width:210%;height:64%}
  .continuity .continuity-plane-svg{mask-image:linear-gradient(transparent,#000 18%)}
  .continuity .continuity-end{bottom:auto;top:390px;left:var(--gutter);right:auto}
}
@media(max-width:360px){
  .continuity{min-height:810px}
  .continuity .continuity-cell{left:24%;top:64%;width:155vw}
  .continuity .continuity-wave{width:38vw}
}
@media(prefers-reduced-motion:reduce){
  .begin .entry,.begin .entry-price>span{transition:none}
  .begin .entry:is(:hover,:focus-visible) .entry-price>span{transform:none}
}

/* Final polish — only the copy's upper safe edge is masked. The approved
   per-piece sizes/positions and the shared interaction geometry do not change. */
@media(min-width:1101px){
  .capabilities .capability-art[data-capability-art="01"]{
    mask-image:linear-gradient(to bottom,transparent max(0px,calc(clamp(310px,30vw,490px) * .11 - 24px)),#000 max(0px,calc(clamp(310px,30vw,490px) * .11 - 8px)));
  }
  .capabilities .capability-art[data-capability-art="02"]{
    mask-image:linear-gradient(to bottom,transparent max(0px,calc(clamp(310px,30vw,490px) * .07 - 24px)),#000 max(0px,calc(clamp(310px,30vw,490px) * .07 - 8px)));
  }
  .capabilities .capability-art[data-capability-art="04"]{
    mask-image:radial-gradient(ellipse at center,#000 24%,#000b 51%,transparent 72%),linear-gradient(to bottom,transparent calc(clamp(310px,30vw,490px) * .42 - 24px),#000 calc(clamp(310px,30vw,490px) * .42 + 120px));
    mask-composite:intersect;
  }
}
@media(min-width:761px) and (max-width:1100px){
  .capabilities .capability-art[data-capability-art="04"]{
    mask-image:radial-gradient(ellipse at center,#000 24%,#000b 51%,transparent 72%),linear-gradient(to bottom,transparent 20px,#000 112px);
    mask-composite:intersect;
  }
}

/* The node occupies the existing margin, never a new column or line. Keyboard
   focus is expressed by a stronger rule + underlined title, not a card box. */
.begin .entry{position:relative;--entry-node:#ff5962;--entry-node-edge:#ff5962}
.begin .entry:nth-child(2){--entry-node:#5336ff;--entry-node-edge:#5336ff}
.begin .entry:nth-child(3){--entry-node:#dedcf2;--entry-node-edge:#747287}
.begin .entry:nth-child(4){--entry-node:#ffd642;--entry-node-edge:#9f810b}
.begin .entry h3{position:relative}
.begin .entry h3::before{
  content:"";position:absolute;left:-17px;top:.45em;width:8px;height:8px;box-sizing:border-box;
  border:1px solid var(--entry-node-edge);border-radius:50%;background:var(--entry-node);
  transition:transform 160ms ease-out;pointer-events:none;
}
.begin .entry::after{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--ink);opacity:0;pointer-events:none}
.begin .entry:focus-visible::after{opacity:1}
.begin .entry:focus-visible h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.begin .entry:focus-visible h3::before{transform:scale(1.125)}
@media(hover:hover) and (pointer:fine){
  .begin .entry:hover h3::before{transform:scale(1.125)}
}
@media(forced-colors:active){
  .begin .entry:focus-visible{outline:2px solid Highlight;outline-offset:5px}
  .begin .entry h3::before{border-color:CanvasText}
}
@media(prefers-reduced-motion:reduce){
  .begin .entry h3::before{transition:none}
  .begin .entry:is(:hover,:focus-visible) h3::before{transform:none}
}

/* Mobile only: bring the existing pattern a little further into the crop.
   Sphere, plane, route, node, copy and desktop/tablet remain unchanged. */
@media(max-width:760px){
  .continuity .continuity-cell img{left:3%;top:1%}
  .continuity .continuity-cell::after{
    background:linear-gradient(100deg,transparent 3%,#3925df2b 27%,#3925df88 61%,#302bea 100%);
  }
}