/* Code Systems — public illustration polish, 2026-10-28.
 * CSS-only enhancement of the deployed HomeCinematic/HomeStory contract.
 * Decorative layers never indicate real agents, work, provider status or people.
 * No image replacement, document hiding, page-wide motion or interaction changes.
 */
html[data-ui="5"] #root .ui5-home.home-story {
 --cx-energy:rgba(40,145,183,.24);
 --cx-energy-faint:rgba(62,158,190,.1);
 --cx-edge:rgba(49,143,174,.4);
 --cx-grid:rgba(64,137,161,.13);
 --cx-frame:#edf8fc;
 --cx-rail:#4d91a8;
 --cx-shine:rgba(210,241,253,.32);
}
html[data-ui="5"][data-theme="dark"] #root .ui5-home.home-story {
 --cx-energy:rgba(208,218,224,.15);
 --cx-energy-faint:rgba(192,202,210,.055);
 --cx-edge:rgba(209,218,224,.27);
 --cx-grid:rgba(208,218,224,.075);
 --cx-frame:#181a1c;
 --cx-rail:#aeb8bf;
 --cx-shine:rgba(225,231,237,.15);
}

/* One clear stage for the existing full illustration; retain image geometry. */
html[data-ui="5"] #root .ui5-home .hs-hero-assembly {
 position:relative;
 min-width:0;
 padding:12px;
 border:1px solid var(--cx-edge);
 border-radius:26px;
 background:linear-gradient(145deg,var(--home-surface),var(--cx-frame));
 box-shadow:0 24px 56px rgba(10,30,40,.12);
 isolation:isolate;
}
html[data-ui="5"] #root .ui5-home .hs-hero-assembly::before {
 content:"";
 position:absolute;
 inset:10px;
 z-index:-1;
 border-radius:18px;
 background:radial-gradient(ellipse at 70% 40%,var(--cx-energy),transparent 68%);
 pointer-events:none;
}
html[data-ui="5"] #root .ui5-home .hs-hero-assembly > figcaption {
 padding-block:2px;
 font-size:11px;
 line-height:1.5;
}
html[data-ui="5"] #root .ui5-home .home-assembly-illustration {
 border-color:var(--cx-edge);
 border-radius:16px;
 background:#111820;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
html[data-ui="5"] #root .ui5-home .home-assembly-image {
 object-fit:contain;
 opacity:1;
}
html[data-ui="5"] #root .ui5-home .home-assembly-halo {
 background:radial-gradient(ellipse at 68% 47%,rgba(138,211,241,.15),transparent 54%);
 box-shadow:inset 0 0 32px rgba(8,16,27,.18);
}
html[data-ui="5"] #root .ui5-home .home-assembly-illustration::after {
 content:"";
 position:absolute;
 inset:0;
 border-radius:inherit;
 pointer-events:none;
 opacity:.6;
 background:linear-gradient(110deg,transparent 12%,var(--cx-shine) 34%,transparent 52%);
 transform:translateX(-72%);
}

/* Each existing product illustration gets its own quiet spatial frame.
 * Copy and controls remain on an opaque, stationary surface.
 */
html[data-ui="5"] #root .ui5-home .hs-scene {
 border-color:var(--cx-edge);
 box-shadow:0 18px 50px rgba(10,24,30,.07);
}
html[data-ui="5"] #root .ui5-home .hs-scene-visual {
 position:relative;
 isolation:isolate;
 padding:14px;
 border:1px solid var(--cx-edge);
 border-radius:22px;
 background:linear-gradient(140deg,var(--cx-frame),var(--home-raised));
}
html[data-ui="5"] #root .ui5-home .hs-scene-visual::before {
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 border-radius:inherit;
 pointer-events:none;
 background:
  radial-gradient(ellipse at var(--cx-origin,20% 15%),var(--cx-energy),transparent 66%),
  linear-gradient(90deg,var(--cx-grid) 1px,transparent 1px),
  linear-gradient(var(--cx-grid) 1px,transparent 1px);
 background-size:auto,32px 32px,32px 32px;
}
html[data-ui="5"] #root .ui5-home .hs-scene-visual::after {
 content:"";
 position:absolute;
 inset-inline-start:14px;
 inset-block-end:6px;
 width:48px;
 height:2px;
 border-radius:2px;
 background:var(--cx-rail);
 pointer-events:none;
 transform-origin:center;
}
html[data-ui="5"] #root .ui5-home [data-story-scene="ai"] {--cx-origin:85% 20%}
html[data-ui="5"] #root .ui5-home [data-story-scene="workspace"] {--cx-origin:40% 90%}
html[data-ui="5"] #root .ui5-home [data-story-scene="mail"] {--cx-origin:90% 75%}
html[data-ui="5"] #root .ui5-home [data-story-scene="security"] {--cx-origin:50% 40%}
html[data-ui="5"] #root .ui5-home .hs-scene-visual > .hs-window {
 position:relative;
 box-shadow:0 8px 24px rgba(10,24,30,.09);
 background:var(--home-surface);
}

/* The digital team is an illustration, shown whole and never presented as staff. */
html[data-ui="5"] #root .ui5-home .home-workforce-illustration {
 position:relative;
 isolation:isolate;
 height:clamp(245px,36vw,440px);
 border-color:var(--cx-edge);
 border-radius:22px;
 background:radial-gradient(ellipse at 50% 100%,rgba(66,144,175,.16),transparent 72%),#101820;
 box-shadow:0 22px 50px rgba(10,24,30,.1);
}
html[data-ui="5"][data-theme="dark"] #root .ui5-home .home-workforce-illustration {
 background:radial-gradient(ellipse at 50% 100%,rgba(204,212,220,.09),transparent 72%),#141618;
}
html[data-ui="5"] #root .ui5-home .home-workforce-illustration > img {
 position:relative;
 z-index:1;
 object-fit:contain;
}
html[data-ui="5"] #root .ui5-home .home-workforce-illustration::before,
html[data-ui="5"] #root .ui5-home .home-workforce-illustration::after {
 content:"";
 position:absolute;
 inset:12% 8%;
 border:1px solid rgba(159,202,221,.2);
 border-radius:50%;
 pointer-events:none;
 transform:rotate(-8deg) scaleY(.5);
}
html[data-ui="5"] #root .ui5-home .home-workforce-illustration::after {
 inset:20% 3%;
 border-style:dashed;
 opacity:.55;
 transform:rotate(8deg) scaleY(.55);
}
html[data-ui="5"] #root .ui5-home .hs-workforce > figcaption {
 line-height:1.5;
 padding-block:3px;
}

/* Editorial composition: open chapters, generous art, short readable columns.
 * The five existing scenes remain in document order and keep every sample label.
 */
html[data-ui="5"] #root .ui5-home.home-story :is(.hs-hero,.hs-chapter-nav,.hs-story-stack,.hs-family,.hs-final) {
 width:min(1200px,calc(100% - 64px));
}
html[data-ui="5"] #root .ui5-home .hs-hero {
 gap:clamp(30px,5vw,68px);
 padding-block:64px 58px;
 min-height:0;
}
html[data-ui="5"] #root .ui5-home .hs-hero h1 {
 font-size:clamp(38px,4.1vw,64px);
 line-height:1.1;
 letter-spacing:-.035em;
}
html[data-ui="5"] #root .ui5-home .hs-chapter-nav {
 padding-block:12px;
 margin-bottom:0;
 border-block-start:0;
}
html[data-ui="5"] #root .ui5-home .hs-chapter-nav > a {
 min-height:44px;
 font-size:12px;
}
html[data-ui="5"] #root .ui5-home .hs-scene {
 position:relative;
 top:auto;
 z-index:auto;
 grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
 min-height:0;
 gap:clamp(28px,5vw,72px);
 padding:72px 0;
 margin:0;
 border:0;
 border-block-end:1px solid var(--home-line);
 border-radius:0;
 background:transparent;
 box-shadow:none;
}
html[data-ui="5"] #root .ui5-home .hs-scene-copy {max-width:440px}
html[data-ui="5"] #root .ui5-home .hs-chapter {
 font-size:11px;
 letter-spacing:.065em;
 line-height:1.6;
}
html[data-ui="5"] #root .ui5-home .hs-story-word {
 font-size:clamp(34px,3.8vw,54px);
 font-weight:550;
 letter-spacing:-.035em;
 margin-block:20px 12px;
}
html[data-ui="5"] #root .ui5-home .hs-scene h2 {
 font-size:clamp(24px,2.45vw,35px);
 line-height:1.24;
 letter-spacing:-.025em;
 margin-bottom:16px;
}
html[data-ui="5"] #root .ui5-home .hs-scene-copy > p {
 font-size:15px;
 line-height:1.75;
 max-width:40ch;
}
html[data-ui="5"] #root .ui5-home .hs-scene-visual {
 padding:24px;
 border:0;
 border-radius:20px;
}
html[data-ui="5"] #root .ui5-home .hs-scene-visual > .hs-window {border-radius:12px}
html[data-ui="5"] #root .ui5-home .hs-scene-visual::after {inset-inline-start:24px;inset-block-end:10px}
html[data-ui="5"] #root .ui5-home .hs-tags {gap:6px;margin-block:16px 10px}
html[data-ui="5"] #root .ui5-home .hs-chip {border-radius:5px;padding:3px 6px;background:transparent}
html[data-ui="5"] #root .ui5-home .hs-scope {margin-top:14px;line-height:1.7}
html[data-ui="5"] #root .ui5-home .hs-text-link {min-height:44px;text-underline-offset:5px}
html[data-ui="5"] #root .ui5-home .hs-family {padding-block:64px 40px}
html[data-ui="5"] #root .ui5-home .hs-section-heading {margin-bottom:28px;gap:24px}
html[data-ui="5"] #root .ui5-home .hs-section-heading h2 {font-size:clamp(25px,3vw,38px);line-height:1.2;letter-spacing:-.025em}
html[data-ui="5"] #root .ui5-home .hs-product-family {gap:0 24px;grid-template-columns:repeat(4,minmax(0,1fr))}
html[data-ui="5"] #root .ui5-home .hs-family-product {
 min-height:106px;
 flex-direction:row;
 align-items:center;
 gap:12px;
 padding:18px 2px;
 border:0;
 border-block-end:1px solid var(--home-line);
 border-radius:0;
 background:transparent;
 transform:none;
}
html[data-ui="5"] #root .ui5-home .hs-family-product:hover {
 background:var(--home-raised);
 border-color:var(--home-accent);
 transform:none;
}
html[data-ui="5"] #root .ui5-home .hs-product-glyph {width:60px}
html[data-ui="5"] #root .ui5-home .hs-family-product h3 {font-size:13px}
html[data-ui="5"] #root .ui5-home .hs-family-product div > span {font-size:11px;line-height:1.5}
html[data-ui="5"] #root .ui5-home .hs-family-arrow {inset-inline-end:4px;top:9px}
html[data-ui="5"] #root .ui5-home .hs-final {
 padding:40px 0;
 margin-bottom:24px;
 border:0;
 border-block-start:1px solid var(--home-line);
 border-radius:0;
 background:transparent;
}

/* Verified shared public footer only. Its links, legal copy and choices stay. */
html[data-ui="5"] #root .public-shell .site-footer {
 border-block-start:1px solid var(--border,#cad9df);
 box-shadow:none;
}
html[data-ui="5"] #root .public-shell .site-footer-main {
 width:min(1200px,calc(100% - 64px));
 margin-inline:auto;
 padding:40px 0 28px;
 gap:28px;
 grid-template-columns:minmax(180px,1.2fr) repeat(3,minmax(0,1fr));
}
html[data-ui="5"] #root .public-shell .site-footer-col h2 {font-size:13px;line-height:1.5;margin-block:0 8px}
html[data-ui="5"] #root .public-shell .site-footer-col a {font-size:12px;line-height:1.5;min-height:32px;padding-block:7px;overflow-wrap:anywhere}
html[data-ui="5"] #root .public-shell .site-footer-brand p {max-width:30ch;font-size:13px;line-height:1.7}
html[data-ui="5"] #root .public-shell .site-footer-bottom {
 width:min(1200px,calc(100% - 64px));
 margin-inline:auto;
 padding:20px 0;
 gap:14px;
 font-size:11px;
 flex-wrap:wrap;
}
html[data-ui="5"] #root .public-shell .site-footer-bottom nav {display:flex;flex-wrap:wrap;gap:4px 18px}
html[data-ui="5"] #root .public-shell .site-footer-bottom nav a {min-height:32px;display:inline-flex;align-items:center;font-size:11px}
@media (max-width:1000px) {
 html[data-ui="5"] #root .ui5-home .hs-product-family {grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px}
 html[data-ui="5"] #root .ui5-home .hs-scene {gap:26px;padding-block:48px}
 html[data-ui="5"] #root .ui5-home .hs-scene-visual {padding:15px}
 html[data-ui="5"] #root .public-shell .site-footer-main {grid-template-columns:repeat(3,minmax(0,1fr))}
 html[data-ui="5"] #root .public-shell .site-footer-brand {grid-column:1/-1}
}
@media (max-width:760px) {
 html[data-ui="5"] #root .ui5-home .hs-hero {grid-template-columns:1fr;max-width:600px;padding-block:32px;gap:24px}
 html[data-ui="5"] #root .ui5-home .hs-scene {grid-template-columns:1fr;gap:24px;padding-block:36px}
 html[data-ui="5"] #root .ui5-home .hs-scene-copy {max-width:560px}
 html[data-ui="5"] #root .ui5-home .hs-scene-copy > p {max-width:54ch}
 html[data-ui="5"] #root .ui5-home .hs-scene-visual {max-width:600px;width:100%;margin-inline:auto}
 html[data-ui="5"] #root .ui5-home .hs-product-family {grid-template-columns:repeat(2,minmax(0,1fr))}
 html[data-ui="5"] #root .ui5-home .hs-section-heading {flex-wrap:wrap;gap:8px}
}

/* Finite reveal enhancements only. Existing observer owns scene visibility.
 * Animations target decoration, never text, forms, dashboards or live state.
 * Unobserved/offscreen scenes add no extra running animation.
 */
@media (prefers-reduced-motion:no-preference) {
 html[data-ui="5"]:not(.a11y-no-motion):not([data-ui-effects="reduced"]) #root .ui5-home .home-assembly-illustration[data-assembly-active="true"]::after {
  animation:cx-assembly-light 6s cubic-bezier(.2,.6,.2,1) 1 both;
 }
 html[data-ui="5"]:not(.a11y-no-motion):not([data-ui-effects="reduced"]) #root .ui5-home [data-story-visible="true"] .hs-scene-visual::after {
  animation:cx-scene-rail 1.4s cubic-bezier(.2,.7,.2,1) 1 both;
 }
 html[data-ui="5"]:not(.a11y-no-motion):not([data-ui-effects="reduced"]) #root .ui5-home [data-story-visible="true"] .home-workforce-illustration::before {
  animation:cx-team-orbit 9s ease-out 1 both;
 }
 html[data-ui="5"]:not(.a11y-no-motion):not([data-ui-effects="reduced"]) #root .ui5-home [data-story-visible="true"] .home-workforce-illustration::after {
  animation:cx-team-orbit-reverse 11s ease-out 1 both;
 }
}
@keyframes cx-assembly-light {
 0%,12% {transform:translateX(-72%);opacity:0}
 30% {opacity:.55}
 80%,100% {transform:translateX(72%);opacity:0}
}
@keyframes cx-scene-rail {
 from {transform:scaleX(.2);opacity:.25}
 to {transform:scaleX(1);opacity:.85}
}
@keyframes cx-team-orbit {
 from {transform:rotate(-18deg) scaleY(.42);opacity:.25}
 to {transform:rotate(-8deg) scaleY(.5);opacity:.75}
}
@keyframes cx-team-orbit-reverse {
 from {transform:rotate(18deg) scaleY(.48);opacity:.2}
 to {transform:rotate(8deg) scaleY(.55);opacity:.55}
}

/* Small screens retain the complete face/team assets. No page-width scaling. */
@media (max-width:640px) {
 html[data-ui="5"] #root .ui5-home.home-story :is(.hs-hero,.hs-chapter-nav,.hs-story-stack,.hs-family,.hs-final) {width:calc(100% - 32px)}
 html[data-ui="5"] #root .ui5-home .hs-hero h1 {font-size:clamp(32px,8vw,42px);line-height:1.14}
 html[data-ui="5"] #root .ui5-home .hs-story-word {font-size:32px;margin-block:12px 8px}
 html[data-ui="5"] #root .ui5-home .hs-scene h2 {font-size:25px;max-width:100%}
 html[data-ui="5"] #root .ui5-home .hs-scene-copy > p {font-size:14px;line-height:1.7}
 html[data-ui="5"] #root .ui5-home .hs-family {padding-block:36px 26px}
 html[data-ui="5"] #root .ui5-home .hs-product-family {gap:0 14px}
 html[data-ui="5"] #root .ui5-home .hs-family-product {min-height:92px;gap:9px;padding:14px 0;align-items:flex-start;flex-direction:column}
 html[data-ui="5"] #root .ui5-home .hs-product-glyph {width:48px}
 html[data-ui="5"] #root .ui5-home .hs-family-product h3 {font-size:12px}
 html[data-ui="5"] #root .ui5-home .hs-family-product div > span {font-size:10px}
 html[data-ui="5"] #root .ui5-home .hs-final {padding-block:28px;margin-bottom:12px}
 html[data-ui="5"] #root .ui5-home .hs-hero-assembly {padding:7px;border-radius:18px}
 html[data-ui="5"] #root .ui5-home .home-assembly-illustration {border-radius:12px}
 html[data-ui="5"] #root .ui5-home .hs-scene-visual {padding:8px;border-radius:15px}
 html[data-ui="5"] #root .ui5-home .hs-scene-visual::after {inset-inline-start:10px;inset-block-end:3px;width:34px;height:1px}
 html[data-ui="5"] #root .ui5-home .home-workforce-illustration {height:auto;aspect-ratio:16/9;min-height:0;border-radius:15px}
 html[data-ui="5"] #root .ui5-home .home-workforce-illustration > img {height:100%}
 html[data-ui="5"] #root .ui5-home .hs-workforce > figcaption,
 html[data-ui="5"] #root .ui5-home .hs-hero-assembly > figcaption {font-size:10px}
 html[data-ui="5"] #root .public-shell .site-footer-main {width:calc(100% - 32px);padding-block:28px 18px;gap:22px 14px;grid-template-columns:repeat(2,minmax(0,1fr))}
 html[data-ui="5"] #root .public-shell .site-footer-col a {min-height:44px;padding-block:12px}
 html[data-ui="5"] #root .public-shell .site-footer-bottom {width:calc(100% - 32px);padding-block:16px 28px;gap:12px}
 html[data-ui="5"] #root .public-shell .site-footer-bottom nav {gap:2px 16px}
 html[data-ui="5"] #root .public-shell .site-footer-bottom nav a {min-height:44px}
}
html.a11y-no-motion #root .ui5-home .home-assembly-illustration::after,
html[data-ui-effects="reduced"] #root .ui5-home .home-assembly-illustration::after {display:none}
html.a11y-no-motion #root .ui5-home :is(.hs-scene-visual,.home-workforce-illustration)::before,
html.a11y-no-motion #root .ui5-home :is(.hs-scene-visual,.home-workforce-illustration)::after,
html[data-ui-effects="reduced"] #root .ui5-home :is(.hs-scene-visual,.home-workforce-illustration)::before,
html[data-ui-effects="reduced"] #root .ui5-home :is(.hs-scene-visual,.home-workforce-illustration)::after {animation:none!important}
@media (prefers-reduced-motion:reduce) {
 html[data-ui="5"] #root .ui5-home .home-assembly-illustration::after {display:none}
 html[data-ui="5"] #root .ui5-home :is(.hs-scene-visual,.home-workforce-illustration)::before,
 html[data-ui="5"] #root .ui5-home :is(.hs-scene-visual,.home-workforce-illustration)::after {animation:none!important}
}
@media (forced-colors:active) {
 html[data-ui="5"] #root .ui5-home :is(.hs-hero-assembly,.hs-scene-visual,.home-workforce-illustration) {background:Canvas;border:1px solid CanvasText;box-shadow:none}
 html[data-ui="5"] #root .ui5-home :is(.hs-hero-assembly,.hs-scene-visual,.home-assembly-illustration,.home-workforce-illustration)::before,
 html[data-ui="5"] #root .ui5-home :is(.hs-hero-assembly,.hs-scene-visual,.home-assembly-illustration,.home-workforce-illustration)::after {display:none}
}
@media print {
 html[data-ui="5"] #root .ui5-home :is(.hs-hero-assembly,.hs-scene-visual,.home-workforce-illustration) {box-shadow:none}
 html[data-ui="5"] #root .ui5-home :is(.hs-hero-assembly,.hs-scene-visual,.home-assembly-illustration,.home-workforce-illustration)::before,
 html[data-ui="5"] #root .ui5-home :is(.hs-hero-assembly,.hs-scene-visual,.home-assembly-illustration,.home-workforce-illustration)::after {display:none}
}