/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5
 * Macrostructure: scroll narrative → live workbench → industries → pipeline → contact.
 * Precise and professional · Meadow Green · code-native SVG and canvas.
 * Single-page scroll narrative · Meadow Green · Space Grotesk / IBM Plex Sans.
 * User-approved motion: persistent particle scene, three scroll-linked chapters,
 * natural-flow industry and production reveals. No scroll interception.
 */
html{scroll-behavior:smooth}
.section-label{display:block;font-size:11px;letter-spacing:.13em;font-weight:600;line-height:1.5;color:var(--color-muted)}
.vision-journey{position:relative;isolation:isolate}
.journey-backdrop{display:none}
.scroll-enhanced .journey-backdrop{display:block;position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;pointer-events:none;background:var(--color-paper)}
.journey-backdrop canvas{display:block;width:100%;height:100%}
.hero{position:relative;z-index:1;isolation:auto;background:none;border:0!important}
.hero-copy{transform-origin:left center}
.hero-scroll{margin:0;width:100%;padding-inline:0}
.vision-story{position:relative;background:var(--color-ink);color:var(--color-on-dark);border:0!important}
.story-sticky{max-width:var(--page-width);margin:auto;padding:var(--space-2xl) var(--page-gutter);position:relative}
.story-topline{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);border-bottom:1px solid var(--color-dark-rule);padding-bottom:var(--space-lg)}
.story-topline .section-label{color:var(--color-muted-on-dark)}
.story-chapters{display:none;gap:var(--space-lg)}
.story-chapters button{padding:var(--space-xs) 0;background:none;border:0;color:var(--color-muted-on-dark);font-size:13px;min-height:44px;white-space:nowrap;border-bottom:2px solid var(--color-transparent);cursor:pointer}
.story-chapters button span{font-size:10px;margin-right:var(--space-2xs)}
.story-chapters button[aria-current="step"]{color:var(--color-accent);border-bottom-color:var(--color-accent)}
.story-chapters button:hover{color:var(--color-on-dark)}
.story-panel{padding:var(--space-3xl) 0;border-bottom:1px solid var(--color-dark-rule)}
.story-number{font-size:11px;letter-spacing:.1em;color:var(--color-accent);margin-bottom:var(--space-lg)}
.story-panel h2{font-size:clamp(36px,4.6vw,66px);max-width:11ch;color:var(--color-on-dark);line-height:1.05;letter-spacing:-.045em}
.story-description{font-size:17px;max-width:36ch;color:var(--color-muted-on-dark);margin-top:var(--space-lg);line-height:1.65}
.story-methods{font-size:12px;color:var(--color-accent);margin-top:var(--space-lg)}
.story-link{display:inline-flex;gap:var(--space-xl);align-items:center;border:0;border-bottom:1px solid var(--color-dark-rule);background:none;color:var(--color-on-dark);padding:var(--space-sm) 0;margin-top:var(--space-md);font-size:14px;min-height:44px;cursor:pointer;white-space:nowrap}
.story-link:hover{color:var(--color-accent);border-color:var(--color-accent)}
.story-link:focus-visible,.story-chapters button:focus-visible{outline-color:var(--color-accent)}
.stage-illustration{display:block;width:min(100%,420px);margin:var(--space-xl) auto 0;color:var(--color-muted-on-dark)}
.stage-illustration text{fill:var(--color-accent);stroke:none;font-family:var(--font-body);font-size:12px;letter-spacing:1px}
.diagram-accent{stroke:var(--color-accent)}
.diagram-fill{fill:var(--color-accent);fill-opacity:.22;stroke:var(--color-accent)}
.scene-caption{display:none}
.story-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);font-size:12px;color:var(--color-muted-on-dark);padding-top:var(--space-lg)}
.story-bottom>a{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;color:var(--color-on-dark)}
.story-progress{height:1px;flex:1;max-width:360px;background:var(--color-dark-rule)}
.story-progress span{display:block;height:2px;background:var(--color-accent);transform:scaleX(var(--story-progress,0));transform-origin:left}
@media(min-width:769px) and (min-height:680px) and (prefers-reduced-motion:no-preference){
 .scroll-enhanced .vision-story{height:340svh;background:none}
 .scroll-enhanced .story-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:space-between}
 .scroll-enhanced .story-chapters{display:flex}
 .scroll-enhanced .story-panels{position:relative;flex:1;display:grid;align-items:center}
 .scroll-enhanced .story-panel{grid-area:1/1;padding:var(--space-xl) 0;max-width:43%;border:0;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .4s ease,transform .4s ease,visibility .4s;pointer-events:none}
 .scroll-enhanced .story-panel.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
 .scroll-enhanced .stage-illustration{display:none}
 .scroll-enhanced .scene-caption{display:flex;position:absolute;bottom:17%;left:51%;right:var(--page-gutter);justify-content:space-between;gap:var(--space-md);font-size:10px;letter-spacing:.03em;color:var(--color-muted-on-dark)}
 .scene-caption-label{color:var(--color-accent)}
}
.lab-intro{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-rule)}
.lab-intro p{font-size:15px;color:var(--color-ink);margin:0}
.demo-section{position:relative;z-index:1}
.scroll-industries{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr);gap:var(--space-3xl);max-width:var(--page-width);padding:var(--space-4xl) var(--page-gutter);margin:auto;border:0!important}
.industries-heading{position:sticky;top:var(--space-3xl);align-self:start;padding-top:var(--space-lg)}
.industries-heading h2{font-size:clamp(32px,3.8vw,52px);line-height:1.08;margin-top:var(--space-lg);letter-spacing:-.04em}
.industries-heading>p{max-width:30ch;font-size:16px;margin-top:var(--space-lg);color:var(--color-muted)}
.industries-heading>a{display:inline-flex;min-height:44px;align-items:center;margin-top:var(--space-lg);font-size:14px}
.industry-story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:var(--space-lg);align-items:center;min-height:350px;padding:var(--space-xl) 0;border-top:1px solid var(--color-rule)}
.industry-story h3{font-size:25px;line-height:1.15;letter-spacing:-.035em;margin-top:var(--space-sm);max-width:18ch}
.industry-story p{font-size:14px;color:var(--color-muted);line-height:1.6;margin-top:var(--space-md)}
.industry-story small{display:block;font-size:11px;color:var(--color-muted);margin-top:var(--space-md)}
.industry-story a{display:inline-flex;min-height:44px;align-items:center;gap:var(--space-sm);font-size:13px;color:var(--color-brand);margin-top:var(--space-sm);white-space:nowrap}
.industry-art{color:var(--color-brand);min-width:0}
.industry-art svg{width:100%;height:auto;display:block}
.industry-art .diagram-accent{stroke:var(--color-success)}
.industry-art text{fill:var(--color-success);stroke:none;font-size:12px}
.is-visible .industry-scan{animation:industry-scan 4s ease-in-out infinite alternate}
.is-visible .industry-route{animation:industry-route 6s linear infinite}
@keyframes industry-scan{from{transform:translateX(-42px)}to{transform:translateX(42px)}}
@keyframes industry-route{to{stroke-dashoffset:-72}}
.scroll-pipeline{max-width:none;padding:var(--space-4xl) max(var(--page-gutter),calc((100% - 1280px)/2));background:var(--color-ink);color:var(--color-on-dark);border:0!important}
.pipeline-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-lg) var(--space-3xl);align-items:end;margin-bottom:var(--space-3xl)}
.pipeline-intro .section-label{grid-column:1/-1;color:var(--color-accent)}
.pipeline-intro h2{font-size:clamp(36px,4vw,56px);line-height:1.08;color:var(--color-on-dark)}
.pipeline-intro p{font-size:17px;color:var(--color-muted-on-dark);max-width:34ch;justify-self:end}
.deployment-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2xl) var(--space-xl);padding:0;margin:0}
.deployment-line{display:flex;align-items:center;gap:var(--space-md);color:var(--color-accent);font-size:12px;margin-bottom:var(--space-lg)}
.deployment-line i{height:1px;flex:1;position:relative;background:var(--color-dark-rule)}
.deployment-line i:after{content:"";position:absolute;inset:0;background:var(--color-accent);transform:scaleX(var(--step-progress,1));transform-origin:left}
.deployment-step h3{font-size:28px;color:var(--color-on-dark);margin:0 0 var(--space-md)}
.deployment-step b{font-size:14px;color:var(--color-on-dark);font-weight:400}
.deployment-step p{font-size:14px;color:var(--color-muted-on-dark);line-height:1.6;max-width:33ch;margin-top:var(--space-xs)}
.scroll-contact{position:relative;isolation:isolate;min-height:80svh;display:grid;align-items:center;padding:var(--space-4xl) var(--page-gutter);background:var(--color-paper);border:0!important;overflow:clip}
#closing-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.scroll-contact .contact-inner{border:0;background:none;padding:var(--space-2xl) 0;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:none;width:100%}
.scroll-contact h2{font-size:clamp(48px,7vw,100px);line-height:1.02;margin-top:var(--space-lg);max-width:15ch;color:var(--color-ink)}
.scroll-contact p{font-size:18px;margin:var(--space-lg) 0 var(--space-xl);color:var(--color-muted)}
.scroll-contact .button{min-height:48px;padding-inline:var(--space-lg)}
.contact-email{font-size:13px;color:var(--color-muted);margin-top:var(--space-lg);padding:var(--space-xs);min-height:44px;display:inline-flex;align-items:center}
.scroll-enhanced [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s var(--ease-out)}
.scroll-enhanced [data-reveal].is-visible{opacity:1;transform:none}
@media(max-width:1100px){.scroll-industries{gap:var(--space-xl);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.industry-story{grid-template-columns:minmax(0,1fr);gap:var(--space-sm);padding-block:var(--space-xl)}.industry-art{max-width:260px}.industry-story h3{max-width:24ch}.industry-story p{max-width:44ch}}
@media(max-width:768px){
 .site-header{gap:var(--space-sm)}.site-header nav{gap:var(--space-sm);font-size:12px}.header-contact{padding-inline:var(--space-md)}
 .vision-story{background:var(--color-ink)}.story-topline{padding-top:var(--space-md)}.story-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--space-lg);align-items:start}.story-panel>*:not(svg){grid-column:1}.stage-illustration{grid-column:2;grid-row:1/7;align-self:center}.story-panel h2{font-size:42px}.story-description{font-size:16px}.story-bottom>span{display:none}.story-progress{display:none}
 .pipeline-intro{gap:var(--space-xl)}.deployment-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 .hero h1{font-size:clamp(40px,10.7vw,58px)}.hero-scroll{font-size:10px}.hero-copy{padding-bottom:var(--space-xl)}
 .story-sticky{padding:var(--space-lg) var(--page-gutter)}.story-topline .section-label{font-size:10px}.story-panel{display:block;padding-block:var(--space-2xl)}.story-panel h2{font-size:44px;max-width:13ch}.story-description{max-width:36ch}.stage-illustration{width:85%;max-width:330px;margin-top:var(--space-xl)}.story-methods{font-size:11px}
 .lab-intro{gap:var(--space-sm);padding-bottom:var(--space-xs)}.lab-intro p{font-size:12px}.lab-intro .section-label{font-size:10px}
 .scroll-industries{display:block;padding-block:var(--space-2xl)}.industries-heading{position:static;margin-bottom:var(--space-xl)}.industries-heading h2{font-size:40px}.industry-story{display:grid;grid-template-columns:minmax(0,1fr);min-height:0}.industry-art{max-width:240px;margin-inline:auto;width:100%}.industry-story h3{font-size:27px}.industry-story p{font-size:15px}
 .scroll-pipeline{padding-block:var(--space-2xl)}.pipeline-intro{display:block;margin-bottom:var(--space-xl)}.pipeline-intro h2{font-size:38px;margin-top:var(--space-lg)}.pipeline-intro p{font-size:16px;margin-top:var(--space-lg)}.deployment-steps{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}.deployment-step p{max-width:40ch}.deployment-step h3{font-size:26px}
 .scroll-contact{min-height:70svh;padding-block:var(--space-2xl)}.scroll-contact h2{font-size:56px}.scroll-contact p{font-size:16px;max-width:29ch}.scroll-contact .section-label{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .journey-backdrop{display:none!important}.story-panel{opacity:1!important;transform:none!important;visibility:visible!important}.scroll-enhanced [data-reveal]{opacity:1;transform:none}.industry-scan,.industry-route{animation:none!important}.hero-copy{opacity:1!important;transform:none!important}.story-progress{display:none}
}
/* A compact, persistent navigation keeps the working lab one click away. */
.site-header{position:sticky;top:0;z-index:100;max-width:none;height:72px;background:var(--color-paper);border-bottom:1px solid var(--color-rule);padding-inline:max(var(--page-gutter),calc((100% - 1280px)/2))}
.scroll-enhanced .journey-backdrop{top:72px;height:calc(100svh - 72px);margin-bottom:calc(-100svh + 72px)}
.hero{min-height:calc(100svh - 72px)}
#capabilities,#demos,#solutions,#technology,#company{scroll-margin-top:72px}
@media(min-width:769px) and (min-height:680px) and (prefers-reduced-motion:no-preference){.scroll-enhanced .story-sticky{top:72px;height:calc(100svh - 72px)}}
.industry-story:not(.is-in-view) .industry-scan,.industry-story:not(.is-in-view) .industry-route{animation-play-state:paused}
.deployment-step{opacity:calc(.35 + var(--step-progress,1)*.65)}
.industries-heading{top:96px}
.deployment-step{opacity:1}
.story-panel h2,.industries-heading h2,.pipeline-intro h2,.scroll-contact h2{min-width:0;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:600px){.pipeline-intro p{max-width:none;justify-self:start}}

/* Short windows use normal document flow so chapter links remain reachable. */
@media(min-width:769px) and (max-height:679px){
 .story-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--space-xl)}
 .story-panel>*:not(svg){grid-column:1}.stage-illustration{grid-column:2;grid-row:1/7;align-self:center}
 .story-panel h2{font-size:42px}.story-progress,.story-bottom>span{display:none}
}
@media(max-width:768px){.site-header nav{top:100%;max-height:calc(100svh - 72px);overflow-y:auto}}

/* Motion follows the information: scan, resolve depth, then read and transfer. */
@media(prefers-reduced-motion:no-preference){
 .story-panel.is-active .story-number{animation:chapter-copy .45s both}
 .story-panel.is-active h2{animation:chapter-copy .55s .05s both}
 .story-panel.is-active .story-description{animation:chapter-copy .55s .12s both}
 .story-panel.is-active .story-methods,.story-panel.is-active .story-link{animation:chapter-copy .55s .2s both}
 .industry-art svg{transform:translateY(var(--art-travel,0px));transition:transform .18s linear}
 .industry-story.is-visible .industry-draw{stroke-dasharray:1;animation:diagram-draw 1.5s var(--ease-out) both}
 .industry-target{transform-box:fill-box;transform-origin:center;animation:target-lock 3s ease-in-out infinite}
 .industry-orbit{transform-origin:332px 188px;animation:target-orbit 6s linear infinite}
 .retail-person{animation:person-track 5s ease-in-out infinite alternate}
 .industry-story:not(.is-in-view) .industry-target,.industry-story:not(.is-in-view) .industry-orbit,.industry-story:not(.is-in-view) .retail-person{animation-play-state:paused}
 .stage-scan{animation:stage-scan 3.5s ease-in-out infinite alternate;opacity:.7}
 .story-panel:not(.is-in-view) .stage-scan{animation-play-state:paused}
 .deployment-step[data-reveal]:nth-child(3n+2){transition-delay:.1s}
 .deployment-step[data-reveal]:nth-child(3n){transition-delay:.2s}
 .deployment-line i:after{transition:transform .25s linear}
 .deployment-step.is-in-view .deployment-line span{color:var(--color-on-dark)}
}
@keyframes chapter-copy{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes diagram-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes target-lock{0%,100%{transform:scale(.8);opacity:.3}50%{transform:scale(1.15);opacity:.9}}
@keyframes target-orbit{to{transform:rotate(360deg)}}
@keyframes person-track{from{transform:translateX(-9px)}to{transform:translateX(12px)}}
@keyframes stage-scan{from{transform:translateY(-62px)}to{transform:translateY(62px)}}
