/* Finished content first. The scroll module adds the cinematic stages on larger screens. */
:root{--ph-header-h:4.25rem;--ph-iso-lift:-50px}
.ph-scene{padding:clamp(3.5rem,9vw,7rem) var(--ph-gutter);background:radial-gradient(55% 35% at 50% 0,#00E5FF10,transparent 70%)}
.ph-stage{position:relative;max-width:var(--ph-max);margin:0 auto}
.ph-scene-head h2{font-size:clamp(1.6rem,4.6vw,2.75rem);letter-spacing:.02em;max-width:46rem}
.ph-scene-head h2 .sig{color:var(--ph-color-signal)}
.ph-sn{font:500 .75rem var(--ph-font-mono);letter-spacing:var(--ph-tracking-ui);color:var(--ph-color-attention)}
.ph-foot{margin:1.25rem 0 0;font:400 .8rem/1.5 var(--ph-font-body);color:var(--ph-color-ink-2)}
.ph-iso{display:none}
.ph-stack-grid{display:grid;gap:1.5rem;margin-top:1.5rem;align-items:center}
.ph-slabs{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ph-slab{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n b" "n p";column-gap:.9rem;padding:.9rem 1.1rem;background:var(--ph-color-panel);border:1px solid var(--ph-color-line-medium);border-radius:var(--ph-radius-card);transition:border-color var(--ph-motion-duration) var(--ph-motion-ease),box-shadow var(--ph-motion-duration) var(--ph-motion-ease)}
.ph-slab .ph-sn{grid-area:n;align-self:center}
.ph-slab :is(b,.ph-slab-title){grid-area:b;font:600 1.05rem var(--ph-font-display)}
.ph-slab p{grid-area:p;margin:0;color:var(--ph-color-ink-2)}
.ph-site{border-color:var(--ph-color-signal)}
.ph-site :is(b,.ph-slab-title){color:var(--ph-color-signal)}
.ph-big{font:600 clamp(5rem,18vw,9rem)/.9 var(--ph-font-display);color:var(--ph-color-arcade-gold)}

/* Shared illustration geometry; desktop JS and mobile CSS drive the same elements. */
.ph-iso-world{position:absolute;left:0;right:0;top:0;aspect-ratio:16/10;transform-style:preserve-3d;transform:translateY(var(--iy,0px)) rotateX(var(--rx,0deg)) rotateZ(var(--rz,0deg)) scale(var(--sc,1));transform-origin:50% 50%;will-change:transform}
.ph-iplate{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(var(--z,0px))}
.ph-siteplate{overflow:hidden;background:var(--ph-color-surface);border:1px solid var(--ph-color-line-strong);box-shadow:0 0 0 1px #00E5FF22,0 0 18px #00E5FF26}
.ph-siteplate img,.ph-siteplate iframe{position:absolute;left:0;top:0;width:1280px;height:800px;max-width:none;border:0;transform-origin:0 0;transform:scale(var(--fs,.3));pointer-events:none}
.ph-siteplate iframe{opacity:0;transition:opacity .45s var(--ph-motion-ease)}
.ph-siteplate iframe.is-ready{opacity:1}
.ph-layerplate{display:flex;align-items:flex-end;opacity:0}
.ph-layerplate span{padding:.35rem .6rem;font:500 .62rem var(--ph-font-mono);letter-spacing:var(--ph-tracking-ui);text-transform:uppercase;color:var(--ph-color-signal)}
.ph-recog path{vector-effect:non-scaling-stroke}
.ph-recog .o{stroke:var(--ph-color-arcade-red);stroke-width:2.5px}
.ph-recog .g{stroke:var(--ph-color-arcade-gold);stroke-width:1.5px}
.ph-sc-bar{display:flex;gap:5px}
.ph-sc-bar .ph-mark{width:8px;height:8px;border-radius:50%;background:var(--ph-color-line-strong)}
.ph-sc-hero{background:linear-gradient(90deg,#00E5FF26,transparent 70%),var(--ph-color-panel);border:1px solid var(--ph-color-line-weak)}
.ph-sc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ph-sc-cols span{background:var(--ph-color-panel);border:1px solid var(--ph-color-line-weak)}
.ph-sc-lines{display:grid;gap:6px}
.ph-sc-lines .ph-mark{height:6px;background:var(--ph-color-line-medium)}
.ph-sc-lines .ph-mark:nth-child(1){width:90%}.ph-sc-lines .ph-mark:nth-child(2){width:70%}.ph-sc-lines .ph-mark:nth-child(3){width:55%}
.ph-corrupt{position:absolute;inset:0;pointer-events:none;transform:translateY(var(--q,100%));background:linear-gradient(90deg,transparent 6%,#FF2E8866 6% 24%,transparent 24% 61%,#00E5FF55 61% 70%,transparent 70%) 0 18%/100% 7px no-repeat,linear-gradient(90deg,#00E5FF44 0 30%,transparent 30% 72%,#FF2E8866 72% 90%,transparent 90%) 0 46%/100% 11px no-repeat,linear-gradient(90deg,transparent 12%,#FF2E884D 12% 40%,transparent 40%) 0 71%/100% 5px no-repeat,repeating-linear-gradient(0deg,#FF2E8826 0 2px,transparent 2px 5px),#070A10B3}
.ph-sweep2{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--ph-color-signal),transparent);box-shadow:0 0 12px #00E5FF8C,0 0 24px #00E5FF38;will-change:transform}
.ph-layerplate[data-layer="0"],.ph-slab:nth-child(1){--depth:1;--lc:var(--ph-color-signal)}
.ph-layerplate[data-layer="1"],.ph-slab:nth-child(2){--depth:2;--lc:var(--ph-color-layer)}
.ph-layerplate[data-layer="2"],.ph-slab:nth-child(3){--depth:3;--lc:var(--ph-color-attention)}
.ph-layerplate[data-layer="3"],.ph-slab:nth-child(4){--depth:4;--lc:var(--ph-color-warning)}
.ph-layerplate[data-layer="4"],.ph-slab:nth-child(5){--depth:5;--lc:var(--ph-color-success)}
.ph-layerplate{border:1px solid var(--lc);box-shadow:0 0 8px color-mix(in srgb,var(--lc) 38%,transparent),inset 0 0 26px color-mix(in srgb,var(--lc) 12%,transparent);background:linear-gradient(var(--ph-color-line-weak) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,var(--ph-color-line-weak) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(135deg,color-mix(in srgb,var(--lc) 14%,transparent),#0D131Cd9)}
.ph-layerplate span,.ph-slab .ph-sn{color:var(--lc)}
.ph-slab:nth-child(2) .ph-sn,.ph-layerplate[data-layer="1"] span{color:color-mix(in srgb,var(--ph-color-layer) 55%,var(--ph-color-ink))}

/* ---- Scan panel ---- */
.ph-scan-out{width:min(40rem,100%);margin-top:1rem;text-align:left;background:var(--ph-color-inset);border:1px solid var(--ph-color-line-medium);border-radius:var(--ph-radius-card);font:400 .82rem/1.55 var(--ph-font-mono);color:var(--ph-color-ink-2);overflow:hidden}
.ph-scan-out[hidden]{display:none}
.ph-scan-out .bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;border-bottom:1px solid var(--ph-color-line-medium);background:var(--ph-color-panel);font-size:.72rem;letter-spacing:.06em;color:var(--ph-color-ink-2)}
.ph-scan-out .bar i{width:8px;height:8px;border-radius:50%;background:var(--ph-color-line-strong)}
.ph-scan-out .bar span{margin-left:.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-scan-out .body{padding:.5rem .8rem .8rem}
.ph-scan-out .l{display:flex;gap:.75rem;padding:.12rem 0 .12rem .6rem;border-left:2px solid var(--ph-color-line-medium)}
.ph-scan-out .l.pass{border-left-color:var(--ph-color-success)}
.ph-scan-out .l.warn{border-left-color:var(--ph-color-warning)}
.ph-scan-out .l.fail{border-left-color:var(--ph-color-danger)}
.ph-scan-out .t{flex:none;width:3.4rem;font-weight:500}
.ph-scan-out .t.pass{color:var(--ph-color-success)}
.ph-scan-out .t.warn{color:var(--ph-color-warning)}
.ph-scan-out .t.fail{color:var(--ph-color-danger)}
.ph-scan-out .t.info{color:var(--ph-color-ink-2)}
.ph-scan-out .m{color:var(--ph-color-ink);min-width:0;overflow-wrap:anywhere}
.ph-scan-out .sum{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:.75rem;padding-top:.9rem;border-top:1px solid var(--ph-color-line-medium)}
.ph-scan-out .stat{display:grid;line-height:1}
.ph-scan-out .stat b{font:600 2.1rem/1 var(--ph-font-display)}
.ph-scan-out .stat small{margin-top:.25rem;font-size:.66rem;letter-spacing:var(--ph-tracking-ui);text-transform:uppercase;color:var(--ph-color-ink-2)}
.ph-scan-out .stat.pass b{color:var(--ph-color-success)}
.ph-scan-out .stat.warn b{color:var(--ph-color-warning)}
.ph-scan-out .stat.fail b{color:var(--ph-color-danger)}
.ph-scan-out .sum .ph-btn{margin-left:auto}
.ph-scan-out .fine{margin-top:.6rem;color:var(--ph-color-ink-2);font-size:.72rem}


@media (min-width:900px) and (min-height:700px) and (prefers-reduced-motion:no-preference){
 .ph-scene.is-scrubbed{height:var(--ph-scene-span,300svh);padding:0}
 .ph-scene.is-scrubbed .ph-stage{position:sticky;top:var(--ph-header-h);height:calc(100svh - var(--ph-header-h));display:flex;flex-direction:column;justify-content:center;gap:.9rem;padding:1rem var(--ph-gutter);overflow:hidden}
 .is-scrubbed .ph-scene-head h2{font-size:clamp(1.4rem,3vw,2rem)}
 .is-scrubbed .ph-scene-head .ph-eyebrow{margin-bottom:.5rem}
 .is-scrubbed .ph-foot{margin:.6rem 0 0}
/* Stack: your site tilts to isometric and the layers drop beneath it */
@media (min-width:900px){.ph-stack-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem)}}
.is-scrubbed .ph-stack-grid{margin-top:.25rem}
.is-scrubbed .ph-iso{display:block;position:relative;width:100%;max-width:36rem;margin:0 auto;aspect-ratio:16/13.5;perspective:1500px}
.is-scrubbed .ph-iso-world{top:2rem}
.is-scrubbed .ph-slab{opacity:1;padding:.55rem .8rem}
.is-scrubbed .ph-slab.on{opacity:1;border-color:var(--ph-color-line-strong)}
.is-scrubbed .ph-slab.on.is-now{border-color:var(--ph-color-signal);box-shadow:0 0 4px #00E5FF8C,inset 0 0 0 1px #00E5FF38}
.is-scrubbed .ph-slabs{gap:.4rem}
}

/* Through-line (home): spine and taps are created by the scroll stack (web/tools/scroll/entry.js, trace()). */
.ph-trace-host{position:relative}
.ph-trace,.ph-tap{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.ph-trace-line{fill:none;stroke:var(--ph-color-signal);stroke-width:1.5}
.ph-trace-dot{fill:var(--ph-color-signal);transition:opacity var(--ph-motion-duration) var(--ph-motion-ease)}
.ph-traced .ph-rail{display:none}
.ph-traced .ph-band{border-top-color:transparent}
.ph-trace-host .ph-iso{outline:1px solid transparent;outline-offset:6px}
.ph-trace-host .is-tapped{outline-color:var(--ph-color-signal)}
@media (min-width:900px){.ph-traced .ph-scene.is-scrubbed .ph-stage{overflow-x:visible;overflow-y:clip}}

/* Responsibilities: the resolving panel from the original homepage, with the revised service copy. */
.ph-care-board{padding:0;list-style:none}
.ph-care-number,.ph-care-pips,.ph-care-cipher{display:none}
.ph-care h3{position:relative}
.ph-care .ph-plan-note{margin:.5rem 0}
.ph-care .ph-scene-head p:last-child{margin-bottom:0}

/* The fleet wave illustrates the historical incident, not a live feed or a site count. */
/* Fixed-size particles fill this native GB backdrop; JS adds the flowing canvas. */
.ph-incident{--ph-dot-size:4px;--ph-dot-pitch:14px;padding:0}
.ph-incident .ph-stage{isolation:isolate;max-width:none;min-height:calc(100svh - var(--ph-header-h));display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.25rem;padding:clamp(3.5rem,8svh,6rem) max(var(--ph-gutter),calc((100% - var(--ph-max))/2));overflow:hidden}
.ph-incident .ph-stage>:not(.ph-fleet-board):not(.ph-tap){position:relative;z-index:1;max-width:46rem}
.ph-incident .ph-scene-head{margin-bottom:clamp(3rem,12svh,7rem)}
.ph-incident .ph-scene-head :is(h2,p){width:fit-content}
.ph-incident .ph-scene-head h2{font-size:clamp(1.8rem,4vw,3.5rem)}
.ph-fleet-board{position:absolute;inset:0;width:100%;height:100%;margin:0;max-width:none;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb,var(--ph-color-success) 55%,transparent) calc(var(--ph-dot-size)/2),transparent calc(var(--ph-dot-size)/2 + 1px)) 7px 7px/var(--ph-dot-pitch) var(--ph-dot-pitch)}
.ph-fleet-board.has-field{background:none}
.ph-fleet-canvas{display:block;width:100%;height:100%}
.ph-incident:not(.has-field) .ph-stage>:not(.ph-fleet-board):not(.ph-tap){background:var(--ph-color-canvas);box-shadow:0 0 18px 18px var(--ph-color-canvas)}
.ph-recog{display:none;position:absolute;top:-5%;left:0;height:108%;width:auto;transform:translateX(var(--rx,-200px));opacity:var(--ra,0);will-change:transform;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ph-color-arcade-red) 75%,transparent))}
.ph-incident.has-field .ph-recog{display:block;mask-mode:luminance;mask-repeat:no-repeat}
.ph-fleet-hud{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.25rem;width:100%}
 .ph-flag{width:31ch;flex-shrink:0;padding:.25rem .65rem;font:500 .7rem var(--ph-font-mono);letter-spacing:var(--ph-tracking-ui);text-transform:uppercase;color:var(--ph-color-canvas);background:var(--ph-color-success)}
 .ph-flag[data-state=disclosed]{background:var(--ph-color-attention)}
 .ph-flag[data-state=flagged]{background:var(--ph-color-signal)}
 .ph-flag[data-state=updating]{background:var(--ph-color-warning)}
 .ph-fclock{font:600 clamp(1.4rem,3vw,2rem)/1 var(--ph-font-mono);color:var(--ph-color-arcade-gold)}
 .ph-fpct{width:13ch;flex-shrink:0;font:500 .75rem var(--ph-font-mono);color:var(--ph-color-ink-2)}

.ph-incident .ph-experience{margin:0}
.ph-incident .ph-scene-head>p:last-child{margin-bottom:0;max-width:46rem}

/* Recovery: finished backup timeline and factual copy on small or static views. */
.ph-restore-grid{display:grid;gap:1.5rem;align-items:center;margin-top:1rem}
.ph-sitecard{display:none;position:relative;gap:8px;grid-template-rows:auto 1.4fr 1fr auto;aspect-ratio:4/3;width:min(100%,24rem);padding:10px;margin:0 auto;overflow:hidden;background:var(--ph-color-surface);border:1px solid var(--ph-color-line-medium);border-radius:var(--ph-radius-card)}
.ph-ticks{display:grid;grid-template-columns:repeat(30,1fr);gap:3px;height:3rem;align-items:end;margin:0 0 1.25rem}
.ph-ticks .ph-mark{height:var(--h);background:var(--ph-color-line-medium);border-radius:1px}
.ph-ticks .ph-mark.on{background:var(--ph-color-layer);box-shadow:0 0 4px color-mix(in srgb,var(--ph-color-layer) 60%,transparent)}
.ph-clockrow{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
.ph-clock{min-width:7ch;font:600 clamp(2.2rem,5vw,4rem)/1 var(--ph-font-mono);color:var(--ph-color-arcade-gold)}
.ph-restorebar{position:relative;flex:1 1 8rem;height:8px;overflow:hidden;background:var(--ph-color-line-medium)}
.ph-restorebar .ph-bar-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--ph-color-signal),var(--ph-color-success));transform-origin:left}
.ph-lines{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.75rem;color:var(--ph-color-ink-2)}
.ph-lines li{padding-left:1rem;border-left:2px solid var(--ph-color-line-medium)}

@media (min-width:900px) and (min-height:700px) and (prefers-reduced-motion:no-preference){
 .ph-care{--ph-scene-span:380svh}
 .ph-incident{--ph-scene-span:280svh}
 .ph-recovery{--ph-scene-span:260svh}
 .is-scrubbed .ph-stage::before,.is-scrubbed .ph-stage::after{content:"";position:absolute;width:26px;height:26px;border:1px solid var(--ph-color-signal);opacity:.55;pointer-events:none}
 .is-scrubbed .ph-stage::before{top:.6rem;left:calc(var(--ph-gutter) - .5rem);border-right:0;border-bottom:0;border-color:var(--ph-color-arcade-gold)}
 .is-scrubbed .ph-stage::after{bottom:.6rem;right:calc(var(--ph-gutter) - .5rem);border-left:0;border-top:0}
 .is-scrubbed .ph-scene-head .ph-eyebrow::before{background:var(--ph-color-arcade-gold);box-shadow:0 0 8px color-mix(in srgb,var(--ph-color-arcade-gold) 60%,transparent)}

 .ph-care.is-scrubbed .ph-care-board{display:grid;grid-template-columns:1fr;gap:0;margin:.25rem 0;min-height:19rem;border:1px solid var(--ph-color-line-strong);border-radius:var(--ph-radius-card);background:linear-gradient(180deg,#00E5FF0C,transparent 60%),var(--ph-color-surface)}
 .ph-care.is-scrubbed .ph-care-item{grid-area:1/1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:2rem 3rem;border:0;opacity:var(--care-alpha,1);transform:translateY(var(--care-y,0px))}
 .ph-care.is-scrubbed .ph-care-number{display:block;position:absolute;right:1.5rem;bottom:1rem;font:600 8rem/.9 var(--ph-font-display);color:var(--ph-color-attention);opacity:.12;pointer-events:none}
 .ph-care.is-scrubbed h3{display:grid;margin:0;max-width:46rem;font:600 clamp(2.25rem,5vw,4.25rem)/1.12 var(--ph-font-display);color:var(--ph-color-signal)}
 .ph-care.is-scrubbed h3>*{grid-area:1/1}
 .ph-care.is-scrubbed .ph-care-title{opacity:0}
 .ph-care.is-scrubbed .ph-care-cipher{display:block;color:var(--ph-color-warning);pointer-events:none}
 .ph-care.is-scrubbed .is-resolved .ph-care-title{opacity:1}
 .ph-care.is-scrubbed .is-resolved .ph-care-cipher{opacity:0}
 .ph-care.is-scrubbed .ph-care-item p{font-size:clamp(1.1rem,1.7vw,1.4rem);max-width:40rem;position:relative}
 .ph-care.is-scrubbed .ph-care-pips{display:flex;gap:.45rem;margin:.5rem 0}
 .ph-care-pips .ph-mark{width:42px;height:6px;background:var(--ph-color-line-medium);transition:background var(--ph-motion-duration) var(--ph-motion-ease)}
 .ph-care-pips .ph-mark.on{background:var(--ph-color-signal)}
 .ph-care-pips .ph-mark.is-current{box-shadow:0 0 8px #00E5FF55;border:1px solid var(--ph-color-attention)}

 .ph-incident.is-scrubbed .ph-stage{padding:clamp(2rem,7svh,5rem) max(var(--ph-gutter),calc((100% - var(--ph-max))/2));gap:1.25rem}
 .ph-incident.is-scrubbed .ph-scene-head h2{font-size:clamp(1.8rem,4vw,3.5rem)}
 .ph-incident.is-scrubbed .ph-foot{margin:0}
 .ph-incident.is-scrubbed .ph-experience{font-size:.9rem}

 .is-scrubbed .ph-restore-grid{grid-template-columns:minmax(0,24rem) 1fr;gap:3rem;margin-top:.5rem}
 .is-scrubbed .ph-sitecard{display:grid}
 .ph-recovery.is-scrubbed .ph-lines{font-size:.95rem}

 .is-scrubbed .ph-slab.on.is-now{border-color:var(--lc,var(--ph-color-signal));box-shadow:0 0 8px color-mix(in srgb,var(--lc,var(--ph-color-signal)) 40%,transparent)}
 .ph-trace-host :is(.ph-care-board,.ph-fleet-board,.ph-sitecard){outline:1px solid transparent;outline-offset:6px}
 .ph-trace-host .is-tapped{outline-color:var(--ph-color-signal)}
}

/* Native scroll reveals carry the same motion language between stages and on phones. */
@media (prefers-reduced-motion:no-preference){
 @supports (animation-timeline:view()){
  /* Copy stays at full contrast while moving. Only decorative panels fade or power on. */
  @keyframes ph-home-arrive{from{transform:translateY(24px)}}
  @keyframes ph-home-panel{from{opacity:.2;transform:scaleY(.04)}}
  @keyframes ph-home-rule{from{transform:scaleX(0)}}
  .ph-agency .ph-copy,.ph-check h2,.ph-check> .ph-wrap>p:not(.ph-eyebrow),.home .ph-band .ph-wrap{animation:ph-home-arrive var(--ph-motion-ease) backwards;animation-timeline:view();animation-range:entry 5% entry 85%}
  .ph-agency .ph-copy:nth-child(2){animation-range:entry 15% entry 95%}
  .ph-agency .ph-eyebrow::before,.ph-scene-head .ph-eyebrow::before{transform-origin:left;animation:ph-home-rule var(--ph-motion-ease) backwards;animation-timeline:view();animation-range:entry 10% entry 80%}
  @media (max-width:899px),(max-height:699px){
   .ph-care .ph-care-item,.ph-restore-side{animation:ph-home-arrive var(--ph-motion-ease) backwards;animation-timeline:view();animation-range:entry 5% entry 80%}
   .ph-ticks{animation:ph-home-panel var(--ph-motion-ease) backwards;animation-timeline:view();animation-range:entry 5% entry 80%}
  }
 }
}
@media (max-width:899px),(max-height:699px),(prefers-reduced-motion:reduce){.ph-trace,.ph-tap{display:none}}

/* Compact cinema follows native touch scroll; the readable copy keeps its normal flow. */
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
 .home{--ph-mobile-reveal-inset:0 15%}
 .ph-care .ph-stage{overflow-x:clip}
 .ph-care .ph-care-grid{gap:1rem}
 .ph-care .ph-care-item{position:relative;padding:1.25rem;border:1px solid var(--ph-color-line-strong);border-radius:var(--ph-radius-card);background:linear-gradient(135deg,#00E5FF12,transparent 70%),var(--ph-color-surface)}
 .ph-care .ph-care-number{display:block;position:absolute;top:.75rem;right:1rem;font:600 2.5rem/1 var(--ph-font-display);color:var(--ph-color-attention);opacity:.18;pointer-events:none}
 .ph-care .ph-care-item h3{padding-right:2rem;color:var(--ph-color-signal)}
 .ph-iso{display:block;position:relative;width:100%;max-width:28rem;margin:1.5rem auto 0;aspect-ratio:16/13;perspective:1500px;outline:1px solid var(--ph-color-line-medium);outline-offset:6px}
 .ph-iso-world{--rx:56deg;--rz:-40deg;--sc:.7;--iy:var(--ph-iso-lift);top:2.5rem}
 .ph-siteplate img{width:100%;height:100%;transform:none;object-fit:cover}
 .ph-layerplate{opacity:1;transform:translateZ(calc(var(--depth)*-26px))}
 .ph-sitecard{display:grid;aspect-ratio:16/10;width:min(100%,24rem);border-color:var(--ph-color-line-strong)}
 .ph-stack-grid,.ph-restore-grid{gap:2rem}

 @supports (animation-timeline:view()){
  @keyframes ph-mobile-card{from{transform:translateX(var(--card-in,-24px))}}
  @keyframes ph-mobile-iso{
   from{transform:translateY(0) rotateX(0deg) rotateZ(0deg) scale(1)}
   to{transform:translateY(var(--ph-iso-lift)) rotateX(56deg) rotateZ(-40deg) scale(.7)}
  }
  @keyframes ph-mobile-layer{
   from{opacity:0;transform:translateZ(0)}
   to{opacity:1;transform:translateZ(calc(var(--depth)*-26px))}
  }
  @keyframes ph-mobile-repair{from{transform:translateY(0)}to{transform:translateY(100%)}}
  @keyframes ph-mobile-sweep{
   0%{opacity:0;transform:translateY(0)}
   8%{opacity:1}
   92%{opacity:1}
   100%{opacity:0;transform:translateY(100%)}
  }
  @keyframes ph-mobile-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes ph-mobile-tick{from{opacity:.25;transform:scaleY(.2)}to{opacity:1;transform:scaleY(1)}}

  /* Wait until the illustration is inside the viewport before its scroll sequence begins. */
  .ph-iso,.ph-sitecard,.ph-restore-side{view-timeline-inset:var(--ph-mobile-reveal-inset)}
  .ph-agency .ph-copy,.ph-check h2,.ph-check> .ph-wrap>p:not(.ph-eyebrow),.home .ph-band .ph-wrap,.ph-restore-side,.ph-agency .ph-eyebrow::before,.ph-scene-head .ph-eyebrow::before{animation-timeline:view(block var(--ph-mobile-reveal-inset))}

  .ph-care .ph-care-item{animation:ph-mobile-card var(--ph-motion-ease) both;animation-timeline:view(block var(--ph-mobile-reveal-inset));animation-range:entry 5% entry 90%}
  .ph-care .ph-care-item:nth-child(even){--card-in:24px}
  .ph-iso{view-timeline-name:--ph-mobile-stack;view-timeline-axis:block}
  .ph-iso-world{animation:ph-mobile-iso linear both;animation-timeline:--ph-mobile-stack;animation-range:entry 5% entry 85%}
  .ph-layerplate{animation:ph-mobile-layer var(--ph-motion-ease) both;animation-timeline:--ph-mobile-stack;animation-range:entry calc(30% + var(--depth)*8%) cover calc(45% + var(--depth)*4%)}
  .ph-sitecard{view-timeline-name:--ph-mobile-repair;view-timeline-axis:block}
  .ph-corrupt{animation:ph-mobile-repair linear both;animation-timeline:--ph-mobile-repair;animation-range:entry 10% cover 60%}
  .ph-sweep2{height:100%;background:linear-gradient(var(--ph-color-signal),var(--ph-color-signal)) top/100% 2px no-repeat;box-shadow:none;animation:ph-mobile-sweep linear both;animation-timeline:--ph-mobile-repair;animation-range:entry 10% cover 60%}
  .ph-restore-side{view-timeline-name:--ph-mobile-backups;view-timeline-axis:block}
  .ph-ticks{animation:none}
  .ph-ticks .ph-mark{transform-origin:bottom;animation:ph-mobile-tick linear both;animation-timeline:--ph-mobile-backups;animation-range:entry calc(var(--tick)*1%) entry calc(40% + var(--tick)*1%)}
  .ph-restorebar .ph-bar-fill{animation:ph-mobile-fill linear both;animation-timeline:--ph-mobile-backups;animation-range:entry 15% entry 85%}
 }
}

/* Native GB Shape supplies a wrapper around the recognizer SVG. */
.ph-recog{aspect-ratio:28/100}
.ph-recog svg{display:block;width:100%;height:100%;max-width:none}
.ph-slab-title b{font:inherit}