/* v8 — editorial composition. Existing motion and native controls remain the foundation. */
.hero{position:relative;background:radial-gradient(ellipse at 80% 40%,#26352b70,transparent 54%),var(--ink)}
.hero-layout{grid-template-columns:1.08fr 1fr;gap:22px;min-height:650px;padding-block:74px 58px}
.hero h1{font-size:clamp(46px,4.9vw,72px);font-weight:550;letter-spacing:-.06em;line-height:1.035}
.hero h1 em{display:inline-block;position:relative;padding-bottom:10px}
.hero h1 em:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--signal);transform-origin:left;animation:underline-draw .6s .15s backwards}
.hero-copy .lead{margin-block:28px 36px;color:#c9d1ca;font-size:21px;max-width:450px}
.hero-copy .eyebrow{font-size:11px;letter-spacing:.19em}
.hero-scene{margin:0 -16px 0 -12px;border:1px solid #dce5dd1a;border-radius:16px;min-height:465px;align-self:center;aspect-ratio:1.05;background:linear-gradient(#dce5dd06 1px,transparent 1px),linear-gradient(90deg,#dce5dd06 1px,transparent 1px);background-size:58px 58px}
.hero-art-frame{width:115%;flex-basis:115%;margin-left:-7.5%;position:relative;z-index:1}
.scene-heading{position:absolute;top:22px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.025em;color:#b4bcb6;z-index:2}
.scene-marker{font-variant-numeric:tabular-nums;color:#c9d1ca;border:1px solid #ffffff26;padding:4px 8px;border-radius:4px}
.floating-label{z-index:3;border-radius:8px}.label-crm{top:19%;left:2%}.label-erp{top:32%;right:-3%}.label-bi{bottom:17%;right:2%}
.art-caption{bottom:20px;left:22px;right:22px;display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.025em}
.art-caption i{height:5px;width:5px;border-radius:50%;background:var(--signal)}.art-caption>span{margin-left:auto;color:#7e9183;letter-spacing:.1em;font-size:9px}
.hero-baseline{padding-block:24px 28px}.hero-baseline>div{gap:8px}.hero-baseline button{border:1px solid #ffffff1a;border-radius:6px;padding:9px 15px;font-size:14px;flex:1;transition:background .2s,border-color .2s,color .2s}.hero-baseline button:hover{background:#ffffff08;border-color:#f5e50070}
.quiz-section{background:radial-gradient(ellipse at 85% 25%,#dce5dd95,transparent 55%),var(--paper)}
.quiz-panel{position:relative;background:#fcfcf8;border:1px solid #cdd2ca;box-shadow:0 32px 75px -45px #223c2c60;overflow:hidden;padding:38px}
.quiz-panel:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--signal) 25%,#dce5dd 25%)}
.quiz-top{padding-bottom:22px;border-bottom:1px solid #dce5dd;margin-bottom:28px}.quiz-progress i{height:4px;border-radius:1px}.quiz-panel h3{font-size:31px;line-height:1.2;letter-spacing:-.045em}
.quiz-option{background:#fff;border-color:#dce1da;padding-block:17px}.quiz-option:hover{background:#f2f5ee;box-shadow:inset 3px 0 #718778}.quiz-option[aria-checked=true]{background:#e6ece2;border-color:#8d9d8d;box-shadow:inset 3px 0 #151917}.option-check{width:25px;height:25px;border-color:#8b998e}
.quiz-baseline{background:#e3e9df;border-top:1px solid #cdd5c9}.quiz-baseline b{font-size:23px;color:#61705f}
.roles-section{background:radial-gradient(ellipse at 50% 100%,#30413060,transparent 70%),var(--ink)}
.role-cards{gap:18px}.role-card{min-height:444px;padding:26px 26px 88px}.role-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:24px}.role-topline .index{font-size:10px;letter-spacing:.11em;font-weight:500}.role-category{font-size:10px;border:1px solid #15191735;border-radius:20px;padding:4px 10px}
.role-card h3{font-size:35px;letter-spacing:-.045em}.role-card p{font-size:15px;color:#384238}.role-bottom{border-top:1px solid #15191730;padding-top:16px;bottom:22px;left:26px;right:26px}.role-bottom>.circle{width:37px;height:37px;font-size:22px}.role-card .role-graphic{bottom:70px;height:180px;opacity:.86}.sales-card .role-graphic{height:170px;bottom:76px}
.services-intro h2{line-height:1.09}.service-group{padding-top:8px}.service-row summary{min-height:72px}.service-row summary>.num{font-size:12px;letter-spacing:.05em}.service-row summary>.circle{border-color:transparent;background:#e6eae0}.service-row[open] summary>.circle{background:var(--ink);color:var(--paper)}
.system-section{background:radial-gradient(ellipse at 65% 50%,#29402d60,transparent 60%),var(--ink)}
.system-layout{align-items:stretch;gap:24px}.system-detail{min-height:310px;padding:30px;background:linear-gradient(135deg,#2b392d99,#19221b60)}.system-detail:before{width:76px}.system-detail .eyebrow{letter-spacing:.14em}.system-detail dl>div{padding-block:15px}
.system-art{border:1px solid #ffffff20;border-radius:14px;padding:22px 22px 25px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(155deg,#ffffff04,transparent 65%)}
.system-monitor{display:flex;justify-content:space-between;align-items:center;color:#adb9ae;font-size:11px;letter-spacing:.06em}.monitor-position{color:var(--signal);font-variant-numeric:tabular-nums}.system-art img{margin-block:8px;width:110%;max-width:110%;filter:saturate(.7)}
.system-art:before{bottom:0;background:#ffffff18}.system-art:after{height:3px;bottom:0;transition:left .5s var(--ease)}
.system-art-labels{gap:5px}.system-art-labels span{padding:8px 2px;border-top:1px solid #ffffff1a;transition:color .24s,background .24s,border-color .24s}.system-art-labels span.active{background:#f5e50010;border-color:var(--signal);border-radius:0 0 4px 4px}.system-art-labels span.passed{color:#d4ddd2;border-top-color:#637c64}
.system-step{border-radius:6px}.system-step[aria-selected=true] .step-dot{background:var(--ink);color:var(--signal);border-color:var(--ink)}
.approach-section{overflow:hidden}.approach-art{position:relative}.approach-art:before{content:'';position:absolute;inset:14% 8%;border:1px solid #cdd2ca80;border-radius:50%;z-index:0}.approach-art img{position:relative}.approach-result{border-left:3px solid #778b73;border-radius:0 12px 12px 0}.approach-tabs{padding-top:26px}.approach-tab[aria-selected=true]{color:var(--ink)}
.faq-layout{border-top:1px solid var(--line);padding-top:60px}.faq-list details[open]{background:#e5eade}.faq-list summary>.circle{border-color:#bcc7b9}
.contact-section{position:relative;overflow:hidden;background:radial-gradient(ellipse at 0 100%,#e5d500,transparent 62%),var(--signal)}.contact-copy h2{font-size:clamp(48px,5.1vw,74px);font-weight:550;letter-spacing:-.06em}.contact-copy .eyebrow{letter-spacing:.16em}.contact-graphic{opacity:.8}.form-card{background:#fafaf4;border-color:#fff9;box-shadow:0 35px 70px -40px #393b0080}.form-card h3{padding-bottom:24px;border-bottom:1px solid var(--line)}
.footer-signature{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;padding:44px 0 48px;border-top:1px solid #ffffff20}.footer-signature img{width:min(50%,480px);height:auto;opacity:.92}.footer-signature>span{color:#a8b5ab;font-size:17px;line-height:1.5;letter-spacing:-.025em}.footer-bottom{border-top-color:#ffffff20}
@media(min-width:701px) and (max-width:1100px){.hero-layout{gap:15px;min-height:590px}.hero h1{font-size:clamp(39px,5vw,54px)}.hero-scene{min-height:390px;margin:0}.scene-heading{font-size:9px;left:15px;right:15px}.art-caption{left:15px;right:15px}.art-caption>span{display:none}.hero-copy .lead{font-size:18px}.hero-baseline button{padding-inline:9px;font-size:12px}.role-card{padding-inline:20px;min-height:420px}.role-category{display:none}.role-card h3{font-size:28px}.role-bottom{left:20px;right:20px}.quiz-panel{padding:26px}.system-layout{grid-template-columns:.9fr 1.1fr}.system-art{padding:18px 12px}.system-detail{padding:24px}.system-art-labels{font-size:10px}}
@media(max-width:700px){.hero-layout{padding-block:40px 24px;gap:28px;min-height:0}.hero h1{font-size:clamp(35px,8.35vw,55px);line-height:1.06}.hero-copy .eyebrow{font-size:10px;letter-spacing:.13em}.hero-copy .lead{font-size:18px;margin-block:23px 28px}.hero-scene{min-height:310px;aspect-ratio:1.22;margin:0;max-width:520px;width:100%;align-self:center}.hero-art-frame{width:108%;flex-basis:108%;margin-left:-4%}.scene-heading{top:14px;left:15px;right:15px;font-size:9px}.scene-marker{font-size:9px}.floating-label{min-width:110px}.label-crm{top:22%;left:2%}.label-erp{top:35%;right:0}.label-bi{bottom:16%;right:2%}.art-caption{bottom:14px;left:15px;right:15px;font-size:9px}.art-caption>span{font-size:8px}.hero-baseline{padding-block:20px 24px;gap:14px}.hero-baseline>div{justify-content:flex-start;gap:6px}.hero-baseline button{padding:7px 10px;font-size:12px;flex:0 1 auto}.quiz-panel{padding:28px 18px}.quiz-panel h3{font-size:27px}.quiz-top{padding-bottom:18px;margin-bottom:22px}.quiz-option{padding:14px 12px}.role-card{min-height:275px;padding:22px 20px 85px}.role-topline{margin-bottom:18px}.role-topline .index{font-size:9px}.role-category{font-size:9px}.role-card h3{font-size:29px;max-width:82%;position:relative;z-index:1}.role-card p{font-size:15px;max-width:65%;position:relative;z-index:1}.role-card .role-graphic{height:122px;width:48%;right:-25px;bottom:70px;opacity:.5}.sales-card .role-graphic{height:125px;bottom:78px}.role-bottom{left:20px;right:20px;bottom:19px;padding-top:14px}.service-row summary{min-height:68px}.system-layout{display:flex;flex-direction:column;gap:16px}.system-detail{min-height:0;padding:25px 20px}.system-art{padding:17px 12px 20px}.system-monitor{font-size:10px}.system-art-labels{font-size:10px}.system-art-labels span{padding-block:7px}.faq-layout{padding-top:40px}.contact-copy h2{font-size:48px}.form-card h3{padding-bottom:20px}.footer-signature{padding-block:29px;gap:22px;align-items:center}.footer-signature img{width:52%}.footer-signature>span{font-size:12px}.approach-art:before{inset:18% 12%}}
@media(max-width:370px){.hero h1{font-size:33px}.hero-scene{min-height:290px}.art-caption>span{display:none}.role-card h3{font-size:27px}.role-card p{max-width:72%}.system-art-labels{font-size:9px}.contact-copy h2{font-size:43px}.footer-signature>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero h1 em:after{animation:none}.system-art:after,.system-art-labels span{transition:none}}

/* One registered image, five independent light layers. No permanently lit CRM. */
.workflow-scene{position:relative;isolation:isolate;width:110%;margin:8px 0 8px -5%;aspect-ratio:3/1;flex:none;mix-blend-mode:lighten;pointer-events:none}
.system-art .workflow-scene img{display:block;width:100%;max-width:100%;height:auto;margin:0;mix-blend-mode:normal}
.system-art .workflow-base{filter:grayscale(1) brightness(.53);opacity:.95}
.system-art .workflow-light{position:absolute;inset:0;filter:saturate(.95);opacity:0;transition:opacity .28s var(--ease);pointer-events:none}
.system-art .workflow-light.is-lit{opacity:1}
.workflow-light[data-module="0"]{clip-path:inset(0 77.5% 0 0);mask-image:linear-gradient(90deg,#000 21%,transparent 22.5%)}
.workflow-light[data-module="1"]{clip-path:inset(0 59.5% 0 22.5%);mask-image:linear-gradient(90deg,transparent 22.5%,#000 24%,#000 39%,transparent 40.5%)}
.workflow-light[data-module="2"]{clip-path:inset(0 41% 0 40.5%);mask-image:linear-gradient(90deg,transparent 40.5%,#000 42%,#000 57.5%,transparent 59%)}
.workflow-light[data-module="3"]{clip-path:inset(0 23% 0 59%);mask-image:linear-gradient(90deg,transparent 59%,#000 60.5%,#000 75.5%,transparent 77%)}
.workflow-light[data-module="4"]{clip-path:inset(0 0 0 77%);mask-image:linear-gradient(90deg,transparent 77%,#000 78.5%)}
@media(prefers-reduced-motion:reduce){.system-art .workflow-light{transition:none}}