/* SHIFT7 / MOTIVE24 — UI/UX Pro Max visual system v2
   Calm editorial platform + deliberately playful miniature office.
   Keep all semantic data and backend-driven employee states intact. */
:root{
  --bg:#f5f7f6;--panel:#ffffff;--panel2:#f0f5f3;--stroke:#dce6e2;
  --text:#192d2a;--muted:#566f69;--mint:#176e5d;--orange:#d96d48;--blue:#2f637f;
  --brand-dark:#102b27;--brand-muted:#edf4f0;--soft-shadow:0 16px 48px rgba(20,50,43,.045);
  --radius:18px;--content-max:1200px;
}
html{scroll-padding-top:26px}
body{font-size:16px;line-height:1.65;letter-spacing:-.015em;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a,button,.filter{touch-action:manipulation}
button,a,.filter{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
button:hover:not(:disabled){opacity:.97}
button:active:not(:disabled){transform:translateY(1px)}
:focus-visible{outline:3px solid #369d80;outline-offset:3px}
.shell{min-height:100dvh}
.sidebar{width:250px;min-width:250px;background:#fff;border-right:1px solid var(--stroke);padding:30px 16px 26px}
.wordmark{color:#14372f;font-size:29px;letter-spacing:-1.3px;font-weight:850;margin-left:10px}
.wordmark .mint,.wordmark-dot{color:#1b886d}
.logo-icon i{background:#1d8069}
.brand-sub{margin:4px 0 54px 48px;color:#7d9990;font-size:10px;letter-spacing:1.25px}
.menu-label{font-size:11px;color:#647f78;font-weight:800;margin-bottom:14px;letter-spacing:1.2px}
.nav-menu{gap:8px}
.nav-link{min-height:48px;padding:12px 14px;font-size:14px;font-weight:650;color:#48625d;border-radius:10px;gap:13px}
.nav-link:hover{color:#194f43;background:#f1f7f4}
.nav-link.active{border:1px solid #d6eae0;background:#eaf5ee;color:#145844}
.nav-ico{font-size:20px;width:24px}
.nav-link .live-dot{background:#169d6a;box-shadow:0 0 0 4px #dbf4e7}
.sidebar-bottom{border-top:1px solid var(--stroke)}
.sidebar-bottom p{font-size:11px;letter-spacing:.7px;color:#82988e}
.mini-status{color:#35584d;font-size:12px}
.status-light{background:#9caaa6;width:9px;height:9px}
.status-light.ok{background:#199a69;box-shadow:0 0 0 4px #def4e9}
.status-light.bad{background:#db744f;box-shadow:0 0 0 4px #fff0e5}
.main{max-width:1650px;padding:0 clamp(26px,4.2vw,76px);margin:0 auto;overflow:clip}
.page{max-width:var(--content-max);margin:0 auto}
.topline{padding:37px 0 20px;font-size:11px;color:#687e78;letter-spacing:1px}
.hero{min-height:430px;border-radius:var(--radius);border:1px solid #e3ece5;padding:clamp(38px,5.1vw,74px);background:radial-gradient(ellipse at 93% 21%,#e1eee6,transparent 46%),linear-gradient(115deg,#fff,#edf4f0);box-shadow:var(--soft-shadow)}
.hero-content{max-width:700px}
.eyebrow,.section-num{color:#17735d;font-size:12px;letter-spacing:1.25px;font-weight:800}
.tiny-line{background:#26836c}
.hero h1{color:#132d28;font-size:clamp(52px,6.4vw,90px);margin:23px 0 25px;letter-spacing:-.065em;line-height:1.07}
.hero h1 em{color:#228569;font-style:normal}
.hero p{color:#45635a;font-size:17px;line-height:1.8;margin-bottom:30px;max-width:550px}
.btn-primary{background:#176b56;color:#fff;border-radius:11px;padding:14px 21px;font-size:14px;font-weight:750;min-height:48px}
.btn-primary:hover{background:#125541}
.btn-secondary{color:#205a4a;background:#fff;border:1px solid #bdd6c9;border-radius:11px;padding:13px 19px;min-height:48px;font-size:14px;font-weight:730}
.btn-secondary:hover{background:#f3faf6;border-color:#95c2aa}
.hero-art{inset:0 0 0 40%;opacity:.64}
.hero-seven{font-weight:850;color:#1a7864;opacity:.095;top:-16%;right:3%;font-size:530px;transform:rotate(0)}
.orb-one{background:radial-gradient(circle at 35% 30%,#e5fff1,#89d2b0 45%,#327b6c 80%);opacity:.5;box-shadow:0 0 70px #a4e2c063}
.orb-two{background:radial-gradient(circle at 30% 30%,#fff1cf,#ecae87 42%,#b9695e);opacity:.55}
.orbit{border-color:#396e6431}
.hero-corner{color:#72958a;letter-spacing:1px;font-size:11px}
.section-head{margin:61px 0 22px}
.section-head.compact{margin-top:53px}
.section-head h2{font-size:clamp(27px,3vw,37px);margin-top:12px;letter-spacing:-1.4px;color:#1b3730;line-height:1.25}
.dot-punct{color:#239076}
.section-comment{font-size:13px;color:#6b8078}
.agency-feature{background:#fff;border:1px solid var(--stroke);border-radius:var(--radius);min-height:310px;box-shadow:var(--soft-shadow)}
.feature-copy{padding:clamp(28px,4vw,52px)}
.feature-kicker{color:#6d817b;font-size:11px;letter-spacing:1px}
.feature-bolt{color:#bd6b49}
.feature-copy h3{color:#1c302c;font-size:clamp(45px,5vw,70px);margin:24px 0 17px}
.feature-copy h3 span{color:#d7724d}
.feature-copy>p{color:#4b675e;font-size:15px;max-width:530px;line-height:1.8}
.feature-pills{gap:7px;margin:17px 0 22px}
.feature-pills span{font-size:10px;letter-spacing:.25px;border-color:#e2e8e4;color:#5d746b;background:#f7faf8;padding:7px 10px}
.text-link,.simple-link{font-size:14px;color:#13634f;font-weight:750;display:inline-flex;align-items:center;gap:8px;min-height:42px}
.text-link span{margin-left:16px}
.feature-visual{background:linear-gradient(145deg,#f8bea1 0%,#e68d70 51%,#d97161 100%);color:#492a23;border-radius:0;isolation:isolate}
.visual-top,.visual-bottom{font-size:11px;letter-spacing:1px}
.visual-bottom{color:#794336}
.blinking-square{background:#61352d}
.graphic-m24{color:#703d36;text-shadow:12px 13px 0 #ffffff40}
.graphic-m24 span{color:#fff3e9}
.metrics{border-radius:var(--radius);gap:12px;border:0;background:transparent;overflow:visible}
.metric{min-height:157px;background:#fff;border:1px solid var(--stroke);border-radius:15px;padding:22px 23px;box-shadow:var(--soft-shadow)}
.metric:last-child,.metric:nth-child(2){border:1px solid var(--stroke)}
.metric>span{font-size:13px;color:#647970;font-weight:650}
.metric strong{color:#20483b;font-size:49px;letter-spacing:-2px;margin-top:6px}
.metric small{font-size:11px;color:#6e827a;letter-spacing:.75px}
.home-bottom{gap:16px;margin-top:17px}
.mini-feed,.quote-panel,.employee-panel,.active-panel,.journal-primary,.journal-secondary,.control-card{background:#fff;border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:24px}
.card-head{border-bottom:1px solid #e5ece7;padding-bottom:17px;margin-bottom:14px}
.card-head h3{font-size:16px;letter-spacing:-.3px}
.chip{background:#e8f5ef;color:#16694e;border:1px solid #c8e5d3;border-radius:9px;font-size:11px;letter-spacing:.1px;padding:6px 10px}
.chip.ghost{background:#f2f6f4;color:#526e62;border-color:#dfebe4}
.event-stack{min-height:137px}
.feed-item{border-color:#eaf0ec;padding:11px 0;gap:12px}
.feed-icon{background:#ebf6f0;color:#1d745c;border-radius:10px;width:33px;height:33px;font-size:16px}
.feed-content p{color:#2a473c;font-size:14px;line-height:1.7}
.feed-content small{color:#6c8377;font-size:12px;margin-top:5px}
.quote-panel{background:linear-gradient(145deg,#1f4d40,#164138);color:#fff}
.quote-label{color:#d3e9df;font-size:11px}
.quote-symbol{color:#bfecc9}
.quote-panel p{font-size:25px;color:#ecf8f2;max-width:400px}
.quote-panel strong{color:#bfecc9}
.quote-caption{font-size:11px;color:#bddbcf}
.footer{max-width:var(--content-max);margin:70px auto 0;padding:22px 0 32px;border-color:#dce5df;color:#6d8378;font-size:11px}
.page-heading{min-height:230px;padding:44px 0 28px}
.page-heading h1{font-size:clamp(37px,4.6vw,60px);letter-spacing:-2.5px;color:#1b382f;margin:15px 0 12px;line-height:1.18}
.page-heading p{color:#657d70;font-size:15px;line-height:1.85}
.pill-live{background:#fff;color:#235e4b;border:1px solid #d8e7dd;border-radius:12px;font-size:12px;font-weight:650;min-height:44px;padding:10px 15px}
.office-toolbar{background:#1d3c36;border-color:#1d3c36;padding:17px 23px;border-radius:15px 15px 0 0}
.office-brand strong,.office-brand small{color:#e8f7ef}
.office-brand strong{font-size:14px}
.office-brand small{opacity:.75;font-size:10px}
.m24-icon{background:#f2bd9f;color:#58362d}
.clock{font-size:14px;color:#fff}
.office-toolbar .chip.ghost{background:#30564c;border-color:#41645a;color:#d9f4e6}
.office-room{border-color:#1d3c36;min-height:400px}
.room-label-top{font-size:21px}
.room-label-top small{font-size:10px;letter-spacing:1px}
.zone-tag{font-size:11px}
.agent-avatar span{font-size:10px}
.office-floor-sign{color:#afcbc2;font-size:11px}
.office-footer{background:#f4f8f5;border:1px solid var(--stroke);border-top:0;border-radius:0 0 15px 15px;padding:15px 21px}
.legend{gap:13px}
.legend span,.office-footer small{color:#5a766c;font-size:12px}
.office-details{margin-top:18px;gap:16px}
.employee-list{gap:9px}
.employee-row{background:#f7faf8;border:1px solid #e0ebe3;border-radius:12px;min-height:67px;text-align:left}
.employee-row:hover,.employee-row:focus-visible{border-color:#8ac1a8;background:#f1faf5}
.employee-portrait{background:#e3f1e9;color:#1a6954;width:38px;height:38px}
.employee-row strong{color:#245342;font-size:14px}
.employee-row small{color:#627e71;font-size:12px;line-height:1.35}
.employee-flag{color:#72887b;font-size:11px}
.employee-flag.work{color:#117853}
.active-content h4{color:#294639}
.active-content p{color:#5f766b;font-size:14px}
.empty{color:#688076;font-size:14px}
.journal-grid{gap:17px}
.job-row{border-color:#e6eee8;padding:21px 0}
.job-bullet{background:#e8f5ee;color:#18634d;border-radius:10px}
.job-main h4{color:#254537;font-size:16px}
.job-main p{color:#5f766a;font-size:14px}
.job-main small{font-size:12px;color:#6b8377}
.job-status{color:#1b7357;background:#eaf5ee;border-color:#d8e9dc;font-size:11px}
.job-status.failed{color:#ab512e;border-color:#f0d0c2;background:#fff0e9}
.timeline-item{border-color:#d8e5de}
.timeline-item:before{background:#3f9d7c;border-color:#fff}
.timeline-item strong{color:#176a52;font-size:12px}
.timeline-item p{color:#3d5a4d;font-size:13px}
.timeline-item small{color:#6a8275;font-size:12px}
.filter-bar{gap:10px;margin:8px 0 26px}
.filter{min-height:44px;padding:9px 17px;background:#fff;color:#516e61;border:1px solid #dce9df;border-radius:10px;font-size:12px;letter-spacing:.15px}
.filter.active,.filter:hover{background:#195b49;border-color:#195b49;color:#fff}
.portfolio-grid{gap:15px}
.art-card{border-radius:16px;background:#fff;border:1px solid #dce8e0;box-shadow:var(--soft-shadow)}
.art-card:hover{border-color:#92c6ae;transform:translateY(-2px)}
.art-cover{background:radial-gradient(circle at 80% 20%,#d8efcf,transparent 42%),linear-gradient(135deg,#1c6652,#22443e);height:230px}
.art-cover strong{color:#e2fbe7}
.art-cover span{color:#e1f7e8;font-size:13px}
.art-card:nth-child(2n) .art-cover{background:radial-gradient(circle at 70% 20%,#fcd6ad,transparent 42%),linear-gradient(135deg,#ba6854,#d5916d)}
.art-info{padding:21px}
.art-info strong{font-size:17px;color:#274339}
.art-info small{font-size:12px;color:#6c8278}
.concept-note{border:1px solid #dce8df;background:#fff;border-radius:14px;color:#35594b}
.concept-icon{color:#1b795e}
.concept-note strong{font-size:15px}
.concept-note p{font-size:13px;color:#668074}
.about-banner{background:radial-gradient(circle at 80% 10%,#ffdbc2,transparent 35%),linear-gradient(115deg,#e8b5a0,#cb745f);color:#623d31;border-radius:18px}
.about-big{color:#6b352e}
.about-big em{color:#fff8eb}
.about-inner p{font-size:15px}
.service-grid{gap:14px}
.service-grid>div{background:#fff;border-radius:16px;border-color:#dce8e0;padding:32px;box-shadow:var(--soft-shadow)}
.service-grid span{color:#18806a;font-size:13px}
.service-grid h3{font-size:22px;color:#263e34}
.service-grid p{font-size:15px;color:#677c70;line-height:1.85}
.human-ai{border-color:#d6e6db;background:#eaf3ee;border-radius:16px;padding:36px}
.human-ai h2{color:#264438}
.human-steps div{border-color:#cddfd3}
.human-steps b{color:#1c785e;font-size:12px}
.human-steps span{color:#435f52;font-size:14px}
.control-card h3{font-size:20px;color:#2a4236}
.control-card p{color:#657c70;font-size:14px}
.control-card label{font-size:12px;color:#32594a}
.control-card input,.control-card textarea{background:#fbfdfa;border:1px solid #cbded1;border-radius:10px;color:#254237;min-height:48px;padding:13px 15px;font-size:16px}
.control-card input::placeholder,.control-card textarea::placeholder{color:#83968b}
.form-feedback{color:#1e7957;font-size:13px}
.review-item{border-color:#e2eee5}
.review-item strong{font-size:14px}
.review-item small{font-size:12px}
.modal-shade{background:#15251ed9}
.modal-inner{background:#fff;color:#243e33;border:1px solid #dbe7db;border-radius:20px;padding:29px;box-shadow:0 25px 100px #14272259}
.modal-top{border-color:#dbe8dc}
.modal-top h2{font-size:23px}
.modal-top button{color:#205947;border:1px solid #d7e4da;background:#f5faf7;min-width:44px;min-height:44px}
.modal-body{font-size:15px;color:#3d5c4c}
.modal-body iframe{min-height:520px;border:1px solid #e3eae3;border-radius:12px}
.mobile-header,.mobile-nav{display:none}
.office-focus{margin-top:14px;padding:14px 16px;border-radius:12px;border:1px solid #d7e7dc;background:#f3faf5}
.office-focus-label{display:block;font-size:11px;font-weight:800;letter-spacing:1.1px;color:#567a65}
.office-focus strong{display:block;margin-top:5px;font-size:16px;color:#20543d}
.office-focus p{font-size:13px;color:#516e5b;margin:5px 0 0;line-height:1.6}
.status-strip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#45665a;font-size:13px;padding:15px 17px;margin:18px 0 0;background:#eaf4ee;border:1px solid #d3e7d9;border-radius:13px}
.status-strip strong{color:#245847}
.status-strip button{margin-left:auto;color:#176a53;font-weight:760;min-height:38px;border:0;background:transparent}
.status-strip .state-pin{width:9px;height:9px;border-radius:99px;background:#d58562;flex:none}
.status-strip .state-pin.active{background:#19916c}
.page-intro-panel{margin:0 0 28px}
.nav-link,.mobile-nav a,button{cursor:pointer}
@media(max-width:1200px){.sidebar{width:226px;min-width:226px}.main{padding:0 30px}.hero-seven{font-size:410px}.hero-art{inset:0 0 0 45%}.metrics .metric{padding:18px}.employee-flag{font-size:10px}}
@media(max-width:850px){.main{padding:0 21px 86px}.sidebar{width:205px;min-width:205px}.section-comment{display:none}.office-zones{gap:8px}.hero{padding:41px 35px}.hero h1{font-size:60px}.hero-art{opacity:.34}.agency-feature{grid-template-columns:1fr}.feature-visual{min-height:235px}.graphic-m24{font-size:160px}.home-bottom,.office-details,.journal-grid{grid-template-columns:1fr}.employee-row small{font-size:12px}.metrics{gap:10px}}
@media(max-width:780px){
  .sidebar{display:none}.main{width:100%;padding:0 16px calc(84px + env(safe-area-inset-bottom));overflow:clip}
  .mobile-header{height:65px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:6;background:#fff;border-bottom:1px solid #e1e9e3;padding:0 19px;margin:0 -16px}
  .mobile-wordmark{font-size:25px;color:#173e30;font-weight:850;letter-spacing:-1.5px}
  .mobile-wordmark span{color:#1e9072}
  .mobile-state{font-size:11px;color:#587668;letter-spacing:.35px}
  .mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;z-index:10;position:fixed;background:#fff;border-top:1px solid #dce7e0;padding:7px 6px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -7px 30px #172f2112}
  .mobile-nav a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:0;min-height:55px;border-radius:9px;color:#6c8379;font-size:21px;line-height:1.2}
  .mobile-nav a.active{color:#176d55;background:#edf7f0}
  .mobile-nav span{font-size:10px;font-weight:850;letter-spacing:.1px}
  .topline{padding:19px 0 12px;font-size:10px}
  .hero{min-height:390px;padding:33px 27px;align-items:center;border-radius:17px}
  .hero h1{font-size:clamp(48px,10.9vw,69px);margin:20px 0 19px}
  .hero p{font-size:15px;line-height:1.78;max-width:340px}
  .hero-art{inset:0 0 0 38%;opacity:.25}
  .hero-seven{font-size:370px;top:0;right:-18%}
  .hero-corner{display:none}
  .hero-actions{gap:10px}
  .btn-primary,.btn-secondary{min-height:48px;font-size:13px;padding:12px 15px}
  .eyebrow,.section-num{font-size:11px}
  .section-head{margin:42px 0 18px;align-items:start}
  .section-head h2{font-size:clamp(25px,7vw,31px)}
  .agency-feature{grid-template-columns:1fr}
  .feature-copy{padding:27px}
  .feature-copy h3{font-size:59px}
  .feature-copy>p{font-size:15px}
  .feature-visual{min-height:230px}
  .metrics{grid-template-columns:repeat(2,1fr);gap:9px}
  .metric,.metric:last-child,.metric:nth-child(2){min-height:136px;padding:16px;border:1px solid var(--stroke);border-radius:13px}
  .metric strong{font-size:43px}
  .metric>span{font-size:12px}
  .metric small{font-size:10px}
  .home-bottom,.journal-grid,.office-details,.human-ai{grid-template-columns:1fr}
  .mini-feed,.quote-panel,.employee-panel,.active-panel,.journal-primary,.journal-secondary,.control-card{padding:20px;border-radius:16px}
  .quote-panel{min-height:260px}
  .footer{font-size:11px;margin-top:45px;padding-bottom:24px}
  .footer span:last-child{display:none}
  .page-heading{min-height:auto;padding:38px 0 23px}
  .page-heading h1{font-size:clamp(33px,8.5vw,50px);letter-spacing:-1.6px}
  .page-heading p{font-size:14px}
  .pill-live{font-size:12px}
  .office-toolbar{padding:14px 15px}
  .office-brand small{font-size:9px}
  .office-room{height:385px;min-height:0}
  .office-zones{inset:82px 9px 46px;gap:5px}
  .office-zone{border-width:2px;border-bottom-width:6px;border-right-width:5px}
  .zone-tag{font-size:8px;top:8px;left:5px}
  .zone-tag span{display:none}
  .agent-avatar{left:19%;top:54%;transform:scale(.72);transform-origin:top left}
  .ava-radar,.ava-pixel,.ava-nexus{left:57%;top:76%;transform:scale(.63)}
  .room-label-top{font-size:17px;left:15px;top:16px}
  .room-label-top small{font-size:8px}
  .office-footer{display:flex;align-items:start;flex-direction:column;gap:10px;padding:13px}
  .office-footer small,.legend span{font-size:11px}
  .employee-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .employee-row{padding:11px;gap:8px;min-height:70px}
  .employee-portrait{width:33px;height:33px;flex:none;font-size:17px}
  .employee-row strong{font-size:13px}
  .employee-row small{font-size:11px}
  .employee-flag{display:none}
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .art-cover{height:154px;padding:17px}
  .art-cover strong{font-size:clamp(26px,6vw,35px)}
  .art-cover span{font-size:10px}
  .art-info{padding:14px}
  .art-info strong{font-size:14px}
  .art-info small{font-size:11px}
  .about-banner{padding:28px;flex-direction:column;align-items:start}
  .about-big{font-size:clamp(67px,17vw,105px)}
  .about-inner{max-width:100%}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .service-grid>div{padding:18px}
  .service-grid h3{font-size:18px}
  .service-grid p{font-size:13px}
  .human-ai{padding:25px;gap:13px}
  .human-ai h2{font-size:26px}
  .control-grid{grid-template-columns:1fr}
  .control-card.wide{grid-column:auto}
  .concept-note{padding:17px}
  .modal{padding:13px}
  .modal-inner{padding:20px;max-height:85dvh}
}
@media(max-width:390px){.hero{padding:29px 20px}.hero h1{font-size:46px}.hero-actions{gap:8px}.btn-primary,.btn-secondary{font-size:12px;padding:12px}.employee-list{grid-template-columns:1fr}.office-room{height:360px}.office-zones{inset:78px 8px 44px}.agent-avatar{transform:scale(.63)}.ava-radar,.ava-pixel,.ava-nexus{left:50%;transform:scale(.56)}.service-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.skip-link{position:fixed;z-index:99;left:18px;top:-80px;padding:13px 17px;border-radius:0 0 10px 10px;background:#155d47;color:#fff;font-weight:800;box-shadow:0 4px 18px #173b2830}
.skip-link:focus{top:0}
.mobile-nav a:focus-visible,.nav-link:focus-visible{outline:3px solid #4aa187;outline-offset:-2px}
@media(max-width:780px){.main{max-width:100%}.status-strip{padding:14px;align-items:start}.status-strip button{margin-left:0;padding-left:0}.mobile-header{scroll-margin-top:0}.hero-actions .btn-primary{flex:1 0 165px}.hero-actions .btn-secondary{flex:1 0 125px}}
.nav-link svg.nav-ico{height:21px;width:21px;min-width:21px;stroke:currentColor;flex:none}
.mobile-nav a svg{height:22px;width:22px;stroke:currentColor}
@media(max-width:780px){.mobile-nav a{font-size:14px}}