/* The motion explains a mission: sources → reasoning → results. */
.hero { min-height:800px; height:min(900px,100svh); }
.hero-content { padding-top:170px; }
.hero h1 { font-size:clamp(72px,6.6vw,100px); letter-spacing:-.065em; line-height:1.02; }
.hero-description { max-width:420px; line-height:1.7; color:#b6bdb2; }
.hero-visual {
  top:166px; right:max(var(--gutter),calc((100vw - 1296px)/2));
  width:46%; max-width:650px; height:530px; opacity:1;
  mask-image:none; pointer-events:auto; z-index:3;
}
.hero-visual canvas { position:absolute; inset:44px 0 auto; height:345px; width:100%; }
.hero::before { background-size:64px 64px; }
.hero::after { opacity:.3; }
.scene-heading {
  position:absolute; inset:0 0 auto; display:flex; gap:12px;
  align-items:center; justify-content:space-between; min-height:32px;
  color:#afbaa6; font: .75rem/1.5 var(--mono); letter-spacing:.06em;
}
.scene-kind { color:#7f8a77; font-size:.75rem; letter-spacing:0; }
.hero-visual .scene-heading { border-bottom:1px solid #a7bd9028; padding-bottom:15px; }
.core-legend {
  position:absolute; inset:375px 0 auto; display:grid; grid-template-columns:1fr 1fr 1fr;
  color:#aebea0; text-align:center; font:.75rem/1.5 var(--mono); letter-spacing:.06em;
}
.core-legend span:first-child { text-align:left; padding-left:5%; }
.core-legend span:last-child { text-align:right; padding-right:5%; }
.scene-controls {
  position:absolute; inset:auto 0 46px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.scene-step {
  position:relative; background:none; border:0; border-top:1px solid #80956b55;
  padding:15px 0 9px; text-align:left; color:#8d9a82; font-size:.875rem;
  display:flex; align-items:center; gap:9px; min-height:46px;
  transition:color .25s;
}
.scene-step span { font:.75rem var(--mono); opacity:.7; }
.scene-step i { position:absolute; top:-1px; left:0; height:1px; width:100%; transform:scaleX(0); transform-origin:left; background:#c8e8ae; box-shadow:0 0 10px #b6e78d77; }
.scene-step.is-active { color:#e4f2d9; }
.scene-step.is-active i { transform:scaleX(var(--phase-progress,.15)); }
.scene-step:hover,.scene-step:focus-visible { color:#fff; }
.scene-caption { position:absolute; bottom:0; inset-inline:0; min-height:36px; font-size:.8125rem; color:#a7b59c; line-height:1.6; }
.product-grid { gap:30px; }
.product { display:flex; flex-direction:column; }
.product-art { height:390px; flex-shrink:0; background:#e9ede4; }
.product-art::after { display:none; }
.product-art canvas { position:absolute; inset:45px 0 auto; width:100%; height:235px; }
.product-art .scene-heading { inset:17px 24px auto; color:#4f5b46; font-size:.75rem; }
.product-art .scene-kind { color:#68735f; font-size:.75rem; }
.product-art .scene-controls { inset:auto 24px 58px; gap:16px; }
.product-art .scene-step { color:#6c775f; border-color:#71835c55; }
.product-art .scene-step.is-active,.product-art .scene-step:hover { color:#21371b; }
.product-art .scene-step i { background:#577c3d; box-shadow:none; }
.product-art .scene-caption { inset-inline:24px; bottom:12px; color:#56634b; font-size:.8125rem; }
.sentinel-art { background:#e7ece5; }
.product-content { display:flex; flex-direction:column; flex:1; }
.product-content>p { flex:1; min-height:109px; }
.product-category { font-size:.75rem; text-align:right; }
.product-identity { flex-wrap:wrap; }
.product h4 { font-size:clamp(27px,2.35vw,35px); }
.product.pointer-active canvas { translate:calc(var(--art-x,0px) * .35) calc(var(--art-y,0px) * .35); transition:translate .25s; }
.approach-intro { gap:60px; }
.approach-intro h2 { white-space:normal; font-size:clamp(36px,4vw,58px); max-width:720px; }
.approach-intro>p { max-width:370px; }
.principles { gap:36px; margin-top:64px; }
.principles p { font-size:1rem; }
.principles article { overflow:hidden; padding-top:24px; }
.principles article::after {
  content:""; position:absolute; inset:0 auto auto 0; width:25%; height:1px;
  background:linear-gradient(90deg,transparent,#c6e5ac,transparent);
  animation:mission-flow 5s linear infinite; animation-play-state:paused;
}
.principles.in-view article::after { animation-play-state:running; }
.principles article:nth-child(2)::after { animation-delay:-3.33s; }
.principles article:nth-child(3)::after { animation-delay:-1.66s; }
@keyframes mission-flow { from { transform:translateX(-100%); } to { transform:translateX(400%); } }
.contact h2 { font-size:clamp(38px,4.2vw,62px); }
.interaction-field { opacity:.5; }
@media(min-width:1600px) { .hero-content { padding-top:170px; } }
@media(max-width:1100px) and (min-width:1051px) {
  .hero h1 { font-size:76px; }
  .hero-description { max-width:365px; }
  .hero-visual { right:4%; width:46%; }
}
@media(max-width:1050px) {
  .hero { display:flex; flex-direction:column; height:auto; min-height:0; max-height:none; padding-bottom:100px; }
  .hero-content { width:100%; padding-top:140px; order:0; }
  .hero h1 { font-size:clamp(60px,8vw,84px); }
  .hero-description { max-width:470px; }
  .hero-visual { position:relative; top:auto; right:auto; width:calc(100% - var(--gutter) * 2); height:490px; max-width:700px; margin:55px auto 0; order:1; translate:none; }
  .hero-visual canvas { height:310px; }
  .core-legend { top:340px; }
  .hero-bottom { order:2; }
  .approach-intro { flex-direction:column; gap:28px; }
  .approach-intro>p { max-width:650px; }
  .product-art .scene-heading { flex-wrap:wrap; gap:3px 10px; }
  .product-art .scene-kind { display:none; }
}
@media(max-width:760px) {
  .hero-content { padding-top:128px; }
  .hero h1 { font-size:clamp(56px,10.9vw,76px); margin-top:24px; }
  .hero-eyebrow { max-width:none; font-size:.75rem; }
  .hero-description { margin-top:25px; font-size:1rem; max-width:420px; }
  .hero-visual { margin-top:46px; height:425px; width:calc(100% - var(--gutter) * 2); }
  .hero-visual canvas { top:45px; height:250px; }
  .hero-visual .scene-heading { font-size:.75rem; }
  .hero-visual .scene-kind { display:none; }
  .core-legend { top:290px; font-size:.75rem; letter-spacing:0; }
  .scene-controls { gap:12px; bottom:52px; }
  .scene-step { font-size:.875rem; gap:6px; flex-wrap:wrap; padding-top:12px; }
  .scene-caption { min-height:42px; font-size:.8125rem; }
  .product-art { height:365px; }
  .product-art canvas { height:220px; }
  .product-art .scene-controls { bottom:56px; }
  .product-art .scene-heading { inset-inline:20px; }
  .product-art .scene-controls,.product-art .scene-caption { inset-inline:20px; }
  .product-art .scene-kind { display:block; }
  .product-identity { align-items:center; }
  .product-category { flex-basis:auto; text-align:left; }
  .product-content>p { min-height:0; }
  .product h4 { font-size:1.875rem; }
  .approach-intro h2 { font-size:clamp(33px,7vw,46px); }
  .principles { margin-top:39px; gap:29px; }
  .contact h2 { font-size:clamp(35px,7.6vw,50px); }
}
@media(max-width:400px) {
  .product-art .scene-kind { display:none; }
  .scene-step { column-gap:4px; font-size:.8125rem; }
  .scene-step span { font-size:.75rem; }
  .hero h1 { font-size:clamp(49px,14vw,57px); }
  .product-category { flex-basis:100%; }
  .product-art .scene-controls { gap:9px; }
}
html:not([data-motion="running"]) .scene-step.is-active i { transform:scaleX(1); }
@media(prefers-reduced-motion:reduce) { .scene-step.is-active i { transform:scaleX(1); } }

/* Public product identities keep the inner workings private. */
.product-art { height:330px; }
.product-art canvas { top:42px; height:246px; }
.product-art .scene-heading { gap:12px; }
.art-signature { position:absolute; bottom:18px; inset-inline:24px; display:flex; gap:12px; align-items:center; color:#697c58; font:.75rem/1.5 var(--mono); letter-spacing:.04em; }
.art-signature>span:last-child { margin-left:auto; }
.signature-line { height:1px; width:24px; background:#839770; }
.product-content>p { min-height:82px; }
.dialog-actions { margin-top:30px; }
@media(max-width:760px) {
  .product-art { height:300px; }
  .product-art canvas { height:220px; }
  .product-art .scene-kind { font-size:.75rem; }
  .art-signature { inset-inline:20px; font-size:.75rem; letter-spacing:0; }
  .product-content>p { min-height:0; }
}
@media(max-width:430px) { .product-art .scene-kind { display:none; } }