/* Interactive service previews: clear hierarchy, large canvas, real controls. */
:root{--card-width:420px}
.service-showcase{--card-height:644px}
.offer-motion{padding:25px;background:linear-gradient(160deg,#fff 0%,#f8faff 62%,#f0f4fb 100%);border-color:#fff;border-radius:22px;box-shadow:0 18px 55px #0e2a5810}
.offer-motion.is-active{border-color:#d5e2f4;box-shadow:0 22px 60px #0e2a5817,0 0 0 1px #fff inset}
.offer-motion .card-top{height:29px;flex-shrink:0}
.offer-motion .mini-brand{font-size:16px;letter-spacing:-.035em;display:flex;gap:11px;align-items:center;color:#153158;font-weight:550}
.service-index{display:grid;place-items:center;border-radius:8px;width:29px;height:29px;color:#0162f4;background:#eaf2ff;font:10px 'Geist Mono',monospace;letter-spacing:0}
.preview-badge{font-size:10px;padding:4px 8px;border-radius:20px;background:#f1f5fb;color:#8294ae;border:1px solid #e4ebf5;white-space:nowrap}
.offer-motion h2{font-size:27px;font-weight:550;line-height:1.11;letter-spacing:-.045em;margin-top:24px;min-height:66px;color:#101b2f}
.offer-sub{font-size:14px;line-height:1.5;margin-top:7px;min-height:38px;color:#7b879b}
.service-art{margin:17px 0 13px;gap:10px;flex:none;transform:none}
.art-stage{flex:none;height:242px;min-height:0;padding:16px;overflow:hidden;border-radius:15px;background:radial-gradient(ellipse at 70% 10%,#d7e7ff55,transparent 65%),#f0f5fc;border:1px solid #e3ebf7}
.art-canvas{height:100%;width:100%;position:relative}
.art-caption{margin:0!important;font-size:12px;line-height:1.5;min-height:54px;max-width:none;color:#687a93;letter-spacing:-.005em}
.preview-controls{display:flex;background:#eaf0f8;border-radius:9px;padding:3px;gap:3px;position:relative;isolation:isolate}
.preview-controls button{flex:1;min-width:0;padding:8px 4px;border-radius:6px;font-size:11px;line-height:1.15;min-height:34px;font-weight:450;color:#75859d;background:transparent;transition:background .2s,color .2s,box-shadow .2s;touch-action:manipulation}
.preview-controls button:hover{color:#0162f4;background:#ffffff70}
.preview-controls button[aria-pressed=true]{background:#fff;color:#0162f4;box-shadow:0 2px 5px #19396810}
.preview-controls button:focus-visible{outline:2px solid #0162f4;outline-offset:1px}
.offer-link{font-size:13px;min-height:39px;border-top-color:#dce5f2;font-weight:500;color:#223b60;flex-shrink:0}
.offer-link .icon{background:#edf3fd;border-radius:50%;width:26px;height:26px;padding:5px;color:#0162f4;transition:background .2s,transform .2s}
.offer-link:hover .icon{background:#0162f4;color:white}
.showcase-card:not(.is-active) .preview-controls{pointer-events:none}
/* Social controls shift to each content format, keeping the calendar in sync. */
.art-content .feed-reel,.art-content .social-calendar i{animation:none!important;transition:transform .65s var(--ease)}
.art-content[data-mode="0"] .feed-reel{transform:translateX(0)}
.art-content[data-mode="1"] .feed-reel{transform:translateX(calc(-43% - 10px))}
.art-content[data-mode="2"] .feed-reel{transform:translateX(calc(-86% - 20px))}
.art-content[data-mode="1"] .social-calendar i{transform:translateX(29px)}
.art-content[data-mode="2"] .social-calendar i{transform:translateX(58px)}
.social-calendar{margin-bottom:10px}.feed-post{height:145px}.feed-post strong{font-size:23px}.feed-window{padding-bottom:10px}.feed-bottom{font-size:9px}.feed-post small{font-size:9px}
/* Film options reveal how the same material is developed. */
.film-preview{height:126px;padding-top:31px}.film-title{font-size:26px;max-width:230px}.edit-timeline{padding:10px}.time-ruler{margin-bottom:7px}.audio-wave{height:18px;margin-top:4px}.film-title{animation-name:film-title-in}
.art-film .film-preview,.art-film .video-clips,.art-film .audio-wave{transition:filter .5s,opacity .5s,background .5s}
.art-film[data-mode="0"] .video-clips,.art-film[data-mode="0"] .audio-wave{opacity:.38}
.art-film[data-mode="1"] .video-clips{opacity:1;filter:saturate(1.4)}
.art-film[data-mode="2"] .film-preview{background:#083682}
.art-film[data-mode="2"] .audio-wave i{background:#0162f4}
/* Ads: channel focus changes the message, never imaginary performance data. */
.ad-channels span{transition:background .25s,color .25s,box-shadow .25s}
.art-ads[data-mode="0"] .ad-channels span:nth-child(1),.art-ads[data-mode="1"] .ad-channels span:nth-child(2),.art-ads[data-mode="2"] .ad-channels span:nth-child(3){background:#0162f4;color:#fff;border-color:#0162f4;box-shadow:0 4px 12px #0162f425}
.art-ads .target-map{height:145px}.art-ads .ring-large{width:145px;height:145px}.art-ads .target-sweep{width:143px;height:143px;left:calc(50% - 71.5px);top:calc(49% - 71.5px)}.art-ads .ad-result{font-size:11px}
/* Responsive preview really changes shape and hierarchy. */
.art-web .art-stage{padding-top:16px}.art-web .browser-mock{height:191px;width:86%;transition:width .55s var(--ease),opacity .4s,transform .55s var(--ease);transform-origin:center}
.art-web .browser-content{padding:15px}.art-web .browser-content strong{font-size:24px}.art-web .phone-mock{width:89px;height:176px;right:0;left:auto;top:35px;animation:none;transition:all .55s var(--ease)}
.art-web .phone-speaker{left:calc(50% - 12px)}.art-web .phone-content{padding:22px 10px}.art-web .phone-content strong{font-size:18px;line-height:1.05;letter-spacing:-.055em;overflow-wrap:anywhere}.art-web .web-pointer{top:142px;left:38%}.art-web .click-ring{top:140px;left:34%}
.art-web[data-mode="0"] .phone-mock{opacity:.4;transform:translateX(12px) scale(.88)}
.art-web[data-mode="1"] .browser-mock{width:72%;transform:translateX(18%);height:205px;border-radius:12px;border:3px solid #153660}
.art-web[data-mode="1"] .phone-mock{opacity:0;transform:translateX(30px) scale(.8)}
.art-web[data-mode="1"] .web-tiles i:last-child{display:none}
.art-web[data-mode="1"] .browser-content strong{font-size:22px}
.art-web[data-mode="2"] .browser-mock{opacity:.12;transform:scale(.88)}
.art-web[data-mode="2"] .phone-mock{right:calc(50% - 51px);width:102px;height:205px;top:2px;opacity:1;transform:none;box-shadow:0 10px 25px #173b7c20}
.art-web[data-mode="2"] .phone-content{padding:26px 12px}.art-web[data-mode="2"] .phone-content strong{font-size:17px;line-height:1.03}
.art-web[data-mode="2"] .web-pointer,.art-web[data-mode="2"] .click-ring{display:none}
/* Recruiting: illustrative steps with no pretend submission confirmation. */
.art-recruiting .job-card{transition:transform .4s,margin .4s,box-shadow .4s}.art-recruiting .apply-form{transition:opacity .4s,transform .4s;margin-top:11px;padding:12px 14px}.art-recruiting .apply-success{display:none}.art-recruiting .form-fill{animation:none;transform:scaleX(1);opacity:.5}.art-recruiting .job-card{padding:13px 14px}.art-recruiting .form-field{height:23px;margin-bottom:4px}.art-recruiting .form-heading{margin-bottom:8px}.art-recruiting .apply-action{margin-top:7px}
.art-recruiting[data-mode="0"] .job-card{transform:translateY(14px) rotate(-4deg);box-shadow:0 12px 20px #16356820}.art-recruiting[data-mode="0"] .apply-form{opacity:.24;transform:translateY(20px) scale(.92)}
.art-recruiting[data-mode="1"] .job-card{transform:rotate(-2deg)}
.art-recruiting[data-mode="2"] .apply-form{border-color:#accaf4}.art-recruiting[data-mode="2"] .apply-action{background:#0162f4;color:#fff;padding:9px;border-radius:5px;margin-inline:-4px}.art-recruiting[data-mode="2"] .form-field{opacity:.4}
/* Personal branding: focus on identity, expertise or a published point of view. */
.art-personal .expert-orbit{margin-bottom:10px}.art-personal .expert-profile,.art-personal .quote-card{transition:opacity .4s,transform .4s,box-shadow .4s}.art-personal .quote-card{margin-top:10px;padding:14px 19px}.art-personal .quote-card>strong{font-size:29px}.art-personal .quote-lines{margin:10px 0 7px}.art-personal .expert-topic{bottom:0;right:0}.art-personal[data-mode="0"] .expert-profile{box-shadow:0 0 0 1px #8eb8f5,0 7px 16px #123e7c12}.art-personal[data-mode="0"] .quote-card{opacity:.5}.art-personal[data-mode="1"] .quote-card{background:#f9fcff}.art-personal[data-mode="2"] .quote-card{box-shadow:0 0 0 1px #aecdfb,0 9px 20px #123e7c10}
/* Property: foreground the object, its dossier or digital page. */
.art-estate .expose-sheet{height:198px;width:85%;padding:15px;transition:transform .55s,opacity .5s;animation:none}.art-estate .expose-back{height:181px;transition:transform .55s,background .5s,box-shadow .5s}.art-estate .plan-diagram{margin-top:13px}.art-estate .plan-diagram svg{height:65px}.art-estate .label-object{bottom:0;animation:none;font-size:9px}.art-estate .label-photo{top:115px}.art-estate[data-mode="0"] .expose-sheet{transform:rotate(-3deg)}.art-estate[data-mode="0"] .plan-diagram{background:#eaf2ff}.art-estate[data-mode="1"] .expose-sheet{transform:rotate(0) translateX(10px);box-shadow:0 9px 23px #16427320}.art-estate[data-mode="1"] .expose-back{transform:rotate(12deg)}.art-estate[data-mode="2"] .expose-sheet{transform:translate(-8px,18px) rotate(-8deg) scale(.81);opacity:.5}.art-estate[data-mode="2"] .expose-back{transform:rotate(0) translate(-8px,-9px);background:white;border-color:#aac9f4;box-shadow:0 0 0 3px #153660,0 12px 25px #12376915;z-index:1}.art-estate[data-mode="2"] .expose-back i{background:linear-gradient(120deg,#eaf3ff,#d1e2fa)}
/* Brand controls bring each part of the system into the foreground. */
.art-brand .type-specimen,.art-brand .brand-swatches,.art-brand .identity-card{transition:opacity .4s,transform .5s}.art-brand .type-specimen>strong{font-size:84px}.art-brand .type-caret{height:67px}.art-brand .identity-card{margin-top:14px;padding:13px 16px}.art-brand .identity-card strong{font-size:28px}.art-brand[data-mode="0"] .brand-swatches{opacity:.4}.art-brand[data-mode="0"] .identity-card{opacity:.55}.art-brand[data-mode="1"] .type-specimen{opacity:.25}.art-brand[data-mode="1"] .brand-swatches{transform:translate(-46px,5px) rotate(0) scale(1.2)}.art-brand[data-mode="1"] .identity-card{opacity:.5}.art-brand[data-mode="2"] .type-specimen{opacity:.45}.art-brand[data-mode="2"] .brand-swatches{opacity:.6}.art-brand[data-mode="2"] .identity-card{box-shadow:0 0 0 1px #b1cef5,0 14px 25px #163a7020}
/* Email: highlight the relevant point in a communication sequence. */
.art-email .mail-start{padding:12px;margin-inline:15px}.art-email .mail-branch{height:148px}.art-email .mail-start,.art-email .mail-node,.art-email .mail-next{transition:background .4s,box-shadow .4s,opacity .4s}.art-email[data-mode="0"] .mail-start{box-shadow:0 0 0 1px #91baf5,0 7px 15px #23497e10}.art-email[data-mode="0"] .mail-node,.art-email[data-mode="0"] .mail-next{opacity:.4}.art-email[data-mode="1"] .mail-node{border-color:#93baf4;background:#fdfefe;box-shadow:0 6px 15px #23497e10}.art-email[data-mode="1"] .mail-next{opacity:.4}.art-email[data-mode="2"] .mail-next{box-shadow:0 0 0 5px #0162f40c,0 8px 15px #0162f418}
/* CRM: each control places the same inquiry in a real visual stage. */
.art-crm .lead-ticket{animation:none!important;transition:left .65s var(--ease),transform .65s var(--ease);left:3px}.art-crm .kanban{height:157px}.art-crm .crm-head{margin-bottom:11px}.art-crm .crm-follow{margin-top:11px}.art-crm .kanban-col{transition:background .4s,border-color .4s}.art-crm[data-mode="0"] .kanban-col:nth-child(1),.art-crm[data-mode="1"] .kanban-col:nth-child(2),.art-crm[data-mode="2"] .kanban-col:nth-child(3){background:#e2eeff;border-color:#a5c8fb}.art-crm[data-mode="1"] .lead-ticket{left:calc(33.333% + 5px);transform:rotate(-2deg)}.art-crm[data-mode="2"] .lead-ticket{left:calc(66.666% + 7px);transform:rotate(0)}
@media(max-width:1023px){:root{--card-width:340px}.service-showcase{--card-height:660px}.offer-motion{padding:22px}.offer-motion h2{font-size:24px;min-height:70px;margin-top:21px}.offer-motion .mini-brand{font-size:14px;gap:8px}.preview-badge{font-size:9px;padding:4px 7px}.offer-sub{font-size:13px;min-height:38px}.art-stage{padding:13px;height:225px}.art-caption{font-size:11px;min-height:50px}.preview-controls button{font-size:10px;padding:8px 3px}.feed-post{height:135px}.feed-post strong{font-size:20px}.film-title{font-size:23px}.film-preview{height:116px;padding:30px 18px 15px}.art-web .browser-mock{height:182px}.art-web .browser-content{padding:13px}.art-web .browser-content strong{font-size:22px}.art-web .phone-mock{width:80px;height:165px;top:30px}.art-web .phone-content strong{font-size:16px}.art-web[data-mode="2"] .phone-mock{height:195px;width:96px;right:calc(50% - 48px)}.art-web[data-mode="2"] .phone-content strong{font-size:17px}.art-web[data-mode="1"] .browser-mock{height:193px}.art-recruiting .job-card{padding:11px}.art-recruiting .apply-form{padding:11px}.art-personal .quote-card>strong{font-size:26px}.art-personal .quote-card{padding:12px 16px}.art-estate .expose-sheet{height:188px;padding:13px}.art-estate .expose-back{height:170px}.art-estate .label-object{font-size:8px}.art-brand .type-specimen>strong{font-size:76px}.art-brand .type-caret{height:60px}.art-brand .identity-card strong{font-size:24px}.art-brand .identity-card{padding:12px 13px}.art-brand .type-specimen small{font-size:8px}.art-email .mail-start{margin-inline:5px;padding:11px}.art-email .mail-branch{height:143px}.art-email .mail-node strong{font-size:10px}.art-crm .kanban{height:146px}.art-crm .crm-follow p{font-size:9px}.offer-link{font-size:12px}}
@media(max-width:767px){:root{--card-width:302px}.service-showcase{--card-height:660px}.offer-motion{padding:20px;border-radius:19px}.offer-motion .mini-brand{font-size:13px;gap:7px}.service-index{width:25px;height:25px;font-size:9px}.preview-badge{font-size:8px;padding:4px 6px}.offer-motion h2{font-size:23px;min-height:77px;margin-top:20px;line-height:1.13}.offer-sub{font-size:13px;min-height:39px}.service-art{margin-top:16px;gap:10px}.art-stage{height:225px;padding:12px}.art-caption{min-height:57px;font-size:11px;line-height:1.5}.preview-controls button{font-size:10px;padding:9px 2px;min-height:37px}.feed-post strong{font-size:19px}.feed-post small{font-size:7px}.social-calendar{font-size:7px}.feed-post{height:139px;padding:12px 9px}.art-web .browser-content strong{font-size:20px}.art-web .phone-content strong{font-size:15px}.art-web[data-mode="2"] .phone-content strong{font-size:17px}.art-web .web-button{font-size:7px}.art-recruiting .job-card strong{font-size:12px}.art-recruiting .form-heading strong{font-size:10px}.art-personal .expert-orbit{font-size:6px}.art-personal .quote-card>strong{font-size:25px}.art-estate .expose-header>b{font-size:13px}.art-estate .expose-label{font-size:7px}.art-brand .swatch{width:32px;height:20px}.art-brand .type-specimen>strong{font-size:72px}.art-brand .identity-card strong{font-size:22px}.art-email .mail-start strong{font-size:10px}.art-email .mail-node{padding:12px 5px}.art-email .mail-node strong{font-size:10px}.art-email .mail-next{font-size:8px}.art-crm .kanban-col>span{font-size:7px}.art-crm .crm-head>span:first-child{font-size:6px}.art-crm .crm-head>span:last-child{font-size:6px}.offer-link{min-height:38px}.carousel-current{min-width:180px}}
@media(max-width:359px){:root{--card-width:280px}.offer-motion{padding:18px}.offer-motion h2{font-size:22px}.preview-badge{display:none}.art-stage{padding:10px}}
@media(prefers-reduced-motion:reduce){.service-art *{animation:none!important;transition:none!important}.art-crm[data-mode="0"] .lead-ticket{left:3px}.art-crm[data-mode="1"] .lead-ticket{left:calc(33.333% + 5px)}.art-crm[data-mode="2"] .lead-ticket{left:calc(66.666% + 7px)}}