/* Perspace site · shared parts, one file for every page (round 3, 27 Oct 2026). Tokens only (var(--ps-*), site.css).
   Linked by gen/site_nav.py's head block. Motion: entrances once, no looping decoration (DESIGN.md "Motion"). */

/* ---- THE MARK: one 3D logo on every page; it arrives once and stands still ---- */
.psmark{position:relative;width:min(380px,100%);height:340px;margin:0 auto}
.psmark .b{position:absolute;top:50%;height:290px;filter:drop-shadow(0 34px 44px rgba(13,28,44,.20))}
.psmark .l{left:0;transform:translate(-60%,-50%);opacity:0;animation:psInL 1.2s .2s var(--ease) forwards}
.psmark .r{right:0;transform:translate(60%,-50%);opacity:0;animation:psInR 1.2s .2s var(--ease) forwards}
.psmark .s{position:absolute;left:50%;top:50%;height:70px;transform:translate(-50%,-50%) scale(.2) rotate(-90deg);opacity:0;animation:psInS 1s .9s var(--ease) forwards}
@keyframes psInL{to{transform:translate(0,-50%);opacity:1}}
@keyframes psInR{to{transform:translate(0,-50%);opacity:1}}
@keyframes psInS{to{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}}
@media (max-width:900px){.psmark{height:280px;width:min(320px,100%)}.psmark .b{height:236px}.psmark .s{height:56px}}
@media (prefers-reduced-motion:reduce){.psmark .l,.psmark .r{opacity:1;transform:translate(0,-50%)}.psmark .s{opacity:1;transform:translate(-50%,-50%)}}

/* ---- A SOURCE, QUIET: the company and the year show; the full document sits behind them ---- */
.srcd{margin-top:8px;font-size:var(--t12);line-height:1.45;color:var(--faint)}
.srcd summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;color:var(--faint);font-weight:500}
.srcd summary::-webkit-details-marker{display:none}
.srcd summary::after{content:"+";font-weight:400}
.srcd[open] summary::after{content:"\2212"}
.srcd summary:hover{color:var(--ink)}
.srcd p{margin-top:6px;max-width:44em}

/* ---- ONE LOGO CHIP (.lg): a named system as a pill, with its mark where simple-icons has one ---- */
.lg{flex:none;height:44px;display:inline-flex;align-items:center;gap:10px;padding:0 18px;background:white;border:1px solid var(--line);border-radius:0;color:var(--ink);transition:border-color .3s var(--ease)}
.lg:hover{border-color:var(--ink)}
.lg img{height:18px;width:18px;opacity:.6;filter:grayscale(1);flex:none}
.lg i{font-style:normal;font-size:var(--t15);font-weight:500;white-space:nowrap}
@media (max-width:900px){.lg{height:40px;padding:0 14px}.lg i{font-size:var(--t13)}}

/* ---- THE NAMED-ROW WALL (.lwall): rows of named systems; still at rest, they drift only while a pointer rests on them ---- */
.lwall{overflow:hidden;padding:6px 0}
.lwall .strip{overflow:hidden;mask-image:linear-gradient(90deg,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent)}
.lwall .run{display:flex;gap:12px;width:max-content;align-items:center;padding:6px 0 6px 56px;animation:psDrift 120s linear infinite;animation-play-state:paused}
.lwall:hover .run{animation-play-state:running}
.lwall .r1{animation-duration:140s}.lwall .r2{animation-duration:160s}
@keyframes psDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:900px){.lwall .run{padding-left:16px}}

/* ---- THE SYSTEMS WALL (.wall): square tiles, three rows drifting slowly in alternating directions, matching the live
   site (perspace.ai/plugins.html, "1,000+ systems you already run"); no rounded pills, motion off under reduced motion ---- */
.wall{overflow:hidden;padding:6px 0}
.wall .strip{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.wall .run{display:flex;gap:16px;width:max-content;align-items:center;padding:8px 0}
.wall .r0{animation:psDrift 92s linear infinite}
.wall .r1{animation:psDrift 112s linear infinite reverse}
.wall .r2{animation:psDrift 132s linear infinite}
.wall .lg{flex:none;height:62px;display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--card);border:1px solid var(--line);border-radius:0;color:var(--soft);transition:border-color .3s,color .3s}
.wall .lg:hover{border-color:var(--ink);color:var(--ink)}
.wall .lg img{height:22px;width:22px;opacity:.55;filter:grayscale(1);flex:none}
.wall .lg i{font-style:normal;font-size:var(--t15);font-weight:700;letter-spacing:-.01em;white-space:nowrap}
@media (max-width:900px){.wall .lg{height:52px;padding:0 16px}.wall .lg img{height:19px;width:19px}.wall .lg i{font-size:var(--t13)}}

/* ---- shelves: a named row and its systems beside it ---- */
.shelves{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.shelf{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line-2)}
.shelf h3{font-size:var(--t24);line-height:1.15}
.shelf small{display:block;font-size:var(--t13);color:var(--faint);margin-top:4px;font-family:var(--f)}
.shelf .strip{overflow:hidden;min-width:0;mask-image:linear-gradient(90deg,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent)}
.shelf .run{display:flex;gap:12px;width:max-content;padding:4px 0;animation:psDrift var(--dur,80s) linear infinite;animation-play-state:paused}
.shelf:hover .run{animation-play-state:running}
@media (max-width:900px){.shelf{grid-template-columns:1fr;gap:12px}.shelf h3{font-size:var(--t18)}}
@media (prefers-reduced-motion:reduce){.shelf .run,.lwall .run,.wall .run{animation:none}.shelf .strip,.lwall .strip,.wall .strip{overflow-x:auto;mask-image:none;-webkit-mask-image:none}.shelf .run [aria-hidden],.lwall .run [aria-hidden],.wall .run [aria-hidden]{display:none}}

/* ---- the two counts beside the systems ---- */
.cnum2{display:flex;gap:56px;flex-wrap:wrap;align-items:flex-end;margin-top:40px}
.cnum2 div{display:flex;flex-direction:column;gap:8px}
.cnum2 span{font-size:var(--t11);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:700}
.cnum2 b{font-family:var(--head);font-weight:400;font-variant-numeric:tabular-nums;font-size:clamp(var(--t32),5vw,var(--t48));line-height:1;color:var(--ink)}
.cnum2 .btn{margin-left:auto}
@media (max-width:900px){.cnum2{gap:28px}.cnum2 .btn{margin-left:0}}

/* ---- PROOF: three anonymous stories (Peter TG 27 Oct 2026 18:15 to 18:18) ---- */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.story{border-top:1px solid var(--ink);padding:32px 0 0;display:flex;flex-direction:column;gap:12px}
.story .who{font-size:var(--t11);letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.story .fig{font-size:var(--t32);color:var(--ink)}
.story .fl{font-size:var(--t13);color:var(--soft);margin-top:-4px}
.story dl{display:grid;gap:10px;margin-top:8px;border-top:1px solid var(--line);padding-top:16px}
.story dt{font-size:var(--t11);letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.story dd{font-size:var(--t15);line-height:1.45;color:var(--ink)}
.stories.one{grid-template-columns:1fr}
.stories.one .story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:48px;align-items:start}
.stories.one .story dl{grid-column:2;grid-row:1/span 3;margin-top:0;border-top:0;padding-top:0}
@media (max-width:900px){.stories{grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.story{scroll-snap-align:start}.stories.one{grid-auto-columns:100%}.stories.one .story{display:flex}}

/* ---- NAR IMAGES (brandbook photography, 27 Oct 2026): one image per place, never twice on the site ---- */
.nar{margin:0;border-radius:0;overflow:hidden;background:var(--ps-soft-grey)}
.nar img{display:block;width:100%;height:auto}

/* ---- FILM BANDS (27 Oct 2026, Peter: "images as such not as sleek as hero section"): every Nar image placement
   speaks the home hero's language. Full bleed, no card; the image is the section's background, faded into Midnight
   Navy on the text side like the hero film; light text and the hero's pill buttons; slow scale-in on scroll.
   Markup: <section class="film [film-r]" style="--fp:..;--fpm:.."><img class="film-img" ...><div class="film-shade"></div><div class="wrap"><div class="film-copy">...</div></div></section>
   film = text on the left, film-r = text on the right. --fp / --fpm = where the image sits (desktop / phone). ---- */
section.film{position:relative;overflow:hidden;background:var(--ps-midnight-navy);color:var(--ps-warm-white);display:flex;align-items:center;min-height:max(560px,70vh);padding:112px 0;text-align:left}
section.film .film-img{position:absolute;top:0;bottom:0;left:30%;right:0;width:70%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%);filter:brightness(.85) saturate(.9);transform:scale(1.04);transform-origin:50% 50%;transition:transform 1.8s cubic-bezier(.2,.8,.2,1);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
section.film.film-r .film-img{left:0;right:auto;-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 30%);mask-image:linear-gradient(270deg,transparent 0,#000 30%)}
section.film.in .film-img{transform:scale(1)}
section.film .film-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(13,28,44,.94) 0%,rgba(13,28,44,.8) 38%,rgba(13,28,44,.35) 60%,rgba(13,28,44,.1) 80%,rgba(13,28,44,.2) 100%)}
section.film.film-r .film-shade{background:linear-gradient(270deg,rgba(13,28,44,.94) 0%,rgba(13,28,44,.8) 38%,rgba(13,28,44,.35) 60%,rgba(13,28,44,.1) 80%,rgba(13,28,44,.2) 100%)}
section.film>.wrap{position:relative;z-index:1;width:100%}
section.film .film-copy{max-width:min(560px,42vw)}
section.film.film-r .film-copy{margin-left:auto}
section.film .hd2,section.film .head2{display:block;margin:0}
section.film h2{margin-top:20px}
section.film h2,section.film h2 b,section.film .lede,section.film .tag,section.film .engtag{color:var(--ps-warm-white)}
section.film .lede{margin:20px 0 0;text-align:left;max-width:30em}
section.film .btns{justify-content:flex-start;margin-top:32px}
section.film .btn.dark{background:var(--ps-warm-white);color:var(--ps-midnight-navy)}
section.film .btn.dark:hover{background:var(--ps-ice-blue)}
section.film .btn.line{background:rgba(246,247,242,.12);color:var(--ps-warm-white);border:1px solid rgba(246,247,242,.35)}
section.film .btn.line:hover{background:rgba(246,247,242,.2)}
/* the "who we work with" tabs over the film: the hero's glass panel */
section.film .wwk{margin:0;border:0;padding:0}
section.film .wt{background:rgba(246,247,242,.1);border-color:rgba(246,247,242,.3);color:var(--ps-warm-white)}
section.film .wt.on{background:var(--ps-warm-white);border-color:var(--ps-warm-white);color:var(--ps-midnight-navy)}
section.film .wpause{border-color:rgba(246,247,242,.35);color:var(--ps-warm-white)}
section.film .wtp{background:rgba(13,28,44,.62);border-color:rgba(246,247,242,.18);color:var(--ps-warm-white);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
section.film .wtp p{color:var(--ps-warm-white)}
section.after-film.after-film{padding-top:56px}
@media (prefers-reduced-motion:reduce){section.film .film-img,section.film.in .film-img{transform:none;transition:none}}
/* phone and small tablet: the image first, full width, faded into navy at its foot; the text below on navy, never over a face */
@media (max-width:900px){
  section.film{display:block;min-height:0;padding:0 0 64px}
  section.film .film-img,section.film.film-r .film-img{position:relative;inset:auto;left:auto;right:auto;display:block;width:100%;height:auto;aspect-ratio:4/3;object-position:var(--fpm,var(--fp,50% 50%));-webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%)}
  section.film .film-shade{display:none}
  section.film .film-copy,section.film.film-r .film-copy{max-width:none;margin:-8px 0 0}
  section.after-film.after-film{padding-top:40px}
}

/* ---- TOOLS FORK (27 Oct 2026, Peter: "fix ux ui of this whole page", then one pass over the main pages): THE OPEN GRID.
   A row of three that used to be white boxes reads as type on the page: a 2px rule in the row's colour (--c, navy by
   default), the title large, the figure in the revenue colour, no box, no shadow. Add class="opengrid" to the row. ---- */
.opengrid.opengrid{gap:48px}
.opengrid.opengrid>*{background:none;border:0;border-top:2px solid var(--c,var(--ps-midnight-navy));border-radius:0;box-shadow:none;padding:28px 0 4px}
.opengrid.opengrid>a:hover{border-top-color:var(--ps-data-revenue);transform:none}
.opengrid.opengrid .fig{color:var(--ps-data-revenue);font-size:clamp(var(--t48),5vw,var(--t80));line-height:1}
.opengrid h3,.opengrid .og>b{font-family:var(--head);font-weight:400;font-size:var(--t24);line-height:1.2;letter-spacing:0}
.opengrid p{font-size:var(--t15)}
@media (max-width:900px){.opengrid.opengrid{gap:32px}.opengrid.opengrid>*{padding-top:20px}}
/* ---- INDUSTRIES FORK (27 Oct 2026): a film band that OPENS a page (under the fixed nav) and a film band with no image ----
   film-top: the page's first section; the nav reads light over it until it scrolls; on phone the text comes first, then the image.
   noimg: the same band on plain Midnight Navy (a closing band on a page whose images are all used). */
section.film.film-top{min-height:max(640px,92vh);padding:150px 0 88px}
section.film.noimg{min-height:0;padding:112px 0}
body:has(section.film-top) nav#nav:not(.sc):not(.open) .links>a,body:has(section.film-top) nav#nav:not(.sc):not(.open) .links > *:not(.menu):not(.dd-menu),body:has(section.film-top) nav#nav:not(.sc):not(.open) .brand,body:has(section.film-top) nav#nav:not(.sc):not(.open) .links a.on,body:has(section.film-top) nav#nav:not(.sc):not(.open) .links .ddh{color:var(--ps-warm-white)}
body:has(section.film-top) nav#nav:not(.sc):not(.open) .brand img{filter:invert(1) brightness(1.6)}
body:has(section.film-top) nav#nav:not(.sc):not(.open) .mnu i{background:var(--ps-warm-white)}
@media (max-width:900px){
  section.film.film-top{display:flex;flex-direction:column;min-height:0;padding:104px 0 0}
  section.film.film-top>.wrap{order:1}
  section.film.film-top .film-img{order:2;margin-top:32px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
  section.film.film-top .film-copy{margin:0}
  section.film.noimg{padding:72px 0}
}

/* ---- LIGHT FILM (Peter 27 Oct 2026 23:03): the light Nar images keep their light; same full bleed, the image fades into Warm White
   on the text side and the text stays ink. Markup: <section class="film film-light [film-r]">, the rest as section.film ---- */
section.film.film-light{background:var(--ps-warm-white);color:var(--ink)}
section.film.film-light .film-img{filter:none}
section.film.film-light .film-shade{background:linear-gradient(90deg,rgba(246,247,242,.97) 0%,rgba(246,247,242,.9) 40%,rgba(246,247,242,.5) 60%,rgba(246,247,242,0) 82%)}
section.film.film-light.film-r .film-shade{background:linear-gradient(270deg,rgba(246,247,242,.97) 0%,rgba(246,247,242,.9) 40%,rgba(246,247,242,.5) 60%,rgba(246,247,242,0) 82%)}
section.film.film-light h2{color:var(--soft)}
section.film.film-light h2 b{color:var(--ink)}
section.film.film-light .lede{color:var(--soft)}
section.film.film-light .tag,section.film.film-light .engtag{color:var(--ps-ink)}
section.film.film-light .btn.dark{background:var(--navy);color:var(--ps-warm-white)}
section.film.film-light .btn.line{background:var(--ps-warm-white);color:var(--navy);border:1px solid var(--line-2)}
@media (max-width:900px){section.film.film-light{padding-bottom:56px}section.film.film-light .film-img,section.film.film-light.film-r .film-img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%)}}
/* a real Grip screen as the film: the screen keeps its own light, shown whole on the image side */
section.film .film-img.film-screen{filter:brightness(.92) saturate(.9);object-fit:cover;object-position:0 0}
@media (min-width:901px){section.film:not(.film-r) .film-img.film-screen{left:50%;width:50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}}