/* Division IV — coordinated movement identity */
:root {
  --log-amber:#ffad52;
  --log-sand:#ffd19a;
  --log-coral:#ff7f63;
  --log-slate:#9b9c99;
  --log-ease:cubic-bezier(.16,1,.3,1);
}
.ph {
  min-height:740px;display:flex;align-items:center;
  background:linear-gradient(112deg,#0d0b09 0%,#11100f 55%,#15100b 100%);
}
.ph::after {
  background:
    linear-gradient(90deg,rgba(13,11,9,.98) 4%,rgba(13,11,9,.82) 47%,rgba(13,11,9,.18) 80%,rgba(13,11,9,.58)),
    radial-gradient(circle at 79% 46%,rgba(255,173,82,.07),transparent 35%);
}
.ph-inner { max-width:1200px;width:100%;padding-right:min(44vw,535px); }
.ph-h1 { font-size:clamp(3.4rem,7.4vw,7.1rem);letter-spacing:-.055em;line-height:.84; }
.ph-h1 .lo { color:var(--log-amber);opacity:1; }
.ph-div.wh { color:var(--log-sand); }
.motion-ready .ph-bc,.motion-ready .ph-div,.motion-ready .ph-h1,.motion-ready .ph-sub { animation:none;opacity:1; }

.log-routeboard {
  position:absolute;z-index:2;right:clamp(1rem,5vw,6rem);top:50%;width:clamp(390px,44vw,650px);
  aspect-ratio:1;transform:translateY(-46%);pointer-events:none;opacity:.82;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
}
.log-routeboard svg { width:100%;height:100%;overflow:visible; }
.route-grid,.route-contour,.route-path,.route-frame { fill:none;vector-effect:non-scaling-stroke; }
.route-grid { stroke:rgba(255,209,154,.065);stroke-width:.65; }
.route-contour { stroke:rgba(155,156,153,.24);stroke-width:.8; }
.route-frame { stroke:rgba(255,173,82,.38);stroke-width:1; }
.route-path { stroke:var(--log-amber);stroke-width:1.35; }
.route-secondary { fill:none;stroke:rgba(255,127,99,.48);stroke-width:1;stroke-dasharray:5 7; }
.route-node { fill:#120e0a;stroke:var(--log-sand);stroke-width:1.25; }
.route-node.active { fill:rgba(255,173,82,.12);stroke:var(--log-amber); }
.motion-ready .route-path,.motion-ready .route-frame {
  stroke-dasharray:1200;stroke-dashoffset:1200;animation:routeTrace 1.45s .35s var(--log-ease) forwards;
}
.motion-ready .route-secondary { animation:routeBranch 1s .8s backwards var(--log-ease); }
.motion-ready .route-node { animation:routeNode .45s 1s backwards var(--log-ease);transform-box:fill-box;transform-origin:center; }
.motion-ready .route-node:nth-child(6){animation-delay:1s}.motion-ready .route-node:nth-child(7){animation-delay:1.08s}.motion-ready .route-node:nth-child(8){animation-delay:1.16s}.motion-ready .route-node:nth-child(9){animation-delay:1.24s}
@keyframes routeTrace { to{stroke-dashoffset:0} }
@keyframes routeBranch { from{opacity:0;stroke-dashoffset:24} }
@keyframes routeNode { from{opacity:0;transform:scale(.3) rotate(-45deg)} }
.route-readout { position:absolute;right:5%;bottom:8%;padding:.42rem .65rem;border-left:1px solid rgba(255,173,82,.3);font:500 .5rem/1.7 'Share Tech Mono',monospace;letter-spacing:.16em;color:rgba(255,209,154,.52); }

#log-hero-field,#log-overview-field,#log-capability-field { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
.pg { position:relative;overflow:hidden;padding-top:7rem;padding-bottom:7rem; }
.pg .pgi { position:relative;z-index:2; }
.pg.alt { background:linear-gradient(135deg,#12100d,var(--bg2) 56%,#100d0a); }
.sl.wh { color:var(--log-amber)!important; }

.notice.or {
  position:relative;overflow:hidden;border-color:rgba(255,173,82,.14);border-left:2px solid var(--log-amber);
  background:linear-gradient(90deg,rgba(255,173,82,.055),rgba(255,173,82,.012) 58%,transparent);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}
.notice.or::after { content:'IV';position:absolute;right:1rem;top:50%;transform:translateY(-50%);font:800 4.8rem/1 'Exo 2',sans-serif;color:var(--log-amber);opacity:.035; }
.n-dot.or { background:var(--log-amber);box-shadow:0 0 0 3px rgba(255,173,82,.08); }
.panel {
  position:relative;overflow:hidden;border-color:rgba(255,173,82,.1);
  background:linear-gradient(145deg,rgba(24,20,16,.97),rgba(13,12,11,.95));
  clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px));
}
.panel::before { content:'IV';position:absolute;right:1rem;top:.45rem;font:800 6.6rem/1 'Exo 2',sans-serif;color:var(--log-amber);opacity:.025; }
.ptop { background:rgba(255,173,82,.025); }
.prow { transition:padding-left .3s var(--log-ease),background-color .3s; }
.prow:hover { padding-left:.55rem;background:rgba(255,173,82,.018); }

.steps { max-width:none!important;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative; }
.steps::before { content:'';position:absolute;left:8%;right:8%;top:2.55rem;height:1px;background:linear-gradient(90deg,transparent,var(--log-amber),var(--log-coral),transparent);opacity:.28; }
.step {
  position:relative;display:block;min-height:310px;padding:2rem;border:1px solid rgba(255,173,82,.09);
  background:linear-gradient(150deg,rgba(23,20,17,.97),rgba(12,12,11,.95));
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%);
  transition:transform .38s var(--log-ease),border-color .3s,background-color .3s;
}
.step::after { content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:linear-gradient(90deg,var(--log-amber),var(--log-coral));transition:width .55s var(--log-ease); }
.step:hover { transform:translateY(-6px);border-color:rgba(255,173,82,.23);background:#17130f; }
.step:hover::after { width:100%; }
.step-n { width:46px;height:46px;display:grid;place-items:center;margin-bottom:2rem;border:1px solid rgba(255,173,82,.26);background:var(--bg);color:var(--log-amber);transform:rotate(45deg);transition:transform .45s var(--log-ease),background-color .3s,color .3s; }
.step-n span { display:block;transform:rotate(-45deg);transition:transform .45s var(--log-ease); }
.step:hover .step-n { transform:rotate(135deg);background:var(--log-amber);color:#110c07; }
.step:hover .step-n span { transform:rotate(-135deg); }
.step-h { margin-bottom:1rem;color:var(--white); }

.cta { position:relative;overflow:hidden;background:linear-gradient(112deg,#120d09,#0c0b0a 57%,#151008); }
.cta::before { content:'COORDINATION';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 clamp(4rem,12vw,11rem)/1 'Exo 2',sans-serif;letter-spacing:.02em;color:var(--log-amber);opacity:.018; }
.cta-i { position:relative;z-index:1; }
.cta .btn-o:first-child { color:var(--log-amber);border-color:rgba(255,173,82,.28); }

[data-theme="light"] .ph { background:linear-gradient(112deg,#f1ece5,#efeae4 56%,#eee3d7); }
[data-theme="light"] .ph::after { background:linear-gradient(90deg,rgba(245,243,240,.98) 4%,rgba(245,243,240,.78) 48%,rgba(245,243,240,.14) 80%,rgba(245,243,240,.5)); }
[data-theme="light"] .log-routeboard { opacity:.5; }
[data-theme="light"] .route-grid { stroke:rgba(105,67,25,.09); }
[data-theme="light"] .route-contour { stroke:rgba(79,70,59,.28); }
[data-theme="light"] .route-frame,[data-theme="light"] .route-path { stroke:rgba(176,89,8,.52); }
[data-theme="light"] .route-secondary { stroke:rgba(181,66,41,.45); }
[data-theme="light"] .route-node { fill:#eee8e0;stroke:#9a550f; }
[data-theme="light"] .route-readout { color:rgba(105,57,14,.58);border-color:rgba(176,89,8,.28); }
[data-theme="light"] .pg.alt { background:linear-gradient(135deg,#ece5dc,var(--bg2) 56%,#e7ded3); }
[data-theme="light"] .notice.or,[data-theme="light"] .panel,[data-theme="light"] .step { background:linear-gradient(140deg,rgba(252,250,247,.98),rgba(232,223,211,.92));border-color:rgba(176,89,8,.14); }
[data-theme="light"] .step:hover { background:#f5eee5;border-color:rgba(176,89,8,.28); }
[data-theme="light"] .step-n { background:#f0ebe5;color:#a65309; }
[data-theme="light"] .step:hover .step-n { background:#c96912;color:#fff; }
[data-theme="light"] .cta { background:linear-gradient(112deg,#eee3d7,#f1efec 57%,#eadfce); }

@media(max-width:1000px){.ph-inner{padding-right:0}.log-routeboard{right:-18%;width:74vw;opacity:.15}.ph{min-height:690px}.steps{grid-template-columns:1fr}.steps::before{left:3.45rem;right:auto;top:2rem;bottom:2rem;width:1px;height:auto;background:linear-gradient(transparent,var(--log-amber),var(--log-coral),transparent)}.step{min-height:0;padding-left:6.3rem}.step-n{position:absolute;left:1.2rem;top:1.5rem}}
@media(max-width:700px){.log-routeboard{right:-50%;width:115vw;opacity:.09}.step{padding:5.6rem 1.5rem 1.5rem}.step-n{left:1.5rem;top:1.25rem}.steps::before{display:none}}
@media(prefers-reduced-motion:reduce){.motion-ready .route-path,.motion-ready .route-frame,.motion-ready .route-secondary,.motion-ready .route-node{animation:none;stroke-dashoffset:0}}