.principles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px 34px}
.principles li{border-top:2px solid var(--accent);padding-top:16px}
.principles h3{font-size:18px;margin:0 0 8px}
.principles p{font-size:14px;line-height:1.9;margin:0}
.journey-flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--ink)}
.journey-flow li{padding:22px 18px 24px;border-right:1px solid var(--line)}
.journey-flow li:first-child{padding-left:0}
.journey-flow li:last-child{border-right:0}
.journey-flow a{color:inherit;text-decoration:none}
.journey-flow span{display:block;font-size:11px;letter-spacing:.08em;color:var(--accent)}
.journey-flow strong{display:block;font-size:19px;font-weight:550;margin:10px 0 8px}
.journey-flow p{font-size:13px;line-height:1.8;color:var(--muted);margin:0}
.journey-flow small{display:block;margin-top:12px;font-size:11px}
.price-ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:10px 0 30px}
.price-ladder article{border:1px solid var(--line);background:var(--mint);padding:20px}
.price-ladder span{font-size:11px;color:var(--muted)}
.price-ladder strong{display:block;font-size:22px;font-weight:550;margin:8px 0;font-variant-numeric:tabular-nums}
.price-ladder p{font-size:13px;line-height:1.8;margin:0}
.stage-note{font-size:12px;color:var(--muted);margin:0 0 20px}
@media(max-width:1000px){.journey-flow{grid-template-columns:repeat(3,1fr)}.journey-flow li:nth-child(3n){border-right:0}.journey-flow li:nth-child(3n+1){padding-left:0}.journey-flow li:nth-child(n+4){border-top:1px solid var(--line)}.price-ladder{grid-template-columns:repeat(2,1fr)}.principles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.journey-flow,.price-ladder,.principles{grid-template-columns:1fr}.journey-flow li{padding:18px 0;border-right:0}.journey-flow li+li{border-top:1px solid var(--line)}}

/* Company page: everything is readable at rest. The hero artwork carries the one animated moment;
   the only other motion follows the reader's own scrolling through the two real sequences. */
.company-page .hero-project{margin-left:28px;color:var(--muted);font-size:13px;position:relative;z-index:1}
.company-page .hero-project:hover{color:var(--accent);text-decoration:underline}
.company-page .principles li{background:#fff;border:1px solid var(--line);border-top:2px solid var(--accent);padding:18px 20px}
.company-page .principles{align-items:start}
.company-page .evidence-rows article{grid-template-columns:220px 1fr;align-items:start}
.company-page .sequence li>span{color:var(--accent)}

/* Journey: a line that fills as the reader scrolls past each step; dots and icons light in turn. */
.company-page .journey-flow{gap:0;border-top:0;position:relative}
.company-page .journey-flow:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);transform:scaleX(var(--p,1));transform-origin:left;transition:transform .15s linear}
.company-page .journey-flow li{position:relative;background:transparent;border-top:1px solid var(--line)}
.company-page .journey-flow li:before{content:'';position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid #b9c7b3;transition:background .4s,border-color .4s}
.company-page .journey-flow li.lit:before{background:var(--accent);border-color:var(--accent)}
.company-page .journey-flow li.lit strong,.company-page .journey-flow li:hover strong{color:var(--accent)}
@media(max-width:1000px){.company-page .journey-flow li{border-right:1px solid var(--line)}}
@media(max-width:600px){.company-page .hero-project{display:block;margin:0 0 20px}.company-page .evidence-rows article{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.company-page .journey-flow:before{transform:none;transition:none}}

/* Film band */
.film{padding:70px max(6%,calc((100vw - 1200px)/2)) 20px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.2fr);gap:40px;align-items:center}
.film-head h2{font-size:clamp(28px,3vw,40px);line-height:1.4;margin:12px 0 0}
.film-frame{margin:0;position:relative}
.film-frame video{display:block;width:100%;aspect-ratio:16/9;background:var(--dark);border:1px solid var(--line);box-shadow:0 24px 50px -28px rgba(37,53,46,.55)}
.film-frame figcaption{font-size:12px;color:var(--muted);margin-top:10px}
.film-play{position:absolute;left:50%;top:78%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;gap:14px;padding:16px 30px;border:0;border-radius:40px;background:var(--accent);color:#fff;font:inherit;font-size:16px;letter-spacing:.06em;cursor:pointer;box-shadow:0 14px 34px -10px rgba(0,0,0,.5);transition:transform .2s,background .2s,opacity .3s}
.film-play span{font-size:18px}
.film-play:hover{transform:translate(-50%,-50%) scale(1.05);background:#8f3c20}
.film-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.film-play.hidden{opacity:0;pointer-events:none}
@media(max-width:900px){.film{grid-template-columns:1fr;gap:22px;padding-top:44px}.film-play{padding:12px 22px;font-size:14px}}
@media print{.film{display:none}}