/* Revision 05: a distinct visual role for each chapter. */
.service-meta{display:flex;align-items:center;flex-direction:column;gap:9px}
.service-icon{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.service-meta small{font-size:8px;letter-spacing:.08em}
.service-choice.is-active .service-icon,.service-choice:hover .service-icon{transform:translateY(-2px);color:var(--action)}
.panel-service-icon{width:62px;height:62px;color:#f2a4cf;stroke-width:1.2}
.service-panel-top{align-items:center}
.service-panel-top .service-symbol{width:55px;margin-left:auto}
.service-panel-top .micro{margin-right:22px}
.people-image.office-concept{display:flex;flex-direction:column;justify-content:center;gap:35px;padding:50px 36px;background:#101438;min-height:0}
.office-concept .process-visual-heading{order:0;font-size:clamp(35px,3.6vw,60px);line-height:1.1;letter-spacing:-.05em;color:#f8f7f4;max-width:430px}
.office-concept .process-visual-heading em{color:#f2a4cf}
.office-concept.has-media>.approved-image{order:1;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;border:1px solid #ffffff18}
.office-concept.has-media .image-caption{order:2;position:relative;inset:auto;background:none;padding:0;gap:20px;align-items:center;color:#bbbfd3;font-size:10px}
.office-concept .image-caption span:last-child{border:1px solid #ffffff30;border-radius:30px;padding:8px 12px;white-space:nowrap}
.film-button{display:flex;align-items:center;gap:9px;margin-top:12px;color:#d2d5e6;font-size:10px;background:none;border:0;padding:4px 0;min-height:36px}
.film-button>span{display:grid;place-items:center;border:1px solid #ffffff50;border-radius:50%;width:28px;height:28px;font-size:9px;transition:background .2s,color .2s}
.film-button:hover>span{background:#f2a4cf;color:#101438}
.film-dialog{max-width:1100px;width:calc(100% - 40px);padding:42px 20px 20px;background:#090d2b;color:white;overflow:visible}
.film-dialog video{display:block;width:100%;max-height:72svh;background:#090d2b;aspect-ratio:16/9;object-fit:contain}
.film-dialog .dialog-close{color:white}
.film-dialog p{margin:16px 0 0;font-size:11px;color:#b7bbd2;line-height:1.7}
.film-dialog::backdrop{background:#050718ed}
.cursor-toggle{min-height:36px}
@media(hover:hover) and (pointer:fine){html.brand-cursor a,html.brand-cursor button,html.brand-cursor summary{cursor:url('assets/cursor-arrow.svg') 6 6,pointer}}
@media(max-width:1050px){.people-image.office-concept{padding:40px 25px;gap:28px}.office-concept .image-caption{flex-wrap:wrap}.panel-service-icon{width:52px;height:52px}}
@media(max-width:760px){.people-image.office-concept{padding:42px 24px;order:2}.office-concept .process-visual-heading{font-size:42px}.office-concept.has-media .image-caption{font-size:9px}.service-icon{width:26px;height:26px}.service-choice{grid-template-columns:38px 1fr 25px}.service-meta{gap:4px}.film-button{margin-top:0;min-height:44px}.hero-motion{flex-wrap:wrap}.film-dialog{width:calc(100% - 24px);padding:40px 12px 15px}}
@media(prefers-reduced-motion:reduce){.service-icon,.film-button>span{transition:none}}
/* Service palettes stay within Qlevel navy, magenta and their tints. */
.service-panel{--card-bg:#11143d;--card-ink:#fff;--card-muted:#c5c5d3;--card-line:#ffffff38;--card-accent:#f3a7d0;--card-button:#f8f5f7;--card-button-ink:#11143d;background:var(--card-bg);color:var(--card-ink);transition:background-color .45s ease,color .3s ease}
.service-panel[data-service=hr]{--card-bg:#f3dbe9;--card-ink:#14143c;--card-muted:#5b4055;--card-line:#57324935;--card-accent:#b90068;--card-button:#14143c;--card-button-ink:#fff}
.service-panel[data-service=outsourcing]{--card-bg:#383774;--card-ink:#fff;--card-muted:#e0dff1;--card-line:#ffffff38;--card-accent:#f2aed1;--card-button:#f2d8e7;--card-button-ink:#171638}
.service-panel[data-service=legalization]{--card-bg:#e9e9f3;--card-ink:#171638;--card-muted:#54536b;--card-line:#17163833;--card-accent:#b90068;--card-button:#171638;--card-button-ink:#fff}
.service-panel[data-service=payroll]{--card-bg:#b50064;--card-ink:#fff;--card-muted:#ffe0ef;--card-line:#ffffff55;--card-accent:#fff;--card-button:#fff3f8;--card-button-ink:#860049}
.service-panel p{color:var(--card-muted)}
.service-panel li{border-color:var(--card-line)}
.service-panel .button{background:var(--card-button);color:var(--card-button-ink);border-color:transparent}
.service-panel .panel-service-icon{color:var(--card-accent);width:76px;height:76px;margin-left:auto;stroke-width:1.15}
.service-panel .service-symbol{display:none}
.service-panel-top{height:100px}
.service-panel.is-changing .panel-service-icon{animation:service-icon-enter .5s var(--ease)}
@keyframes service-icon-enter{from{opacity:0;transform:translateY(7px) scale(.92)}to{opacity:1;transform:none}}
.office-video{display:none;order:1;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border:1px solid #ffffff18}
.office-video.is-playing{display:block}
.office-concept:has(.office-video.is-playing)>.approved-image{display:none}
@media(prefers-reduced-motion:reduce){.service-panel{transition:none}.service-panel.is-changing .panel-service-icon{animation:none}}
.motion-paused .service-panel.is-changing .panel-service-icon{animation:none}

/* Compact team window after removing the caption row. */
#how-we-connect .people-copy{padding-bottom:32px}
#how-we-connect .people-image.office-concept{padding-bottom:32px}