/* Cenomatrix motion layer. Loaded after each page's own styles; driven by motion.js.
   html.motion is set in <head>; without motion.js everything renders as a static page. */
:root{--ease:cubic-bezier(.2,.7,.2,1);--glow:rgba(255,45,35,.45);--gold:#c9a34c;--mask:#000;--dline:rgba(255,255,255,.12)}

/* Header text rises into place */
:where(.hero p,.hero .actions,.band2 .wrap>*){transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
@media (prefers-reduced-motion:no-preference){
  .motion :where(.hero p,.hero .actions,.band2 .wrap>*):not(.in){opacity:0;transform:translateY(28px)}
  .motion :where(.hero h1,[data-split]):not(.is-split){opacity:0}
  .motion :where(.hero h1,[data-split]):not(.in) .w>span{transform:translateY(108%)}
}

/* Word-by-word headings */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block;transition:transform 1s var(--ease) var(--d,0s)}

/* Homepage header: the live board, framed by corner brackets */
.hero.dark{overflow:hidden}
.hero.dark.hero--live{background-image:none;background-color:#000;isolation:isolate}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.hero.dark.hero--live::before{background:radial-gradient(ellipse 70% 60% at 0% 55%,rgba(0,0,0,.94),rgba(0,0,0,.55) 60%,transparent),linear-gradient(90deg,rgba(0,0,0,.5),transparent 70%)}
@media(max-width:900px){.hero.dark.hero--live::before{background:rgba(0,0,0,.64)}}
.hero-frame{position:absolute;inset:26px;pointer-events:none}
.hero-frame.marks::after{animation:marks-in 1.2s var(--ease) .2s both}
@keyframes marks-in{from{inset:-34px;opacity:0}}
@media(max-width:760px){.hero-frame{inset:14px}}
/* X/Y readout: follows the probe on the board */
.readout{position:absolute;right:40px;bottom:26px;display:flex;gap:18px;font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;color:#8b8c94}
.readout b{font-weight:500;color:#e9e9ec}
@media(max-width:760px){.readout{left:24px;right:auto;bottom:22px}}

/* Corner brackets */
.marks{--mk:rgba(255,255,255,.35)}
.marks::after{content:"";position:absolute;inset:-10px;pointer-events:none;background:
  linear-gradient(var(--mk),var(--mk)) 0 0/16px 1px,linear-gradient(var(--mk),var(--mk)) 0 0/1px 16px,
  linear-gradient(var(--mk),var(--mk)) 100% 0/16px 1px,linear-gradient(var(--mk),var(--mk)) 100% 0/1px 16px,
  linear-gradient(var(--mk),var(--mk)) 0 100%/16px 1px,linear-gradient(var(--mk),var(--mk)) 0 100%/1px 16px,
  linear-gradient(var(--mk),var(--mk)) 100% 100%/16px 1px,linear-gradient(var(--mk),var(--mk)) 100% 100%/1px 16px;background-repeat:no-repeat}

/* Inner-page headers: the photo settles in and sinks on scroll; a live scene runs over it */
.band2.lifted,.band2.scene-live{overflow:hidden;isolation:isolate}
.lift-bg{position:absolute;inset:-14% 0;z-index:-1;background:center/cover no-repeat;pointer-events:none;animation:settle 2.6s var(--ease) both}
.band2.vid>video{top:-14%;height:128%}
@keyframes settle{from{scale:1.1}}
.scene-live::before{z-index:0}
.scene-live>.lift-bg,.scene-live>video{z-index:-1;filter:brightness(.45) saturate(.8)}
.scene-live>.wrap{z-index:2}
.band-canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none}
/* Phones: the short headers put the scene behind the title, so it steps back */
@media(max-width:760px){.band-canvas{opacity:.35}}

/* Homepage "Design Expertise": pinned while a red trace runs down the list (wide screens) */
.capimg.marks{position:relative;--mk:rgba(255,255,255,.3)}
.capimg.marks img{--cut:24px;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.cap.cap--story{padding:0;height:calc(100vh + var(--n,7) * 38vh)}
.cap--story>.wrap{position:sticky;top:0;height:100vh;align-content:center}
.cap--story .capimg img{transform:scale(calc(1 + var(--p,0) * .08));transition:transform .2s linear}
.cap.cap--story ul{position:relative;padding-left:30px}
.cap--story ul::before,.cap--story ul::after{content:"";position:absolute;left:5px;top:0;width:2px}
.cap--story ul::before{bottom:0;background:var(--dline)}
.cap--story ul::after{height:calc(var(--p,0) * 100%);background:var(--red);box-shadow:0 0 12px var(--glow)}
.cap.cap--story li{opacity:.35;transition:opacity .4s var(--ease),color .4s}
.cap.cap--story li.on{opacity:1;color:#fff}
.cap.cap--story li::before{content:"";display:block;position:absolute;left:-31px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:radial-gradient(circle,var(--mask) 0 2.5px,var(--gold) 3px);transition:background .3s,box-shadow .3s}
.cap.cap--story li.on::before{background:radial-gradient(circle,var(--mask) 0 2.5px,var(--red) 3px);box-shadow:0 0 12px var(--glow)}

/* Homepage service links: underlined, with a red arrow that slides on hover */
.svc .link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding-bottom:4px;border-bottom:1px solid currentColor;color:var(--ink)}
.svc .link .arr{display:inline-block;margin:0;color:var(--red);font-weight:normal;text-decoration:none;transition:transform .3s var(--ease)}
.svc:hover .link{text-decoration:none}
.svc:hover .link .arr{transform:translateX(4px)}

/* Capability boxes with a red glow that follows the pointer */
.spot{--cut:18px;position:relative;overflow:hidden;background:linear-gradient(180deg,#16171b,#0e0f11);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.spot::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,45,35,.17),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.spot:hover::before{opacity:1}
.spot>*{position:relative}
.rgrid{gap:14px}
.rgrid .spot{margin:0;padding:30px;border-top:0;background:linear-gradient(180deg,rgba(22,23,27,.82),rgba(14,15,17,.82));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cap .wrap.two{gap:18px;align-items:stretch}
.two>.spot{padding:clamp(28px,4vw,48px)}
@media(max-width:900px){.cap .wrap.two{grid-template-columns:1fr}}

/* Icons draw their strokes in */
.sicon .draw{stroke-dasharray:var(--len);transition:stroke-dashoffset 1.4s var(--ease) calc(var(--d,0s) + .25s)}
.sicon .fillin{transition:opacity .6s ease calc(var(--d,0s) + 1s)}
@media (prefers-reduced-motion:no-preference){
  .motion .sicon:not(.in) .draw{stroke-dashoffset:var(--len)}
  .motion .sicon:not(.in) .fillin{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .motion *,.motion *::before,.motion *::after{transition:none!important;animation:none!important}
}