.ecosystem-study .brand-study__caption { padding-block: var(--s1); gap: var(--s2); align-items: center; }
.ecosystem-study .brand-band__pause { --brand-control-height: 28px; padding-block: var(--s1); align-self: center; }
.integration-study { --integration-height:340px; --integration-gap:60px; --integration-radius:20px; --integration-light:#a8c6ff; --integration-dark:#17275d; --tool-size:58px; --tool-icon:28px; --tool-gap:40px; --tool-cycle:18000; position:relative; isolation:isolate; padding:var(--section-space) var(--s10); overflow:clip; }
.integration-grid { position:absolute; inset:0; width:100%; height:100%; z-index:-1; stroke:var(--v-ink); stroke-width:1; opacity:.07; mask-image:linear-gradient(#000,transparent); }
.integration-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--integration-gap); padding:100px var(--s10); }
.integration-copy { display:grid; gap:20px; justify-items:start; }
.integration-copy p { color:var(--v-muted); max-width:540px; font-size:var(--lead); }
.finish-action { display:inline-flex; align-items:center; justify-content:center; gap:var(--s3); min-height:44px; padding:var(--s2) var(--s4); color:var(--v-white); background:var(--v-blue); text-decoration:none; font-size:var(--action); transition:background var(--motion); }
.finish-action:hover { background:var(--v-navy); }
.finish-action--navy { background:var(--v-navy); }.finish-action--navy:hover { background:var(--v-ink); }
.finish-action--white { background:var(--v-white); color:var(--v-blue); }.finish-action--white:hover { background:var(--v-surface); }
.integration-visual { position:relative; height:var(--integration-height); border-radius:var(--integration-radius); background:linear-gradient(var(--integration-light),var(--integration-dark)); overflow:hidden; }
.tool-definitions { position:absolute; width:0; height:0; }
.tool-columns { display:flex; justify-content:space-evenly; height:100%; padding:20px 10px; mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent); }
.tool-column { flex:1; min-width:0; height:100%; overflow:hidden; }.tool-track { display:flex; flex-direction:column; }.tool-group { display:grid; justify-items:center; gap:var(--tool-gap); padding-bottom:var(--tool-gap); }
.tool-tile { position:relative; width:var(--tool-size); height:var(--tool-size); display:grid; place-content:center; justify-items:center; gap:var(--s1); background:var(--v-white); color:var(--v-navy); border-radius:var(--s2); }
.tool-tile svg { width:var(--tool-icon); height:var(--tool-icon); }.tool-tile span { font-size:var(--meta); line-height:1; position:absolute; left:50%; transform:translateX(-50%); top:calc(100% + 6px); color:white; }
.finish-caption { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-top:var(--s3); color:var(--v-muted); font-size:var(--meta); }
.finish-caption button { border:0; background:none; padding:var(--s2); min-height:44px; color:inherit; }.finish-caption button:hover { text-decoration:underline; }.finish-caption button[hidden] { display:none; }
.closing-study { --closing-height:350px; --closing-title:36px; --closing-travel:40; --footer-travel:80; --closing-photo-tint:rgba(16,41,110,.78); padding:var(--s10) var(--s10) var(--s4); overflow:clip; background:var(--v-surface); }
.closing-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); max-width:1200px; margin:auto; }
.closing-card { position:relative; isolation:isolate; overflow:hidden; min-height:var(--closing-height); padding:var(--s6); display:flex; flex-direction:column; justify-content:space-between; gap:var(--s8); color:var(--v-white); }
.closing-card .eyebrow { color:var(--v-white); }.closing-card h2 { font-size:var(--closing-title); line-height:1.1; max-width:350px; margin-bottom:var(--s6); }
.closing-card--electric { background:var(--v-blue); }.closing-card--photo { background:linear-gradient(var(--closing-photo-tint),var(--closing-photo-tint)),url('photos/office-towers.jpg') center/cover; }
.closing-card canvas { position:absolute; inset:0; width:100%; height:100%; z-index:-1; filter:invert(1); opacity:.65; }
.closing-study>.finish-caption { max-width:1200px; margin:var(--s1) auto; }
.finish-footer { max-width:1200px; margin:var(--s4) auto 0; padding:var(--s10) var(--s10) var(--s6); color:var(--v-white); background:var(--v-navy); }
.finish-footer__main { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s12); min-height:270px; }
.finish-footer__brand { display:grid; gap:var(--s4); }.finish-footer__brand .wordmark { font-size:20px; }.finish-footer__brand p { max-width:376px; }
.finish-footer nav { display:flex; gap:var(--s12); }.finish-footer ul { list-style:none; margin:0; padding:0; }.finish-footer li a { min-height:44px; display:flex; align-items:center; gap:var(--s8); padding:var(--s3); text-decoration:none; font:var(--meta)/1.5 'Chivo Mono',monospace; text-transform:uppercase; }.finish-footer li a:hover { background:rgba(255,255,255,.08); }.finish-footer li a span { opacity:.65; }.finish-footer a:focus-visible,.closing-card a:focus-visible { outline-color:white; }
.finish-footer__note { margin-top:var(--s14); padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.3); font-size:var(--meta); }
@media(max-width:1000px) { .integration-study { padding:0; }.integration-panel { grid-template-columns:minmax(0,1fr); gap:20px; padding:64px var(--s4); }.integration-study>.finish-caption { margin:0 var(--s4) var(--s6); }.closing-study { --closing-title:28px; padding:var(--s6) var(--s4) var(--s4); }.finish-footer { padding:var(--s6); }.finish-footer__main { align-items:flex-start; flex-direction:column; gap:var(--s6); }.finish-footer nav { flex-wrap:wrap; } }
@media(max-width:560px) { .ecosystem-study .brand-study__caption { align-items:flex-start; }.ecosystem-study .brand-band__pause { align-self:flex-start; }.closing-cards { grid-template-columns:minmax(0,1fr); }.finish-caption { align-items:flex-start; flex-direction:column; gap:var(--s1); }.finish-footer nav { gap:0; flex-direction:column; }.tool-tile { width:48px; }.tool-tile span { font-size:var(--meta); }.integration-visual { --tool-size:48px; } }
@media(pointer:coarse) { .ecosystem-study .brand-band__pause { --brand-control-height:44px; } }
@media(prefers-reduced-motion:reduce) { .tool-track { transform:none!important; }.tool-group[aria-hidden] { display:none; }.tool-columns { mask-image:none; }.tool-column { overflow:visible; }.tool-tile span { display:none; } }